fix: fix delete effect

Solratic · Apr 28, 2023 · aaf435f · aaf435f
1 parent 680cdd7
commit aaf435f
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/src/components/VUpload/PanelResult.vue b/src/components/VUpload/PanelResult.vue
@@ -9,7 +9,7 @@
           <span v-else>List of files that you upload will appear here.</span>
         </div>
         <TransitionGroup name="list" tag="div">
-          <div class="content-file--item" v-for="(item, index) in files" :key="index">
+          <div class="content-file--item" v-for="(item, index) in files" :key="item.id">
             <div class="item-content">
               <div class="item-icon">
                 <i-ri-file-list-3-line class="icon-color" />
@@ -25,7 +25,7 @@
                 <a title="Download" @click="item.cid ? download(item) : {}">
                   <i-mdi-download class="icon-color" />
                 </a>
-                <a title="Delete" @click="onDeleteResult(index)">
+                <a title="Delete" @click="onDeleteResult(item)">
                   <i-ri-delete-back-2-line class="icon-color" />
                 </a>
               </div>
@@ -105,8 +105,9 @@ export default {
       search.value = ($event.target as HTMLInputElement).value;
     }
 
-    const onDeleteResult = (index: number) => {
-      store.deleteResult(index);
+    const onDeleteResult = (item: FileDetail) => {
+      if (!item.id) return;
+      store.deleteResult(item.id);
       notyf.success("Deleted!");
     }
 

diff --git a/src/components/VUpload/PanelUpload.vue b/src/components/VUpload/PanelUpload.vue
@@ -15,10 +15,12 @@
 
           <span v-if="folderOnly">Drop folders here or click to select folders.</span>
           <span v-else>Drop files here or click to select files.</span>
-          <div class="dropzone-is-loading" :class="{ active: (fileCount > 0) }">
+          <div class="dropzone-is-loading" :class="{ active: (fileCount > 0 || isUploading) }">
             <div class="dropzone-loading--bar"></div>
           </div>
-          <span v-show="(fileCount > 0)">{{ (fileCount - finished) }} of {{ fileCount }} files being transfered.</span>
+          <span v-show="fileCount === 0 && isUploading"> Preparing </span>
+          <span v-show="(fileCount > 0 && isUploading)">{{ (fileCount - finished) }} of {{ fileCount }} files being
+            transfered.</span>
         </div>
 
         <div class="dropzone-details">
@@ -42,6 +44,7 @@ import { Sharex__factory } from "@src/types/index";
 import { ethers } from "ethers"
 import { PromiseOrValue } from "@src/types/common";
 import { Notyf } from "notyf";
+import { v4 as uuidv4 } from 'uuid';
 
 export default {
   name: "PanelUpload",
@@ -57,6 +60,7 @@ export default {
     const store = useStore();
     const walletStore = useWallet();
 
+
     const onDropHandler = ($event: DragEvent) => {
       if (isUploading.value) return false;
 
@@ -117,6 +121,7 @@ export default {
       } else {
         finished.value++;
       }
+      result.data.id = uuidv4();
       return result;
     }
 
@@ -171,6 +176,7 @@ export default {
 
     return {
       folderOnly,
+      isUploading,
       finished,
       fileRef,
       fileCount,

diff --git a/src/services/types.ts b/src/services/types.ts
@@ -6,6 +6,7 @@ export interface FileDetail {
         size: number;
         created_at: number;
     };
+    id: string;
     secret?: string;
 }
 

diff --git a/src/store/index.ts b/src/store/index.ts
@@ -34,8 +34,8 @@ export const useStore = defineStore({
       db.data!.results = [...this.results];
       db.write();
     },
-    deleteResult(this: StoreState, idx: number) {
-      this.results.splice(idx, 1);
+    deleteResult(this: StoreState, _id: string) {
+      this.results = this.results.filter(({ id }) => id !== _id);
       db.data!.results = [...this.results];
       db.write();
     },