update

src/components/customer/update-new-customer-dialog/UpdateNewCustomerDialog.ts

+import { defineComponent } from 'vue';
+import { i18n } from 'src/boot/i18n';
+import { isEmail } from '../../../boot/functions';
+import { isMobilePhone } from '../../../boot/functions';
+
+export default defineComponent({
+  props: {
+    showDialogUpdate: {
+      type: Boolean,
+      required: true,
+    },
+    ratingsOptions: {type: Array, required: true},
+    businessTypeOptions: {type: Array, required: true},
+    userName: { type: String, required: true },
+    customerName: { type: String, required: true },
+    businessName: { type: String, required: true },
+    taxCode: { type: Number, required: true },
+    email: { type: String, required: true },
+    ratings: { type: String, required: true },
+    address: { type: String, required: true },
+    businessType: { type: String, required: true },
+    representative: { type: String, required: true },
+    position: { type: String, required: true },
+    phone: { type: String, required: true },
+    status: { type: Boolean, required: true },
+  },
+  setup() {
+    const userNameRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('customer.validateMessages.requireUserName'),
+    ];
+    const customerNameRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('customer.validateMessages.requireCustomerName'),
+    ];
+    const businessNameRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('customer.validateMessages.requireBusinessName'),
+    ];
+    const taxCodeRules = [
+        (val?: number) =>
+          val !== undefined ||
+          i18n.global.t('customer.validateMessages.requireTaxCode'),
+      ];
+    const phoneRules = [
+        (val?: string) =>
+          (val && val.trim().length) ||
+          i18n.global.t('customer.validateMessages.requirePhone'),
+        (val: string) =>
+          isMobilePhone(val) ||
+          i18n.global.t('customer.validateMessages.isPhone'),
+      ];
+    const emailRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('customer.validateMessages.requireEmail'),
+      (val: string) =>
+        isEmail(val) || i18n.global.t('customer.validateMessages.isEmail'),
+    ];
+    const addressRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('customer.validateMessages.requireAddress'),
+    ];
+    const businessTypeRules = [
+      (val?: number) =>
+        val !== undefined ||
+        i18n.global.t('customer.validateMessages.requireBusinessType'),
+    ];
+    const ratingsRules = [
+      (val?: number) =>
+        val !== undefined ||
+        i18n.global.t('customer.validateMessages.requireRatings'),
+    ];
+    const representativeRules = [
+        (val?: string) =>
+          (val && val.trim().length) ||
+          i18n.global.t('customer.validateMessages.requireRepresentative'),
+      ];
+      const positionRules = [
+        (val?: string) =>
+          (val && val.trim().length) ||
+          i18n.global.t('customer.validateMessages.requiredPosition'),
+      ];
+    return {
+      userNameRules,
+      customerNameRules,
+      businessNameRules,
+      taxCodeRules,
+      emailRules,
+      ratingsRules,
+      addressRules,
+      businessTypeRules,
+      representativeRules,
+      positionRules,
+      phoneRules,
+    };
+  },
+  emits: [
+    'update:showDialogUpdate',
+    'click:CloseBtn',
+    'update:userName',
+    'update:customerName',
+    'update:businessName',
+    'update:taxCode',
+    'update:email',
+    'update:ratings',
+    'update:address',
+    'update:businessType',
+    'update:representative',
+    'update:position',
+    'update:phone',
+    'update:status',
+    'updateNewCustomer',
+  ],
+});

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

 <template>
