From cdbd16c42baa83d5207760108397fc180ccc5470 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Fri, 13 Apr 2018 11:54:38 -0300
Subject: [PATCH] Fixes Vuex error messages on Fields and Filter Page.

---
 src/admin/components/lists/fields-list.vue  |  52 ++++++----
 src/admin/components/lists/filters-list.vue | 106 +++++++++++---------
 src/js/store/modules/fields/actions.js      |  10 +-
 src/js/store/modules/fields/mutations.js    |   2 +-
 src/js/store/modules/filter/actions.js      |  19 +++-
 src/js/store/modules/filter/mutations.js    |   8 ++
 6 files changed, 121 insertions(+), 76 deletions(-)

diff --git a/src/admin/components/lists/fields-list.vue b/src/admin/components/lists/fields-list.vue
index 56d0e4da3..48b087a48 100644
--- a/src/admin/components/lists/fields-list.vue
+++ b/src/admin/components/lists/fields-list.vue
@@ -7,10 +7,10 @@
         <div class="columns">
             <div class="column">        
                 <draggable 
+                        v-model="activeFieldList"
                         class="active-fields-area"
                         @change="handleChange"
                         :class="{'fields-area-receive': isDraggingFromAvailable}" 
-                        :list="activeFieldList" 
                         :options="{ 
                                 group: { name:'fields', pull: false, put: true }, 
                                 sort: openedFieldId == '' || openedFieldId == undefined, 
@@ -98,7 +98,7 @@
                 <div class="field">
                     <h3 class="label">{{ $i18n.get('label_available_field_types') }}</h3>
                     <draggable 
-                            :list="availableFieldList" 
+                            v-model="availableFieldList" 
                             :options="{ 
                                 sort: false, 
                                 group: { name:'fields', pull: 'clone', put: false, revertClone: true },
@@ -148,6 +148,25 @@ export default {
         FieldEditionForm,
         GripIcon
     },
