update managinUnit Page

src/assets/configurations.example.ts

@@ -32,4 +32,5 @@ export enum API_PATHS {
   resetPassword = '/user/resetPass',
   getUserDetail = '/user/detail',
   updateUser = '/user/update',
+  getListUnits = '/unit/list',
 }

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

 import { i18n } from 'src/boot/i18n';
-import { defineComponent, ref, Ref } from 'vue';
+import { defineComponent, onMounted, ref, Ref } from 'vue';
 import Pagination from 'components/pagination/index.vue';
+import { API_PATHS } from 'src/assets/configurations.example';
+import { AxiosResponse } from 'axios';
+import { api, BaseResponseBody } from 'src/boot/axios';
 export default defineComponent({
   components: {
     Pagination,
   },
   setup() {
-    const userTableColumns = [
+    const managingUnitTableColumns = [
       {
-        name: 'userName',
-        field: 'userName',
+        name: 'STT',
+        field: 'STT',
         required: true,
         label: 'STT',
-        align: 'left',
-        sortable: true,
+        align: 'center',
+        sortable: false,
       },
       {
-        name: 'userName',
-        field: 'userName',
+        name: 'unitCode',
+        field: 'unitCode',
         required: true,
         label: i18n.global.t('managingUnit.tableColumns.unit'),
-        align: 'left',
-        sortable: true,
+        align: 'center',
+        sortable: false,
       },
       {
-        name: 'fullName',
-        field: 'fullName',
+        name: 'unitName',
+        field: 'unitName',
         required: true,
         label: i18n.global.t('managingUnit.tableColumns.unitName'),
-        align: 'left',
-        sortable: true,
+        align: 'center',
+        sortable: false,
       },
       {
-        name: 'email',
-        field: 'email',
+        name: 'deputy',
+        field: 'deputy',
         required: true,
         label: i18n.global.t('managingUnit.tableColumns.deputy'),
-        align: 'left',
-        sortable: true,
+        align: 'center',
+        sortable: false,
       },
       {
-        name: 'phoneNumber',
-        field: 'phoneNumber',
+        name: 'field',
+        field: 'field',
         required: true,
         label: i18n.global.t('managingUnit.tableColumns.field'),
-        align: 'left',
-        sortable: true,
+        align: 'center',
+        sortable: false,
       },
       {
-        name: 'unit',
-        field: 'unit',
+        name: 'email',
+        field: 'email',
         required: true,
         label: i18n.global.t('managingUnit.tableColumns.email'),
-        align: 'left',
-        sortable: true,
+        align: 'center',
+        sortable: false,
       },
       {
-        name: 'unit',
-        field: 'unit',
+        name: 'phoneNumber',
+        field: 'phoneNumber',
         required: true,
         label: i18n.global.t('managingUnit.tableColumns.phoneNumber'),
-        align: 'left',
-        sortable: true,
+        align: 'center',
+        sortable: false,
       },
       {
         name: 'status',
         field: 'status',
         required: true,
         label: i18n.global.t('managingUnit.tableColumns.status'),
-        align: 'left',
-        sortable: true,
+        align: 'center',
+        sortable: false,
       },
       {
         name: 'action',
         field: 'action',
         required: true,
         label: i18n.global.t('managingUnit.tableColumns.action'),
-        align: 'left',
-        sortable: true,
+        align: 'center',
+        sortable: false,
       },
     ];
-    const userTableRows: Ref<unknown[]> = ref([]);
-    return { userTableColumns, userTableRows };
+    const managingUnitTableRows: Ref<unknown[]> = ref([]);
+
+    const pageIndex = ref(1);
+    const pageSize = ref(20);
+    const unitNameKeyword = ref('');
+    const fieldOptions = ref([
+      { id: 1, text: 'Giải trí' },
+      { id: 2, text: 'Âm nhạc' },
+      { id: 1, text: 'Thể thao' },
+    ]);
+    const fieldSelected: Ref<number | undefined> = ref();
+    const getListUnits = () => {
+      //   const response = (await api({
+      //     url: API_PATHS.getListUnits,
+      //     method: 'GET',
+      //     params: {
+      //       pageIndex: pageIndex.value,
+      //       pageSize: pageSize.value,
+      //     },
+      //   })) as AxiosResponse<BaseResponseBody<unknown>>;
+      const fakeData: unknown[] = [
+        {
+          unitCode: '0001',
+          unitName: 'MTP Entertainment',
+          deputy: 'Sơn Tùng MTP',
+          field: 'Giải trí',
+          email: 'sontung@gmail.com',
+          phoneNumber: '0899999999',
+          status: 1,
+        },
+      ];
+      managingUnitTableRows.value = fakeData;
+    };
+    onMounted(() => {
+      void getListUnits();
+    });
+    return {
+      managingUnitTableColumns,
+      managingUnitTableRows,
+      getListUnits,
+      pageIndex,
+      pageSize,
+      unitNameKeyword,
+      fieldOptions,
+      fieldSelected,
+    };
   },
 });

src/pages/don-vi-chu-quan/index.vue

@@ -6,28 +6,34 @@
         dense
         outlined
         :label="$t('managingUnit.tableColumns.unitName')"
+        v-model="unitNameKeyword"
       ></q-input>
     </div>
-    <div class="col-2"><q-select dense outlined></q-select></div>
+    <div class="col-2">
+      <q-select
+        v-model="fieldSelected"
+        :options="fieldOptions"
+        option-label="text"
+        option-value="id"
+        dense
+        outlined
+      ></q-select>
+    </div>
     <div class="col-auto">
-      <q-btn
-        color="primary"
-        class="text-none"
-        :label="$t('crudActions.search')"
-      >
-      </q-btn>
+      <q-btn color="primary" no-caps :label="$t('crudActions.search')"> </q-btn>
     </div>
     <div class="col-auto">
-      <q-btn color="primary" class="text-none" :label="$t('crudActions.add')">
-      </q-btn>
+      <q-btn color="primary" no-caps :label="$t('crudActions.add')"> </q-btn>
     </div>
 
     <div class="col-12 q-mt-sm">
       <q-table
-        :rows="userTableRows"
-        :columns="userTableColumns"
-        row-key="name"
+        :rows="managingUnitTableRows"
+        :columns="managingUnitTableColumns"
+        row-key="unitCode"
         separator="cell"
+        :no-data-label="$t('emptyData')"
+        hide-pagination
       >
       </q-table>
     </div>

src/pages/nguoi-dung/index.vue

@@ -7,6 +7,7 @@
         row-key="name"
         separator="cell"
         hide-pagination
+        :no-data-label="$t('emptyData')"
       >
         <template v-slot:top>
           <q-th class="full-width">