Merge pull request #59 from glaciyan/drag-reorder

Reorder builds by dragging

package.json

@@ -1,7 +1,7 @@
 {
   "name": "gscale",
   "license": "MIT",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "scripts": {
     "pre": "npm run gen:version",
     "dev": "npm run pre && vite",
@@ -26,7 +26,8 @@
     "dexie": "^3.2.0",
     "fuse.js": "^6.4.6",
     "vue": "^3.2.16",
-    "vue-router": "^4"
+    "vue-router": "^4",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.178",

src/App.vue

@@ -14,6 +14,7 @@ import TheFooter from "./components/TheFooter.vue";
 
 <style>
 /* @import url(./assets/fonts/OpenSans.css); */
+@import url(./styles/global.less);
 @import url(./styles/transition/fade.css);
 @import url(./styles/transition/build-preview.css);
 @import url(./styles/dark.css);

src/components/ItemCardClickable.vue

@@ -22,7 +22,12 @@ const tooltip = computed(() => {
 </script>
 
 <template>
-  <div v-tooltip="tooltip" class="cursor-pointer m-1 relative select-none" @click="$emit('click', fillAmount)">
+  <div
+    v-tooltip="tooltip"
+    class="cursor-pointer m-1 relative select-none focus-visible:ring"
+    tabindex="0"
+    @click="$emit('click', fillAmount)"
+  >
     <ItemCard :itemWithAmount="item" :grayscale="done" class="!m-0" />
     <div
       :class="[

src/components/character/CharacterBuildPreview.vue

@@ -16,10 +16,19 @@ import ItemChecklist from "../ItemChecklist.vue";
 import RangeLevelDisplay from "../levelRange/display/RangeLevelDisplay.vue";
 import RangeTalentDisplay from "../levelRange/display/RangeTalentDisplay.vue";
 import Modal from "../Modal.vue";
+import HandleIcon from "../icons/HandleIcon.vue";
 
-const props = defineProps<{ character: ICharacter | ITraveler; items: ItemWithAmount[]; data: Build }>();
+const props =
+  defineProps<{ character: ICharacter | ITraveler; items: ItemWithAmount[]; data: Build; handle?: boolean }>();
 const emit = defineEmits(["deleted"]);
 
+watch(
+  () => props.data.order,
+  (value) => {
+    console.log(value);
+  }
+);
+
 //#region Deleting
 const deleteBuild = async () => {
   if (props.data.id) {
@@ -109,7 +118,12 @@ const edit = () => {
             </div>
           </div>
         </div>
-        <div class="flex bg-dark-600/70 border-t-2 border-dark-300 py-3 px-6 justify-end">
+        <div class="flex bg-dark-600/70 border-t-2 border-dark-300 py-3 px-6 items-center">
+          <div class="flex-1">
+            <div title="Drag to reorder" class="w-max">
+              <HandleIcon class="cursor-move h-5 text-light-ternary w-5 handle" />
+            </div>
+          </div>
           <EButton look="ghost" element="neutral" class="mr-2 !h-9 !text-light-ternary" @click="deleteDialog.reveal">
             Delete
           </EButton>

src/components/icons/HandleIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+  </svg>
+</template>

src/lib/offlineDatabase/db.ts

@@ -11,6 +11,7 @@ import { Talent } from "../types/Talent";
 export interface Build {
   id?: number;
   order?: number;
+  orderChanged?: number;
   completed?: Array<ItemWithAmount>;
   type: string;
   entityId: string;
@@ -53,6 +54,10 @@ export class CustomDexie extends Dexie {
             }
           });
       });
+
+    this.version(3).stores({
+      builds: "++id, order, orderChanged, *completed, type, entityId, level, normal, elemental, burst",
+    });
   }
 }
 

src/lib/util/sortingBuilds.ts

@@ -0,0 +1,9 @@
+import { Build } from "../offlineDatabase/db";
+
+export default (a: Build, b: Build) => {
+  if (a.order === b.order) {
+    return (b.orderChanged ?? 0) - (a.orderChanged ?? 0);
+  }
+
+  return (a.order ?? Infinity) - (b.order ?? Infinity);
+};

src/pages/Builds.vue

@@ -15,6 +15,8 @@ import Container from "../components/PageContainer";
 import { RouterLink } from "vue-router";
 import clearDb from "~/lib/dev/clearDb";
 import tonsOfBuilds from "~/lib/dev/tonsOfBuilds";
+import Draggable from "vuedraggable";
+import sortingBuilds from "~/lib/util/sortingBuilds";
 
 const DEV = import.meta.env.DEV;
 
@@ -23,10 +25,15 @@ const buildsReady = computed(() => buildsData.value !== undefined);
 
 const getBuilds = async () => {
   const buildsFromDb = await db.builds.where("type").equals("character").toArray();
-  buildsData.value = buildsFromDb.map((build) => {
+
+  let lastOrder = 0;
+  buildsData.value = buildsFromDb.sort(sortingBuilds).map((build) => {
     const character = repo.needCharacter(build.entityId);
     const items = totalBuildItems(character, build);
 
+    if (build.order) lastOrder = build.order;
+    else build.order = ++lastOrder;
+
     return {
       character,
       items,
@@ -64,6 +71,15 @@ const hideTotal = () => {
   scrollLock.value = false;
 };
 //#endregion
+
+const handleChange = async ({ moved }: { moved: { element: any; newIndex: number } }) => {
+  const element = toRaw(moved.element) as { character: ICharacter | ITraveler; items: ItemWithAmount[]; data: Build };
+  const timeChanged = Date.now();
+
+  console.log(`Moved ${element.character.name} to ${moved.newIndex} at ${timeChanged}`);
+
+  await db.builds.update(element.data.id!, { order: moved.newIndex, orderChanged: timeChanged });
+};
 </script>
 
 <template>
@@ -75,24 +91,35 @@ const hideTotal = () => {
     <div v-if="buildsData!.length > 0" class="flex space-x-2 mb-4">
       <GButton @click="showTotal">Show Total</GButton>
     </div>
-    <transition-group tag="div" name="build-preview" w:grid="gap-5 cols-2 <sm:cols-1" class="grid">
-      <CharacterBuildPreview
-        v-for="build in buildsData"
-        :key="build.data.id"
-        :character="build.character"
-        :items="build.items"
-        :data="build.data"
-        @deleted="onDelete"
-      />
-      <RouterLink
-        v-if="buildsData!.length < 2"
-        to="/"
-        class="border-dashed rounded-xl flex flex-col h-full border-4 border-dark-600 min-h-96 py-4 px-6 transition-colors text-light-ternary/70 block items-center justify-center hover:text-light-ternary"
-      >
-        <p class="font-bold text-xl">Add a new build</p>
-        <p class="font-bold text-xl">+</p>
-      </RouterLink>
-    </transition-group>
+    <Draggable
+      v-model="buildsData"
+      tag="transition-group"
+      :componentData="{ tag: 'div', name: 'build-preview' }"
+      class="grid gap-5 grid-cols-2 <sm:grid-cols-1"
+      :itemKey="(item: any) => item.data.id"
+      handle=".handle"
+      @change="handleChange"
+    >
+      <template #item="{ element }">
+        <CharacterBuildPreview
+          :key="element.data.id"
+          :character="element.character"
+          :items="element.items"
+          :data="element.data"
+          @deleted="onDelete"
+        />
+      </template>
+      <template #footer>
+        <RouterLink
+          v-if="buildsData!.length < 2"
+          to="/"
+          class="border-dashed rounded-xl flex flex-col h-full border-4 border-dark-600 min-h-96 py-4 px-6 transition-colors text-light-ternary/70 block items-center justify-center hover:text-light-ternary"
+        >
+          <p class="font-bold text-xl">Add a new build</p>
+          <p class="font-bold text-xl">+</p>
+        </RouterLink>
+      </template>
+    </Draggable>
   </Container>
   <teleport to="#modal">
     <PopOver

src/styles/global.less

@@ -0,0 +1,4 @@
+.sortable-ghost {
+  transition: opacity 0.3s;
+  opacity: 0.6;
+}