refactor: split 'components/collections/addCollection.vue' to 'addCollection', 'editCollection'

components/collections/addCollection.vue

@@ -1,14 +1,13 @@
 <template>
     <div>
-        <modal v-if="show" @close="hideModel">
+        <modal v-if="show" @close="hideModal">
             <div slot="header">
             <ul>
                 <li>
                 <div class="flex-wrap">
-                  <h3 class="title" v-if='!newCollection.hasOwnProperty("collectionIndex")'>New Collection</h3>
-                  <h3 class="title" v-if='newCollection.hasOwnProperty("collectionIndex")'>Edit Collection</h3>
+                  <h3 class="title">New Collection</h3>
                   <div>
-                    <button class="icon" @click="hideModel" >
+                    <button class="icon" @click="hideModal" >
                         <i class="material-icons">close</i>
                     </button>
                   </div>
@@ -19,21 +18,17 @@
             <div slot="body">
             <ul>
                 <li>
-                  <input type="text" v-model="newCollection.name" placeholder="My New Collection" />
+                  <input type="text" v-model="name" placeholder="My New Collection" />
                 </li>
             </ul>
             </div>
             <div slot="footer">
               <ul>
                 <li>
-                  <button class="icon" @click="addNewCollection" v-if='!newCollection.hasOwnProperty("collectionIndex")'>
+                  <button class="icon" @click="addNewCollection">
                     <i class="material-icons">add</i>
                     <span>Create</span>
                   </button>
-                  <button class="icon" @click="saveCollection" v-if='newCollection.hasOwnProperty("collectionIndex")'>
-                    <i class="material-icons">save</i>
-                    <span>Save</span>
-                  </button>
                 </li>
               </ul>
             </div>
