update

src/assets/configurations.example.ts

@@ -42,7 +42,7 @@ export enum API_PATHS {
   getDetailArtist = '/artist/detail',
   deleteManagingUnits = '/artistOwner/delete',
   deleteArtist = '/artist/delete',
-  getArtistDictionaryOptions = 'artist/dictionary',
+  getArtistDicitionaryOptions = 'artist/dictionary',
   artistOwnerAdd = 'artistOwner/add',
   updateArtist = 'artist/update',
   bankOptions = 'bank',

src/assets/type.ts

@@ -181,6 +181,17 @@ export type ArtistDicitionary = {
   field: number;
 };
 
+export type Contract = {
+  contractFrom: string;
+  contractTo: string;
+  status: number;
+  artistId: number;
+  artistName: string;
+  artistFullName: string;
+  field: string;
+  fieldId: number;
+};
+
 export type ArtistOwnerAdd = {
   code: string | undefined;
   name: string | undefined;
@@ -189,27 +200,6 @@ export type ArtistOwnerAdd = {
   email: string | undefined;
   phoneNumber: string | undefined;
   status: number;
-  fields: Array<
-    [
-      {
-        id: number;
-        name: string;
-        status: number;
-        numIndex: number;
-      }
-    ]
-  >;
-  contracts: Array<
-    [
-      {
-        contractFrom: string;
-        contractTo: string;
-        status: number;
-        artistId: number;
-        artistName: string;
-        artistFullName: string;
-        field: string;
-      }
-    ]
-  >;
+  fields: Array<FieldType>;
+  contracts: Array<Contract>;
 };

src/components/managingunits/add-new-managingunits-dialog/NewManagingUnits.ts

-import { defineComponent, Ref, ref, onMounted, watch } from 'vue';
-import { i18n } from 'src/boot/i18n';
-import { isEmail } from '../../../boot/functions';
-import { isMobilePhone } from '../../../boot/functions';
-import AddNewArtistDialog from 'components/managingunits/add-new-managingunits-dialog/add-new-artist-dialog/index.vue';
-import UpdateNewArtistDialog from 'components/managingunits/add-new-managingunits-dialog/update-new-artist-dialog/index.vue';
-import { API_PATHS } from 'src/assets/configurations.example';
-import { AxiosResponse } from 'axios';
-import { api, BaseResponseBody } from 'src/boot/axios';
-import { FieldType, ArtistDicitionary } from 'src/assets/type';
-import { config } from 'src/assets/configurations';
-
-export default defineComponent({
-  components: {
-    AddNewArtistDialog,
-    UpdateNewArtistDialog,
-  },
-  props: {
-    showDialog: {
-      type: Boolean,
-      required: true,
-    },
-    managingUnitAddTableColumns: { type: Array, required: true },
-    fieldsOptions: { type: Array, required: true },
-    fields: { type: Number, required: true },
-    code: { type: String, required: true },
-    name: { type: String, required: true },
-    representative: { type: String, required: true },
-    email: { type: String, required: true },
-    address: { type: String, required: true },
-    phoneNumber: { type: String, required: true },
-    status: { type: Boolean, required: true },
-  },
-  setup() {
-    //update
-    const managingUnitUpdateTableRows: Ref<unknown[]> = ref([]);
-    const openUpdateArtistDialog = ref(false);
-    const UpdateArtistDialog = (item: {
-      row: {
-        artistId: number;
-        artistName: string;
-        contractFrom: string;
-        contractTo: string;
-        field: string;
-        fullName: string;
-        status: number;
-        timeAdd: string;
-      };
-    }) => {
-      openUpdateArtistDialog.value = true;
-      fieldsUpdate.value.name = item.row.field;
-      nameUpdate.value.fullName = item.row.fullName;
-      timeUpdateForm.value.contractFrom = item.row.contractFrom;
-      timeUpdateTo.value.contractTo = item.row.contractTo;
-      statusUpdate.value.status = item.row.status;
-    };
-
-    const updateNewManagingUnitsArtist = () => {
-      managingUnitUpdateTableRows.value.push({});
-    };
-
-    //add
-    const managingUnitAddTableRows: Ref<unknown[]> = ref([]);
-    const openAddArtistDialog = ref(false);
-    const addNewManagingUnitsArtist = (
-      timeAddTo: string,
-      timeAddForm: string
-    ) => {
-      managingUnitAddTableRows.value.push({
-        contractFrom: timeAddForm,
-        contractTo: timeAddTo,
-        timeAdd: timeAddTo + ' - ' + timeAddForm,
-        status: statusAdd,
-        artistId: nameAdd.value.id,
-        artistName: nameAdd.value.artistName,
-        fullName: nameAdd.value.fullName,
-        field: nameAdd.value.field,
-      });
-    };
-
-    const codeRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('managingUnit.validateMessages.requireCode'),
-    ];
-    const nameRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('managingUnit.validateMessages.requireName'),
-    ];
-    const representativeRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('managingUnit.validateMessages.requireRepresentative'),
-    ];
-    const fieldsRules = [
-      (val?: number) =>
-        val !== undefined ||
-        i18n.global.t('managingUnit.validateMessages.requireFields'),
-    ];
-    const phoneNumberRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('managingUnit.validateMessages.requirePhoneNumber'),
-      (val: string) =>
-        isMobilePhone(val) ||
-        i18n.global.t('managingUnit.validateMessages.isPhone'),
-    ];
-    const emailRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('managingUnit.validateMessages.requireEmail'),
-      (val: string) =>
-        isEmail(val) || i18n.global.t('managingUnit.validateMessages.isEmail'),
-    ];
-    const addressRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('managingUnit.validateMessages.requireAddress'),
-    ];
-
-    const nameAdd: Ref<{
-      id: number;
-      name: string;
-      fullName: string;
-      artistName: string;
-      field: string;
-    }> = ref({
-      id: 1,
-      name: '',
-      fullName: '',
-      artistName: '',
-      field: '',
-    });
-    const fieldsAdd: Ref<{ id: number; name: string } | undefined> = ref();
-    const statusAdd: Ref<number> = ref(1);
-    const fieldsAddOptions: Ref<FieldType[]> = ref([]);
-    const nameAddOptions: Ref<ArtistDicitionary[]> = ref([]);
-    const nameUpdate: Ref<{
-      id: number;
-      name: string;
-      fullName: string;
-      artistName: string;
-      field: string;
-    }> = ref({
-      id: 1,
-      name: '',
-      fullName: '',
-      artistName: '',
-      field: '',
-    });
-    const fieldsUpdate: Ref<{ id: number; name: string }> = ref({
-      id: 0,
-      name: '',
-    });
-    const statusUpdate: Ref<{ status: number }> = ref({ status: 1 });
-    const timeUpdateForm: Ref<{ contractFrom: string }> = ref({
-      contractFrom: '',
-    });
-    const timeUpdateTo: Ref<{ contractTo: string }> = ref({ contractTo: '' });
-    watch(
-      () => fieldsAdd.value,
-      (value) => {
-        if (value) {
-          if (value) {
-            void getArtistDicitionaryOptions(value);
-          }
-        }
-      }
-    );
-
-    //gọi api lĩnh vực
-    const getFieldOptions = async () => {
-      const response = (await api({
-        url: API_PATHS.getFieldOptions,
-        method: 'GET',
-        params: {},
-      })) as AxiosResponse<BaseResponseBody<FieldType[]>>;
-      if (response.data.error.code === config.API_RES_CODE.OK.code) {
-        fieldsAddOptions.value = response.data.data;
-      }
-    };
-
-    //gọi api nghệ sỹ
-    const getArtistDicitionaryOptions = async (data: {
-      id: number;
-      name: string;
-    }) => {
-      nameAddOptions.value = [];
-      nameAdd.value = {
-        id: 1,
-        name: '',
-        fullName: '',
-        artistName: '',
-        field: '',
-      };
-      const response = (await api({
-        url: API_PATHS.getArtistDictionaryOptions,
-        method: 'GET',
-        params: {
-          field: data.id,
-        },
-      })) as AxiosResponse<BaseResponseBody<ArtistDicitionary[]>>;
-      if (response.data.error.code === config.API_RES_CODE.OK.code) {
-        nameAddOptions.value = response.data.data;
-      }
-    };
-
-    onMounted(() => {
-      void getFieldOptions();
-    });
-
-    return {
-      UpdateArtistDialog,
-      managingUnitUpdateTableRows,
-      managingUnitAddTableRows,
-      getFieldOptions,
-      getArtistDicitionaryOptions,
-      nameUpdate,
-      statusUpdate,
-      fieldsUpdate,
-      openAddArtistDialog,
-      addNewManagingUnitsArtist,
-      openUpdateArtistDialog,
-      updateNewManagingUnitsArtist,
-      codeRules,
-      nameRules,
-      representativeRules,
-      addressRules,
-      phoneNumberRules,
-      emailRules,
-      fieldsRules,
-      nameAdd,
-      fieldsAdd,
-      statusAdd,
-      fieldsAddOptions,
-      nameAddOptions,
-    };
-  },
-  emits: [
-    'update:showDialog',
-    'click:CloseBtn',
-    'update:code',
-    'update:name',
-    'update:representative',
-    'update:fields',
-    'update:email',
-    'update:phoneNumber',
-    'update:address',
-    'update:status',
-    'addNewManagingUnits',
-  ],
-});

