update fix-bug

src/components/accountGroup/index.vue

+<template>
+  <div
+    class="row q-col-gutter-sm flex-center"
+    style="max-height: calc(100vh - 14rem)"
+  >
+    <q-space></q-space>
+    <div class="col-auto">
+      <q-btn
+        @click="$emit('click:addAccountGroup')"
+        color="primary"
+        no-caps
+        style="width: 100px"
+        :label="$t('crudActions.add')"
+      >
+      </q-btn>
+    </div>
+    <div class="col-12 q-mt-sm">
+      <q-table
+        :rows="dataAccountGroup"
+        :columns="userTableColumnsAccountGroup"
+        :no-data-label="$t('emptyData')"
+        row-key="name"
+        separator="cell"
+        hide-pagination
+      >
+        <template v-slot:body-cell-stt="item">
+          <q-td :item="item">
+            {{ 1 + item.rowIndex + pageSize * (pageIndex - 1) }}
+          </q-td>
+        </template>
+      </q-table>
+    </div>
+    <div class="col-12 q-mt-sm">
+      <Pagination
+        v-model:currentPage="pageIndex"
+        v-model:pageSize="pageSize"
+        :totalPage="totalPage"
+        @update:pageSize="changePageSize"
+        @update:currentPage="getListAccountGroup"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { i18n } from 'src/boot/i18n';
+import { defineComponent, onMounted, Ref, ref } from 'vue';
+import Pagination from 'components/pagination/index.vue';
+export default defineComponent({
+  components: {
+    Pagination,
+  },
+  setup() {
+    const userTableColumnsAccountGroup = [
+      {
+        name: 'STT',
+        required: true,
+        label: 'STT',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'fullName',
+        field: 'fullName',
+        required: true,
+        label: i18n.global.t('userGroupPage.groupInfo.fieldLabels.fullName'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'user',
+        field: 'user',
+        required: true,
+        label: i18n.global.t('userGroupPage.groupInfo.fieldLabels.user'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'user',
+        field: 'user',
+        required: true,
+        label: i18n.global.t('userGroupPage.groupInfo.fieldLabels.position'),
+        align: 'center',
+        sortable: false,
+      },
+    ];
+
+    const pageIndex = ref(1);
+    const pageSize = ref(20);
+    const totalPage = ref(0);
+    const dataAccountGroup: Ref<unknown[]> = ref([]);
+    const changePageSize = () => {
+      pageIndex.value = 1;
+      void getListAccountGroup();
+    };
+    const getListAccountGroup = () => {
+      console.log();
+    };
+    onMounted(() => {
+      void getListAccountGroup();
+    });
+    return {
+      userTableColumnsAccountGroup,
+      dataAccountGroup,
+      pageIndex,
+      pageSize,
+      totalPage,
+      changePageSize,
+      getListAccountGroup,
+    };
+  },
+});
+</script>

src/components/add-update-field/index.vue

@@ -4,7 +4,7 @@
     :model-value="isOpened"
     @update:model-value="$emit('update:isOpened', $event)"
   >
-    <q-card class="full-width" style="max-width: 30rem" bordered>
+    <q-card class="full-width" style="max-width: 40rem" bordered>
       <q-form
         greedy
         @submit.prevent="

src/components/artist-information/AddHotProduct/index.vue

@@ -20,12 +20,9 @@
         <q-card-section>
           <div class="row q-col-gutter-sm">
             <div class="col-12">
-              <q-card flat style="max-height: 200px" v-if="urlFileLocal">
+              <q-card flat v-if="urlFileLocal">
                 <div align="center">
-                  <q-img
-                    :src="urlFileLocal"
-                    style="max-height: 200px; aspect-ratio: 16/9"
-                  >
+                  <q-img :src="urlFileLocal" style="aspect-ratio: 16/9">
                   </q-img>
                 </div>
               </q-card>

src/components/artist-information/UpdateHotProduct/index.vue

@@ -20,11 +20,11 @@
         <q-card-section>
           <div class="row q-col-gutter-sm">
             <div class="col-12">
-              <q-card flat style="max-height: 200px" v-if="urlFileLocal">
+              <q-card flat v-if="urlFileLocal">
                 <div align="center">
                   <q-img
                     :src="imageAPI ? imageAPI : urlFileLocal"
-                    style="max-height: 200px; aspect-ratio: 16/9"
+                    style="aspect-ratio: 16/9"
                   >
                   </q-img>
                 </div>

src/components/artist-information/bank-account/add-new-bank-account-dialog/AddAccountBankDialog.ts

@@ -33,7 +33,7 @@ export default defineComponent({
           cardNumber.value = '';
           bank.value = null;
           cardType.value = null;
-          isDefault.value = 2;
+          isDefault.value = 1;
         }
       }
     );

src/components/artist-information/hot-product/index.vue

@@ -45,10 +45,8 @@
           </q-td>
         </template>
         <template v-slot:body-cell-STT="item">
-          <q-td style="padding: 0; height: 100%">
-            <div align="center">
-              {{ item.rowIndex + 1 }}
-            </div>
+          <q-td :item="item" style="text-align: center">
+            {{ 1 + item.rowIndex + pageSize * (pageIndex - 1) }}
           </q-td>
         </template>
 
@@ -77,15 +75,17 @@
           </q-td>
         </template>
         <template v-slot:body-cell-imageUrl="rowData">
-          <q-td style="padding: 0; height: 100%">
+          <q-td style="padding: auto; height: 100%">
             <div align="center">
               <q-img
+                fit="contain"
+                :ratio="16 / 9"
+                style="width: 9rem"
                 :src="
                   rowData.row.file === undefined
                     ? configImg.API_IMAGE_ENDPOINT + rowData.value
                     : rowData.value
                 "
-                style="max-width: 70px"
               ></q-img>
             </div>
           </q-td>

src/components/group-info/index.vue

@@ -3,10 +3,7 @@
     <q-form greedy @submit.prevent="$emit('saveGroupInfo', isDisable)">
       <q-card-section style="padding-top: 28px">
         <div class="row">
-          <div class="col-4" style="display: flex">
-            <div class="text-h6">{{ $t('userGroupPage.groupInfo.title') }}</div>
-          </div>
-          <div class="col-8" style="display: flex; justify-content: flex-end">
+          <div class="col-12" style="display: flex; justify-content: flex-end">
             <q-btn
               v-if="isDisable === EditMode.edit"
               style="margin-right: 8px"

src/i18n/vi/index.ts

@@ -39,6 +39,7 @@ export default {
     title: 'Nhóm người dùng',
     groupInfo: {
       title: 'Thông tin nhóm',
+      accountGroup: 'Tài khoản nhóm',
       validateMessages: {
         requireGroupName: 'Vui lòng nhập Tên nhóm người dùng',
         groupNameLengthInvalid:
@@ -54,6 +55,9 @@ export default {
       fieldLabels: {
         groupName: 'Tên nhóm người dùng *',
         groupDescription: 'Mô tả *',
+        fullName: 'Họ tên',
+        user: 'Tên đăng nhập',
+        position: 'Chức vụ',
       },
     },
 
@@ -655,7 +659,7 @@ export default {
     tableColumnsPost: {
       stt: 'STT',
       name: 'Tên bài viết',
-      image: 'Avatar',
+      image: 'Ảnh bài viết',
       category: 'Danh mục bài viết',
       createBy: 'Người thêm',
       createTime: 'Thời gian thêm',
@@ -675,7 +679,7 @@ export default {
       },
       postLabels: {
         name: 'Tên bài viết *',
-        image: 'Avatar *',
+        image: 'Ảnh bài viết *',
         category: 'Danh mục bài viết *',
         content: 'Nội dung *',
         status: 'Trạng thái',
@@ -691,7 +695,7 @@ export default {
     },
     validateMessages: {
       requireName: 'Vui lòng nhập Tên bài viết',
-      requireImage: 'Vui lòng chọn Avatar',
+      requireImage: 'Vui lòng chọn Ảnh bài viết',
       requireContent: 'Vui lòng nhập Nội dung',
       requireCategory: 'Vui lòng chọn Danh mục bài viết',
     },

src/pages/bai-viet/index.vue

@@ -45,13 +45,11 @@
         hide-pagination
         class="sticky-header-table"
       >
-        <!-- <template v-slot:body-cell-STT="item">
-          <q-td style="padding: 0; height: 100%">
-            <div align="center">
-              {{ item.rowIndex + 1 }}
-            </div>
+        <template v-slot:body-cell-stt="item">
+          <q-td :item="item" style="text-align: center">
+            {{ 1 + item.rowIndex + pageSize * (pageIndex - 1) }}
           </q-td>
-        </template> -->
+        </template>
         <template v-slot:body-cell-action="item">
           <q-td style="padding: 0">
             <div align="center">
@@ -185,14 +183,14 @@ export default defineComponent({
   },
   setup() {
     const postTableColumns = [
-      // {
-      //   name: 'STT',
-      //   field: 'STT',
-      //   required: true,
-      //   label: 'STT',
-      //   align: 'center',
-      //   sortable: false,
-      // },
+      {
+        name: 'stt',
+        field: 'stt',
+        required: true,
+        label: 'STT',
+        align: 'center',
+        sortable: false,
+      },
       {
         name: 'name',
         field: 'name',

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

@@ -69,12 +69,12 @@
         class="sticky-header-table"
       >
         <template v-slot:body-cell-stt="item">
-          <q-td :item="item">
+          <q-td :item="item" style="text-align: center">
             {{ 1 + item.rowIndex + pageSize * (pageIndex - 1) }}
           </q-td>
         </template>
         <template v-slot:body-cell-action="item">
-          <q-td style="padding: 0" class="flex flex-center">
+          <q-td style="padding: 0; text-align: center">
             <q-btn
               flat
               round

src/pages/khach-hang/index.vue

@@ -72,12 +72,12 @@
         class="sticky-header-table"
       >
         <template v-slot:body-cell-stt="item">
-          <q-td :item="item">
+          <q-td :item="item" style="text-align: center">
             {{ 1 + item.rowIndex + pageSize * (pageIndex - 1) }}
           </q-td>
         </template>
         <template v-slot:body-cell-action="rowData">
-          <q-td style="padding: 0" class="flex flex-center">
+          <q-td style="padding: 0; text-align: center">
             <q-btn
               flat
               round

src/pages/linh-vuc-hoat-dong/index.vue

@@ -43,10 +43,11 @@
         separator="cell"
         :no-data-label="$t('emptyData')"
         hide-pagination
+        wrap-cells
         class="sticky-header-table"
       >
         <template v-slot:body-cell-action="item">
-          <q-td style="padding: 0" class="flex flex-center">
+          <q-td style="padding: 0; text-align: center">
             <q-btn
               flat
               round
@@ -71,6 +72,16 @@
             </q-btn>
           </q-td>
         </template>
+        <template v-slot:body-cell-description="item">
+          <td>
+            <div class="ellipsis-3-lines">
+              {{ !item.row.description ? '' : item.row.description }}
+              <q-tooltip :offset="[20, 10]" max-width="35%">{{
+                !item.row.description ? '' : item.row.description
+              }}</q-tooltip>
+            </div>
+          </td>
+        </template>
         <template v-slot:body-cell-status="rowData">
           <q-td>
             <div align="center">
@@ -143,7 +154,7 @@ export default defineComponent({
         field: 'name',
         required: true,
         label: i18n.global.t('field.tableColumnsField.name'),
-        headerStyle: 'text-align: center !important;',
+        headerStyle: 'text-align: center !important; width: 20%',
         align: 'left',
         sortable: false,
       },
@@ -152,8 +163,9 @@ export default defineComponent({
         field: 'description',
         required: true,
         label: i18n.global.t('field.tableColumnsField.description'),
-        headerStyle: 'text-align: center !important;',
+        headerStyle: 'text-align: center !important; width: 40%',
         align: 'left',
+        width: '300px',
         sortable: false,
       },
       {
@@ -161,8 +173,9 @@ export default defineComponent({
         field: 'status',
         required: true,
         label: i18n.global.t('field.tableColumnsField.status'),
-        headerStyle: 'text-align: center !important;',
+        headerStyle: 'text-align: center !important; width: 15%',
         align: 'center',
+        width: '120px',
         sortable: false,
       },
       {
@@ -170,8 +183,9 @@ export default defineComponent({
         field: 'action',
         required: true,
         label: i18n.global.t('field.tableColumnsField.action'),
-        headerStyle: 'text-align: center !important;',
+        headerStyle: 'text-align: center !important; width: 15%',
         align: 'center',
+        width: '120px',
         sortable: false,
       },
     ];

src/pages/nghe-sy/index.vue

@@ -51,6 +51,7 @@
       <q-btn
         color="primary"
         no-caps
+        style="width: 7.14rem"
         :label="$t('crudActions.search')"
         @click="getListArtists"
       >
@@ -58,8 +59,10 @@
     </div>
     <div class="col-auto">
       <q-btn
+        class="q-mr-md"
         color="primary"
         no-caps
+        style="width: 7.14rem"
         :label="$t('crudActions.add')"
         to="/nghe-sy/them-nghe-sy"
       ></q-btn>
@@ -81,12 +84,12 @@
         class="sticky-header-table"
       >
         <template v-slot:body-cell-stt="item">
-          <q-td :item="item">
+          <q-td :item="item" style="text-align: center">
             {{ 1 + item.rowIndex + pageSize * (pageIndex - 1) }}
           </q-td>
         </template>
         <template v-slot:body-cell-avatar="avatar">
-          <q-td style="padding: 0; height: 100%" class="flex flex-center">
+          <q-td style="padding: 0; height: 100%; text-align: center">
             <q-img
               style="width: 7rem; height: 5rem"
               fit="contain"

src/pages/nhom-nguoi-dung/UserGroup.ts

@@ -2,6 +2,7 @@ import { defineComponent, onMounted, Ref, ref } from 'vue';
 import { StateInterface, useStore } from 'src/store';
 import UserGroupComponent from '../../components/user-group/index.vue';
 import GroupInfoComponent from '../../components/group-info/index.vue';
+import accountGroup from '../../components/accountGroup/index.vue';
 import { AxiosResponse } from 'axios';
 import { api, BaseResponseBody } from 'src/boot/axios';
 import { EditMode } from 'src/assets/enums';
@@ -20,7 +21,7 @@ export type GroupInfoType = {
   updateBy: null | string;
   updateTime: null | string;
 };
-
+const tab = ref('inforGroup');
 const userList: Ref<GroupInfoType[]> = ref([]);
 const isDisable = ref(EditMode.default);
 const groupName = ref('');
@@ -226,7 +227,7 @@ const getGroupDetail = async () => {
 };
 
 export default defineComponent({
-  components: { UserGroupComponent, GroupInfoComponent },
+  components: { UserGroupComponent, GroupInfoComponent, accountGroup },
   watch: {
     selectedPageRoles() {
       // console.log(value);
@@ -256,6 +257,7 @@ export default defineComponent({
       saveGroupInfo,
       confirmDeleteGroup,
       selectedPageRoles,
+      tab,
     };
   },
 });

src/pages/nhom-nguoi-dung/index.vue

@@ -10,19 +10,45 @@
       ></UserGroupComponent>
     </div>
     <div class="col-8">
-      <GroupInfoComponent
-        :is-disable="isDisable"
-        v-model:group-name="groupName"
-        v-model:group-description="groupDescription"
-        v-model:selectedPageRoles="selectedPageRoles"
-        @resetGroupInfo="changeValueIsDisable"
-        @saveGroupInfo="saveGroupInfo($store)"
-        @deleteGroup="confirmDeleteGroup($store)"
-      ></GroupInfoComponent>
+      <q-tabs
+        v-model="tab"
+        dense
+        class="text-grey"
+        active-color="primary"
+        indicator-color="primary"
+        align="justify"
+        narrow-indicator
+      >
+        <q-tab
+          no-caps
+          name="inforGroup"
+          :label="$t('userGroupPage.groupInfo.title')"
+        >
+        </q-tab>
+        <q-tab
+          no-caps
+          name="accountGroup"
+          :label="$t('userGroupPage.groupInfo.accountGroup')"
+        />
+      </q-tabs>
+      <q-separator />
+      <q-tab-panels v-model="tab" animated>
+        <q-tab-panel name="inforGroup">
+          <GroupInfoComponent
+            :is-disable="isDisable"
+            v-model:group-name="groupName"
+            v-model:group-description="groupDescription"
+            v-model:selectedPageRoles="selectedPageRoles"
+            @resetGroupInfo="changeValueIsDisable"
+            @saveGroupInfo="saveGroupInfo($store)"
+            @deleteGroup="confirmDeleteGroup($store)"
+          ></GroupInfoComponent>
+        </q-tab-panel>
+        <q-tab-panel name="accountGroup">
+          <accountGroup></accountGroup>
+        </q-tab-panel>
+      </q-tab-panels>
     </div>
   </div>
 </template>
-<script lang="ts" src="./UserGroup.ts">
-// import { UserGroup } from './UserGroup';
-// export default UserGroup;
-</script>
+<script lang="ts" src="./UserGroup.ts"></script>