update code

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

@@ -54,6 +54,15 @@ 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)
+      }
+    }
     return {
       slide,
       slideStory,
@@ -61,6 +70,7 @@ export default defineComponent({
       accountRules,
       uploadBanner,
       deleteImage,
+      deleteImagesStoriess
     };
   },
   emits: [
@@ -71,5 +81,7 @@ export default defineComponent({
     'selectedFile',
     'deleteBanner',
     'openDialogUploadEmbed',
+    'deleteImagesStories',
+    'deleteStories'
   ],
 });

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

@@ -130,12 +130,18 @@
           <q-carousel v-model="slideStory" animated arrows navigation infinite>
             <q-carousel-slide
               v-for="(story, storyIdx) in stories"
-              :key="storyIdx"
+              :key="stories.length"
               :name="storyIdx"
               class="q-pt-sm"
             >
               <q-card class="my-card">
                 <q-img fit="contain" :src="story.imageUrl" />
+                <q-icon
+                  name="mdi-close-circle"
+                  color="red"
+                  style="position: absolute; right: 0; font-size: 24px"
+                  @click="deleteImagesStoriess(story, storyIdx)"
+                ></q-icon>
                 <q-input
                   type="textarea"
                   :model-value="story.content"
@@ -159,26 +165,6 @@
         </div>
       </div>
     </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>
 </template>
 

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

@@ -66,7 +66,6 @@
             <VabAccount
               v-model:account="account"
               v-model:short-description="shortDescription"
-              v-model:content="stories[0].content"
               v-model:format-schedules="formatSchedules"
               @selectedFile="selectedFile"
               @deleteBanner="banners.splice($event, 1)"
@@ -74,6 +73,8 @@
               :social-embedded="socialEmbedded"
               :banners="banners"
               :stories="stories"
+              @deleteImagesStories="deleteImagesStories($event)"
+              @deleteStories="DeleteItemStories"
             ></VabAccount>
           </q-tab-panel>
           <q-tab-panel name="bankAccount">

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

@@ -39,6 +39,9 @@ export type AvatarType = {
   file?: File;
   url?: string | null;
 };
+// export type Story = {
+//   story?:object | 
+// };
 export default defineComponent({
   components: {
     PersonalInformation,
@@ -375,7 +378,22 @@ export default defineComponent({
     };
    const deleteAvatar=()=>{
       avatar.value = null
-    }
+      
+    };
+    const deleteImagesStories=(value:number)=>{
+      console.log(value,'deleteImagesStories');
+      console.log(stories.value);
+    };
+    const DeleteItemStories=(value:StoriesType)=>{
+      for(let i=0;i<stories.value.length;i++){
+        if(stories.value[i].id == value.id){
+          console.log(1);
+          stories.value.splice(Number(stories.value[i]),1)
+        }
+      }
+      console.log(stories.value);
+    };
+   
     onMounted(() => {
       void getInformationArtist();
       void getFieldOptions();
@@ -457,7 +475,9 @@ export default defineComponent({
       rowDataAccBank,
       avatar,
       setAvatar,
-      deleteAvatar
+      deleteAvatar,
+     deleteImagesStories,
+      DeleteItemStories
     };
   },
 });