Updates enabled state on vuex even for Metadata inside sections.
This commit is contained in:
mateuswetah
parent
1b2243c74a
commit
22cf3f82e8
|
|
@ -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,24 +391,28 @@
|
|||
v-if="metadataSection.description && metadataSection.description_bellow_name == 'yes'">
|
||||
{{ metadataSection.description }}
|
||||
</p>
|
||||
<tainacan-form-item
|
||||
v-for="(itemMetadatum, index) of metadatumList.filter(anItemMetadatum => anItemMetadatum.metadatum.metadata_section_id == metadataSection.id)"
|
||||
:key="index"
|
||||
v-show="(metadataNameFilterString == '' || filterByMetadatumName(itemMetadatum))"
|
||||
:class="{ 'is-metadata-navigation-active': isMetadataNavigation }"
|
||||
:ref="'tainacan-form-item--' + index"
|
||||
:item-metadatum="itemMetadatum"
|
||||
:metadata-name-filter-string="metadataNameFilterString"
|
||||
:is-collapsed="metadataCollapses[index]"
|
||||
:hide-collapses="$adminOptions.hideItemEditionCollapses || isMetadataNavigation"
|
||||
:is-mobile-screen="isMobileScreen"
|
||||
:is-last-metadatum="index > 2 && (index == metadatumList.length - 1)"
|
||||
:is-focused="focusedMetadatum === index"
|
||||
:is-metadata-navigation="isMetadataNavigation"
|
||||
@changeCollapse="onChangeCollapse($event, index)"
|
||||
@touchstart.native="isMetadataNavigation ? setMetadatumFocus({ index: index, scrollIntoView: false }): ''"
|
||||
@mousedown.native="isMetadataNavigation ? setMetadatumFocus({ index: index, scrollIntoView: false }) : ''"
|
||||
@mobileSpecialFocus="setMetadatumFocus({ index: index, scrollIntoView: true })" />
|
||||
|
||||
<template v-for="(itemMetadatum, index) of metadatumList">
|
||||
<tainacan-form-item
|
||||
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"
|
||||
:item-metadatum="itemMetadatum"
|
||||
:metadata-name-filter-string="metadataNameFilterString"
|
||||
:is-collapsed="metadataCollapses[index]"
|
||||
:hide-collapses="$adminOptions.hideItemEditionCollapses || isMetadataNavigation"
|
||||
:is-mobile-screen="isMobileScreen"
|
||||
:is-last-metadatum="index > 2 && (index == metadatumList.length - 1)"
|
||||
:is-focused="focusedMetadatum === index"
|
||||
:is-metadata-navigation="isMetadataNavigation"
|
||||
@changeCollapse="onChangeCollapse($event, index)"
|
||||
@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 });
|
||||
},
|
||||
|
|
@ -1709,7 +1712,7 @@ export default {
|
|||
this.setMetadatumFocus({ index: this.focusedMetadatum + 1, scrollIntoView: true });
|
||||
},
|
||||
setMetadatumFocus({ index = 0, scrollIntoView = false }) {
|
||||
|
||||
|
||||
const previousIndex = this.focusedMetadatum;
|
||||
this.focusedMetadatum = index;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
||||
|
|
|
|||
|
|
@ -198,14 +198,14 @@ export const cleanMetadata = ({commit}) => {
|
|||
commit('cleanMetadata');
|
||||
};
|
||||
|
||||
export const updateCollectionMetadataOrder = ({ commit }, {collectionId, metadataOrder, metadataSectionId }) => {
|
||||
export const updateCollectionMetadataOrder = ({ commit }, { collectionId, metadataOrder, metadataSectionId }) => {
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.tainacan.patch('/collections/' + collectionId + '/metadata_section/' + metadataSectionId + '/metadata_order?context=edit', {
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue