@sealcode/sealgen 0.15.34 → 0.15.36

package/lib/templates/shared/handlers/default.js

@@ -0,0 +1,50 @@
+import { toPascalCase } from "js-convert-case";
+const default_handler = async (collection_name, { name, is_readonly, is_required }) => {
+  const required_s = `${toPascalCase(
+    collection_name
+  )}.fields.${name}.required`;
+  const fields_var = `${toPascalCase(collection_name)}FormFields`;
+  const fallback_value_initial = `""`;
+  const fallback_value_sealious = `""`;
+  const main_value_initial = `item.get("${name}")`;
+  const main_value_sealious = `data["${name}"]`;
+  const parsed_value = main_value_initial;
+  return {
+    is_required,
+    name,
+    post_create: "",
+    imports: { shared: "", edit: "" },
+    hide_field: is_readonly,
+    field: `${name}: new Fields.CollectionField(${required_s}, ${toPascalCase(
+      collection_name
+    )}.fields.${name})`,
+    hide_control: is_readonly,
+    controls: `new Controls.SimpleInput(${fields_var}.${name}, { label: "${name}"})`,
+    is_required_expr: `${toPascalCase(
+      collection_name
+    )}.fields.${name}.required`,
+    fields_var,
+    top_level_shared: "",
+    hide_initial_value_edit: is_readonly,
+    initial_value_edit: {
+      fallback_value: fallback_value_initial,
+      main_value: main_value_initial,
+      parsed_value
+    },
+    hide_initial_value_create: is_readonly,
+    initial_value_create: "",
+    pre_edit: "",
+    post_edit: "",
+    pre_create: "",
+    main_value_sealious,
+    fallback_value_sealious,
+    sealious_value: (result) => {
+      return result.is_required ? `${result.name}: ${result.main_value_sealious}` : `${result.name}: ${result.main_value_sealious} != null ? ${result.main_value_sealious} : ${result.fallback_value_sealious}`;
+    },
+    hide_sealious_value: is_readonly
+  };
+};
+export {
+  default_handler
+};
+//# sourceMappingURL=default.js.map

package/lib/templates/shared/handlers/enum.js

@@ -0,0 +1,19 @@
+import { toPascalCase } from "js-convert-case";
+const enum_handler = async (collection_name, { name }, _, { fields_var }) => ({
+  // this assertion and import is only necessary because required fields
+  // in Sealious lose the type information. Once this is fixed, we can remove this import here
+  imports: { shared: `import type { FieldTypes } from "sealious";` },
+  field: `${name}: new Fields.PickFromListField(
+			${toPascalCase(collection_name)}.fields["${name}"].required,
+			async (ctx) =>
+				// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+				(${toPascalCase(collection_name)}.fields["${name}"])
+					.getAllowedValues(ctx.$app)
+					.map((value) => ({ value, label: value }))
+		)`,
+  controls: `new Controls.Dropdown(${fields_var}.${name}, { label: "${name}"})`
+});
+export {
+  enum_handler
+};
+//# sourceMappingURL=enum.js.map

package/lib/templates/shared/handlers/file.js

@@ -0,0 +1,18 @@
+import { toCamelCase } from "js-convert-case";
+const file_handler = async (_, { name, is_required }, __, { is_required_expr }) => {
+  const tempname = toCamelCase("prepared-" + name);
+  return {
+    field: `${name}: new Fields.File(${is_required_expr}, TheFileManager)`,
+    initial_value_edit: `${name}: {old: item.get("${name}")}`,
+    pre_edit: `const ${tempname} = data.${name}.new || data.${name}.old;
+				if(!${tempname}){
+				    throw new Error("Missing field: ${name}")
+         		}`,
+    fallback_value_sealious: "null",
+    ...is_required ? { main_value_sealious: tempname } : {}
+  };
+};
+export {
+  file_handler
+};
+//# sourceMappingURL=file.js.map

package/lib/templates/shared/handlers/image.js