src/components/managingunits/add-new-managingunits-dialog/add-new-artist-dialog/NewAddArtist.ts

-import { defineComponent, Ref, ref, watch } from 'vue';
-import { i18n } from 'src/boot/i18n';
-
-export default defineComponent({
-  props: {
-    openAddArtistDialog: {
-      type: Boolean,
-      required: true,
-    },
-    nameAddOptions: {type: Array, required: true},
-    fieldsAddOptions: {type: Array, required: true},
-    fieldsAdd: { type: Number, required: true},
-    nameAdd: { type: Number, required: true },
-    statusAdd: { type: Number, required: true },
-  },
-  setup(props, context) {
-    watch(
-      () => props.openAddArtistDialog,
-       (value) => {
-        if (!value) {
-      context.emit('update:nameAdd', undefined)
-      timeAddForm.value = ''
-      timeAddTo.value = ''
-      context.emit('update:fieldsAdd', undefined)
-      context.emit('update:statusAdd', 1)
-        }
-      }
-    );
-    const timeAddForm: Ref<string | undefined> = ref()
-    const timeAddTo: Ref<string | undefined> = ref()
-    const nameAddRules = [
-      (val?: number) =>
-        val !== undefined ||
-        i18n.global.t('managingUnitAdd.validateMessages.requireNameAdd'),
-    ];
-    const fieldsAddRules = [
-        (val?: number) =>
-          val !== undefined ||
-          i18n.global.t('managingUnitAdd.validateMessages.requireFieldsAdd'),
-      ];
-    const timeAddRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('managingUnitAdd.validateMessages.requireTimeAdd'),
-    ];
-    const timeAddToRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('managingUnitAdd.validateMessages.requireTimeAddTo'),
-    ];
-    return {
-        nameAddRules,
-        timeAddToRules,
-        fieldsAddRules,
-        timeAddRules,
-        timeAddForm,
-        timeAddTo,
-    };
-  },
-  emits: [
-    'update:openAddArtistDialog',
-    'click:CloseBtn',
-    'update:nameAdd',
-    'update:timeAddTo',
-    'update:timeAdd',
-    'update:fieldsAdd',
-    'update:statusAdd',
-    'addNewManagingUnitsArtist',
-  ],
-});

src/components/managingunits/add-new-managingunits-dialog/add-new-artist-dialog/index.vue

-<template>
-  <q-dialog
-    persistent
-    :model-value="openAddArtistDialog"
-    @update:model-value="$emit('update:openAddArtistDialog', $event)"
-  >
-    <q-card style="min-width: 700px" bordered>
-      <q-form
-        greedy
-        @submit.prevent="
-          $emit('addNewManagingUnitsArtist', timeAddForm, timeAddTo);
-          $emit('click:CloseBtn');
-        "
-      >
-        <q-card-section>
-          <q-item>
-            <q-item-section>
-              <q-item-label class="text-h6 text-weight-regular">{{
-                $t('managingUnitAdd.dialogLabel.title.add')
-              }}</q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-card-section>
-        <q-separator />
-
-        <q-card-section>
-          <div class="row q-col-gutter-sm">
-            <div class="col-6">
-              <q-select
-                :model-value="fieldsAdd"
-                @update:model-value="$emit('update:fieldsAdd', $event)"
-                :label="$t('managingUnitAdd.dialogLabel.fieldLabels.fieldsAdd')"
-                :options="fieldsAddOptions"
-                :rules="fieldsAddRules"
-                map-options
-                option-value="id"
-                option-label="name"
-                class="q-my-sm"
-                outlined
-                hide-bottom-space
-              ></q-select>
-              <q-input
-                :model-value="timeAddForm"
-                @update:model-value="$emit('update:timeAdd', $event)"
-                :label="$t('managingUnitAdd.dialogLabel.fieldLabels.timeAdd')"
-                class="q-my-sm"
-                outlined
-                :rules="timeAddRules"
-                readonly
-                ><template v-slot:append>
-                  <q-icon name="event" class="cursor-pointer">
-                    <q-popup-proxy
-                      ref="qDateProxy"
-                      transition-show="scale"
-                      transition-hide="scale"
-                    >
-                      <q-date v-model="timeAddForm" mask="DD/MM/YYYY">
-                        <div class="row items-center justify-end">
-                          <q-btn
-                            v-close-popup
-                            label="Close"
-                            color="primary"
-                            flat
-                          />
-                        </div>
-                      </q-date>
-                    </q-popup-proxy>
-                  </q-icon> </template
-              ></q-input>
-              <div>
-                <span class="text-body1">{{
-                  $t('managingUnitAdd.dialogLabel.fieldLabels.status')
-                }}</span
-                ><q-toggle
-                  :model-value="statusAdd"
-                  :true-value="1"
-                  :false-value="2"
-                  @update:model-value="$emit('update:statusAdd', $event)"
-                />
-              </div>
-            </div>
-            <div class="col-6">
-              <div>
-                <q-select
-                  :model-value="nameAdd"
-                  :disable="!fieldsAdd"
-                  @update:model-value="$emit('update:nameAdd', $event)"
-                  :label="$t('managingUnitAdd.dialogLabel.fieldLabels.nameAdd')"
-                  :options="nameAddOptions"
-                  :rules="nameAddRules"
-                  hide-bottom-space
-                  map-options
-                  option-value="id"
-                  option-label="fullName"
-                  class="q-my-sm"
-                  outlined
-                  clearable
-                >
-                </q-select
-                ><q-tooltip v-if="!fieldsAdd">Vui lòng chọn Lĩnh vực</q-tooltip>
-              </div>
-
-              <q-input
-                :model-value="timeAddTo"
-                @update:model-value="$emit('update:timeAddTo', $event)"
-                :label="$t('managingUnitAdd.dialogLabel.fieldLabels.timeAddTo')"
-                class="q-my-sm"
-                outlined
-                :rules="timeAddToRules"
-                readonly
-                ><template v-slot:append>
-                  <q-icon name="event" class="cursor-pointer">
-                    <q-popup-proxy
-                      ref="qDateProxy"
-                      transition-show="scale"
-                      transition-hide="scale"
-                    >
-                      <q-date v-model="timeAddTo" mask="DD/MM/YYYY">
-                        <div class="row items-center justify-end">
-                          <q-btn
-                            v-close-popup
-                            label="Close"
-                            color="primary"
-                            flat
-                          />
-                        </div>
-                      </q-date>
-                    </q-popup-proxy>
-                  </q-icon>
-                </template>
-              </q-input>
-            </div>
-          </div>
-        </q-card-section>
-        <q-card-actions align="right">
-          <div>
-            <q-btn
-              color="grey"
-              no-caps
-              style="width: 90px"
-              class="q-mr-sm"
-              :label="$t('managingUnitAdd.crudActions.cancel')"
-              @click="$emit('click:CloseBtn')"
-            />
-            <q-btn
-              type="submit"
-              color="primary"
-              no-caps
-              style="width: 90px"
-              :label="$t('managingUnitAdd.crudActions.save')"
-            />
-          </div>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script lang="ts" src="./NewAddArtist.ts"></script>

