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

More updates do collection metadata list using sections. #184.

This commit is contained in:
mateuswetah 2022-04-18 17:32:37 -03:00
parent ba5fbf331c
commit 4755fe43b5
9 changed files with 280 additions and 270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,13 +4,13 @@
<b-loading :active.sync="isLoadingMetadataSections"/>
<div class="tainacan-form sub-header">
<h3>{{ $i18n.get('metadata') }}<span class="has-text-gray">{{ ( activeMetadatumList && activeMetadatumList.length ? (' (' + activeMetadatumList.length + ')') : '' ) }}</span></h3>
<h3>{{ $i18n.get('metadata') }}</h3>
<template v-if="activeMetadatumList && !isLoadingMetadata">
<template v-if="activeMetadataSectionsList">
<b-field class="header-item">
<b-dropdown
:mobile-modal="true"
:disabled="activeMetadatumList.length <= 0"
:disabled="activeMetadataSectionsList.length <= 0"
class="show metadata-options-dropdown"
aria-role="list"
trap-focus>
@ -55,7 +55,7 @@
<button
aria-controls="filters-items-list"
:aria-expanded="!collapseAll"
v-if="activeMetadatumList.length > 0"
v-if="activeMetadataSectionsList.length > 0"
class="link-style collapse-all"
@click="collapseAll = !collapseAll">
<span class="icon">
@ -69,7 +69,7 @@
</button>
<section
v-if="activeMetadatumList.length <= 0 && !isLoadingMetadata"
v-if="activeMetadataSectionsList.length <= 0 && !isLoadingMetadataSections"
class="field is-grouped-centered section">
<div class="content has-text-gray has-text-centered">
<p>
@ -77,8 +77,7 @@
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
</span>
</p>
<p>{{ $i18n.get('info_there_is_no_metadatum' ) }}</p>
<p>{{ $i18n.get('info_create_metadata' ) }}</p>
<p>{{ $i18n.get('info_there_is_no_metadata_section') }}</p>
</div>
</section>
@ -87,7 +86,7 @@
v-model="activeMetadataSectionsList"
class="active-metadata-sections-area"
@change="handleSectionChange($event)"
:group="{ name:'metadata-sections', pull: false, put: true }"
:group="{ name:'metadata-sections', pull: false, put: [ 'metadata-sections' ] }"
:sort="(openedMetadataSectionId == '' || openedMetadataSectionId == undefined) && (openedMetadatumId == '' || openedMetadatumId == undefined)"
:handle="'.handle'"
ghost-class="sortable-ghost"
@ -205,12 +204,27 @@
</div>
</div>
<section
v-if="metadataSection.metadata_object_list && metadataSection.metadata_object_list.length <= 0"
class="field is-grouped-centered section">
<div class="content has-text-gray has-text-centered">
<p>
<span class="icon is-large">
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
</span>
</p>
<p>{{ $i18n.get('info_there_is_no_metadatum' ) }}</p>
<p>{{ $i18n.get('info_create_metadata' ) }}</p>
</div>
</section>
<!-- The Metadata list, inside each metadata section -->
<template v-if="metadataSection.metadata_object_list && Array.isArray(metadataSection.metadata_object_list)">
<draggable
v-model="activeMetadatumList"
v-model="metadataSection.metadata_object_list"
class="active-metadata-area"
@change="handleChange($event, metadataSection.id)"
:group="{ name:'metadata', pull: false, put: true }"
@change="handleChange($event, sectionIndex)"
:group="{ name:'metadata', pull: false, put: [ 'metadata' ] }"
:sort="(openedMetadatumId == '' || openedMetadatumId == undefined)"
:handle="'.handle'"
ghost-class="sortable-ghost"
@ -219,7 +233,7 @@
:prevent-on-filter="false"
:animation="250">
<div
v-for="(metadatum, index) in activeMetadatumList.filter((meta) => meta != undefined && meta.parent == 0)"
v-for="(metadatum, index) in metadataSection.metadata_object_list.filter((meta) => meta != undefined && meta.parent == 0)"
:key="metadatum.id"
v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)">
<div
@ -324,7 +338,7 @@
:disabled="isUpdatingMetadataOrder"
size="is-small"
:value="metadatum.enabled"
@input="onChangeEnable($event, index)"/>
@input="onChangeEnable($event, index, sectionIndex)"/>
<a
v-if="metadatum.current_user_can_edit"
:style="{ visibility:
@ -346,7 +360,7 @@
<a
v-if="metadatum.current_user_can_delete"
:style="{ visibility: metadatum.collection_id != collectionId || metadatum.metadata_type_object.core ? 'hidden' : 'visible' }"
@click.prevent="removeMetadatum(metadatum)">
@click.prevent="removeMetadatum(metadatum, sectionIndex)">
<span
v-tooltip="{
content: $i18n.get('delete'),
@ -370,7 +384,7 @@
<!-- Child metadata list, inside each compound metadata -->
<child-metadata-list
v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.component == 'tainacan-compound'"
:parent.sync="activeMetadatumList[index]"
:parent="metadatum"
:metadata-name-filter-string="metadataNameFilterString"
:metadata-type-filter-options="metadataTypeFilterOptions"
:has-some-metadata-type-filter-applied="hasSomeMetadataTypeFilterApplied"
@ -398,6 +412,7 @@
</div>
</draggable><!-- End of .active-metadata-area -->
</template>
<!-- Metadata Section edition form, for each metadata section -->
<b-modal
@ -443,7 +458,6 @@ export default {
data() {
return {
collectionId: '',
isLoadingMetadata: false,
isLoadingMetadataSections: false,
isUpdatingMetadataOrder: false,
openedMetadatumId: '',
@ -460,14 +474,6 @@ export default {
hasSomeMetadataTypeFilterApplied() {
return this.metadataTypeFilterOptions.length && this.metadataTypeFilterOptions.some((metadatumType) => metadatumType.enabled);
},
activeMetadatumList: {
get() {
return this.getMetadata();
},
set(value) {
this.updateMetadata(value);
}
},
activeMetadataSectionsList: {
get() {
return this.getMetadataSections();
@ -481,33 +487,44 @@ export default {
'$route.query': {
handler(newQuery) {
if (newQuery.edit != undefined) {
let existingMetadataIndex = this.activeMetadatumList.findIndex((metadatum) => metadatum && (metadatum.id == newQuery.edit));
if (existingMetadataIndex >= 0)
this.editMetadatum(this.activeMetadatumList[existingMetadataIndex])
let existingMetadataIndex = -1;
let existingMetadataSectionIndex = -1;
for (let i = 0; i < this.activeMetadataSectionsList.length; i++) {
existingMetadataIndex = this.activeMetadataSectionsList[i].metadata_object_list.findIndex((metadatum) => metadatum && (metadatum.id == newQuery.edit));
if (existingMetadataIndex >= 0) {
existingMetadataSectionIndex = i;
break;
}
}
if (existingMetadataIndex >= 0 && existingMetadataSectionIndex >= 0)
this.editMetadatum(newQuery.edit);
} else if (newQuery.sectionEdit != undefined) {
let existingMetadataSectionIndex = this.activeMetadataSectionsList.findIndex((metadataSection) => metadataSection && (metadataSection.id == newQuery.sectionEdit));
if (existingMetadataSectionIndex >= 0)
this.editMetadataSection(this.activeMetadataSectionsList[existingMetadataSectionIndex])
this.editMetadataSection(newQuery.sectionEdit);
}
},
immediate: true
},
collapseAll(isCollapsed) {
this.activeMetadatumList.forEach((metadatum) => this.$set(this.collapses, metadatum.id, isCollapsed));
this.activeMetadataSectionsList.forEach((metadataSection) => {
if ( metadataSection.metadata_object_list && Array.isArray(metadataSection.metadata_object_list) )
metadataSection.metadata_object_list.forEach((metadatum) => this.$set(this.collapses, metadatum.id, isCollapsed));
});
}
},
mounted() {
this.cleanMetadata();
this.cleanMetadataSections();
this.$eventBusMetadataList.$on('addMetadatumViaButton', this.addMetadatumViaButton);
this.$eventBusMetadataList.$on('addMetadataSectionViaButton', this.addMetadataSectionViaButton);
this.collectionId = this.$route.params.collectionId;
this.isLoadingMetadataSections = true;
this.fetchMetadataSections({ collectionId: this.collectionId })
this.fetchMetadataSections({ collectionId: this.collectionId, isContextEdit: true })
.then(() => {
this.activeMetadataSectionsList.forEach((aMetadataSection) => {
this.refreshMetadata(aMetadataSection);
});
this.isLoadingMetadataSections = false;
})
.catch((error) => {
@ -522,7 +539,6 @@ export default {
},
methods: {
...mapActions('metadata', [
'fetchMetadata',
'sendMetadatum',
'sendMetadataSection',
'deleteMetadatum',
@ -547,23 +563,23 @@ export default {
this.updateMetadataSectionsOrder();
}
},
handleChange(event, metadataSectionId) {
handleChange(event, sectionIndex) {
if (event.added)
this.addNewMetadatum(event.added.element, event.added.newIndex, metadataSectionId);
this.addNewMetadatum(event.added.element, event.added.newIndex, sectionIndex);
else if (event.removed)
this.removeMetadatum(event.removed.element);
this.removeMetadatum(event.removed.element, sectionIndex);
else if (event.moved) {
this.updateMetadataOrder();
this.updateMetadataOrder(sectionIndex);
}
},
updateMetadataOrder() {
updateMetadataOrder(sectionIndex) {
let metadataOrder = [];
for (let metadatum of this.activeMetadatumList)
for (let metadatum of this.activeMetadataSectionsList[sectionIndex].metadata_object_list)
if (metadatum != undefined)
metadataOrder.push({ 'id': metadatum.id, 'enabled': metadatum.enabled });
this.isUpdatingMetadataOrder = true;
this.updateCollectionMetadataOrder({ collectionId: this.collectionId, metadataOrder: metadataOrder })
this.updateCollectionMetadataOrder({ collectionId: this.collectionId, metadataOrder: metadataOrder, metadataSectionId: this.activeMetadataSectionsList[sectionIndex].id })
.then(() => this.isUpdatingMetadataOrder = false)
.catch(() => this.isUpdatingMetadataOrder = false);
},
@ -578,15 +594,15 @@ export default {
.then(() => this.isUpdatingMetadataSectionsOrder = false)
.catch(() => this.isUpdatingMetadataSectionsOrder = false);
},
onChangeEnable($event, index) {
onChangeEnable($event, index, sectionIndex) {
let metadataOrder = [];
for (let metadatum of this.activeMetadatumList)
for (let metadatum of this.activeMetadataSectionsList[sectionIndex].metadata_object_list)
if (metadatum != undefined)
metadataOrder.push({'id': metadatum.id, 'enabled': metadatum.enabled});
metadataOrder[index].enabled = $event;
this.isUpdatingMetadataOrder = true;
this.updateCollectionMetadataOrder({ collectionId: this.collectionId, metadataOrder: metadataOrder })
this.updateCollectionMetadataOrder({ collectionId: this.collectionId, metadataOrder: metadataOrder, metadataSectionId: this.activeMetadataSectionsList[sectionIndex].id })
.then(() => this.isUpdatingMetadataOrder = false)
.catch(() => this.isUpdatingMetadataOrder = false);
},
@ -603,8 +619,7 @@ export default {
.catch(() => this.isUpdatingMetadataSectionsOrder = false);
},
addMetadatumViaButton(metadatumType) {
let lastIndex = this.activeMetadatumList.length;
this.addNewMetadatum(metadatumType, lastIndex);
this.addNewMetadatum(metadatumType, this.activeMetadataSectionsList[0].metadata_object_list.length, 0);
// Higlights the clicked metadatum
this.hightlightedMetadatum = metadatumType.name;
@ -614,7 +629,7 @@ export default {
let lastIndex = this.activeMetadataSectionsList.length;
this.addNewMetadataSection(lastIndex);
},
addNewMetadatum(newMetadatum, newIndex, metadataSectionId) {
addNewMetadatum(newMetadatum, newIndex, sectionIndex) {
this.sendMetadatum({
collectionId: this.collectionId,
name: newMetadatum.name,
@ -623,11 +638,11 @@ export default {
isRepositoryLevel: false,
newIndex: newIndex,
parent: '0',
sectionId: metadataSectionId
sectionId: this.activeMetadataSectionsList[sectionIndex].id
})
.then((metadatum) => {
this.updateMetadataOrder();
this.updateMetadataOrder(sectionIndex);
this.toggleMetadatumEdition(metadatum)
this.hightlightedMetadatum = '';
@ -652,7 +667,7 @@ export default {
this.$console.error(error);
});
},
removeMetadatum(removedMetadatum) {
removeMetadatum(removedMetadatum, sectionIndex) {
this.$buefy.modal.open({
parent: this,
component: CustomDialog,
@ -667,7 +682,7 @@ export default {
isRepositoryLevel: false
})
.then(() => {
this.updateMetadataOrder();
this.updateMetadataOrder(sectionIndex);
})
.catch(() => {
this.$console.log("Error deleting metadatum.")
@ -708,11 +723,11 @@ export default {
toggleMetadataSectionEdition(metadataSection) {
this.$router.push({ query: { sectionEdit: metadataSection.id } });
},
editMetadatum(metadatum) {
this.openedMetadatumId = metadatum.id;
editMetadatum(metadatumId) {
this.openedMetadatumId = metadatumId;
},
editMetadataSection(metadataSection) {
this.openedMetadataSectionId = metadataSection.id;
editMetadataSection(metadataSectionId) {
this.openedMetadataSectionId = metadataSectionId;
},
onEditionFinished() {
this.openedMetadatumId = '';
@ -730,42 +745,6 @@ export default {
this.openedMetadataSectionId = '';
this.$router.push({ query: {}});
},
refreshMetadata(metadataSection) {
this.isLoadingMetadata = true;
// Cancels previous Request
if (this.metadataSearchCancel != undefined)
this.metadataSearchCancel.cancel('Metadata search Canceled.');
this.fetchMetadata({
collectionId: this.collectionId,
isRepositoryLevel: false,
isContextEdit: true,
includeDisabled: true,
parent: '0',
includeOptionsAsHtml: true
}).then((resp) => {
resp.request
.then(() => {
this.isLoadingMetadata = false;
// Checks URL as router watcher would not wait for list to load
if (this.$route.query.edit != undefined) {
let existingMetadataIndex = this.activeMetadatumList.findIndex((metadatum) => metadatum.id == this.$route.query.edit);
if (existingMetadataIndex >= 0)
this.editMetadatum(this.activeMetadatumList[existingMetadataIndex]);
}
})
.catch(() => {
this.isLoadingMetadata = false;
});
// Search Request Token for cancelling
this.metadataSearchCancel = resp.source;
})
.catch(() => this.isLoadingMetadata = false);
},
filterByMetadatumName(metadatum) {
if (metadatum.metadata_type_object &&
metadatum.metadata_type_object.component == 'tainacan-compound' &&

7
src/views/admin/components/lists/collections-list.vue
View File

@ -155,6 +155,7 @@
v-tooltip="{
content: $i18n.get('status_' + collection.status),
autoHide: true,
html: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}">
@ -193,6 +194,7 @@
},
content: collection.name,
autoHide: false,
html: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}">
@ -213,6 +215,7 @@
},
content: (collection.description != undefined && collection.description != '') ? collection.description : `<span class='has-text-gray is-italic'>` + $i18n.get('label_description_not_provided') + `</span>`,
autoHide: false,
html: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
@ -233,6 +236,7 @@
},
content: collection.modification_date,
autoHide: false,
html: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
@ -253,6 +257,7 @@
},
content: collection.creation_date,
autoHide: false,
html: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
@ -273,6 +278,7 @@
},
content: collection.author_name,
autoHide: false,
html: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
@ -294,6 +300,7 @@
},
content: getTotalItemsDetailed(collection.total_items),
autoHide: false,
html: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"

10
src/views/admin/components/lists/metadata-types-list.vue
View File

@ -67,7 +67,7 @@
v-if="!isRepositoryLevel"
v-model="availableMetadataSectionsList"
:sort="false"
:group="{ name:'metadata', pull: 'clone', put: false, revertClone: true }"
:group="{ name:'metadata-sections', pull: 'clone', put: false, revertClone: true }"
drag-class="sortable-drag">
<div
:id="metadataSection.id"
@ -167,11 +167,11 @@ export default {
...mapGetters('metadata',[
'getMetadatumTypes'
]),
addMetadatumViaVutton(metadatumType) {
this.$emit('onAddMetadatumTypeViaButton', metadatumType);
addMetadatumViaButton(metadatumType) {
this.$eventBusMetadataList.onAddMetadatumViaButton(metadatumType);
},
addMetadataSectionViaVutton() {
this.$emit('onAddMetadataSectionTypeViaButton');
addMetadataSectionViaButton() {
this.$eventBusMetadataList.onAddMetadataSectionViaButton();
},
getPreviewTemplateContent(metadatum) {
return `<div class="metadata-type-preview tainacan-form">

1
src/views/admin/components/lists/repository-metadata-list.vue
View File

@ -336,6 +336,7 @@ export default {
mounted() {
this.cleanMetadata();
this.refreshMetadata();
this.$eventBusMetadataList.$on('addMetadatumViaButton', this.addMetadatumViaButton);
},
beforeDestroy() {
// Cancels previous Request

3
src/views/admin/js/admin-main.js
View File

@ -88,6 +88,7 @@ import store from './store/store'
import router from './router'
import eventBusSearch from './event-bus-search';
import eventBusTermsList from './event-bus-terms-list.js';
import eventBusMetadataList from './event-bus-metadata-list.js';
import {
I18NPlugin,
UserPrefsPlugin,
@ -252,7 +253,9 @@ export default (element) => {
Vue.component('draggable', draggable);
Vue.component('tainacan-title', TainacanTitle);
// Event bus are needed to facilate comunication between child-parent-child components
Vue.use(eventBusTermsList, {});
Vue.use(eventBusMetadataList, {});
Vue.use(eventBusSearch, { store: store, router: router});
// Changing title of pages

19
src/views/admin/js/event-bus-metadata-list.js Normal file
View File

@ -0,0 +1,19 @@
export default {
install(Vue, options = {}) {
Vue.prototype.$eventBusMetadataList = new Vue({
data: {
},
methods: {
onAddMetadatumViaButton(metadataType) {
this.$emit('addMetadatumViaButton', metadataType);
},
onAddMetadataSectionViaButton() {
this.$emit('addMetadataSectionViaButton');
}
}
});
}
}

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

@ -93,6 +93,7 @@ export const sendMetadatum = ({commit}, {collectionId, name, metadatumType, stat
axios.tainacan.post(endpoint, params)
.then(res => {
let metadatum = res.data;
commit('setSingleMetadatum', { metadatum: metadatum, index: newIndex, isRepositoryLevel: isRepositoryLevel });
resolve(metadatum);
@ -281,9 +282,10 @@ export const updateMetadatumMappers = ({commit}, metadatumMappers) => {
};
// METADATA SECTIONS
export const fetchMetadataSections = ({commit}, {collectionId}) => {
export const fetchMetadataSections = ({commit}, { collectionId, isContextEdit }) => {
return new Promise((resolve, reject) => {
axios.tainacan.get('/collection/' + collectionId + '/metadata-sections')
axios.tainacan.get('/collection/' + collectionId + '/metadata-sections' + (isContextEdit ? '?context=edit' : ''))
.then((res) => {
let metadataSections = res.data;
commit('setMetadataSections', metadataSections);

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

@ -31,8 +31,6 @@
<metadata-types-list
:hightlighted-metadatum="hightlightedMetadatum"
:is-repository-level="isRepositoryLevel"
@onAddMetadatumTypeViaButton="addMetadatumViaButton"
@onAddMetadataSectionTypeViaButton="addMetadataSectionViaButton"
@onFinishedLoadingMetadataTypes="createMetadataTypeFilterOptions"/>
</div>
</b-tab-item>
@ -95,7 +93,7 @@ export default {
this.$root.$emit('onCollectionBreadCrumbUpdate', [{ path: '', label: this.$i18n.get('metadata') }]);
},
methods: {
...mapGetters('collections',[
...mapGetters('collection',[
'getCollection'
]),
...mapGetters('metadata',[

1
src/views/tainacan-i18n.php
View File

@ -804,6 +804,7 @@ return apply_filters( 'tainacan-i18n', [
'info_logs_before' => __( 'Before', 'tainacan' ),
'info_logs_after' => __( 'After', 'tainacan' ),
'info_there_is_no_metadatum' => __( 'There is no metadata here yet.', 'tainacan' ),
'info_there_is_no_metadata_section' => __( 'There is no metadata section here yet.', 'tainacan' ),
'info_there_is_no_filter' => __( 'There is no filter here yet.', 'tainacan' ),
'info_changes' => __( 'Changes', 'tainacan' ),
'info_possible_external_sources' => __( 'Possible external sources: CSV, Instagram, YouTube, etc.', 'tainacan' ),