From 100c93b5ae1d827d9592b6937584b6799e6c2c15 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Fri, 22 Jan 2021 12:20:33 +0200
Subject: [PATCH 1/3] Stopped dialog animation mocking transparent elements'
 background color

---
 app/imports/ui/dialogStack/DialogStack.vue | 2 --
 app/imports/ui/dialogStack/mockElement.js  | 9 ++++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/imports/ui/dialogStack/DialogStack.vue b/app/imports/ui/dialogStack/DialogStack.vue
index fd8fb680..0a807e6b 100644
--- a/app/imports/ui/dialogStack/DialogStack.vue
+++ b/app/imports/ui/dialogStack/DialogStack.vue
@@ -42,8 +42,6 @@
 </template>
 
 <script>
-  import Vue from 'vue';
-  import anime from 'animejs';
   import '/imports/ui/dialogStack/dialogStackWindowEvents.js';
   import mockElement from '/imports/ui/dialogStack/mockElement.js';
   import DialogComponentIndex from '/imports/ui/dialogStack/DialogComponentIndex.js';
diff --git a/app/imports/ui/dialogStack/mockElement.js b/app/imports/ui/dialogStack/mockElement.js
index fdf1c7c0..de843514 100644
--- a/app/imports/ui/dialogStack/mockElement.js
+++ b/app/imports/ui/dialogStack/mockElement.js
@@ -48,8 +48,11 @@ export default function mockElement({source, target, offset = {x: 0, y: 0}}){
   // Mock the source
   target.style.transform = `translate(${deltaLeft}px, ${deltaTop}px) ` +
 		`scale(${deltaWidth}, ${deltaHeight})`;
-
-	target.style.backgroundColor = getComputedStyle(source).backgroundColor;
+  // Mock the background color unless it's completely transparent
+  let backgroundColor = getComputedStyle(source).backgroundColor
+  if (backgroundColor !== 'rgba(0, 0, 0, 0)'){
+    target.style.backgroundColor = backgroundColor;
+  }
 	// Edge might not combine all border radii into a single value,
 	// So we just sample the top left one if we need to
 	let oldRadius = getComputedStyle(source).borderRadius ||
@@ -60,4 +63,4 @@ export default function mockElement({source, target, offset = {x: 0, y: 0}}){
 		getComputedStyle(source).boxShadow, deltaWidth, deltaHeight
 	);
 	target.style.setProperty('box-shadow', boxShadow, 'important');
-};
+}

From c780c11e3f137b5d3c98d571bae13fb73db96058 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Fri, 22 Jan 2021 14:09:23 +0200
Subject: [PATCH 2/3] Improved spell slot casting dialog with search, filters,
 spell details

---
 .../ui/components/global/SmartInputMixin.js   |   8 +-
 .../ui/components/global/TextField.vue        |   5 +-
 .../spells/CastSpellWithSlotDialog.vue        | 126 +++++++++++++++++-
 .../components/spells/SpellListTile.vue       |  14 ++
 app/imports/ui/utility/escapeRegex.js         |   3 +
 5 files changed, 149 insertions(+), 7 deletions(-)
 create mode 100644 app/imports/ui/utility/escapeRegex.js