src/components/managingunits/add-new-managingunits-dialog/update-new-artist-dialog/NewUpdateArtist.ts

-import { defineComponent, Ref, ref, watch } from 'vue';
-import { i18n } from 'src/boot/i18n';
-
-export default defineComponent({
-  props: {
-    openUpdateArtistDialog: {
-      type: Boolean,
-      required: true,
-    },
-    nameAddOptions: { type: Array, required: true },
-    fieldsAddOptions: { type: Array, required: true },
-    fieldsUpdate: { type: Number, required: true },
-    nameUpdate: { type: Number, required: true },
-    statusUpdate: { type: Number, required: true },
-  },
-  setup(props, context) {
-    watch(
-      () => props.openUpdateArtistDialog,
-      (value) => {
-        if (!value) {
-          context.emit('update:nameUpdate', undefined);
-          timeUpdateForm.value = '';
-          timeUpdateTo.value = '';
-          context.emit('update:fieldsUpdate', undefined);
-          context.emit('update:statusUpdate', 1);
-        }
-      }
-    );
-    const timeUpdateForm: Ref<string | undefined> = ref();
-    const timeUpdateTo: Ref<string | undefined> = ref();
-    const nameUpdateRules = [
-      (val?: number) =>
-        val !== undefined ||
-        i18n.global.t('managingUnitAdd.validateMessages.requireNameUpdate'),
-    ];
-    const fieldsUpdateRules = [
-      (val?: number) =>
-        val !== undefined ||
-        i18n.global.t('managingUnitAdd.validateMessages.requireFieldsUpdate'),
-    ];
-    const timeUpdateFormRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('managingUnitAdd.validateMessages.requireTimeUpdate'),
-    ];
-    const timeUpdateToRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('managingUnitAdd.validateMessages.requireTimeUpdateTo'),
-    ];
-    return {
-      nameUpdateRules,
-      fieldsUpdateRules,
-      timeUpdateFormRules,
-      timeUpdateToRules,
-      timeUpdateForm,
-      timeUpdateTo,
-    };
-  },
-  emits: [
-    'update:openUpdateArtistDialog',
-    'click:CloseBtn',
-    'update:nameUpdate',
-    'update:timeUpdateTo',
-    'update:timeUpdateForm',
-    'update:fieldsUpdate',
-    'update:statusUpdate',
-    'updateNewManagingUnitsArtist',
-  ],
-});

src/components/managingunits/update-new-managingunits-dialog/UpdateNewManagingUnits.ts