@@ -47,47 +42,22 @@ import modal from "../../components/modal";
 export default {
     props: {
         show: Boolean,
-        editingCollection: Object,
     },
     components: {
         modal,
     },
     data() {
         return {
-            newCollection: {
-                name: '',
-                folders: [],
-                requests: [],
-            },
+          name: undefined,
         }
     },
-    watch: {
-        show() {
-            if (!this.editingCollection.collectionIndex) return;
-            this.newCollection = Object.assign({}, this.editingCollection);
-        },
-    },
     methods: {
         addNewCollection() {
-            const newCollection = Object.assign({}, this.newCollection);
-            this.$emit('new-collection', newCollection);
-            this.newCollection = {
-                name: '',
-                folders: [],
-                requests: [],
-            };
+            this.$store.commit('postwoman/addNewCollection', { name: this.$data.name })
+            this.$emit('hide-modal')
         },
-        saveCollection() {
-            const savedCollection = Object.assign({}, this.newCollection);
-            this.$emit('saved-collection', savedCollection);
-            this.newCollection = {
-                name: '',
-                folders: [],
-                requests: [],
-            };
-        },
-        hideModel() {
-            this.$emit('hide-model');
+        hideModal() {
+            this.$emit('hide-modal')
         },
     },
 };

components/collections/editCollection.vue

@@ -0,0 +1,67 @@
+<template>
+    <div>
+        <modal v-if="show" @close="hideModel">
+            <div slot='header'>
+            <ul>
+                <li>
+                <div class="flex-wrap">
+                  <h3 class="title">Edit Collection</h3>
+                  <div>
+                    <button class="icon" @click="hideModel" >
+                        <i class="material-icons">close</i>
+                    </button>
+                  </div>
+                </div>
+                </li>
+            </ul>
+            </div>
+            <div slot="body">
+            <ul>
+                <li>
+                  <input type="text" v-model="name" v-bind:placeholder="editingCollection.name" />
+                </li>
+            </ul>
+            </div>
+            <div slot="footer">
+              <ul>
+                <li>
+                  <button class="icon" @click="saveCollection">
+                    <i class="material-icons">save</i>
+                    <span>Save</span>
+                  </button>
+                </li>
+              </ul>
+            </div>
+        </modal>
+    </div>
+</template>
+
+<script>
+import modal from "../../components/modal";
+
+export default {
+    props: {
+        show: Boolean,
+        editingCollection: Object,
+        editingCollectionIndex: Number,
+    },
+    components: {
+        modal,
+    },
+    data() {
+        return {
+          name: undefined,
+        }
+    },
+    methods: {
+        saveCollection() {
+            const collectionUpdated = { ...this.$props.editingCollection, name: this.$data.name }
+            this.$store.commit('postwoman/editCollection', { collection: collectionUpdated, collectionIndex: this.$props.editingCollectionIndex })
+            this.$emit('hide-modal');
+        },
+        hideModel() {
+            this.$emit('hide-modal');
+        },
+    },
+};
+</script>

components/collections/importExportCollections.vue

@@ -64,7 +64,7 @@ export default {
     },
     methods: {
         hideModel() {
-            this.$emit('hide-model');
+            this.$emit('hide-modal');
         },
         openDialogChooseFileToReplaceWith() {
           this.$refs.inputChooseFileToReplaceWith.click();

components/collections/index.vue

@@ -1,25 +1,29 @@
 <template>
   <div class="collections-wrapper">
     <addCollection
-      v-bind:show="showAddModel"
-      v-on:new-collection="addNewCollection"
-      v-on:hide-model='toggleModal'
-      v-bind:editing-collection="selectedCollection"
-      v-on:saved-collection="savedCollection"
+      v-bind:show="showModalAdd"
+      v-on:hide-modal='displayModalAdd(false)'
       >
     </addCollection>
+    <editCollection
+      v-bind:show="showModalEdit"
+      v-bind:editingCollection="editingCollection"
+      v-bind:editingCollectionIndex="editingCollectionIndex"
+      v-on:hide-modal='displayModalEdit(false)'
+      >
+    </editCollection>
 
-    <importExportCollections :show="showImportExportModal" v-on:hide-model='toggleImportExport'></importExportCollections>
+    <importExportCollections :show="showModalImportExport" v-on:hide-modal='displayImportExport(false)'></importExportCollections>
 
     <div class='flex-wrap'>
       <div>
-        <button class="icon" @click="toggleModal">
+        <button class="icon" @click="displayModalAdd(true)">
           <i class="material-icons">add</i>
           <span>New</span>
         </button>
       </div>
       <div>
-        <button class="icon" @click="toggleImportExport">
+        <button class="icon" @click="displayImportExport(true)">
           <i class="material-icons">import_export</i>
           <span>Import / Export</span>
         </button>
@@ -31,7 +35,7 @@
         <collection
           :collection-index="index"
           :collection="collection"
-          v-on:edit-collection="editCollection"
+          v-on:edit-collection="editCollection(collection, index)"
           ></collection>
       </li>
       <li v-if="collections.length === 0">
@@ -50,6 +54,7 @@
 
 <script>
   import addCollection from "./addCollection";
+  import editCollection from "./editCollection";
   import importExportCollections from "./importExportCollections";
   import collection from './collection'
 
@@ -57,40 +62,42 @@
     components: {
       collection,
       addCollection,
+      editCollection,
       importExportCollections,
     },
     data() {
       return {
-        showAddModel: false,
-        showImportExportModal: false,
-        selectedCollection: {},
+        showModalAdd: false,
+        showModalEdit: false,
+        showModalImportExport: false,
+        editingCollection: undefined,
+        editingCollectionIndex: undefined,
       }
     },
     computed: {
       collections () {
-        return this.$store.state.postwoman.collections;
+        return this.$store.state.postwoman.collections
       }
     },
     methods: {
-      toggleModal() {
-        this.showAddModel = !this.showAddModel;
+      displayModalAdd(shouldDisplay) {
+        this.showModalAdd = shouldDisplay
       },
-      toggleImportExport() {
-        this.showImportExportModal = !this.showImportExportModal;
+      displayModalEdit(shouldDisplay) {
+        this.showModalEdit = shouldDisplay
+
+        if (!shouldDisplay) {
+          this.$data.editingCollection = undefined
+          this.$data.editingCollectionIndex = undefined
+        }
       },
-      addNewCollection(newCollection) {
-        this.$store.commit('postwoman/addCollection', newCollection);
-        this.showAddModel = false;
+      displayImportExport(shouldDisplay) {
+        this.showModalImportExport = shouldDisplay
       },
-      editCollection(payload) {
-        const { collection, collectionIndex } = payload;
-        this.selectedCollection = Object.assign({ collectionIndex }, collection);
-        this.showAddModel = true;
-      },
-      savedCollection(savedCollection) {
-        this.$store.commit('postwoman/saveCollection', { savedCollection });
-        this.showAddModel = false;
-        this.selectedCollection = {};
+      editCollection(collection, collectionIndex) {
+        this.$data.editingCollection = collection
+        this.$data.editingCollectionIndex = collectionIndex
+        this.displayModalEdit(true)
       },
     },
   }