done Artist Page

src/assets/enums.ts

@@ -8,3 +8,8 @@ export enum UnitStatus {
   active = 1,
   inactive = 2,
 }
+
+export enum HotProductStatus {
+  active = 1,
+  inactive = 2,
+}

src/boot/axios.ts

@@ -7,7 +7,7 @@ import axios, {
 } from 'axios';
 import { config } from 'src/assets/configurations';
 import { StateInterface } from 'src/store';
-import { Store } from 'vuex';
+// import { Store } from 'vuex';
 import { Notify } from 'quasar';
 import { i18n } from './i18n';
 import { StatusCodes } from 'http-status-codes';

src/components/artist-information/AddHotProduct/AddHotProductDialog.ts

@@ -6,51 +6,51 @@ import UploadImage from '../../upload-image/index.vue';
 
 export default defineComponent({
   components: {
-        UploadImage
+    UploadImage,
   },
 
   props: {
     openAddHotProduct: {
       type: Boolean,
-            requied: true
+      requied: true,
     },
   },
 
   setup(props, context) {
-        const file: Ref<File | string> = ref('')
-        const code: Ref<string> = ref('')
-        const embeddedUrl: Ref<string> = ref('')
-        const urlFileLocal: Ref<string> = ref('')
-        const status: Ref<number> = ref(2)
+    const file: Ref<File | string> = ref('');
+    const code: Ref<string> = ref('');
+    const embeddedUrl: Ref<string> = ref('');
+    const urlFileLocal: Ref<string> = ref('');
+    const status: Ref<number> = ref(2);
     const uploadAvatar = (value: FileList) => {
-            urlFileLocal.value = URL.createObjectURL(value[0])
-            file.value = value[0]
+      urlFileLocal.value = URL.createObjectURL(value[0]);
+      file.value = value[0];
     };
     watch(
       () => props.openAddHotProduct,
       (value) => {
         if (value) {
-                    ResetData()
+          ResetData();
         }
       }
     );
     const ResetData = () => {
-            file.value = ''
-            code.value = ''
-            embeddedUrl.value = ''
-            urlFileLocal.value = ''
-            status.value = 2
-        }
-        const SubbmitData = () => {
-            context.emit('click:CloseBtnAddHotProduct')
+      file.value = '';
+      code.value = '';
+      embeddedUrl.value = '';
+      urlFileLocal.value = '';
+      status.value = 2;
+    };
+    const SubmitData = () => {
+      context.emit('click:CloseBtnAddHotProduct');
       context.emit('insertData', {
         file: file.value,
         code: code.value,
         status: status.value,
         embeddedUrl: embeddedUrl.value,
-                imageUrl: urlFileLocal.value
-            })
-        }
+        imageUrl: urlFileLocal.value,
+      });
+    };
     const product_code = [
       (val?: string) =>
         (val && val.trim().length) ||
@@ -68,7 +68,7 @@ export default defineComponent({
 
     return {
       uploadAvatar,
-            SubbmitData,
+      SubmitData,
       urlFileLocal,
       file,
       code,
@@ -76,7 +76,7 @@ export default defineComponent({
       status,
       ResetData,
       product_code,
-            url_embed
+      url_embed,
     };
   },
 
@@ -85,8 +85,6 @@ export default defineComponent({
     'update:openAddHotProduct',
     'update:statusHotProduct',
     'selectedFile',
-        'click:CloseBtnAddHotProduct'
+    'click:CloseBtnAddHotProduct',
   ],
 });
-
-

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

@@ -5,7 +5,7 @@
     @update:model-value="$emit('update:openAddHotProduct', $event)"
   >
     <q-card style="min-width: 600px" bordered>
-      <q-form greedy @submit="SubbmitData">
+      <q-form greedy @submit="SubmitData">
         <q-card-section>
           <q-item>
             <q-item-section>

src/components/artist-information/VAB-account/VabAccount.ts

-import { defineComponent, PropType, ref, Ref, watch } from 'vue';
+import { defineComponent, PropType, ref, watch } from 'vue';
 import { i18n } from 'src/boot/i18n';
+import { useRouter } from 'vue-router';
 import { BannerType, StoriesType } from 'src/assets/type';
 import UploadImage from 'components/upload-image/index.vue';
 import { Dialog } from 'quasar';
@@ -8,6 +9,7 @@ export default defineComponent({
   components: { UploadImage },
 
   props: {
+    id: { number: String, required: true },
     account: { type: String, required: true },
     banners: { type: Array as PropType<BannerType[]>, required: true },
     shortDescription: { type: Array, required: true },
@@ -17,12 +19,19 @@ export default defineComponent({
   },
 
   setup(props, context) {
+    const router = useRouter();
     watch(
       () => props.banners.length,
       (value) => {
         slide.value = value - 1;
       }
     );
+    watch(
+      () => props.stories.length,
+      (value) => {
+        slideStory.value = value - 1;
+      }
+    );
     const slide = ref(0);
     const slideStory = ref(0);
     const editor = ref('Customize it.');
@@ -55,23 +64,19 @@ export default defineComponent({
         context.emit('deleteBanner', index);
       });
     };
-    const deleteImagesStoriess = (story: StoriesType, storyIdx: number) => {
-      if (story.content == '') {
-        context.emit('deleteStories', story);
-      } else {
-        // story.imageUrl =''
-        context.emit('deleteImagesStories', story);
-      }
+    const deleteStory = (storyIdx: number) => {
+      context.emit('confirmDeleteStory', storyIdx);
     };
 
     return {
+      router,
       slide,
       slideStory,
       editor,
       accountRules,
       uploadBanner,
       deleteImage,
-      deleteImagesStoriess,
+      deleteStory,
     };
   },
   emits: [
@@ -85,5 +90,7 @@ export default defineComponent({
     'deleteImagesStories',
     'deleteStories',
     'confirmDeleteSocialEmbedded',
+    'click:openAddStoryDialog',
+    'confirmDeleteStory',
   ],
 });

src/components/artist-information/VAB-account/add-story/AddStory.ts

+import { defineComponent, Ref, ref, watch } from 'vue';
+// import { i18n } from 'src/boot/i18n';
+import UploadImage from '../../../upload-image/index.vue';
+
+export default defineComponent({
+  components: {
+    UploadImage,
+  },
+  props: {
+    isOpenAddStory: {
+      type: Boolean,
+      required: true,
+    },
+  },
+
+  setup(props, context) {
+    const file: Ref<File | string> = ref('');
+    const content: Ref<string> = ref('');
+    const urlFileLocal: Ref<string> = ref('');
+    const uploadStory = (value: FileList) => {
+      urlFileLocal.value = URL.createObjectURL(value[0]);
+      file.value = value[0];
+    };
+    watch(
+      () => props.isOpenAddStory,
+      (value) => {
+        if (value) {
+          ResetData();
+        }
+      }
+    );
+    const ResetData = () => {
+      file.value = '';
+      content.value = '';
+      urlFileLocal.value = '';
+    };
+    const SubmitData = () => {
+      context.emit('click:CloseBtnAddStory');
+      context.emit('insertData', {
+        file: file.value,
+        content: content.value,
+        imageUrl: urlFileLocal.value,
+      });
+    };
+
+    return {
+      uploadStory,
+      SubmitData,
+      urlFileLocal,
+      file,
+      content,
+      ResetData,
+    };
+  },
+
+  emits: [
+    'insertData',
+    'update:isOpenAddStory',
+    'selectedFile',
+    'click:CloseBtnAddStory',
+  ],
+});

src/components/artist-information/VAB-account/add-story/index.vue

+<template>
+  <q-dialog
+    persistent
+    :model-value="isOpenAddStory"
+    @update:model-value="$emit('update:isOpenAddStory', $event)"
+  >
+    <q-card style="min-width: 600px" bordered>
+      <q-form greedy @submit="SubmitData">
+        <q-card-section>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-h6 text-weight-regular">{{
+                $t('artist.dialogLabel.title.addHotProduct')
+              }}</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-12">
+              <q-card v-if="urlFileLocal" flat style="max-height: 200px">
+                <div align="center">
+                  <q-img
+                    :src="urlFileLocal"
+                    style="max-height: 200px; aspect-ratio: 16/9"
+                  >
+                  </q-img>
+                </div>
+              </q-card>
+
+              <UploadImage
+                @selectedFile="uploadStory"
+                class="q-mt-md"
+                :isBtn="true"
+              ></UploadImage>
+
+              <q-input
+                v-model="content"
+                label="Nội dung"
+                hide-bottom-space
+                type="textarea"
+                class="q-my-sm"
+                outlined
+                clearable
+              ></q-input>
+            </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:CloseBtnAddStory')"
+          />
+          <q-btn
+            color="primary"
+            no-caps
+            style="width: 90px"
+            :label="$t('customer.crudActions.save')"
+            type="submit"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts" src="./AddStory.ts"></script>

src/components/artist-information/VAB-account/index.vue

@@ -7,6 +7,7 @@
     </div>
     <div class="col-2 flex flex-center">
       <q-input
+        v-if="id"
         :model-value="account"
         @update:model-value="$emit('update:account', $event)"
         :rules="accountRules"
@@ -15,6 +16,15 @@
         hide-bottom-space
         outlined
       ></q-input>
+      <q-input
+        v-else
+        :model-value="account"
+        @update:model-value="$emit('update:account', $event)"
+        :rules="accountRules"
+        dense
+        hide-bottom-space
+        outlined
+      ></q-input>
     </div>
     <div class="col-auto">
       <q-btn color="primary" no-caps label="Reset Pass"></q-btn>
@@ -23,17 +33,16 @@
       <div class="text-uppercase text-weight-medium">Thông tin profile</div>
     </div>
     <div class="col-12 q-mt-sm">
-      <div class="row q-col-gutter-md">
-        <div class="col-4">
+      <div class="row q-col-gutter-lg">
+        <div class="col-7" style="height: 100%">
           <q-carousel
+            v-if="banners.length"
             v-model="slide"
             :key="banners.length"
-            v-if="banners.length"
             animated
             arrows
             navigation
             infinite
-            style="height: 300px"
           >
             <q-carousel-slide
               v-for="(bannerInfo, bannerIdx) in banners"
@@ -53,16 +62,15 @@
               </template>
             </q-carousel-slide>
           </q-carousel>
-          <UploadImage v-else @selectedFile="uploadBanner"></UploadImage>
           <UploadImage
-            class="q-mt-xs"
             v-if="banners.length"
+            class="q-mt-xs"
             :isBtn="true"
             @selectedFile="uploadBanner"
           ></UploadImage>
+          <UploadImage v-else @selectedFile="uploadBanner"></UploadImage>
         </div>
-
-        <div class="col-8">
+        <div class="col-5">
           <q-editor
             :model-value="shortDescription"
             @update:model-value="$emit('update:shortDescription', $event)"
@@ -72,17 +80,88 @@
             toolbar-bg="primary"
             style="height: 100%"
             :toolbar="[
-              ['token'],
-              ['bold', 'italic', 'underline'],
+              [
+                {
+                  label: $q.lang.editor.align,
+                  icon: $q.iconSet.editor.align,
+                  fixedLabel: true,
+                  list: 'only-icons',
+                  options: ['left', 'center', 'right', 'justify'],
+                },
+                {
+                  label: $q.lang.editor.align,
+                  icon: $q.iconSet.editor.align,
+                  fixedLabel: true,
+                  options: ['left', 'center', 'right', 'justify'],
+                },
+              ],
+              [
+                'bold',
+                'italic',
+                'strike',
+                'underline',
+                'subscript',
+                'superscript',
+              ],
+              ['token', 'hr', 'link', 'custom_btn'],
+              ['print', 'fullscreen'],
               [
                 {
                   label: $q.lang.editor.formatting,
                   icon: $q.iconSet.editor.formatting,
                   list: 'no-icons',
-                  options: ['p', 'h3', 'h4', 'h5', 'h6', 'code'],
+                  options: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'code'],
                 },
+                {
+                  label: $q.lang.editor.fontSize,
+                  icon: $q.iconSet.editor.fontSize,
+                  fixedLabel: true,
+                  fixedIcon: true,
+                  list: 'no-icons',
+                  options: [
+                    'size-1',
+                    'size-2',
+                    'size-3',
+                    'size-4',
+                    'size-5',
+                    'size-6',
+                    'size-7',
+                  ],
+                },
+                {
+                  label: $q.lang.editor.defaultFont,
+                  icon: $q.iconSet.editor.font,
+                  fixedIcon: true,
+                  list: 'no-icons',
+                  options: [
+                    'default_font',
+                    'arial',
+                    'arial_black',
+                    'comic_sans',
+                    'courier_new',
+                    'impact',
+                    'lucida_grande',
+                    'times_new_roman',
+                    'verdana',
+                  ],
+                },
+                'removeFormat',
               ],
+              ['quote', 'unordered', 'ordered', 'outdent', 'indent'],
+
+              ['undo', 'redo'],
+              ['viewsource'],
             ]"
+            :fonts="{
+              arial: 'Arial',
+              arial_black: 'Arial Black',
+              comic_sans: 'Comic Sans MS',
+              courier_new: 'Courier New',
+              impact: 'Impact',
+              lucida_grande: 'Lucida Grande',
+              times_new_roman: 'Times New Roman',
+              verdana: 'Verdana',
+            }"
           />
         </div>
       </div>
@@ -101,7 +180,7 @@
               color="primary"
               icon="mdi-pencil-circle-outline"
             >
-              <q-tooltip :offset="[20, 10]">Chỉnh sửa</q-tooltip></q-btn
+              <q-tooltip :offset="[20, 10]">Chỉnh sửa Embed</q-tooltip></q-btn
             >
             <q-btn
               v-if="socialEmbedded !== null"
@@ -111,7 +190,7 @@
               icon="mdi-trash-can-outline"
               @click="$emit('confirmDeleteSocialEmbedded')"
             >
-              <q-tooltip :offset="[20, 10]">Xoá</q-tooltip></q-btn
+              <q-tooltip :offset="[20, 10]">Xoá Embed</q-tooltip></q-btn
             >
           </div>
           <q-card
@@ -138,14 +217,32 @@
         </div>
 
         <div class="col-4">
-          <div class="text-h6 text-weight-regular">Story</div>
+          <div class="flex flex-center">
+            <div class="text-h6 text-weight-regular q-ml-md">Story</div>
+            <q-space></q-space>
+            <q-btn
+              v-if="stories.length"
+              @click="$emit('click:openAddStoryDialog')"
+              flat
+              round
+              color="primary"
+              icon="mdi-plus-circle-outline"
+              class="q-mr-md"
+            >
+              <q-tooltip :offset="[20, 10]">Thêm Story</q-tooltip></q-btn
+            >
+          </div>
           <q-card
             class="my-card flex q-mt-xs flex-center"
-            style="height: 300px"
+            style="height: 100%"
             bordered
             v-if="!stories.length"
           >
-            <div align="center" class="flex flex-center q-py-xs">
+            <div
+              @click="$emit('click:openAddStoryDialog')"
+              align="center"
+              class="flex flex-center q-py-xs"
+            >
               <q-icon name="mdi-plus-circle-outline" size="xl"></q-icon>
               <div class="q-mt-xs">{{ $t('uploadImage.uploadStory') }}</div>
             </div>
@@ -157,6 +254,7 @@
             arrows
             navigation
             infinite
+            style="height: 100%"
           >
             <q-carousel-slide
               v-for="(story, storyIdx) in stories"
@@ -170,17 +268,19 @@
                   name="mdi-close-circle"
                   color="red"
                   style="position: absolute; right: 0; font-size: 24px"
-                  @click="deleteImagesStoriess(story, storyIdx)"
+                  @click="deleteStory(storyIdx)"
                 ></q-icon>
                 <q-input
                   type="textarea"
                   :model-value="story.content"
+                  readonly
                   @update:model-value="$emit('update:content', $event)"
                 ></q-input>
               </q-card>
             </q-carousel-slide>
           </q-carousel>
         </div>
+
         <div class="col-4">
           <div class="text-h6 text-weight-regular">Lịch</div>
           <q-date

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

@@ -60,22 +60,9 @@ export default defineComponent({
         i18n.global.t('artist.dialogLabel.validateMessages.requireCardType'),
     ];
     const confirmAddAccBank = () => {
-      if (
-        isDefault.value === 1 &&
-        props.bankAccounts.filter((item) => item.isDefault === 1).length
-      ) {
-        Notify.create({
-          type: 'negative',
-          message: i18n.global.t(
-            'artist.dialogLabel.validateMessages.errorIsDefault'
-          ),
-        });
-      } else {
       Notify.create({
         type: 'positive',
-          message: i18n.global.t(
-            'artist.dialogLabel.validateMessages.addAccess'
-          ),
+        message: i18n.global.t('artist.dialogLabel.validateMessages.addAccess'),
       });
       let bankFilter = {};
       props.cardBankOptions.map((item) => {
@@ -97,7 +84,6 @@ export default defineComponent({
         cardType: typeCardFilter,
         isDefault: isDefault.value,
       });
-      }
     };
 
     const accountNumber: Ref<string> = ref('');

src/components/artist-information/bank-account/edit-bank-account/EditBankAcc.ts

@@ -69,17 +69,6 @@ export default defineComponent({
         i18n.global.t('artist.dialogLabel.validateMessages.requireCardType'),
     ];
     const confirmEditAccBank = () => {
-      if (
-        isDefault.value === 1 &&
-        props.bankAccounts.filter((item) => item.isDefault === 1).length
-      ) {
-        Notify.create({
-          type: 'negative',
-          message: i18n.global.t(
-            'artist.dialogLabel.validateMessages.errorIsDefault'
-          ),
-        });
-      } else {
       Notify.create({
         type: 'positive',
         message: i18n.global.t(
@@ -106,7 +95,6 @@ export default defineComponent({
         cardType: typeCardFilter,
         isDefault: isDefault.value,
       });
-      }
     };
     const accountNumber: Ref<string> = ref('');
     const cardNumber: Ref<string> = ref('');

src/components/artist-information/bank-account/index.vue

@@ -75,35 +75,6 @@
           </q-td>
         </template>
       </q-table>
-      <!-- <div class="col-12 q-mt-sm">
-        <Pagination
-          v-model:currentPage="pageIndex"
-          v-model:pageSize="pageSize"
-          :totalPage="totalPage"
-          @update:pageSize="changePageSize"
-          @update:currentPage="getListBankAccount"
-        />
-      </div> -->
-      <!-- <div class="col-12 q-mt-md">
-        <div class="row">
-          <q-space></q-space>
-          <div class="col-auto">
-            <q-btn
-              to="/nghe-sy"
-              color="grey"
-              no-caps
-              :label="$t('crudActions.back')"
-            ></q-btn>
-          </div>
-          <div class="col-auto q-ml-md">
-            <q-btn
-              color="primary"
-              no-caps
-              :label="$t('crudActions.update')"
-            ></q-btn>
-          </div>
-        </div>
-      </div> -->
     </div>
   </div>
 </template>

src/components/artist-information/hot-product/HotProduct.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 { ProductType } from 'src/assets/type';
+import { HotProductStatus } from 'src/assets/enums';
 export default defineComponent({
   components: {
     Pagination,
@@ -102,8 +103,7 @@ export default defineComponent({
         status: item.row.status,
       });
 
-      context.emit('click:openUpadateHotProduct'
-        );
+      context.emit('click:openUpadateHotProduct');
     };
     const clickAdd = () => {
       context.emit('click:addHotProduct');
@@ -126,6 +126,7 @@ export default defineComponent({
       changePageSize,
       clickAdd,
       updateProduct,
+      HotProductStatus,
     };
   },
   emits: [
@@ -133,6 +134,6 @@ export default defineComponent({
     'reset',
     'deleteRow',
     'click:openUpadateHotProduct',
-    'setDataUpdate'
+    'setDataUpdate',
   ],
 });

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

@@ -21,6 +21,27 @@
         hide-pagination
       >
         <template v-slot:body-cell-status="rowData">
+          <q-td>
+            <div align="center">
+              <q-chip
+                :color="
+                  rowData.value === HotProductStatus.active
+                    ? 'positive'
+                    : 'orange'
+                "
+                text-color="white"
+                size="sm"
+              >
+                {{
+                  rowData.value === HotProductStatus.active
+                    ? $t('artist.hotProduct.statusLabel.active')
+                    : $t('artist.hotProduct.statusLabel.inactive')
+                }}
+              </q-chip>
+            </div>
+          </q-td>
+        </template>
+        <!-- <template v-slot:body-cell-status="rowData">
           <q-td>
             <div align="center">
               <q-checkbox
@@ -30,7 +51,7 @@
               />
             </div>
           </q-td>
-        </template>
+        </template> -->
         <template v-slot:body-cell-STT="item">
           <q-td style="padding: 0; height: 100%">
             <div align="center">

src/i18n/vi/index.ts

@@ -377,6 +377,7 @@ export default {
         addAccess: 'Thêm tài khoản ngân hàng thành công',
         editAccess: 'Cập nhật thông tin tài khoản ngân hàng thành công',
         deleteAccess: 'Xoá tài khoản ngân hàng thành công',
+        deleteStoryAccess: 'Xoá Story thành công',
       },
     },
     confirmActionsTitle: {
@@ -387,7 +388,8 @@ export default {
     },
     actionMessages: {
       deleteArtistAccess: 'Xoá nghệ sỹ thành công',
-      editNewUserAccess: 'Cập nhật thông tin nghệ sỹ thành công',
+      editArtistAccess: 'Cập nhật thông tin nghệ sỹ thành công',
+      addNewArtistAccess: 'Thêm nghệ sỹ thành công',
     },
     artistInformation: {
       tabLabel: {
@@ -462,6 +464,15 @@ export default {
         status: 'Trạng thái',
         action: 'Chức năng',
       },
+      statusLabel: {
+        active: 'Hiển thị',
+        inactive: 'Ẩn',
+      },
+    },
+    vabAccount: {
+      confirmActionsTitle: {
+        confirmDeleteStory: 'Bạn có chắc muốn xoá Story này không',
+      },
     },
   },
   recordPerPage: 'Số bản ghi',

src/pages/cap-nhat-thong-tin-nghe-sy/index.vue

@@ -71,11 +71,14 @@
               @selectedFile="selectedFile"
               @deleteBanner="banners.splice($event, 1)"
               @openDialogUploadEmbed="isOpenDialogEmbed = true"
+              :id="route.params.id"
               :social-embedded="socialEmbedded"
               :banners="banners"
               :stories="stories"
               @deleteImagesStories="deleteImagesStories($event)"
               @deleteStories="DeleteItemStories"
+              @click:openAddStoryDialog="isOpenAddStory = true"
+              @confirmDeleteStory="deleteStory"
             ></VabAccount>
           </q-tab-panel>
           <q-tab-panel name="bankAccount">
@@ -140,6 +143,11 @@
       @click:CloseBtnUpdateHotProduct="openUpdateHotProduct = false"
       v-model:open-update-hot-product="openUpdateHotProduct"
     ></UpdateHotProduct>
+    <AddStory
+      @insertData="addStory"
+      v-model:is-open-add-story="isOpenAddStory"
+      @click:CloseBtnAddStory="isOpenAddStory = false"
+    ></AddStory>
     <div class="col-12 q-mt-md">
       <div class="row">
         <q-space></q-space>

src/pages/cap-nhat-thong-tin-nghe-sy/updateInformationArtist.ts

@@ -18,6 +18,7 @@ import AddNewBankAccountDialog from 'components/artist-information/bank-account/
 import EditBankAccountDialog from 'components/artist-information/bank-account/edit-bank-account/index.vue';
 import UploadEmbedDialog from 'components/artist-information/upload-embed-dialog/index.vue';
 import UpdateHotProduct from 'components/artist-information/UpdateHotProduct/index.vue';
+import AddStory from 'components/artist-information/VAB-account/add-story/index.vue';
 
 import {
   ArtistInfoType,
@@ -53,9 +54,10 @@ export default defineComponent({
     AddHotProductDialog,
     UpdateHotProduct,
     UploadEmbedDialog,
+    AddStory,
   },
 
-  setup(_, context) {
+  setup() {
     const route = useRoute();
     const tab = ref('information');
 
@@ -65,6 +67,7 @@ export default defineComponent({
     const openAddHotProduct: Ref<boolean> = ref(false);
     const openUpdateHotProduct: Ref<boolean> = ref(false);
     const isOpenDialogEmbed: Ref<boolean> = ref(false);
+    const isOpenAddStory: Ref<boolean> = ref(false);
 
     // state
     const fieldOptions: Ref<FieldType[]> = ref([]);
@@ -81,7 +84,7 @@ export default defineComponent({
 
     //state sử dụng trong tab thong-tin-ca-nhan
     const id: Ref<number> = ref(0);
-    const account: Ref<string> = ref('');
+    const account: Ref<string | null> = ref(null);
     const avatar: Ref<string | null> = ref(null);
     const avatarFile: Ref<File | null> = ref(null);
     const artistCode: Ref<string> = ref('');
@@ -217,7 +220,9 @@ export default defineComponent({
       const response = (await api({
         url: API_PATHS.getWorkOptions,
         method: 'GET',
-        params: {},
+        params: {
+          // fieldId: fields.value[0].id,
+        },
       })) as AxiosResponse<BaseResponseBody<WorkType[]>>;
       if (response.data.error.code === config.API_RES_CODE.OK.code) {
         workOptions.value = response.data.data;
@@ -244,9 +249,25 @@ export default defineComponent({
       }
     };
 
-    const addAccBank = (value: BankAccountType) => {
-      bankAccounts.value.push(value);
+    const addAccBank = (item: BankAccountType) => {
+      if (item.isDefault === 1) {
+        bankAccounts.value.forEach((element) => (element.isDefault = 2));
+        bankAccounts.value.push(item);
         isOpenAddAccountBankDialog.value = false;
+      } else {
+        bankAccounts.value.push(item);
+        isOpenAddAccountBankDialog.value = false;
+      }
+    };
+    const editAccBank = (item: BankAccountType) => {
+      if (item.isDefault === 1) {
+        bankAccounts.value.forEach((element) => (element.isDefault = 2));
+        bankAccounts.value[rowBankAccIdx.value] = item;
+        isOpenEditAccountBankDialog.value = false;
+      } else {
+        bankAccounts.value[rowBankAccIdx.value] = item;
+        isOpenEditAccountBankDialog.value = false;
+      }
     };
     const confirmDeleteAccBank = (value: number) => {
       Dialog.create({
@@ -281,14 +302,9 @@ export default defineComponent({
 
       isOpenEditAccountBankDialog.value = true;
     };
-    const editAccBank = (value: BankAccountType) => {
-      // console.log(value, 'editAccBankeditAccBankeditAccBankeditAccBank');
-      bankAccounts.value[rowBankAccIdx.value] = value;
-      isOpenEditAccountBankDialog.value = false;
-    };
+
     const pushData = (value: ProductType) => {
       products.value.push(value);
-      console.log(products.value);
     };
 
     const selectedFile = (value: BannerType) => {
@@ -354,6 +370,33 @@ export default defineComponent({
 
       isOpenDialogEmbed.value = false;
     };
+
+    const addStory = (value: StoriesType) => {
+      stories.value.push(value);
+    };
+
+    const deleteStory = (idx: number) => {
+      Dialog.create({
+        title: i18n.global.t(
+          'artist.bankAccount.confirmActionsTitle.confirmDeleteAccBankTitle'
+        ),
+        message: i18n.global.t(
+          'artist.vabAccount.confirmActionsTitle.confirmDeleteStory'
+        ),
+        cancel: i18n.global.t(
+          'artist.bankAccount.confirmActionsTitle.confirmDeleteAccBankBtnLabel'
+        ),
+        color: 'negative',
+      }).onOk(() => {
+        Notify.create({
+          type: 'positive',
+          message: i18n.global.t(
+            'artist.dialogLabel.validateMessages.deleteStoryAccess'
+          ),
+        });
+        stories.value.splice(idx, 1);
+      });
+    };
     // const callApiUploadImage = async (file: File) => {
     //   try {
     //     const response = await api({
@@ -404,7 +447,7 @@ export default defineComponent({
           await Router.push({ name: Pages.artist });
           Notify.create({
             type: 'positive',
-            message: i18n.global.t('artist.actionMessages.editNewUserAccess'),
+            message: i18n.global.t('artist.actionMessages.editArtistAccess'),
           });
         }
       } catch (error) {}
@@ -512,6 +555,9 @@ export default defineComponent({
       DeleteItemStories,
       confirmDeleteSocialEmbedded,
       changeEmbed,
+      isOpenAddStory,
+      addStory,
+      deleteStory,
     };
   },
 });

src/pages/nghe-sy/artist.ts

@@ -22,6 +22,8 @@ export default defineComponent({
     const userTableColumnsArtist = [
       {
         required: true,
+        name: 'STT',
+        field: 'STT',
         label: 'STT',
         align: 'center',
         sortable: false,
@@ -122,9 +124,9 @@ export default defineComponent({
     const professionOptions: Ref<QualificationType[]> = ref([]);
     const artistLevelOptions: Ref<ArtistLevelType[]> = ref([]);
     const workOptions: Ref<WorkType[]> = ref([]);
-    const fieldSelected: Ref<number | undefined> = ref();
-    const professionSelected: Ref<number | undefined> = ref();
-    const artistLevelSelected: Ref<number | undefined> = ref();
+    const fieldSelected: Ref<FieldType | null> = ref(null);
+    const professionSelected: Ref<QualificationType | null> = ref(null);
+    const artistLevelSelected: Ref<ArtistLevelType | null> = ref(null);
 
     const isOpenNewArtistDialog = ref(false);
     const id: Ref<number> = ref(0);
@@ -155,6 +157,9 @@ export default defineComponent({
           params: {
             pageIndex: pageIndex.value,
             pageSize: pageSize.value,
+            qualification: fieldSelected.value?.id,
+            artistLevel: professionSelected.value?.id,
+            field: artistLevelSelected.value?.id,
           },
         })) as AxiosResponse<
           BaseResponseBody<PaginationResponse<ArtistInfoType>>
@@ -167,17 +172,26 @@ export default defineComponent({
       } catch (error) {}
       // userTableRowsArtist.value = fakeData;
     };
-    const filterListArtist = () => {
+    // const filterListArtist = async () => {
+    //   try {
     //     const response = (await api({
-      //     url: API_PATHS.filterListArtist,
+    //       url: API_PATHS.getListArtists,
     //       method: 'GET',
     //       params: {
-      //       unitName: fullNameKeyword.value,
-      //       fieldName: fieldSelected.value,
+    //         pageIndex: pageIndex.value,
+    //         pageSize: pageSize.value,
+    //         name: fullNameKeyword.value,
+
     //       },
-      //   })) as AxiosResponse<BaseResponseBody<unknown>>;
-      // userTableRowsArtist.value =  userTableRowsArtist.value.filter((item: unknown) => item.fullName = fullNameKeyword)
-    };
+    //     })) as AxiosResponse<
+    //       BaseResponseBody<PaginationResponse<ArtistInfoType>>
+    //     >;
+    //     if (response.data.error.code === config.API_RES_CODE.OK.code) {
+    //       userTableRowsArtist.value = response.data.data.data;
+    //       totalPage.value = response.data.data.totalPages;
+    //     }
+    //   } catch (error) {}
+    // };
     const changePageSize = () => {
       pageIndex.value = 1;
       void getListArtists();
@@ -303,7 +317,7 @@ export default defineComponent({
       instagram,
       whatsapp,
       sexOptions,
-      filterListArtist,
+      // filterListArtist,
       totalPage,
       changePageSize,
       fullNameKeyword,

src/pages/nghe-sy/index.vue

@@ -47,7 +47,7 @@
         color="primary"
         no-caps
         :label="$t('crudActions.search')"
-        @click="filterListArtist"
+        @click="getListArtists"
       >
       </q-btn>
     </div>
@@ -69,6 +69,13 @@
         separator="cell"
         hide-pagination
       >
+        <template v-slot:body-cell-STT="item">
+          <q-td style="padding: 0; height: 100%">
+            <div align="center">
+              {{ item.rowIndex + 1 }}
+            </div>
+          </q-td>
+        </template>
         <template v-slot:body-cell-avatar="avatar">
           <q-td style="padding: 0; height: 100%" class="flex flex-center">
             <q-img

src/pages/them-nghe-sy/AddArtist.ts

@@ -3,7 +3,7 @@ import { api, BaseResponseBody } from 'src/boot/axios';
 import { API_PATHS, config } from 'src/assets/configurations';
 import { useRoute } from 'vue-router';
 import { AxiosResponse } from 'axios';
-import moment from 'moment';
+// import moment from 'moment';
 import { i18n } from 'src/boot/i18n';
 import { Dialog, Notify } from 'quasar';
 import { Router } from 'src/router';
@@ -18,9 +18,10 @@ import AddNewBankAccountDialog from 'components/artist-information/bank-account/
 import EditBankAccountDialog from 'components/artist-information/bank-account/edit-bank-account/index.vue';
 import UploadEmbedDialog from 'components/artist-information/upload-embed-dialog/index.vue';
 import UpdateHotProduct from 'components/artist-information/UpdateHotProduct/index.vue';
+import AddStory from 'components/artist-information/VAB-account/add-story/index.vue';
 
 import {
-  ArtistInfoType,
+  // ArtistInfoType,
   FieldType,
   NationalityType,
   ArtistLevelType,
@@ -53,9 +54,10 @@ export default defineComponent({
     AddHotProductDialog,
     UpdateHotProduct,
     UploadEmbedDialog,
+    AddStory,
   },
 
-  setup(_, context) {
+  setup() {
     const route = useRoute();
     const tab = ref('information');
 
@@ -65,6 +67,7 @@ export default defineComponent({
     const openAddHotProduct: Ref<boolean> = ref(false);
     const openUpdateHotProduct: Ref<boolean> = ref(false);
     const isOpenDialogEmbed: Ref<boolean> = ref(false);
+    const isOpenAddStory: Ref<boolean> = ref(false);
 
     // state
     const fieldOptions: Ref<FieldType[]> = ref([]);
@@ -81,7 +84,7 @@ export default defineComponent({
 
     //state sử dụng trong tab thong-tin-ca-nhan
     const id: Ref<number> = ref(0);
-    const account: Ref<string> = ref('');
+    const account: Ref<string | null> = ref(null);
     const avatar: Ref<string | null> = ref(null);
     const avatarFile: Ref<File | null> = ref(null);
     const artistCode: Ref<string> = ref('');
@@ -168,7 +171,9 @@ export default defineComponent({
       const response = (await api({
         url: API_PATHS.getWorkOptions,
         method: 'GET',
-        params: {},
+        params: {
+          // fieldId: fields.value[0].id,
+        },
       })) as AxiosResponse<BaseResponseBody<WorkType[]>>;
       if (response.data.error.code === config.API_RES_CODE.OK.code) {
         workOptions.value = response.data.data;
@@ -195,9 +200,25 @@ export default defineComponent({
       }
     };
 
-    const addAccBank = (value: BankAccountType) => {
-      bankAccounts.value.push(value);
+    const addAccBank = (item: BankAccountType) => {
+      if (item.isDefault === 1) {
+        bankAccounts.value.forEach((element) => (element.isDefault = 2));
+        bankAccounts.value.push(item);
+        isOpenAddAccountBankDialog.value = false;
+      } else {
+        bankAccounts.value.push(item);
         isOpenAddAccountBankDialog.value = false;
+      }
+    };
+    const editAccBank = (item: BankAccountType) => {
+      if (item.isDefault === 1) {
+        bankAccounts.value.forEach((element) => (element.isDefault = 2));
+        bankAccounts.value[rowBankAccIdx.value] = item;
+        isOpenEditAccountBankDialog.value = false;
+      } else {
+        bankAccounts.value[rowBankAccIdx.value] = item;
+        isOpenEditAccountBankDialog.value = false;
+      }
     };
     const confirmDeleteAccBank = (value: number) => {
       Dialog.create({
@@ -232,14 +253,9 @@ export default defineComponent({
 
       isOpenEditAccountBankDialog.value = true;
     };
-    const editAccBank = (value: BankAccountType) => {
-      // console.log(value, 'editAccBankeditAccBankeditAccBankeditAccBank');
-      bankAccounts.value[rowBankAccIdx.value] = value;
-      isOpenEditAccountBankDialog.value = false;
-    };
+
     const pushData = (value: ProductType) => {
       products.value.push(value);
-      console.log(products.value);
     };
 
     const selectedFile = (value: BannerType) => {
@@ -305,15 +321,42 @@ export default defineComponent({
 
       isOpenDialogEmbed.value = false;
     };
-    const callApiUploadImage = async (file: File) => {
-      try {
-        const response = await api({
-          url: API_PATHS.uploadImage,
-          method: 'GET',
-          params: {},
+
+    const addStory = (value: StoriesType) => {
+      stories.value.push(value);
+    };
+
+    const deleteStory = (idx: number) => {
+      Dialog.create({
+        title: i18n.global.t(
+          'artist.bankAccount.confirmActionsTitle.confirmDeleteAccBankTitle'
+        ),
+        message: i18n.global.t(
+          'artist.vabAccount.confirmActionsTitle.confirmDeleteStory'
+        ),
+        cancel: i18n.global.t(
+          'artist.bankAccount.confirmActionsTitle.confirmDeleteAccBankBtnLabel'
+        ),
+        color: 'negative',
+      }).onOk(() => {
+        Notify.create({
+          type: 'positive',
+          message: i18n.global.t(
+            'artist.dialogLabel.validateMessages.deleteStoryAccess'
+          ),
+        });
+        stories.value.splice(idx, 1);
       });
-      } catch (error) {}
     };
+    // const callApiUploadImage = async (file: File) => {
+    //   try {
+    //     const response = await api({
+    //       url: API_PATHS.uploadImage,
+    //       method: 'GET',
+    //       params: {},
+    //     });
+    //   } catch (error) {}
+    // };
 
     const addArtist = async () => {
       try {
@@ -337,7 +380,7 @@ export default defineComponent({
             fullName: fullName.value,
             // "workStatus": 1,
             shortDescription: null,
-            account: account.value,
+            account: null,
             socialEmbedded: socialEmbedded.value,
             artistLevel: artistLevel.value,
             fields: fields.value,
@@ -355,7 +398,7 @@ export default defineComponent({
           await Router.push({ name: Pages.artist });
           Notify.create({
             type: 'positive',
-            message: i18n.global.t('artist.actionMessages.editNewUserAccess'),
+            message: i18n.global.t('artist.actionMessages.addNewArtistAccess'),
           });
         }
       } catch (error) {}
@@ -461,6 +504,9 @@ export default defineComponent({
       DeleteItemStories,
       confirmDeleteSocialEmbedded,
       changeEmbed,
+      isOpenAddStory,
+      addStory,
+      deleteStory,
     };
   },
 });

src/pages/them-nghe-sy/index.vue

@@ -58,6 +58,8 @@
               :profession-options="professionOptions"
               :artist-level-options="artistLevelOptions"
               :work-options="workOptions"
+              @SetAvatar="setAvatar($event)"
+              @deleteAvatar="deleteAvatar"
             ></PersonalInformation>
           </q-tab-panel>
           <q-tab-panel name="vabAccount">
@@ -65,15 +67,20 @@
               v-model:account="account"
               v-model:short-description="shortDescription"
               v-model:format-schedules="formatSchedules"
+              @confirmDeleteSocialEmbedded="confirmDeleteSocialEmbedded"
               @selectedFile="selectedFile"
               @deleteBanner="banners.splice($event, 1)"
               @openDialogUploadEmbed="isOpenDialogEmbed = true"
+              :id="route.params.id"
               :social-embedded="socialEmbedded"
               :banners="banners"
               :stories="stories"
+              @deleteImagesStories="deleteImagesStories($event)"
+              @deleteStories="DeleteItemStories"
+              @click:openAddStoryDialog="isOpenAddStory = true"
+              @confirmDeleteStory="deleteStory"
             ></VabAccount>
           </q-tab-panel>
-
           <q-tab-panel name="bankAccount">
             <BankAccount
               :bank-accounts="bankAccounts"
@@ -82,7 +89,6 @@
               @clickEditAccBankBtn="openDialogEditAccBank"
             ></BankAccount>
           </q-tab-panel>
-
           <q-tab-panel name="hotProduct">
             <HotProduct
               :products="products"
@@ -119,8 +125,8 @@
 
     <UploadEmbedDialog
       v-model:is-open-dialog-embed="isOpenDialogEmbed"
-      v-model:social-embedded="socialEmbedded"
-      @uploadEmbed="isOpenDialogEmbed = false"
+      :social-embedded="socialEmbedded"
+      @uploadEmbed="changeEmbed"
       @click:CloseBtn="isOpenDialogEmbed = false"
     ></UploadEmbedDialog>
 
@@ -137,6 +143,11 @@
       @click:CloseBtnUpdateHotProduct="openUpdateHotProduct = false"
       v-model:open-update-hot-product="openUpdateHotProduct"
     ></UpdateHotProduct>
+    <AddStory
+      @insertData="addStory"
+      v-model:is-open-add-story="isOpenAddStory"
+      @click:CloseBtnAddStory="isOpenAddStory = false"
+    ></AddStory>
     <div class="col-12 q-mt-md">
       <div class="row">
         <q-space></q-space>
@@ -152,7 +163,7 @@
           <q-btn
             color="primary"
             no-caps
-            :label="$t('crudActions.update')"
+            :label="$t('crudActions.add')"
             @click="addArtist"
           ></q-btn>
         </div>