SCRIPT: Does not update when selecting date #488 (#494)

* initial commit * sonar issue resolved
DaftDoris · Aug 17, 2022 · 71ce031 · 71ce031
1 parent 54a0890
commit 71ce031
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 117 deletions.
diff --git a/src/components/Script.vue b/src/components/Script.vue
@@ -12,7 +12,7 @@
       <span v-for="(itemIn, indexNew) in itemMain.params" :key="indexNew">
         <div @dragend="dropped($event, indexNew)" draggable="true">
           <Input v-model="itemIn.label" :placeholder="`Enter things into ${slotno}...`"
-            @keydown.enter.exact.prevent="save" />
+            @change="updateClips()" />
           <ClipField class="text-base" :index="indexNew" :clipField="itemIn?.clipField"
             @delete="deleteClip(itemMain.id)" @change="updateClips()"></ClipField>
         </div>
@@ -42,6 +42,12 @@ const props = defineProps({
   clipFieldData: {
     type: Object,
     default: null,
+  }, 
+  date: {
+    type: String,
+    default: new Date(new Date().setDate(new Date().getDate() + 1))
+      .toISOString()
+      .split("T")[0],
   },
 })
 const mainArray = props.clipFieldData
@@ -60,19 +66,20 @@ const updateClipField = () => {
 }
 
 const updateClips = () => {
-  itemStore.setItemToSlot(props.clipFieldData, props.podcastId)
+  console.log(window.location)
+  itemStore.setItemToSlot(props.clipFieldData, props.podcastId, props.date)
 }
 const dropped = (e: DragEvent, index: number) => {
   if (e.offsetY < -20) {
-    itemStore.moveClipField(index, "top", props.podcastId, props.slotno)
+    itemStore.moveClipField(index, "top", props.podcastId, props.slotno, props.date)
     console.log("top", index)
   } else {
-    itemStore.moveClipField(index, "bottom", props.podcastId, props.slotno)
+    itemStore.moveClipField(index, "bottom", props.podcastId, props.slotno, props.date)
     console.log("bottom", index)
   }
 }
 const deleteClip = (id: string) => {
-  itemStore.deleteScriptClipField(id, props.podcastId)
+  itemStore.deleteScriptClipField(id, props.podcastId, props.date)
 }
 
 

diff --git a/src/pages/Home.vue b/src/pages/Home.vue
@@ -86,7 +86,7 @@
         </div>
         <div v-for="slot in Array.from({ length: 7 }, (_, i) => 7 - i)" :key="slot">
           <Scripts class="my-5" :slotno="slot" :clipFieldData="itemStore.getScriptList(slot)" :podcastId="podcastId"
-            @save="events.onClickScriptsSave" @change="checkUpdate()" />
+            @save="events.onClickScriptsSave" @change="checkUpdate()" :date="date" />
         </div>
       </div>
     </div>
@@ -331,8 +331,7 @@ const dragged = async (x: number, y: number, item: Item) => {
       },
     }]
 