-  <div>My component</div>
+  <q-dialog
+    persistent
+    :model-value="showDialogUpdate"
+    @update:model-value="$emit('update:showDialogUpdate', $event)"
+  >
+    <q-card style="min-width: 900px" bordered>
+      <q-form greedy @submit.prevent="$emit('updateNewCustomer')">
+        <q-card-section>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-h6 text-weight-regular">{{
+                $t('customer.dialogLabel.title.updateCustomer')
+              }}</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="userName"
+                @update:model-value="$emit('update:userName', $event)"
+                :label="$t('customer.dialogLabel.fieldLabels.userName')"
+                :rules="userNameRules"
+                hide-bottom-space
+                type="text"
+                class="q-my-sm"
+                outlined
+                clearable
+              ></q-input>
+              <q-input
+                :model-value="customerName"
+                @update:model-value="$emit('update:customerName', $event)"
+                :label="$t('customer.dialogLabel.fieldLabels.customerName')"
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="customerNameRules"
+                hide-bottom-space
+                clearable
+              ></q-input>
+              <q-input
+                :model-value="businessName"
+                @update:model-value="$emit('update:businessName', $event)"
+                :label="$t('customer.dialogLabel.fieldLabels.businessName')"
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="businessNameRules"
+                hide-bottom-space
+                clearable
+              ></q-input>
+              <q-input
+                :model-value="taxCode"
+                @update:model-value="$emit('update:taxCode', $event)"
+                :label="$t('customer.dialogLabel.fieldLabels.taxCode')"
+                type="number"
+                class="q-my-sm"
+                outlined
+                :rules="taxCodeRules"
+                hide-bottom-space
+                clearable
+              ></q-input>
+              <q-input
+                :model-value="email"
+                @update:model-value="$emit('update:email', $event)"
+                :label="$t('customer.dialogLabel.fieldLabels.email')"
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="emailRules"
+                hide-bottom-space
+                clearable
+              ></q-input>
+              <q-select
+                :model-value="ratings"
+                @update:model-value="$emit('update:ratings', $event)"
+                :label="$t('customer.dialogLabel.fieldLabels.ratings')"
+                :options="ratingsOptions"
+                :rules="ratingsRules"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="text"
+                type="text"
+                class="q-my-sm"
+                outlined
+                hide-bottom-space
+                clearable
+              ></q-select>
+            </div>
+            <div class="col-6">
+              <q-input
+                :model-value="address"
+                @update:model-value="$emit('update:address', $event)"
+                :label="$t('customer.dialogLabel.fieldLabels.address')"
+                type="text"
+                class="q-my-sm"
+                :rules="addressRules"
+                outlined
+                hide-bottom-space
+                clearable
+              ></q-input>
+              <q-select
+                :model-value="businessType"
+                @update:model-value="$emit('update:businessType', $event)"
+                :label="$t('customer.dialogLabel.fieldLabels.businessType')"
+                :options="businessTypeOptions"
+                :rules="businessTypeRules"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="text"
+                type="text"
+                class="q-my-sm"
+                outlined
+                hide-bottom-space
+                clearable
+              ></q-select>
+              <q-input
+                :model-value="representative"
+                emit-value
+                @update:model-value="$emit('update:representative', $event)"
+                :label="$t('customer.dialogLabel.fieldLabels.representative')"
+                class="q-my-sm"
+                type="text"
+                outlined
+                :rules="representativeRules"
+                hide-bottom-space
+                clearable
+              ></q-input>
+              <q-input
+                :model-value="position"
+                emit-value
+                @update:model-value="$emit('update:position', $event)"
+                :label="$t('customer.dialogLabel.fieldLabels.position')"
+                class="q-my-sm"
+                type="text"
+                outlined
+                :rules="positionRules"
+                hide-bottom-space
+                clearable
+              ></q-input>
+              <q-input
+                :model-value="phone"
+                emit-value
+                @update:model-value="$emit('update:phone', $event)"
+                :label="$t('customer.dialogLabel.fieldLabels.phone')"
+                class="q-my-sm"
+                type="number"
+                :rules="phoneRules"
+                outlined
+                hide-bottom-space
+                clearable
+              ></q-input>
+              <div style="padding-top: 13px; padding-left: 12px">
+                <span class="text-body1">{{
+                  $t('customer.dialogLabel.fieldLabels.status')
+                }}</span
+                ><q-toggle
+                  :model-value="status"
+                  @update:model-value="$emit('update:status', $event)"
+                />
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-card-actions align="right">
+          <q-btn
+            color="grey"
+            no-caps
+            style="width: 90px"
+            :label="$t('customer.crudActions.cancel')"
+            @click="$emit('click:CloseBtn')"
+          />
+          <q-btn
+            type="submit"
+            color="primary"
+            no-caps
+            style="width: 90px"
+            :label="$t('customer.crudActions.save')"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  // name: 'ComponentName'
-})
-</script>
+<script lang="ts" src="./UpdateNewCustomerDialog.ts"></script>

src/components/group-info/index.vue

@@ -12,6 +12,7 @@
               style="margin-right: 8px"
               color="red"
               icon="delete"
+              no-caps
               :label="$t('crudActions.delete')"
               @click="$emit('deleteGroup')"
             />
@@ -19,6 +20,7 @@
               v-if="isDisable"
               color="primary"
               icon="update"
+              no-caps
               :label="
                 isDisable === EditMode.edit
                   ? $t('crudActions.update')
@@ -33,6 +35,7 @@
               size="x-small"
               flat
               round
