From 2150bd6da4498ec5aba280b35e6647a94470a673 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Tue, 13 Apr 2021 14:17:31 +0200
Subject: [PATCH] Added breadcrumbs to creature properties

---
 app/imports/ui/components/propertyToolbar.vue |  9 +++
 .../creatureProperties/Breadcrumbs.vue        | 78 +++++++++++++++++++
 .../CreaturePropertyDialog.vue                |  5 ++
 .../ui/dialogStack/dialogStackStore.js        | 24 +++++-
 4 files changed, 113 insertions(+), 3 deletions(-)
 create mode 100644 app/imports/ui/creature/creatureProperties/Breadcrumbs.vue

diff --git a/app/imports/ui/components/propertyToolbar.vue b/app/imports/ui/components/propertyToolbar.vue
index ed25bcbb..aad13513 100644
--- a/app/imports/ui/components/propertyToolbar.vue
+++ b/app/imports/ui/components/propertyToolbar.vue
@@ -5,6 +5,12 @@
     :light="!isDark"
     :flat="flat"
   >
+    <v-btn
+      icon
+      @click="back"
+    >
+      <v-icon>arrow_back</v-icon>
+    </v-btn>
     <property-icon
       :model="model"
       class="mr-2"
@@ -163,6 +169,9 @@ export default {
     colorChanged(value){
       this.$emit('color-changed', value);
     },
+    back(){
+      this.$store.dispatch('popDialogStack');
+    },
   }
 }
 </script>
diff --git a/app/imports/ui/creature/creatureProperties/Breadcrumbs.vue b/app/imports/ui/creature/creatureProperties/Breadcrumbs.vue
new file mode 100644
index 00000000..8eef5676
--- /dev/null
+++ b/app/imports/ui/creature/creatureProperties/Breadcrumbs.vue
@@ -0,0 +1,78 @@
+<template lang="html">
+  <div class="breadcrumbs layout align-center wrap">
+    <template v-for="(prop, index) in props">
+      <v-icon
+        v-if="index !== 0"
+        :key="index"
+      >
+        chevron_right
+      </v-icon>
+      <a
+        :key="prop._id"
+        :data-id="`breadcrumb-${prop._id}`"
+        @click="click(prop._id)"
+      >
+        <tree-node-view :model="prop" />
+      </a>
+    </template>
+  </div>
+</template>
+
+<script lang="js">
+  import fetchDocByRef from '/imports/api/parenting/fetchDocByRef.js';
+  import TreeNodeView from '/imports/ui/properties/treeNodeViews/TreeNodeView.vue';
+
+  export default {
+    components: {
+      TreeNodeView,
+    },
+    props: {
+      model: {
+        type: Object,
+        required: true,
+      },
+    },
+    computed:{
+      props(){
+        return this.model.ancestors
+          .slice(1)
+          .map(ref => fetchDocByRef(ref))
+          .filter(prop => prop.type !== 'propertySlot');
+      },
+    },
+    methods: {
+      click(id){
+        let store = this.$store;
+        // Check if there is a dialog open for this doc already
+        let dialogFound;
+        let dialogsToPop = 0;
+        store.state.dialogStack.dialogs.forEach(dialog => {
+          if (dialog.data && dialog.data._id === id){
+            dialogFound = true;
+            dialogsToPop = 0;
+          } else {
+            dialogsToPop += 1;
+          }
+        });
+        if (dialogFound){
+          // Pop dialogs until we get to it
+          store.dispatch('popDialogStacks', dialogsToPop);
+        } else {
+          // Otherwise open it as a new dialog
+          store.commit('pushDialogStack', {
+            component: 'creature-property-dialog',
+            elementId: `breadcrumb-${id}`,
+            data: {_id: id},
+          });
+        }
+      },
+    }
+  }
+</script>
+
+<style lang="css" scoped>
+.breadcrumbs {
+  margin-bottom: 16px;
+  opacity: 0.8;
+}
+</style>
diff --git a/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue b/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
index f793b71e..2948f024 100644
--- a/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
+++ b/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
@@ -13,6 +13,9 @@
       />
     </template>
     <template v-if="model">
+      <template v-if="!editing && !embedded">
+        <breadcrumbs :model="model" />
+      </template>
       <v-fade-transition
         mode="out-in"
       >
@@ -93,6 +96,7 @@ import equipItem from '/imports/api/creature/creatureProperties/methods/equipIte
 import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
 import { getHighestOrder } from '/imports/api/parenting/order.js';
 import insertProperty from '/imports/api/creature/creatureProperties/methods/insertProperty.js';
+import Breadcrumbs from '/imports/ui/creature/creatureProperties/Breadcrumbs.vue';
 
 let formIndex = {};
 for (let key in propertyFormIndex){
@@ -112,6 +116,7 @@ export default {
     DialogBase,
     PropertyToolbar,
     CreaturePropertiesTree,
+    Breadcrumbs,
   },
   props: {
     _id: String,
diff --git a/app/imports/ui/dialogStack/dialogStackStore.js b/app/imports/ui/dialogStack/dialogStackStore.js
index 329acbf3..049a03a1 100644
--- a/app/imports/ui/dialogStack/dialogStackStore.js
+++ b/app/imports/ui/dialogStack/dialogStackStore.js
@@ -1,3 +1,5 @@
+import Vue from 'vue';
+
 let dialogStack = {};
 dialogStack.dialogs = [];
 
@@ -25,7 +27,7 @@ const dialogStackStore = {
       if (!state.dialogs.length){
         throw new Meteor.Error('can\'t replace dialog if no dialogs are open');
       }
-      state.dialogs.$set(0, {
+      Vue.set(state.dialogs, state.dialogs.length - 1, {
         _id,
         component,
         data,
@@ -57,8 +59,24 @@ const dialogStackStore = {
       } else {
         context.commit('popDialogStackMutation', result);
       }
-    }
-  }
+    },
+    popDialogStacks(context, quantity){
+      if (quantity <= 0) return;
+      let iterationsLeft = quantity;
+      let intervalId = setInterval(() => {
+        if (history && history.state && history.state.openDialogs){
+          context.commit('setCurrentResult');
+          history.back();
+        } else {
+          context.commit('popDialogStackMutation');
+        }
+        iterationsLeft -= 1;
+        if (iterationsLeft === 0){
+          clearInterval(intervalId);
+        }
+      }, 150);
+    },
+  },
 };
 
 export default dialogStackStore;