From 43958a90bdc0bc3385e175b1abb3c97bb3ee3320 Mon Sep 17 00:00:00 2001
From: ThaumRystra <thaum@dicecloud.com>
Date: Sat, 9 Nov 2024 13:43:01 +0200
Subject: [PATCH] Removed drag handles from spells in spell lists Spell lists
 often have spells from many sources, and dragging spells around in a UI that
 doesn't show what you might be breaking is a foot gun.

---
 .../components/spells/SpellList.vue           | 109 ++++--------------
 .../components/spells/SpellListCard.vue       |  18 +--
 .../components/spells/SpellListTile.vue       |   8 +-
 3 files changed, 24 insertions(+), 111 deletions(-)

diff --git a/app/imports/client/ui/properties/components/spells/SpellList.vue b/app/imports/client/ui/properties/components/spells/SpellList.vue
index 4cde2381..0aaf70c7 100644
--- a/app/imports/client/ui/properties/components/spells/SpellList.vue
+++ b/app/imports/client/ui/properties/components/spells/SpellList.vue
@@ -4,48 +4,34 @@
     dense
     class="spell-list"
   >
-    <draggable
-      v-model="computedSpells"
-      style="min-height: 24px;"
-      :group="`spell-list`"
-      ghost-class="ghost"
-      draggable=".item"
-      handle=".handle"
-      :animation="200"
-      @change="change"
-    >
-      <template v-for="spell in computedSpells">
-        <v-subheader
-          v-if="spell.isSubheader"
-          :key="`${spell.level}-header`"
-          class="item"
-        >
-          {{ spell.level === 0 ? 'Cantrips' : `Level ${spell.level}` }}
-        </v-subheader>
-        <spell-list-tile
-          v-else
-          :key="spell._id"
-          class="item"
-          :disabled="context.editPermission === false"
-          :data-id="`spell-list-tile-${spell._id}`"
-          :model="spell"
-          :preparing-spells="preparingSpells"
-          @click="clickProperty(spell._id)"
-        />
-      </template>
-    </draggable>
+    <template v-for="spell in computedSpells">
+      <v-subheader
+        v-if="spell.isSubheader"
+        :key="`${spell.level}-header`"
+        class="item"
+      >
+        {{ spell.level === 0 ? 'Cantrips' : `Level ${spell.level}` }}
+      </v-subheader>
+      <spell-list-tile
+        v-else
+        :key="spell._id"
+        class="item"
+        :disabled="context.editPermission === false"
+        :data-id="`spell-list-tile-${spell._id}`"
+        :model="spell"
+        :preparing-spells="preparingSpells"
+        @click="clickProperty(spell._id)"
+      />
+    </template>
   </v-list>
 </template>
 
 <script lang="js">
-import draggable from 'vuedraggable';
 import SpellListTile from '/imports/client/ui/properties/components/spells/SpellListTile.vue';
-import { organizeDoc } from '/imports/api/parenting/organizeMethods';
 import spellsWithSubheaders from '/imports/client/ui/properties/components/spells/spellsWithSubheaders';
 
 export default {
   components: {
-    draggable,
     SpellListTile,
   },
   inject: {
@@ -56,39 +42,17 @@ export default {
       type: Array,
       default: () => [],
     },
-    parentRef: {
-      type: Object,
-      required: true,
-    },
     preparingSpells: Boolean,
   },
-  data() {
-    return {
-      dataSpells: [],
-    }
-  },
   computed: {
     levels() {
       let levels = new Set();
       this.spells.forEach(spell => levels.add(spell.level));
       return levels;
     },
-    computedSpells: {
-      get() {
-        return spellsWithSubheaders(this.dataSpells);
-      },
-      set(value) {
-        this.dataSpells = value;
-      },
-    }
-  },
-  watch: {
-    spells(value) {
-      this.dataSpells = spellsWithSubheaders(value);
-    }
-  },
-  mounted() {
-    this.dataSpells = spellsWithSubheaders(this.spells);
+    computedSpells() {
+      return spellsWithSubheaders(this.spells);
+    },
   },
   methods: {
     clickProperty(_id) {
@@ -98,35 +62,6 @@ export default {
         data: { _id },
       });
     },
-    change({ added, moved }) {
-      let event = added || moved;
-      if (event) {
-        // If this spell is now adjacent to another, set the order accordingly
-        let order;
-        let before = this.dataSpells[event.newIndex - 1];
-        let after = this.dataSpells[event.newIndex + 1];
-        if (before && before._id) {
-          order = before.order + 0.5;
-        } else if (after && after._id) {
-          order = after.order - 0.5;
-        } else {
-          order = -0.5;
-        }
-        let doc = event.element;
-        organizeDoc.callAsync({
-          docRef: {
-            id: doc._id,
-            collection: 'creatureProperties',
-          },
-          parentRef: this.parentRef,
-          order,
-        });
-      }
-    },
   }
 }
 </script>
-
-<style lang="css" scoped>
-
-</style>
diff --git a/app/imports/client/ui/properties/components/spells/SpellListCard.vue b/app/imports/client/ui/properties/components/spells/SpellListCard.vue
index 302f481b..f3e8cf45 100644
--- a/app/imports/client/ui/properties/components/spells/SpellListCard.vue
+++ b/app/imports/client/ui/properties/components/spells/SpellListCard.vue
@@ -51,24 +51,8 @@
         <v-icon>mdi-check</v-icon>
       </v-btn>
     </template>
-    <!-- Disabled because it changes the height of the card
-    <v-card-text
-      v-if="preparedError || preparingSpells"
-      :class="{'error--text' : preparedError}"
-      class="pb-0"
-    >
-      <div v-if="model.maxPrepared && model.maxPrepared.value">
-        {{ numPrepared }}/{{ model.maxPrepared.value }} spells prepared
-      </div>
-      <v-switch
-        v-model="preparingSpells"
-        label="Change prepared spells"
-      />
-    </v-card-text>
-    -->
     <spell-list
       :spells="spells"
-      :parent-ref="{id: model._id, collection: 'creatureProperties'}"
       :preparing-spells="preparingSpells"
     />
   </toolbar-card>
@@ -113,7 +97,7 @@ export default {
       return CreatureProperties.find(filter, {
         sort: {
           level: 1,
-          order: 1,
+          left: 1,
         }
       });
     },
diff --git a/app/imports/client/ui/properties/components/spells/SpellListTile.vue b/app/imports/client/ui/properties/components/spells/SpellListTile.vue
index 5a5d5740..38b8fdc6 100644
--- a/app/imports/client/ui/properties/components/spells/SpellListTile.vue
+++ b/app/imports/client/ui/properties/components/spells/SpellListTile.vue
@@ -21,7 +21,7 @@
         {{ spellComponents }}
       </v-list-item-subtitle>
     </v-list-item-content>
-    <v-list-item-action>
+    <v-list-item-action v-if="preparingSpells || showInfoButton">
       <smart-checkbox
         v-if="preparingSpells"
         :value="model.prepared || model.alwaysPrepared"
@@ -29,11 +29,6 @@
         @click.native.stop="() => {}"
         @change="setPrepared"
       />
-      <drag-handle
-        v-else-if="!hideHandle"
-        :disabled="context.editPermission === false"
-        style="height: 100%; width: 40px; cursor: move;"
-      />
       <v-btn
         v-else-if="showInfoButton"
         icon
@@ -59,7 +54,6 @@ export default {
   },
   props: {
     preparingSpells: Boolean,
-    hideHandle: Boolean,
     showInfoButton: Boolean,
     disabled: Boolean,
   },