Added UI for filtered out slot fillers allowing loading more

app/imports/ui/creature/slots/SlotFillDialog.vue

@@ -63,16 +63,17 @@
               </v-card-text>
             </v-card>
           </section>
-          <div class="layout justify-center align-stretch">
+        </div>
-            <v-btn
+        <div
-              v-if="currentLimit < countAll"
+          v-else-if="countAll"
-              :loading="!$subReady.slotFillers"
+          class="ma-4"
-              class="primary"
+        >
-              @click="loadMore"
+          <h4 v-if="numFiltered">
-            >
+            Requirements of {{ numFiltered }} library properties were not met.
-              Load More
+          </h4>
-            </v-btn>
+          <h4 v-else>
-          </div>
+            Nothing suitable was found in your libraries.
+          </h4>
         </div>
         <div
           v-else-if="$subReady.slotFillers"
@@ -117,6 +118,20 @@
           />
         </div>
       </v-fade-transition>
+      <v-fade-transition mode="out-in">
+        <div
+          v-if="currentLimit < countAll"
+          class="layout justify-center align-stretch"
+        >
+          <v-btn
+            :loading="!$subReady.slotFillers"
+            class="primary"
+            @click="loadMore"
+          >
+            Load More
+          </v-btn>
+        </div>
+      </v-fade-transition>
     </div>
     <template slot="actions">
       <v-spacer />
@@ -167,6 +182,7 @@ export default {
   data(){return {
     selectedNode: undefined,
     searchValue: undefined,
+    numFiltered: 0,
   }},
   computed: {
     slotPropertyTypeName(){
@@ -216,7 +232,7 @@ export default {
       return Creatures.findOne(this.creatureId);
     },
     currentLimit(){
-      return this._subs['slotFillers'].data('limit') || 16;
+      return this._subs['slotFillers'].data('limit') || 20;
     },
     countAll(){
       return this._subs['slotFillers'].data('countAll');
@@ -239,6 +255,7 @@ export default {
       let nodes = LibraryNodes.find(filter, {
         sort: {name: 1, order: 1}
       }).fetch();
+      let totalNodes = nodes.length;
       // Filter out slotFillers whose condition isn't met or are too big to fit
       // the quantity to fill
       nodes = nodes.filter(node => {
@@ -259,7 +276,7 @@ export default {
         }
         return true;
       });
-      // Filter out slotFillers whose
+      this.numFiltered = totalNodes - nodes.length;
       if (nodes.length === 1) this.selectedNode = nodes[0];
       return nodes;
     },