stackpress/cjs/view/transform/filters.js

Incept is a content management framework.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = generate;
exports.generateFilter = generateFilter;
function generate(directory, registry) {
    for (const model of registry.model.values()) {
        model.columns.forEach(column => generateFilter(directory, model, column));
    }
}
function generateFilter(directory, model, column) {
    var _a;
    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(\`${((_a = column.filter.attributes.search) === null || _a === void 0 ? void 0 : _a.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>
      );
    `)
    });
}