@@ -0,0 +1,32 @@
+import { toCamelCase } from "js-convert-case";
+const image_handler = async (_, { name, is_required }, importPath, { is_required_expr, fields_var }) => {
+  const tempname = toCamelCase("prepared-" + name);
+  return {
+    imports: {
+      shared: `import { imageRouter } from "${importPath(
+        "src/back/image-router.js"
+      )}";
+            import { TheFileManager } from "${importPath(
+        "src/back/file-manager.js"
+      )}";`
+    },
+    field: `${name}: new Fields.File(${is_required_expr}, TheFileManager)`,
+    controls: `new Controls.Photo(${fields_var}.${name}, imageRouter, {
+			label: "${name}",
+		})`,
+    initial_value_edit: `{old: item.get("${name}")}`,
+    pre_edit: `const ${tempname} = data.${name}.new || data.${name}.old ` + (is_required ? `; if(!${tempname}){
+				    throw new Error("Missing field: ${name}")
+         		}` : " || undefined;"),
+    pre_create: `const ${tempname} = data.${name}.new || data.${name}.old;
+				if(!${tempname}){
+				    throw new Error("Missing field: ${name}")
+         		}`,
+    fallback_value_sealious: "null",
+    sealious_value: () => `${name}: ${tempname}`
+  };
+};
+export {
+  image_handler
+};
+//# sourceMappingURL=image.js.map

package/lib/templates/shared/handlers/int.js

@@ -0,0 +1,11 @@
+const int_handler = async (_, { name }, __, { is_required_expr, fields_var }) => ({
+  field: `${name}: new Fields.NumberField(${is_required_expr}, 0)`,
+  controls: `new Controls.Number(${fields_var}.${name}, { label: "${name}" })`,
+  initial_value_edit: {
+    parsed_value: `String(item.get("${name}"))`
+  }
+});
+export {
+  int_handler
+};
+//# sourceMappingURL=int.js.map

package/lib/templates/shared/handlers/jdd.js

@@ -0,0 +1,10 @@
+const jdd_handler = async (_, { name }) => ({
+  field: ``,
+  initial_value_edit: "",
+  controls: "",
+  sealious_value: () => `${name}: []`
+});
+export {
+  jdd_handler
+};
+//# sourceMappingURL=jdd.js.map

package/lib/templates/shared/handlers/single-reference.js

@@ -0,0 +1,12 @@
+const single_reference_handler = async (_, { name }, __, { fields_var }) => {
+  return {
+    controls: `new Controls.SingleReferenceDropdown(${fields_var}.${name}, {
+            label: "${name}",
+            getLabel: (item)=>item.id
+        })`
+  };
+};
+export {
+  single_reference_handler
+};
+//# sourceMappingURL=single-reference.js.map

package/lib/templates/shared/handlers/structured-array.js

