From 56f9e82326a904678b3da008a674b6b0e48c742e Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Mon, 29 Jun 2020 14:52:47 +0200
Subject: [PATCH] Improved spells tab to be more in line with the v1
 implementation

---
 .../api/creature/getActiveProperties.js       |  2 +-
 app/imports/api/properties/Spells.js          | 10 ---
 .../characterSheetTabs/InventoryTab.vue       |  2 +-
 .../characterSheetTabs/SpellsTab.vue          | 26 +++-----
 .../components/spells/SpellList.vue           | 66 +++++++++++++++++++
 .../components/spells/SpellListCard.vue       | 30 +++------
 .../components/spells/SpellListTile.vue       |  8 ---
 app/imports/ui/properties/forms/SpellForm.vue | 13 ----
 8 files changed, 86 insertions(+), 71 deletions(-)
 create mode 100644 app/imports/ui/properties/components/spells/SpellList.vue

diff --git a/app/imports/api/creature/getActiveProperties.js b/app/imports/api/creature/getActiveProperties.js
index bc954e88..3b783ea9 100644
--- a/app/imports/api/creature/getActiveProperties.js
+++ b/app/imports/api/creature/getActiveProperties.js
@@ -4,7 +4,7 @@ import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
 export default function getActiveProperties({
   ancestorId,
   filter = {},
-  options,
+  options = {sort: {order: 1}},
   includeUntoggled = false,
   excludeAncestors,
 }){
diff --git a/app/imports/api/properties/Spells.js b/app/imports/api/properties/Spells.js
index ecb1fd88..92a42be2 100644
--- a/app/imports/api/properties/Spells.js
+++ b/app/imports/api/properties/Spells.js
@@ -38,16 +38,6 @@ let SpellSchema = new SimpleSchema({})
   hasAttackRoll: {
     type: Boolean,
     optional: true,
-  },
-	// Spell list that this spell appears on
-  spellLists: {
-    type: Array,
-    defaultValue: [],
-  },
-  'spellLists.$': {
-    type: String,
-		regEx: VARIABLE_NAME_REGEX,
-    min: 2,
   },
 	description: {
 		type: String,
diff --git a/app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue b/app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue
index 4185ac48..8b71d30a 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <div class="inventory">
-    <column-layout>
+    <column-layout wide-columns>
       <div>
         <toolbar-card :color="$vuetify.theme.secondary">
           <v-spacer slot="toolbar" />
diff --git a/app/imports/ui/creature/character/characterSheetTabs/SpellsTab.vue b/app/imports/ui/creature/character/characterSheetTabs/SpellsTab.vue
index 6f3bbd43..3851e4e0 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/SpellsTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/SpellsTab.vue
@@ -3,18 +3,7 @@
     <column-layout wide-columns>
       <div v-if="spellsWithoutList.length">
         <v-card>
-          <v-list
-            two-line
-            dense
-          >
-            <spell-list-tile
-              v-for="spell in spellsWithoutList"
-              :key="spell._id"
-              :data-id="`spell-list-tile-${spell._id}`"
-              :model="spell"
-              @click="clickProperty(spell._id)"
-            />
-          </v-list>
+          <spell-list :spells="spellsWithoutList" />
         </v-card>
       </div>
       <div
@@ -31,18 +20,15 @@
 </template>
 
 <script>
-import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
 import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
-import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
 import getActiveProperties from '/imports/api/creature/getActiveProperties.js';
 import SpellListCard from '/imports/ui/properties/components/spells/SpellListCard.vue';
-import SpellListTile from '/imports/ui/properties/components/spells/SpellListTile.vue';
+import SpellList from '/imports/ui/properties/components/spells/SpellList.vue';
 
 export default {
 	components: {
 		ColumnLayout,
-		CreaturePropertiesTree,
-    SpellListTile,
+    SpellList,
 		SpellListCard,
 	},
   inject: {
@@ -73,6 +59,12 @@ export default {
         filter: {
           type: 'spell',
         },
+        options: {
+          sort: {
+            level: 1,
+            order: 1,
+          },
+        },
       });
     },
 		spellListsWithoutAncestorSpellLists(){
diff --git a/app/imports/ui/properties/components/spells/SpellList.vue b/app/imports/ui/properties/components/spells/SpellList.vue
new file mode 100644
index 00000000..4d6d67af
--- /dev/null
+++ b/app/imports/ui/properties/components/spells/SpellList.vue
@@ -0,0 +1,66 @@
+<template lang="html">
+  <v-list
+    two-line
+    dense
+    class="spell-list"
+  >
+    <template v-for="level in levels">
+      <v-subheader :key="`${level}-header`">
+        {{ level === 0 ? 'Cantrips' : `Level ${level}` }}
+      </v-subheader>
+      <spell-list-tile
+        v-for="spell in spellsByLevel[level]"
+        :key="spell._id"
+        :data-id="`spell-list-tile-${spell._id}`"
+        :model="spell"
+        @click="clickProperty(spell._id)"
+      />
+    </template>
+  </v-list>
+</template>
+
+<script>
+import SpellListTile from '/imports/ui/properties/components/spells/SpellListTile.vue';
+
+export default {
+  components: {
+    SpellListTile,
+  },
+  props: {
+    spells: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    levels(){
+      let levels = new Set();
+      this.spells.forEach(spell => levels.add(spell.level));
+      return levels;
+    },
+    spellsByLevel(){
+      let spellsByLevel = {};
+      this.spells.forEach(spell => {
+        if (!spellsByLevel[spell.level]){
+          spellsByLevel[spell.level] = [spell];
+        } else {
+          spellsByLevel[spell.level].push(spell);
+        }
+      });
+      return spellsByLevel;
+    },
+  },
+  methods: {
+		clickProperty(_id){
+			this.$store.commit('pushDialogStack', {
+				component: 'creature-property-dialog',
+				elementId: `spell-list-tile-${_id}`,
+				data: {_id},
+			});
+		},
+	}
+}
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/app/imports/ui/properties/components/spells/SpellListCard.vue b/app/imports/ui/properties/components/spells/SpellListCard.vue
index 34a104a1..6f22f0d8 100644
--- a/app/imports/ui/properties/components/spells/SpellListCard.vue
+++ b/app/imports/ui/properties/components/spells/SpellListCard.vue
@@ -10,30 +10,19 @@
       </v-toolbar-title>
       <v-spacer />
     </template>
-    <v-list
-      two-line
-      dense
-    >
-      <spell-list-tile
-        v-for="spell in spells"
-        :key="spell._id"
-        :data-id="`spell-list-tile-${spell._id}`"
-        :model="spell"
-        @click="clickProperty(spell._id)"
-      />
-    </v-list>
+    <spell-list :spells="spells" />
   </toolbar-card>
 </template>
 
 <script>
 import ToolbarCard from '/imports/ui/components/ToolbarCard.vue';
-import SpellListTile from '/imports/ui/properties/components/spells/SpellListTile.vue';
+import SpellList from '/imports/ui/properties/components/spells/SpellList.vue';
 import getActiveProperties from '/imports/api/creature/getActiveProperties.js';
 
 export default {
 	components: {
 		ToolbarCard,
-    SpellListTile,
+    SpellList,
 	},
 	props: {
 		model: Object,
@@ -46,6 +35,12 @@ export default {
         filter: {
           type: 'spell',
         },
+        options: {
+          sort: {
+            level: 1,
+            order: 1,
+          },
+        },
       });
     },
   },
@@ -57,13 +52,6 @@ export default {
 				data: {_id},
 			});
 		},
