106 lines
2.3 KiB
Vue
106 lines
2.3 KiB
Vue
<template lang="html">
|
|
<div
|
|
class="breadcrumbs layout align-center wrap"
|
|
:class="{'no-icons': noIcons}"
|
|
>
|
|
<template v-for="(prop, index) in props">
|
|
<v-icon
|
|
v-if="index !== 0"
|
|
:key="index"
|
|
>
|
|
mdi-chevron-right
|
|
</v-icon>
|
|
<span
|
|
v-if="noLinks"
|
|
:key="prop._id"
|
|
>
|
|
<tree-node-view
|
|
:model="prop"
|
|
class="breadcrumb-tree-node-view"
|
|
/>
|
|
</span>
|
|
<a
|
|
v-else
|
|
:key="prop._id"
|
|
:data-id="`breadcrumb-${prop._id}`"
|
|
@click="click(prop._id)"
|
|
>
|
|
<tree-node-view
|
|
:model="prop"
|
|
class="breadcrumb-tree-node-view"
|
|
/>
|
|
</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,
|
|
},
|
|
noLinks: Boolean,
|
|
noIcons: Boolean,
|
|
},
|
|
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;
|
|
}
|
|
.no-icons {
|
|
|
|
}
|
|
</style>
|
|
|
|
<style lang="css">
|
|
.no-icons .breadcrumb-tree-node-view .v-icon {
|
|
display: none;
|
|
}
|
|
</style>
|