104 lines
2.6 KiB
Vue
104 lines
2.6 KiB
Vue
<template lang="html">
|
|
<draggable
|
|
v-model="dataCreatures"
|
|
style="min-height: 24px;"
|
|
:sort="false"
|
|
:group="`creature-list`"
|
|
ghost-class="ghost"
|
|
draggable=".creature"
|
|
handle=".handle"
|
|
:animation="200"
|
|
@change="draggableChange"
|
|
>
|
|
<creature-list-tile
|
|
v-for="creature in dataCreatures"
|
|
:key="creature._id"
|
|
class="creature"
|
|
:model="creature"
|
|
:selection="selection"
|
|
:is-selected="selectedCreature === creature._id"
|
|
v-bind="selection ? {} : {to: creature.url}"
|
|
:dense="dense"
|
|
@click="$emit('creature-selected', creature._id)"
|
|
/>
|
|
</draggable>
|
|
</template>
|
|
|
|
<script lang="js">
|
|
import CreatureListTile from '/imports/ui/creature/creatureList/CreatureListTile.vue';
|
|
import draggable from 'vuedraggable';
|
|
import moveCreatureToFolder from '/imports/api/creature/creatureFolders/methods.js/moveCreatureToFolder.js';
|
|
import {snackbar} from '/imports/ui/components/snackbars/SnackbarQueue.js';
|
|
|
|
export default {
|
|
components: {
|
|
CreatureListTile,
|
|
draggable,
|
|
},
|
|
props: {
|
|
creatures: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
folderId: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
selection: Boolean,
|
|
selectedCreature: {
|
|
type: String,
|
|
default: undefined,
|
|
},
|
|
dense: Boolean,
|
|
},
|
|
data(){return {
|
|
dataCreatures: [],
|
|
}},
|
|
watch:{
|
|
creatures(newValue){
|
|
this.dataCreatures = newValue;
|
|
},
|
|
},
|
|
mounted(){
|
|
this.dataCreatures = this.creatures;
|
|
},
|
|
methods: {
|
|
draggableChange({added, moved}){
|
|
let event = added || moved;
|
|
if (event){
|
|
/*
|
|
// If this item is now adjacent to another, set the order accordingly
|
|
let order;
|
|
let before = this.dataCreatures[event.newIndex - 1];
|
|
let after = this.dataCreatures[event.newIndex + 1];
|
|
if (before && before._id){
|
|
order = before.order + 0.5;
|
|
} else if (after && after._id) {
|
|
order = after.order - 0.5;
|
|
} else {
|
|
order = -0.5;
|
|
}
|
|
*/
|
|
let doc = event.element;
|
|
moveCreatureToFolder.call({
|
|
creatureId: doc._id,
|
|
folderId: this.folderId
|
|
}, error => {
|
|
if (!error) return;
|
|
console.error(error);
|
|
snackbar({
|
|
text: error.reason,
|
|
});
|
|
});
|
|
}
|
|
},
|
|
selectionChange(index){
|
|
this.$emit('creatureSelected', this.dataCreatures[index]._id)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
</style>
|