-		clickProperty(_id){
-			this.$store.commit('pushDialogStack', {
-				component: 'creature-property-dialog',
-				elementId: `spell-list-tile-${_id}`,
-				data: {_id},
-			});
-		},
 	}
 };
 </script>
diff --git a/app/imports/ui/properties/components/spells/SpellListTile.vue b/app/imports/ui/properties/components/spells/SpellListTile.vue
index 71236f5c..b512ea5a 100644
--- a/app/imports/ui/properties/components/spells/SpellListTile.vue
+++ b/app/imports/ui/properties/components/spells/SpellListTile.vue
@@ -17,11 +17,6 @@
         {{ components }}
       </v-list-tile-sub-title>
     </v-list-tile-content>
-    <v-list-tile-action>
-      <v-list-tile-action-text>
-        {{ levelText }}
-      </v-list-tile-action-text>
-    </v-list-tile-action>
   </v-list-tile>
 </template>
 
@@ -42,9 +37,6 @@ export default {
       if (this.model.material) components.push(`M (${this.model.material})`);
       return components.join(', ');
     },
-    levelText(){
-      return this.model.level || 'Cantrip'
-    },
   },
   methods: {
     click(e){
diff --git a/app/imports/ui/properties/forms/SpellForm.vue b/app/imports/ui/properties/forms/SpellForm.vue
index ac5b9bce..3a10f4cb 100644
--- a/app/imports/ui/properties/forms/SpellForm.vue
+++ b/app/imports/ui/properties/forms/SpellForm.vue
@@ -102,19 +102,6 @@
       @change="change('description', ...arguments)"
     />
     <form-sections>
-      <form-section
-        name="Advanced"
-      >
-        <smart-combobox
-          label="Spell lists"
-          multiple
-          chips
-          deletable-chips
-          :value="model.spellLists"
-          :error-messages="errors.spellLists"
-          @change="change('spellLists', ...arguments)"
-        />
-      </form-section>
       <form-section
         name="Casting"
       >