editFolder.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <modal v-if="show" @close="show = false">
  3. <div slot="header">
  4. <ul>
  5. <li>
  6. <div class="flex-wrap">
  7. <h3 class="title">{{ $t("edit_folder") }}</h3>
  8. <div>
  9. <button class="icon" @click="hideModal">
  10. <i class="material-icons">close</i>
  11. </button>
  12. </div>
  13. </div>
  14. </li>
  15. </ul>
  16. </div>
  17. <div slot="body">
  18. <ul>
  19. <li>
  20. <input type="text" v-model="name" :placeholder="folder.name" @keyup.enter="editFolder" />
  21. </li>
  22. </ul>
  23. </div>
  24. <div slot="footer">
  25. <div class="flex-wrap">
  26. <span></span>
  27. <span>
  28. <button class="icon" @click="hideModal">
  29. {{ $t("cancel") }}
  30. </button>
  31. <button class="icon primary" @click="editFolder">
  32. {{ $t("save") }}
  33. </button>
  34. </span>
  35. </div>
  36. </div>
  37. </modal>
  38. </template>
  39. <script>
  40. import { fb } from "../../functions/fb"
  41. export default {
  42. props: {
  43. show: Boolean,
  44. collection: Object,
  45. collectionIndex: Number,
  46. folder: Object,
  47. folderIndex: Number,
  48. },
  49. components: {
  50. modal: () => import("../../components/ui/modal"),
  51. },
  52. data() {
  53. return {
  54. name: undefined,
  55. }
  56. },
  57. methods: {
  58. syncCollections() {
  59. if (fb.currentUser !== null) {
  60. if (fb.currentSettings[0].value) {
  61. fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
  62. }
  63. }
  64. },
  65. editFolder() {
  66. this.$store.commit("postwoman/editFolder", {
  67. collectionIndex: this.$props.collectionIndex,
  68. folder: { ...this.$props.folder, name: this.$data.name },
  69. folderIndex: this.$props.folderIndex,
  70. })
  71. this.hideModal()
  72. this.syncCollections()
  73. },
  74. hideModal() {
  75. this.$emit("hide-modal")
  76. },
  77. },
  78. }
  79. </script>