@@ -0,0 +1,33 @@
+const structured_array_handler = async (_, { name, subfields }, __, { fields_var }) => ({
+  field: `${name}: new Fields.Table({
+        ${subfields.map(
+    (subfield) => `${subfield.name}: new Fields.SimpleFormField(true)`
+  ).join(",\n")}
+    })`,
+  controls: `new Controls.Table(${fields_var}.${name}, {
+        label: "${name}",
+		render_fields: {
+            ${subfields.map(
+    ({
+      name: name2
+    }) => `"${name2}": (fctx, name, value) => /* HTML */ \`<input
+				name="\${name}"
+				value="\${value}"
+				form="\${fctx.form_id}"
+                autocomplete="off"
+			/>\``
+  ).join(",\n")}
+			
+		},
+		allow_adding: true,
+        allow_removing: true,
+		make_new_row: async () => ({
+           ${subfields.map(({ name: name2 }) => `"${name2}": ""`).join(",\n")}
+		}),
+	})`,
+  fallback_value_sealious: `[]`
+});
+export {
+  structured_array_handler
+};
+//# sourceMappingURL=structured-array.js.map

package/lib/templates/shared/item-delete.js

@@ -0,0 +1,43 @@
+import { toKebabCase, toPascalCase } from "js-convert-case";
+import { curryImportPath } from "../../utils/import-path.js";
+import { formatWithPrettier } from "../../utils/prettier.js";
+function itemDeleteTemplate(delete_action_name, collection_name, newfilefullpath, list_action_name) {
+  const importPath = curryImportPath(newfilefullpath);
+  const result = `import type { Context } from "koa";
+import { Mountable } from "@sealcode/sealgen";
+import type Router from "@koa/router";
+
+import { ${toPascalCase(collection_name)} } from "${importPath(
+    "src/back/collections/collections.js"
+  )}";
+
+import { ${list_action_name}URL } from "${importPath(
+    "src/back/routes/urls.js"
+  )}";
+
+export const actionName = "${delete_action_name}";
+
+export default new (class ${delete_action_name}Redirect extends Mountable {
+    canAccess = async (ctx: Context) => {
+        const policy = ${toPascalCase(collection_name)}.getPolicy("edit");
+		const response = await policy.check(ctx.$context);
+		 return { canAccess: response?.allowed || false, message: response?.reason || "" };
+	};
+
+	mount(router: Router, path: string) {
+		router.get(path, async (ctx) => {
+            await ctx.$app.collections["${toKebabCase(
+    collection_name
+  )}"].removeByID(ctx.$context, ctx.params.id);
+			ctx.status = 302;
+			ctx.redirect(${list_action_name}URL);
+		});
+	}
+})();
+`;
+  return formatWithPrettier(result);
+}
+export {
+  itemDeleteTemplate
+};
+//# sourceMappingURL=item-delete.js.map

package/lib/templates/shared/shared-crud-form-fields.js

@@ -0,0 +1,108 @@
+import { toPascalCase } from "js-convert-case";
+import { extractCollectionClassname } from "../../generate-collections.js";
+import extract_fields_from_collection from "../../utils/extract-fields-from-collection.js";
+import _locreq from "locreq";
+import { curryImportPath } from "../../utils/import-path.js";
+import { formatWithPrettier } from "../../utils/prettier.js";
+import { default_handler } from "./handlers/default.js";
+import { enum_handler } from "./handlers/enum.js";
+import { image_handler } from "./handlers/image.js";
+import { file_handler } from "./handlers/file.js";
+import { int_handler } from "./handlers/int.js";
+import { boolean_handler } from "./handlers/boolean.js";
+import { jdd_handler } from "./handlers/jdd.js";
+import { date_handler } from "./handlers/date.js";
+import { deep_reverse_single_reference_handler } from "./handlers/deep-reverse-single-reference.js";
+import { structured_array_handler } from "./handlers/structured-array.js";
+const target_locreq = _locreq(process.cwd());
+const field_handlers = {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
+  default: default_handler,
+  enum: enum_handler,
+  image: image_handler,
+  file: file_handler,
+  int: int_handler,
+  boolean: boolean_handler,
+  jdd: jdd_handler,
+  date: date_handler,
+  "deep-reverse-single-reference": deep_reverse_single_reference_handler,
+  "structured-array": structured_array_handler
+};
+async function getFieldHandler(collection_name, field, importPath) {
+  const defaults = await field_handlers.default(
+    collection_name,
+    field,
+    importPath,
+    {}
+  );
+  const result = {
+    ...defaults,
+    ...await field_handlers[field.type]?.(
+      collection_name,
+      field,
+      importPath,
+      defaults
+    ) || {}
+  };
+  const result_initial_value_edit = result.initial_value_edit;
+  result.initial_value_edit = typeof result_initial_value_edit == "string" ? result_initial_value_edit : {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ...defaults.initial_value_edit,
+    ...result_initial_value_edit
+  };
+  return result;
+}
+async function sharedCrudFormFields(collection_name, newfilefullpath) {
+  const [uppercase_collection, collection_fields] = await Promise.all([
+    extractCollectionClassname(
+      target_locreq.resolve(
+        "src/back/collections/" + collection_name + ".ts"
+      )
+    ),
+    extract_fields_from_collection(collection_name)
+  ]);
+  const importPath = curryImportPath(newfilefullpath);
+  const field_handler_results = await Promise.all(
+    collection_fields.map(async (field) => {
+      return getFieldHandler(collection_name, field, importPath);
+    })
+  );
+  const result = `import { Controls, Fields } from "@sealcode/sealgen";
+import { ${uppercase_collection} } from "${importPath(
+    "src/back/collections/collections.js"
+  )}";
+
+${Array.from(
+    new Set(
+      field_handler_results.filter(
+        ({ hide_field, hide_control }) => !hide_field && !hide_control
+      ).map(({ imports }) => imports.shared || "")
+    )
+  ).join("\n")}
+
+
+
+export const ${toPascalCase(collection_name)}FormFields = <const>
+{
+	${field_handler_results.filter(({ hide_field }) => !hide_field).map(({ field }) => field).filter((e) => e != "").join(",\n")}
+};
+
+export const ${toPascalCase(collection_name)}FormControls = [
+	${field_handler_results.filter(({ hide_control }) => !hide_control).map(({ controls }) => controls).filter((e) => e != "").join(",\n")}
+];
+
+${Array.from(
+    new Set(
+      field_handler_results.map(({ top_level_shared }) => top_level_shared)
+    )
+  ).join("\n")}
+
+`;
+  return formatWithPrettier(result);
+}
+export {
+  field_handlers,
+  getFieldHandler,
+  sharedCrudFormFields
+};
+//# sourceMappingURL=shared-crud-form-fields.js.map

package/lib/utils/extract-fields-from-collection.js

@@ -3,6 +3,12 @@ import { exec } from "./utils.js";
 const target_locreq = _locreq(process.cwd());
 import { promises as fs } from "fs";
 import { is, predicates } from "@sealcode/ts-predicates";
+const counter = function* () {
+  let i = 0;
+  while (true) {
+    yield i++;
+  }
+}();
 async function extract_fields_from_collection(collection_name) {
   const extractor_code = `import {default as the_app} from "./app.js";
 const c = new the_app().collections["${collection_name}"];