-import { defineComponent, ref, Ref, onMounted } from 'vue';
-import { i18n } from 'src/boot/i18n';
-import { isEmail } from '../../../boot/functions';
-import { isMobilePhone } from '../../../boot/functions';
-import NewArtistDialog from 'components/managingunits/update-new-managingunits-dialog/add-new-artist-dialog/index.vue'
-import UpdateNewArtistDialog from 'components/managingunits/update-new-managingunits-dialog/update-new-artist-dialog/index.vue'
-import { API_PATHS } from 'src/assets/configurations.example';
-import { AxiosResponse } from 'axios';
-import { api, BaseResponseBody } from 'src/boot/axios';
-import {
-  FieldType,
-} from 'src/assets/type';
-import { config } from 'src/assets/configurations';
-
-
-export default defineComponent({
-  components: {
-    NewArtistDialog,
-    UpdateNewArtistDialog
-  },
-  props: {
-    showDialogUpdate: {
-      type: Boolean,
-      required: true,
-    },
-    managingUnitUpdateTableRows: {type: Array, required: true},
-    managingUnitUpdateTableColumns: {type: Array, required: true},
-    fieldsOptions: {type: Array, required: true},
-    fields: { type: Number, required: true},
-    code: { type: String, required: true },
-    name: { type: String, required: true },
-    representative: { type: String, required: true },
-    email: { type: String, required: true },
-    address: { type: String, required: true },
-    phoneNumber: { type: String, required: true },
-    status: { type: Boolean, required: true },
-  },
-  setup() {
-    const openAddArtistDialog = ref(false)
-    const updateNewManagingUnitsArtist = () => {
-      //gọi api thêm mới
-      try {
-      } catch (error) {}
-    };
-    const openUpdateArtistDialog = ref(false)
-    const updateUpdateNewManagingUnitsArtist = () => {
-      //gọi api cập nhật
-      try {
-      } catch (error) {}
-    };
-    const codeRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('managingUnit.validateMessages.requireCode'),
-    ];
-    const nameRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('managingUnit.validateMessages.requireName'),
-    ];
-    const representativeRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('managingUnit.validateMessages.requireRepresentative'),
-    ];
-      const fieldsRules = [
-        (val?: number) =>
-          val !== undefined ||
-          i18n.global.t('managingUnit.validateMessages.requireFields'),
-      ];
-    const phoneNumberRules = [
-        (val?: string) =>
-          (val && val.trim().length) ||
-          i18n.global.t('managingUnit.validateMessages.requirePhoneNumber'),
-        (val: string) =>
-          isMobilePhone(val) ||
-          i18n.global.t('managingUnit.validateMessages.isPhone'),
-      ];
-    const emailRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('managingUnit.validateMessages.requireEmail'),
-      (val: string) =>
-        isEmail(val) || i18n.global.t('managingUnit.validateMessages.isEmail'),
-    ];
-    const addressRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('managingUnit.validateMessages.requireAddress'),
-    ];
-    const nameAdd: Ref<number | undefined> = ref()
-    const timeAddTo: Ref<string | undefined> = ref()
-    const fieldsAdd: Ref<number | undefined> = ref();
-    const statusAdd: Ref<boolean | number> = ref(true);
-    const timeAdd: Ref<string | undefined> = ref();
-    const fieldsAddOptions: Ref<FieldType[]> = ref([]);
-    const nameAddOptions = ref([
-      { id: 1, text: 'Ưng Hoàng Phúc' },
-      { id: 2, text: 'Nguyễn Tùng Dương' },
-      { id: 3, text: 'Nguyễn Sơn Tùng' },
-    ]);
-
-    const nameUpdate: Ref<number | undefined> = ref()
-    const timeUpdateTo: Ref<string | undefined> = ref()
-    const fieldsUpdate: Ref<number | undefined> = ref();
-    const statusUpdate: Ref<boolean | number> = ref(true);
-    const timeUpdate: Ref<string | undefined> = ref();
-    const nameUpdateOptions = ref([
-      { id: 1, text: 'Ưng Hoàng Phúc' },
-      { id: 2, text: 'Nguyễn Tùng Dương' },
-      { id: 3, text: 'Nguyễn Sơn Tùng' },
-    ]);
-
-    //gọi api lĩnh vực
-    const getFieldOptions = async () => {
-      const response = (await api({
-        url: API_PATHS.getFieldOptions,
-        method: 'GET',
-        params: {},
-      })) as AxiosResponse<BaseResponseBody<FieldType[]>>;
-      if (response.data.error.code === config.API_RES_CODE.OK.code) {
-        fieldsAddOptions.value = response.data.data;
-      }
-    };
-
-    onMounted(() => {
-      void getFieldOptions();
-    });
-
-    return {
-    getFieldOptions,
-    nameUpdate,
-    timeUpdateTo,
-    fieldsUpdate,
-    statusUpdate,
-    timeUpdate,
-    nameUpdateOptions,
-    openUpdateArtistDialog,
-    updateUpdateNewManagingUnitsArtist,
-    nameAdd,
-    timeAddTo,
-    fieldsAdd,
-    timeAdd,
-    statusAdd,
-    nameAddOptions,
-    fieldsAddOptions,
-    openAddArtistDialog,
-    updateNewManagingUnitsArtist,
-    codeRules,
-    nameRules,
-    representativeRules,
-    addressRules,
-    phoneNumberRules,
-    emailRules,
-    fieldsRules
-    };
-  },
-  emits: [
-    'update:showDialogUpdate',
-    'click:CloseBtn',
-    'update:code',
-    'update:name',
-    'update:representative',
-    'update:fields',
-    'update:email',
-    'update:phoneNumber',
-    'update:address',
-    'update:status',
-    'updateNewManagingUnits',
-  ],
-});

src/components/managingunits/update-new-managingunits-dialog/add-new-artist-dialog/NewAddArtist.ts

-import { defineComponent } from 'vue';
-import { i18n } from 'src/boot/i18n';
-
-export default defineComponent({
-  props: {
-    openAddArtistDialog: {
-      type: Boolean,
-      required: true,
-    },
-    fieldsAddOptions: {type: Array, required: true},
-    fieldsAdd: { type: Number, required: true},
-    nameAddOptions: {type: Array, required: true},
-    nameAdd: { type: Number, required: true },
-    timeAddTo: { type: String, required: true },
-    timeAdd: { type: String, required: true },
-    statusAdd: { type: Boolean, required: true },
-  },
-  setup() {
-    const nameAddRules = [
-      (val?: number) =>
-        val !== undefined ||
-        i18n.global.t('managingUnitAdd.validateMessages.requireNameAdd'),
-    ];
-    const timeAddToRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('managingUnitAdd.validateMessages.requireTimeAddTo'),
-    ];
-    const fieldsAddRules = [
-        (val?: number) =>
-          val !== undefined ||
-          i18n.global.t('managingUnitAdd.validateMessages.requireFieldsAdd'),
-      ];
-    const timeAddRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('managingUnitAdd.validateMessages.requireTimeAdd'),
-    ];
-    return {
-        nameAddRules,
-        timeAddToRules,
-        fieldsAddRules,
-        timeAddRules,
-    };
-  },
-  emits: [
-    'update:openAddArtistDialog',
-    'click:CloseBtn',
-    'update:nameAdd',
-    'update:timeAddTo',
-    'update:fieldsAdd',
-    'update:timeAdd',
-    'update:statusAdd',
-    'updateNewManagingUnitsArtist',
-  ],
-});

src/components/managingunits/update-new-managingunits-dialog/add-new-artist-dialog/index.vue

