1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 |
- <template lang="html">
- <div id="user-flags">
- <h2
- class="mdi mdi-folder-outline"
- >My folders</h2>
- <ul>
- <li v-if="flags" v-for="flag in flags" :key="flag.id">
- <h5>{{ flag.name }}</h5>
- <div class="actions">
- <span
- class="delete-btn mdi"
- :class="flagDeletingClassObj"
- :flagid="flag.id"
- @click.prevent="onDeleteFlag"
- />
- </div>
- </li>
- <li class="create-flag">
- <input
- placeholder="new folder"
- v-model="new_folder_name"
- />
- <span
- class="add-btn mdi"
- :class="addFlagBtnClassObj"
- @click.prevent="onCreateFlag"
- />
- </li>
- </ul>
- </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({
- flags: state => state.User.flags
- }),
- 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({
- createFlag: 'User/createFlag',
- deleteFlag: 'User/deleteFlag'
- }),
- onCreateFlag () {
- console.log("UserFlags onCreateFlag", this.new_folder_name)
- this.is_creating_folder = true;
- this.createFlag(this.new_folder_name)
- .then(data => {
- console.log("onCreateFlag then", data);
- this.new_folder_name = "";
- this.is_creating_folder = false;
- })
- },
- onDeleteFlag (e) {
- let flagid = e.target.getAttribute('flagid');
- console.log("UserFlags onDeleteFlag", flagid);
- this.is_deleting_folder = flagid;
- this.deleteFlag(flagid)
- .then(() => {
- // console.log("onDeleteFlag then", data);
- this.is_deleting_folder = false;
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- </style>
|