<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.checkFlagNameUniqness() && !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' }), checkFlagNameUniqness () { let uniq = true const flagcolls_ids = Object.keys(this.flagcolls); flagcolls_ids.forEach((id) => { if(this.flagcolls[id].name === this.new_folder_name){ uniq = false } }) return uniq }, onCreateFlagColl () { console.log("UserFlags onCreateFlagColl", this.new_folder_name) if (this.new_folder_name.length > 4 && this.checkFlagNameUniqness()){ // create new flagcoll 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>