create delete , update artist

src/assets/configurations.example.ts

@@ -41,4 +41,5 @@ export enum API_PATHS {
   getWorkOptions = '/work',
   getDetailArtist = '/artist/detail',
   deleteManagingUnits = '/artistOwner/delete',
+  deleteArtist = '/artist/delete',
 }

src/assets/type.ts

@@ -30,6 +30,7 @@ export type UserObject = {
 
 export type ArtistInfoType = {
   id: number;
+  account: string;
   artistCode: string;
   fullName: string;
   artistName: string | null;
@@ -48,6 +49,7 @@ export type ArtistInfoType = {
   works: WorkType[];
   qualification: QualificationType;
   artistLevel: ArtistLevelType;
+  socialEmbedded: string | null;
   bankAccounts: BankAccountType[];
   banners: BannerType[];
   products: ProductType[];

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

-import { defineComponent, ref } from 'vue';
+import { defineComponent, PropType, ref } from 'vue';
+import { i18n } from 'src/boot/i18n';
+import { BannerType, StoriesType } from 'src/assets/type';
+
 export default defineComponent({
+  props: {
+    account: { type: String, required: true },
+    banners: { type: Array as PropType<BannerType[]>, required: true },
+    shortDescription: { type: Array, required: true },
+    socialEmbedded: { type: Array, required: true },
+    stories: { type: Array as PropType<StoriesType[]>, required: true },
+  },
   setup() {
     const slide = ref(1);
     const editor = ref('Customize it.');
-
-    return { slide, editor };
+    const accountRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t(
+          'artist.artistInformation.validateMessages.requireFullName'
+        ),
+    ];
+    return { slide, editor, accountRules };
   },
+  emits: ['update:account', 'update:shortDescription'],
 });

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

@@ -6,7 +6,14 @@
       <div>Tên đăng nhập</div>
     </div>
     <div class="col-2 flex flex-center">
-      <q-input dense outlined></q-input>
+      <q-input
+        :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>
@@ -26,31 +33,17 @@
             style="height: 300px"
           >
             <q-carousel-slide
-              :name="1"
-              img-src="https://kenh14cdn.com/203336854389633024/2021/4/27/photo-1-1619529782008967751238.jpg"
-              style="width: 100%; height: 300px; object-fit: contain"
-            />
-            <q-carousel-slide
-              :name="2"
-              img-src="https://image.thanhnien.vn/1024/uploaded/caotung/2021_04_25/1_bbrb.jpg"
-              style="width: 100%; height: 300px; object-fit: contain"
-            />
-            <q-carousel-slide
-              :name="3"
-              img-src="https://i.pinimg.com/originals/c2/9a/7d/c29a7d29348b1a3f502803ab9d8355cc.png"
-              style="width: 100%; height: 300px; object-fit: contain"
-            />
-            <q-carousel-slide
-              :name="4"
+              v-for="(bannerInfo, bannerIdx) in banners"
+              :key="bannerIdx"
+              :name="bannerInfo.id"
               img-src="https://kenh14cdn.com/203336854389633024/2020/12/31/photo-1-16094117624341764656274.jpg"
-              style="width: 100%; height: 300px; object-fit: contain"
             />
           </q-carousel>
         </div>
-
         <div class="col-8">
           <q-editor
-            v-model="editor"
+            :model-value="shortDescription"
+            @update:model-value="$emit('update:shortDescription', $event)"
             ref="editorRef"
             toolbar-text-color="white"
             toolbar-toggle-color="yellow-8"
@@ -73,6 +66,34 @@
       </div>
     </div>
     <div class="col-12 q-mt-md">
+      <div class="row" align="center" justify="center">
+        <div class="col-3">
+          <div class="text-h6 text-weight-regular">Nổi bật(Embed)</div>
+          <q-card class="my-card q-mt-sm" style="height: 300px">
+            <img style="height: 100%" :src="socialEmbedded" />
+          </q-card>
+        </div>
+        <q-space></q-space>
+        <div class="col-3">
+          <div class="text-h6 text-weight-regular">Story</div>
+          <q-card class="my-card q-mt-sm" style="height: 300px">
+            <img
+              v-if="stories[0].imageUrl !== null"
+              style="height: 70%"
+              :src="stories[0].imageUrl"
+            />
+            <div class="text-subtitle2">{{ stories[0].content }}</div>
+          </q-card>
+        </div>
+        <q-space></q-space>
+
+        <div class="col-3 q-mr-md">
+          <div class="text-h6 text-weight-regular">Lịch</div>
+          <q-date class="q-mt-sm" event-color="orange" />
+        </div>
+      </div>
+    </div>
+    <!-- <div class="col-12 q-mt-md">
       <div class="row">
         <q-space></q-space>
         <div class="col-auto">
@@ -91,7 +112,7 @@
           ></q-btn>
         </div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 

src/components/artist-information/bank-account/BankAccount.ts

@@ -7,6 +7,9 @@ export default defineComponent({
     Pagination,
     AddNewBankAccountDialog,
   },
+  props: {
+    bankAccounts: { type: Array, required: true },
+  },
   setup() {
     const userTableColumnsBankAccount = [
       {
@@ -16,16 +19,16 @@ export default defineComponent({
         sortable: false,
       },
       {
-        name: 'idCard',
-        field: 'idCard',
+        name: 'accountNumber',
+        field: 'accountNumber',
         required: true,
         label: i18n.global.t('artist.bankAccount.tableColumnsBank.idCard'),
         align: 'center',
         sortable: false,
       },
       {
-        name: 'numberCard',
-        field: 'numberCard',
+        name: 'cardNumber',
+        field: 'cardNumber',
         required: true,
         label: i18n.global.t('artist.bankAccount.tableColumnsBank.numberCard'),
         align: 'center',
@@ -48,8 +51,8 @@ export default defineComponent({
         sortable: false,
       },
       {
-        name: 'default',
-        field: 'default',
+        name: 'isDefault',
+        field: 'isDefault',
         required: true,
         label: i18n.global.t('artist.bankAccount.tableColumnsBank.default'),
         align: 'center',
@@ -68,7 +71,7 @@ export default defineComponent({
     const pageIndex = ref(1);
     const pageSize = ref(20);
     const totalPage = ref(10);
-    const isOpenDialog: Ref<boolean> = ref(false);
+    const isOpenDialog = ref(false);
     const getListBankAccount = () => {
       //   const response = (await api({
       //     url: API_PATHS.getListArtist,

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

@@ -13,14 +13,14 @@
     </div>
     <div class="col-12 q-mt-sm">
       <q-table
-        :rows="userTableRowsBankAccount"
+        :rows="bankAccounts"
         :columns="userTableColumnsBankAccount"
         :no-data-label="$t('emptyData')"
         row-key="name"
         separator="cell"
         hide-pagination
       >
-        <template v-slot:body-cell-default="rowData">
+        <template v-slot:body-cell-isDefault="rowData">
           <q-td>
             <div align="center">
               <q-checkbox v-model="rowData.value" />
@@ -47,7 +47,7 @@
           </q-td>
         </template>
       </q-table>
-      <div class="col-12 q-mt-sm">
+      <!-- <div class="col-12 q-mt-sm">
         <Pagination
           v-model:currentPage="pageIndex"
           v-model:pageSize="pageSize"
@@ -55,8 +55,8 @@
           @update:pageSize="changePageSize"
           @update:currentPage="getListBankAccount"
         />
-      </div>
-      <div class="col-12 q-mt-md">
+      </div> -->
+      <!-- <div class="col-12 q-mt-md">
         <div class="row">
           <q-space></q-space>
           <div class="col-auto">
@@ -75,7 +75,7 @@
             ></q-btn>
           </div>
         </div>
-      </div>
+      </div> -->
     </div>
     <AddNewBankAccountDialog
       v-model:is-open-dialog="isOpenDialog"

src/components/artist-information/hot-product/HotProduct.ts

@@ -5,6 +5,9 @@ export default defineComponent({
   components: {
     Pagination,
   },
+  props: {
+    products: { type: Array, required: true },
+  },
   setup() {
     const userTableColumnsHotProduct = [
       {
@@ -14,8 +17,8 @@ export default defineComponent({
         sortable: false,
       },
       {
-        name: 'productCode',
-        field: 'productCode',
+        name: 'code',
+        field: 'code',
         required: true,
         label: i18n.global.t(
           'artist.hotProduct.tableColumnsProduct.productCode'
@@ -24,16 +27,16 @@ export default defineComponent({
         sortable: false,
       },
       {
-        name: 'urlEmbed',
-        field: 'urlEmbed',
+        name: 'embeddedUrl',
+        field: 'embeddedUrl',
         required: true,
         label: i18n.global.t('artist.hotProduct.tableColumnsProduct.urlEmbed'),
         align: 'center',
         sortable: false,
       },
       {
-        name: 'productImage',
-        field: 'productImage',
+        name: 'imageUrl',
+        field: 'imageUrl',
         required: true,
         label: i18n.global.t(
           'artist.hotProduct.tableColumnsProduct.productImage'

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

@@ -12,7 +12,7 @@
     </div>
     <div class="col-12 q-mt-sm">
       <q-table
-        :rows="userTableRowsHotProduct"
+        :rows="products"
         :columns="userTableColumnsHotProduct"
         :no-data-label="$t('emptyData')"
         row-key="name"
@@ -46,7 +46,7 @@
           </q-td>
         </template>
       </q-table>
-      <div class="col-12 q-mt-sm">
+      <!-- <div class="col-12 q-mt-sm">
         <Pagination
           v-model:currentPage="pageIndex"
           v-model:pageSize="pageSize"
@@ -54,8 +54,8 @@
           @update:pageSize="changePageSize"
           @update:currentPage="getListHotProduct"
         />
-      </div>
-      <div class="col-12 q-mt-md">
+      </div> -->
+      <!-- <div class="col-12 q-mt-md">
         <div class="row">
           <q-space></q-space>
           <div class="col-auto">
@@ -74,7 +74,7 @@
             ></q-btn>
           </div>
         </div>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>

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

@@ -329,7 +329,7 @@
         </div>
       </div>
     </div>
-    <q-space></q-space>
+    <!-- <q-space></q-space>
     <div class="col-12 q-mt-md">
       <div class="row">
         <q-space></q-space>
@@ -350,7 +350,7 @@
         </div>
         <div class="col-1"></div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 

src/i18n/vi/index.ts

@@ -171,7 +171,7 @@ export default {
     toolTipMessage: {
       updateInfo: 'Cập nhật',
       information: 'Thông tin',
-      delete: 'Xóa'
+      delete: 'Xóa',
     },
     crudActions: {
       save: 'Lưu',
@@ -191,12 +191,14 @@ export default {
     confirmActionsTitle: {
       confirmDeleteManagingUnitsTitle: 'Xác nhận',
       confirmDeleteManagingUnitsCancelBtnLabel: 'Huỷ',
-      confirmDeleteManagingUnitsContent: 'Bạn có chắc muốn xoá Đơn vị chủ quản này?',
+      confirmDeleteManagingUnitsContent:
+        'Bạn có chắc muốn xoá Đơn vị chủ quản này?',
     },
     actionMessages: {
       addNewManagingUnitsAccess: 'Thêm Đơn vị chủ quản thành công',
       deleteManagingUnitsAccess: 'Xoá Đơn vị chủ quản thành công',
-      updateManagingUnitsAccess: 'Cập nhật thông tin Đơn vị chủ quản thành công',
+      updateManagingUnitsAccess:
+        'Cập nhật thông tin Đơn vị chủ quản thành công',
     },
   },
 
@@ -226,16 +228,16 @@ export default {
         add: 'Thêm nghệ sỹ',
         update: 'Cập nhật nghệ sỹ',
       },
-    fieldLabels: {
-      nameAdd: 'Tên đơn vị *',
-      myedityAdd: 'Nghệ danh *',
-      fieldsAdd: 'Lĩnh vực *',
-      timeAdd: 'Thời gian hợp đồng *',
-      nameUpdate: 'Tên đơn vị *',
-      myedityUpdate: 'Nghệ danh *',
-      fieldsUpdate: 'Lĩnh vực *',
-      timeUpdate: 'Thời gian hợp đồng *',
-      status: 'Trạng thái',
+      fieldLabels: {
+        nameAdd: 'Tên đơn vị *',
+        myedityAdd: 'Nghệ danh *',
+        fieldsAdd: 'Lĩnh vực *',
+        timeAdd: 'Thời gian hợp đồng *',
+        nameUpdate: 'Tên đơn vị *',
+        myedityUpdate: 'Nghệ danh *',
+        fieldsUpdate: 'Lĩnh vực *',
+        timeUpdate: 'Thời gian hợp đồng *',
+        status: 'Trạng thái',
       },
     },
     toolTipMessage: {
@@ -358,6 +360,14 @@ export default {
         updateArtist: 'Cập nhật nghệ sỹ',
       },
     },
+    confirmActionsTitle: {
+      confirmDeleteArtistTitle: 'Xác nhận',
+      confirmDeleteArtistContent: 'Bạn có chắc muốn xoá nghệ sỹ này không?',
+      confirmDeleteArtistBtnLabel: 'Huỷ',
+    },
+    actionMessages: {
+      deleteArtistAccess: 'Xoá nghệ sỹ thành công',
+    },
     artistInformation: {
       tabLabel: {
         personalInformation: 'Thông tin cá nhân',
@@ -365,6 +375,7 @@ export default {
         bankAcount: 'Tài khoản ngân hàng thụ hưởng',
         hotProduct: 'Sản phẩm nổi bật',
       },
+
       titleDataField: {
         id: 'ID',
         artistCode: 'Mã nghệ sỹ',

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

@@ -62,17 +62,43 @@
             ></PersonalInformation>
           </q-tab-panel>
           <q-tab-panel name="vabAccount">
-            <VabAccount></VabAccount>
+            <VabAccount
+              v-model:account="account"
+              v-model:short-description="shortDescription"
+              :social-embedded="socialEmbedded"
+              :banners="banners"
+              :stories="stories"
+            ></VabAccount>
           </q-tab-panel>
           <q-tab-panel name="bankAccount">
-            <BankAccount></BankAccount>
+            <BankAccount :bank-accounts="bankAccounts"></BankAccount>
           </q-tab-panel>
           <q-tab-panel name="hotProduct">
-            <HotProduct></HotProduct>
+            <HotProduct :products="products"></HotProduct>
           </q-tab-panel>
         </q-tab-panels>
       </q-card>
     </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-mx-md">
+          <q-btn
+            color="primary"
+            no-caps
+            :label="$t('crudActions.update')"
+          ></q-btn>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 

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

@@ -14,6 +14,10 @@ import {
   ArtistLevelType,
   QualificationType,
   WorkType,
+  BankAccountType,
+  ProductType,
+  BannerType,
+  StoriesType,
 } from 'src/assets/type';
 
 export default defineComponent({
@@ -48,8 +52,8 @@ export default defineComponent({
       { id: 1, name: 'Nam' },
       { id: 2, name: 'Nữ' },
     ]);
-
     const id: Ref<number> = ref(0);
+    const account: Ref<string> = ref('');
     const artistCode: Ref<string> = ref('');
     const fullName: Ref<string> = ref('');
     const artistName: Ref<string | null | undefined> = ref();
@@ -84,8 +88,14 @@ export default defineComponent({
     const facebookMessage: Ref<string | null | undefined> = ref();
     const instagram: Ref<string | null | undefined> = ref();
     const whatsapp: Ref<string | null | undefined> = ref();
-
+    const bankAccounts: Ref<BankAccountType[]> = ref([]);
+    const products: Ref<ProductType[]> = ref([]);
+    const banners: Ref<BannerType[]> = ref([]);
+    const shortDescription: Ref<string | null> = ref('');
+    const socialEmbedded: Ref<string | null> = ref('');
+    const stories: Ref<StoriesType[]> = ref([]);
     const route = useRoute();
+
     const getInformationArtist = async () => {
       const response = (await api({
         url: API_PATHS.getDetailArtist,
@@ -95,10 +105,11 @@ export default defineComponent({
       console.log(response, 'Artist Detail Info');
       const ArtistInformation = response.data.data;
       id.value = ArtistInformation.id;
+      account.value = ArtistInformation.account;
       artistCode.value = ArtistInformation.artistCode;
       fullName.value = ArtistInformation.fullName;
       artistName.value = ArtistInformation.artistName;
-      // birthday.value = ArtistInformation.birthday;
+      birthday.value = ArtistInformation.birthday;
       address.value = ArtistInformation.address;
       status.value = ArtistInformation.status;
       phoneNumber.value = ArtistInformation.phoneNumber;
@@ -113,6 +124,11 @@ export default defineComponent({
       artistLevel.value = ArtistInformation.artistLevel;
       sex.value = ArtistInformation.sex;
       fields.value = ArtistInformation.fields;
+      bankAccounts.value = ArtistInformation.bankAccounts;
+      products.value = ArtistInformation.products;
+      banners.value = ArtistInformation.banners;
+      socialEmbedded.value = ArtistInformation.socialEmbedded;
+      stories.value = ArtistInformation.stories;
     };
 
     const getFieldOptions = async () => {
@@ -198,6 +214,7 @@ export default defineComponent({
       facebookMessage,
       instagram,
       whatsapp,
+      socialEmbedded,
       sexOptions,
       fieldOptions,
       nationalityOptions,
@@ -209,6 +226,12 @@ export default defineComponent({
       getArtistLevelOptions,
       getQualificationOptions,
       getWorkOptions,
+      bankAccounts,
+      products,
+      account,
+      banners,
+      shortDescription,
+      stories,
     };
   },
 });

src/pages/nghe-sy/artist.ts

 import { i18n } from 'src/boot/i18n';
 import { defineComponent, onMounted, ref, Ref } from 'vue';
+import { Dialog, Notify } from 'quasar';
 import {
   PaginationResponse,
   ArtistInfoType,
@@ -193,7 +194,6 @@ export default defineComponent({
         fieldOptions.value = response.data.data;
       }
     };
-
     const getNationalityOptions = async () => {
       const response = (await api({
         url: API_PATHS.getNationalityOptions,
@@ -234,6 +234,42 @@ export default defineComponent({
         workOptions.value = response.data.data;
       }
     };
+
+    const confirmDeleteArtist = (id: number) => {
+      Dialog.create({
+        title: i18n.global.t(
+          'artist.confirmActionsTitle.confirmDeleteArtistTitle'
+        ),
+        message: i18n.global.t(
+          'artist.confirmActionsTitle.confirmDeleteArtistContent'
+        ),
+        cancel: i18n.global.t(
+          'artist.confirmActionsTitle.confirmDeleteArtistBtnLabel'
+        ),
+        color: 'negative',
+      }).onOk(() => {
+        void deleteArtist(id);
+      });
+    };
+    const deleteArtist = async (id: number) => {
+      try {
+        const deleteResult = (await api({
+          url: API_PATHS.deleteArtist,
+          method: 'GET',
+          params: {
+            artistId: id,
+          },
+        })) as AxiosResponse<BaseResponseBody<unknown>>;
+
+        if (deleteResult.data.error.code === config.API_RES_CODE.OK.code) {
+          Notify.create({
+            type: 'positive',
+            message: i18n.global.t('artist.actionMessages.deleteArtistAccess'),
+          });
+          void getListArtists();
+        }
+      } catch (error) {}
+    };
     onMounted(() => {
       void getListArtists();
       void getFieldOptions();
@@ -286,6 +322,8 @@ export default defineComponent({
       getArtistLevelOptions,
       getQualificationOptions,
       getWorkOptions,
+      confirmDeleteArtist,
+      deleteArtist,
     };
   },
 });

src/pages/nghe-sy/index.vue

@@ -71,11 +71,6 @@
       >
         <template v-slot:body-cell-action="item">
           <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('userPage.toolTipMessage.informationUser')
-              }}</q-tooltip>
-            </q-btn>
             <q-btn
               flat
               round
@@ -87,6 +82,17 @@
                 $t('userPage.toolTipMessage.updateUserInfo')
               }}</q-tooltip>
             </q-btn>
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="mdi-delete"
+              @click="confirmDeleteArtist(item.row.id)"
+            >
+              <q-tooltip :offset="[20, 10]">{{
+                $t('managingUnit.toolTipMessage.delete')
+              }}</q-tooltip>
+            </q-btn>
           </q-td>
         </template>
       </q-table>