stackpress/cjs/view/transform/views.js

Incept is a content management framework.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = generate;
exports.generateFieldsetTable = generateFieldsetTable;
exports.generateFieldsetInfo = generateFieldsetInfo;
exports.generateFormat = generateFormat;
function generate(directory, registry) {
    for (const model of registry.model.values()) {
        model.columns.forEach(column => column.view.method === 'fieldset'
            ? (column.multiple
                ? generateFieldsetTable(directory, model, column)
                : generateFieldsetInfo(directory, model, column))
            : generateFormat(directory, model, column));
    }
    for (const fieldset of registry.fieldset.values()) {
        fieldset.columns.forEach(column => column.view.method === 'fieldset'
            ? (column.multiple
                ? generateFieldsetTable(directory, fieldset, column)
                : generateFieldsetInfo(directory, fieldset, column))
            : generateFormat(directory, fieldset, column));
    }
}
function generateFieldsetTable(directory, fieldset, column) {
    if (!column.fieldset)
        return;
    const columnFieldset = column.fieldset;
    const path = `${fieldset.name}/components/views/${column.title}ViewFormat.tsx`;
    const source = directory.createSourceFile(path, '', { overwrite: true });
    source.addImportDeclaration({
        moduleSpecifier: 'r22n',
        namedImports: ['useLanguage']
    });
    source.addImportDeclaration({
        moduleSpecifier: 'stackpress/view/client',
        namedImports: ['useStripe']
    });
    source.addImportDeclaration({
        moduleSpecifier: 'frui/element/Table',
        namedImports: ['Table', 'Thead', 'Trow', 'Tcol']
    });
    columnFieldset.views.forEach(column => {
        if (typeof column.view.component !== 'string')
            return;
        source.addImportDeclaration({
            moduleSpecifier: `../../../${columnFieldset.name}/components/views/${column.title}ViewFormat.js`,
            defaultImport: `${column.title}ViewFormat`
        });
    });
    const props = `{ 
    data: ${fieldset.title}Extended,
    value: ${columnFieldset.title}${column.multiple ? '[]' : ''} 
  }`;
    source.addFunction({
        isDefaultExport: true,
        name: `${column.title}Format`,
        parameters: [{ name: 'props', type: props }],
        statements: (`
      const { value } = props;
      const { _ } = useLanguage();
      const stripe = useStripe('theme-bg-bg0', 'theme-bg-bg1');
      if (!Array.isArray(value) || !value.length) return null;
      return (
        <Table>
          ${columnFieldset.views.filter(column => column.view.method !== 'hide').map(column => (`
            <Thead noWrap stickyTop className="!theme-bc-bd2 theme-bg-bg2 text-left">
              {_('${column.label}')}
            </Thead>
          `)).join('\n')}
          {value.map((row, index) => (
            <Trow key={index}>
              ${columnFieldset.views.filter(column => column.view.method !== 'hide').map(column => {
            const value = column.required && column.view.method === 'none'
                ? `{row.${column.name}.toString()}`
                : column.required && column.view.method !== 'none'
                    ? `<${column.title}ViewFormat data={row} value={row.${column.name}} />`
                    : !column.required && column.view.method === 'none'
                        ? `{row.${column.name} ? row.${column.name}.toString() : ''}`
                        : `{row.${column.name} ? (<${column.title}ViewFormat data={row} value={row.${column.name}} />) : ''}`;
            const align = column.sortable ? 'text-right' : 'text-left';
            return (`
                  <Tcol noWrap className={\`!theme-bc-bd2 ${align} \${stripe(index)}\`}>
                    ${value}
                  </Tcol>
                `);
        }).join('\n')}
            </Trow>
          ))}
        </Table>
      ); 
    `)
    });
}
function generateFieldsetInfo(directory, fieldset, column) {
    if (!column.fieldset)
        return;
    const columnFieldset = column.fieldset;
    const path = `${fieldset.name}/components/views/${column.title}ViewFormat.tsx`;
    const source = directory.createSourceFile(path, '', { overwrite: true });
    source.addImportDeclaration({
        moduleSpecifier: 'r22n',
        namedImports: ['useLanguage']
    });
    source.addImportDeclaration({
        moduleSpecifier: 'stackpress/view/client',
        namedImports: ['useStripe']
    });
    source.addImportDeclaration({
        moduleSpecifier: 'frui/element/Table',
        namedImports: ['Table', 'Trow', 'Tcol']
    });
    columnFieldset.views.forEach(column => {
        if (typeof column.view.component !== 'string')
            return;
        source.addImportDeclaration({
            moduleSpecifier: `../../../${columnFieldset.name}/components/views/${column.title}ViewFormat.js`,
            defaultImport: `${column.title}ViewFormat`
        });
    });
    const props = `{ 
    data: ${fieldset.title}Extended,
    value: ${columnFieldset.title}${column.multiple ? '[]' : ''} 
  }`;
    source.addFunction({
        isDefaultExport: true,
        name: `${column.title}Format`,
        parameters: [{ name: 'props', type: props }],
        statements: (`
      const { value } = props;
      const { _ } = useLanguage();
      const stripe = useStripe('theme-bg-bg0', 'theme-bg-bg1');
      if (typeof value !== 'object' 
        || value?.constructor?.name !== 'Object'
      ) return null;
      return (
        <Table>
          ${columnFieldset.views.filter(column => column.view.method !== 'hide').map(column => {
            return (`
              <Trow>
                <Tcol noWrap className={\`!theme-bc-bd2 font-bold \${stripe(true)}\`}>
                  {_('${column.label}')}
                </Tcol>
                <Tcol noWrap className={\`!theme-bc-bd2 \${stripe()}\`}>
                  ${column.required && !column.view.component
                ? `{value.${column.name}.toString()}`
                : column.required && column.view.component
                    ? `<${column.title}ViewFormat data={value} value={value.${column.name}} />`
                    : !column.required && !column.view.component
                        ? `{value.${column.name} ? value.${column.name}.toString() : ''}`
                        : `{value.${column.name} ? (<${column.title}ViewFormat data={value} value={value.${column.name}} />) : ''}`}
                </Tcol>
              </Trow>
            `);
        })}
        </Table>
      ); 
    `)
    });
}
function generateFormat(directory, fieldset, column) {
    if (typeof column.view.component !== 'string')
        return;
    const path = `${fieldset.name}/components/views/${column.title}ViewFormat.tsx`;
    const source = directory.createSourceFile(path, '', { overwrite: true });
    source.addImportDeclaration({
        moduleSpecifier: `frui/format/${column.view.component}`,
        defaultImport: column.view.component
    });
    const props = `{ 
    data: ${fieldset.title}Extended,
    value: ${column.typemap.format}${column.multiple ? '[]' : ''} 
  }`;
    if (column.view.method === 'template') {
        source.addImportDeclaration({
            moduleSpecifier: 'mustache',
            defaultImport: 'mustache'
        });
        source.addImportDeclaration({
            isTypeOnly: true,
            moduleSpecifier: '../../types.js',
            namedImports: [`${fieldset.title}Extended`]
        });
        source.addFunction({
            isDefaultExport: true,
            name: `${column.title}Format`,
            parameters: [{ name: 'props', type: props }],
            statements: (`
        //props
        const { data } = props;
        const value = mustache.render(
          '${column.view.attributes.template}',
          data
        );
        //render
        return (
          <${column.view.component} value={value} />
        );
      `)
        });
        return;
    }
    source.addFunction({
        isDefaultExport: true,
        name: `${column.title}ViewFormat`,
        parameters: [{ name: 'props', type: props }],
        statements: (`
      //props
      const { data, value } = props;
      const attributes = ${JSON.stringify(column.view.attributes)};
      //render
      return (
        <${column.view.component} {...attributes} data={data} value={value} />
      );
    `)
    });
}