UserFlags.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. <template lang="html">
  2. <div id="user-flags">
  3. <h2
  4. class="mdi mdi-folder-outline"
  5. ><span>{{ $t("materio.My folders") }} ({{collsLength}})</span></h2>
  6. <ul>
  7. <li v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
  8. <h5
  9. :flagcollid="coll.id"
  10. @click.prevent="onOpenFlagColl(coll.id)"
  11. >{{ coll.name }} <span class="length">({{ coll.items.length }})</span></h5>
  12. <div class="actions">
  13. <span
  14. class="delete-btn mdi"
  15. :class="flagDeletingClassObj"
  16. :flagcollid="coll.id"
  17. @click.prevent="onDeleteFlagColl"
  18. />
  19. </div>
  20. </li>
  21. <li v-if="collsLength<15" class="create-flag">
  22. <input
  23. :placeholder="$t('materio.new folder')"
  24. v-model="new_folder_name"
  25. @keyup.enter.prevent.stop="onCreateFlagColl"
  26. />
  27. <span
  28. class="add-btn mdi"
  29. :class="addFlagBtnClassObj"
  30. @click.prevent.stop="onCreateFlagColl"
  31. />
  32. </li>
  33. </ul>
  34. <v-dialog @closed="dialogEvent('closed')"/>
  35. </div>
  36. </template>
  37. <script>
  38. import { mapState, mapActions } from 'vuex'
  39. export default {
  40. name: "userFlags",
  41. data: () => ({
  42. new_folder_name: "",
  43. is_creating_folder: false,
  44. is_deleting_folder: false
  45. }),
  46. computed: {
  47. ...mapState({
  48. flagcolls: state => state.User.flagcolls
  49. }),
  50. collsLength() {
  51. return Object.keys(this.flagcolls).length
  52. },
  53. addFlagBtnClassObj() {
  54. return {
  55. 'mdi-plus-circle-outline': !this.is_creating_folder,
  56. 'mdi-loading': this.is_creating_folder,
  57. active: this.new_folder_name.length > 4 && !this.is_creating_folder,
  58. loading: this.is_creating_folder
  59. }
  60. },
  61. flagDeletingClassObj() {
  62. return {
  63. 'mdi-trash-can-outline': !this.is_deleting_folder,
  64. 'mdi-loading': this.is_deleting_folder,
  65. 'loading': this.is_deleting_folder
  66. }
  67. }
  68. },
  69. methods: {
  70. ...mapActions({
  71. createFlagColl: 'User/createFlagColl',
  72. deleteFlagColl: 'User/deleteFlagColl',
  73. openFlagColl: 'User/openFlagColl',
  74. openCloseHamMenu: 'Common/openCloseHamMenu'
  75. }),
  76. onCreateFlagColl () {
  77. console.log("UserFlags onCreateFlagColl", this.new_folder_name)
  78. this.is_creating_folder = true;
  79. this.createFlagColl(this.new_folder_name)
  80. .then(data => {
  81. console.log("onCreateFlagColl then", data)
  82. this.new_folder_name = "";
  83. this.is_creating_folder = false;
  84. })
  85. },
  86. onDeleteFlagColl (e) {
  87. const flagcollid = e.target.getAttribute('flagcollid');
  88. console.log("UserFlags onDeleteFlagColl", flagcollid)
  89. this.is_deleting_folder = flagcollid;
  90. // TODO: confirm suppression
  91. this.confirmDeleteFlagColl(flagcollid)
  92. },
  93. confirmDeleteFlagColl (flagcollid){
  94. // console.log('confirmDeleteFlagCOll', flagcollid, this.flagcolls)
  95. // const index = this.flagcolls.findIndex(i => i.id === flagcollid)
  96. let coll = this.flagcolls[flagcollid]
  97. // console.log("coll to delete", coll)
  98. this.$modal.show('dialog',
  99. { // component props
  100. title: this.$t("materio.Folder delete"),
  101. text: this.$t(`materio.Please confirm the definitive deletion of {name} ?`, { name: coll.name }),
  102. buttons: [
  103. {
  104. title: this.$t('default.Cancel'),
  105. default: true,
  106. handler: () => {
  107. // this.is_deleting_folder = false;
  108. this.$modal.hide('dialog')
  109. }
  110. },
  111. {
  112. title: this.$t('default.Delete'),
  113. handler: () => {
  114. // console.log('deletion confirmed', flagcollid)
  115. this.deleteFlagColl(flagcollid)
  116. .then(() => {
  117. // console.log("onDeleteFlagColl then", data)
  118. // this.is_deleting_folder = false;
  119. this.$modal.hide('dialog')
  120. })
  121. }
  122. }
  123. ]
  124. }
  125. )
  126. },
  127. dialogEvent (eventName) {
  128. console.log("dialog event", eventName)
  129. switch(eventName){
  130. case 'closed':
  131. this.is_deleting_folder = false
  132. }
  133. },
  134. onOpenFlagColl (flagcollid) {
  135. // const flagcollid = e.target.getAttribute('flagcollid');
  136. console.log("UserFlags onOpenFlagColl", flagcollid)
  137. this.openCloseHamMenu(false)
  138. this.openFlagColl(flagcollid)
  139. .then(() => {
  140. // console.log("onDeleteFlagColl then", data)
  141. })
  142. }
  143. }
  144. }
  145. </script>
  146. <style lang="scss" scoped>
  147. </style>