@tsed/schema-formio 8.0.1 → 8.0.2

package/src/decorators/select.spec.ts

@@ -0,0 +1,82 @@
+import {Enum} from "@tsed/schema";
+
+import {getFormioSchema} from "../utils/getFormioSchema.js";
+import {Select} from "./select.js";
+
+describe("Select", () => {
+  it("should declare a model with select field", async () => {
+    class Model {
+      @Select()
+      test: string;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      components: [
+        {
+          disabled: false,
+          input: true,
+          key: "test",
+          label: "Test",
+          selectThreshold: 0.3,
+          type: "select",
+          validate: {
+            required: false
+          },
+          widget: "choicesjs"
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      title: "Model",
+      type: "form",
+      submissionAccess: [],
+      access: [],
+      tags: []
+    });
+  });
+  it("should with enum", async () => {
+    enum MyEnum {
+      TEST1 = "TEST1",
+      TEST2 = "TEST2"
+    }
+
+    class Model {
+      @Select()
+      @Enum(MyEnum)
+      test: MyEnum;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      access: [],
+      components: [
+        {
+          data: {
+            json: '[{"label":"TEST1","value":"TEST1"},{"label":"TEST2","value":"TEST2"}]'
+          },
+          dataSrc: "json",
+          disabled: false,
+          idPath: "value",
+          input: true,
+          key: "test",
+          label: "Test",
+          selectThreshold: 0.3,
+          template: "<span>{{ item.label }}</span>",
+          type: "select",
+          validate: {
+            required: false
+          },
+          valueProperty: "value",
+          widget: "choicesjs"
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      submissionAccess: [],
+      tags: [],
+      title: "Model",
+      type: "form"
+    });
+  });
+});

package/src/decorators/select.ts

@@ -0,0 +1,25 @@
+import {Component} from "./component.js";
+
+export interface SelectOpts extends Record<string, any> {
+  idPath?: string;
+  valueProperty?: string;
+  template?: string;
+  multiple?: boolean;
+}
+
+/**
+ * Configure the property as Select component.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ */
+export function Select(props: SelectOpts = {}): PropertyDecorator {
+  return Component({
+    selectThreshold: 0.3,
+    input: true,
+    widget: "choicesjs",
+    ...props,
+    type: "select"
+  });
+}

package/src/decorators/suffix.spec.ts

@@ -0,0 +1,35 @@
+import {getFormioSchema} from "../utils/getFormioSchema.js";
+import {Suffix} from "./suffix.js";
+
+describe("@Suffix", () => {
+  it("should add a suffix on field", async () => {
+    class Model {
+      @Suffix("The suffix")
+      test: string;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      access: [],
+      components: [
+        {
+          disabled: false,
+          input: true,
+          key: "test",
+          label: "Test",
+          suffix: "The suffix",
+          type: "textfield",
+          validate: {
+            required: false
+          }
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      submissionAccess: [],
+      tags: [],
+      title: "Model",
+      type: "form"
+    });
+  });
+});

package/src/decorators/suffix.ts

@@ -0,0 +1,14 @@
+import {Component} from "./component.js";
+
+/**
+ * Add suffix word on the decorated field.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ */
+export function Suffix(suffix: string) {
+  return Component({
+    suffix
+  });
+}

package/src/decorators/tableView.spec.ts

@@ -0,0 +1,35 @@
+import {getFormioSchema} from "../utils/getFormioSchema.js";
+import {TableView} from "./tableView.js";
+
+describe("@TableView", () => {
+  it("should change the table view option", async () => {
+    class Model {
+      @TableView(false)
+      test: string;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      access: [],
+      components: [
+        {
+          disabled: false,
+          input: true,
+          key: "test",
+          label: "Test",
+          type: "textfield",
+          tableView: false,
+          validate: {
+            required: false
+          }
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      submissionAccess: [],
+      tags: [],
+      title: "Model",
+      type: "form"
+    });
+  });
+});

package/src/decorators/tableView.ts

@@ -0,0 +1,15 @@
+import {Component} from "./component.js";
+
+/**
+ * Change the visibility of the current property on a table.
+ * @param bool
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ */
+export function TableView(bool: boolean): PropertyDecorator {
+  return Component({
+    tableView: bool
+  });
+}

package/src/decorators/tabs.ts

@@ -0,0 +1,18 @@
+import {JsonEntityFn, JsonEntityStore} from "@tsed/schema";
+import {camelCase} from "change-case";
+
+/**
+ * Group the current property in tabs components.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ */
+export function Tabs(label: string) {
+  return JsonEntityFn((store: JsonEntityStore) => {
+    store.schema.customKey("x-formiotabs", {
+      key: camelCase(label),
+      label
+    });
+  });
+}

package/src/decorators/textCase.spec.ts

@@ -0,0 +1,35 @@
+import {getFormioSchema} from "../utils/getFormioSchema.js";
+import {TextCase} from "./textCase.js";
+
+describe("@TextCase", () => {
+  it("should change the case", async () => {
+    class Model {
+      @TextCase("lowercase")
+      test: string;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      access: [],
+      components: [
+        {
+          disabled: false,
+          input: true,
+          key: "test",
+          label: "Test",
+          case: "lowercase",
+          type: "textfield",
+          validate: {
+            required: false
+          }
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      submissionAccess: [],
+      tags: [],
+      title: "Model",
+      type: "form"
+    });
+  });
+});

package/src/decorators/textCase.ts

@@ -0,0 +1,15 @@
+import {Component} from "./component.js";
+
+/**
+ * Force the output of this field to be sanitized in a specific format.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ * @param textCase
+ */
+export function TextCase(textCase: "uppercase" | "lowercase") {
+  return Component({
+    case: textCase
+  });
+}

package/src/decorators/textarea.spec.ts

@@ -0,0 +1,35 @@
+import {getFormioSchema} from "../utils/getFormioSchema.js";
+import {Textarea} from "./textarea.js";
+
+describe("Textarea", () => {
+  it("should declare a model with Textarea field", async () => {
+    class Model {
+      @Textarea()
+      test: string;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      components: [
+        {
+          autoExpand: false,
+          disabled: false,
+          input: true,
+          label: "Test",
+          key: "test",
+          type: "textarea",
+          validate: {
+            required: false
+          }
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      title: "Model",
+      type: "form",
+      submissionAccess: [],
+      access: [],
+      tags: []
+    });
+  });
+});

package/src/decorators/textarea.ts

@@ -0,0 +1,21 @@
+import {Component} from "./component.js";
+
+export interface TextareaOpts extends Record<string, any> {
+  showCharCount?: boolean;
+  showWordCount?: boolean;
+}
+
+/**
+ * Configure the property as Textarea component.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ */
+export function Textarea(props: TextareaOpts = {}): PropertyDecorator {
+  return Component({
+    autoExpand: false,
+    ...props,
+    type: "textarea"
+  });
+}

package/src/decorators/tooltip.spec.ts

@@ -0,0 +1,35 @@
+import {getFormioSchema} from "../utils/getFormioSchema.js";
+import {Tooltip} from "./tooltip.js";
+
+describe("@Tooltip", () => {
+  it("should add a tooltip on field", async () => {
+    class Model {
+      @Tooltip("The tooltip")
+      test: string;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual({
+      access: [],
+      components: [
+        {
+          disabled: false,
+          input: true,
+          key: "test",
+          label: "Test",
+          tooltip: "The tooltip",
+          type: "textfield",
+          validate: {
+            required: false
+          }
+        }
+      ],
+      display: "form",
+      machineName: "model",
+      name: "model",
+      submissionAccess: [],
+      tags: [],
+      title: "Model",
+      type: "form"
+    });
+  });
+});

package/src/decorators/tooltip.ts

@@ -0,0 +1,15 @@
+import {Component} from "./component.js";
+
+/**
+ * Adds a tooltip to the side of this field.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ * @param tooltip
+ */
+export function Tooltip(tooltip: string) {
+  return Component({
+    tooltip
+  });
+}

package/src/decorators/validate.ts

@@ -0,0 +1,18 @@
+import {Component} from "./component.js";
+
+/**
+ * Add validation rules.
+ * @decorator
+ * @formio
+ * @property
+ * @schema
+ * @param key
+ * @param value
+ */
+export function Validate(key: string, value: any) {
+  return Component({
+    validate: {
+      [key]: value
+    }
+  });
+}

package/src/domain/FormioDataResolver.ts

@@ -0,0 +1,5 @@
+import {FormioComponent, FormioForm} from "@tsed/formio-types";
+import {JsonSchemaOptions} from "@tsed/schema";
+
+export type FormioDataResolverCtx = {component: FormioComponent; form: FormioForm} & JsonSchemaOptions;
+export type FormioDataResolver = (ctx: FormioDataResolverCtx) => Promise<any> | any;

package/src/index.ts

@@ -0,0 +1,52 @@
+/**
+ * @file Automatically generated by @tsed/barrels.
+ */
+export * from "./components/anyToComponent.js";
+export * from "./components/arrayToComponent.js";
+export * from "./components/booleanToComponent.js";
+export * from "./components/dateToComponent.js";
+export * from "./components/defaultToComponent.js";
+export * from "./components/enumToComponent.js";
+export * from "./components/mapToComponent.js";
+export * from "./components/nestedToComponent.js";
+export * from "./components/numberToComponent.js";
+export * from "./components/objectToEditGrid.js";
+export * from "./components/panelToComponent.js";
+export * from "./components/propertiesToComponents.js";
+export * from "./components/stringToComponent.js";
+export * from "./decorators/component.js";
+export * from "./decorators/conditional.js";
+export * from "./decorators/currency.js";
+export * from "./decorators/customClass.js";
+export * from "./decorators/customConditional.js";
+export * from "./decorators/dataSourceJson.js";
+export * from "./decorators/dataSourceUrl.js";
+export * from "./decorators/errorLabel.js";
+export * from "./decorators/errorMessage.js";
+export * from "./decorators/form.js";
+export * from "./decorators/hidden.js";
+export * from "./decorators/inputTags.js";
+export * from "./decorators/label.js";
+export * from "./decorators/mask.js";
+export * from "./decorators/maxWords.js";
+export * from "./decorators/minWords.js";
+export * from "./decorators/modalEdit.js";
+export * from "./decorators/multiple.js";
+export * from "./decorators/openWhenEmpty.js";
+export * from "./decorators/password.js";
+export * from "./decorators/placeholder.js";
+export * from "./decorators/prefix.js";
+export * from "./decorators/select.js";
+export * from "./decorators/suffix.js";
+export * from "./decorators/tableView.js";
+export * from "./decorators/tabs.js";
+export * from "./decorators/textarea.js";
+export * from "./decorators/textCase.js";
+export * from "./decorators/tooltip.js";
+export * from "./decorators/validate.js";
+export * from "./domain/FormioDataResolver.js";
+export * from "./registries/FormioMappersContainer.js";
+export * from "./registries/FormsContainer.js";
+export * from "./utils/getFormioProps.js";
+export * from "./utils/getFormioSchema.js";
+export * from "./utils/getRef.js";

package/src/registries/FormioMappersContainer.ts

@@ -0,0 +1,21 @@
+export interface FormioMapper {
+  (schema: any, options: any): any;
+}
+
+const FormioMappersContainer: Map<string, FormioMapper> = new Map();
+
+export function registerFormioMapper(type: string, mapper: FormioMapper) {
+  return FormioMappersContainer.set(type, mapper);
+}
+
+export function getFormioMapper(type: string): FormioMapper {
+  // istanbul ignore next
+  if (!FormioMappersContainer.has(type)) {
+    throw new Error(`Formio ${type} mapper doesn't exists`);
+  }
+  return FormioMappersContainer.get(type)!;
+}
+
+export function execMapper(type: string, schema: any, options: any): any {
+  return getFormioMapper(type)(schema, options);
+}

package/src/registries/FormsContainer.ts

@@ -0,0 +1,4 @@
+import {Type} from "@tsed/core";
+
+// tslint:disable-next-line:variable-name
+export const FormsContainer: Map<string, Type> = new Map();

package/src/utils/getFormioProps.ts

@@ -0,0 +1,12 @@
+export function getFormioProps(schema: any) {
+  const formioProps: any = Object.entries(schema).reduce((props, [key, value]) => {
+    if (key.startsWith("x-formio-")) {
+      return {
+        ...props,
+        [key.replace("x-formio-", "")]: value
+      };
+    }
+    return props;
+  }, {});
+  return formioProps;
+}

package/src/utils/getFormioSchema.spec.ts

@@ -0,0 +1,84 @@
+import {JsonEntityStore, Property} from "@tsed/schema";
+
+import {Form} from "../decorators/form.js";
+import {getFormioSchema} from "../utils/getFormioSchema.js";
+
+const schema = {
+  access: [],
+  components: [
+    {
+      disabled: false,
+      input: true,
+      key: "test",
+      label: "Test",
+      type: "textfield",
+      validate: {
+        required: false
+      }
+    }
+  ],
+  display: "form",
+  machineName: "model",
+  name: "model",
+  submissionAccess: [],
+  tags: [],
+  title: "Model",
+  type: "form"
+};
+
+describe("getFormioSchema", () => {
+  it("should return undefined when the schema is unknown", async () => {
+    expect(await getFormioSchema("unknown")).toEqual(undefined);
+  });
+
+  it("should return schema by his machineName", async () => {
+    @Form()
+    class Model {
+      @Property()
+      test: string;
+    }
+
+    expect(await getFormioSchema("model")).toEqual(schema);
+    expect(await getFormioSchema("Model")).toEqual(schema);
+  });
+
+  it("should return schema by his custom machine name", async () => {
+    @Form({name: "CustomModel"})
+    class Model {
+      @Property()
+      test: string;
+    }
+
+    expect(await getFormioSchema("custom-model")).toEqual({
+      ...schema,
+      machineName: "custom-model",
+      name: "custom-model",
+      title: "CustomModel"
+    });
+    expect(await getFormioSchema("CustomModel")).toEqual({
+      ...schema,
+      machineName: "custom-model",
+      name: "custom-model",
+      title: "CustomModel"
+    });
+  });
+
+  it("should return schema by his type", async () => {
+    @Form()
+    class Model {
+      @Property()
+      test: string;
+    }
+
+    expect(await getFormioSchema(Model)).toEqual(schema);
+  });
+  it("should return schema by his store", async () => {
+    @Form()
+    class Model {
+      @Property()
+      test: string;
+    }
+
+    expect(await getFormioSchema(JsonEntityStore.from(Model))).toEqual(schema);
+  });
+});

package/src/utils/getFormioSchema.ts

@@ -0,0 +1,62 @@
+import "../components/anyToComponent.js";
+import "../components/arrayToComponent.js";
+import "../components/booleanToComponent.js";
+import "../components/dateToComponent.js";
+import "../components/defaultToComponent.js";
+import "../components/enumToComponent.js";
+import "../components/mapToComponent.js";
+import "../components/nestedToComponent.js";
+import "../components/numberToComponent.js";
+import "../components/objectToEditGrid.js";
+import "../components/panelToComponent.js";
+import "../components/propertiesToComponents.js";
+import "../components/stringToComponent.js";
+
+import {isString, Type} from "@tsed/core";
+import {FormioForm} from "@tsed/formio-types";
+import {getJsonSchema, JsonEntityStore, JsonSchemaOptions} from "@tsed/schema";
+import {kebabCase} from "change-case";
+
+import {execMapper} from "../registries/FormioMappersContainer.js";
+import {FormsContainer} from "../registries/FormsContainer.js";
+
+export async function getFormioSchema(
+  model: string | any | undefined,
+  options: JsonSchemaOptions = {}
+): Promise<Omit<FormioForm, "_id" | "deleted" | "owner"> | undefined> {
+  if (!model) {
+    return undefined;
+  }
+
+  if (isString(model)) {
+    return getFormioSchema(FormsContainer.get(model) as Type<any>, options);
+  }
+
+  const entity = JsonEntityStore.from(model);
+  const schema = getJsonSchema(entity, {
+    ...options,
+    inlineEnums: true,
+    customKeys: true
+  });
+
+  const name = entity.schema.getName();
+  const machineName = kebabCase(name);
+  const resolvers: Promise<any>[] = [];
+  const components = execMapper("properties", schema, {...options, definitions: schema.definitions, resolvers});
+  const form = {
+    title: name,
+    type: "form",
+    display: "form",
+    tags: [],
+    access: [],
+    submissionAccess: [],
+    ...entity.store.get<any>("formio:form", {}),
+    name: machineName,
+    machineName,
+    components
+  };
+
+  await Promise.all(resolvers.map((resolver: any) => resolver(form, options)));
+
+  return form as unknown as FormioForm;
+}

package/src/utils/getRef.ts

@@ -0,0 +1,8 @@
+import {getValue} from "@tsed/core";
+
+export function getRef(schema: any, options: any) {
+  if (schema.$ref) {
+    return getValue(options, schema.$ref.replace("#/", "").replace(/\//g, "."));
+  }
+  return schema;
+}