-<template>
-  <q-dialog
-    persistent
-    :model-value="openAddArtistDialog"
-    @update:model-value="$emit('update:openAddArtistDialog', $event)"
-  >
-    <q-card style="min-width: 700px" bordered>
-      <q-form greedy @submit.prevent="$emit('updateNewManagingUnitsArtist')">
-        <q-card-section>
-          <q-item>
-            <q-item-section>
-              <q-item-label class="text-h6 text-weight-regular">{{
-                $t('managingUnitAdd.dialogLabel.title.add')
-              }}</q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-card-section>
-        <q-separator />
-
-        <q-card-section>
-          <div class="row q-col-gutter-sm">
-            <div class="col-6">
-              <q-select
-                :model-value="fieldsAdd"
-                @update:model-value="$emit('update:fieldsAdd', $event)"
-                :label="$t('managingUnitAdd.dialogLabel.fieldLabels.fieldsAdd')"
-                :options="fieldsAddOptions"
-                :rules="fieldsAddRules"
-                emit-value
-                map-options
-                option-value="id"
-                option-label="name"
-                class="q-my-sm"
-                outlined
-                hide-bottom-space
-                clearable
-              ></q-select>
-              <q-input
-                :model-value="timeAdd"
-                @update:model-value="$emit('update:timeAdd', $event)"
-                :label="$t('managingUnitAdd.dialogLabel.fieldLabels.timeAdd')"
-                class="q-my-sm"
-                mask="date"
-                outlined
-                :rules="timeAddRules"
-                readonly
-              >
-                <template v-slot:append>
-                  <q-icon name="event" class="cursor-pointer">
-                    <q-popup-proxy
-                      ref="qDateProxy"
-                      transition-show="scale"
-                      transition-hide="scale"
-                    >
-                      <q-date v-model="timeAdd">
-                        <div class="row items-center justify-end">
-                          <q-btn
-                            v-close-popup
-                            label="Close"
-                            color="primary"
-                            flat
-                          />
-                        </div>
-                      </q-date>
-                    </q-popup-proxy>
-                  </q-icon> </template
-              ></q-input>
-            </div>
-            <div class="col-6">
-              <div>
-                <q-select
-                  :model-value="nameAdd"
-                  @update:model-value="$emit('update:nameAdd', $event)"
-                  :label="$t('managingUnitAdd.dialogLabel.fieldLabels.nameAdd')"
-                  :options="nameAddOptions"
-                  :disable="!fieldsAdd"
-                  :rules="nameAddRules"
-                  emit-value
-                  map-options
-                  option-value="id"
-                  option-label="text"
-                  class="q-my-sm"
-                  outlined
-                  hide-bottom-space
-                  clearable
-                ></q-select>
-                <q-tooltip>Vui lòng chọn Lĩnh vực</q-tooltip>
-              </div>
-
-              <q-input
-                :model-value="timeAddTo"
-                @update:model-value="$emit('update:timeAddTo', $event)"
-                :label="$t('managingUnitAdd.dialogLabel.fieldLabels.timeAddTo')"
-                class="q-my-sm"
-                mask="date"
-                outlined
-                :rules="timeAddToRules"
-                readonly
-              >
-                <template v-slot:append>
-                  <q-icon name="event" class="cursor-pointer">
-                    <q-popup-proxy
-                      ref="qDateProxy"
-                      transition-show="scale"
-                      transition-hide="scale"
-                    >
-                      <q-date v-model="timeAddTo">
-                        <div class="row items-center justify-end">
-                          <q-btn
-                            v-close-popup
-                            label="Close"
-                            color="primary"
-                            flat
-                          />
-                        </div>
-                      </q-date>
-                    </q-popup-proxy>
-                  </q-icon>
-                </template>
-              </q-input>
-              <div class="q-pr-sm">
-                <span class="text-body1">{{
-                  $t('managingUnitAdd.dialogLabel.fieldLabels.status')
-                }}</span
-                ><q-toggle
-                  :model-value="statusAdd"
-                  @update:model-value="$emit('update:statusAdd', $event)"
-                />
-              </div>
-            </div>
-          </div>
-        </q-card-section>
-        <q-card-actions align="right">
-          <div>
-            <q-btn
-              color="grey"
-              no-caps
-              style="width: 90px"
-              class="q-mr-sm"
-              :label="$t('managingUnitAdd.crudActions.cancel')"
-              @click="$emit('click:CloseBtn')"
-            />
-            <q-btn
-              type="submit"
-              color="primary"
-              no-caps
-              style="width: 90px"
-              :label="$t('managingUnitAdd.crudActions.save')"
-            />
-          </div>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script lang="ts" src="./NewAddArtist.ts"></script>

src/components/managingunits/update-new-managingunits-dialog/index.vue

-<template>
-  <q-dialog
-    persistent
-    :model-value="showDialogUpdate"
-    @update:model-value="$emit('update:showDialogUpdate', $event)"
-  >
-    <q-card style="min-width: 1200px" bordered>
-      <q-form greedy @submit.prevent="$emit('updateNewManagingUnits')">
-        <q-card-section>
-          <q-item>
-            <q-item-section>
-              <q-item-label class="text-h6 text-weight-regular">{{
-                $t('managingUnit.dialogLabel.title.update')
-              }}</q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-card-section>
-        <q-separator />
-
-        <q-card-section>
-          <div class="row q-col-gutter-sm">
-            <div class="col-6">
-              <q-input
-                :model-value="code"
-                @update:model-value="$emit('update:code', $event)"
-                :label="$t('managingUnit.dialogLabel.fieldLabels.code')"
-                :rules="codeRules"
-                hide-bottom-space
-                type="text"
-                class="q-my-sm"
-                outlined
-                clearable
-              ></q-input>
-              <q-input
-                :model-value="name"
-                @update:model-value="$emit('update:name', $event)"
-                :label="$t('managingUnit.dialogLabel.fieldLabels.name')"
-                type="text"
-                class="q-my-sm"
-                outlined
-                :rules="nameRules"
-                hide-bottom-space
-                clearable
-              ></q-input>
-              <q-input
-                :model-value="representative"
-                @update:model-value="$emit('update:representative', $event)"
-                :label="
-                  $t('managingUnit.dialogLabel.fieldLabels.representative')
-                "
-                type="text"
-                class="q-my-sm"
-                outlined
-                :rules="representativeRules"
-                hide-bottom-space
-                clearable
-              ></q-input>
-              <q-input
-                :model-value="email"
-                @update:model-value="$emit('update:email', $event)"
-                :label="$t('managingUnit.dialogLabel.fieldLabels.email')"
-                type="text"
-                class="q-my-sm"
-                outlined
-                :rules="emailRules"
-                hide-bottom-space
-                clearable
-              ></q-input>
-            </div>
-            <div class="col-6">
-              <q-input
-                :model-value="phoneNumber"
-                emit-value
-                @update:model-value="$emit('update:phoneNumber', $event)"
-                :label="$t('managingUnit.dialogLabel.fieldLabels.phoneNumber')"
-                class="q-my-sm"
-                type="number"
-                :rules="phoneNumberRules"
-                outlined
-                hide-bottom-space
-                clearable
-              ></q-input>
-              <q-select
-                :model-value="fields"
-                @update:model-value="$emit('update:fields', $event)"
-                :label="$t('managingUnit.dialogLabel.fieldLabels.fields')"
-                :options="fieldsOptions"
-                :rules="fieldsRules"
-                emit-value
-                map-options
-                option-value="id"
-                option-label="name"
-                class="q-my-sm"
-                outlined
-                hide-bottom-space
-                clearable
-              ></q-select>
-              <q-input
-                :model-value="address"
-                @update:model-value="$emit('update:address', $event)"
-                :label="$t('managingUnit.dialogLabel.fieldLabels.address')"
-                class="q-my-sm"
-                type="text"
-                outlined
-                :rules="addressRules"
-                hide-bottom-space
-                clearable
-              ></q-input>
-              <div class="q-pt-sm q-pl-sm">
-                <span class="text-body1">{{
-                  $t('managingUnit.dialogLabel.fieldLabels.status')
-                }}</span
-                ><q-toggle
-                  :model-value="status"
-                  @update:model-value="$emit('update:status', $event)"
-                />
-              </div>
-            </div>
-          </div>
-        </q-card-section>
-
-        <div class="row">
-          <div class="col-auto text-h6 text-weight-regular flex q-ml-md">
-            {{ $t('managingUnit.titleAdd')
-            }}<span style="color: red" class="q-ml-xs">*</span>
-          </div>
-          <q-space></q-space>
-          <div class="col-auto">
-            <q-btn
-              color="primary"
-              no-caps
-              :label="$t('managingUnitAdd.AddmanagingUnit')"
-              class="q-mr-sm"
-              @click="openAddArtistDialog = true"
-            >
-            </q-btn>
-          </div>
-        </div>
-        <NewArtistDialog
-          v-model:open-add-artist-dialog="openAddArtistDialog"
-          v-model:name-add="nameAdd"
-          v-model:time-add-to="timeAddTo"
-          v-model:fields-add="fieldsAdd"
-          v-model:time-add="timeAdd"
-          v-model:status-add="statusAdd"
-          :fields-add-options="fieldsAddOptions"
-          :name-add-options="nameAddOptions"
-          @click:CloseBtn="openAddArtistDialog = false"
-          @updateNewManagingUnitsArtist="updateNewManagingUnitsArtist"
-        />
-
-        <UpdateNewArtistDialog
-          v-model:open-update-artist-dialog="openUpdateArtistDialog"
-          v-model:name-update="nameUpdate"
-          v-model:time-update-to="timeUpdateTo"
-          v-model:fields-update="fieldsUpdate"
-          v-model:time-update="timeUpdate"
-          v-model:status-update="statusUpdate"
-          :fields-add-options="fieldsAddOptions"
-          :name-update-options="nameUpdateOptions"
-          @click:CloseBtn="openUpdateArtistDialog = false"
-          @updateNewManagingUnitsArtist="updateNewManagingUnitsArtist"
-        />
-
-        <q-card-actions>
-          <div class="col-12 q-mt-sm">
-            <q-table
-              :rows="managingUnitUpdateTableRows"
-              :columns="managingUnitUpdateTableColumns"
-              separator="cell"
-              :no-data-label="$t('emptyData')"
-              hide-pagination
-            >
-              <template v-slot:body-cell-action="">
-                <q-td style="padding: 0" class="flex flex-center">
-                  <q-btn flat round color="primary" icon="mdi-delete-outline">
-                    <q-tooltip :offset="[20, 10]">{{
-                      $t('managingUnitAdd.toolTipMessage.delete')
-                    }}</q-tooltip>
-                  </q-btn>
-                  <q-btn
-                    flat
-                    round
-                    color="primary"
-                    icon="mdi-account-edit-outline"
-                    @click="openUpdateArtistDialog = true"
-                  >
-                    <q-tooltip :offset="[20, 10]">{{
-                      $t('managingUnitAdd.toolTipMessage.updateInfo')
-                    }}</q-tooltip>
-                  </q-btn>
-                </q-td>
-              </template>
-              <template v-slot:body-cell-status="rowData">
-                <q-td>
-                  <div align="center">
-                    <q-chip
-                      :color="rowData.value ? 'positive' : 'orange'"
-                      text-color="white"
-                      size="sm"
-                    >
-                      {{
-                        rowData.value
-                          ? $t('managingUnitAdd.statusLabel.active')
-                          : $t('managingUnitAdd.statusLabel.inactive')
-                      }}
-                    </q-chip>
-                  </div>
-                </q-td>
-              </template>
-            </q-table>
-          </div>
-        </q-card-actions>
-
-        <q-card-actions align="right">
-          <div>
-            <q-btn
-              color="grey"
-              no-caps
-              style="width: 90px"
-              class="q-mr-sm"
-              :label="$t('managingUnit.crudActions.cancel')"
-              @click="$emit('click:CloseBtn')"
-            />
-            <q-btn
-              type="submit"
-              color="primary"
-              no-caps
-              style="width: 90px"
-              :label="$t('managingUnit.crudActions.save')"
-            />
-          </div>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script lang="ts" src="./UpdateNewManagingUnits.ts"></script>

