materio-d8/web/themes/custom/materiotheme/vuejs/components/User/UserFlags.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.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>