71 lines
1.5 KiB
Vue
71 lines
1.5 KiB
Vue
<template lang="html">
|
|
<dialog-base>
|
|
<v-toolbar-title slot="toolbar">
|
|
Add Characters
|
|
</v-toolbar-title>
|
|
<v-list>
|
|
<p v-if="!creatures.length">
|
|
There are no creatures to add or you have already added them all
|
|
</p>
|
|
<creature-list-tile
|
|
v-for="creature in creatures"
|
|
:key="creature._id"
|
|
:model="creature"
|
|
:is-selected="selected.includes(creature._id)"
|
|
selection
|
|
@click="toggleSelect(creature._id)"
|
|
/>
|
|
</v-list>
|
|
<template slot="actions">
|
|
<v-spacer />
|
|
<v-btn
|
|
text
|
|
color="primary"
|
|
@click="$store.dispatch('popDialogStack', selected)"
|
|
>
|
|
Add characters
|
|
</v-btn>
|
|
</template>
|
|
</dialog-base>
|
|
</template>
|
|
|
|
<script lang="js">
|
|
import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
|
|
import Creatures from '/imports/api/creature/creatures/Creatures.js';
|
|
import CreatureListTile from '/imports/ui/creature/creatureList/CreatureListTile.vue';
|
|
|
|
export default {
|
|
components: {
|
|
DialogBase,
|
|
CreatureListTile,
|
|
},
|
|
props: {
|
|
startingSelection: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
data(){return {
|
|
selected: [],
|
|
}},
|
|
meteor: {
|
|
creatures(){
|
|
return Creatures.find({_id: {$nin: this.startingSelection}});
|
|
},
|
|
},
|
|
methods: {
|
|
toggleSelect(id){
|
|
const index = this.selected.indexOf(id);
|
|
if (index === -1){
|
|
this.selected.push(id);
|
|
} else {
|
|
this.selected.splice(index, 1);
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
</style>
|