stackpress/esm/admin/transform/views/update.js

Incept is a content management framework.

import { VariableDeclarationKind } from 'ts-morph';
export default function updateView(directory, _registry, model) {
    const file = `${model.name}/admin/views/update.tsx`;
    const source = directory.createSourceFile(file, '', { overwrite: true });
    const ids = model.ids.map(column => column.name);
    const path = ids.map(name => `\${results.${name}}`).join('/');
    const link = (action) => `\`\${base}/${model.dash}/${action}/${path}\``;
    source.addImportDeclaration({
        isTypeOnly: true,
        moduleSpecifier: 'stackpress/view/client',
        namedImports: ['NestedObject', 'ServerPageProps']
    });
    source.addImportDeclaration({
        isTypeOnly: true,
        moduleSpecifier: 'stackpress/admin/types',
        namedImports: ['AdminConfigProps']
    });
    source.addImportDeclaration({
        isTypeOnly: true,
        moduleSpecifier: '../../types.js',
        namedImports: [`${model.title}Input`, `${model.title}Extended`]
    });
    source.addImportDeclaration({
        moduleSpecifier: 'r22n',
        namedImports: ['useLanguage']
    });
    source.addImportDeclaration({
        moduleSpecifier: 'stackpress/view/client',
        namedImports: ['useServer', 'Crumbs', 'LayoutAdmin']
    });
    source.addImportDeclaration({
        moduleSpecifier: 'frui/form/Button',
        defaultImport: 'Button'
    });
    model.fields.forEach(column => {
        if (typeof column.field.component !== 'string')
            return;
        if (column.field.method === 'fieldset') {
            source.addImportDeclaration({
                moduleSpecifier: `../../components/fields/${column.title}Field.js`,
                namedImports: [`${column.title}FieldsetControl`]
            });
            return;
        }
        source.addImportDeclaration({
            moduleSpecifier: `../../components/fields/${column.title}Field.js`,
            namedImports: [`${column.title}FieldControl`]
        });
    });
    source.addFunction({
        isExported: true,
        name: `Admin${model.title}UpdateCrumbs`,
        parameters: [{
                name: 'props',
                type: `{ base: string, results: ${model.title}Extended }`
            }],
        statements: (`
      const { base, results } = props;
      //hooks
      const { _ } = useLanguage();
      //variables
      const crumbs = [
        {
          label: (<span className="admin-crumb">{_('${model.plural}')}</span>),
          icon: '${model.icon}',
          href: \`\${base}/${model.dash}/search\`
        },
        {
          label: (
            <span className="admin-crumb">
              {\`${model.transformTemplate('${results?.%s || \'\'}')}\`}
            </span>
          ),
          icon: '${model.icon}',
          href: ${link('detail')}
        },
        {
          label: _('Update'),
          icon: 'edit'
        }
      ];
      return (<Crumbs crumbs={crumbs} />);
    `)
    });
    source.addFunction({
        isExported: true,
        name: `Admin${model.title}UpdateForm`,
        parameters: [{
                name: 'props',
                type: `{ 
        input: Partial<${model.title}Input>,
        errors: NestedObject<string | string[]>
      }`
            }],
        statements: (`
      const { input, errors } = props;
      const { _ } = useLanguage();
      return (
        <form method="post">
          ${model.fields.map(column => column.field.method === 'fieldset' ? (`
            <${column.title}FieldsetControl 
              className="control"
              name="${column.name}"
              value={input['${column.name}']} 
              errors={errors['${column.name}']} 
            />
          `) : (`
            <${column.title}FieldControl 
              className="control"
              name="${column.name}${column.multiple ? '[]' : ''}"
              value={input['${column.name}']} 
              error={errors.${column.name}?.toString()} 
            />
          `)).join('\n')}
          <Button className="submit" type="submit">
            <i className="icon fas fa-fw fa-save"></i>
            {_('Save')}
          </Button>
        </form>
      ); 
    `)
    });
    source.addFunction({
        isExported: true,
        name: `Admin${model.title}UpdateBody`,
        statements: (`
      const { config, request, response } = useServer<${[
            'AdminConfigProps',
            `Partial<${model.title}Input>`,
            `${model.title}Extended`
        ].join(',')}>();
      const base = config.path('admin.base', '/admin');
      const input = { ...response.results, ...request.data() };
      const errors = response.errors();
      const results = response.results as ${model.title}Extended;
      //render
      return (
        <main className="admin-page admin-form-page">
          <div className="admin-crumbs">
            <Admin${model.title}UpdateCrumbs base={base} results={results} />
          </div>
          <div className="admin-form">
            <Admin${model.title}UpdateForm errors={errors} input={input} />
          </div>
        </main>
      );
    `)
    });
    source.addFunction({
        isExported: true,
        name: `Admin${model.title}UpdateHead`,
        parameters: [{
                name: 'props',
                type: 'ServerPageProps<AdminConfigProps>'
            }],
        statements: (`
      const { data, styles = [] } = props;
      const { favicon = '/favicon.ico' } = data?.brand || {};
      const { _ } = useLanguage();
      const mimetype = favicon.endsWith('.png')
        ? 'image/png'
        : favicon.endsWith('.svg')
        ? 'image/svg+xml'
        : 'image/x-icon';
      return (
        <>
          <title>{_('Update ${model.singular}')}</title>
          {favicon && <link rel="icon" type={mimetype} href={favicon} />}
          <link rel="stylesheet" type="text/css" href="/styles/global.css" />
          {styles.map((href, index) => (
            <link key={index} rel="stylesheet" type="text/css" href={href} />
          ))}
        </>
      );  
    `)
    });
    source.addFunction({
        isExported: true,
        name: `Admin${model.title}UpdatePage`,
        parameters: [{
                name: 'props',
                type: 'ServerPageProps<AdminConfigProps>'
            }],
        statements: (`
      return (
        <LayoutAdmin {...props}>
          <Admin${model.title}UpdateBody />
        </LayoutAdmin>
      );
    `)
    });
    source.addVariableStatement({
        isExported: true,
        declarationKind: VariableDeclarationKind.Const,
        declarations: [{
                name: 'Head',
                initializer: `Admin${model.title}UpdateHead`
            }]
    });
    source.addStatements(`export default Admin${model.title}UpdatePage;`);
}