@@ -10,15 +16,34 @@ const fields = [];
 for (const field_name in c.fields){
     const field = c.fields[field_name];
     let type = field.typeName;
+    let target = null;
+    let referencing_collection = null;
+    let referencing_field = null;
+    let intermediary_field_that_points_there = null;
+    let is_readonly = false;
+    let is_required = field.required;
+    let subfields = [];
     if(["derived-value", "cached-value"].includes(type)){
-	type = field.virtual_field.typeName
+	    type = field.virtual_field.typeName;
+    }
+    if(["derived-value", "cached-value", "reverse-single-reference"].includes(field.typeName)){
+	    is_readonly = true;
+    }
+    if(type == "deep-reverse-single-reference" || type =="reverse-single-reference"){
+		target = field.target_collection;
+        referencing_collection = field.referencing_collection;
+		referencing_field = field.referencing_field;
+		intermediary_field_that_points_there = field.intermediary_field_that_points_there
+    }
+    if( type == "structured-array" ) {
+         subfields = Object.keys(field.subfields).map(key=>({name: key}));
     }
-    fields.push({name: field_name, type})
+    fields.push({ name: field_name, type, target, referencing_collection, referencing_field, intermediary_field_that_points_there, is_readonly, is_required, subfields })
 }
-console.log(JSON.stringify(fields));
+    console.log(JSON.stringify(fields));
 `;
   const extractor_code_path = target_locreq.resolve(
-    "dist/back/___extract_fields.js"
+    `dist/back/___extract_fields--${counter.next().value || 0}.js`
   );
   await fs.writeFile(extractor_code_path, extractor_code);
   const { stdout } = await exec("node", [extractor_code_path]);
@@ -29,7 +54,8 @@ console.log(JSON.stringify(fields));
     predicates.array(
       predicates.shape({
         name: predicates.string,
-        type: predicates.string
+        type: predicates.string,
+        is_readonly: predicates.boolean
       })
     )
   )) {

package/lib/utils/write-file.js

@@ -0,0 +1,11 @@
+import { promises as fs } from "node:fs";
+import { resolve } from "path";
+async function writeFile(path, content) {
+  await fs.mkdir(resolve(path, "../"), { recursive: true });
+  await fs.writeFile(path, content);
+  console.log(`${path} created`);
+}
+export {
+  writeFile
+};
+//# sourceMappingURL=write-file.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.15.34",
+	"version": "0.15.36",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"type": "module",
@@ -61,6 +61,7 @@
 		"@koa/router": "^12.0.1",
 		"@sealcode/file-manager": "^1.0.2",
 		"@sealcode/ts-predicates": "^0.4.3",
+		"chokidar": "^3.6.0",
 		"deepmerge": "^4.3.1",
 		"esbuild": "^0.20.0",
 		"escape-goat": "^4.0.0",

package/src/add-crud.ts

@@ -0,0 +1,153 @@
+import _locreq from "locreq";
+import { escape_url_params } from "./utils/escape-url-params.js";
+import prompts from "prompts";
+import { toKebabCase, toPascalCase } from "js-convert-case";
+import { listCollections } from "./utils/list-collections.js";
+import { collectionListTemplate } from "./templates/shared/collection-list.js";
+import { writeFile } from "./utils/write-file.js";
+import { importPath } from "./utils/import-path.js";
+import { sharedCrudFormFields } from "./templates/shared/shared-crud-form-fields.js";
+import { generateRoutes } from "./generate-routes.js";
+import { createItemFormTemplate } from "./templates/shared/collection-create-form.js";
+import { editItemFormTemplate } from "./templates/shared/collection-edit-form.js";
+import { askItemDeleteTemplate } from "./templates/shared/confirm-item-delete.js";
+import { itemDeleteTemplate } from "./templates/shared/item-delete.js";
+
+export async function addCRUD(
+	params: Partial<{ [key in "collection" | "url"]: string }>,
+	app_directory: string = process.cwd()
+) {
+	const target_locreq = _locreq(app_directory);
+	prompts.override(params);
+	const response = await prompts([
+		{
+			type: "autocomplete",
+			name: "collection",
+			message:
+				"Which sealious collection do you like to add CRUD forms for?",
+			choices: (
+				await listCollections()
+			).map((collection) => ({
+				title: collection,
+				value: collection,
+			})),
+		},
+		{
+			type: "text",
+			name: "url",
+			message:
+				"Enter a full absolute path for the new route (for example: /admin/users/:id/edit): ",
+			validate: (s: string) =>
+				s.trim()[0] == "/" ? true : "Should start with a '/'",
+			initial: function (_, { collection }: { collection: string }) {
+				return "/" + toKebabCase(collection);
+			},
+		},
+	]);
+
+	const collection_name = response.collection as string;
+	const url = response.url as string;
+	const list_action_name = toPascalCase(collection_name) + "CRUDList";
+	const create_action_name = toPascalCase(collection_name) + "CRUDCreate";
+	const edit_action_name = toPascalCase(collection_name) + "CRUDEdit";
+	const delete_ask_action_name =
+		toPascalCase(collection_name) + "CRUDDeleteAsk";
+	const delete_action_name = toPascalCase(collection_name) + "CRUDDelete";
+
+	/* create the list endpoint */
+	const list_path = target_locreq.resolve(
+		`src/back/routes/${escape_url_params(url)}.list.tsx`
+	);
+	const list_content = await collectionListTemplate(
+		collection_name,
+		list_action_name,
+		list_path,
+		{
+			post_import_js: `import { ${create_action_name}URL, ${edit_action_name}URL, ${delete_ask_action_name}URL } from "${importPath(
+				list_path,
+				"src/back/routes/urls.ts"
+			)}";`,
+			post_header_html: `<a href={${create_action_name}URL}> Create </a>`,
+			render_item: (
+				collection_name: string
+			) => `	async renderItem(ctx: Context, item: CollectionItem<typeof ${toPascalCase(
+				collection_name
+			)}>) {
+					   return <tr>
+						   {displayFields.map(({ field, format }) => {
+							   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any
+							   const value = item.get(field as any);
+							   return <td>{format ? format(value, item) : value}</td>;
+						   })}
+                           <td><div class="sealious-list__actions">
+                               <a href={${edit_action_name}URL(item.id)}>Edit</a>
+                               <a href={${delete_ask_action_name}URL(item.id)}>Delete</a>
+                               </div>
+                           </td>
+					   </tr>;
+				   }`,
+		}
+	);
+	await writeFile(list_path, list_content);
+
+	/* create the shared fields file */
+	const fields_path = target_locreq.resolve(
+		`src/back/routes/${escape_url_params(url)}/shared.ts`
+	);
+	const fields_content = await sharedCrudFormFields(
+		collection_name,
+		fields_path
+	);
+	await writeFile(fields_path, fields_content);
+
+	/* create the create endpoint */
+	const create_path = target_locreq.resolve(
+		`src/back/routes/${escape_url_params(url)}/create.form.ts`
+	);
+	const create_content = await createItemFormTemplate(
+		create_action_name,
+		create_path,
+		collection_name,
+		list_action_name
+	);
+	await writeFile(create_path, create_content);
+
+	/* create the edit endpoint */
+	const edit_path = target_locreq.resolve(
+		`src/back/routes/${escape_url_params(url)}/[id]/edit.form.ts`
+	);
+	const edit_content = await editItemFormTemplate(
+		edit_action_name,
+		edit_path,
+		collection_name,
+		list_action_name
+	);
+	await writeFile(edit_path, edit_content);
+
+	/* create the confirm delete endpoint */
+	const delete_ask_path = target_locreq.resolve(
+		`src/back/routes/${escape_url_params(url)}/[id]/delete-ask.page.tsx`
+	);
+	const delete_ask_content = await askItemDeleteTemplate(
+		delete_ask_action_name,
+		collection_name,
+		delete_ask_path,
+		list_action_name,
+		delete_action_name
+	);
+	await writeFile(delete_ask_path, delete_ask_content);
+
+	/* create the actual delete endpoint */
+	const delete_path = target_locreq.resolve(
+		`src/back/routes/${escape_url_params(url)}/[id]/delete.page.tsx`
+	);
+	const delete_content = await itemDeleteTemplate(
+		delete_action_name,
+		collection_name,
+		delete_ask_path,
+		list_action_name
+	);
+	await writeFile(delete_path, delete_content);
+
+	await generateRoutes();
+}

