Fixes on metadata list inheritance representation and filter type select form.

This commit is contained in:
Mateus Machado Luna 2018-10-17 12:11:30 -03:00
parent 2868eff56a
commit 658832c510
3 changed files with 55 additions and 40 deletions

View File

@ -297,13 +297,6 @@ export default {
<style lang="scss" scoped>
@import "../../scss/_variables.scss";
form#filterEditForm {
padding: 1.0em 2.0em;
border-top: 1px solid $gray2;
border-bottom: 1px solid $gray2;
margin-top: 1.0em;
}
</style>

View File

@ -35,7 +35,7 @@
<div
class="active-filter-item"
:class="{
'not-sortable-item': (filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true || isRepositoryLevel),
'not-sortable-item': (isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true || isRepositoryLevel),
'not-focusable-item': openedFilterId == filter.id,
'disabled-filter': filter.enabled == false,
'inherited-filter': filter.collection_id != collectionId || isRepositoryLevel
@ -146,12 +146,15 @@
v-model="availableMetadatumList"
:options="{
sort: false,
group: { name:'filters', pull: true, put: false, revertClone: true },
group: { name:'filters', pull: !isSelectingFilterType, put: false, revertClone: true },
dragClass: 'sortable-drag'
}">
<div
class="available-metadatum-item"
:class="{'inherited-metadatum': metadatum.collection_id != collectionId || isRepositoryLevel}"
:class="{
'inherited-metadatum': metadatum.collection_id != collectionId || isRepositoryLevel,
'disabled-metadatum': isSelectingFilterType
}"
v-if="metadatum.enabled"
v-for="(metadatum, index) in availableMetadatumList"
:key="index"
@ -207,6 +210,7 @@ export default {
isLoadingFilters: false,
isLoadingFilterTypes: false,
isLoadingFilter: false,
isSelectingFilterType: false,
isUpdatingFiltersOrder: false,
openedFilterId: '',
formWithErrors: '',
@ -325,13 +329,18 @@ export default {
.catch(() => { this.isUpdatingFiltersOrder = false; });
},
addMetadatumViaButton(metadatumType, metadatumIndex) {
this.availableMetadatumList.splice(metadatumIndex, 1);
let lastIndex = this.activeFilterList.length;
// Updates store with temporary Filter
this.addTemporaryFilter(metadatumType);
if (this.isSelectingFilterType == false) {
this.isSelectingFilterType = true;
this.availableMetadatumList.splice(metadatumIndex, 1);
let lastIndex = this.activeFilterList.length;
this.addNewFilter(metadatumType, lastIndex);
// Updates store with temporary Filter
this.addTemporaryFilter(metadatumType);
this.addNewFilter(metadatumType, lastIndex);
}
},
addNewFilter(choosenMetadatum, newIndex) {
this.choosenMetadatum = choosenMetadatum;
@ -348,7 +357,6 @@ export default {
}
},
createChoosenFilter() {
this.sendFilter({
collectionId: this.collectionId,
metadatumId: this.choosenMetadatum.id,
@ -391,15 +399,17 @@ export default {
this.updateFiltersOrder();
},
confirmSelectedFilterType() {
this.isSelectingFilterType = false;
this.createChoosenFilter();
},
cancelFilterTypeSelection() {
this.availableMetadatumList.push(this.choosenMetadatum);
this.choosenMetadatum = {};
this.allowedFilterTypes = [];
this.selectedFilterType = {};
this.deleteTemporaryFilter(this.newIndex);
this.newIndex = 0;
this.isSelectingFilterType = false;
this.availableMetadatumList.push(this.choosenMetadatum);
this.choosenMetadatum = {};
this.allowedFilterTypes = [];
this.selectedFilterType = {};
this.deleteTemporaryFilter(this.newIndex);
this.newIndex = 0;
},
editFilter(filter) {
// Closing collapse
@ -500,6 +510,13 @@ export default {
width: 1em;
}
form.tainacan-form {
padding: 1.0em 2.0em;
border-top: 1px solid $gray2;
border-bottom: 1px solid $gray2;
margin-top: 1.0em;
}
.active-filters-area {
font-size: 14px;
margin-right: 0.8em;
@ -738,24 +755,26 @@ export default {
.sortable-drag {
opacity: 1 !important;
}
.available-metadatum-item:hover {
background-color: $secondary;
border-color: $secondary;
color: white;
position: relative;
left: -4px;
&:after {
border-color: transparent $secondary transparent transparent;
}
&:before {
border-color: transparent $secondary transparent transparent;
}
.icon-level-identifier>i {
.available-metadatum-item:not(.disabled-metadatum) {
&:hover{
background-color: $secondary;
border-color: $secondary;
color: white !important;
}
.grip-icon {
fill: white !important;
position: relative;
left: -4px;
&:after {
border-color: transparent $secondary transparent transparent;
}
&:before {
border-color: transparent $secondary transparent transparent;
}
.icon-level-identifier>i {
color: white !important;
}
.grip-icon {
fill: white !important;
}
}
}
}

View File

@ -50,7 +50,10 @@
<grip-icon/>
<span class="icon icon-level-identifier">
<i
:class="{ 'mdi-folder has-text-turquoise5': (metadatum.collection_id == collectionId && !isRepositoryLevel), 'mdi-folder-multiple has-text-blue5': metadatum.collection_id != collectionId || isRepositoryLevel}"
:class="{
'mdi-folder has-text-turquoise5': (metadatum.collection_id != 'default' && !isRepositoryLevel),
'mdi-folder-multiple has-text-blue5': (metadatum.collection_id == 'default') || isRepositoryLevel
}"
class="mdi" />
</span>
<span