From 3af452878820f694167b4747e2be43a77a9a5d1d Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Wed, 14 Jun 2023 22:34:17 +0200
Subject: [PATCH] Fixed drag and drop of characters between parties

---
 app/imports/api/parenting/organizeMethods.js  |  37 ++--
 .../creatureList/CreatureListTile.vue         | 164 +++++++++++++-----
 2 files changed, 143 insertions(+), 58 deletions(-)

diff --git a/app/imports/api/parenting/organizeMethods.js b/app/imports/api/parenting/organizeMethods.js
index 88500085..54d5f1ba 100644
--- a/app/imports/api/parenting/organizeMethods.js
+++ b/app/imports/api/parenting/organizeMethods.js
@@ -23,13 +23,20 @@ const organizeDoc = new ValidatedMethod({
       type: Boolean,
       optional: true,
     },
+    skipClient: {
+      type: Boolean,
+      optional: true,
+    },
   }).validator(),
   mixins: [RateLimiterMixin],
   rateLimit: {
     numRequests: 5,
     timeInterval: 5000,
   },
-  run({docRef, parentRef, order, skipRecompute}) {
+  run({ docRef, parentRef, order, skipRecompute, skipClient }) {
+    if (skipClient && this.isSimulation) {
+      return;
+    }
     let doc = fetchDocByRef(docRef);
     let collection = getCollectionByName(docRef.collection);
     // The user must be able to edit both the doc and its parent to move it
@@ -39,23 +46,23 @@ const organizeDoc = new ValidatedMethod({
     assertDocEditPermission(parent, this.userId);
 
     // Change the doc's parent
-    updateParent({docRef, parentRef});
+    updateParent({ docRef, parentRef });
     // Change the doc's order to be a half step ahead of its target location
-    collection.update(doc._id, {$set: {order}}, {selector: {type: 'any'}});
+    collection.update(doc._id, { $set: { order } }, { selector: { type: 'any' } });
 
     // Reorder both ancestors' documents
     let oldAncestorId = doc.ancestors[0].id;
-    reorderDocs({collection, ancestorId: oldAncestorId});
+    reorderDocs({ collection, ancestorId: oldAncestorId });
 
     let newAncestorId = getRootId(parent);
-    if (newAncestorId !== oldAncestorId){
-      reorderDocs({collection, ancestorId: newAncestorId});
+    if (newAncestorId !== oldAncestorId) {
+      reorderDocs({ collection, ancestorId: newAncestorId });
     }
 
     // Figure out which creatures need to be recalculated after this move
     let docCreatures = getCreatureAncestors(doc);
     let parentCreatures = getCreatureAncestors(parent);
-    if (!skipRecompute){
+    if (!skipRecompute) {
       let creaturesToRecompute = union(docCreatures, parentCreatures);
       // Mark the creatures for recompute
       Creatures.update({
@@ -81,10 +88,10 @@ const reorderDoc = new ValidatedMethod({
     numRequests: 5,
     timeInterval: 5000,
   },
-  run({docRef, order}) {
+  run({ docRef, order }) {
     let doc = fetchDocByRef(docRef);
     assertDocEditPermission(doc, this.userId);
-    safeUpdateDocOrder({docRef, order});
+    safeUpdateDocOrder({ docRef, order });
     // Recompute the affected creatures
     const ancestors = getCreatureAncestors(doc);
     if (ancestors.length) {
@@ -97,22 +104,22 @@ const reorderDoc = new ValidatedMethod({
   },
 });
 
-function getRootId(doc){
-  if (doc.ancestors && doc.ancestors.length && doc.ancestors[0]){
+function getRootId(doc) {
+  if (doc.ancestors && doc.ancestors.length && doc.ancestors[0]) {
     return doc.ancestors[0].id;
   } else {
     return doc._id;
   }
 }
 
-function getCreatureAncestors(doc){
+function getCreatureAncestors(doc) {
   let ids = [];
-  if(doc.type === 'pc' || doc.type === 'npc' || doc.type === 'monster'){
+  if (doc.type === 'pc' || doc.type === 'npc' || doc.type === 'monster') {
     ids.push(doc._id);
   }
-  if (doc.ancestors){
+  if (doc.ancestors) {
     doc.ancestors.forEach(ancestorRef => {
-      if (ancestorRef.collection === 'creatures'){
+      if (ancestorRef.collection === 'creatures') {
         ids.push(ancestorRef.id);
       }
     });
diff --git a/app/imports/client/ui/creature/creatureList/CreatureListTile.vue b/app/imports/client/ui/creature/creatureList/CreatureListTile.vue
index 48c19bea..8757813c 100644
--- a/app/imports/client/ui/creature/creatureList/CreatureListTile.vue
+++ b/app/imports/client/ui/creature/creatureList/CreatureListTile.vue
@@ -2,59 +2,78 @@
   lang="html"
   functional
 >
-  <v-list-item
-    v-bind="$attrs"
-    :class="isSelected && 'primary--text v-list-item--active'"
-    :dense="dense"
-    v-on="selection ? { click() {$emit('click')} } : {}"
+  <draggable
+    v-model="dataItems"
+    :group="'item-list'"
+    :animation="200"
+    :sort="false"
+    ghost-class="item-to-creature-ghost"
+    draggable=".no-real-items"
+    style="position: relative;"
+    @change="dropItem"
   >
-    <v-list-item-avatar
-      :color="isSelected ? 'red darken-1' : model.color || 'grey'"
-      :size="dense ? 30 : undefined"
-      class="white--text"
-      style="transition: background 0.3s;"
+    <v-list-item
+      slot="header"
+      v-bind="$attrs"
+      :class="{
+        'primary--text v-list-item--active': isSelected,
+        'item-to-creature-drag-over': dragover,
+      }"
+      :dense="dense"
+      v-on="selection ? { click() {$emit('click')} } : {}"
     >
-      <v-fade-transition leave-absolute>
-        <v-icon v-if="isSelected">
-          mdi-check
-        </v-icon>
-        <img
-          v-else-if="model.avatarPicture"
-          :src="model.avatarPicture"
-          :alt="model.name"
-        >
-        <template v-else>
-          <span>
-            {{ model.initial }}
-          </span>
-        </template>
-      </v-fade-transition>
-    </v-list-item-avatar>
-    <v-list-item-content>
-      <v-list-item-title>
-        {{ model.name }}
-      </v-list-item-title>
-      <v-list-item-subtitle v-if="!dense">
-        {{ model.alignment }} {{ model.gender }} {{ model.race }}
-      </v-list-item-subtitle>
-    </v-list-item-content>
-    <v-list-item-action v-if="!dense">
-      <shared-icon :model="model" />
-    </v-list-item-action>
-    <v-list-item-action v-if="!selection && !dense">
-      <drag-handle
-        style="height: 100%; width: 40px;"
-      />
-    </v-list-item-action>
-  </v-list-item>
+      <v-list-item-avatar
+        :color="isSelected ? 'red darken-1' : model.color || 'grey'"
+        :size="dense ? 30 : undefined"
+        class="white--text"
+        style="transition: background 0.3s;"
+      >
+        <v-fade-transition leave-absolute>
+          <v-icon v-if="isSelected">
+            mdi-check
+          </v-icon>
+          <img
+            v-else-if="model.avatarPicture"
+            :src="model.avatarPicture"
+            :alt="model.name"
+          >
+          <template v-else>
+            <span>
+              {{ model.initial }}
+            </span>
+          </template>
+        </v-fade-transition>
+      </v-list-item-avatar>
+      <v-list-item-content>
+        <v-list-item-title>
+          {{ model.name }}
+        </v-list-item-title>
+        <v-list-item-subtitle v-if="!dense">
+          {{ model.alignment }} {{ model.gender }} {{ model.race }}
+        </v-list-item-subtitle>
+      </v-list-item-content>
+      <v-list-item-action v-if="!dense">
+        <shared-icon :model="model" />
+      </v-list-item-action>
+      <v-list-item-action v-if="!selection && !dense">
+        <drag-handle
+          style="height: 100%; width: 40px;"
+        />
+      </v-list-item-action>
+    </v-list-item>
+  </draggable>
 </template>
 
 <script lang="js">
 import SharedIcon from '/imports/client/ui/components/SharedIcon.vue';
+import draggable from 'vuedraggable';
+import { organizeDoc } from '/imports/api/parenting/organizeMethods.js';
+import { snackbar } from '/imports/client/ui/components/snackbars/SnackbarQueue.js';
 
 export default {
   components: {
     SharedIcon,
+    draggable,
   },
   props: {
     model: {
@@ -64,6 +83,65 @@ export default {
     selection: Boolean,
     isSelected: Boolean,
     dense: Boolean,
+  },
+  data() {
+    return {
+      dataItems: [],
+      dragover: false, 
+    };
+  },
+  methods: {
+    dropItem({ added }) {
+      const item = added?.element;
+      if (!item?._id) return;
+      const docRef = { collection: 'creatureProperties', id: item._id };
+
+      // Create the undo function
+      const oldOrder = item.order;
+      const oldParent = item.parent;
+      const undo = () => organizeDoc.call({
+        docRef,
+        parentRef: oldParent,
+        order: (oldOrder || 0) - 0.5,
+        skipClient: true, // The client no longer has the doc subscribed, so we can't simulate
+      }, (error) => {
+        if (error) {
+          console.error(error);
+          snackbar({ text: error.reason || error.message || error.toString() });
+        }
+      });
+
+      // Move the doc
+      organizeDoc.call({
+        docRef,
+        parentRef: { collection: 'creatures', id: this.model._id },
+        order: -0.5,
+      }, (error) => {
+        if (error) {
+          console.error(error);
+          snackbar({ text: error.reason || error.message || error.toString() });
+        } else {
+          snackbar({
+            text: `\u{1F36A} Moved ${item.name || 'item'} to ${this.model.name || 'another character'}`,
+            callbackName: 'undo',
+            callback: undo,
+          });
+        }
+      });
+    },
   }
 }
 </script>
+
+<style lang="css">
+  .item-to-creature-ghost {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+  .item-to-creature-ghost .v-btn {
+    display: none;
+  }
+</style>