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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/views/admin/components/edition/item-edition-form.vue
View File

@ -270,14 +270,6 @@
{{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }} {{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
</a> </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 <b-field
v-if="metadatumList && metadatumList.length > 3" v-if="metadatumList && metadatumList.length > 3"
class="header-item metadata-navigation" class="header-item metadata-navigation"
@ -324,6 +316,14 @@
</b-button> </b-button>
</b-field> </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 <b-field
v-if="metadatumList && metadatumList.length > 5" v-if="metadatumList && metadatumList.length > 5"
class="header-item metadata-name-search"> class="header-item metadata-name-search">
@ -356,8 +356,7 @@
@click="(isMetadataNavigation || $adminOptions.hideItemEditionCollapses) ? null : toggleMetadataSectionCollapse(sectionIndex)"> @click="(isMetadataNavigation || $adminOptions.hideItemEditionCollapses) ? null : toggleMetadataSectionCollapse(sectionIndex)">
<span <span
v-if="!$adminOptions.hideItemEditionCollapses && !isMetadataNavigation" v-if="!$adminOptions.hideItemEditionCollapses && !isMetadataNavigation"
class="icon" class="icon">
@click="toggleMetadataSectionCollapse(sectionIndex)">
<i <i
:class="{ :class="{
'tainacan-icon-arrowdown' : metadataSectionCollapses[sectionIndex] || errorMessage, 'tainacan-icon-arrowdown' : metadataSectionCollapses[sectionIndex] || errorMessage,
@ -392,24 +391,28 @@
v-if="metadataSection.description && metadataSection.description_bellow_name == 'yes'"> v-if="metadataSection.description && metadataSection.description_bellow_name == 'yes'">
{{ metadataSection.description }} {{ metadataSection.description }}
</p> </p>
<tainacan-form-item
v-for="(itemMetadatum, index) of metadatumList.filter(anItemMetadatum => anItemMetadatum.metadatum.metadata_section_id == metadataSection.id)" <template v-for="(itemMetadatum, index) of metadatumList">
:key="index" <tainacan-form-item
v-show="(metadataNameFilterString == '' || filterByMetadatumName(itemMetadatum))" v-if="itemMetadatum.metadatum.metadata_section_id == metadataSection.id"
:class="{ 'is-metadata-navigation-active': isMetadataNavigation }" :key="index"
:ref="'tainacan-form-item--' + index" :id="'metadatum-index--' + index"
:item-metadatum="itemMetadatum" v-show="(metadataNameFilterString == '' || filterByMetadatumName(itemMetadatum))"
:metadata-name-filter-string="metadataNameFilterString" :class="{ 'is-metadata-navigation-active': isMetadataNavigation }"
:is-collapsed="metadataCollapses[index]" :ref="'tainacan-form-item--' + index"
:hide-collapses="$adminOptions.hideItemEditionCollapses || isMetadataNavigation" :item-metadatum="itemMetadatum"
:is-mobile-screen="isMobileScreen" :metadata-name-filter-string="metadataNameFilterString"
:is-last-metadatum="index > 2 && (index == metadatumList.length - 1)" :is-collapsed="metadataCollapses[index]"
:is-focused="focusedMetadatum === index" :hide-collapses="$adminOptions.hideItemEditionCollapses || isMetadataNavigation"
:is-metadata-navigation="isMetadataNavigation" :is-mobile-screen="isMobileScreen"
@changeCollapse="onChangeCollapse($event, index)" :is-last-metadatum="index > 2 && (index == metadatumList.length - 1)"
@touchstart.native="isMetadataNavigation ? setMetadatumFocus({ index: index, scrollIntoView: false }): ''" :is-focused="focusedMetadatum === index"
@mousedown.native="isMetadataNavigation ? setMetadatumFocus({ index: index, scrollIntoView: false }) : ''" :is-metadata-navigation="isMetadataNavigation"
@mobileSpecialFocus="setMetadatumFocus({ index: index, scrollIntoView: true })" /> @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> </div>
</transition> </transition>
</div> </div>
@ -1697,7 +1700,7 @@ export default {
if (isPreviouslyFocusedOnCompoundMetadatum || this.isCurrentlyFocusedOnCompoundMetadatum) if (isPreviouslyFocusedOnCompoundMetadatum || this.isCurrentlyFocusedOnCompoundMetadatum)
eventBusItemMetadata.$emit('focusPreviousChildMetadatum'); eventBusItemMetadata.$emit('focusPreviousChildMetadatum');
console.log(this.isOnFirstMetadatumOfCompoundNavigation, this.isOnLastMetadatumOfCompoundNavigation)
if ( !this.isCurrentlyFocusedOnCompoundMetadatum || (this.isCurrentlyFocusedOnCompoundMetadatum && this.isOnFirstMetadatumOfCompoundNavigation) ) if ( !this.isCurrentlyFocusedOnCompoundMetadatum || (this.isCurrentlyFocusedOnCompoundMetadatum && this.isOnFirstMetadatumOfCompoundNavigation) )
this.setMetadatumFocus({ index: this.focusedMetadatum - 1, scrollIntoView: true }); this.setMetadatumFocus({ index: this.focusedMetadatum - 1, scrollIntoView: true });
}, },
@ -1709,7 +1712,7 @@ export default {
this.setMetadatumFocus({ index: this.focusedMetadatum + 1, scrollIntoView: true }); this.setMetadatumFocus({ index: this.focusedMetadatum + 1, scrollIntoView: true });
}, },
setMetadatumFocus({ index = 0, scrollIntoView = false }) { setMetadatumFocus({ index = 0, scrollIntoView = false }) {
const previousIndex = this.focusedMetadatum; const previousIndex = this.focusedMetadatum;
this.focusedMetadatum = index; this.focusedMetadatum = index;

4
src/views/admin/components/lists/collection-metadata-list.vue
View File

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

6
src/views/admin/components/metadata-types/compound/Compound.vue
View File

@ -377,6 +377,12 @@
else if ((this.focusedChildMetadatum - 1) >= 0) else if ((this.focusedChildMetadatum - 1) >= 0)
this.setMetadatumChildFocus({ groupIndex: this.focusedGroupMetadatum, childIndex: this.focusedChildMetadatum - 1, scrollIntoView: true }) 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() { focusNextChildMetadatum() {

18
src/views/admin/js/store/modules/metadata/actions.js
View File

@ -198,14 +198,14 @@ export const cleanMetadata = ({commit}) => {
commit('cleanMetadata'); commit('cleanMetadata');
}; };
export const updateCollectionMetadataOrder = ({ commit }, {collectionId, metadataOrder, metadataSectionId }) => { export const updateCollectionMetadataOrder = ({ commit }, { collectionId, metadataOrder, metadataSectionId }) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
axios.tainacan.patch('/collections/' + collectionId + '/metadata_section/' + metadataSectionId + '/metadata_order?context=edit', { axios.tainacan.patch('/collections/' + collectionId + '/metadata_section/' + metadataSectionId + '/metadata_order?context=edit', {
metadata_order: metadataOrder metadata_order: metadataOrder
}).then(res => { }).then(res => {
commit('collection/setCollection', res.data, { root: true }); 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); resolve(res.data);
}).catch(error => { }).catch(error => {
reject(error.response); reject(error.response);
@ -294,10 +294,18 @@ export const updateMetadatumMappers = ({commit}, metadatumMappers) => {
}; };
// METADATA SECTIONS // 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) => { return new Promise((resolve, reject) => {
axios.tainacan.get('/collection/' + collectionId + '/metadata-sections' + (isContextEdit ? '?context=edit' : '')) axios.tainacan.get(endpoint)
.then((res) => { .then((res) => {
let metadataSections = res.data; let metadataSections = res.data;
commit('setMetadataSections', metadataSections); commit('setMetadataSections', metadataSections);
@ -381,7 +389,7 @@ export const updateCollectionMetadataSectionsOrder = ({ commit }, {collectionId,
metadata_section_order: metadataSectionsOrder metadata_section_order: metadataSectionsOrder
}).then(res => { }).then(res => {
commit('collection/setCollection', res.data, { root: true }); commit('collection/setCollection', res.data, { root: true });
commit('updateMetadataSectionsOrderFromCollection', res.data.metadata_sections_order); commit('updateMetadataSectionsOrderFromCollection', res.data.metadata_section_order);
resolve(res.data); resolve(res.data);
}).catch(error => { }).catch(error => {
reject(error.response); reject(error.response);

19
src/views/admin/js/store/modules/metadata/mutations.js
View File

@ -69,11 +69,22 @@ export const setMetadata = (state, metadata) => {
state.metadata = metadata; state.metadata = metadata;
} }
export const updateMetadataOrderFromCollection = (state, metadataOrder) => { export const updateCollectionMetadataOrder = (state, { metadataOrder, metadataSectionId }) => {
for (let i = 0; i < state.metadata.length; i++) {
let updatedMetadatumIndex = metadataOrder.findIndex(aMetadatum => aMetadatum.id == state.metadata[i].id); 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) 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;
}
} }
} }

26
src/views/admin/pages/lists/metadata-page.vue
View File

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