Files
DiceCloud/app/imports/ui/library/InsertLibraryNodeButton.vue

101 lines
2.6 KiB
Vue

<template lang="html">
<v-btn
:fab="fab"
:outlined="!fab"
small
color="primary"
data-id="insert-library-node-button"
@click="insertLibraryNode"
>
<v-icon>mdi-plus</v-icon>
<slot />
</v-btn>
</template>
<script lang="js">
import { getAncestry } from '/imports/api/parenting/parenting.js';
import { setDocToLastOrder } from '/imports/api/parenting/order.js';
import LibraryNodes, { insertNode } from '/imports/api/library/LibraryNodes.js';
import { getUserTier } from '/imports/api/users/patreon/tiers.js';
export default {
props: {
libraryId: {
type: String,
required: true,
},
selectedNodeId: {
type: String,
default: undefined,
},
fab: Boolean,
},
methods: {
insertLibraryNode(){
let libraryId = this.libraryId;
// Check tier has paid benefits
let tier = getUserTier(Meteor.userId());
if (!(tier && tier.paidBenefits)){
this.$store.commit('pushDialogStack', {
component: 'tier-too-low-dialog',
elementId: 'insert-library-node-button',
});
return;
}
// Get ancestry reference
let order, parentRef;
let selectedComponent = document.querySelector(
`[data-id="tree-node-${this.selectedNodeId}"]`
);
if (selectedComponent){
let vueInstance = selectedComponent.__vue__.$parent;
if (vueInstance.showExpanded){
parentRef = {
id: this.selectedNodeId,
collection: 'libraryNodes',
};
} else {
parentRef = vueInstance.node.parent;
order = vueInstance.node.order + 0.5;
}
} else {
parentRef = {
id: libraryId,
collection: 'libraries',
};
}
let {ancestors} = getAncestry({parentRef});
// Insert form dialog
let that = this;
this.$store.commit('pushDialogStack', {
component: 'library-node-creation-dialog',
elementId: 'insert-library-node-button',
callback(libraryNode){
if (!libraryNode) return;
// Set ancestry and order
libraryNode.parent = parentRef;
libraryNode.ancestors = ancestors;
if (order){
libraryNode.order = order;
} else {
setDocToLastOrder({collection: LibraryNodes, doc: libraryNode});
}
// Insert doc
let libraryNodeId = insertNode.call(libraryNode);
that.$emit('selected', libraryNodeId);
return `tree-node-${libraryNodeId}`;
}
});
},
}
}
</script>
<style lang="css" scoped>
</style>