+    computed: {
+        availableFieldList: {
+            get() {
+                return this.getFieldTypes();
+            },
+            set(value) {
+                console.log("OIEEE")
+                return this.updateFieldTypes(value);
+            }
+        },
+        activeFieldList: {
+            get() {
+                return this.getFields();
+            },
+            set(value) {
+                this.updateFields(value);
+            }
+        }
+    },
     beforeRouteLeave ( to, from, next ) {
         let hasUnsavedForms = false;
         for (let editForm in this.editForms) {
@@ -172,21 +191,23 @@ export default {
     methods: {
         ...mapActions('fields', [
             'fetchFieldTypes',
+            'updateFieldTypes',
             'fetchFields',
             'sendField',
             'deleteField',
+            'updateFields',
             'updateCollectionFieldsOrder'
         ]),
         ...mapGetters('fields',[
             'getFieldTypes',
             'getFields'
         ]),
-        handleChange($event) {     
-            if ($event.added) {
-                this.addNewField($event.added.element, $event.added.newIndex);
-            } else if ($event.removed) {
-                this.removeField($event.removed.element);
-            } else if ($event.moved) {
+        handleChange(event) {     
+            if (event.added) {
+                this.addNewField(event.added.element, event.added.newIndex);
+            } else if (event.removed) {
+                this.removeField(event.removed.element);
+            } else if (event.moved) {
                 if (!this.isRepositoryLevel)
                     this.updateFieldsOrder(); 
             }
@@ -208,7 +229,6 @@ export default {
         },
         addFieldViaButton(fieldType) {
             let lastIndex = this.activeFieldList.length;
-            this.activeFieldList.push(fieldType);
             this.addNewField(fieldType, lastIndex);
             
             // Higlights the clicker field
@@ -231,11 +251,7 @@ export default {
         },
         removeField(removedField) {
             this.deleteField({ collectionId: this.collectionId, fieldId: removedField.id, isRepositoryLevel: this.isRepositoryLevel})
-            .then((field) => {
-                let index = this.activeFieldList.findIndex(deletedField => deletedField.id === field.id);
-                if (index >= 0) 
-                    this.activeFieldList.splice(index, 1);
-                
+            .then(() => {
                 if (!this.isRepositoryLevel)
                     this.updateFieldsOrder(); 
             })
@@ -275,14 +291,6 @@ export default {
             this.openedFieldId = '';
         }
     },
-    computed: {
-        availableFieldList() {
-            return this.getFieldTypes();
-        },
-        activeFieldList() {
-            return this.getFields();
-        }
-    },
     created() {
         this.isLoadingFieldTypes = true;
         this.isLoadingFields = true;
diff --git a/src/admin/components/lists/filters-list.vue b/src/admin/components/lists/filters-list.vue
index 032c76cee..9ff75636e 100644
--- a/src/admin/components/lists/filters-list.vue
+++ b/src/admin/components/lists/filters-list.vue
@@ -10,7 +10,7 @@
                         class="active-filters-area"
                         @change="handleChange"
                         :class="{'filters-area-receive': isDraggingFromAvailable}" 
-                        :list="activeFilterList" 
+                        v-model="activeFilterList" 
                         :options="{
                             group: { name:'filters', pull: false, put: true }, 
                             sort: openedFilterId == '' || openedFilterId == undefined, 
@@ -120,7 +120,7 @@
                     <h3 class="label"> {{ $i18n.get('label_available_field_types') }}</h3>
                     <draggable
                             v-if="availableFieldList.length > 0" 
-                            :list="availableFieldList" 
+                            v-model="availableFieldList" 
                             :options="{ 
                                 sort: false, 
                                 group: { name:'filters', pull: true, put: false, revertClone: true },
@@ -182,7 +182,19 @@ export default {
             allowedFilterTypes: [],
             selectedFilterType: {},
             choosenField: {},
-            newIndex: 0        
+            newIndex: 0,
+            availableFieldList: [],
+            filterTypes: []        
+        }
+    },
+    computed: {
+        activeFilterList: {
+            get() {
+                return this.getFilters();
+            },
+            set(value) {
+                this.updateFilters(value);
+            }
         }
     },
     components: {
@@ -216,6 +228,9 @@ export default {
             'fetchFilters',
             'sendFilter',
             'deleteFilter',
+            'addTemporaryFilter',
+            'deleteTemporaryFilter',
+            'updateFilters',
             'updateCollectionFiltersOrder'
         ]),
         ...mapGetters('filter',[
@@ -223,10 +238,10 @@ export default {
             'getFilterTypes'
         ]),
         ...mapActions('fields', [
-            'fetchFields'
+            'fetchFields',
         ]),
-        ...mapGetters('fields',[
-            'getFields'
+        ...mapGetters('fields', [
+            'getFields',
         ]),
         handleChange($event) {     
             if ($event.added) {
@@ -245,6 +260,21 @@ export default {
             }
             this.updateCollectionFiltersOrder({ collectionId: this.collectionId, filtersOrder: filtersOrder });
         },
+        updateListOfFields() {
+
+            let availableFields = JSON.parse(JSON.stringify(this.getFields())) ;
+
+            for (let activeFilter of this.activeFilterList) {
+                for (let i = availableFields.length - 1; i >= 0 ; i--) {
+                    if (activeFilter.field != undefined) {
+                        if (activeFilter.field.field_id == availableFields[i].id) 
+                            availableFields.splice(i, 1);
+                    }
+                }
+            }
+
+            this.availableFieldList = availableFields;
+        },
         onChangeEnable($event, index) {
             this.activeFilterList[index].enabled = $event;
             let filtersOrder = [];
@@ -252,13 +282,14 @@ export default {
                 filtersOrder.push({'id': filter.id, 'enabled': filter.enabled});
             }
             this.updateCollectionFiltersOrder({ collectionId: this.collectionId, filtersOrder: filtersOrder });
-
         },
         addFieldViaButton(fieldType, fieldIndex) {
             this.availableFieldList.splice(fieldIndex, 1);
-
             let lastIndex = this.activeFilterList.length;
-            this.activeFilterList.push(fieldType);
+            
+            // Updates store with temporary Filter
+            this.addTemporaryFilter(fieldType);
+
             this.addNewFilter(fieldType, lastIndex);
         },
         addNewFilter(choosenField, newIndex) {
@@ -307,24 +338,17 @@ export default {
             });
         },
         removeFilter(removedFilter) {
+
             this.deleteFilter(removedFilter.id)
-            .then((filter) => {
-                let index = this.activeFilterList.findIndex(deletedFilter => deletedFilter.id === filter.id);
-                if (index >= 0) 
-                    
-                    this.activeFilterList.splice(index, 1);
-                    this.isLoadingFieldTypes = true;
-                    this.fetchFields({collectionId: this.collectionId, isRepositoryLevel: this.isRepositoryLevel})
-                    .then(() => {
-                        this.isLoadingFieldTypes = false;
-                    })
-                    .catch(() => {
-                        this.isLoadingFieldTypes = false;
-                    });
-                
-                if (!this.isRepositoryLevel)
-                    this.updateFiltersOrder(); 
-            });
+            .then(() => {
+                // Reload Available Field Types List
+                this.updateListOfFields();
+   
+            })
+            .catch((error) => { this.$console.log(error)});
+        
+            if (!this.isRepositoryLevel)
+                this.updateFiltersOrder(); 
         },
         confirmSelectedFilterType() {
             this.createChoosenFilter();
@@ -334,7 +358,7 @@ export default {
            this.choosenField = {};
            this.allowedFilterTypes = [];
            this.selectedFilterType = {};
-           this.activeFilterList.splice(this.newIndex, 1);
+           this.deleteTemporaryFilter(this.newIndex);
            this.newIndex = 0;
         },
         editFilter(filter) {
@@ -350,7 +374,7 @@ export default {
                     this.choosenField = {};
                     this.allowedFilterTypes = [];
                     this.selectedFilterType = {};
-                    this.activeFilterList.splice(this.newIndex, 1);
+                    this.deleteTemporaryFilter(this.newIndex);
                     this.newIndex = 0;
                 }
                 this.openedFilterId = filter.id;
@@ -379,26 +403,6 @@ export default {
         }
 
     },
-    computed: {
-        availableFieldList() {
-            let availableFields = this.getFields();  
-            for (let activeFilter of this.activeFilterList) {
-                for (let i = availableFields.length - 1; i >= 0 ; i--) {
-                    if (activeFilter.field != undefined) {
-                        if (activeFilter.field.field_id == availableFields[i].id) 
-                            availableFields.splice(i, 1);
-                    }
-                }
-            }
-            return availableFields;
-        },
-        activeFilterList() {
-            return this.getFilters();
-        },
-        filterTypes() { 
-            return this.getFilterTypes();
-        }
-    },
     created() {
 
         this.isRepositoryLevel = this.$route.name == 'FiltersPage' ? true : false;
@@ -412,8 +416,9 @@ export default {
         this.isLoadingFilterTypes = true;
 
         this.fetchFilterTypes()
-            .then(() => {
+            .then((filterTypes) => {
                 this.isLoadingFilterTypes = false;
+                this.filterTypes = filterTypes;
             })
             .catch(() => {
                 this.isLoadingFilterTypes = false;
@@ -424,8 +429,9 @@ export default {
                 this.isLoadingFilters = false;
                 // Needs to be done after activeFilterList exists to compare and remove chosen fields.
                 this.fetchFields({collectionId: this.collectionId, isRepositoryLevel: this.isRepositoryLevel, isContextEdit: true })
-                    .then(() => {
+                    .then((fields) => {
                         this.isLoadingFieldTypes = false;
+                        this.updateListOfFields();
                     })
                     .catch(() => {
                         this.isLoadingFieldTypes = false;
diff --git a/src/js/store/modules/fields/actions.js b/src/js/store/modules/fields/actions.js
index ab9f79332..ce9ec337f 100644
--- a/src/js/store/modules/fields/actions.js
+++ b/src/js/store/modules/fields/actions.js
@@ -70,6 +70,9 @@ export const updateField = ( { commit }, { collectionId, fieldId, isRepositoryLe
     });
 };
 
+export const updateFields = ( { commit }, fields) => {
+    commit('setFields', fields);
+};
 
 export const deleteField = ({ commit }, { collectionId, fieldId, isRepositoryLevel }) => {
     let endpoint = '';
@@ -81,7 +84,7 @@ export const deleteField = ({ commit }, { collectionId, fieldId, isRepositoryLev
     return new Promise((resolve, reject) => {
         axios.tainacan.delete(endpoint)
         .then( res => {
-            commit('deleteField', { fieldId } );
+            commit('deleteField', res.data );
             resolve( res.data );
         }).catch((error) => { 
             console.log(error);
@@ -119,3 +122,8 @@ export const updateCollectionFieldsOrder = ({ commit, dispatch }, { collectionId
         });
     });
 }
+
+
+export const updateFieldTypes = ( { commit }, fieldTypes) => {
+    commit('setFieldTypes', fieldTypes);
+};
diff --git a/src/js/store/modules/fields/mutations.js b/src/js/store/modules/fields/mutations.js
index e6f1c0a7b..ef3764140 100644
--- a/src/js/store/modules/fields/mutations.js
+++ b/src/js/store/modules/fields/mutations.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 
 export const deleteField = ( state, field ) => {
-    let index = state.fields.findIndex(deletedField => deletedField.id === field.id);
+    let index = state.fields.findIndex(deletedField => deletedField.id == field.id);
     if (index >= 0) {
         state.fields.splice(index, 1);
     }
diff --git a/src/js/store/modules/filter/actions.js b/src/js/store/modules/filter/actions.js
index 70fb21176..f83ac58e4 100644
--- a/src/js/store/modules/filter/actions.js
+++ b/src/js/store/modules/filter/actions.js
@@ -68,6 +68,9 @@ export const updateFilter = ( { commit }, { filterId, index, options }) => {
     });
 };
 
+export const updateFilters = ( { commit }, filters) => {
+    commit('setFilters', filters);
+};
 
 export const deleteFilter = ({ commit }, filterId ) => {
     let endpoint = '/filters/' + filterId;
@@ -75,7 +78,7 @@ export const deleteFilter = ({ commit }, filterId ) => {
     return new Promise((resolve, reject) => {
         axios.tainacan.delete(endpoint, { data:{ is_permanently: false }})
         .then( res => {
-            commit('deleteFilter', filterId );
+            commit('deleteFilter', res.data );
             resolve( res.data );
         }).catch((error) => { 
             console.log(error);
@@ -85,6 +88,14 @@ export const deleteFilter = ({ commit }, filterId ) => {
     }); 
 };
 
+export const deleteTemporaryFilter = ({ commit }, index ) => {
+    commit('deleteTemporaryFilter', index );
+};
+
+export const addTemporaryFilter = ({ commit }, filter ) => {
+    commit('addTemporaryFilter', filter );
+};
+
 export const updateCollectionFiltersOrder = ({ commit }, { collectionId, filtersOrder }) => {
     return new Promise((resolve, reject) => {
         axios.tainacan.patch('/collections/' + collectionId, {
@@ -112,4 +123,8 @@ export const fetchFilterTypes = ({ commit} ) => {
             reject(error);
         });
     });
-}   
+}  
+
+export const updateFilteTypes = ( { commit }, filterTypes) => {
+    commit('setFilterTypes', filterTypes);
+};
\ No newline at end of file
diff --git a/src/js/store/modules/filter/mutations.js b/src/js/store/modules/filter/mutations.js
index cc9b3755a..4575a79da 100644
--- a/src/js/store/modules/filter/mutations.js
+++ b/src/js/store/modules/filter/mutations.js
@@ -43,6 +43,14 @@ export const deleteFilter = ( state, filter ) => {
     }
 }
 
+export const addTemporaryFilter = ( state, filter) => {
+    state.filters.push(filter);
+}
+
+export const deleteTemporaryFilter = ( state, index) => {
+    state.filters.splice(index, 1);
+}
+
 export const setSingleFilter = (state, { filter, index}) => {
     Vue.set( state.filters, index, filter );
 }