tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixes Vuex error messages on Fields and Filter Page.

This commit is contained in:
Mateus Machado Luna 2018-04-13 11:54:38 -03:00
parent e358462ab8
commit cdbd16c42b
6 changed files with 121 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/admin/components/lists/fields-list.vue
View File

@ -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;

96
src/admin/components/lists/filters-list.vue
View File

@ -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})
this.deleteFilter(removedFilter.id)
.then(() => {
this.isLoadingFieldTypes = false;
// Reload Available Field Types List
this.updateListOfFields();
})
.catch(() => {
this.isLoadingFieldTypes = false;
});
.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;

10
src/js/store/modules/fields/actions.js
View File

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

2
src/js/store/modules/fields/mutations.js
View File

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

17
src/js/store/modules/filter/actions.js
View File

@ -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, {
@ -113,3 +124,7 @@ export const fetchFilterTypes = ({ commit} ) => {
});
});
}
export const updateFilteTypes = ( { commit }, filterTypes) => {
commit('setFilterTypes', filterTypes);
};

8
src/js/store/modules/filter/mutations.js
View File

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