refactor: split 'components/collections/addFolder.vue' to 'addFolder', 'editFolder'

components/collections/addFolder.vue

@@ -4,10 +4,9 @@
             <ul>
             <li>
               <div class="flex-wrap">
-                <h3 class="title" v-if='!newFolder.hasOwnProperty("folderIndex")'>New Folder</h3>
-                <h3 class="title" v-if='newFolder.hasOwnProperty("folderIndex")'>Edit Folder</h3>
+                <h3 class="title">New Folder</h3>
                 <div>
-                  <button class="icon" @click="hideModel">
+                  <button class="icon" @click="hideModal">
                   <i class="material-icons">close</i>
                   </button>
                 </div>
@@ -18,21 +17,17 @@
         <div slot="body">
             <ul>
             <li>
-                <input type="text" v-model="newFolder.name" placeholder="My New Folder" />
+                <input type="text" v-model="name" placeholder="My New Folder" />
             </li>
             </ul>
         </div>
         <div slot="footer">
           <ul>
             <li>
-            <button class="icon" @click="addNewFolder" v-if='!newFolder.hasOwnProperty("folderIndex")'>
+            <button class="icon" @click="addNewFolder">
               <i class="material-icons">add</i>
               <span>Create</span>
             </button>
-            <button class="icon" @click="saveFolder" v-if='newFolder.hasOwnProperty("folderIndex")'>
-              <i class="material-icons">save</i>
-              <span>Save</span>
-            </button>
             </li>
           </ul>
         </div>
@@ -44,45 +39,25 @@ import modal from "../../components/modal";
 
 export default {
     props: {
-        show: Boolean,
-        editingFolder: Object,
+        show            : Boolean,
+        collection      : Object,
+        collectionIndex : Number,
     },
     components: {
         modal,
     },
     data() {
         return {
-            newFolder: {
-                name: '',
-                requests: [],
-            },
+            name: undefined,
         }
     },
-    watch: {
-        show() {
-            if (!this.editingFolder.folderIndex) return;
-            this.newFolder = Object.assign({}, this.editingFolder);
-        },
-    },
     methods: {
         addNewFolder() {
-            const newFolder = Object.assign({}, this.newFolder);
-            this.$emit('new-folder', newFolder);
-            this.newFolder = {
-                name: '',
-                requests: [],
-            };
+            this.$store.commit('postwoman/addNewFolder', { folder: { name: this.$data.name }, collectionIndex: this.$props.collectionIndex })
+            this.hideModal()
         },
-        saveFolder() {
-            const savedFolder = Object.assign({}, this.newFolder);
-            this.$emit('saved-folder', savedFolder);
-            this.newFolder = {
-                name: '',
-                requests: [],
-            };
-        },
-        hideModel() {
-            this.$emit('hide-model');
+        hideModal() {
+            this.$emit('hide-modal')
         },
     },
 };