materio-d9/web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue

166 lines
5.0 KiB
Vue
Raw Normal View History

<template lang="html">
<div id="user-flags">
2020-11-19 21:43:56 +01:00
<h2
class="mdi mdi-folder-outline"
2021-03-18 23:13:50 +01:00
><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)"
2021-03-11 19:14:20 +01:00
>{{ coll.name }} <span class="length">({{ coll.items.length }})</span></h5>
2020-11-19 21:43:56 +01:00
<div class="actions">
<span
2020-11-20 10:39:19 +01:00
class="delete-btn mdi"
:class="flagDeletingClassObj"
2020-11-24 14:07:10 +01:00
:flagcollid="coll.id"
@click.prevent="onDeleteFlagColl"
2020-11-19 21:43:56 +01:00
/>
</div>
</li>
2020-12-01 20:40:37 +01:00
<li v-if="collsLength<15" class="create-flag">
2020-11-19 17:09:48 +01:00
<input
2021-06-08 12:06:41 +02:00
:placeholder="$t('materio.new folder')"
2020-11-19 17:09:48 +01:00
v-model="new_folder_name"
2020-12-01 20:40:37 +01:00
@keyup.enter.prevent.stop="onCreateFlagColl"
2020-11-19 17:09:48 +01:00
/>
<span
2020-11-20 10:39:19 +01:00
class="add-btn mdi"
:class="addFlagBtnClassObj"
@click.prevent.stop="onCreateFlagColl"
2020-11-19 17:09:48 +01:00
/>
</li>
</ul>
<v-dialog @closed="dialogEvent('closed')"/>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
name: "userFlags",
data: () => ({
2020-11-19 21:43:56 +01:00
new_folder_name: "",
2020-11-20 10:39:19 +01:00
is_creating_folder: false,
is_deleting_folder: false
}),
computed: {
...mapState({
2020-11-24 14:07:10 +01:00
flagcolls: state => state.User.flagcolls
2020-11-20 10:39:19 +01:00
}),
2020-12-01 20:40:37 +01:00
collsLength() {
return Object.keys(this.flagcolls).length
},
2020-11-20 10:39:19 +01:00
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,
2020-11-20 10:39:19 +01:00
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({
2020-11-24 14:07:10 +01:00
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
},
2020-11-24 14:07:10 +01:00
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;
})
}
2020-11-19 19:02:04 +01:00
},
2020-11-24 14:07:10 +01:00
onDeleteFlagColl (e) {
const flagcollid = e.target.getAttribute('flagcollid');
console.log("UserFlags onDeleteFlagColl", flagcollid)
2020-11-24 14:07:10 +01:00
this.is_deleting_folder = flagcollid;
2021-03-11 19:00:09 +01:00
// TODO: confirm suppression
this.confirmDeleteFlagColl(flagcollid)
},
confirmDeleteFlagColl (flagcollid){
// console.log('confirmDeleteFlagCOll', flagcollid, this.flagcolls)
2021-03-11 19:00:09 +01:00
// 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')
})
}
2021-03-11 19:00:09 +01:00
}
]
}
)
},
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>
2020-11-19 21:43:56 +01:00
</style>