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

This commit is contained in:
vlad0337187
2019-10-24 02:38:01 +03:00
parent 770556aa74
commit 932b92e67d
5 changed files with 130 additions and 75 deletions

View File

@@ -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')
},
},
};