-    await itemStore.addScriptItem(data, props.podcastId, item.slot)
-    await itemStore.getScriptListData(props.podcastId)
+    await itemStore.addScriptItem(data, props.podcastId, item.slot, docname.value)
 
     await itemStore.removeItem(item, props.podcastId, props.date)
   } else {
@@ -376,7 +375,6 @@ const moveArrayItemToNewIndex = (
 
 const connect = () => {
   if (initiated.value) { itemStore.connect(props.podcastId, docname.value) }
-  itemStore.getScriptListData(props.podcastId)
 }
 watch(
   () => route.params,
@@ -431,7 +429,7 @@ const events = {
   },
   onClickScriptsSave(params: any, slotno: string) {
     let data: any = { clipField: params }
-    itemStore.addScriptItem(data, props.podcastId, slotno)
+    itemStore.addScriptItem(data, props.podcastId, slotno, docname.value)
   },
   onUpdateSaveDoc() {
     itemStore.saveData(props.podcastId, docname.value)

diff --git a/src/store/item.ts b/src/store/item.ts
@@ -17,8 +17,8 @@ import { db } from "@/plugins/firebase"
 
 interface State {
   itemList: Item[]
-  slotTitleList: string[],
-  slotList: string[],
+  slotTitleList: string[]
+  slotList: string[]
   scriptItemList: any[]
   title: string
   special_day: string
@@ -44,41 +44,32 @@ export const useItemStore = defineStore("item", {
       this.itemList.push(item)
       this.saveData(podcastname, docname)
     },
-    async addScriptItem(params: Item, podCastName: string, slot: any) {
+    async addScriptItem(
+      params: Item,
+      podCastName: string,
+      slot: any,
+      docname: string,
+    ) {
       const id = nanoid()
       const item: any = { params, slot, id }
-      const newDocName: string = JSON.stringify(item)
       this.scriptItemList.push(item)
-      this.saveScriptData(podCastName, newDocName)
+      this.saveData(podCastName, docname)
     },
 
-    async setItemToSlot(item: any, podcastname: string) {
+    async setItemToSlot(item: any, podcastname: string, docname: string) {
       const slot2: any[] = []
-      this.scriptItemList.forEach(element => {
-        if (element.id === item.id) { element = item }
+      this.scriptItemList.forEach((element) => {
+        if (element.id === item.id) {
+          element = item
+        }
         slot2.push(element)
-      });
+      })
       this.scriptItemList = slot2
-      this.saveDataUpdate(podcastname, 'script')
-    },
-    async saveDataUpdate(podcastname: string, docname: string) {
-      const docRef = doc(collection(db, podcastname), docname)
-      try {
-        await updateDoc(docRef, {
-          items: this.scriptItemList,
-        })
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      } catch (e: any) {
-        if (e.code === "not-found" && e.name === "FirebaseError") {
-          await setDoc(docRef, {
-            items: this.scriptItemList,
-          })
-        } else throw e
-      }
+      this.saveData(podcastname, docname)
     },
 
     getSlotItem() {
-      return this.slotList.filter(item => item !== null);
+      return this.slotList.filter((item) => item !== null)
     },
     async updateSlotItem(item: [], podcastname: string, docname: string) {
       this.itemList = item
@@ -136,6 +127,7 @@ export const useItemStore = defineStore("item", {
         return await updateDoc(docRef, {
           items: this.itemList,
           slotTitles: this.slotTitleList,
+          script: this.scriptItemList,
         })
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } catch (e: any) {
@@ -149,116 +141,75 @@ export const useItemStore = defineStore("item", {
     },
 
     async saveInputSpecialDayData(podcastname: string, data: string) {
-      const docRef = doc(collection(db, podcastname), 'title')
+      const docRef = doc(collection(db, podcastname), "title")
       try {
         await updateDoc(docRef, {
-          special_day: data
+          special_day: data,
         })
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } catch (e: any) {
         if (e.code === "not-found" && e.name === "FirebaseError") {
           await setDoc(docRef, {
-            special_day: data
+            special_day: data,
           })
         } else throw e
       }
     },
     async saveInputTitleData(podcastname: string, data: string) {
-      const docRef = doc(collection(db, podcastname), 'title')
+      const docRef = doc(collection(db, podcastname), "title")
       try {
         await updateDoc(docRef, {
-          title: data
+          title: data,
         })
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } catch (e: any) {
         if (e.code === "not-found" && e.name === "FirebaseError") {
           await setDoc(docRef, {
-            title: data
+            title: data,
           })
         } else throw e
       }
     },
     async saveInputBirthdaysData(podcastname: string, data: string) {
-      const docRef = doc(collection(db, podcastname), 'title')
+      const docRef = doc(collection(db, podcastname), "title")
       try {
         await updateDoc(docRef, {
-          birthdays: data
+          birthdays: data,
         })
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } catch (e: any) {
         if (e.code === "not-found" && e.name === "FirebaseError") {
           await setDoc(docRef, {
-            birthdays: data
+            birthdays: data,
           })
         } else throw e
       }
     },
-    async saveScriptData(podcastname: string, docname: string) {
-      const docRef = doc(collection(db, podcastname), 'script')
-      try {
-        return await updateDoc(docRef, {
-          items: this.scriptItemList
-        })
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      } catch (e: any) {
-        if (e.code === "not-found" && e.name === "FirebaseError") {
-          return await setDoc(docRef, {
-            items: this.scriptItemList,
-          })
-        } else throw e
-      }
-
-    },
-    async getScriptListData(podcastId: string) {
-      const docRef = doc(db, podcastId, "script");
-      onSnapshot(doc(db, podcastId, "script"), (doc) => {
-        if (doc.data()) {
-          this.scriptItemList = (doc.data()?.items ?? []) as Item[]
-          // console.log('Document Data ==>', this.scriptItemList)
-          return doc.data()
-        } else {
-          this.scriptItemList = []
-        }
-      })
-
-    },
-    async moveClipField(indexFrom: number, position: string, podcastname: string, slot: number) {
+    async moveClipField(
+      indexFrom: number,
+      position: string,
+      podcastname: string,
+      slot: number,
+      docname: string
+    ) {
       let sortArray = this.scriptItemList.filter((item) => item.slot === slot)
       if (position == "top") {
-        sortArray = arrayMoveImmutable(
-          sortArray,
-          indexFrom,
-          indexFrom - 1,
-        )
-        console.log(sortArray, 'topArray')
+        sortArray = arrayMoveImmutable(sortArray, indexFrom, indexFrom - 1)
+        console.log(sortArray, "topArray")
       } else {
-        sortArray = arrayMoveImmutable(
-          sortArray,
-          indexFrom,
-          indexFrom + 1,
-        )
-        console.log(sortArray, 'bottomArray')
-
+        sortArray = arrayMoveImmutable(sortArray, indexFrom, indexFrom + 1)
+        console.log(sortArray, "bottomArray")
       }
-      const filteredArray = this.scriptItemList.filter((item) => item.slot != slot)
+      const filteredArray = this.scriptItemList.filter(
+        (item) => item.slot != slot,
+      )
       sortArray.map((item) => {
         filteredArray.push(item)
       })
-      const docRef = doc(collection(db, podcastname), 'script')
-      try {
-        return await updateDoc(docRef, {
-          items: filteredArray
-        })
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      } catch (e: any) {
-        if (e.code === "not-found" && e.name === "FirebaseError") {
-          await setDoc(docRef, {
-            items: filteredArray,
-          })
-        } else throw e
-      }
+      this.scriptItemList = filteredArray
+      this.saveData(podcastname, docname)
     },
-    async deleteScriptClipField(id: string, podcastname: string) {
+    async deleteScriptClipField(id: string, podcastname: string, docname: string) {
       let selectedIndex = 0
 
       this.scriptItemList.map((item, index) => {
@@ -267,29 +218,18 @@ export const useItemStore = defineStore("item", {
         }
       })
       this.scriptItemList.splice(selectedIndex, 1)
-      const docRef = doc(collection(db, podcastname), 'script')
-      try {
-        return await updateDoc(docRef, {
-          items: this.scriptItemList
-        })
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      } catch (e: any) {
-        if (e.code === "not-found" && e.name === "FirebaseError") {
-          await setDoc(docRef, {
-            items: this.scriptItemList,
-          })
-        } else throw e
-      }
+     this.saveData(podcastname, docname)
     },
     connect(podcastname: string, docname: string) {
       onSnapshot(doc(db, podcastname, docname), (doc) => {
         this.slotTitleList = (
           doc.data()?.slotTitles && doc.data()?.slotTitles.length > 0
             ? doc.data()?.slotTitles
             : Array.from({ length: 7 }, () => "") ??
-            Array.from({ length: 7 }, () => "")
+              Array.from({ length: 7 }, () => "")
         ) as string[]
         this.itemList = (doc.data()?.items ?? []) as Item[]
+        this.scriptItemList = (doc.data()?.script ?? []) as Item[]
       })
     },
   },