src/components/managingunits/update-new-managingunits-dialog/update-new-artist-dialog/NewUpdateArtist.ts

-import { defineComponent } from 'vue';
-import { i18n } from 'src/boot/i18n';
-
-export default defineComponent({
-  props: {
-    openUpdateArtistDialog: {
-      type: Boolean,
-      required: true,
-    },
-    fieldsAddOptions: { type: Array, required: true },
-    fieldsUpdate: { type: Number, required: true },
-    nameUpdate: { type: Number, required: true },
-    nameUpdateOptions: { type: Array, required: true },
-    timeUpdateTo: { type: String, required: true },
-    timeUpdate: { type: String, required: true },
-    statusUpdate: { type: Boolean, required: true },
-  },
-  setup() {
-    const nameUpdateRules = [
-      (val?: number) =>
-        val !== undefined ||
-        i18n.global.t('managingUnitAdd.validateMessages.requireNameUpdate'),
-    ];
-    const timeUpdateToRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('managingUnitAdd.validateMessages.requireTimeUpdateTo'),
-    ];
-    const fieldsUpdateRules = [
-      (val?: number) =>
-        val !== undefined ||
-        i18n.global.t('managingUnitAdd.validateMessages.requireFieldsUpdate'),
-    ];
-    const timeUpdateRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('managingUnitAdd.validateMessages.requireTimeUpdate'),
-    ];
-    return {
-      nameUpdateRules,
-      timeUpdateToRules,
-      fieldsUpdateRules,
-      timeUpdateRules,
-    };
-  },
-  emits: [
-    'update:openUpdateArtistDialog',
-    'click:CloseBtn',
-    'update:nameUpdate',
-    'update:timeUpdateTo',
-    'update:fieldsUpdate',
-    'update:timeUpdate',
-    'update:statusUpdate',
-    'updateUpdateNewManagingUnitsArtist',
-  ],
-});

src/components/managingunits/update-new-managingunits-dialog/update-new-artist-dialog/index.vue

