153 lines
4.5 KiB
Vue
153 lines
4.5 KiB
Vue
<template lang="html">
|
|
<div id="user-flags">
|
|
<h2
|
|
class="mdi mdi-folder-outline"
|
|
><span>{{ $t("materio.My folders") }} ({{collsLength}})</span></h2>
|
|
<ul>
|
|
<li v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
|
|
<h5
|
|
:flagcollid="coll.id"
|
|
@click.prevent="onOpenFlagColl(coll.id)"
|
|
>{{ coll.name }} <span class="length">({{ coll.items.length }})</span></h5>
|
|
<div class="actions">
|
|
<span
|
|
class="delete-btn mdi"
|
|
:class="flagDeletingClassObj"
|
|
:flagcollid="coll.id"
|
|
@click.prevent="onDeleteFlagColl"
|
|
/>
|
|
</div>
|
|
</li>
|
|
<li v-if="collsLength<15" class="create-flag">
|
|
<input
|
|
:placeholder="$t('materio.new folder')"
|
|
v-model="new_folder_name"
|
|
@keyup.enter.prevent.stop="onCreateFlagColl"
|
|
/>
|
|
<span
|
|
class="add-btn mdi"
|
|
:class="addFlagBtnClassObj"
|
|
@click.prevent.stop="onCreateFlagColl"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
<v-dialog @closed="dialogEvent('closed')"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import { mapState, mapActions } from 'vuex'
|
|
|
|
export default {
|
|
name: "userFlags",
|
|
data: () => ({
|
|
new_folder_name: "",
|
|
is_creating_folder: false,
|
|
is_deleting_folder: false
|
|
}),
|
|
computed: {
|
|
...mapState({
|
|
flagcolls: state => state.User.flagcolls
|
|
}),
|
|
collsLength() {
|
|
return Object.keys(this.flagcolls).length
|
|
},
|
|
addFlagBtnClassObj() {
|
|
return {
|
|
'mdi-plus-circle-outline': !this.is_creating_folder,
|
|
'mdi-loading': this.is_creating_folder,
|
|
active: this.new_folder_name.length > 4 && !this.is_creating_folder,
|
|
loading: this.is_creating_folder
|
|
}
|
|
},
|
|
flagDeletingClassObj() {
|
|
return {
|
|
'mdi-trash-can-outline': !this.is_deleting_folder,
|
|
'mdi-loading': this.is_deleting_folder,
|
|
'loading': this.is_deleting_folder
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions({
|
|
createFlagColl: 'User/createFlagColl',
|
|
deleteFlagColl: 'User/deleteFlagColl',
|
|
openFlagColl: 'User/openFlagColl',
|
|
openCloseHamMenu: 'Common/openCloseHamMenu'
|
|
}),
|
|
onCreateFlagColl () {
|
|
console.log("UserFlags onCreateFlagColl", this.new_folder_name)
|
|
this.is_creating_folder = true;
|
|
this.createFlagColl(this.new_folder_name)
|
|
.then(data => {
|
|
console.log("onCreateFlagColl then", data)
|
|
this.new_folder_name = "";
|
|
this.is_creating_folder = false;
|
|
})
|
|
},
|
|
onDeleteFlagColl (e) {
|
|
const flagcollid = e.target.getAttribute('flagcollid');
|
|
console.log("UserFlags onDeleteFlagColl", flagcollid)
|
|
this.is_deleting_folder = flagcollid;
|
|
// TODO: confirm suppression
|
|
this.confirmDeleteFlagColl(flagcollid)
|
|
},
|
|
confirmDeleteFlagColl (flagcollid){
|
|
// console.log('confirmDeleteFlagCOll', flagcollid, this.flagcolls)
|
|
// const index = this.flagcolls.findIndex(i => i.id === flagcollid)
|
|
let coll = this.flagcolls[flagcollid]
|
|
// console.log("coll to delete", coll)
|
|
this.$modal.show('dialog',
|
|
{ // component props
|
|
title: this.$t("materio.Folder delete"),
|
|
text: this.$t(`materio.Please confirm the definitive deletion of {name} ?`, { name: coll.name }),
|
|
buttons: [
|
|
{
|
|
title: this.$t('default.Cancel'),
|
|
default: true,
|
|
handler: () => {
|
|
// this.is_deleting_folder = false;
|
|
this.$modal.hide('dialog')
|
|
}
|
|
},
|
|
{
|
|
title: this.$t('default.Delete'),
|
|
handler: () => {
|
|
// console.log('deletion confirmed', flagcollid)
|
|
this.deleteFlagColl(flagcollid)
|
|
.then(() => {
|
|
// console.log("onDeleteFlagColl then", data)
|
|
// this.is_deleting_folder = false;
|
|
this.$modal.hide('dialog')
|
|
})
|
|
}
|
|
}
|
|
]
|
|
}
|
|
)
|
|
},
|
|
dialogEvent (eventName) {
|
|
console.log("dialog event", eventName)
|
|
switch(eventName){
|
|
case 'closed':
|
|
this.is_deleting_folder = false
|
|
}
|
|
},
|
|
onOpenFlagColl (flagcollid) {
|
|
// const flagcollid = e.target.getAttribute('flagcollid');
|
|
console.log("UserFlags onOpenFlagColl", flagcollid)
|
|
this.openCloseHamMenu(false)
|
|
this.openFlagColl(flagcollid)
|
|
.then(() => {
|
|
// console.log("onDeleteFlagColl then", data)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|