Added delete buttons to slot fill card
This commit is contained in:
Stefan Zermatten
@@ -28,11 +28,11 @@
|
||||
</v-btn>
|
||||
<div
|
||||
class="layout align-center justify-start pr-1"
|
||||
style="flex-grow: 0;"
|
||||
>
|
||||
<!--{{node && node.order}}-->
|
||||
<div
|
||||
v-if="isSlot"
|
||||
class="text-truncate"
|
||||
>
|
||||
<span
|
||||
:class="{
|
||||
@@ -47,15 +47,38 @@
|
||||
:model="node"
|
||||
/>
|
||||
</div>
|
||||
<tree-node-view
|
||||
<template
|
||||
v-else
|
||||
:model="node"
|
||||
/>
|
||||
>
|
||||
<tree-node-view
|
||||
:model="node"
|
||||
/>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
icon
|
||||
:disabled="context.editPermission === false"
|
||||
@click.stop="remove(node)"
|
||||
>
|
||||
<v-icon>
|
||||
mdi-delete
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<template v-if="condenseChild">
|
||||
<span class="mr-4">:</span>
|
||||
<tree-node-view
|
||||
:model="children[0].node"
|
||||
/>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
icon
|
||||
:disabled="context.editPermission === false"
|
||||
@click.stop="remove(children[0].node)"
|
||||
>
|
||||
<v-icon>
|
||||
mdi-delete
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@@ -92,98 +115,118 @@
|
||||
</template>
|
||||
|
||||
<script lang="js">
|
||||
/**
|
||||
* TreeNode's are list item views of character properties. Every property which
|
||||
* can belong to the character is shown in the tree view of the character
|
||||
* the tree view shows off the full character structure, and where each part of
|
||||
* character comes from.
|
||||
**/
|
||||
import TreeNodeView from '/imports/ui/properties/treeNodeViews/TreeNodeView.vue';
|
||||
import FillSlotButton from '/imports/ui/creature/buildTree/FillSlotButton.vue';
|
||||
import { some } from 'lodash';
|
||||
/**
|
||||
* TreeNode's are list item views of character properties. Every property which
|
||||
* can belong to the character is shown in the tree view of the character
|
||||
* the tree view shows off the full character structure, and where each part of
|
||||
* character comes from.
|
||||
**/
|
||||
import TreeNodeView from '/imports/ui/properties/treeNodeViews/TreeNodeView.vue';
|
||||
import FillSlotButton from '/imports/ui/creature/buildTree/FillSlotButton.vue';
|
||||
import { some } from 'lodash';
|
||||
import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
|
||||
import softRemoveProperty from '/imports/api/creature/creatureProperties/methods/softRemoveProperty.js';
|
||||
import restoreProperty from '/imports/api/creature/creatureProperties/methods/restoreProperty.js';
|
||||
import getPropertyTitle from '/imports/ui/properties/shared/getPropertyTitle.js';
|
||||
|
||||
export default {
|
||||
name: 'BuildTreeNode',
|
||||
components: {
|
||||
TreeNodeView,
|
||||
FillSlotButton,
|
||||
export default {
|
||||
name: 'BuildTreeNode',
|
||||
components: {
|
||||
TreeNodeView,
|
||||
FillSlotButton,
|
||||
},
|
||||
inject: {
|
||||
context: { default: {} }
|
||||
},
|
||||
props: {
|
||||
node: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
props: {
|
||||
node: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
children: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data(){return {
|
||||
expanded: false,
|
||||
/* expand if there's a slot needing attention:
|
||||
this.node._descendantCanFill || (
|
||||
this.node.type === 'propertySlot' &&
|
||||
this. node.quantityExpected?.value === 0 ||
|
||||
(this.node.quantityExpected?.value > 1 && this.node.spaceLeft > 0)
|
||||
)
|
||||
*/
|
||||
}},
|
||||
computed: {
|
||||
condenseChild(){
|
||||
return this.node.type === 'propertySlot' &&
|
||||
this.children.length === 1 &&
|
||||
this.children[0].node.type !== 'propertySlot' &&
|
||||
this.node.quantityExpected &&
|
||||
this.node.quantityExpected.value === 1;
|
||||
},
|
||||
isSlot(){
|
||||
return this.node.type === 'propertySlot';
|
||||
},
|
||||
canFill(){
|
||||
return !!this.node._canFill;
|
||||
},
|
||||
canFillWithOne(){
|
||||
return this.isSlot &&
|
||||
this.node.quantityExpected &&
|
||||
this.node.quantityExpected.value === 1 &&
|
||||
this.node.spaceLeft === 1
|
||||
},
|
||||
canFillWithMany(){
|
||||
return this.isSlot && (
|
||||
!this.node.quantityExpected ||
|
||||
this.node.quantityExpected.value === 0 ||
|
||||
(this.node.quantityExpected.value > 1 && this.node.spaceLeft > 0)
|
||||
);
|
||||
},
|
||||
hasChildren(){
|
||||
return !!this.children && !!this.computedChildren.length || this.lazy && !this.expanded;
|
||||
},
|
||||
showExpanded(){
|
||||
return this.canExpand && this.expanded;
|
||||
},
|
||||
computedChildren(){
|
||||
if (this.condenseChild){
|
||||
return this.children[0].children;
|
||||
}
|
||||
return this.children;
|
||||
},
|
||||
canExpand(){
|
||||
return !!this.computedChildren.length || this.canFillWithMany;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'node._ancestorOfMatchedDocument'(value){
|
||||
this.expanded = !!value ||
|
||||
some(this.selectedNode?.ancestors, ref => ref.id === this.node._id);
|
||||
},
|
||||
'selectedNode.ancestors'(value){
|
||||
this.expanded = !!some(value, ref => ref.id === this.node._id) || this.expanded;
|
||||
},
|
||||
children: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
beforeCreate() {
|
||||
this.$options.components.BuildTreeNodeList = require('./BuildTreeNodeList.vue').default
|
||||
},
|
||||
};
|
||||
},
|
||||
data(){return {
|
||||
expanded: false,
|
||||
/* expand if there's a slot needing attention:
|
||||
this.node._descendantCanFill || (
|
||||
this.node.type === 'propertySlot' &&
|
||||
this. node.quantityExpected?.value === 0 ||
|
||||
(this.node.quantityExpected?.value > 1 && this.node.spaceLeft > 0)
|
||||
)
|
||||
*/
|
||||
}},
|
||||
computed: {
|
||||
condenseChild(){
|
||||
return this.node.type === 'propertySlot' &&
|
||||
this.children.length === 1 &&
|
||||
this.children[0].node.type !== 'propertySlot' &&
|
||||
this.node.quantityExpected &&
|
||||
this.node.quantityExpected.value === 1;
|
||||
},
|
||||
isSlot(){
|
||||
return this.node.type === 'propertySlot';
|
||||
},
|
||||
canFill(){
|
||||
return !!this.node._canFill;
|
||||
},
|
||||
canFillWithOne(){
|
||||
return this.isSlot &&
|
||||
this.node.quantityExpected &&
|
||||
this.node.quantityExpected.value === 1 &&
|
||||
this.node.spaceLeft === 1
|
||||
},
|
||||
canFillWithMany(){
|
||||
return this.isSlot && (
|
||||
!this.node.quantityExpected ||
|
||||
this.node.quantityExpected.value === 0 ||
|
||||
(this.node.quantityExpected.value > 1 && this.node.spaceLeft > 0)
|
||||
);
|
||||
},
|
||||
hasChildren(){
|
||||
return !!this.children && !!this.computedChildren.length || this.lazy && !this.expanded;
|
||||
},
|
||||
showExpanded(){
|
||||
return this.canExpand && this.expanded;
|
||||
},
|
||||
computedChildren(){
|
||||
if (this.condenseChild){
|
||||
return this.children[0].children;
|
||||
}
|
||||
return this.children;
|
||||
},
|
||||
canExpand(){
|
||||
return !!this.computedChildren.length || this.canFillWithMany;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'node._ancestorOfMatchedDocument'(value){
|
||||
this.expanded = !!value ||
|
||||
some(this.selectedNode?.ancestors, ref => ref.id === this.node._id);
|
||||
},
|
||||
'selectedNode.ancestors'(value){
|
||||
this.expanded = !!some(value, ref => ref.id === this.node._id) || this.expanded;
|
||||
},
|
||||
},
|
||||
beforeCreate() {
|
||||
this.$options.components.BuildTreeNodeList = require('./BuildTreeNodeList.vue').default
|
||||
},
|
||||
methods: {
|
||||
remove(model) {
|
||||
const _id = model._id;
|
||||
softRemoveProperty.call({_id});
|
||||
snackbar({
|
||||
text: `Deleted ${getPropertyTitle(model)}`,
|
||||
callbackName: 'undo',
|
||||
callback(){
|
||||
restoreProperty.call({_id});
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
|
||||
Reference in New Issue
Block a user