Updates enabled state on vuex even for Metadata inside sections.

This commit is contained in:
mateuswetah 2022-07-25 11:04:35 -03:00
parent 1b2243c74a
commit 22cf3f82e8
6 changed files with 90 additions and 46 deletions

View File

@ -270,14 +270,6 @@
{{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
</a>
<span
v-if="isUpdatingValues && isMetadataNavigation && !$adminOptions.mobileAppMode"
class="update-warning">
<span class="icon">
<i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-updating"/>
</span>
</span>
<b-field
v-if="metadatumList && metadatumList.length > 3"
class="header-item metadata-navigation"
@ -324,6 +316,14 @@
</b-button>
</b-field>
<span
v-if="isUpdatingValues && isMetadataNavigation && !$adminOptions.mobileAppMode"
class="update-warning">
<span class="icon">
<i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-updating"/>
</span>
</span>
<b-field
v-if="metadatumList && metadatumList.length > 5"
class="header-item metadata-name-search">
@ -356,8 +356,7 @@
@click="(isMetadataNavigation || $adminOptions.hideItemEditionCollapses) ? null : toggleMetadataSectionCollapse(sectionIndex)">
<span
v-if="!$adminOptions.hideItemEditionCollapses && !isMetadataNavigation"
class="icon"
@click="toggleMetadataSectionCollapse(sectionIndex)">
class="icon">
<i
:class="{
'tainacan-icon-arrowdown' : metadataSectionCollapses[sectionIndex] || errorMessage,
@ -392,9 +391,12 @@
v-if="metadataSection.description && metadataSection.description_bellow_name == 'yes'">
{{ metadataSection.description }}
</p>
<template v-for="(itemMetadatum, index) of metadatumList">
<tainacan-form-item
v-for="(itemMetadatum, index) of metadatumList.filter(anItemMetadatum => anItemMetadatum.metadatum.metadata_section_id == metadataSection.id)"
v-if="itemMetadatum.metadatum.metadata_section_id == metadataSection.id"
:key="index"
:id="'metadatum-index--' + index"
v-show="(metadataNameFilterString == '' || filterByMetadatumName(itemMetadatum))"
:class="{ 'is-metadata-navigation-active': isMetadataNavigation }"
:ref="'tainacan-form-item--' + index"
@ -410,6 +412,7 @@
@touchstart.native="isMetadataNavigation ? setMetadatumFocus({ index: index, scrollIntoView: false }): ''"
@mousedown.native="isMetadataNavigation ? setMetadatumFocus({ index: index, scrollIntoView: false }) : ''"
@mobileSpecialFocus="setMetadatumFocus({ index: index, scrollIntoView: true })" />
</template>
</div>
</transition>
</div>
@ -1697,7 +1700,7 @@ export default {
if (isPreviouslyFocusedOnCompoundMetadatum || this.isCurrentlyFocusedOnCompoundMetadatum)
eventBusItemMetadata.$emit('focusPreviousChildMetadatum');
console.log(this.isOnFirstMetadatumOfCompoundNavigation, this.isOnLastMetadatumOfCompoundNavigation)
if ( !this.isCurrentlyFocusedOnCompoundMetadatum || (this.isCurrentlyFocusedOnCompoundMetadatum && this.isOnFirstMetadatumOfCompoundNavigation) )
this.setMetadatumFocus({ index: this.focusedMetadatum - 1, scrollIntoView: true });
},

View File

@ -271,7 +271,7 @@
'is-compact-item': !isCollapseOpen(metadatum.id),
'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied || isUpdatingMetadatum,
'not-focusable-item': openedMetadatumId == metadatum.id,
'disabled-metadatum': metadatum.enabled == false,
'disabled-metadatum': metadataSection.enabled == false || metadatum.enabled == false,
'inherited-metadatum': metadatum.inherited,
'child-metadatum': metadatum.parent > 0
}">
@ -575,7 +575,7 @@ export default {
this.collectionId = this.$route.params.collectionId;
this.isLoadingMetadataSections = true;
this.fetchMetadataSections({ collectionId: this.collectionId, isContextEdit: true })
this.fetchMetadataSections({ collectionId: this.collectionId, isContextEdit: true, includeDisabled: true })
.then(() => {
this.isLoadingMetadataSections = false;
})

View File

@ -377,6 +377,12 @@
else if ((this.focusedChildMetadatum - 1) >= 0)
this.setMetadatumChildFocus({ groupIndex: this.focusedGroupMetadatum, childIndex: this.focusedChildMetadatum - 1, scrollIntoView: true })
}
// This keeps the navigation going on when no child input exists
if (this.childItemMetadataGroups.length === 0) {
eventBusItemMetadata.$emit('isOnFirstMetadatumOfCompoundNavigation', true);
eventBusItemMetadata.$emit('isOnLastMetadatumOfCompoundNavigation', true);
}
},
focusNextChildMetadatum() {

View File

@ -205,7 +205,7 @@ export const updateCollectionMetadataOrder = ({ commit }, {collectionId, metadat
metadata_order: metadataOrder
}).then(res => {
commit('collection/setCollection', res.data, { root: true });
commit('updateMetadataOrderFromCollection', res.data.metadata_order);
commit('updateCollectionMetadataOrder', { metadataOrder: res.data.metadata_order, metadataSectionId: metadataSectionId });
resolve(res.data);
}).catch(error => {
reject(error.response);
@ -294,10 +294,18 @@ export const updateMetadatumMappers = ({commit}, metadatumMappers) => {
};
// METADATA SECTIONS
export const fetchMetadataSections = ({commit}, { collectionId, isContextEdit }) => {
export const fetchMetadataSections = ({commit}, { collectionId, isContextEdit, includeDisabled }) => {
let endpoint = '/collection/' + collectionId + '/metadata-sections?';
if (isContextEdit)
endpoint += 'context=edit&'
if (includeDisabled)
endpoint += 'include_disabled=true'
return new Promise((resolve, reject) => {
axios.tainacan.get('/collection/' + collectionId + '/metadata-sections' + (isContextEdit ? '?context=edit' : ''))
axios.tainacan.get(endpoint)
.then((res) => {
let metadataSections = res.data;
commit('setMetadataSections', metadataSections);
@ -381,7 +389,7 @@ export const updateCollectionMetadataSectionsOrder = ({ commit }, {collectionId,
metadata_section_order: metadataSectionsOrder
}).then(res => {
commit('collection/setCollection', res.data, { root: true });
commit('updateMetadataSectionsOrderFromCollection', res.data.metadata_sections_order);
commit('updateMetadataSectionsOrderFromCollection', res.data.metadata_section_order);
resolve(res.data);
}).catch(error => {
reject(error.response);

View File

@ -69,11 +69,22 @@ export const setMetadata = (state, metadata) => {
state.metadata = metadata;
}
export const updateMetadataOrderFromCollection = (state, metadataOrder) => {
for (let i = 0; i < state.metadata.length; i++) {
let updatedMetadatumIndex = metadataOrder.findIndex(aMetadatum => aMetadatum.id == state.metadata[i].id);
export const updateCollectionMetadataOrder = (state, { metadataOrder, metadataSectionId }) => {
for (let i = 0; i < metadataOrder.length; i++) {
// First updates state.metadata
let updatedMetadatumIndex = state.metadata.findIndex((aMetadatum) => aMetadatum.id == metadataOrder[i]['id']);
if (updatedMetadatumIndex >= 0)
state.metadata[i].enabled = metadataOrder[updatedMetadatumIndex].enabled;
state.metadata[i].enabled = metadataOrder[updateCollectionMetadataOrder].enabled;
// Then updates state.metadataSections[x].metadata_object_list
const existingSectionIndex = state.metadataSections.findIndex((aMetadataSection) => aMetadataSection.id == metadataSectionId);
if (existingSectionIndex >= 0) {
const updatedMetadatumIndexInsideSection = state.metadataSections[existingSectionIndex]['metadata_object_list'].findIndex((aMetadatum) => { return !!aMetadatum['id'] && (aMetadatum.id == metadataOrder[i]['id']) });
if (updatedMetadatumIndexInsideSection >= 0)
state.metadataSections[existingSectionIndex]['metadata_object_list'][updatedMetadatumIndexInsideSection].enabled = metadataOrder[i].enabled;
}
}
}

View File

@ -215,7 +215,7 @@ export default {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5em 1em 0.5em 4em;
padding: 0.5em 1em 0.5em 2em;
.header-item {
margin-left: 0.75rem;
@ -277,10 +277,6 @@ export default {
margin: 0;
padding-right: 0em;
}
@media screen and (max-width: 1216px) {
padding-right: 1em;
}
&.metadata-area-receive {
border: 1px dashed var(--tainacan-gray4);
}
@ -294,6 +290,10 @@ export default {
margin-left: 1.5em;
padding-right: 1em;
min-height: 330px;
.active-metadata-area {
margin-left: 0.5rem;
}
}
.active-metadatum-item,
@ -333,6 +333,8 @@ export default {
}
&.active-metadata-sections-item {
padding-left: 0;
margin-top: 1rem;
border-bottom: 1px solid var(--tainacan-gray3);
.metadatum-name {
@ -427,6 +429,10 @@ export default {
&.disabled-metadatum:not(.not-sortable-item),
&.disabled-metadatum:not(.not-sortable-item):hover {
color: var(--tainacan-gray3);
.metadatum-name {
opacity: 0.7;
}
.label-details, .not-saved {
color: var(--tainacan-gray3) !important;
}
@ -487,4 +493,14 @@ export default {
}
}
}
.repository-level-page {
.tainacan-form.sub-header {
padding-left: 2.75em !important;
}
.active-metadata-sections-area,
.active-metadata-area {
margin-left: 0px !important;
}
}
</style>