diff --git a/app/imports/ui/components/global/SmartInputMixin.js b/app/imports/ui/components/global/SmartInputMixin.js
index 7b8d63c0..5df4f5b2 100644
--- a/app/imports/ui/components/global/SmartInputMixin.js
+++ b/app/imports/ui/components/global/SmartInputMixin.js
@@ -26,6 +26,10 @@ export default {
     value: [String, Number, Date, Array, Object, Boolean],
     errorMessages: [String, Array],
     disabled: Boolean,
+    debounce: {
+      type: Number,
+      default: undefined,
+    },
   },
   watch: {
     focused(newFocus){
@@ -113,7 +117,9 @@ export default {
       return this.context.editPermission === false || this.disabled;
     },
     debounceTime() {
-      if (Number.isFinite(this.context.debounceTime)){
+      if (Number.isFinite(this.debounce)){
+        return this.debounce;
+      } else if (Number.isFinite(this.context.debounceTime)){
         return this.context.debounceTime;
       } else {
         return 750;
diff --git a/app/imports/ui/components/global/TextField.vue b/app/imports/ui/components/global/TextField.vue
index 5f8b79c3..337543e8 100644
--- a/app/imports/ui/components/global/TextField.vue
+++ b/app/imports/ui/components/global/TextField.vue
@@ -6,7 +6,7 @@
     :error-messages="errors"
     :value="safeValue"
     :disabled="isDisabled"
-    box
+    :box="!regular"
     @input="input"
     @focus="focused = true"
     @blur="focused = false"
@@ -18,5 +18,8 @@
 
   export default {
     mixins: [SmartInput],
+    props: {
+      regular: Boolean,
+    },
   };
 </script>
diff --git a/app/imports/ui/properties/components/spells/CastSpellWithSlotDialog.vue b/app/imports/ui/properties/components/spells/CastSpellWithSlotDialog.vue
index f280b36b..d21d678a 100644
--- a/app/imports/ui/properties/components/spells/CastSpellWithSlotDialog.vue
+++ b/app/imports/ui/properties/components/spells/CastSpellWithSlotDialog.vue
@@ -5,7 +5,66 @@
         Cast a Spell
       </v-toolbar-title>
       <v-spacer />
-      <v-input icon="search" />
+      <text-field
+        ref="focusFirst"
+        label="Name"
+        prepend-inner-icon="search"
+        regular
+        hide-details
+        :value="searchValue"
+        :error-messages="searchError"
+        :debounce="200"
+        @change="searchChanged"
+      />
+      <v-menu
+        v-model="filterMenuOpen"
+        left
+        :close-on-content-click="false"
+      >
+        <template #activator="{ on }">
+          <v-btn
+            icon
+            flat
+            :class="{'primary--text': filtersApplied}"
+            v-on="on"
+          >
+            <v-icon>filter_list</v-icon>
+          </v-btn>
+        </template>
+        <v-list>
+          <v-list-tile
+            v-for="filter in booleanFilters"
+            :key="filter.name"
+            style="height: 52px;"
+          >
+            <v-checkbox
+              v-model="filter.enabled"
+              style="flex-grow: 0; margin-right: 8px;"
+            />
+            <v-switch
+              v-model="filter.value"
+              :disabled="!filter.enabled"
+              :label="filter.name"
+            />
+          </v-list-tile>
+          <div class="layout row">
+            <v-btn
+              flat
+              @click="clearBooleanFilters"
+            >
+              Clear
+            </v-btn>
+            <v-spacer />
+            <v-btn
+              flat
+              class="primary--text"
+              @click="filterMenuOpen = false"
+            >
+              Done
+            </v-btn>
+          </div>
+        </v-list>
+      </v-menu>
     </template>
     <split-list-layout>
       <template slot="left">
@@ -56,9 +115,11 @@
             v-else
             :key="spell._id"
             hide-handle
+            show-info-button
             :class="{ 'primary--text': selectedSpellId === spell._id}"
             :model="spell"
             @click="selectedSpellId = spell._id"
+            @show-info="spellDialog(spell._id)"
           />
         </template>
       </template>
@@ -119,6 +180,16 @@ export default {
     searchString: undefined,
     selectedSlotId: this.slotId,
     selectedSpellId: this.spellId,
+    searchValue: undefined,
+    searchError: undefined,
+    filterMenuOpen: false,
+    booleanFilters: {
+      verbal: {name: 'Verbal', enabled: false, value: false},
+      somatic: {name: 'Somatic', enabled: false, value: false},
+      material: {name: 'Material', enabled: false, value: false},
+      concentration: {name: 'Concentration', enabled: false, value: false},
+      ritual: {name: 'Ritual', enabled: false, value: false},
+    },
   }},
   computed: {
     computedSpells(){
@@ -135,7 +206,15 @@ export default {
       } else {
         return slot.spellSlotLevelValue >= spell.level;
       }
-    }
+    },
+    filtersApplied(){
+      for (let key in this.booleanFilters){
+        if (this.booleanFilters[key].enabled){
+          return true;
+        }
+      }
+      return false;
+    },
   },
   watch: {
     selectedSpell(spell){
@@ -152,16 +231,53 @@ export default {
       }
     },
   },
+  methods: {
+    clearBooleanFilters(){
+      for (let key in this.booleanFilters){
+        this.booleanFilters[key].enabled = false;
+      }
+    },
+    spellDialog(_id){
+      this.$store.commit('pushDialogStack', {
+				component: 'creature-property-dialog',
+				elementId: `spell-info-btn-${_id}`,
+				data: {_id},
+			});
+    },
+    searchChanged(val, ack){
+      this.searchValue = val;
+      setTimeout(ack, 200);
+    },
+  },
   meteor: {
     spells(){
       let slotLevel = this.selectedSlot && this.selectedSlot.spellSlotLevelValue || 0;
-      return CreatureProperties.find({
+      let filter = {
         'ancestors.id': this.creatureId,
         removed: {$ne: true},
         inactive: {$ne: true},
         prepared: true,
         level: {$lte: slotLevel},
-      }, {
+      };
+      // Apply the filters from the filter menu
+      for (let key in this.booleanFilters){
+        if (this.booleanFilters[key].enabled){
+          let value = this.booleanFilters[key].value;
+          if (key === 'material'){
+            filter[key] = {$exists: this.booleanFilters[key].value};
+          } else {
+            filter[key] = value ? true: {$ne: true};
+          }
+        }
+      }
+      // Apply the search string to the name field
+      if (this.searchValue){
+        filter.name = {
+          $regex: this.searchValue.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'),
+          $options: 'i'
+        };
+      }
+      return CreatureProperties.find(filter, {
         sort: {order: 1}
       });
     },
@@ -186,7 +302,7 @@ export default {
     },
     selectedSpell(){
       return CreatureProperties.findOne(this.selectedSpellId);
-    }
+    },
   },
 }
 </script>
diff --git a/app/imports/ui/properties/components/spells/SpellListTile.vue b/app/imports/ui/properties/components/spells/SpellListTile.vue
index 977b9f53..61c777d4 100644
--- a/app/imports/ui/properties/components/spells/SpellListTile.vue
+++ b/app/imports/ui/properties/components/spells/SpellListTile.vue
@@ -33,6 +33,16 @@
       >
         drag_indicator
       </v-icon>
+      <v-btn
+        v-else-if="showInfoButton"
+        icon
+        flat
+        class="info-icon"
+        :data-id="`spell-info-btn-${model._id}`"
+        @click.stop="$emit('show-info')"
+      >
+        <v-icon>info</v-icon>
+      </v-btn>
     </v-list-tile-action>
   </v-list-tile>
 </template>
@@ -46,6 +56,7 @@ export default {
   props: {
     preparingSpells: Boolean,
     hideHandle: Boolean,
+    showInfoButton: Boolean,
   },
   computed: {
     hasClickListener(){
@@ -86,4 +97,7 @@ export default {
 .primary--text .v-icon, .primary--text .v-list__tile__sub-title {
   color: #b71c1c
 }
+.theme--light.info-icon{
+  color: rgba(0,0,0,.54) !important;
+}
 </style>
diff --git a/app/imports/ui/utility/escapeRegex.js b/app/imports/ui/utility/escapeRegex.js
new file mode 100644
index 00000000..8ed9c0b9
--- /dev/null
+++ b/app/imports/ui/utility/escapeRegex.js
@@ -0,0 +1,3 @@
+RegExp.escape = function(s) {
+  return s.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+};

From 3cdeb73c308a69406e6937dac0a8195879453cb5 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Mon, 25 Jan 2021 12:38:46 +0200
Subject: [PATCH 3/3] Stopped removed items from showing up in inventory
 containers

---
 app/imports/ui/properties/components/inventory/ContainerCard.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/imports/ui/properties/components/inventory/ContainerCard.vue b/app/imports/ui/properties/components/inventory/ContainerCard.vue
index 3ee931a4..7984fed5 100644
--- a/app/imports/ui/properties/components/inventory/ContainerCard.vue
+++ b/app/imports/ui/properties/components/inventory/ContainerCard.vue
@@ -56,6 +56,7 @@ export default {
       return CreatureProperties.find({
         'parent.id': this.model._id,
         type: {$in: ['item', 'container']},
+        removed: {$ne: true},
         equipped: {$ne: true},
         deactivatedByAncestor: {$ne: true},
       });