Fixes Vuex error messages on Fields and Filter Page.
This commit is contained in:
parent
e358462ab8
commit
cdbd16c42b
|
@ -7,10 +7,10 @@
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<draggable
|
<draggable
|
||||||
|
v-model="activeFieldList"
|
||||||
class="active-fields-area"
|
class="active-fields-area"
|
||||||
@change="handleChange"
|
@change="handleChange"
|
||||||
:class="{'fields-area-receive': isDraggingFromAvailable}"
|
:class="{'fields-area-receive': isDraggingFromAvailable}"
|
||||||
:list="activeFieldList"
|
|
||||||
:options="{
|
:options="{
|
||||||
group: { name:'fields', pull: false, put: true },
|
group: { name:'fields', pull: false, put: true },
|
||||||
sort: openedFieldId == '' || openedFieldId == undefined,
|
sort: openedFieldId == '' || openedFieldId == undefined,
|
||||||
|
@ -98,7 +98,7 @@
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<h3 class="label">{{ $i18n.get('label_available_field_types') }}</h3>
|
<h3 class="label">{{ $i18n.get('label_available_field_types') }}</h3>
|
||||||
<draggable
|
<draggable
|
||||||
:list="availableFieldList"
|
v-model="availableFieldList"
|
||||||
:options="{
|
:options="{
|
||||||
sort: false,
|
sort: false,
|
||||||
group: { name:'fields', pull: 'clone', put: false, revertClone: true },
|
group: { name:'fields', pull: 'clone', put: false, revertClone: true },
|
||||||
|
@ -148,6 +148,25 @@ export default {
|
||||||
FieldEditionForm,
|
FieldEditionForm,
|
||||||
GripIcon
|
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 ) {
|
beforeRouteLeave ( to, from, next ) {
|
||||||
let hasUnsavedForms = false;
|
let hasUnsavedForms = false;
|
||||||
for (let editForm in this.editForms) {
|
for (let editForm in this.editForms) {
|
||||||
|
@ -172,21 +191,23 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions('fields', [
|
...mapActions('fields', [
|
||||||
'fetchFieldTypes',
|
'fetchFieldTypes',
|
||||||
|
'updateFieldTypes',
|
||||||
'fetchFields',
|
'fetchFields',
|
||||||
'sendField',
|
'sendField',
|
||||||
'deleteField',
|
'deleteField',
|
||||||
|
'updateFields',
|
||||||
'updateCollectionFieldsOrder'
|
'updateCollectionFieldsOrder'
|
||||||
]),
|
]),
|
||||||
...mapGetters('fields',[
|
...mapGetters('fields',[
|
||||||
'getFieldTypes',
|
'getFieldTypes',
|
||||||
'getFields'
|
'getFields'
|
||||||
]),
|
]),
|
||||||
handleChange($event) {
|
handleChange(event) {
|
||||||
if ($event.added) {
|
if (event.added) {
|
||||||
this.addNewField($event.added.element, $event.added.newIndex);
|
this.addNewField(event.added.element, event.added.newIndex);
|
||||||
} else if ($event.removed) {
|
} else if (event.removed) {
|
||||||
this.removeField($event.removed.element);
|
this.removeField(event.removed.element);
|
||||||
} else if ($event.moved) {
|
} else if (event.moved) {
|
||||||
if (!this.isRepositoryLevel)
|
if (!this.isRepositoryLevel)
|
||||||
this.updateFieldsOrder();
|
this.updateFieldsOrder();
|
||||||
}
|
}
|
||||||
|
@ -208,7 +229,6 @@ export default {
|
||||||
},
|
},
|
||||||
addFieldViaButton(fieldType) {
|
addFieldViaButton(fieldType) {
|
||||||
let lastIndex = this.activeFieldList.length;
|
let lastIndex = this.activeFieldList.length;
|
||||||
this.activeFieldList.push(fieldType);
|
|
||||||
this.addNewField(fieldType, lastIndex);
|
this.addNewField(fieldType, lastIndex);
|
||||||
|
|
||||||
// Higlights the clicker field
|
// Higlights the clicker field
|
||||||
|
@ -231,11 +251,7 @@ export default {
|
||||||
},
|
},
|
||||||
removeField(removedField) {
|
removeField(removedField) {
|
||||||
this.deleteField({ collectionId: this.collectionId, fieldId: removedField.id, isRepositoryLevel: this.isRepositoryLevel})
|
this.deleteField({ collectionId: this.collectionId, fieldId: removedField.id, isRepositoryLevel: this.isRepositoryLevel})
|
||||||
.then((field) => {
|
.then(() => {
|
||||||
let index = this.activeFieldList.findIndex(deletedField => deletedField.id === field.id);
|
|
||||||
if (index >= 0)
|
|
||||||
this.activeFieldList.splice(index, 1);
|
|
||||||
|
|
||||||
if (!this.isRepositoryLevel)
|
if (!this.isRepositoryLevel)
|
||||||
this.updateFieldsOrder();
|
this.updateFieldsOrder();
|
||||||
})
|
})
|
||||||
|
@ -275,14 +291,6 @@ export default {
|
||||||
this.openedFieldId = '';
|
this.openedFieldId = '';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
availableFieldList() {
|
|
||||||
return this.getFieldTypes();
|
|
||||||
},
|
|
||||||
activeFieldList() {
|
|
||||||
return this.getFields();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
created() {
|
||||||
this.isLoadingFieldTypes = true;
|
this.isLoadingFieldTypes = true;
|
||||||
this.isLoadingFields = true;
|
this.isLoadingFields = true;
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
class="active-filters-area"
|
class="active-filters-area"
|
||||||
@change="handleChange"
|
@change="handleChange"
|
||||||
:class="{'filters-area-receive': isDraggingFromAvailable}"
|
:class="{'filters-area-receive': isDraggingFromAvailable}"
|
||||||
:list="activeFilterList"
|
v-model="activeFilterList"
|
||||||
:options="{
|
:options="{
|
||||||
group: { name:'filters', pull: false, put: true },
|
group: { name:'filters', pull: false, put: true },
|
||||||
sort: openedFilterId == '' || openedFilterId == undefined,
|
sort: openedFilterId == '' || openedFilterId == undefined,
|
||||||
|
@ -120,7 +120,7 @@
|
||||||
<h3 class="label"> {{ $i18n.get('label_available_field_types') }}</h3>
|
<h3 class="label"> {{ $i18n.get('label_available_field_types') }}</h3>
|
||||||
<draggable
|
<draggable
|
||||||
v-if="availableFieldList.length > 0"
|
v-if="availableFieldList.length > 0"
|
||||||
:list="availableFieldList"
|
v-model="availableFieldList"
|
||||||
:options="{
|
:options="{
|
||||||
sort: false,
|
sort: false,
|
||||||
group: { name:'filters', pull: true, put: false, revertClone: true },
|
group: { name:'filters', pull: true, put: false, revertClone: true },
|
||||||
|
@ -182,7 +182,19 @@ export default {
|
||||||
allowedFilterTypes: [],
|
allowedFilterTypes: [],
|
||||||
selectedFilterType: {},
|
selectedFilterType: {},
|
||||||
choosenField: {},
|
choosenField: {},
|
||||||
newIndex: 0
|
newIndex: 0,
|
||||||
|
availableFieldList: [],
|
||||||
|
filterTypes: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
activeFilterList: {
|
||||||
|
get() {
|
||||||
|
return this.getFilters();
|
||||||
|
},
|
||||||
|
set(value) {
|
||||||
|
this.updateFilters(value);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
@ -216,6 +228,9 @@ export default {
|
||||||
'fetchFilters',
|
'fetchFilters',
|
||||||
'sendFilter',
|
'sendFilter',
|
||||||
'deleteFilter',
|
'deleteFilter',
|
||||||
|
'addTemporaryFilter',
|
||||||
|
'deleteTemporaryFilter',
|
||||||
|
'updateFilters',
|
||||||
'updateCollectionFiltersOrder'
|
'updateCollectionFiltersOrder'
|
||||||
]),
|
]),
|
||||||
...mapGetters('filter',[
|
...mapGetters('filter',[
|
||||||
|
@ -223,10 +238,10 @@ export default {
|
||||||
'getFilterTypes'
|
'getFilterTypes'
|
||||||
]),
|
]),
|
||||||
...mapActions('fields', [
|
...mapActions('fields', [
|
||||||
'fetchFields'
|
'fetchFields',
|
||||||
]),
|
]),
|
||||||
...mapGetters('fields',[
|
...mapGetters('fields', [
|
||||||
'getFields'
|
'getFields',
|
||||||
]),
|
]),
|
||||||
handleChange($event) {
|
handleChange($event) {
|
||||||
if ($event.added) {
|
if ($event.added) {
|
||||||
|
@ -245,6 +260,21 @@ export default {
|
||||||
}
|
}
|
||||||
this.updateCollectionFiltersOrder({ collectionId: this.collectionId, filtersOrder: filtersOrder });
|
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) {
|
onChangeEnable($event, index) {
|
||||||
this.activeFilterList[index].enabled = $event;
|
this.activeFilterList[index].enabled = $event;
|
||||||
let filtersOrder = [];
|
let filtersOrder = [];
|
||||||
|
@ -252,13 +282,14 @@ export default {
|
||||||
filtersOrder.push({'id': filter.id, 'enabled': filter.enabled});
|
filtersOrder.push({'id': filter.id, 'enabled': filter.enabled});
|
||||||
}
|
}
|
||||||
this.updateCollectionFiltersOrder({ collectionId: this.collectionId, filtersOrder: filtersOrder });
|
this.updateCollectionFiltersOrder({ collectionId: this.collectionId, filtersOrder: filtersOrder });
|
||||||
|
|
||||||
},
|
},
|
||||||
addFieldViaButton(fieldType, fieldIndex) {
|
addFieldViaButton(fieldType, fieldIndex) {
|
||||||
this.availableFieldList.splice(fieldIndex, 1);
|
this.availableFieldList.splice(fieldIndex, 1);
|
||||||
|
|
||||||
let lastIndex = this.activeFilterList.length;
|
let lastIndex = this.activeFilterList.length;
|
||||||
this.activeFilterList.push(fieldType);
|
|
||||||
|
// Updates store with temporary Filter
|
||||||
|
this.addTemporaryFilter(fieldType);
|
||||||
|
|
||||||
this.addNewFilter(fieldType, lastIndex);
|
this.addNewFilter(fieldType, lastIndex);
|
||||||
},
|
},
|
||||||
addNewFilter(choosenField, newIndex) {
|
addNewFilter(choosenField, newIndex) {
|
||||||
|
@ -307,24 +338,17 @@ export default {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
removeFilter(removedFilter) {
|
removeFilter(removedFilter) {
|
||||||
|
|
||||||
this.deleteFilter(removedFilter.id)
|
this.deleteFilter(removedFilter.id)
|
||||||
.then((filter) => {
|
.then(() => {
|
||||||
let index = this.activeFilterList.findIndex(deletedFilter => deletedFilter.id === filter.id);
|
// Reload Available Field Types List
|
||||||
if (index >= 0)
|
this.updateListOfFields();
|
||||||
|
|
||||||
this.activeFilterList.splice(index, 1);
|
})
|
||||||
this.isLoadingFieldTypes = true;
|
.catch((error) => { this.$console.log(error)});
|
||||||
this.fetchFields({collectionId: this.collectionId, isRepositoryLevel: this.isRepositoryLevel})
|
|
||||||
.then(() => {
|
if (!this.isRepositoryLevel)
|
||||||
this.isLoadingFieldTypes = false;
|
this.updateFiltersOrder();
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
this.isLoadingFieldTypes = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!this.isRepositoryLevel)
|
|
||||||
this.updateFiltersOrder();
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
confirmSelectedFilterType() {
|
confirmSelectedFilterType() {
|
||||||
this.createChoosenFilter();
|
this.createChoosenFilter();
|
||||||
|
@ -334,7 +358,7 @@ export default {
|
||||||
this.choosenField = {};
|
this.choosenField = {};
|
||||||
this.allowedFilterTypes = [];
|
this.allowedFilterTypes = [];
|
||||||
this.selectedFilterType = {};
|
this.selectedFilterType = {};
|
||||||
this.activeFilterList.splice(this.newIndex, 1);
|
this.deleteTemporaryFilter(this.newIndex);
|
||||||
this.newIndex = 0;
|
this.newIndex = 0;
|
||||||
},
|
},
|
||||||
editFilter(filter) {
|
editFilter(filter) {
|
||||||
|
@ -350,7 +374,7 @@ export default {
|
||||||
this.choosenField = {};
|
this.choosenField = {};
|
||||||
this.allowedFilterTypes = [];
|
this.allowedFilterTypes = [];
|
||||||
this.selectedFilterType = {};
|
this.selectedFilterType = {};
|
||||||
this.activeFilterList.splice(this.newIndex, 1);
|
this.deleteTemporaryFilter(this.newIndex);
|
||||||
this.newIndex = 0;
|
this.newIndex = 0;
|
||||||
}
|
}
|
||||||
this.openedFilterId = filter.id;
|
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() {
|
created() {
|
||||||
|
|
||||||
this.isRepositoryLevel = this.$route.name == 'FiltersPage' ? true : false;
|
this.isRepositoryLevel = this.$route.name == 'FiltersPage' ? true : false;
|
||||||
|
@ -412,8 +416,9 @@ export default {
|
||||||
this.isLoadingFilterTypes = true;
|
this.isLoadingFilterTypes = true;
|
||||||
|
|
||||||
this.fetchFilterTypes()
|
this.fetchFilterTypes()
|
||||||
.then(() => {
|
.then((filterTypes) => {
|
||||||
this.isLoadingFilterTypes = false;
|
this.isLoadingFilterTypes = false;
|
||||||
|
this.filterTypes = filterTypes;
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
this.isLoadingFilterTypes = false;
|
this.isLoadingFilterTypes = false;
|
||||||
|
@ -424,8 +429,9 @@ export default {
|
||||||
this.isLoadingFilters = false;
|
this.isLoadingFilters = false;
|
||||||
// Needs to be done after activeFilterList exists to compare and remove chosen fields.
|
// Needs to be done after activeFilterList exists to compare and remove chosen fields.
|
||||||
this.fetchFields({collectionId: this.collectionId, isRepositoryLevel: this.isRepositoryLevel, isContextEdit: true })
|
this.fetchFields({collectionId: this.collectionId, isRepositoryLevel: this.isRepositoryLevel, isContextEdit: true })
|
||||||
.then(() => {
|
.then((fields) => {
|
||||||
this.isLoadingFieldTypes = false;
|
this.isLoadingFieldTypes = false;
|
||||||
|
this.updateListOfFields();
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
this.isLoadingFieldTypes = false;
|
this.isLoadingFieldTypes = false;
|
||||||
|
|
|
@ -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 }) => {
|
export const deleteField = ({ commit }, { collectionId, fieldId, isRepositoryLevel }) => {
|
||||||
let endpoint = '';
|
let endpoint = '';
|
||||||
|
@ -81,7 +84,7 @@ export const deleteField = ({ commit }, { collectionId, fieldId, isRepositoryLev
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
axios.tainacan.delete(endpoint)
|
axios.tainacan.delete(endpoint)
|
||||||
.then( res => {
|
.then( res => {
|
||||||
commit('deleteField', { fieldId } );
|
commit('deleteField', res.data );
|
||||||
resolve( res.data );
|
resolve( res.data );
|
||||||
}).catch((error) => {
|
}).catch((error) => {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
|
@ -119,3 +122,8 @@ export const updateCollectionFieldsOrder = ({ commit, dispatch }, { collectionId
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const updateFieldTypes = ( { commit }, fieldTypes) => {
|
||||||
|
commit('setFieldTypes', fieldTypes);
|
||||||
|
};
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
|
|
||||||
export const deleteField = ( state, field ) => {
|
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) {
|
if (index >= 0) {
|
||||||
state.fields.splice(index, 1);
|
state.fields.splice(index, 1);
|
||||||
}
|
}
|
||||||
|
|
|
@ -68,6 +68,9 @@ export const updateFilter = ( { commit }, { filterId, index, options }) => {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const updateFilters = ( { commit }, filters) => {
|
||||||
|
commit('setFilters', filters);
|
||||||
|
};
|
||||||
|
|
||||||
export const deleteFilter = ({ commit }, filterId ) => {
|
export const deleteFilter = ({ commit }, filterId ) => {
|
||||||
let endpoint = '/filters/' + filterId;
|
let endpoint = '/filters/' + filterId;
|
||||||
|
@ -75,7 +78,7 @@ export const deleteFilter = ({ commit }, filterId ) => {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
axios.tainacan.delete(endpoint, { data:{ is_permanently: false }})
|
axios.tainacan.delete(endpoint, { data:{ is_permanently: false }})
|
||||||
.then( res => {
|
.then( res => {
|
||||||
commit('deleteFilter', filterId );
|
commit('deleteFilter', res.data );
|
||||||
resolve( res.data );
|
resolve( res.data );
|
||||||
}).catch((error) => {
|
}).catch((error) => {
|
||||||
console.log(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 }) => {
|
export const updateCollectionFiltersOrder = ({ commit }, { collectionId, filtersOrder }) => {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
axios.tainacan.patch('/collections/' + collectionId, {
|
axios.tainacan.patch('/collections/' + collectionId, {
|
||||||
|
@ -112,4 +123,8 @@ export const fetchFilterTypes = ({ commit} ) => {
|
||||||
reject(error);
|
reject(error);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const updateFilteTypes = ( { commit }, filterTypes) => {
|
||||||
|
commit('setFilterTypes', filterTypes);
|
||||||
|
};
|
|
@ -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}) => {
|
export const setSingleFilter = (state, { filter, index}) => {
|
||||||
Vue.set( state.filters, index, filter );
|
Vue.set( state.filters, index, filter );
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue