@ldquocc/dynamic-form 0.0.8 → 0.0.9

package/src/lib/shared/consts/common/sample-test.const.ts

@@ -0,0 +1,1648 @@
+import { CommonValidaterEnum, CustomValidaterEnum } from '../../enums/validators';
+import { Suffix } from '../../models/common/common.model';
+import { Extra, ObjField } from '../../models/common/obj-field.model';
+import { DatePickerField, DateRangeField } from '../../models/fields/date';
+import { BaseField } from '../../models/fields/field.model';
+import { InputPasswordField, InputTextField } from '../../models/fields/input';
+import { MultiSelectField } from '../../models/fields/select/multi-select-field.model';
+import { SingleSelectField } from '../../models/fields/select/single-select-field.model';
+import { TextareaField } from '../../models/fields/textarea/textarea-field.model';
+import { AvatarUploadField } from '../../models/fields/upload/avatar-upload-field.model';
+import { MultiFileUploadField } from '../../models/fields/upload/multi-file-upload-field.model';
+import { MultiImageUploadField } from '../../models/fields/upload/multi-image-upload-field.model';
+import { SingleFileUploadField } from '../../models/fields/upload/single-file-upload-field.model';
+import { APPLICATION_TYPES, IMAGE_TYPES } from './file.const';
+import { DependTypeEnum } from '../../enums/common';
+// Sample extra.
+// InputText
+const inputTextExtra: Extra = {
+  form: {
+    formTypes: ['add'],
+    configs: {
+      add: {
+        key: 'name',
+        label: 'Tên nhiệm vụ đề xuất',
+        type: 'input-text',
+        controlType: 'input',
+        placeholder: 'Nhập tên nhiệm vụ đề xuất nào',
+        required: false,
+        grid: { xs: 12 },
+        labelGrid: { xs: 8 },
+        controlGrid: { xs: 16 },
+        isHidden: false,
+        isParent: false,
+        allowSetValue: ['add'],
+      } as BaseField<any>,
+    },
+  },
+};
+// Input Password
+// SingleSelect Province
+// SingleSelect District
+// DatePicker
+// DateRange
+// SingleFileUpload
+// MultiFileUpload
+
+// Sample test ObjFields lấy từ API.
+export const sampleObjFields = [
+  // Input Text
+  {
+    code: 'Name',
+    name: 'Tên nhiệm vụ',
+    nameEn: 'Name',
+    dataType: 'string',
+    allowShare: 1,
+    objClassCode: 'SciTaskProposal',
+    componentUI: 'InputText',
+    codeOnDb: 'tenNhiemVu',
+    seqNum: 3,
+    required: 3,
+    allowStatistic: 0,
+    preventEdit: 0,
+    validateRegex: 'ALPHA_DASH_VN',
+    extra: JSON.stringify(inputTextExtra),
+    id: '7902fd41-f7c7-47e3-86f4-29b59a97dae3',
+  },
+  // Input Password
+  // SingleSelect Province
+  // SingleSelect District
+  // DatePicker
+  // DateRange
+  // SingleFileUpload
+  // MultiFileUpload
+  // Field rác test k có cấu hình 1
+  // Field rác test k có cấu hình 2
+  // {
+  //   code: 'Code',
+  //   name: 'Mã đề xuất',
+  //   nameEn: 'Code',
+  //   dataType: 'string',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'InputText',
+  //   codeOnDb: 'maDeXuat',
+  //   seqNum: 1,
+  //   required: 2,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   viewType: 'Basic',
+  //   id: '39d81def-6a34-4594-ab59-978233bea797',
+  // },
+  // {
+  //   code: 'Id',
+  //   name: 'Id',
+  //   nameEn: 'Id',
+  //   dataType: 'Guid',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'TextView',
+  //   codeOnDb: 'id',
+  //   seqNum: 1,
+  //   required: 2,
+  //   allowStatistic: 0,
+  //   preventEdit: 1,
+  //   validateRegex: 'UUID',
+  //   viewType: 'Detail',
+  //   id: '0e460f53-76b0-4718-be0a-7e87c4a252a1',
+  // },
+  // {
+  //   code: 'ProposalName',
+  //   name: 'Tên đề xuất',
+  //   nameEn: 'ProposalName',
+  //   dataType: 'string',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'InputText',
+  //   codeOnDb: 'tenDeXuat',
+  //   seqNum: 2,
+  //   required: 1,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   viewType: 'Detail',
+  //   id: '425739aa-0ab5-4524-8eec-1ccfaaf53ccc',
+  // },
+  // {
+  //   code: 'Name',
+  //   name: 'Tên nhiệm vụ',
+  //   nameEn: 'Name',
+  //   dataType: 'string',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'InputText',
+  //   codeOnDb: 'tenNhiemVu',
+  //   seqNum: 3,
+  //   required: 3,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   validateRegex: 'ALPHA_DASH_VN',
+  //   extra:
+  //     '{"formField":{"displayMode":["add","edit","view"],"adding":{"seqNumber":1,"viewType":"taskInfo"},"editting":{"seqNumber":1,"viewType":"taskInfo"},"viewing":{"seqNumber":1,"section":"left","viewConfig":{"labelSpan":{"sm":24,"md":10},"formControlSpan":{"sm":24,"md":14}}}}}',
+  //   viewType: 'Basic',
+  //   id: '7902fd41-f7c7-47e3-86f4-29b59a97dae3',
+  // },
+  // {
+  //   code: 'Level',
+  //   name: 'Cấp nhiệm vụ đề xuất',
+  //   nameEn: 'Level',
+  //   dataType: 'ObjType',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   apiURL: '{MainApiURL}/CommonCats/ObjType/byTypeGroupCode/{ObjTypeGroupCode}',
+  //   componentUI: 'Combobox(SingleChoice)',
+  //   codeOnDb: 'cap',
+  //   seqNum: 4,
+  //   required: 3,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   extra:
+  //     '{"formField":{"displayMode":["add","edit"],"adding":{"seqNumber":2,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"editting":{"seqNumber":2,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"viewing":{"seqNumber":2,"section":"left","viewConfig":{"labelSpan":{"sm":24,"md":10},"formControlSpan":{"sm":24,"md":14}}}}}',
+  //   viewType: 'Detail',
+  //   objTypeGroupCode: 'RECOMMEND_TASK',
+  //   id: '03230f20-2c88-4c05-a990-8290d435ce31',
+  // },
+  // {
+  //   code: 'Program',
+  //   name: 'Chương trình mà nhiệm vụ trực thuộc',
+  //   nameEn: 'Program',
+  //   dataType: 'string',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'InputText',
+  //   codeOnDb: 'chuongTrinh',
+  //   seqNum: 5,
+  //   required: 1,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   validateRegex: 'ALPHA_DASH_VN',
+  //   extra:
+  //     '{"formField":{"displayMode":["add","edit"],"adding":{"seqNumber":2,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"editting":{"seqNumber":2,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"viewing":{"seqNumber":2,"section":"left","viewConfig":{"labelSpan":{"sm":24,"md":10},"formControlSpan":{"sm":24,"md":14}}}}}',
+  //   viewType: 'Detail',
+  //   id: 'c03a9d28-ca43-44ca-a59c-fc54494f3c73',
+  // },
+  // {
+  //   code: 'ResearchField',
+  //   name: 'Lĩnh vực',
+  //   nameEn: 'ResearchField',
+  //   dataType: 'ObjType',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   apiURL: '{MainApiURL}/CommonCats/ObjType/byTypeGroupCode/{ObjTypeGroupCode}',
+  //   componentUI: 'Combobox(SingleChoice)',
+  //   codeOnDb: 'linhVucNghienCuu',
+  //   seqNum: 6,
+  //   required: 3,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   extra:
+  //     '{"formField":{"displayMode":["add","edit","view","filter"],"adding":{"seqNumber":2,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"editting":{"seqNumber":2,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"viewing":{"seqNumber":2,"section":"left","isShowBgInput":true,"inputBgColor":"#2E7D32","viewConfig":{"labelSpan":{"sm":24,"md":10},"formControlSpan":{"sm":24,"md":14}}},"filtering":{"codeField":"researchFieldCode","seqNumber":3,"required":false,"dataTypeCombobox":"single"}}}',
+  //   viewType: 'Detail',
+  //   objTypeGroupCode: 'RESEARCH_FIELD',
+  //   id: 'b5248535-fb73-486e-a980-24e8ada1993b',
+  // },
+  // {
+  //   code: 'Type',
+  //   name: 'Loại hình nhiệm vụ',
+  //   nameEn: 'Type',
+  //   dataType: 'ObjType',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   apiURL: '{MainApiURL}/CommonCats/ObjType/byTypeGroupCode/{ObjTypeGroupCode}',
+  //   componentUI: 'Combobox(SingleChoice)',
+  //   codeOnDb: 'loaiHinhNhiemVu',
+  //   seqNum: 7,
+  //   required: 3,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   extra:
+  //     '{"formField":{"displayMode":["add","edit","view","filter"],"adding":{"seqNumber":3,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"editting":{"seqNumber":3,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"viewing":{"seqNumber":3,"section":"left","viewConfig":{"labelSpan":{"sm":24,"md":10},"formControlSpan":{"sm":24,"md":14}}},"filtering":{"codeField":"typeCode","seqNumber":1,"required":false,"dataTypeCombobox": "single"}}}',
+  //   viewType: 'Detail',
+  //   objTypeGroupCode: 'TYPE_TASK',
+  //   id: 'f6793a1e-f451-4050-b751-aa3a5f86d862',
+  // },
+  // {
+  //   code: 'PlanningProposalYear',
+  //   name: 'Năm kế hoạch đề xuất',
+  //   nameEn: 'PlanningProposalYear',
+  //   dataType: 'int',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'InputText',
+  //   codeOnDb: 'namKeHoachDeXuat',
+  //   seqNum: 8,
+  //   required: 1,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   viewType: 'Detail',
+  //   id: '90f48f9f-5d3d-43d0-bbac-1dd072a4ffd1',
+  // },
+  // {
+  //   code: 'ResearchObjective',
+  //   name: 'Mục tiêu của nhiệm vụ ',
+  //   nameEn: 'ResearchObjective',
+  //   dataType: 'string',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'TextArea',
+  //   codeOnDb: 'mucTieu',
+  //   seqNum: 9,
+  //   required: 3,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   extra:
+  //     '{"formField":{"displayMode":["add","edit","view"],"adding":{"seqNumber":3,"viewType":"taskInfo"},"editting":{"seqNumber":3,"viewType":"taskInfo"},"viewing":{"seqNumber":1,"section":"bottom"}}}',
+  //   viewType: 'Detail',
+  //   id: 'ecc54ec4-ee0e-4b97-9c5b-2e06d25d6bf0',
+  // },
+  // {
+  //   code: 'ExpectedContent',
+  //   name: 'Dự kiến các nội dung cần thực hiện',
+  //   nameEn: 'ExpectedContent',
+  //   dataType: 'string',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'InputText',
+  //   codeOnDb: 'duKienNoiDung',
+  //   seqNum: 10,
+  //   required: 1,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   viewType: 'Detail',
+  //   id: '180c8300-11da-41f4-8685-97d2e8885200',
+  // },
+  // {
+  //   code: 'ExpectedResultsAndIndicators',
+  //   name: 'Dự kiến kết quả chính và các chỉ tiêu cần đạt',
+  //   nameEn: 'ExpectedResultsAndIndicators',
+  //   dataType: 'string',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'TextArea',
+  //   codeOnDb: 'duKienKetQuaVaChiTieu',
+  //   seqNum: 11,
+  //   required: 3,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   extra:
+  //     '{"formField":{"displayMode":["add","edit","view"],"adding":{"seqNumber":5,"viewType":"taskInfo"},"editting":{"seqNumber":5,"viewType":"taskInfo"},"viewing":{"seqNumber":2,"section":"bottom"}}}',
+  //   viewType: 'Detail',
+  //   id: '617af2b0-d4d8-4e41-b0cb-388c4fbd917a',
+  // },
+  // {
+  //   code: 'ExpectedApplicationPlan',
+  //   name: 'Dự kiến phương án ứng dụng hoặc sử dụng kết quả tạo ra',
+  //   nameEn: 'ExpectedApplicationPlan',
+  //   dataType: 'string',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'TextArea',
+  //   codeOnDb: 'duKienPhuongAnUngDung',
+  //   seqNum: 12,
+  //   required: 3,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   extra:
+  //     '{"formField":{"displayMode":["add","edit","view"],"adding":{"seqNumber":6,"viewType":"taskInfo"},"editting":{"seqNumber":6,"viewType":"taskInfo"},"viewing":{"seqNumber":3,"section":"bottom"}}}',
+  //   viewType: 'Detail',
+  //   id: 'c89bb6c9-3dcf-4380-94f5-630baadb9b31',
+  // },
+  // {
+  //   code: 'EstimatedBudget',
+  //   name: 'Dự kiến kinh phí (đồng)',
+  //   nameEn: 'EstimatedBudget',
+  //   dataType: 'long',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'InputText',
+  //   codeOnDb: 'duKienKinhPhi',
+  //   seqNum: 13,
+  //   required: 3,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   validateRegex: 'INTEGER',
+  //   extra:
+  //     '{"formField":{"displayMode":["add","edit","view"],"adding":{"seqNumber":7,"span":{"sm":24,"md":"12"},"viewType":"taskInfo","isCurrency":true},"editting":{"seqNumber":7,"span":{"sm":24,"md":"12"},"viewType":"taskInfo","isCurrency":true},"viewing":{"seqNumber":4,"section":"left","viewConfig":{"labelSpan":{"sm":24,"md":10},"formControlSpan":{"sm":24,"md":14}},"isCurrency":true}}}',
+  //   viewType: 'Detail',
+  //   id: 'a8072db6-0bd1-4352-8e30-326446989eef',
+  // },
+  // {
+  //   code: 'EstimatedDuration',
+  //   name: 'Dự kiến thời gian thực hiện (tháng)',
+  //   nameEn: 'EstimatedDuration',
+  //   dataType: 'int',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'InputText',
+  //   codeOnDb: 'duKienThoiGianThucHien',
+  //   seqNum: 14,
+  //   required: 3,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   validateRegex: 'INTEGER',
+  //   extra:
+  //     '{"formField":{"displayMode":["add","edit","view"],"adding":{"seqNumber":8,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"editting":{"seqNumber":8,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"viewing":{"seqNumber":5,"section":"left","executionTime":"month","viewConfig":{"labelSpan":{"sm":24,"md":10},"formControlSpan":{"sm":24,"md":14}}}}}',
+  //   viewType: 'Detail',
+  //   id: 'f69bdf14-c555-4cf5-b793-1eba85a25701',
+  // },
+  // {
+  //   code: 'ProposalAttachment',
+  //   name: 'Văn bản đề xuất đính kèm (pdf)',
+  //   nameEn: 'ProposalAttachment',
+  //   dataType: 'string',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'File',
+  //   codeOnDb: 'vanBanDeXuat',
+  //   seqNum: 15,
+  //   required: 3,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   extra:
+  //     '{"formField":{"displayMode":["add","edit","view"],"adding":{"title":"Văn bản đề xuất đính kèm (hỗ trợ tập tin dạng .pdf)","seqNumber":9,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"editting":{"title":"Văn bản đề xuất đính kèm (hỗ trợ tập tin dạng .pdf)","seqNumber":9,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"viewing":{"seqNumber":7,"section":"left","viewConfig":{"labelSpan":{"sm":24,"md":10},"formControlSpan":{"sm":24,"md":14}}}}}',
+  //   viewType: 'Detail',
+  //   id: '75596544-c7b1-40dd-ad24-deee21e8b8d1',
+  // },
+  // {
+  //   code: 'ProposalOrganizationName',
+  //   name: 'Tên đơn vị/cá nhân đề xuất',
+  //   nameEn: 'ProposalOrganizationName',
+  //   dataType: 'string',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'InputText',
+  //   codeOnDb: 'tenToChucDeXuat',
+  //   seqNum: 16,
+  //   required: 3,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   validateRegex: 'ALPHA_DASH_VN',
+  //   extra:
+  //     '{"formField":{"displayMode":["add","edit","view"],"adding":{"seqNumber":2,"viewType":"taskOrgzIndivInfo"},"editting":{"seqNumber":2,"viewType":"taskOrgzIndivInfo"},"viewing":{"seqNumber":1,"section":"right"}}}',
+  //   viewType: 'Detail',
+  //   id: '9ba7ea0a-e1d3-4006-9a10-bba7b54f17e4',
+  // },
+  // {
+  //   code: 'ProposerName',
+  //   name: 'Tên cá nhân đề xuất',
+  //   nameEn: 'ProposerName',
+  //   dataType: 'string',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'InputText',
+  //   codeOnDb: 'tenCaNhanDeXuat',
+  //   seqNum: 17,
+  //   required: 3,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   extra: '',
+  //   viewType: 'Detail',
+  //   id: 'cb2e752c-ed93-46f1-8cd8-75aeb399952b',
+  // },
+  // {
+  //   code: 'PhoneNumber',
+  //   name: 'Số điện thoại',
+  //   nameEn: 'PhoneNumber',
+  //   dataType: 'string',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'InputText',
+  //   codeOnDb: 'soDienThoai',
+  //   seqNum: 18,
+  //   required: 1,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   validateRegex: 'PHONE_NUMBER',
+  //   extra:
+  //     '{"formField":{"displayMode":["add","edit","view"],"adding":{"seqNumber":4,"viewType":"taskOrgzIndivInfo","span":{"sm":24,"md":12}},"editting":{"seqNumber":4,"viewType":"taskOrgzIndivInfo","span":{"sm":24,"md":12}},"viewing":{"seqNumber":3,"section":"right"}}}',
+  //   viewType: 'Detail',
+  //   id: '06137a76-2793-42db-a0d1-2039e087b2ce',
+  // },
+  // {
+  //   code: 'Email',
+  //   name: 'Thư điện tử',
+  //   nameEn: 'Email',
+  //   dataType: 'string',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'InputText',
+  //   codeOnDb: 'thuDienTu',
+  //   seqNum: 19,
+  //   required: 3,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   validateRegex: 'EMAIL',
+  //   extra:
+  //     '{"formField":{"displayMode":["add","edit","view"],"adding":{"seqNumber":3,"viewType":"taskOrgzIndivInfo","span":{"sm":24,"md":12}},"editting":{"seqNumber":3,"viewType":"taskOrgzIndivInfo","span":{"sm":24,"md":12}},"viewing":{"seqNumber":2,"section":"right"}}}',
+  //   viewType: 'Detail',
+  //   id: 'acef6046-1f41-48f2-b53a-c0ecebb42939',
+  // },
+  // {
+  //   code: 'Address',
+  //   name: 'Địa chỉ liên hệ',
+  //   nameEn: 'Address',
+  //   dataType: 'string',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'TextArea',
+  //   codeOnDb: 'diaChi',
+  //   seqNum: 20,
+  //   required: 1,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   extra:
+  //     '{"formField":{"displayMode":["add","edit","view"],"adding":{"seqNumber":4,"viewType":"taskOrgzIndivInfo"},"editting":{"seqNumber":4,"viewType":"taskOrgzIndivInfo"},"viewing":{"type":"InputText","seqNumber":3,"section":"right"}}}',
+  //   viewType: 'Detail',
+  //   id: 'faef0e51-f288-424e-9e72-50ed155313a5',
+  // },
+  // {
+  //   code: 'ProposalSource',
+  //   name: 'Nguồn đề xuất',
+  //   nameEn: 'ProposalSource',
+  //   dataType: 'ObjType',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   apiURL: '{MainApiURL}/CommonCats/ObjType/byTypeGroupCode/{ObjTypeGroupCode}',
+  //   componentUI: 'Radiobox',
+  //   codeOnDb: 'nguonDeXuat',
+  //   seqNum: 21,
+  //   required: 3,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   extra:
+  //     '{"formField":{"displayMode":["add","edit","filter"],"adding":{"seqNumber":1,"viewType":"taskOrgzIndivInfo"},"editting":{"seqNumber":1,"viewType":"taskOrgzIndivInfo"},"filtering":{"codeField":"proposalSourceCode","seqNumber":2,"type":"Dropdown","required":false,"dataTypeCombobox": "single"}}}',
+  //   viewType: 'Detail',
+  //   objTypeGroupCode: 'PROPOSAL_SOURCE',
+  //   id: '6dea381c-368f-4423-83fb-957df68b176d',
+  // },
+  // {
+  //   code: 'ProposalStatus',
+  //   name: 'Trạng thái',
+  //   nameEn: 'ProposalStatus',
+  //   dataType: 'ObjType',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   apiURL: '{MainApiURL}/CommonCats/ObjType/byTypeGroupCode/{ObjTypeGroupCode}',
+  //   componentUI: 'Combobox(SingleChoice)',
+  //   codeOnDb: 'trangThaiDeXuat',
+  //   seqNum: 22,
+  //   required: 2,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   extra:
+  //     '{"formField":{"displayMode":["view","filter"],"viewing":{"seqNumber":6,"section":"left","isShowBgInput":true,"viewConfig":{"labelSpan":{"sm":24,"md":10},"formControlSpan":{"sm":24,"md":14}}},"filtering":{"codeField":"proposalStatusCode","seqNumber":4,"dataTypeCombobox":"single"}}}',
+  //   viewType: 'Detail',
+  //   objTypeGroupCode: 'PROPOSAL_STATUS',
+  //   id: 'b77dcf37-880b-48f9-acfb-09b983df4a0d',
+  // },
+  // {
+  //   code: 'ApplicationStartDate',
+  //   name: 'Ngày bắt đầu mở ứng tuyển cho đề xuất ',
+  //   nameEn: 'ApplicationStartDate',
+  //   dataType: 'Date',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'Calendar(Date)',
+  //   codeOnDb: 'ngayBatDauUngTuyen',
+  //   seqNum: 23,
+  //   required: 3,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   extra:
+  //     '{"formField":{"displayMode":["edit","view"],"editting":{"title":"Thời gian bắt đầu","allowFutureDates":true,"seqNumber":1,"span":{"sm":24,"md":12},"section":"approval"},"viewing":{"title":"Thời gian bắt đầu","seqNumber":1,"section":"application"}}}',
+  //   viewType: 'Detail',
+  //   id: '790d2aee-4fb2-456f-8fd0-8cd5e0296a57',
+  // },
+  // {
+  //   code: 'ApplicationEndDate',
+  //   name: 'Ngày kết thúc ứng tuyển cho đề xuất ',
+  //   nameEn: 'ApplicationEndDate',
+  //   dataType: 'Date',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'Calendar(Date)',
+  //   codeOnDb: 'ngayKetThucUngTuyen',
+  //   seqNum: 24,
+  //   required: 3,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   extra:
+  //     '{"formField":{"displayMode":["edit","view"],"editting":{"title":"Thời gian kết thúc","allowFutureDates":true,"seqNumber":1,"span":{"sm":24,"md":12},"section":"approval"},"viewing":{"title":"Thời gian kết thúc","seqNumber":2,"section":"application"}}}',
+  //   viewType: 'Detail',
+  //   id: '95822a49-2883-4ddb-a6ff-a3c8fc84f3bf',
+  // },
+  // {
+  //   code: 'ApprovalAttachment',
+  //   name: 'Văn bản giao nhiệm vụ - ứng tuyển  được duyệt làm ',
+  //   nameEn: 'ApprovalAttachment',
+  //   dataType: 'string',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'InputText',
+  //   codeOnDb: 'vanBanGiaoNhiemVu',
+  //   seqNum: 25,
+  //   required: 3,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   viewType: 'Detail',
+  //   id: 'fa00b65d-ebfb-49f9-8da2-09cd44138b79',
+  // },
+  // {
+  //   code: 'ApprovalDuration',
+  //   name: 'thời gian thức hiện duyệt',
+  //   nameEn: 'ApprovalDuration',
+  //   dataType: 'int',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   codeOnDb: 'thoiGianThucHienDuyet',
+  //   seqNum: 26,
+  //   required: 0,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   viewType: 'Detail',
+  //   id: '54477413-ec20-43d8-8f9e-6e73205b86ad',
+  // },
+  // {
+  //   code: 'ApprovalTotalBudget',
+  //   name: 'Tổng kinh phí cần thiết được duyệt với văn bản giao nhiệm vụ ',
+  //   nameEn: 'ApprovalTotalBudget',
+  //   dataType: 'long',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   codeOnDb: 'tongKinhPhiCanThietDuyet',
+  //   seqNum: 27,
+  //   required: 0,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   viewType: 'Detail',
+  //   id: 'f9a6c1a6-780e-4e9c-87ac-41a7dfbf37df',
+  // },
+  // {
+  //   code: 'ApprovalGovermentBudget',
+  //   name: 'Kinh phí từ Ngân sách nhà nước được duyệt với văn bản giao nhiệm vụ ',
+  //   nameEn: 'ApprovalGovermentBudget',
+  //   dataType: 'long',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   codeOnDb: 'kinhPhiTuNSNNDuyet',
+  //   seqNum: 28,
+  //   required: 0,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   viewType: 'Detail',
+  //   id: '37690b42-c4f7-40bf-ae4a-c42f10735409',
+  // },
+  // {
+  //   code: 'ApprovalNonGovermentBudget',
+  //   name: 'Kinh phí từ các nguồn ngoài ngân sách nhà nước được duyệt với văn bản giao nhiệm vụ ',
+  //   nameEn: 'ApprovalNonGovermentBudget',
+  //   dataType: 'long',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   codeOnDb: 'kinhPhiTuNgoaiNSNNDuyet',
+  //   seqNum: 29,
+  //   required: 0,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   viewType: 'Detail',
+  //   id: 'f9cf4aa3-6593-4b2d-88ca-1513069ce57f',
+  // },
+  // {
+  //   code: 'ApprovalContractStateBudget',
+  //   name: 'Kinh phí Ngân sách nhà nước khoán được duyệt với văn bản giao nhiệm vụ ',
+  //   nameEn: 'ApprovalContractStateBudget',
+  //   dataType: 'long',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   codeOnDb: 'kinhPhiNSNNKhoanDuyet',
+  //   seqNum: 30,
+  //   required: 0,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   viewType: 'Detail',
+  //   id: '9c0aeb4b-b6db-460e-8c01-7bc728535e7a',
+  // },
+  // {
+  //   code: 'ApprovalNonContractStateBudget',
+  //   name: 'Kinh phí Ngân sách nhà nước không khoán được duyệt với văn bản giao nhiệm vụ ',
+  //   nameEn: 'ApprovalNonContractStateBudget',
+  //   dataType: 'long',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   codeOnDb: 'kinhPhiNSNNKhongKhoanDuyet',
+  //   seqNum: 31,
+  //   required: 0,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   viewType: 'Detail',
+  //   id: 'c5cf6569-306a-4ede-ace6-5b9212003a0c',
+  // },
+  // {
+  //   code: 'ApprovalImplementationMethod',
+  //   name: 'Phương thức thực hiện',
+  //   nameEn: 'ApprovalImplementationMethod',
+  //   dataType: 'ObjType',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   codeOnDb: 'phuongThucThucHienDuyet',
+  //   seqNum: 32,
+  //   required: 1,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   viewType: 'Detail',
+  //   id: 'cf73d6e1-581d-4228-b016-6557466ed61a',
+  // },
+  // {
+  //   code: 'UpdatedById',
+  //   name: 'Mã người cập nhật trang thái hiện tại của nhiệm vụ',
+  //   nameEn: 'UpdatedById',
+  //   dataType: 'Guid',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   apiURL: '1',
+  //   codeOnDb: 'maNguoiCapNhat',
+  //   seqNum: 33,
+  //   required: 2,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   viewType: 'Detail',
+  //   id: '8c8de675-f6fa-4dd7-b706-39ea7408a12d',
+  // },
+  // {
+  //   code: 'UpdatedBy',
+  //   name: 'Người cập nhật trang thái hiện tại của nhiệm vụ',
+  //   nameEn: 'UpdatedBy',
+  //   dataType: 'string',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   apiURL: '1',
+  //   codeOnDb: 'nguoiCapNhat',
+  //   seqNum: 34,
+  //   required: 2,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   viewType: 'Detail',
+  //   id: 'f09197be-09c3-43e2-b2a0-b535be2643f0',
+  // },
+  // {
+  //   code: 'CreatedAt',
+  //   name: 'Thời gian tạo',
+  //   nameEn: 'CreatedAt',
+  //   dataType: 'DateTime',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'Calendar(Date)',
+  //   codeOnDb: 'createdAt',
+  //   seqNum: 35,
+  //   required: 2,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   extra:
+  //     '{"formField":{"displayMode":["filter"],"filtering":{"seqNumber":5,"type":"DateRange"}}}',
+  //   viewType: 'Detail',
+  //   id: '8b425192-574b-4df3-8b9a-c28bcd47bdc7',
+  // },
+  // {
+  //   code: 'UpdatedAt',
+  //   name: 'Thời gian cập nhật',
+  //   nameEn: 'UpdatedAt',
+  //   dataType: 'DateTime',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'TextView',
+  //   codeOnDb: 'updatedAt',
+  //   seqNum: 36,
+  //   required: 0,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   viewType: 'Detail',
+  //   id: '004a60a1-0b66-4d0b-acb0-eb76d57f49f1',
+  // },
+  // {
+  //   code: 'ApprovalNumber',
+  //   name: 'Số quyết định giao nhiệm vụ',
+  //   nameEn: 'ApprovalNumber',
+  //   dataType: 'string',
+  //   allowShare: 1,
+  //   objClassCode: 'SciTaskProposal',
+  //   componentUI: 'InputText',
+  //   codeOnDb: 'soQuyetDinhGiaoNhiemVu',
+  //   seqNum: 37,
+  //   required: 1,
+  //   allowStatistic: 0,
+  //   preventEdit: 0,
+  //   viewType: 'Detail',
+  //   id: '4000def5-2820-4d20-a624-9fc91834487e',
+  // },
+] as ObjField[];
+
+// Sample test mảng fields json đầu vào cho tham số @Input() fields.
+export const sampleFields = [
+  // new MultiImageUploadField({
+  //   key: 'images',
+  //   label: 'Hình ảnh kèm theo',
+  //   required: true,
+  //   maxSizeInMB: 62,
+  //   imageCardWidth: '208px'
+  // }),
+  // new SingleSelectField({
+  //   key: 'role',
+  //   label: 'Vai trò',
+  //   bindLabel: 'name',
+  //   bindValue: 'code',
+  //   required: true,
+  //   // outputAs: 'single',
+  //   suffixes: [
+  //     new Suffix({
+  //       key: 'test',
+  //       visibleOn: ['add', 'edit', 'view']
+  //     }),
+  //     new Suffix({
+  //       key: 'edit',
+  //     }),
+  //   ],
+  //   transformLabel: (option: Record<string, unknown>) => {
+  //     const { name, code } = option;
+  //     if (name && code) return `${name} - ${code}`;
+  //     return '';
+  //   },
+  //   apiConfig: {
+  //     baseUrl: 'https://quyhoachxaydung.hanam.gov.vn/gdci/system/Role',
+  //   },
+  //   options: [
+  //     { name: 'Quản trị viên', code: 'admin' },
+  //     { name: 'Người vận hành', code: 'operator' },
+  //     { name: 'Người dân', code: 'anonymous' },
+  //   ],
+  //   errorMessages: {
+  //     [CommonValidaterEnum.Required]: 'Bắt buộc nè hẹ hẹ',
+  //   },
+  // }),
+  // new SingleSelectField({
+  //   key: 'province',
+  //   label: 'Tỉnh/Thành phố',
+  //   required: true,
+  //   outputAs: 'single',
+  //   transformLabel: (option: Record<string, unknown>) => {
+  //     const { name, code } = option;
+  //     if (name && code) return `${name} - ${code}`;
+  //     return '';
+  //   },
+  //   apiConfig: {
+  //     baseUrl: 'https://quyhoachxaydung.hanam.gov.vn/gdci/main/CommonCats/Province',
+  //   },
+  //   isParent: true,
+  // }),
+  // new SingleSelectField({
+  //   key: 'district',
+  //   label: 'Quận/Huyện',
+  //   required: false,
+  //   transformLabel: (option: Record<string, unknown>) => {
+  //     const { name, code } = option;
+  //     if (name && code) return `${name} - ${code}`;
+  //     return '';
+  //   },
+  //   apiConfig: {
+  //     baseUrl: 'https://quyhoachxaydung.hanam.gov.vn/gdci/main/CommonCats/District',
+  //   },
+  //   isParent: true,
+  //   dependsOn: [
+  //     {
+  //       fieldKey: 'province',
+  //       paramKey: 'provinceCode',
+  //     },
+  //   ],
+  // }),
+
+  // new SingleSelectField({
+  //   key: 'ward',
+  //   label: 'Phường/Xã',
+  //   required: false,
+  //   transformLabel: (option: Record<string, unknown>) => {
+  //     const { name, code } = option;
+  //     if (name && code) return `${name} - ${code}`;
+  //     return '';
+  //   },
+  //   apiConfig: {
+  //     baseUrl: 'https://quyhoachxaydung.hanam.gov.vn/gdci/main/CommonCats/Ward',
+  //   },
+  //   dependsOn: [
+  //     {
+  //       fieldKey: 'district',
+  //       paramKey: 'districtCode',
+  //     },
+  //   ],
+  // }),
+  // new MultiSelectField({
+  //   key: 'multiRole',
+  //   label: 'Nhiều vai trò',
+  //   bindLabel: 'name',
+  //   bindValue: 'code',
+  //   outputAs: 'single',
+  //   required: true,
+  //   isDisabled: false,
+  //   transformLabel: (option: Record<string, unknown>) => {
+  //     const { name, code } = option;
+  //     if (name && code) return `${name} - ${code}`;
+  //     return '';
+  //   },
+  //   apiConfig: {
+  //     baseUrl: `${environment.GDCI_SYSTEM_URL}CommonCats/Position`,
+  //   },
+  //   errorMessages: {
+  //     [CommonValidaterEnum.Required]: 'Bắt buộc nè hẹ hẹ',
+  //   },
+  //   suffixes: [
+  //     new Suffix({
+  //       key: 'test',
+  //       visibleOn: ['add', 'edit'],
+  //     }),
+  //     new Suffix({
+  //       key: 'edit',
+  //     }),
+  //   ],
+  // }),
+  // new InputTextField({
+  //   key: 'username',
+  //   label: 'Tên tài khoản',
+  //   value: '',
+  //   required: true,
+  //   minLength: 1,
+  //   isDisabled: false,
+  //   suffixes: [
+  //     new Suffix({
+  //       key: 'view',
+  //       visibleOn: ['view']
+  //     }),
+  //     new Suffix({
+  //       key: 'edit',
+  //     }),
+  //   ],
+  //   errorMessages: {
+  //     // [CommonValidaterEnum.Required]: 'Bắt buộc nè hẹ hẹ',
+  //     // [CommonValidaterEnum.MinLength]: 'Tối thiểu nè hẹ hẹ',
+  //   },
+  //   pattern: 'alphaDashVN',
+  //   // grid: { xs: 12 },
+  //   // labelGrid: { xs: 8 },
+  //   // controlGrid: { xs: 16 }
+  // }),
+  // new InputPasswordField({
+  //   key: 'password',
+  //   label: 'Mật khẩu',
+  //   value: '',
+  //   required: false,
+  //   matchField: 'confirmPassword',
+  //   errorMessages: {
+  //     // [CustomValidaterEnum.MatchField]: 'Mật khẩu không khớp',
+  //   },
+  //   // grid: { xs: 12 },
+  //   //        labelGrid: { xs: 8 },
+  //   // controlGrid: { xs: 16 }
+  // }),
+  // new InputPasswordField({
+  //   key: 'confirmPassword',
+  //   label: 'Xác nhận mật khẩu',
+  //   value: '',
+  //   required: false,
+  //   matchField: 'password',
+  //   errorMessages: {
+  //     // [CustomValidaterEnum.MatchField]: 'Mật khẩu không khớp',
+  //   },
+  //   // labelGrid: { xs: 16 },
+  //   // controlGrid: { xs: 8 }
+  // }),
+  // new TextareaField({
+  //   key: 'note',
+  //   label: 'Ghi chú',
+  //   value: '',
+  //   required: false,
+  //   minLength: 3,
+  //   maxLength: 128,
+  //   errorMessages: {
+  //     // [CommonValidaterEnum.Required]: 'Bắt buộc nè hẹ hẹ',
+  //     // [CommonValidaterEnum.MinLength]: 'Tối thiểu nè hẹ hẹ',
+  //   },
+  //   // grid: { xs: 12 },
+  //   // labelGrid: { xs: 8 },
+  //   // controlGrid: { xs: 16 }
+  // }),
+  // new DatePickerField({
+  //   key: 'date',
+  //   label: 'Ngày',
+  //   required: true,
+  //   allowPastDates: false,
+  //   allowFutureDates: true,
+  //   isDisabled: true
+  // }),
+  // new DateRangeField({
+  //   key: 'expectedTime',
+  //   label: 'Thời gian dự kiến',
+  //   required: true,
+  //   outputAs: 'date',
+  //   allowPastDates: false,
+  //   allowFutureDates: true,
+  //   isDisabled: true
+  // }),
+
+  // new SingleFileUploadField({
+  //   key: 'attachment',
+  //   label: 'Văn bản đính kèm',
+  //   // required: true,
+  //   acceptedMimeTypes: [APPLICATION_TYPES.pdf, IMAGE_TYPES.tif, IMAGE_TYPES.tiff],
+  //   maxSizeInMB: 100000,
+  //   required: true,
+  //   apiFileConfig: {
+  //     uploadUrl: DEFAULT_UPLOAD_TIFF_URL,
+  //     deleteUrl: DEFAULT_DELETE_URL,
+  //     perMimeTypeConfig: {
+  //       'image/tiff': {
+  //         uploadUrl: DEFAULT_UPLOAD_TIFF_URL,
+  //         buildFormData: (file, extraParams) => {
+  //           const fd = new FormData();
+  //           fd.append('File', file);
+  //           fd.append('SaveFile', String(true));
+  //           fd.append('BucketName', 'documents');
+
+  //           return fd;
+  //         },
+  //       },
+  //     },
+  //   },
+  // }),
+  new MultiFileUploadField({
+    key: 'pictures',
+    label: 'Những hình ảnh kèm theo',
+    // required: true,
+    // acceptedMimeTypes: [APPLICATION_TYPES.pdf],
+    maxSizeInMB: 2,
+    required: true,
+  }),
+  // new AvatarUploadField({
+  //   key: 'avatar',
+  //   label: 'Ảnh đại diện',
+  //   acceptedMimeTypes: [IMAGE_TYPES.jpeg, IMAGE_TYPES.jpg, IMAGE_TYPES.png],
+  //   required: false,
+  //   labelGrid: { xs: 4 },
+  //   controlGrid: { xs: 20 },
+  // }),
+];
+
+export const sampleFields2 = [
+  new SingleSelectField({
+    key: 'role',
+    label: 'Vai trò',
+    bindLabel: 'name',
+    bindValue: 'code',
+    required: false,
+    outputAs: 'single',
+    transformLabel: (option: Record<string, unknown>) => {
+      const { name, code } = option;
+      if (name && code) return `${name} - ${code}`;
+      return '';
+    },
+    apiConfig: {
+      baseUrl: 'https://quyhoachxaydung.hanam.gov.vn/gdci/system/Role',
+    },
+    options: [
+      { name: 'Quản trị viên', code: 'admin' },
+      { name: 'Người vận hành', code: 'operator' },
+      { name: 'Người dân', code: 'anonymous' },
+    ],
+    errorMessages: {
+      [CommonValidaterEnum.Required]: 'Bắt buộc nè hẹ hẹ',
+    },
+  }),
+  new SingleSelectField({
+    key: 'province',
+    label: 'Tỉnh/Thành phố',
+    required: true,
+    transformLabel: (option: Record<string, unknown>) => {
+      const { name, code } = option;
+      if (name && code) return `${name} - ${code}`;
+      return '';
+    },
+    apiConfig: {
+      baseUrl: 'https://quyhoachxaydung.hanam.gov.vn/gdci/main/CommonCats/Province',
+    },
+    isParent: true,
+  }),
+  new SingleSelectField({
+    key: 'district',
+    label: 'Quận/Huyện',
+    required: false,
+    transformLabel: (option: Record<string, unknown>) => {
+      const { name, code } = option;
+      if (name && code) return `${name} - ${code}`;
+      return '';
+    },
+    apiConfig: {
+      baseUrl: 'https://quyhoachxaydung.hanam.gov.vn/gdci/main/CommonCats/District',
+    },
+    isParent: true,
+    dependsOn: [
+      {
+        fieldKey: 'province',
+        paramKey: 'provinceCode',
+      },
+    ],
+  }),
+  new MultiSelectField({
+    key: 'multiRole',
+    label: 'Nhiều vai trò',
+    bindLabel: 'name',
+    bindValue: 'code',
+    outputAs: 'single',
+    required: true,
+    transformLabel: (option: Record<string, unknown>) => {
+      const { name, code } = option;
+      if (name && code) return `${name} - ${code}`;
+      return '';
+    },
+    apiConfig: {
+      baseUrl: 'https://quyhoachxaydung.hanam.gov.vn/gdci/system/Role',
+    },
+    errorMessages: {
+      [CommonValidaterEnum.Required]: 'Bắt buộc nè hẹ hẹ',
+    },
+  }),
+  new InputTextField({
+    key: 'username',
+    label: 'Tên tài khoản',
+    value: '',
+    required: true,
+    minLength: 1,
+    errorMessages: {
+      // [CommonValidaterEnum.Required]: 'Bắt buộc nè hẹ hẹ',
+      // [CommonValidaterEnum.MinLength]: 'Tối thiểu nè hẹ hẹ',
+    },
+    pattern: 'alphaDashVN',
+    // grid: { xs: 12 },
+    // labelGrid: { xs: 8 },
+    // controlGrid: { xs: 16 }
+  }),
+  new TextareaField({
+    key: 'note',
+    label: 'Ghi chú',
+    value: '',
+    required: false,
+    minLength: 3,
+    maxLength: 128,
+    errorMessages: {
+      // [CommonValidaterEnum.Required]: 'Bắt buộc nè hẹ hẹ',
+      // [CommonValidaterEnum.MinLength]: 'Tối thiểu nè hẹ hẹ',
+    },
+    // grid: { xs: 12 },
+    // labelGrid: { xs: 8 },
+    // controlGrid: { xs: 16 }
+  }),
+  new DatePickerField({
+    key: 'date',
+    label: 'Ngày',
+    required: true,
+    allowPastDates: false,
+    allowFutureDates: true,
+  }),
+  new DateRangeField({
+    key: 'expectedTime',
+    label: 'Thời gian dự kiến',
+    required: true,
+    outputAs: 'string',
+    allowPastDates: false,
+    allowFutureDates: true,
+  }),
+
+  new SingleFileUploadField({
+    key: 'attachment',
+    label: 'Văn bản đính kèm',
+    // required: true,
+    acceptedMimeTypes: [APPLICATION_TYPES.pdf],
+    maxSizeInMB: 2,
+    required: true,
+  }),
+  new MultiFileUploadField({
+    key: 'documents',
+    label: 'Những hồ sơ đính kèm',
+    // required: true,
+    acceptedMimeTypes: [APPLICATION_TYPES.pdf],
+    maxSizeInMB: 2,
+    required: false,
+  }),
+];
+
+// Sample test model data 1.
+export const sampleModel = {
+  province: { code: 35, name: 'Hà Name' },
+  username: 'ldquocccccccccc',
+  role: {
+    name: 'Quản trị viên',
+    code: 'ADMIN',
+  },
+  // role: 'ADMIN',
+  multiRole: [
+    {
+      name: 'Quản trị',
+      code: 'ADMIN',
+    },
+    {
+      name: 'Vận hành',
+      code: 'OPERATOR',
+    },
+  ],
+  note: 'Hãy nhớ những điều này:\n-Tôi là tôi.\n-Ai là tôi?\n-Sẽ ra sao nếu tôi tiến lên.\n-Hẹ hẹ.',
+  // note: 'hè hè\nhihihi\nfefefef',
+  // date: '08-01-2025',
+  // date: '30-08-2025',
+  // date: '2025-08-28',
+  date: new Date('2025-08-28'),
+  expectedTime: ['2025-08-28', new Date('2025-08-30')],
+  // attachment: [{
+  //   id: 'd3f549e0-a036-4b16-aa67-30444d23d795',
+  //   name: 'dummy.pdf',
+  //   path: '/dummy.pdf',
+  //   type: APPLICATION_TYPES.pdf,
+  //   size: 1800
+  // }],
+  // attachment:
+  //   '[{\"id\":\"1952e9ea-61c3-4b8d-abe2-4df238804458\",\"name\":\"Ho_Cubic_30L_Tong_Hop.pdf\",\"contentType\":\"application/pdf\",\"size\":28407,\"bucket\":\"caosuvn\",\"isDir\":false,\"createdAt\":\"2025-08-08\",\"updatedAt\":\"2025-08-08\",\"path\":\"/Ho_Cubic_30L_Tong_Hop.pdf\",\"isPublic\":true}]',
+
+  attachment:
+    '[{"id":"8fe5f9b1-18aa-415d-a33e-b4a843b7cab1","name":"image.png","contentType":"image/png","size":77239,"bucket":"public","isDir":false,"createdAt":"2025-09-04","updatedAt":"2025-09-04","path":"/image.png","isPublic":true},{"id":"b8963fb1-e842-42ac-9fc4-1733a3b65dc5","name":"image (1).png","contentType":"image/png","size":79610,"bucket":"public","isDir":false,"createdAt":"2025-09-04","updatedAt":"2025-09-04","path":"/image (1).png","isPublic":true}]',
+  pictures:
+    '[{\"id\":\"1952e9ea-61c3-4b8d-abe2-4df238803338\",\"name\":\"Ho_Cubic_30L_Tong_Hop.pdf\",\"contentType\":\"application/pdf\",\"size\":28407,\"bucket\":\"caosuvn\",\"isDir\":false,\"createdAt\":\"2025-08-08\",\"updatedAt\":\"2025-08-08\",\"path\":\"/Ho_Cubic_30L_Tong_Hop.pdf\",\"isPublic\":true},{\"id\":\"1952e9ea-61c3-4b8d-abe2-4df238804458\",\"name\":\"Ho_Cubic_35L_Tong_Hop.pdf\",\"contentType\":\"application/pdf\",\"size\":28407,\"bucket\":\"caosuvn\",\"isDir\":false,\"createdAt\":\"2025-08-08\",\"updatedAt\":\"2025-08-08\",\"path\":\"/Ho_Cubic_35L_Tong_Hop.pdf\",\"isPublic\":true}]',
+  // pictures: '[{"id":"d3f549e0-a036-4b16-aa67-30444d23d795","name":"dummy.pdf","path":"/dummy.pdf","contentType":"application/pdf","size":1800},{"id":"d3f549e0-a036-4b16-aa67-30444d23d795","name":"dummy.pdf","path":"/dummy.pdf","contentType":"application/pdf","size":1800},{"id":"d3f549e0-a036-4b16-aa67-30444d23d795","name":"dummy.pdf","path":"/dummy.pdf","contentType":"application/pdf","size":1800},{"id":"d3f549e0-a036-4b16-aa67-30444d23d795","name":"dummy.pdf","path":"/dummy.pdf","contentType":"application/pdf","size":1800},{"id":"d3f549e0-a036-4b16-aa67-30444d23d795","name":"dummy.pdf","path":"/dummy.pdf","contentType":"application/pdf","size":1800}]'
+};
+
+// Sample test model data 2.
+export const sampleModel2 = {
+  images:
+    '[{"id":"56062785-a619-41f7-8b64-ed648e57f934","name":"vrg_file_5141201818_104814_39-11_anh_bai_chinh_ml41ozadgy_ug51tjdtjb.jpg","contentType":"image/jpeg","size":176638,"bucket":"public","isDir":false,"createdAt":"2025-09-08","updatedAt":"2025-09-08","path":"/vrg_file_5141201818_104814_39-11_anh_bai_chinh_ml41ozadgy_ug51tjdtjb.jpg","isPublic":true},{"id":"79c62863-8241-4785-ac52-162a1d5347a6","name":"vrg_file_5409423468_coral-reef-fish-reef-fish-aquarium-wallpaper-preview.jpg","contentType":"image/jpeg","size":128651,"bucket":"public","isDir":false,"createdAt":"2025-09-08","updatedAt":"2025-09-08","path":"/vrg_file_5409423468_coral-reef-fish-reef-fish-aquarium-wallpaper-preview.jpg","isPublic":true},{"id":"973d2861-fe87-481f-9dc7-aeb7991516de","name":"vrg_file_8710772406_nemo_fi.jpg","contentType":"image/jpeg","size":19134,"bucket":"public","isDir":false,"createdAt":"2025-09-08","updatedAt":"2025-09-08","path":"/vrg_file_8710772406_nemo_fi.jpg","isPublic":true}]',
+  avatar:
+    '[{"id":"55283e86-6d16-4f12-9d9b-fce1b928eae5","name":"104814_39-11_anh_bai_chinh_ml41ozadgy_ug51tjdtjb.jpg","contentType":"image/jpeg","size":176638,"bucket":"public","isDir":false,"createdAt":"2025-08-19","updatedAt":"2025-08-19","path":"/104814_39-11_anh_bai_chinh_ml41ozadgy_ug51tjdtjb.jpg","isPublic":true}]',
+  province: { code: 35, name: 'Hà Name' },
+  district: { code: 349, name: 'Duy tiên' },
+  username: 'dddddddddddddddddddddddd',
+  role: {
+    name: 'Vận hành',
+    code: 'OPERATOR',
+  },
+  // role: 'ADMIN',
+  multiRole: [
+    {
+      name: 'Quản trị',
+      code: 'ADMIN',
+    },
+    {
+      name: 'Vận hành',
+      code: 'OPERATOR',
+    },
+    {
+      name: 'Người dân',
+      code: 'ANONYMOUS',
+    },
+  ],
+  note: 'CCCCC',
+  // note: 'hè hè\nhihihi\nfefefef',
+  // date: '08-01-2025',
+  // date: '30-08-2025',
+  // date: '2025-08-28',
+  date: new Date('2025-08-30'),
+  expectedTime: ['2025-08-01', new Date('2025-08-02')],
+  // attachment: [{
+  //   id: 'd3f549e0-a036-4b16-aa67-30444d23d795',
+  //   name: 'dummy.pdf',
+  //   path: '/dummy.pdf',
+  //   type: APPLICATION_TYPES.pdf,
+  //   size: 1800
+  // }],
+  attachment:
+    '[{"id":"8fe5f9b1-18aa-415d-a33e-b4a843b7cab1","name":"image.png","contentType":"image/png","size":77239,"bucket":"public","isDir":false,"createdAt":"2025-09-04","updatedAt":"2025-09-04","path":"/image.png","isPublic":true},{"id":"b8963fb1-e842-42ac-9fc4-1733a3b65dc5","name":"image (1).png","contentType":"image/png","size":79610,"bucket":"public","isDir":false,"createdAt":"2025-09-04","updatedAt":"2025-09-04","path":"/image (1).png","isPublic":true}]',
+  // attachment:
+  //   '[{\"id\":\"1952e9ea-61c3-4b8d-abe2-4df238804458\",\"name\":\"dumpleeeee.pdf\",\"contentType\":\"application/pdf\",\"size\":28407,\"bucket\":\"caosuvn\",\"isDir\":false,\"createdAt\":\"2025-08-08\",\"updatedAt\":\"2025-08-08\",\"path\":\"/Ho_Cubic_30L_Tong_Hop.pdf\",\"isPublic\":true}]',
+  pictures:
+    '[{\"id\":\"1952e9ea-61c3-4b8d-abe2-4df238803338\",\"name\":\"Ho_Cubic_45L_Tong_Hop.pdf\",\"contentType\":\"application/pdf\",\"size\":28407,\"bucket\":\"caosuvn\",\"isDir\":false,\"createdAt\":\"2025-08-08\",\"updatedAt\":\"2025-08-08\",\"path\":\"/Ho_Cubic_30L_Tong_Hop.pdf\",\"isPublic\":true},{\"id\":\"1952e9ea-61c3-4b8d-abe2-4df238804458\",\"name\":\"Ho_Cubic_60L_Tong_Hop.pdf\",\"contentType\":\"application/pdf\",\"size\":28407,\"bucket\":\"caosuvn\",\"isDir\":false,\"createdAt\":\"2025-08-08\",\"updatedAt\":\"2025-08-08\",\"path\":\"/Ho_Cubic_35L_Tong_Hop.pdf\",\"isPublic\":true}]',
+  // pictures: '[{"id":"d3f549e0-a036-4b16-aa67-30444d23d795","name":"dummy.pdf","path":"/dummy.pdf","contentType":"application/pdf","size":1800},{"id":"d3f549e0-a036-4b16-aa67-30444d23d795","name":"dummy.pdf","path":"/dummy.pdf","contentType":"application/pdf","size":1800},{"id":"d3f549e0-a036-4b16-aa67-30444d23d795","name":"dummy.pdf","path":"/dummy.pdf","contentType":"application/pdf","size":1800},{"id":"d3f549e0-a036-4b16-aa67-30444d23d795","name":"dummy.pdf","path":"/dummy.pdf","contentType":"application/pdf","size":1800},{"id":"d3f549e0-a036-4b16-aa67-30444d23d795","name":"dummy.pdf","path":"/dummy.pdf","contentType":"application/pdf","size":1800}]'
+};
+
+//#region Multi Form
+
+export const sampleMultiFormFieldsA = [
+  // ======== Input Text ========
+  new InputTextField({
+    key: 'usernameA',
+    label: 'Tên tài khoản A',
+    value: '',
+    required: true,
+    minLength: 2,
+    isDisabled: false,
+    errorMessages: {
+      [CommonValidaterEnum.Required]: 'Bắt buộc nha hẹ hẹ',
+      [CommonValidaterEnum.MinLength]: 'Tối thiểu là 2 nha hẹ hẹ',
+    },
+    pattern: 'alphaDashVN',
+    // grid: { xs: 12 },
+    // labelGrid: { xs: 8 },
+    // controlGrid: { xs: 16 },
+    //    suffixes: [
+    //   new Suffix({
+    //     key: 'view',
+    //     visibleOn: ['view'],
+    //   }),
+    //   new Suffix({
+    //     key: 'edit',
+    //   }),
+    // ],
+  }),
+  // ======== Input Text ========
+
+  // ======== Input Password ========
+  // new InputPasswordField({
+  //   key: 'passwordA',
+  //   label: 'Mật khẩu',
+  //   // value: '',
+  //   required: false,
+  //   matchField: 'confirmPasswordA',
+  //   errorMessages: {
+  //     [CustomValidaterEnum.MatchField]: 'Mật khẩu không khớp',
+  //   },
+  //   // grid: { xs: 12 },
+  //   //        labelGrid: { xs: 8 },
+  //   // controlGrid: { xs: 16 }
+  // }),
+  // new InputPasswordField({
+  //   key: 'confirmPasswordA',
+  //   label: 'Xác nhận mật khẩu',
+  //   // value: '',
+  //   required: false,
+  //   matchField: 'passwordA',
+  //   errorMessages: {
+  //     [CustomValidaterEnum.MatchField]: 'Xác nhận mật khẩu không khớp',
+  //   },
+  //   // labelGrid: { xs: 16 },
+  //   // controlGrid: { xs: 8 }
+  // }),
+  // ======== Input Password ========
+
+  // ======== Textarea ========
+  // new TextareaField({
+  //   key: 'noteA',
+  //   label: 'Ghi chú A',
+  //   value: '',
+  //   required: false,
+  //   minLength: 3,
+  //   maxLength: 128,
+  //   // grid: { xs: 12 },
+  //   // labelGrid: { xs: 8 },
+  //   // controlGrid: { xs: 16 }
+  // }),
+  // ======== Textarea ========
+
+  // ======== DATE PICKER ========
+  // new DatePickerField({
+  //   key: 'dateA',
+  //   label: 'Ngày A',
+  //   required: true,
+  //   allowPastDates: false,
+  //   allowFutureDates: true,
+  //   isDisabled: false,
+  // }),
+  // ======== DATE PICKER ========
+
+  // ======== DATE RANGE ========
+  // new DateRangeField({
+  //   key: 'expectedTimeA',
+  //   label: 'Thời gian dự kiến A',
+  //   required: true,
+  //   outputAs: 'date-array',
+  //   allowPastDates: false,
+  //   allowFutureDates: true,
+  //   isDisabled: false,
+  // }),
+  // ======== DATE RANGE ========
+
+  // ======== SINGLE SELECT ========
+  // new SingleSelectField({
+  //   key: 'roleA',
+  //   label: 'Vai trò A',
+  //   bindLabel: 'name',
+  //   bindValue: 'code',
+  //   required: true,
+  //   // outputAs: 'single',
+  //   transformLabel: (option: Record<string, unknown>) => {
+  //     const { name, code } = option;
+  //     if (name && code) return `${name} - ${code}`;
+  //     return '';
+  //   },
+  //   apiConfig: {
+  //     baseUrl: 'https://quyhoachxaydung.hanam.gov.vn/gdci/system/Role',
+  //   },
+  //   options: [
+  //     { name: 'Quản trị viên', code: 'admin' },
+  //     { name: 'Người vận hành', code: 'operator' },
+  //     { name: 'Người dân', code: 'anonymous' },
+  //   ],
+  // }),
+  // ======== SINGLE SELECT ========
+
+  // ======== MULTI SELECT ========
+  // new MultiSelectField({
+  //   key: 'multiRoleA',
+  //   label: 'Nhiều vai trò A',
+  //   bindLabel: 'name',
+  //   bindValue: 'code',
+  //   outputAs: 'single',
+  //   required: true,
+  //   isDisabled: false,
+  //   transformLabel: (option: Record<string, unknown>) => {
+  //     const { name, code } = option;
+  //     if (name && code) return `${name} - ${code}`;
+  //     return '';
+  //   },
+  //   apiConfig: {
+  //     baseUrl: `${environment.GDCI_SYSTEM_URL}CommonCats/Position`,
+  //   },
+  // }),
+  // ======== MULTI SELECT ========
+
+  // ======== SINGLE FILE UPLOAD ========
+  new SingleFileUploadField({
+    key: 'attachmentA',
+    label: 'Văn bản đính kèm A',
+    // required: true,
+    acceptedMimeTypes: [APPLICATION_TYPES.pdf, IMAGE_TYPES.tif, IMAGE_TYPES.tiff],
+    maxSizeInMB: 100000,
+    required: true,
+  }),
+  // ======== SINGLE FILE UPLOAD ========
+
+  // ======== MULTI FILE UPLOAD ========
+  new MultiFileUploadField({
+    key: 'picturesA',
+    label: 'Những hình ảnh kèm theo A',
+    acceptedMimeTypes: [APPLICATION_TYPES.pdf],
+    maxSizeInMB: 2,
+    required: false,
+  }),
+  // ======== MULTI FILE UPLOAD ========
+
+  // ======== MULTI IMAGE UPLOAD ========
+  new MultiImageUploadField({
+    key: 'imagesA',
+    label: 'Hình ảnh kèm theo A',
+    required: true,
+    maxSizeInMB: 62,
+    imageCardWidth: '208px',
+  }),
+  // ======== MULTI IMAGE UPLOAD ========
+
+  // ======== AVATAR UPLOAD ========
+  new AvatarUploadField({
+    key: 'avatarA',
+    label: 'Ảnh đại diện A',
+    acceptedMimeTypes: [IMAGE_TYPES.jpeg, IMAGE_TYPES.jpg, IMAGE_TYPES.png],
+    required: false,
+    labelGrid: { xs: 4 },
+    controlGrid: { xs: 20 },
+  }),
+  // ======== AVATAR UPLOAD ========
+];
+
+export const sampleMultiFormFieldsB = [
+  // ======== Input Text ========
+  new InputTextField({
+    key: 'usernameB',
+    label: 'Tên tài khoản B',
+    value: '',
+    required: true,
+    minLength: 2,
+    isDisabled: false,
+    errorMessages: {
+      [CommonValidaterEnum.Required]: 'Bắt buộc nha hẹ hẹ',
+      [CommonValidaterEnum.MinLength]: 'Tối thiểu là 2 nha hẹ hẹ',
+    },
+    pattern: 'alphaDashVN',
+    // grid: { xs: 12 },
+    // labelGrid: { xs: 8 },
+    // controlGrid: { xs: 16 },
+    //    suffixes: [
+    //   new Suffix({
+    //     key: 'view',
+    //     visibleOn: ['view'],
+    //   }),
+    //   new Suffix({
+    //     key: 'edit',
+    //   }),
+    // ],
+  }),
+  // ======== Input Text ========
+
+  // ======== Input Password ========
+  // new InputPasswordField({
+  //   key: 'passwordB',
+  //   label: 'Mật khẩu',
+  //   // value: '',
+  //   required: false,
+  //   matchField: 'confirmPasswordB',
+  //   errorMessages: {
+  //     [CustomValidaterEnum.MatchField]: 'Mật khẩu không khớp',
+  //   },
+  //   // grid: { xs: 12 },
+  //   //        labelGrid: { xs: 8 },
+  //   // controlGrid: { xs: 16 }
+  // }),
+  // new InputPasswordField({
+  //   key: 'confirmPasswordB',
+  //   label: 'Xác nhận mật khẩu',
+  //   // value: '',
+  //   required: false,
+  //   matchField: 'passwordB',
+  //   errorMessages: {
+  //     [CustomValidaterEnum.MatchField]: 'Xác nhận mật khẩu không khớp',
+  //   },
+  //   // labelGrid: { xs: 16 },
+  //   // controlGrid: { xs: 8 }
+  // }),
+  // ======== Input Password ========
+
+  // ======== Textarea ========
+  // new TextareaField({
+  //   key: 'noteB',
+  //   label: 'Ghi chú B',
+  //   value: '',
+  //   required: false,
+  //   minLength: 3,
+  //   maxLength: 128,
+  //   // grid: { xs: 12 },
+  //   // labelGrid: { xs: 8 },
+  //   // controlGrid: { xs: 16 }
+  // }),
+  // ======== Textarea ========
+
+  // ======== DATE PICKER ========
+  // new DatePickerField({
+  //   key: 'dateB',
+  //   label: 'Ngày B',
+  //   required: true,
+  //   allowPastDates: false,
+  //   allowFutureDates: true,
+  //   isDisabled: false,
+  // }),
+  // ======== DATE PICKER ========
+
+  // ======== DATE RANGE ========
+  // new DateRangeField({
+  //   key: 'expectedTimeB',
+  //   label: 'Thời gian dự kiến B',
+  //   required: true,
+  //   outputAs: 'date-array',
+  //   allowPastDates: false,
+  //   allowFutureDates: true,
+  //   isDisabled: false,
+  // }),
+  // ======== DATE RANGE ========
+
+  // ======== SINGLE SELECT ========
+  // new SingleSelectField({
+  //   key: 'roleB',
+  //   label: 'Vai trò B',
+  //   bindLabel: 'name',
+  //   bindValue: 'code',
+  //   required: true,
+  //   // outputAs: 'single',
+  //   transformLabel: (option: Record<string, unknown>) => {
+  //     const { name, code } = option;
+  //     if (name && code) return `${name} - ${code}`;
+  //     return '';
+  //   },
+  //   apiConfig: {
+  //     baseUrl: 'https://quyhoachxaydung.hanam.gov.vn/gdci/system/Role',
+  //   },
+  //   options: [
+  //     { name: 'Quản trị viên', code: 'admin' },
+  //     { name: 'Người vận hành', code: 'operator' },
+  //     { name: 'Người dân', code: 'anonymous' },
+  //   ],
+  // }),
+  // ======== SINGLE SELECT ========
+
+  // ======== MULTI SELECT ========
+  // new MultiSelectField({
+  //   key: 'multiRoleB',
+  //   label: 'Nhiều vai trò B',
+  //   bindLabel: 'name',
+  //   bindValue: 'code',
+  //   outputAs: 'single',
+  //   required: true,
+  //   isDisabled: false,
+  //   transformLabel: (option: Record<string, unknown>) => {
+  //     const { name, code } = option;
+  //     if (name && code) return `${name} - ${code}`;
+  //     return '';
+  //   },
+  //   apiConfig: {
+  //     baseUrl: `${environment.GDCI_SYSTEM_URL}CommonCats/Position`,
+  //   },
+  // }),
+  // ======== MULTI SELECT ========
+
+  // ======== SINGLE FILE UPLOAD ========
+  new SingleFileUploadField({
+    key: 'attachmentB',
+    label: 'Văn bản đính kèm B',
+    // required: true,
+    acceptedMimeTypes: [APPLICATION_TYPES.pdf, IMAGE_TYPES.tif, IMAGE_TYPES.tiff],
+    maxSizeInMB: 100000,
+    required: true,
+  }),
+  // ======== SINGLE FILE UPLOAD ========
+
+  // ======== MULTI FILE UPLOAD ========
+  new MultiFileUploadField({
+    key: 'picturesB',
+    label: 'Những hình ảnh kèm theo B',
+    acceptedMimeTypes: [APPLICATION_TYPES.pdf],
+    maxSizeInMB: 2,
+    required: false,
+  }),
+  // ======== MULTI FILE UPLOAD ========
+
+  // ======== MULTI IMAGE UPLOAD ========
+  new MultiImageUploadField({
+    key: 'imagesB',
+    label: 'Hình ảnh kèm theo B',
+    required: true,
+    maxSizeInMB: 62,
+    imageCardWidth: '208px',
+  }),
+  // ======== MULTI IMAGE UPLOAD ========
+
+  // ======== AVATAR UPLOAD ========
+  new AvatarUploadField({
+    key: 'avatarB',
+    label: 'Ảnh đại diện B',
+    acceptedMimeTypes: [IMAGE_TYPES.jpeg, IMAGE_TYPES.jpg, IMAGE_TYPES.png],
+    required: false,
+    labelGrid: { xs: 4 },
+    controlGrid: { xs: 20 },
+  }),
+  // ======== AVATAR UPLOAD ========
+];
+
+export const sampleMultiFormModelA = {
+  usernameA: 'Lương Văn Lào',
+};
+
+export const sampleMultiFormModelB = {
+  usernameB: 'Đào Mai Tôn',
+};
+
+//#endregion Multi Form
+
+//#region MultiSelect depend on field has isParent
+export const sampleMultiSelectDependOnParent = [
+  new MultiFileUploadField({
+    key: 'picturesB',
+    label: 'Những hình ảnh kèm theo B',
+    acceptedMimeTypes: [APPLICATION_TYPES.pdf, IMAGE_TYPES.png, IMAGE_TYPES.jpg],
+    maxSizeInMB: 1,
+    required: true,
+  }),
+
+  new SingleSelectField({
+    key: 'province',
+    label: 'Tỉnh/Thành phố',
+    required: true,
+    outputAs: 'single',
+    transformLabel: (option: Record<string, unknown>) => {
+      const { name, code } = option;
+      if (name && code) return `${name} - ${code}`;
+      return '';
+    },
+    apiConfig: {
+      baseUrl: `http://mock-api.com/CommonCats/Province`,
+    },
+    isParent: true,
+  }),
+
+  new MultiSelectField({
+    key: 'ward',
+    label: 'Phường/Xã',
+    required: false,
+    transformLabel: (option: Record<string, unknown>) => {
+      const { name, code } = option;
+      if (name && code) return `${name} - ${code}`;
+      return '';
+    },
+    apiConfig: {
+      baseUrl: `http://mock-api.com/CommonCats/Ward`,
+    },
+    dependsOn: [
+      {
+        fieldKey: 'province',
+        paramKey: 'provinceCode',
+      },
+    ],
+    // dependType: DependTypeEnum.All
+  }),
+];
+
+//#endregion MultiSelect depend on field has isParent