+              no-caps
               color="primary"
               icon="close"
             />

src/components/user-management/add-new-user-dialog/index.vue

@@ -168,16 +168,20 @@
           </div>
         </q-card-section>
         <q-card-actions align="right">
+          <q-btn
+            color="grey"
+            no-caps
+            style="width: 90px"
+            :label="$t('userPage.crudActions.cancel')"
+            @click="$emit('click:CloseBtn')"
+          />
           <q-btn
             type="submit"
             color="primary"
+            no-caps
+            style="width: 90px"
             :label="$t('userPage.crudActions.save')"
           />
-          <q-btn
-            color="black"
-            :label="$t('userPage.crudActions.cancel')"
-            @click="$emit('click:CloseBtn')"
-          />
         </q-card-actions>
       </q-form>
     </q-card>

src/components/user-management/update-user-dialog/index.vue

@@ -148,16 +148,20 @@
           </div>
         </q-card-section>
         <q-card-actions align="right">
+          <q-btn
+            color="grey"
+            no-caps
+            style="width: 90px"
+            :label="$t('userPage.crudActions.cancel')"
+            @click="$emit('click:CloseBtn')"
+          />
           <q-btn
             type="submit"
             color="primary"
+            no-caps
+            style="width: 90px"
             :label="$t('userPage.crudActions.save')"
           />
-          <q-btn
-            color="black"
-            :label="$t('userPage.crudActions.cancel')"
-            @click="$emit('click:CloseBtn')"
-          />
         </q-card-actions>
       </q-form>
     </q-card>

src/i18n/vi/index.ts

