update

src/components/user-management/add-new-user-dialog/AddNewUserDialog.ts

@@ -57,7 +57,11 @@ export default defineComponent({
         isMobilePhone(val) ||
         i18n.global.t('userPage.validateMessages.isMobilePhone'),
     ];
-
+    const birthdayRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('userPage.validateMessages.requireBirthday'),
+    ];
     const addressRules = [
       (val?: string) =>
         (val && val.trim().length) ||
@@ -74,9 +78,8 @@ export default defineComponent({
         i18n.global.t('userPage.validateMessages.requireSex'),
     ];
     const groupRules = [
-      (val?: number) =>
-        val !== undefined ||
-        i18n.global.t('userPage.validateMessages.requiredGroup'),
+      (val?: Array<unknown>) =>
+        val?.length || i18n.global.t('userPage.validateMessages.requiredGroup'),
     ];
     return {
       userNameRules,
@@ -88,6 +91,7 @@ export default defineComponent({
       unitRules,
       sexRules,
       groupRules,
+      birthdayRules,
     };
   },
   emits: [

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

@@ -77,8 +77,6 @@
                 type="text"
                 class="q-my-sm"
                 outlined
-                :rules="addressRules"
-                hide-bottom-space
               ></q-input>
             </div>
             <div class="col-6">
@@ -118,9 +116,10 @@
               <q-input
                 :model-value="birthday"
                 @update:model-value="$emit('update:birthday', $event)"
+                :rules="birthdayRules"
                 type="date"
-                class="q-my-sm"
                 outlined
+                hide-bottom-space
               >
                 <template v-slot:prepend>
                   <div class="text-body2">
@@ -146,14 +145,13 @@
                 hide-bottom-space
               ></q-select>
 
-              <q-select
+              <!-- <q-select
                 :model-value="scheduleAccess"
                 @update:model-value="$emit('update:scheduleAccess', $event)"
                 :label="$t('userPage.dialogLabel.fieldLabels.scheduleAccess')"
                 :options="listScheduleAccess"
-                class="q-my-sm"
                 outlined
-              ></q-select>
+              ></q-select> -->
             </div>
             <q-space></q-space>
             <div class="col-6">

src/components/user-management/update-user-dialog/UpdateUserDialog.ts

@@ -45,7 +45,11 @@ export default defineComponent({
         isMobilePhone(val) ||
         i18n.global.t('userPage.validateMessages.isMobilePhone'),
     ];
-
+    const birthdayRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('userPage.validateMessages.requireBirthday'),
+    ];
     const addressRules = [
       (val?: string) =>
         (val && val.trim().length) ||
@@ -62,9 +66,8 @@ export default defineComponent({
         i18n.global.t('userPage.validateMessages.requireSex'),
     ];
     const groupRules = [
-      (val?: number) =>
-        val !== undefined ||
-        i18n.global.t('userPage.validateMessages.requiredGroup'),
+      (val?: Array<unknown>) =>
+        val?.length || i18n.global.t('userPage.validateMessages.requiredGroup'),
     ];
     return {
       fullNameRules,
@@ -74,6 +77,7 @@ export default defineComponent({
       unitRules,
       sexRules,
       groupRules,
+      birthdayRules,
     };
   },
   emits: [

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

@@ -50,16 +50,6 @@
                 :rules="mobileNumberRules"
                 hide-bottom-space
               ></q-input>
-              <q-input
-                :model-value="address"
-                @update:model-value="$emit('update:address', $event)"
-                :label="$t('userPage.dialogLabel.fieldLabels.address')"
-                type="text"
-                class="q-my-sm"
-                outlined
-                :rules="addressRules"
-                hide-bottom-space
-              ></q-input>
               <q-input
                 :model-value="phoneNumber"
                 @update:model-value="$emit('update:phoneNumber', $event)"
@@ -68,6 +58,14 @@
                 class="q-my-sm"
                 outlined
               ></q-input>
+              <q-input
+                :model-value="address"
+                @update:model-value="$emit('update:address', $event)"
+                :label="$t('userPage.dialogLabel.fieldLabels.address')"
+                type="text"
+                class="q-my-sm"
+                outlined
+              ></q-input>
             </div>
             <div class="col-6">
               <q-input
@@ -99,8 +97,9 @@
                 :model-value="birthday"
                 @update:model-value="$emit('update:birthday', $event)"
                 type="date"
-                class="q-my-sm"
                 outlined
+                :rules="birthdayRules"
+                hide-bottom-space
               >
                 <template v-slot:prepend>
                   <div class="text-body2">
@@ -126,14 +125,13 @@
                 hide-bottom-space
               ></q-select>
 
-              <q-select
+              <!-- <q-select
                 :model-value="scheduleAccess"
                 @update:model-value="$emit('update:scheduleAccess', $event)"
                 :label="$t('userPage.dialogLabel.fieldLabels.scheduleAccess')"
                 :options="listScheduleAccess"
-                class="q-my-sm"
                 outlined
-              ></q-select>
+              ></q-select> -->
             </div>
             <q-space></q-space>
             <div class="col-6">

src/i18n/vi/index.ts

@@ -67,6 +67,7 @@ export default {
     title: 'Quản lý người dùng',
     tableColumns: {
       userName: 'Tên đăng nhập',
+      keywordSearch: 'Tên người dùng',
       fullName: 'Họ tên',
       email: 'Email',
       phone: 'Số điện thoại',
@@ -104,25 +105,25 @@ export default {
       cancel: 'Đóng',
     },
     validateMessages: {
-      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',
-
+      requireUserName: 'Vui lòng nhập Tên đăng nhập',
+      requirePassword: 'Vui lòng nhập Mật khẩu',
+      requireFullName: 'Vui lòng nhập Họ tên',
+      requireBirthday: 'Vui lòng chọn Ngày sinh',
       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',
+      requireMobileNumber: 'Vui lòng nhập Số điện thoại',
       isMobilePhone: 'Số điện thoại không hợp lệ',
-      requireAddress: 'Vui lòng nhập địa chỉ',
-      requireUnit: 'Vui lòng nhập địa chỉ phòng ban',
-      requireSex: 'Vui lòng chọn giới tính',
-      requiredGroup: 'Vui lòng chọn nhóm người dùng',
+      requireAddress: 'Vui lòng nhập Địa chỉ',
+      requireUnit: 'Vui lòng nhập Đơn vị phòng ban',
+      requireSex: 'Vui lòng chọn Giới tính',
+      requiredGroup: 'Vui lòng chọn Nhóm người dùng',
     },
     confirmActionsTitle: {
       confirmDeleteUserTitle: 'Xác nhận',
       confirmDeleteUserCancelBtnLabel: 'Huỷ',
       confirmDeleteUserContent: 'Bạn có chắc muốn xoá tài khoản',
       confirmResetPasswordContent:
-        'Bạn có muốn reset mật khẩu của người dùng này không',
+        'Bạn có muốn reset về mật khẩu: 123@123a cho người dùng này không',
     },
     actionMessages: {
       addNewUserAccess: 'Thêm tài khoản thành công',

src/pages/nguoi-dung/User.ts

@@ -11,6 +11,7 @@ import AddNewUserDialogComponent from '../../components/user-management/add-new-
 import UpdateUserDialogComponent from '../../components/user-management/update-user-dialog/index.vue';
 import { GroupInfoType } from '../nhom-nguoi-dung/UserGroup';
 import Pagination from 'components/pagination/index.vue';
+// import moment from 'moment';
 
 export default defineComponent({
   components: {
@@ -51,8 +52,8 @@ export default defineComponent({
         sortable: false,
       },
       {
-        name: 'phoneNumber',
-        field: 'phoneNumber',
+        name: 'mobileNumber',
+        field: 'mobileNumber',
         required: true,
         label: i18n.global.t('userPage.tableColumns.phone'),
         headerStyle: 'text-align: center !important;',
@@ -122,6 +123,7 @@ export default defineComponent({
           params: {
             pageIndex: pageIndex.value,
             pageSize: pageSize.value,
+            name: keyword.value.trim(),
           },
         })) as AxiosResponse<BaseResponseBody<PaginationResponse<UserObject>>>;
         if (response.data.error.code === config.API_RES_CODE.OK.code) {
@@ -132,11 +134,11 @@ export default defineComponent({
       } catch (error) {}
     };
 
-    const filterListUser: Ref<UserObject[]> = computed(() => {
-      return userTableRows.value.filter((user) =>
-        user.userName.includes(keyword.value)
-      );
-    });
+    // const filterListUser: Ref<UserObject[]> = computed(() => {
+    //   return userTableRows.value.filter((user) =>
+    //     user.userName.includes(keyword.value)
+    //   );
+    // });
 
     const getListUserGroup = async () => {
       await $store.dispatch('authentication/getListUsers').then((response) => {
@@ -170,22 +172,22 @@ export default defineComponent({
       try {
         const groups: { id: number }[] = [];
         group.value.map((item) => {
-          groups.push({ id: (item as unknown) as number });
+          groups.push({ id: item as unknown as number });
         });
         const response = (await api({
           url: API_PATHS.addNewUser,
           method: 'POST',
           data: {
             user: {
-              userName: userName.value,
+              userName: userName.value.trim(),
               password: password.value,
-              fullName: fullName.value,
+              fullName: fullName.value.trim(),
               birthday: birthday.value,
-              email: email.value,
-              phoneNumber: phoneNumber.value,
-              mobileNumber: mobileNumber.value,
+              email: email.value.trim(),
+              phoneNumber: phoneNumber.value.trim(),
+              mobileNumber: mobileNumber.value.trim(),
               sex: sex.value,
-              address: address.value,
+              address: address.value?.trim(),
               unit: unit.value,
               status: status.value ? 1 : 0,
             },
@@ -205,14 +207,15 @@ export default defineComponent({
       } catch (error) {}
     };
 
-    const confirmDeleteUser = (userId: number) => {
+    const confirmDeleteUser = (userId: number, userName: string) => {
       Dialog.create({
         title: i18n.global.t(
           'userPage.confirmActionsTitle.confirmDeleteUserTitle'
         ),
-        message: i18n.global.t(
+        message:
+          i18n.global.t(
             'userPage.confirmActionsTitle.confirmDeleteUserContent'
-        ),
+          ) + ` "${userName}"`,
         cancel: i18n.global.t(
           'userPage.confirmActionsTitle.confirmDeleteUserCancelBtnLabel'
         ),
@@ -324,7 +327,7 @@ export default defineComponent({
       try {
         const groups: { id: number }[] = [];
         group.value.map((item) => {
-          groups.push({ id: (item as unknown) as number });
+          groups.push({ id: item as unknown as number });
         });
         const response = (await api({
           url: API_PATHS.updateUser,
@@ -332,15 +335,15 @@ export default defineComponent({
           data: {
             user: {
               id: id.value,
-              userName: userName.value,
+              userName: userName.value.trim(),
               password: password.value,
-              fullName: fullName.value,
+              fullName: fullName.value.trim(),
               birthday: birthday.value,
-              email: email.value,
-              phoneNumber: phoneNumber.value,
-              mobileNumber: mobileNumber.value,
+              email: email.value.trim(),
+              phoneNumber: phoneNumber.value.trim(),
+              mobileNumber: mobileNumber.value.trim(),
               sex: sex.value,
-              address: address.value,
+              address: address.value?.trim(),
               unit: unit.value,
               status: status.value ? 1 : 0,
             },
@@ -369,13 +372,13 @@ export default defineComponent({
       void getListUsers();
     };
     return {
-      rows: userTableRows,
+      userTableRows,
       userTableColumns,
       totalPage,
       pageIndex,
       pageSize,
       keyword,
-      filterListUser,
+      // filterListUser,
       showDialog,
       userName,
       password,

src/pages/nguoi-dung/index.vue

 <template>
-  <div class="row q-col-gutter-sm">
+  <div class="row q-col-gutter-sm flex-center q-mt-sm">
+    <div class="col-auto text-h6 text-weight-regular flex flex-center q-mr-md">
+      {{ $t('userPage.title') }}
+      <q-separator vertical spaced />
+    </div>
+    <q-space></q-space>
+    <div class="col-2">
+      <q-input
+        v-model="keyword"
+        dense
+        outlined
+        :label="$t('userPage.tableColumns.keywordSearch')"
+        clearable
+      ></q-input>
+    </div>
+    <div class="col-auto">
+      <q-btn
+        color="primary"
+        no-caps
+        :label="$t('crudActions.search')"
+        style="width: 100px"
+        @click="getListUsers"
+      >
+      </q-btn>
+    </div>
+    <div class="col-auto">
+      <q-btn
+        color="primary"
+        no-caps
+        :label="$t('crudActions.add')"
+        style="width: 100px"
+        @click="openAddUserDialog"
+      >
+      </q-btn>
+    </div>
     <div class="col-12">
       <q-table
-        :rows="filterListUser"
+        :rows="userTableRows"
         :columns="userTableColumns"
         row-key="name"
         separator="cell"
         hide-pagination
         :no-data-label="$t('emptyData')"
       >
-        <template v-slot:top>
+        <!-- <template v-slot:top>
           <q-th class="full-width">
             <div class="row">
               <div
                 class="col-auto text-h6 text-weight-regular flex flex-center q-mr-md"
               >
-                {{ $t('userPage.title') }}
+                
               </div>
               <q-separator vertical spaced />
               <div class="col-5 q-ml-md">
@@ -33,7 +67,7 @@
               </div>
             </div>
           </q-th>
-        </template>
+        </template> -->
         <template v-slot:body-cell-status="rowData">
           <q-td>
             <div align="center">
@@ -79,8 +113,8 @@
               flat
               round
               color="primary"
-              icon="delete"
-              @click="confirmDeleteUser(item.row.id)"
+              icon="mdi-delete-outline"
+              @click="confirmDeleteUser(item.row.id, item.row.userName)"
             >
               <q-tooltip :offset="[20, 10]">{{
                 $t('userPage.toolTipMessage.deleteUser')