From 68499e4de5ff15b442bcfc98998d52fb82de66b4 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Sat, 17 Oct 2020 19:28:54 +0200
Subject: [PATCH] You can now click on properties filling slots to view their
 details dialog

---
 app/imports/ui/creature/slots/Slots.vue | 53 +++++++++++++++----------
 1 file changed, 31 insertions(+), 22 deletions(-)

diff --git a/app/imports/ui/creature/slots/Slots.vue b/app/imports/ui/creature/slots/Slots.vue
index 695d68bb..06995ff8 100644
--- a/app/imports/ui/creature/slots/Slots.vue
+++ b/app/imports/ui/creature/slots/Slots.vue
@@ -12,26 +12,31 @@
           {{ slot.totalFilled }} / {{ slot.quantityExpected }}
         </span>
       </h3>
-      <div
-        v-for="child in slot.children"
-        :key="child._id"
-        class="layout row"
-        :data-id="`slot-child-${child._id}`"
-      >
-        <tree-node-view
-          class="slotChild"
-          :model="child"
-        />
-        <v-spacer />
-        <v-btn
-          icon
-          flat
-          small
-          @click="remove(child)"
+      <v-list v-if="slot.children.length">
+        <v-list-tile
+          v-for="child in slot.children"
+          :key="child._id"
+          :data-id="`slot-child-${child._id}`"
+          @click="clickSlotChild(child)"
         >
-          <v-icon>delete</v-icon>
-        </v-btn>
-      </div>
+          <v-list-tile-content>
+            <tree-node-view
+              class="slotChild"
+              :model="child"
+            />
+          </v-list-tile-content>
+          <v-list-tile-action>
+            <v-btn
+              icon
+              flat
+              small
+              @click.stop="remove(child)"
+            >
+              <v-icon>delete</v-icon>
+            </v-btn>
+          </v-list-tile-action>
+        </v-list-tile>
+      </v-list>
       <v-btn
         v-if="!slot.quantityExpected || slot.quantityExpected > slot.totalFilled"
         icon
@@ -70,6 +75,13 @@ export default {
     },
   },
   methods: {
+    clickSlotChild({_id}){
+			this.$store.commit('pushDialogStack', {
+				component: 'creature-property-dialog',
+				elementId: `slot-child-${_id}`,
+				data: {_id},
+			});
+    },
     fillSlot(slot){
       let slotId = slot._id;
       let creatureId = this.creatureId;
@@ -139,7 +151,4 @@ export default {
 </script>
 
 <style lang="css" scoped>
-  div {
-    background-color: inherit;
-  }
 </style>