-<template>
-  <q-dialog
-    persistent
-    :model-value="openUpdateArtistDialog"
-    @update:model-value="$emit('update:openUpdateArtistDialog', $event)"
-  >
-    <q-card style="min-width: 700px" bordered>
-      <q-form
-        greedy
-        @submit.prevent="$emit('updateUpdateNewManagingUnitsArtist')"
-      >
-        <q-card-section>
-          <q-item>
-            <q-item-section>
-              <q-item-label class="text-h6 text-weight-regular">{{
-                $t('managingUnitAdd.dialogLabel.title.update')
-              }}</q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-card-section>
-        <q-separator />
-
-        <q-card-section>
-          <div class="row q-col-gutter-sm">
-            <div class="col-6">
-              <q-select
-                :model-value="fieldsUpdate"
-                @update:model-value="$emit('update:fieldsUpdate', $event)"
-                :label="
-                  $t('managingUnitAdd.dialogLabel.fieldLabels.fieldsUpdate')
-                "
-                :options="fieldsAddOptions"
-                :rules="fieldsUpdateRules"
-                emit-value
-                map-options
-                option-value="id"
-                option-label="name"
-                class="q-my-sm"
-                outlined
-                hide-bottom-space
-                clearable
-              ></q-select>
-              <q-input
-                :model-value="timeUpdate"
-                @update:model-value="$emit('update:timeUpdate', $event)"
-                :label="
-                  $t('managingUnitAdd.dialogLabel.fieldLabels.timeUpdate')
-                "
-                class="q-my-sm"
-                mask="date"
-                outlined
-                :rules="timeUpdateRules"
-                readonly
-              >
-                <template v-slot:append>
-                  <q-icon name="event" class="cursor-pointer">
-                    <q-popup-proxy
-                      ref="qDateProxy"
-                      transition-show="scale"
-                      transition-hide="scale"
-                    >
-                      <q-date v-model="timeUpdate">
-                        <div class="row items-center justify-end">
-                          <q-btn
-                            v-close-popup
-                            label="Close"
-                            color="primary"
-                            flat
-                          />
-                        </div>
-                      </q-date>
-                    </q-popup-proxy>
-                  </q-icon>
-                </template>
-              </q-input>
-            </div>
-            <div class="col-6">
-              <div>
-                <q-select
-                  :model-value="nameUpdate"
-                  @update:model-value="$emit('update:nameUpdate', $event)"
-                  :label="
-                    $t('managingUnitAdd.dialogLabel.fieldLabels.nameUpdate')
-                  "
-                  :options="nameUpdateOptions"
-                  :disable="!fieldsUpdate"
-                  :rules="nameUpdateRules"
-                  emit-value
-                  map-options
-                  option-value="id"
-                  option-label="text"
-                  class="q-my-sm"
-                  outlined
-                  hide-bottom-space
-                  clearable
-                ></q-select>
-                <q-tooltip>Vui lòng chọn Lĩnh vực</q-tooltip>
-              </div>
-
-              <q-input
-                :model-value="timeUpdateTo"
-                @update:model-value="$emit('update:timeUpdateTo', $event)"
-                :label="
-                  $t('managingUnitAdd.dialogLabel.fieldLabels.timeUpdateTo')
-                "
-                class="q-my-sm"
-                mask="date"
-                outlined
-                :rules="timeUpdateToRules"
-                readonly
-              >
-                <template v-slot:append>
-                  <q-icon name="event" class="cursor-pointer">
-                    <q-popup-proxy
-                      ref="qDateProxy"
-                      transition-show="scale"
-                      transition-hide="scale"
-                    >
-                      <q-date v-model="timeUpdateTo">
-                        <div class="row items-center justify-end">
-                          <q-btn
-                            v-close-popup
-                            label="Close"
-                            color="primary"
-                            flat
-                          />
-                        </div>
-                      </q-date>
-                    </q-popup-proxy>
-                  </q-icon> </template
-              ></q-input>
-              <div class="q-pr-sm">
-                <span class="text-body1">{{
-                  $t('managingUnitAdd.dialogLabel.fieldLabels.status')
-                }}</span
-                ><q-toggle
-                  :model-value="statusUpdate"
-                  @update:model-value="$emit('update:statusUpdate', $event)"
-                />
-              </div>
-            </div>
-          </div>
-        </q-card-section>
-        <q-card-actions align="right">
-          <div>
-            <q-btn
-              color="grey"
-              no-caps
-              style="width: 90px"
-              class="q-mr-sm"
-              :label="$t('managingUnitAdd.crudActions.cancel')"
-              @click="$emit('click:CloseBtn')"
-            />
-            <q-btn
-              type="submit"
-              color="primary"
-              no-caps
-              style="width: 90px"
-              :label="$t('managingUnitAdd.crudActions.save')"
-            />
-          </div>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script lang="ts" src="./NewUpdateArtist.ts"></script>

src/components/managingunits/add-new-managingunits-dialog/update-new-artist-dialog/index.vue → src/components/units-manager/unit-add-update-artist/index.vue

 <template>
   <q-dialog
     persistent
-    :model-value="openUpdateArtistDialog"
-    @update:model-value="$emit('update:openUpdateArtistDialog', $event)"
+    :model-value="isOpened"
+    @update:model-value="$emit('update:isOpened', $event)"
   >
     <q-card style="min-width: 700px" bordered>
       <q-form
         greedy
         @submit.prevent="
-          $emit('updateNewManagingUnitsArtist', timeUpdateForm, timeUpdateTo);
-          $emit('click:CloseBtn');
+          $emit('saveArtistInfo', {});
+          $emit('update:isOpened', false);
         "
       >
-        <q-card-section>
+        <q-card-section class="q-pa-none">
           <q-item>
             <q-item-section>
               <q-item-label class="text-h6 text-weight-regular">{{
-                $t('managingUnitAdd.dialogLabel.title.update')
+                isUpdate
+                  ? $t('managingUnitAdd.dialogLabel.title.add')
+                  : $t('managingUnitAdd.dialogLabel.title.update')
               }}</q-item-label>
             </q-item-section>
           </q-item>
         </q-card-section>
         <q-separator />
 
-        <q-card-section>
+        <q-card-section
+          class="overflow-auto"
+          style="max-height: calc(100vh - 10rem)"
+        >
           <div class="row q-col-gutter-sm">
             <div class="col-6">
               <q-select
-                :model-value="fieldsUpdate"
-                @update:model-value="$emit('update:fieldsUpdate', $event)"
+                :model-value="artistField"
+                @update:model-value="$emit('update:artistField', $event)"
                 :label="
-                  $t('managingUnitAdd.dialogLabel.fieldLabels.fieldsUpdate')
+                  $t('managingUnitAdd.dialogLabel.fieldLabels.artistField')
                 "
-                :options="fieldsAddOptions"
-                :rules="fieldsUpdateRules"
+                :options="fieldOptions"
+                :rules="artistFieldRules"
                 map-options
                 option-value="id"
                 option-label="name"
                 class="q-my-sm"
                 outlined
-                hide-bottom-space
               ></q-select>
               <q-input
-                :model-value="timeUpdateForm"
-                @update:model-value="$emit('update:timeUpdateForm', $event)"
+                :model-value="contractTimeFrom"
                 :label="
-                  $t('managingUnitAdd.dialogLabel.fieldLabels.timeUpdateForm')
+                  $t('managingUnitAdd.dialogLabel.fieldLabels.contractTimeFrom')
                 "
                 class="q-my-sm"
                 outlined
-                :rules="timeUpdateFormRules"
+                :rules="contractTimeFromRules"
                 readonly
                 ><template v-slot:append>
                   <q-icon name="event" class="cursor-pointer">
@@ -58,7 +61,13 @@
                       transition-show="scale"
                       transition-hide="scale"
                     >
-                      <q-date v-model="timeUpdateForm" mask="DD/MM/YYYY">
+                      <q-date
+                        :model-value="contractTimeFrom"
+                        @update:model-value="
+                          $emit('update:contractTimeFrom', $event)
+                        "
+                        mask="DD/MM/YYYY"
+                      >
                         <div class="row items-center justify-end">
                           <q-btn
                             v-close-popup
@@ -76,25 +85,24 @@
                   $t('managingUnitAdd.dialogLabel.fieldLabels.status')
                 }}</span
                 ><q-toggle
-                  :model-value="statusUpdate"
+                  :model-value="artistStatus"
                   :true-value="1"
                   :false-value="2"
-                  @update:model-value="$emit('update:statusUpdate', $event)"
+                  @update:model-value="$emit('update:artistStatus', $event)"
                 />
               </div>
             </div>
             <div class="col-6">
               <div>
                 <q-select
-                  :model-value="nameUpdate"
-                  :disable="!fieldsUpdate"
-                  @update:model-value="$emit('update:nameUpdate', $event)"
+                  :model-value="artistName"
+                  :disable="!artistField"
+                  @update:model-value="$emit('update:artistName', $event)"
                   :label="
-                    $t('managingUnitAdd.dialogLabel.fieldLabels.nameUpdate')
+                    $t('managingUnitAdd.dialogLabel.fieldLabels.artistName')
                   "
