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.

app/imports/client/ui/properties/components/spells/SpellList.vue

@@ -4,48 +4,34 @@
     dense
     class="spell-list"
   >
-    <draggable
+    <template v-for="spell in computedSpells">
-      v-model="computedSpells"
+      <v-subheader
-      style="min-height: 24px;"
+        v-if="spell.isSubheader"
-      :group="`spell-list`"
+        :key="`${spell.level}-header`"
-      ghost-class="ghost"
+        class="item"
-      draggable=".item"
+      >
-      handle=".handle"
+        {{ spell.level === 0 ? 'Cantrips' : `Level ${spell.level}` }}
-      :animation="200"
+      </v-subheader>
-      @change="change"
+      <spell-list-tile
-    >
+        v-else
-      <template v-for="spell in computedSpells">
+        :key="spell._id"
-        <v-subheader
+        class="item"
-          v-if="spell.isSubheader"
+        :disabled="context.editPermission === false"
-          :key="`${spell.level}-header`"
+        :data-id="`spell-list-tile-${spell._id}`"
-          class="item"
+        :model="spell"
-        >
+        :preparing-spells="preparingSpells"
-          {{ spell.level === 0 ? 'Cantrips' : `Level ${spell.level}` }}
+        @click="clickProperty(spell._id)"
-        </v-subheader>
+      />
-        <spell-list-tile
+    </template>
-          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>
   </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: {
+    computedSpells() {
-      get() {
+      return spellsWithSubheaders(this.spells);
-        return spellsWithSubheaders(this.dataSpells);
+    },
-      },
-      set(value) {
-        this.dataSpells = value;
-      },
-    }
-  },
-  watch: {
-    spells(value) {
-      this.dataSpells = spellsWithSubheaders(value);
-    }
-  },
-  mounted() {
-    this.dataSpells = 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>

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,
         }
       });
     },

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,
   },