Implement checklist item swaps

bourgeoisor · May 25, 2022 · 3097839 · 3097839
1 parent cc19b34
commit 3097839
Show file tree

Hide file tree

Showing 4 changed files with 168 additions and 37 deletions.
diff --git a/src/assets/news.json b/src/assets/news.json
@@ -13,8 +13,14 @@
       "start": 1653991200
     }
   ],
-  "latestID": 220313,
+  "latestID": 220525,
   "news": [
+    {
+      "ID": 220525,
+      "title": "Checklist customization",
+      "published": "May 25, 2022",
+      "content": "Hi all! It's been a (very) long time coming, but I've just published a few additional QoL features and tweaks for the checklists, including the long-awaited feature of being able to sort / move checklist items around! Try it out and let me know what you think! You can move checklist items by clicking the green 'Customize' button and drag-and-dropping items around."
+    },
     {
       "ID": 220313,
       "title": "Implementation of accounts system",

diff --git a/src/components/ChecklistItem.vue b/src/components/ChecklistItem.vue
@@ -1,41 +1,50 @@
 <template>
-  <label
-    v-if="!itemCopy.hidden && !showHidden"
-    class="list-group-item list-group-item-action d-flex justify-content-between align-items-center user-select-none"
+  <li
+    v-if="showHidden || (!itemCopy.hidden && !showHidden)"
+    class="list-group-item list-group-item-action"
+    :class="{ dragHovered: dragHovered }"
   >
-    <span>
-      <input
-        v-if="!showHidden && this.$store.getters.hasCharacter"
-        v-model="itemCopy.checked"
-        :class="{ 'checkbox-checked': itemCopy.checked }"
-        class="form-check-input"
-        type="checkbox"
-        :id="item.name"
-        @change="check"
-      />
-      &nbsp;&nbsp;<span :class="{ 'checklist-checked': itemCopy.checked }">{{ item.name }}</span>
-    </span>
-  </label>
-  <span v-if="showHidden" class="list-group-item d-flex justify-content-between align-items-center">
-    <span :class="{ 'text-muted': itemCopy.hidden }" class="user-select-none">
-      {{ item.name }}
-    </span>
-    <span v-if="showHidden">
-      <a v-if="item.custom" class="bi-trash text-danger cursor-pointer tt" @click="remove">
-        <span class="tt-text">Remove</span>
-      </a>
-      <a
-        v-else-if="itemCopy.hidden"
-        class="bi-eye-slash text-secondary cursor-pointer tt"
-        @click="hid"
-      >
-        <span class="tt-text">Show</span>
-      </a>
-      <a v-else-if="!itemCopy.hidden" class="bi-eye text-success cursor-pointer tt" @click="hid">
-        <span class="tt-text">Hide</span>
-      </a>
+    <label
+      v-if="!itemCopy.hidden && !showHidden"
+      class="d-flex justify-content-between align-items-center user-select-none"
+    >
+      <span>
+        <input
+          v-if="!showHidden && this.$store.getters.hasCharacter"
+          v-model="itemCopy.checked"
+          :class="{ 'checkbox-checked': itemCopy.checked }"
+          class="form-check-input"
+          type="checkbox"
+          :id="item.name"
+          @change="check"
+        />
+        &nbsp;&nbsp;<span :class="{ 'checklist-checked': itemCopy.checked }">{{ item.name }}</span>
+        <!-- <br /><small class="text-muted">Token and gear coffer lockout for the Savage raid</small> -->
+      </span>
+    </label>
+
+    <span v-if="showHidden" class="d-flex justify-content-between align-items-center">
+      <span :class="{ 'text-muted': itemCopy.hidden }" class="user-select-none">
+        <i class="bi bi-grip-horizontal cursor-grab" title="Drag to reorder"></i> &nbsp;
+        {{ item.name }}
+      </span>
+      <span v-if="showHidden">
+        <a v-if="item.custom" class="bi-trash text-danger cursor-pointer tt" @click="remove">
+          <span class="tt-text">Remove</span>
+        </a>
+        <a
+          v-else-if="itemCopy.hidden"
+          class="bi-eye-slash text-secondary cursor-pointer tt"
+          @click="hid"
+        >
+          <span class="tt-text">Show</span>
+        </a>
+        <a v-else-if="!itemCopy.hidden" class="bi-eye text-success cursor-pointer tt" @click="hid">
+          <span class="tt-text">Hide</span>
+        </a>
+      </span>
     </span>
-  </span>
+  </li>
 </template>
 
 <style lang="scss">
@@ -45,6 +54,14 @@
   text-decoration-thickness: 2px;
 }
 
+.dragHovered {
+  border-top: 2px solid #41b883 !important;
+}
+
+.cursor-grab {
+  cursor: grab;
+}
+
 .night {
   .form-check-input.checkbox-checked[type="checkbox"] {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23198754' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
@@ -82,6 +99,7 @@ export default {
     item: Object,
     type: String,
     showHidden: Boolean,
+    dragHovered: Boolean,
   },
   watch: {
     item() {

diff --git a/src/utilities/checklist.js b/src/utilities/checklist.js
@@ -1,4 +1,5 @@
 import db from "@/assets/db.json";
+import store from "../store";
 
 function injectWeeklyChecklist(payload) {
   let weeklyChecklist = [...payload];
@@ -88,4 +89,61 @@ function injectDailyChecklist(payload) {
   return dailyChecklist;
 }
 
-export { injectWeeklyChecklist, injectDailyChecklist };
+function swapChecklistItems(fromName, toName) {
+  let adhocChecklist = [...store.getters.checklistAdhocs];
+  let weeklyChecklist = [...store.getters.checklistWeeklies];
+  let dailyChecklist = [...store.getters.checklistDailies];
+
+  let fromObj = null;
+
+  for (let i = 0; i < adhocChecklist.length; i++) {
+    if (adhocChecklist[i].name == fromName) {
+      fromObj = adhocChecklist[i];
+      adhocChecklist.splice(i, 1);
+      store.commit("setChecklistAdhocs", adhocChecklist);
+      break;
+    }
+  }
+  for (let i = 0; i < weeklyChecklist.length; i++) {
+    if (weeklyChecklist[i].name == fromName) {
+      fromObj = weeklyChecklist[i];
+      weeklyChecklist.splice(i, 1);
+      store.commit("setChecklistWeeklies", weeklyChecklist);
+      break;
+    }
+  }
+  for (let i = 0; i < dailyChecklist.length; i++) {
+    if (dailyChecklist[i].name == fromName) {
+      fromObj = dailyChecklist[i];
+      dailyChecklist.splice(i, 1);
+      store.commit("setChecklistDailies", dailyChecklist);
+      break;
+    }
+  }
+
+  if (fromObj == null) return;
+
+  for (let i = 0; i < adhocChecklist.length; i++) {
+    if (adhocChecklist[i].name == toName) {
+      adhocChecklist.splice(i, 0, fromObj);
+      store.commit("setChecklistAdhocs", adhocChecklist);
+      break;
+    }
+  }
+  for (let i = 0; i < weeklyChecklist.length; i++) {
+    if (weeklyChecklist[i].name == toName) {
+      weeklyChecklist.splice(i, 0, fromObj);
+      store.commit("setChecklistWeeklies", weeklyChecklist);
+      break;
+    }
+  }
+  for (let i = 0; i < dailyChecklist.length; i++) {
+    if (dailyChecklist[i].name == toName) {
+      dailyChecklist.splice(i, 0, fromObj);
+      store.commit("setChecklistDailies", dailyChecklist);
+      break;
+    }
+  }
+}
+
+export { injectWeeklyChecklist, injectDailyChecklist, swapChecklistItems };
diff --git a/src/views/Checklist.vue b/src/views/Checklist.vue
@@ -64,6 +64,15 @@
             :item="item"
             type="weekly"
             :showHidden="showHidden"
+            :draggable="showHidden"
+            @dragstart="startDrag($event, item)"
+            @dragend="endDrag()"
+            @dragleave="endDrag()"
+            @drop="onDrop($event, item)"
+            @dragover="onDragOver($event, item)"
+            @dragover.prevent
+            @dragenter.prevent
+            :dragHovered="item.name == this.draggedOverName"
           />
         </ul>
         <br />
@@ -98,6 +107,15 @@
             :item="item"
             type="daily"
             :showHidden="showHidden"
+            :draggable="showHidden"
+            @dragstart="startDrag($event, item)"
+            @dragend="endDrag()"
+            @dragleave="endDrag()"
+            @drop="onDrop($event, item)"
+            @dragover="onDragOver($event, item)"
+            @dragover.prevent
+            @dragenter.prevent
+            :dragHovered="item.name == this.draggedOverName"
           />
         </ul>
         <br />
@@ -140,6 +158,15 @@
             :item="item"
             type="adhoc"
             :showHidden="showHidden"
+            :draggable="showHidden"
+            @dragstart="startDrag($event, item)"
+            @dragend="endDrag()"
+            @dragleave="endDrag()"
+            @drop="onDrop($event, item)"
+            @dragover="onDragOver($event, item)"
+            @dragover.prevent
+            @dragenter.prevent
+            :dragHovered="item.name == this.draggedOverName"
           />
         </ul>
         <br />
@@ -152,6 +179,7 @@
 import AlertMsg from "@/components/AlertMsg.vue";
 import ChecklistItem from "@/components/ChecklistItem.vue";
 import { updateChecklist } from "@/utilities/backend.js";
+import { swapChecklistItems } from "@/utilities/checklist.js";
 
 export default {
   name: "ChecklistView",
@@ -163,6 +191,7 @@ export default {
       customWeekly: "",
       customDaily: "",
       customAdhoc: "",
+      draggedOverName: "",
     };
   },
   components: {
@@ -304,6 +333,26 @@ export default {
       let characterID = this.$store.getters.lodestoneData.Character.ID;
       updateChecklist(characterID, this.$store.getters.checklistData);
     },
+    startDrag(evt, item) {
+      evt.dataTransfer.dropEffect = "move";
+      evt.dataTransfer.effectAllowed = "move";
+      evt.dataTransfer.setData("itemName", item.name);
+    },
+    endDrag() {
+      this.draggedOverName = "";
+    },
+    onDrop(evt, item) {
+      let fromName = evt.dataTransfer.getData("itemName");
+      let toName = item.name;
+      swapChecklistItems(fromName, toName);
+
+      this.draggedOverName = "";
+      let characterID = this.$store.getters.lodestoneData.Character.ID;
+      updateChecklist(characterID, this.$store.getters.checklistData);
+    },
+    onDragOver(evt, item) {
+      this.draggedOverName = item.name;
+    },
   },
 };
 </script>