@@ -66,7 +66,7 @@ export default {
       userName: 'Tên đăng nhập',
       fullName: 'Họ tên',
       email: 'Email',
-      phone: 'SĐT',
+      phone: 'Số điện thoại',
       unit: 'Đơn vị',
       status: 'Trạng thái',
       action: 'Chức năng',
@@ -168,7 +168,7 @@ export default {
     dialogLabel: {
       title: {
         addCustomer: 'Thêm mới khách hàng',
-        updateCustomer: 'Cập nhật người dùng',
+        updateCustomer: 'Cập nhật khách hàng',
       },
       fieldLabels: {
         userName: 'Tên đăng nhập *',

src/pages/don-vi-chu-quan/ManagingUnit.ts

@@ -24,7 +24,8 @@ export default defineComponent({
         field: 'unitCode',
         required: true,
         label: i18n.global.t('managingUnit.tableColumns.unit'),
-        align: 'center',
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
         sortable: false,
       },
       {
@@ -32,7 +33,8 @@ export default defineComponent({
         field: 'unitName',
         required: true,
         label: i18n.global.t('managingUnit.tableColumns.unitName'),
-        align: 'center',
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
         sortable: false,
       },
       {
@@ -40,7 +42,8 @@ export default defineComponent({
         field: 'deputy',
         required: true,
         label: i18n.global.t('managingUnit.tableColumns.deputy'),
-        align: 'center',
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
         sortable: false,
       },
       {
@@ -48,7 +51,8 @@ export default defineComponent({
         field: 'field',
         required: true,
         label: i18n.global.t('managingUnit.tableColumns.field'),
-        align: 'center',
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
         sortable: false,
       },
       {
@@ -56,7 +60,8 @@ export default defineComponent({
         field: 'email',
         required: true,
         label: i18n.global.t('managingUnit.tableColumns.email'),
-        align: 'center',
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
         sortable: false,
       },
       {
@@ -64,7 +69,8 @@ export default defineComponent({
         field: 'phoneNumber',
         required: true,
         label: i18n.global.t('managingUnit.tableColumns.phoneNumber'),
-        align: 'center',
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
         sortable: false,
       },
       {
@@ -72,6 +78,7 @@ export default defineComponent({
         field: 'status',
         required: true,
         label: i18n.global.t('managingUnit.tableColumns.status'),
+        headerStyle: 'text-align: center !important;',
         align: 'center',
         sortable: false,
       },
@@ -80,6 +87,7 @@ export default defineComponent({
         field: 'action',
         required: true,
         label: i18n.global.t('managingUnit.tableColumns.action'),
+        headerStyle: 'text-align: center !important;',
         align: 'center',
         sortable: false,
       },

src/pages/khach-hang/customer.ts

@@ -2,6 +2,7 @@ import { i18n } from 'src/boot/i18n';
 import { defineComponent, onMounted, ref, Ref } from 'vue';
 import Pagination from 'components/pagination/index.vue';
 import AddNewCustomerDialogComponent from '../../components/customer/add-new-customer-dialog/index.vue';
+import UpdateNewCustomerDialogComponent from '../../components/customer/update-new-customer-dialog/index.vue';
 export type ArtistInfoType = {
   id: number;
   userName: string | null;
@@ -20,6 +21,7 @@ export type ArtistInfoType = {
 export default defineComponent({
   components: {
     AddNewCustomerDialogComponent,
+    UpdateNewCustomerDialogComponent,
     Pagination,
   },
   setup() {
@@ -115,6 +117,7 @@ export default defineComponent({
     ];
     const userTableRowsCustomer: Ref<unknown[]> = ref([]);
     const showDialog = ref(false);
+    const showDialogUpdate = ref(false);
     const pageIndex = ref(1);
     const pageSize = ref(20);
     const totalPage = ref(10);
@@ -217,13 +220,39 @@ export default defineComponent({
         
       }
     };
+
+    const openUpdateCustomerDialog = () => {
+      showDialogUpdate.value = true;
+      userName.value = '';
+      customerName.value = '';
+      businessName.value = '';
+      taxCode.value = undefined;
+      email.value = '';
+      ratings.value = undefined;
+      address.value = '';
+      businessType.value = undefined;
+      representative.value = '';
+      position.value = '';
+      phone.value = '';
+    };
+
+    const updateNewCustomer = () => {
+      try {
+        
+      } catch (error) {
+        
+      }
+    };
     
     onMounted(() => {
       void getListCustomer();
     });
     return {
+      openUpdateCustomerDialog,
+      updateNewCustomer,
       openAddCustomerDialog,
       addNewCustomer,
+      showDialogUpdate,
       showDialog,
       id,
       userName,

src/pages/khach-hang/index.vue

@@ -63,14 +63,20 @@
         separator="cell"
         hide-pagination
       >
-        <template v-slot:body-cell-action>
+        <template v-slot:body-cell-action="">
           <q-td style="padding: 0" class="flex flex-center">
             <q-btn flat round color="primary" icon="mdi-information-outline">
               <q-tooltip :offset="[20, 10]">{{
                 $t('customer.toolTipMessage.informationCustomer')
               }}</q-tooltip>
             </q-btn>
-            <q-btn flat round color="primary" icon="mdi-account-edit-outline">
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="mdi-account-edit-outline"
+              @click="openUpdateCustomerDialog()"
+            >
               <q-tooltip :offset="[20, 10]">{{
                 $t('customer.toolTipMessage.updateCustomerInfo')
               }}</q-tooltip>
@@ -123,6 +129,26 @@
           @click:CloseBtn="showDialog = false"
           @addNewCustomer="addNewCustomer"
         ></AddNewCustomerDialogComponent>
+
+        <UpdateNewCustomerDialogComponent
+          v-model:show-dialog-update="showDialogUpdate"
+          v-model:user-name="userName"
+          v-model:customer-name="customerName"
+          v-model:business-name="businessName"
+          v-model:tax-code="taxCode"
+          v-model:email="email"
+          v-model:ratings="ratings"
+          v-model:address="address"
+          v-model:business-type="businessType"
+          v-model:representative="representative"
+          v-model:position="position"
+          v-model:phone="phone"
+          v-model:status="status"
+          :ratings-options="ratingsOptions"
+          :business-type-options="businessTypeOptions"
+          @click:CloseBtn="showDialogUpdate = false"
+          @updateNewCustomer="updateNewCustomer"
+        ></UpdateNewCustomerDialogComponent>
       </div>
     </div>
   </div>

src/pages/nghe-sy/artist.ts

@@ -19,7 +19,8 @@ export default defineComponent({
         field: 'artistCode',
         required: true,
         label: i18n.global.t('artist.tableColumnsArtist.artistCode'),
-        align: 'center',
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
         sortable: false,
       },
       {
@@ -27,7 +28,8 @@ export default defineComponent({
         field: 'fullName',
         required: true,
         label: i18n.global.t('artist.tableColumnsArtist.fullName'),
-        align: 'center',
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
         sortable: false,
       },
       {
@@ -35,7 +37,8 @@ export default defineComponent({
         field: 'stageName',
         required: true,
         label: i18n.global.t('artist.tableColumnsArtist.stageName'),
-        align: 'center',
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
         sortable: false,
       },
       {
@@ -43,7 +46,8 @@ export default defineComponent({
         field: 'avatar',
         required: true,
         label: i18n.global.t('artist.tableColumnsArtist.avatar'),
-        align: 'center',
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
         sortable: false,
       },
       {
@@ -51,7 +55,8 @@ export default defineComponent({
         field: 'linhvuc',
         required: true,
         label: i18n.global.t('artist.tableColumnsArtist.linhvuc'),
-        align: 'center',
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
         sortable: false,
       },
       {
@@ -59,7 +64,8 @@ export default defineComponent({
         field: 'work',
         required: true,
         label: i18n.global.t('artist.tableColumnsArtist.work'),
-        align: 'center',
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
         sortable: false,
       },
       {
@@ -67,7 +73,8 @@ export default defineComponent({
         field: 'dochuyen',
         required: true,
         label: i18n.global.t('artist.tableColumnsArtist.dochuyen'),
-        align: 'center',
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
         sortable: false,
       },
       {
@@ -75,7 +82,8 @@ export default defineComponent({
         field: 'ratings',
         required: true,
         label: i18n.global.t('artist.tableColumnsArtist.ratings'),
-        align: 'center',
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
         sortable: false,
       },
       {
@@ -83,6 +91,7 @@ export default defineComponent({
         field: 'action',
         required: true,
         label: i18n.global.t('artist.tableColumnsArtist.action'),
+        headerStyle: 'text-align: center !important;',
         align: 'center',
         sortable: false,
       },

src/pages/nguoi-dung/User.ts

@@ -28,56 +28,63 @@ export default defineComponent({
         field: 'userName',
         required: true,
         label: i18n.global.t('userPage.tableColumns.userName'),
+        headerStyle: 'text-align: center !important;',
         align: 'left',
-        sortable: true,
+        sortable: false,
       },
       {
         name: 'fullName',
         field: 'fullName',
         required: true,
         label: i18n.global.t('userPage.tableColumns.fullName'),
+        headerStyle: 'text-align: center !important;',
         align: 'left',
-        sortable: true,
+        sortable: false,
       },
       {
         name: 'email',
         field: 'email',
-        required: true,
+        required: false,
         label: i18n.global.t('userPage.tableColumns.email'),
+        headerStyle: 'text-align: center !important;',
         align: 'left',
-        sortable: true,
+        sortable: false,
       },
       {
         name: 'phoneNumber',
         field: 'phoneNumber',
         required: true,
         label: i18n.global.t('userPage.tableColumns.phone'),
+        headerStyle: 'text-align: center !important;',
         align: 'left',
-        sortable: true,
+        sortable: false,
       },
       {
         name: 'unit',
         field: 'unit',
         required: true,
         label: i18n.global.t('userPage.tableColumns.unit'),
+        headerStyle: 'text-align: center !important;',
         align: 'left',
-        sortable: true,
+        sortable: false,
       },
       {
         name: 'status',
         field: 'status',
         required: true,
         label: i18n.global.t('userPage.tableColumns.status'),
-        align: 'left',
-        sortable: true,
+        headerStyle: 'text-align: center !important;',
+        align: 'center',
+        sortable: false,
       },
       {
         name: 'action',
         field: 'action',
         required: true,
         label: i18n.global.t('userPage.tableColumns.action'),
-        align: 'left',
-        sortable: true,
+        headerStyle: 'text-align: center !important;',
+        align: 'center',
+        sortable: false,
       },
     ];
     const userTableRows: Ref<UserObject[]> = ref([]);

src/pages/nguoi-dung/index.vue

@@ -26,6 +26,7 @@
                 <q-btn
                   @click="openAddUserDialog"
                   :label="$t('crudActions.add')"
+                  no-caps
                   color="primary"
                 ></q-btn>
               </div>
@@ -34,17 +35,19 @@
         </template>
         <template v-slot:body-cell-status="rowData">
           <q-td>
-            <q-chip
-              :color="rowData.value ? 'positive' : undefined"
-              text-color="white"
-              size="sm"
-            >
-              {{
-                rowData.value
-                  ? $t('userPage.statusLabel.active')
-                  : $t('userPage.statusLabel.inactive')
-              }}
-            </q-chip>
+            <div align="center">
+              <q-chip
+                :color="rowData.value ? 'positive' : 'orange'"
+                text-color="white"
+                size="sm"
+              >
+                {{
+                  rowData.value
+                    ? $t('userPage.statusLabel.active')
+                    : $t('userPage.statusLabel.inactive')
+                }}
+              </q-chip>
+            </div>
           </q-td>
         </template>
         <template v-slot:body-cell-action="item">