package/src/cli.ts

@@ -11,6 +11,7 @@ import { makeEnv } from "./make-env.js";
 import yargs from "yargs/yargs";
 import { getFonts } from "./get-fonts.js";
 import { generateStimulusControllers } from "./generate-stimulus.js";
+import { addCRUD } from "./add-crud.js";
 
 const actions: Record<
 	string,
@@ -18,6 +19,7 @@ const actions: Record<
 > = {
 	"add-collection": addCollection,
 	"add-route": addRoute,
+	"add-crud": addCRUD,
 	"generate-collections": generateCollections,
 	"generate-components": generateComponents,
 	"generate-routes": generateRoutes,

package/src/forms/controls/controls.ts

@@ -29,3 +29,4 @@ export * from "./number.js";
 export * from "./multiple-photos.js";
 // export * from "./reverse-single-reference";
 export * from "./array.js";
+export * from "./table.js";

package/src/forms/controls/form-control.ts

@@ -2,6 +2,7 @@ import Router from "@koa/router";
 import { Context } from "koa";
 import { FlatTemplatable } from "tempstream";
 import { FormDataValue, FormMessage } from "../form-types.js";
+import type { Form } from "../form.js";
 
 export class FormControlContext {
 	constructor(
@@ -20,6 +21,6 @@ export abstract class FormControl {
 	): FlatTemplatable | Promise<FlatTemplatable>;
 	abstract role: "input" | "decoration" | "messages" | "submit";
 
-	// eslint-disable-next-line @typescript-eslint/no-empty-function
-	mount(_router: Router) {}
+	// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-explicit-any
+	mount(_router: Router, _form: Form<any, any>) {}
 }

package/src/forms/controls/multiple-photos.ts

@@ -38,6 +38,7 @@ export class MultiplePhotos extends MultipleFiles {
 				${this.imageRouter.image(path, {
 					resolutions: [150, 300],
 					sizesAttr: "150px",
+					alt: "",
 				})}
 			</a>
 			<span class="filename">

package/src/forms/controls/single-reference.test.ts

@@ -40,7 +40,7 @@ describe("single-reference.test", () => {
 		await test_app.addFile(
 			form_file_path,
 			await formTemplate("SomeForm", form_file_path, {
-				postimport: `import {Comments} from "../collections/collections.js";`,
+				postimport: `import {Comments} from "../collections/collections.js"; import {Fields} from "@sealcode/sealgen";`,
 				fields: `article: new Fields.CollectionField(true, Comments.fields.article),`,
 				controls: `new Controls.SingleReferenceDropdown(fields.article, {getLabel: item=>item.get("title")}),`,
 				validate_method: "",