-                  :options="nameAddOptions"
-                  :rules="nameUpdateRules"
-                  hide-bottom-space
+                  :options="artistOptions"
+                  :rules="artistNameRules"
                   map-options
                   option-value="id"
                   option-label="fullName"
@@ -103,20 +111,19 @@
                   clearable
                 >
                 </q-select
-                ><q-tooltip v-if="!fieldsUpdate"
+                ><q-tooltip v-if="!artistField"
                   >Vui lòng chọn Lĩnh vực</q-tooltip
                 >
               </div>
 
               <q-input
-                :model-value="timeUpdateTo"
-                @update:model-value="$emit('update:timeUpdateTo', $event)"
+                :model-value="contractTimeTo"
                 :label="
-                  $t('managingUnitAdd.dialogLabel.fieldLabels.timeUpdateTo')
+                  $t('managingUnitAdd.dialogLabel.fieldLabels.contractTimeTo')
                 "
                 class="q-my-sm"
                 outlined
-                :rules="timeUpdateToRules"
+                :rules="contractTimeToRules"
                 readonly
                 ><template v-slot:append>
                   <q-icon name="event" class="cursor-pointer">
@@ -125,7 +132,13 @@
                       transition-show="scale"
                       transition-hide="scale"
                     >
-                      <q-date v-model="timeUpdateTo" mask="DD/MM/YYYY">
+                      <q-date
+                        :model-value="contractTimeTo"
+                        mask="DD/MM/YYYY"
+                        @update:model-value="
+                          $emit('update:contractTimeTo', $event)
+                        "
+                      >
                         <div class="row items-center justify-end">
                           <q-btn
                             v-close-popup
@@ -150,7 +163,7 @@
               style="width: 90px"
               class="q-mr-sm"
               :label="$t('managingUnitAdd.crudActions.cancel')"
-              @click="$emit('click:CloseBtn')"
+              @click="$emit('update:isOpened', false)"
             />
             <q-btn
               type="submit"
@@ -166,4 +179,64 @@
   </q-dialog>
 </template>
 
-<script lang="ts" src="./NewUpdateArtist.ts"></script>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { i18n } from 'src/boot/i18n';
+
+export default defineComponent({
+  props: {
+    isOpened: {
+      type: Boolean,
+      required: true,
+    },
+    isUpdate: { type: Boolean, default: false },
+    artistOptions: { type: Array, required: true },
+    fieldOptions: { type: Array, required: true },
+    artistField: { type: Number, required: true },
+    artistName: { type: Number, required: true },
+    artistStatus: { type: Number, required: true },
+    contractTimeFrom: { type: String, required: true },
+    contractTimeTo: { type: String, required: true },
+    //gọi api lĩnh vực
+  },
+  setup() {
+    const artistNameRules = [
+      (val?: number) =>
+        val !== undefined ||
+        i18n.global.t('managingUnitAdd.validateMessages.requireArtistName'),
+    ];
+    const artistFieldRules = [
+      (val?: number) =>
+        val !== undefined ||
+        i18n.global.t('managingUnitAdd.validateMessages.requireArtistField'),
+    ];
+    const contractTimeFromRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t(
+          'managingUnitAdd.validateMessages.requireContractTimeFromRules'
+        ),
+    ];
+    const contractTimeToRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('managingUnitAdd.validateMessages.requireContractTimeTo'),
+    ];
+    return {
+      artistNameRules,
+      artistFieldRules,
+      contractTimeFromRules,
+      contractTimeToRules,
+    };
+  },
+  emits: [
+    'update:isOpened',
+    'update:artistName',
+    'update:contractTimeTo',
+    'update:contractTimeFrom',
+    'update:artistField',
+    'update:artistStatus',
+    'saveArtistInfo',
+  ],
+});
+</script>

src/i18n/vi/index.ts

@@ -104,7 +104,7 @@ export default {
       requireUserName: 'Tên đăng nhập không hợp lệ',
       requirePassword: 'Vui lòng nhập mật khẩu',
       requireFullName: 'Vui lòng nhập họ tên',
-     
+
       requireEmail: 'Vui lòng nhập Email',
       isEmail: 'Email không hợp lệ',
       requireMobileNumber: 'Vui lòng nhập số điện thoại',
@@ -183,7 +183,7 @@ export default {
       requireName: 'Vui lòng nhập Tên đơn vị',
       requireRepresentative: 'Vui lòng nhập Người đại diện',
       requireFields: 'Vui lòng chọn Lĩnh vực',
-      
+
       requireEmail: 'Vui lòng nhập Email',
       isEmail: 'Email không hợp lệ',
       requirePhoneNumber: 'Vui lòng nhập Số điện thoại',
@@ -231,14 +231,10 @@ export default {
         update: 'Cập nhật nghệ sỹ',
       },
       fieldLabels: {
-        nameAdd: 'Tên nghệ sỹ *',
-        timeAddTo: 'Thời gian kết thúc hợp đồng *',
-        fieldsAdd: 'Lĩnh vực *',
-        timeAdd: 'Thời gian bắt đầu hợp đồng *',
-        nameUpdate: 'Tên nghệ sỹ *',
-        timeUpdateTo: 'Thời gian kết thúc hợp đồng *',
-        fieldsUpdate: 'Lĩnh vực *',
-        timeUpdate: 'Thời gian bắt đầu hợp đồng *',
+        artistName: 'Tên nghệ sỹ *',
+        contractTimeTo: 'Thời gian kết thúc hợp đồng *',
+        artistField: 'Lĩnh vực *',
+        contractTimeFrom: 'Thời gian bắt đầu hợp đồng *',
         status: 'Trạng thái',
       },
     },
@@ -251,19 +247,17 @@ export default {
       cancel: 'Đóng',
     },
     validateMessages: {
-      requireNameAdd: 'Vui lòng chọn Tên nghệ sỹ',
-      requireTimeAddTo: 'Vui lòng chọn Thời gian kết thúc hợp đồng',
-      requireFieldsAdd: 'Vui lòng chọn Lĩnh vực',
-      requireTimeAdd: 'Vui lòng chọn Thời gian bắt đầu hợp đồng',
-      requireNameUpdate: 'Vui lòng chọn Tên nghệ sỹ',
-      requireTimeUpdateTo: 'Vui lòng chọn Thời gian kết thúc hợp đồng',
-      requireFieldsUpdate: 'Vui lòng chọn Lĩnh vực',
-      requireTimeUpdate: 'Vui lòng chọn Thời gian bắt đầu hợp đồng',
+      requireArtistName: 'Vui lòng chọn nghệ sỹ',
+      requireContractTimeTo: 'Vui lòng chọn Thời gian kết thúc hợp đồng',
+      requireArtistField: 'Vui lòng chọn Lĩnh vực',
+      requireContractTimeFromRules: 'Vui lòng chọn Thời gian bắt đầu hợp đồng',
     },
     // confirmActionsTitle: {
     // },
-    // actionMessages: {
-    // },
+    actionMessages: {
+      unitAddArtistSuccess: 'Thêm nghệ sỹ thành công',
+      unitUpdateArtistSuccess: 'Cập nhật nghệ sỹ thành công',
+    },
   },
 
   // khách hàng