415 lines
12 KiB
Vue
415 lines
12 KiB
Vue
<template lang="html">
|
|
<dialog-base
|
|
:color="model.color"
|
|
dark-body
|
|
>
|
|
<template slot="toolbar">
|
|
<v-toolbar-title>
|
|
{{ model.name }}
|
|
</v-toolbar-title>
|
|
<v-spacer />
|
|
<text-field
|
|
prepend-inner-icon="mdi-magnify"
|
|
regular
|
|
hide-details
|
|
:value="searchValue"
|
|
:debounce="300"
|
|
@change="searchChanged"
|
|
@keyup.enter="insert"
|
|
/>
|
|
</template>
|
|
<property-description
|
|
:string="model.description"
|
|
/>
|
|
<p>
|
|
{{ slotPropertyTypeName }} with tags:
|
|
<template v-for="(tags, index) in tagsSearched.or">
|
|
<property-tags
|
|
:key="index"
|
|
:tags="tags"
|
|
:prefix="index ? 'OR' : undefined"
|
|
/>
|
|
</template>
|
|
<template v-for="(tags, index) in tagsSearched.not">
|
|
<property-tags
|
|
:key="index"
|
|
:tags="tags"
|
|
prefix="NOT"
|
|
/>
|
|
</template>
|
|
</p>
|
|
<v-expansion-panels
|
|
multiple
|
|
inset
|
|
>
|
|
<template v-for="libraryNode in libraryNodes">
|
|
<v-expansion-panel
|
|
v-if="showDisabled || !libraryNode._disabledBySlotFillerCondition"
|
|
:key="libraryNode._id"
|
|
:model="libraryNode"
|
|
:data-id="libraryNode._id"
|
|
:class="{disabled: isDisabled(libraryNode)}"
|
|
>
|
|
<v-expansion-panel-header>
|
|
<template #default="{ open }">
|
|
<v-layout
|
|
align-center
|
|
class="flex-grow-0 mr-2"
|
|
>
|
|
<v-checkbox
|
|
v-if="libraryNode._disabledByAlreadyAdded"
|
|
class="my-0 py-0"
|
|
hide-details
|
|
:input-value="true"
|
|
disabled
|
|
/>
|
|
<v-checkbox
|
|
v-else
|
|
v-model="selectedNodeIds"
|
|
class="my-0 py-0"
|
|
hide-details
|
|
:disabled="isDisabled(libraryNode)"
|
|
:value="libraryNode._id"
|
|
@click.stop
|
|
/>
|
|
</v-layout>
|
|
<v-layout column>
|
|
<v-layout align-center>
|
|
<tree-node-view :model="libraryNode" />
|
|
<div
|
|
v-if="libraryNode._disabledBySlotFillerCondition"
|
|
class="error--text text-no-wrap text-truncate"
|
|
>
|
|
{{ libraryNode.slotFillerCondition }}
|
|
</div>
|
|
</v-layout>
|
|
<div class="text-caption text-no-wrap text-truncate">
|
|
{{ libraryNames[libraryNode.ancestors[0].id ] }}
|
|
</div>
|
|
</v-layout>
|
|
<div
|
|
v-if="libraryNode.slotQuantityFilled && libraryNode.slotQuantityFilled !== 1"
|
|
class="text-overline flex-grow-0 text-no-wrap"
|
|
:class="{
|
|
'error--text': isDisabled(libraryNode) &&
|
|
libraryNode._disabledByQuantityFilled
|
|
}"
|
|
>
|
|
{{ libraryNode.slotQuantityFilled }} slots
|
|
</div>
|
|
<template v-if="open">
|
|
<v-btn
|
|
icon
|
|
class="flex-grow-0"
|
|
@click.stop="openPropertyDetails(libraryNode._id)"
|
|
>
|
|
<v-icon>mdi-window-restore</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
</template>
|
|
</v-expansion-panel-header>
|
|
<v-expansion-panel-content>
|
|
<library-node-expansion-content :model="libraryNode" />
|
|
</v-expansion-panel-content>
|
|
</v-expansion-panel>
|
|
</template>
|
|
</v-expansion-panels>
|
|
<v-layout
|
|
v-if="!$subReady.slotFillers || currentLimit < countAll"
|
|
column
|
|
align-center
|
|
justify-center
|
|
class="ma-3"
|
|
>
|
|
<v-btn
|
|
:loading="!$subReady.slotFillers"
|
|
color="accent"
|
|
@click="loadMore"
|
|
>
|
|
Load More
|
|
</v-btn>
|
|
</v-layout>
|
|
<template v-if="!showDisabled && disabledNodeCount">
|
|
<v-layout
|
|
column
|
|
align-center
|
|
justify-center
|
|
class="ma-3"
|
|
>
|
|
<div>
|
|
Requirements of {{ disabledNodeCount }} properties were not met
|
|
</div>
|
|
<v-btn
|
|
class="mt-2"
|
|
elevation="0"
|
|
color="accent"
|
|
@click="showDisabled = true"
|
|
>
|
|
Show All
|
|
</v-btn>
|
|
</v-layout>
|
|
</template>
|
|
<template slot="actions">
|
|
<v-btn
|
|
text
|
|
@click="$store.dispatch('popDialogStack')"
|
|
>
|
|
Cancel
|
|
</v-btn>
|
|
<v-spacer />
|
|
<v-btn
|
|
text
|
|
color="primary"
|
|
:disabled="!dummySlot && !selectedNodeIds.length"
|
|
@click="$store.dispatch('popDialogStack', selectedNodeIds)"
|
|
>
|
|
<template v-if="model.spaceLeft">
|
|
{{ totalQuantitySelected }} / {{ model.spaceLeft }}
|
|
</template>
|
|
<template v-if="slotId">
|
|
Insert
|
|
</template>
|
|
<template v-else>
|
|
Close Test
|
|
</template>
|
|
</v-btn>
|
|
</template>
|
|
</dialog-base>
|
|
</template>
|
|
|
|
<script lang="js">
|
|
import Creatures from '/imports/api/creature/creatures/Creatures.js';
|
|
import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
|
|
import LibraryNodes from '/imports/api/library/LibraryNodes.js';
|
|
import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
|
|
import TreeNodeView from '/imports/ui/properties/treeNodeViews/TreeNodeView.vue';
|
|
import PropertyDescription from '/imports/ui/properties/viewers/shared/PropertyDescription.vue'
|
|
import evaluateString from '/imports/api/creature/computation/afterComputation/evaluateString.js';
|
|
import getSlotFillFilter from '/imports/api/creature/creatureProperties/methods/getSlotFillFilter.js'
|
|
import Libraries from '/imports/api/library/Libraries.js';
|
|
import LibraryNodeExpansionContent from '/imports/ui/library/LibraryNodeExpansionContent.vue';
|
|
import PropertyTags from '/imports/ui/properties/viewers/shared/PropertyTags.vue';
|
|
import { getPropertyName } from '/imports/constants/PROPERTIES.js';
|
|
import { clone } from 'lodash';
|
|
|
|
export default {
|
|
components: {
|
|
DialogBase,
|
|
TreeNodeView,
|
|
PropertyDescription,
|
|
LibraryNodeExpansionContent,
|
|
PropertyTags,
|
|
},
|
|
props:{
|
|
slotId: {
|
|
type: String,
|
|
default: undefined,
|
|
},
|
|
creatureId: {
|
|
type: String,
|
|
default: undefined,
|
|
},
|
|
dummySlot: {
|
|
type: Object,
|
|
default: undefined,
|
|
},
|
|
},
|
|
data(){return {
|
|
selectedNodeIds: [],
|
|
searchValue: undefined,
|
|
showDisabled: false,
|
|
disabledNodeCount: undefined,
|
|
}},
|
|
reactiveProvide: {
|
|
name: 'context',
|
|
include: ['creatureId'],
|
|
},
|
|
computed: {
|
|
tagsSearched(){
|
|
let or = [];
|
|
let not = [];
|
|
if (this.model.slotTags && this.model.slotTags.length){
|
|
or.push(this.model.slotTags);
|
|
}
|
|
this.model.extraTags?.forEach(extras => {
|
|
if (extras.tags?.length){
|
|
if(extras.operation === 'OR'){
|
|
or.push(extras.tags);
|
|
} else if (extras.operation === 'NOT'){
|
|
not.push(extras.tags);
|
|
}
|
|
}
|
|
});
|
|
return {or, not};
|
|
},
|
|
slotPropertyTypeName(){
|
|
if (!this.model) return;
|
|
if (!this.model.slotType) return 'Property';
|
|
let propName = getPropertyName(this.model.slotType);
|
|
return propName;
|
|
},
|
|
},
|
|
methods: {
|
|
searchChanged(val, ack){
|
|
this._subs['slotFillers'].setData('searchTerm', val);
|
|
this._subs['slotFillers'].setData('limit', undefined);
|
|
this.selectedNode = undefined;
|
|
this.searchValue = val;
|
|
setTimeout(ack, 200);
|
|
},
|
|
loadMore(){
|
|
if (this.currentLimit >= this.countAll) return;
|
|
this._subs['slotFillers'].setData('limit', this.currentLimit + 50);
|
|
},
|
|
insert(){
|
|
if (!this.selectedNode) return;
|
|
this.$store.dispatch('popDialogStack', this.selectedNode);
|
|
},
|
|
openPropertyDetails(id){
|
|
this.$store.commit('pushDialogStack', {
|
|
component: 'library-node-dialog',
|
|
elementId: id,
|
|
data: {
|
|
_id: id,
|
|
},
|
|
});
|
|
},
|
|
isDisabled(node){
|
|
return node._disabledBySlotFillerCondition ||
|
|
node._disabledByAlreadyAdded ||
|
|
(
|
|
node._disabledByQuantityFilled &&
|
|
!this.selectedNodeIds.includes(node._id)
|
|
)
|
|
}
|
|
},
|
|
meteor: {
|
|
$subscribe: {
|
|
'slotFillers'(){
|
|
return [this.slotId]
|
|
},
|
|
},
|
|
model(){
|
|
if (this.slotId){
|
|
return CreatureProperties.findOne(this.slotId);
|
|
} else if (this.dummySlot) {
|
|
let model = clone(this.dummySlot)
|
|
model.quantityExpectedResult = +model.quantityExpected;
|
|
model.spaceLeft = model.quantityExpectedResult;
|
|
return model;
|
|
}
|
|
},
|
|
creature(){
|
|
if (!this.creatureId) return {variables: {}};
|
|
return Creatures.findOne(this.creatureId);
|
|
},
|
|
currentLimit(){
|
|
return this._subs['slotFillers'].data('limit') || 50;
|
|
},
|
|
countAll(){
|
|
return this._subs['slotFillers'].data('countAll');
|
|
},
|
|
alreadyAdded(){
|
|
let added = new Set();
|
|
if (!this.model.unique) return added;
|
|
let ancestorId;
|
|
if (this.model.unique === 'uniqueInSlot'){
|
|
ancestorId = this.model._id;
|
|
} else if (this.model.unique === 'uniqueInCreature'){
|
|
ancestorId = this.creatureId;
|
|
}
|
|
CreatureProperties.find({
|
|
'ancestors.id': ancestorId,
|
|
libraryNodeId: {$exists: true},
|
|
removed: {$ne: true},
|
|
}, {
|
|
fields: {libraryNodeId: 1},
|
|
}).forEach(prop => {
|
|
added.add(prop.libraryNodeId);
|
|
});
|
|
return added;
|
|
},
|
|
totalQuantitySelected(){
|
|
let quantitySelected = 0;
|
|
LibraryNodes.find({
|
|
_id: {$in: this.selectedNodeIds}
|
|
}, {
|
|
fields: {slotQuantityFilled: 1},
|
|
}).forEach(node => {
|
|
if (Number.isFinite(node.slotQuantityFilled)){
|
|
quantitySelected += node.slotQuantityFilled;
|
|
} else {
|
|
quantitySelected += 1;
|
|
}
|
|
});
|
|
return quantitySelected;
|
|
},
|
|
spaceLeft(){
|
|
if (this.model.quantityExpectedResult === 0) return undefined;
|
|
return this.model.spaceLeft - this.totalQuantitySelected;
|
|
},
|
|
libraryNames(){
|
|
let names = {};
|
|
Libraries.find().forEach(lib => names[lib._id] = lib.name)
|
|
return names;
|
|
},
|
|
libraryNodes(){
|
|
let filter = getSlotFillFilter({slot: this.model});
|
|
let nodes = LibraryNodes.find(filter, {
|
|
sort: {name: 1, order: 1}
|
|
}).fetch();
|
|
let disabledNodeCount = 0;
|
|
let activeNodeCount = 0;
|
|
let lastActiveNodeId = undefined;
|
|
// Mark slotFillers whose condition isn't met or are too big to fit
|
|
// the quantity to fill
|
|
nodes.forEach(node => {
|
|
if (node.slotFillerCondition){
|
|
let {result} = evaluateString({
|
|
string: node.slotFillerCondition,
|
|
scope: this.creature.variables,
|
|
fn: 'reduce',
|
|
});
|
|
if (!result.value){
|
|
node._disabledBySlotFillerCondition = true;
|
|
disabledNodeCount += 1;
|
|
}
|
|
}
|
|
let quantityToFill = node.type === 'slotFiller' ? node.slotQuantityFilled : 1;
|
|
if (
|
|
quantityToFill > this.spaceLeft
|
|
){
|
|
node._disabledByQuantityFilled = true;
|
|
}
|
|
if (this.alreadyAdded.has(node._id)){
|
|
node._disabledByAlreadyAdded = true;
|
|
}
|
|
if (
|
|
!node._disabledBySlotFillerCondition &&
|
|
!node._disabledByQuantityFilled &&
|
|
!node._disabledByAlreadyAdded
|
|
){
|
|
activeNodeCount += 1;
|
|
lastActiveNodeId = node._id;
|
|
}
|
|
});
|
|
this.disabledNodeCount = disabledNodeCount;
|
|
if (
|
|
activeNodeCount === 1 &&
|
|
this.$subReady.slotFillers &&
|
|
this.currentLimit >= this.countAll
|
|
) {
|
|
this.selectedNodeIds = [lastActiveNodeId]
|
|
}
|
|
return nodes;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
.disabled {
|
|
opacity: 0.7;
|
|
}
|
|
</style>
|