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

<template lang="html">
  <div id="user-flags">
    <h4
      class="mdi mdi-folder-outline"
    >My folders</h4>
    <ul>
      <li  v-if="flags" v-for="flag in flags" :key="flag.id">
        <h5>{{ flag.name }}</h5>
        <span
          class="mdi mdi-trash-can-outline"
          :flagid="flag.id"
          @click.prevent="onDeleteFlag"
        />
      </li>
      <li ref="create-flag">
        <span class="mdi mdi-folder-plus-outline"/>
        <input
          placeholder="new folder"
          v-model="new_folder_name"
        />
        <span
          class="mdi mdi-plus-box"
          v-if="new_folder_name"
          @click.prevent="onCreateFlag"
        />
      </li>
    </ul>
  </div>
</template>

<script>

import { mapState, mapActions } from 'vuex'

export default {
  name: "userFlags",
  data: () => ({
    new_folder_name: ""
  }),
  computed: {
    ...mapState({
      flags: state => state.User.flags
    })
  },
  methods: {
    ...mapActions({
      createFlag: 'User/createFlag',
      deleteFlag: 'User/deleteFlag'
    }),
    onCreateFlag () {
      console.log("UserFlags onCreateFlag", this.new_folder_name)
      this.createFlag(this.new_folder_name)
        .then(data => {
          console.log("onCreateFlag then", data);
          this.new_folder_name = "";
        })
    },
    onDeleteFlag (e) {
      let flagid = e.target.getAttribute('flagid');
      console.log("UserFlags onDeleteFlag", flagid);
      this.deleteFlag(flagid)
        .then(data => {
          console.log("onDeleteFlag then", data);
          this.new_folder_name = "";
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  li{
    width:100%;
    // cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: nowrap;
    h5{
      // flex-grow:10;
      width:100%;
    }
    input{
      border: none
    }
    span.mdi{
      flex-basis:1em;
    }
    span.mdi-plus-box,
    span.mdi-trash-can-outline{
      cursor: pointer;
    }
  }
</style>