SCRIPT: Ability to rearrange order of stories #490 (#533)

* not done

* stable

* sonar issue fixed

src/pages/Home.vue

@@ -182,14 +182,8 @@
             />
           </span>
         </div>
-        <div
-          v-for="slot in Array.from({ length: 7 }, (_, i) => 7 - i)"
-          :key="slot"
-        >
-          <div
-            id="script-{{ slotno }}"
-            class="border relative rounded-lg border-gray-400 pt-4 mb-5"
-          >
+        <div v-for="slot in Array.from({ length: 7 }, (_, i) => 7 - i)" :key="slot">
+          <div id="script-{{ slotno }}" class="border relative rounded-lg border-gray-400 pt-4 mb-5" @dragend="droppedScript($event, slot)" draggable="true">
             <span class="pl-4">
               <SlotTitleInput
                 v-model="itemStore.getScriptSlotTitleList[slot]"
@@ -281,7 +275,13 @@ const createSlotItem = async () => {
     slotItemsNew[item.slot].items.push(item)
   })
 }
-
+const droppedScript = (e: DragEvent, slot: number) => {
+  if (e.offsetY < -20) {
+    itemStore.moveScript(slot, "top", props.podcastId, props.date)
+  } else {
+    itemStore.moveScript(slot, "bottom", props.podcastId, props.date)
+  }
+}
 const exportScript = async () => {
   createSlotItem()
   doc = new jsPDF("p", "pt", "letter")

src/store/item.ts

@@ -207,6 +207,34 @@ export const useItemStore = defineStore("item", {
       this.scriptItemList = filteredArray
       this.saveData(podcastname, docname)
     },
+    async moveScript(
+      slot: number,
+      position: string,
+      podcastname: string,
+      docname: string
+    ) {
+      if (position == "top" && slot !== 7) {
+        this.scriptItemList.map((item) => {
+          if (item.slot === slot) {
+            item.slot = item.slot + 1
+          } else if (item.slot === slot + 1) {
+            item.slot = item.slot - 1
+          }
+        })
+      } else if (slot !== 1) {
+        this.scriptItemList.map((item) => {
+          if (item.slot === slot) {
+            item.slot = item.slot - 1
+          } else if (item.slot === slot - 1) {
+            item.slot = item.slot + 1
+          }
+
+        })
+      }
+
+
+      this.saveData(podcastname, docname)
+    },
     async deleteScriptClipField(id: string, podcastname: string, docname: string) {
       let selectedIndex = 0
 
@@ -216,21 +244,21 @@ export const useItemStore = defineStore("item", {
         }
       })
       this.scriptItemList.splice(selectedIndex, 1)
-     this.saveData(podcastname, docname)
+      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.scriptSlotTitleList = (
           doc.data()?.scriptSlotTitleList && doc.data()?.scriptSlotTitleList.length > 0
             ? doc.data()?.scriptSlotTitleList
             : 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[]