FormSchemaV1.ts

import {ConcreteComponent, CSSProperties} from 'vue';

export const TYPE_BUTTON = 'button';
export const TYPE_INPUT = 'input';
export const TYPE_FILE_INPUT = 'file';
export const TYPE_TEXTAREA = 'textarea';
export const TYPE_DROPDOWN = 'dropdown';
export const TYPE_PASSWORD = 'password';
export const TYPE_CHECKBOX = 'checkbox';
export const TYPE_SWITCH = 'switch';
export const TYPE_RADIO = 'radio';
export const TYPE_DATE = 'date';
export const TYPE_AUTOCOMPLETE = 'autocomplete';
export const TYPE_SELECT = 'select';
export const TYPE_MULTISELECT = 'multiselect';
export const TYPE_TIME = 'time';

export const TYPE_GRID = 'grid';
export const TYPE_INLINE = 'inline';
export const TYPE_ACTION = 'action';
export const TYPE_DIVIDER = 'divider';

export type FieldType =
  | typeof TYPE_BUTTON
  | typeof TYPE_INPUT
  | typeof TYPE_FILE_INPUT
  | typeof TYPE_TEXTAREA
  | typeof TYPE_DROPDOWN
  | typeof TYPE_PASSWORD
  | typeof TYPE_CHECKBOX
  | typeof TYPE_SWITCH
  | typeof TYPE_RADIO
  | typeof TYPE_DATE
  | typeof TYPE_AUTOCOMPLETE
  | typeof TYPE_SELECT
  | typeof TYPE_MULTISELECT
  | typeof TYPE_TIME;

export type LayoutType =
  | typeof TYPE_GRID
  | typeof TYPE_INLINE
  | typeof TYPE_ACTION
  | typeof TYPE_DIVIDER;

type FieldSchema<T = object> = {
  name: string;
  label: string;
  type: FieldType | 'custom';
  component?: ConcreteComponent;
  props?: object;
  value?: string | number | T | Array<T>;
  placeholder?: string;
  visible?: boolean;
  asterisk?: boolean;
  style?: CSSProperties;
  class?: Array<string>;
  hook?: (schema: FieldSchema, model: object) => FieldSchema;
};

type LayoutChild = {
  slot?: string;
  fields?: Array<FieldSchema>;
};

type LayoutSchema = {
  style?: CSSProperties;
  class?: Array<string>;
  type: LayoutType | 'custom';
  component?: ConcreteComponent;
  props?: object;
  children?: Array<LayoutChild>;
};

type FormSchema = {
  style?: CSSProperties;
  class?: Array<string>;
  layout: Array<LayoutSchema>;
};

const formSchema: FormSchema = {
  layout: [
    {
      type: 'grid',
      props: {
        columns: 2,
      },
      children: [
        {
          slot: 'default',
          fields: [
            {
              name: 'resume',
              label: 'Select resume',
              type: 'file',
              asterisk: true,
              class: ['--span-column-2'],
            },
            {
              name: 'firstName',
              label: 'First Name',
              type: 'input',
              asterisk: true,
            },
            {
              name: 'middleName',
              label: 'Middle Name',
              type: 'input',
            },
            {
              name: 'lastName',
              label: 'Last Name',
              type: 'input',
              asterisk: true,
            },
            {
              name: 'email',
              label: 'Email',
              type: 'input',
              visible: true,
              asterisk: true,
              hook: (schema: FieldSchema, model: object) => {
                // do any manipulation to this field based on model data
                return schema;
              },
              style: {
                color: 'red',
              },
            },
            {
              name: 'contactNumber',
              label: 'Contact Number',
              type: 'input',
              asterisk: true,
            },
            {
              name: 'vacancy',
              label: 'Vacancy',
              type: 'select',
              props: {
                options: [
                  {id: 1, label: 'Vaccancy One'},
                  {id: 2, label: 'Vaccancy Two'},
                ],
              },
              asterisk: true,
            },
            {
              name: 'createdOn',
              label: 'Date of Application',
              type: 'date',
            },
          ],
        },
      ],
    },
    {
      type: 'divider',
      class: ['full-width'],
    },
    {
      type: 'action',
      children: [
        {
          slot: 'right',
          fields: [
            {
              name: 'reset',
              label: 'Reset',
              type: 'button',
              props: {
                type: 'reset',
                displayType: 'ghost',
              },
            },
            {
              name: 'submit',
              label: 'Submit',
              type: 'button',
              class: ['orangehrm-left-space'],
              props: {
                type: 'submit',
                displayType: 'secondary',
              },
            },
          ],
        },
      ],
    },
  ],
};

// Validation Schema Yup Like
const validationSchema = {
  firstName: string().required(),
  middleName: string(),
  lastName: string().required(),
  contactNumber: number().required(),
  email: string()
    .email()
    .required(),
  vacancy: selectOption().required(),
  createdOn: date().nullable(),
  resume: required().file(
    ['text/plain', 'text/rtf', 'text/csv', 'application/csv'],
    1024 * 10,
  ),
};

// Validation exsiting
const validationSchema2 = {
  firstName: [string, required],
  middleName: [string],
  lastName: [string, required],
  contactNumber: [string, required],
  email: [string, email, required],
  vacancy: [selectOption, required],
  createdOn: [date, nullable],
  resume: [
    required,
    validateFile(
      ['text/plain', 'text/rtf', 'text/csv', 'application/csv'],
      1024 * 10,
    ),
  ],
};

// define any default values in model
const model = {
  firstName: '',
  middleName: '',
  lastName: '',
  contactNumber: '',
  email: 'admin@orangehrm.com',
  vacancy: null,
  createdOn: new Date(),
  resume: null,
};