stackpress
Version:
Incept is a content management framework.
113 lines (111 loc) • 3.92 kB
JavaScript
export default function generate(directory, registry) {
for (const model of registry.model.values()) {
model.columns.forEach(column => generateFilter(directory, model, column));
}
}
export function generateFilter(directory, model, column) {
if (typeof column.filter.component !== 'string')
return;
const path = `${model.name}/components/filters/${column.title}Filter.tsx`;
const source = directory.createSourceFile(path, '', { overwrite: true });
const BoolComponent = ['Checkbox', 'Switch'].indexOf(column.filter.component) !== -1;
source.addImportDeclaration({
isTypeOnly: true,
moduleSpecifier: 'stackpress/view/client',
namedImports: ['FieldProps', 'ControlProps']
});
if (column.field.method === 'relation') {
source.addImportDeclaration({
moduleSpecifier: 'mustache',
defaultImport: 'mustache'
});
}
source.addImportDeclaration({
moduleSpecifier: 'r22n',
namedImports: ['useLanguage']
});
source.addImportDeclaration({
moduleSpecifier: 'frui/form/Control',
defaultImport: 'Control'
});
source.addImportDeclaration({
moduleSpecifier: `frui/field/${column.filter.component}`,
defaultImport: column.filter.component
});
source.addFunction({
isExported: true,
name: `${column.title}Filter`,
parameters: [
{ name: 'props', type: 'FieldProps' }
],
statements: (`
//props
const { className, value, change, error = false } = props;
${column.filter.method === 'relation' ? (`
//render
return (
<${column.filter.component}
name="filter[${column.name}]${column.multiple ? '[]' : ''}"
className={className}
error={error}
defaultValue={value}
searchable={true}
onQuery={async (query, update) => {
const response = await fetch(\`${column.filter.attributes.search?.includes('?')
? column.filter.attributes.search + '&q=${query}'
: column.filter.attributes.search + '?q=${query}'}\`);
const json = await response.json();
const options = json.results.map(row => ({
label: mustache.render('${column.filter.attributes.template}', row),
value: row.${column.filter.attributes.id}
}));
update(options);
}}
/>
);
`) : (`
const attributes = ${JSON.stringify(column.filter.attributes)};
//render
return (
<${column.filter.component}
{...attributes}
name="filter[${column.name}]${column.multiple ? '[]' : ''}"
className={className}
error={error}
${BoolComponent ? (`
defaultValue="1"
defaultChecked={!!value}
`) : (`
defaultValue={value}
`)}
onUpdate={value => change && change('filter[${column.name}]${column.multiple ? '[]' : ''}', value)}
/>
);
`)}
`)
});
source.addFunction({
isExported: true,
name: `${column.title}FilterControl`,
parameters: [
{ name: 'props', type: 'ControlProps' }
],
statements: (`
//props
const { className, value, change, error } = props;
//hooks
const { _ } = useLanguage();
//render
return (
<Control label={_('${column.label}')} error={error} className={className}>
${BoolComponent ? `<input type="hidden" name="filter[${column.name}]${column.multiple ? '[]' : ''}" value="0" />` : ''}
<${column.title}Filter
error={!!error}
value={value}
change={change}
/>
</Control>
);
`)
});
}