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

Merge pull request #500 from tainacan/feature/481 

Feature/481
This commit is contained in:
Mateus Machado Luna 2021-03-02 14:22:07 -03:00 committed by GitHub
parent 5cfc6cf3d9 cb4cab0505
commit f9d18d1857
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 925 additions and 289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/classes/api/endpoints/class-tainacan-rest-metadata-controller.php
View File

@ -308,14 +308,17 @@ class REST_Metadata_Controller extends REST_Controller {
$item_arr = $item->_toArray(); $item_arr = $item->_toArray();
$item_arr['metadata_type_object'] = $item->get_metadata_type_object()->_toArray(); $item_arr['metadata_type_object'] = $item->get_metadata_type_object()->_toArray();
if(isset($item_arr['metadata_type_options']) && isset($item_arr['metadata_type_options']['taxonomy_id'])){ if ( isset($request['include_options_as_html']) && $request['include_options_as_html'] == 'yes' )
$item_arr['options_as_html'] = $item->get_metadata_type_object()->get_options_as_html();
if ( isset($item_arr['metadata_type_options']) && isset($item_arr['metadata_type_options']['taxonomy_id']) ) {
$taxonomy = Repositories\Taxonomies::get_instance()->get_db_identifier_by_id( $item_arr['metadata_type_options']['taxonomy_id'] ); $taxonomy = Repositories\Taxonomies::get_instance()->get_db_identifier_by_id( $item_arr['metadata_type_options']['taxonomy_id'] );
//$taxonomy = new Entities\Taxonomy($item_arr['metadata_type_options']['taxonomy_id']); //$taxonomy = new Entities\Taxonomy($item_arr['metadata_type_options']['taxonomy_id']);
//$item_arr['metadata_type_options']['taxonomy'] = $taxonomy->get_db_identifier(); //$item_arr['metadata_type_options']['taxonomy'] = $taxonomy->get_db_identifier();
$item_arr['metadata_type_options']['taxonomy'] = $taxonomy; $item_arr['metadata_type_options']['taxonomy'] = $taxonomy;
} }
if($request['context'] === 'edit'){ if ($request['context'] === 'edit') {
$item_arr['current_user_can_edit'] = $item->can_edit(); $item_arr['current_user_can_edit'] = $item->can_edit();
$item_arr['current_user_can_delete'] = $item->can_delete(); $item_arr['current_user_can_delete'] = $item->can_delete();
ob_start(); ob_start();

1
src/views/admin/components/edition/collection-edition-form.vue
View File

@ -4,6 +4,7 @@
:class="{'repository-level-page' : isNewCollection }"> :class="{'repository-level-page' : isNewCollection }">
<tainacan-title <tainacan-title
:bread-crumb-items="[{ path: '', label: $i18n.get('collection') }]"/> :bread-crumb-items="[{ path: '', label: $i18n.get('collection') }]"/>
<form <form
v-if="collection != null && collection != undefined && ((isNewCollection && $userCaps.hasCapability('tnc_rep_edit_collections')) || (!isNewCollection && collection.current_user_can_edit))" v-if="collection != null && collection != undefined && ((isNewCollection && $userCaps.hasCapability('tnc_rep_edit_collections')) || (!isNewCollection && collection.current_user_can_edit))"
class="tainacan-form" class="tainacan-form"

10
src/views/admin/components/edition/metadatum-edition-form.vue
View File

@ -316,8 +316,8 @@
if (this.closedByForm) { if (this.closedByForm) {
this.editedMetadatum.saved = true; this.editedMetadatum.saved = true;
} else { } else {
this.oldForm.saved = this.editForm.saved; this.$set(this.oldForm, 'saved', this.editForm.saved);
if (JSON.stringify(this.editForm) != JSON.stringify(this.oldForm)) if (!_.isEqual(this.editForm, this.oldForm))
this.editedMetadatum.saved = false; this.editedMetadatum.saved = false;
else else
this.editedMetadatum.saved = true; this.editedMetadatum.saved = true;
@ -341,7 +341,8 @@
metadatumId: metadatum.id, metadatumId: metadatum.id,
isRepositoryLevel: this.isRepositoryLevel, isRepositoryLevel: this.isRepositoryLevel,
index: this.index, index: this.index,
options: this.editForm options: this.editForm,
includeOptionsAsHtml: true
}) })
.then(() => { .then(() => {
this.editForm = {}; this.editForm = {};
@ -380,7 +381,8 @@
metadatumId: metadatum.id, metadatumId: metadatum.id,
isRepositoryLevel: this.isRepositoryLevel, isRepositoryLevel: this.isRepositoryLevel,
index: this.index, index: this.index,
options: formObj options: formObj,
includeOptionsAsHtml: true
}) })
.then(() => { .then(() => {
this.editForm = {}; this.editForm = {};

121
src/views/admin/components/metadata-types/compound/child-metadata-list.vue
View File

@ -31,18 +31,31 @@
<div <div
class="active-metadatum-item" class="active-metadatum-item"
:class="{ :class="{
'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId, 'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied,
'not-focusable-item': openedMetadatumId == metadatum.id, 'not-focusable-item': openedMetadatumId == metadatum.id,
'disabled-metadatum': parent.enabled == false, 'disabled-metadatum': parent.enabled == false,
'inherited-metadatum': (metadatum.collection_id != collectionId && metadatum.parent == 0) || isRepositoryLevel 'inherited-metadatum': (metadatum.collection_id != collectionId && metadatum.parent == 0) || isRepositoryLevel
}" }"
v-for="(metadatum, index) in childrenMetadata" v-for="(metadatum, index) in childrenMetadata"
:key="metadatum.id"> :key="metadatum.id"
v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)">
<div <div
:ref="'metadatum-handler-' + metadatum.id" :ref="'metadatum-handler-' + metadatum.id"
class="handle"> class="handle">
<span <span
:style="{ opacity: !( metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId) ? '1.0' : '0.0' }" v-tooltip="{
content: $i18n.get('label_view_metadata_details'),
autoHide: true,
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
placement: 'auto-start'
}"
@click="$set(collapses, metadatum.id, !isCollapseOpen(metadatum.id))"
class="gray-icon icon"
:style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }">
<i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
</span>
<span
:style="{ opacity: !(metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }"
v-tooltip="{ v-tooltip="{
content: metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'), content: metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'),
autoHide: true, autoHide: true,
@ -52,24 +65,7 @@
class="icon grip-icon"> class="icon grip-icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/> <i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/>
</span> </span>
<span
v-tooltip="{
content: (metadatum.collection_id == 'default') || isRepositoryLevel ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'),
autoHide: true,
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon icon-level-identifier">
<i
:class="{
'tainacan-icon-collections': (metadatum.collection_id != 'default' && !isRepositoryLevel),
'tainacan-icon-repository': (metadatum.collection_id == 'default') || isRepositoryLevel,
'has-text-turquoise5': (metadatum.collection_id != 'default' && !isRepositoryLevel),
'has-text-blue5': (metadatum.collection_id == 'default' || isRepositoryLevel),
'has-text-gray3': !parent.enabled
}"
class="tainacan-icon" />
</span>
<span <span
class="metadatum-name" class="metadatum-name"
:class="{'is-danger': formWithErrors == metadatum.id }"> :class="{'is-danger': formWithErrors == metadatum.id }">
@ -97,9 +93,43 @@
</span> </span>
<span <span
v-if="metadatum.status == 'private'" v-if="metadatum.status == 'private'"
class="icon"> class="icon"
v-tooltip="{
content: $i18n.get('status_private'),
autoHide: true,
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
placement: 'auto-start'
}">
<i class="tainacan-icon tainacan-icon-private"/> <i class="tainacan-icon tainacan-icon-private"/>
</span> </span>
<span
v-if="metadatum.required === 'yes'"
v-tooltip="{
content: $i18n.get('label_required'),
autoHide: true,
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
placement: 'auto-start'
}">
*&nbsp;
</span>
<span
v-tooltip="{
content: (metadatum.collection_id == 'default') || isRepositoryLevel ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'),
autoHide: true,
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon icon-level-identifier">
<i
:class="{
'tainacan-icon-collections': (metadatum.collection_id != 'default' && !isRepositoryLevel),
'tainacan-icon-repository': (metadatum.collection_id == 'default') || isRepositoryLevel,
'has-text-turquoise5': (metadatum.collection_id != 'default' && !isRepositoryLevel),
'has-text-blue5': (metadatum.collection_id == 'default' || isRepositoryLevel),
'has-text-gray3': !parent.enabled
}"
class="tainacan-icon" />
</span>
</span> </span>
<span <span
class="loading-spinner" class="loading-spinner"
@ -147,6 +177,11 @@
</a> </a>
</span> </span>
</div> </div>
<transition name="form-collapse">
<metadatum-details
v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
:metadatum="metadatum" />
</transition>
<transition name="form-collapse"> <transition name="form-collapse">
<div v-if="openedMetadatumId == metadatum.id"> <div v-if="openedMetadatumId == metadatum.id">
<metadatum-edition-form <metadatum-edition-form
@ -169,16 +204,31 @@
<script> <script>
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
import MetadatumEditionForm from '../../edition/metadatum-edition-form.vue'; import MetadatumEditionForm from '../../edition/metadatum-edition-form.vue';
import MetadatumDetails from '../../other/metadatum-details.vue';
import CustomDialog from '../../other/custom-dialog.vue'; import CustomDialog from '../../other/custom-dialog.vue';
export default { export default {
components: { components: {
MetadatumEditionForm MetadatumEditionForm,
MetadatumDetails
}, },
props: { props: {
isRepositoryLevel: Boolean, isRepositoryLevel: Boolean,
parent: Object, parent: Object,
isParentMultiple: Boolean isParentMultiple: Boolean,
metadataNameFilterString: String,
hasSomeMetadataTypeFilterApplied: {
type: Boolean,
default: new Boolean()
},
metadataTypeFilterOptions: {
type: Array,
default: new Array()
},
collapseAll: {
type: Boolean,
default: new Boolean()
}
}, },
data() { data() {
return { return {
@ -190,7 +240,8 @@
hightlightedMetadatum: '', hightlightedMetadatum: '',
editForms: {}, editForms: {},
metadataSearchCancel: undefined, metadataSearchCancel: undefined,
childrenMetadata: [] childrenMetadata: [],
collapses: {}
} }
}, },
watch: { watch: {
@ -213,6 +264,9 @@
this.childrenMetadata = []; this.childrenMetadata = [];
}, },
immediate: true immediate: true
},
collapseAll(isCollapsed) {
this.childrenMetadata.forEach((metadatum) => this.$set(this.collapses, metadatum.id, isCollapsed));
} }
}, },
beforeRouteLeave ( to, from, next ) { beforeRouteLeave ( to, from, next ) {
@ -378,6 +432,23 @@
isAvailableChildMetadata(to, from, item) { isAvailableChildMetadata(to, from, item) {
return !['tainacan-compound', 'tainacan-taxonomy'].includes(item.id); return !['tainacan-compound', 'tainacan-taxonomy'].includes(item.id);
}, },
isCollapseOpen(metadatumId) {
return this.collapses[metadatumId] == true;
},
filterByMetadatumName(metadatum) {
return metadatum.name.toString().toLowerCase().indexOf(this.metadataNameFilterString.toString().toLowerCase()) >= 0;
},
filterByMetadatumType(metadatum) {
if (!this.hasSomeMetadataTypeFilterApplied)
return true;
for (let metadatumType of this.metadataTypeFilterOptions) {
if (metadatumType.enabled && metadatum.metadata_type == metadatumType.type)
return true;
}
return false;
}
} }
} }
</script> </script>

11
src/views/admin/components/metadata-types/compound/class-tainacan-compound.php
View File

@ -75,6 +75,17 @@ class Compound extends Metadata_Type {
} }
/** /**
* Gets print-ready version of the options list in html
*
* Checks if at least one option exists, otherwise return an empty string
*
* @return string An html content with labels and values for the options or an empty string
*/
public function get_options_as_html() {
return '';
}
/**
* save options and remove old children * save options and remove old children
* @param $options * @param $options
*/ */

26
src/views/admin/components/metadata-types/metadata-type/class-tainacan-metadata-type.php
View File

@ -199,12 +199,38 @@ abstract class Metadata_Type {
return isset($options[$key]) ? $options[$key] : ''; return isset($options[$key]) ? $options[$key] : '';
} }
/**
* Gets print-ready version of the options list in html
*
* Checks if at least one option exists, otherwise return an empty string
*
* @return string An html content with labels and values for the options or an empty string
*/
public function get_options_as_html() {
$options_as_html = '';
$options = $this->get_options();
if ( count($options) > 0 ) {
$form_labels = $this->get_form_labels();
foreach($options as $option_label => $option_value) {
if ( $option_value != '' ) {
$options_as_html .= '<div class="field"><div class="label">' . ( isset($form_labels[$option_label]) && isset($form_labels[$option_label]['title']) ? $form_labels[$option_label]['title'] : $option_label ) .'</div>';
$options_as_html .= '<div class="value">' . ($option_value == 'yes' ? __('Yes', 'tainacan') : ($option_value == 'no' ? __('No', 'tainacan') : $option_value) ) . '</div></div>';
}
}
}
return $options_as_html;
}
/** /**
* allow i18n from messages * allow i18n from messages
*/ */
public function get_form_labels(){ public function get_form_labels(){
return []; return [];
} }
/** /**
* generate the metadata for this metadatum type * generate the metadata for this metadatum type
*/ */

1
src/views/admin/components/metadata-types/numeric/class-tainacan-numeric.php
View File

@ -37,4 +37,5 @@ class Numeric extends Metadata_Type {
] ]
]; ];
} }
} }

63
src/views/admin/components/metadata-types/relationship/class-tainacan-relationship.php
View File

@ -66,6 +66,69 @@ class Relationship extends Metadata_Type {
]; ];
} }
/**
* Gets print-ready version of the options list in html
*
* Checks if at least one option exists, otherwise return an empty string
*
* @return string An html content with labels and values for the options or an empty string
*/
public function get_options_as_html() {
$options_as_html = '';
$options = $this->get_options();
if ( count($options) > 0 ) {
// Remove this option that is not relevant for the user
if ( isset($options['related_primitive_type']) )
unset($options['related_primitive_type']);
$form_labels = $this->get_form_labels();
foreach($options as $option_label => $option_value) {
if ( $option_value != '' ) {
$options_as_html .= '<div class="field"><div class="label">' . ( isset($form_labels[$option_label]) && isset($form_labels[$option_label]['title']) ? $form_labels[$option_label]['title'] : $option_label ) .'</div>';
$readable_option_value = '';
switch($option_label) {
case 'collection_id':
$collection = \tainacan_collections()->fetch( (int) $option_value );
if ( $collection instanceof \Tainacan\Entities\Collection )
$readable_option_value = $collection->get_name();
else
$readable_option_value = $option_value;
break;
case 'search':
$metadata = \tainacan_metadata()->fetch( (int) $option_value );
if ( $metadata ) {
$readable_option_value = $metadata;
} else
$readable_option_value = $option_value;
break;
case 'repeated':
if ($option_value == 'yes')
$readable_option_value = __('Yes', 'tainacan');
else if ($option_value == 'no')
$readable_option_value = __('No', 'tainacan');
else
$readable_option_value = $option_value;
break;
default:
$readable_option_value = $option_value;
}
$options_as_html .= '<div class="value">' . $readable_option_value . '</div></div>';
}
}
}
return $options_as_html;
}
public function validate_options(\Tainacan\Entities\Metadatum $metadatum) { public function validate_options(\Tainacan\Entities\Metadatum $metadatum) {
if ( !in_array($metadatum->get_status(), apply_filters('tainacan-status-require-validation', ['publish','future','private'])) ) if ( !in_array($metadatum->get_status(), apply_filters('tainacan-status-require-validation', ['publish','future','private'])) )
return true; return true;

5
src/views/admin/components/metadata-types/taxonomy/FormTaxonomy.vue
View File

@ -153,6 +153,7 @@
isReady: false, isReady: false,
taxonomies: [], taxonomies: [],
taxonomy_id: '', taxonomy_id: '',
taxonomy: '',
loading: false, loading: false,
allow_new_terms: 'yes', allow_new_terms: 'yes',
link_filtered_by_collections: [], link_filtered_by_collections: [],
@ -235,6 +236,7 @@
this.visible_options_list = ( this.value.visible_options_list ) ? this.value.visible_options_list : false; this.visible_options_list = ( this.value.visible_options_list ) ? this.value.visible_options_list : false;
this.link_filtered_by_collections = ( this.value.link_filtered_by_collections ) ? this.value.link_filtered_by_collections : []; this.link_filtered_by_collections = ( this.value.link_filtered_by_collections ) ? this.value.link_filtered_by_collections : [];
this.taxonomy = this.value.taxonomy ? this.value.taxonomy : '';
} }
this.isReady = true; this.isReady = true;
@ -286,7 +288,8 @@
input_type: this.input_type, input_type: this.input_type,
allow_new_terms: this.allow_new_terms, allow_new_terms: this.allow_new_terms,
visible_options_list: this.visible_options_list, visible_options_list: this.visible_options_list,
link_filtered_by_collections: this.link_filtered_by_collections link_filtered_by_collections: this.link_filtered_by_collections,
taxonomy: this.taxonomy
}) })
}, },
updateSelectedCollections(selectedCollections) { updateSelectedCollections(selectedCollections) {

100
src/views/admin/components/metadata-types/taxonomy/class-tainacan-taxonomy.php
View File

@ -82,8 +82,8 @@ class Taxonomy extends Metadata_Type {
public function get_form_labels(){ public function get_form_labels(){
return [ return [
'taxonomy_id' => [ 'taxonomy_id' => [
'title' => __( 'Related Collection', 'tainacan' ), 'title' => __( 'Related Taxonomy', 'tainacan' ),
'description' => __( 'Select the collection to fetch items', 'tainacan' ), 'description' => __( 'Select the taxonomy to fetch terms', 'tainacan' ),
], ],
'input_type' => [ 'input_type' => [
'title' => __( 'Input type', 'tainacan' ), 'title' => __( 'Input type', 'tainacan' ),
@ -104,6 +104,102 @@ class Taxonomy extends Metadata_Type {
]; ];
} }
/**
* Gets print-ready version of the options list in html
*
* Checks if at least one option exists, otherwise return an empty string
*
* @return string An html content with labels and values for the options or an empty string
*/
public function get_options_as_html() {
$options_as_html = '';
$options = $this->get_options();
if ( count($options) > 0 ) {
// Remove this option as it doesn't matter if using a taginput
if ( isset($options['visible_options_list']) && isset($options['input_type']) && $options['input_type'] == 'tainacan-taxonomy-tag-input' )
unset($options['visible_options_list']);
$form_labels = $this->get_form_labels();
foreach($options as $option_label => $option_value) {
if ( $option_value != '' ) {
$options_as_html .= '<div class="field"><div class="label">' . ( isset($form_labels[$option_label]) && isset($form_labels[$option_label]['title']) ? $form_labels[$option_label]['title'] : $option_label ) .'</div>';
$readable_option_value = '';
switch($option_label) {
case 'taxonomy_id':
$taxonomy = \tainacan_taxonomies()->fetch( (int) $option_value );
if ( $taxonomy instanceof \Tainacan\Entities\Taxonomy )
$readable_option_value = $taxonomy->get_name();
else
$readable_option_value = $option_value;
break;
case 'input_type':
if ($option_value == 'tainacan-taxonomy-radio')
$readable_option_value = __('Radio', 'tainacan');
else if ($option_value == 'tainacan-taxonomy-checkbox')
$readable_option_value = __('Checkbox', 'tainacan');
else if ($option_value == 'tainacan-taxonomy-tag-input')
$readable_option_value = __('Taginput', 'tainacan');
else
$readable_option_value = $option_value;
break;
case 'visible_options_list':
if ($option_value == 1)
$readable_option_value = __('Yes', 'tainacan');
else if ($option_value == 0)
$readable_option_value = __('No', 'tainacan');
else
$readable_option_value = $option_value;
break;
case 'allow_new_terms':
if ($option_value == 'yes')
$readable_option_value = __('Yes', 'tainacan');
else if ($option_value == 'no')
$readable_option_value = __('No', 'tainacan');
else
$readable_option_value = $option_value;
break;
case 'link_filtered_by_collections':
if (count($option_value) > 0) {
$collections = \tainacan_collections()->fetch( [ 'post__in' => $option_value ], 'OBJECT' );
if ( is_array($collections) ) {
$collection_names = '';
for ($i = 0; $i < count($collections); $i++) {
$collection_names .= $collections[$i]->get_name();
if ($i < count($collections) - 1)
$collection_names .= ', ';
}
$readable_option_value = $collection_names;
}
else
$readable_option_value = $option_value;
} else
$readable_option_value = __( 'None', 'tainacan' );
break;
default:
$readable_option_value = $option_value;
}
$options_as_html .= '<div class="value">' . $readable_option_value . '</div></div>';
}
}
}
return $options_as_html;
}
public function validate_options( Metadatum $metadatum) { public function validate_options( Metadatum $metadatum) {
if ( !in_array($metadatum->get_status(), apply_filters('tainacan-status-require-validation', ['publish','future','private'])) ) if ( !in_array($metadatum->get_status(), apply_filters('tainacan-status-require-validation', ['publish','future','private'])) )

106
src/views/admin/components/other/metadatum-details.vue Normal file
View File

@ -0,0 +1,106 @@
<template>
<div class="tainacan-form metadatum-details">
<div
v-if="metadatum.description"
class="field">
<div class="label">{{ $i18n.getHelperTitle('metadata', 'description') }}</div>
<div class="value">{{ metadatum.description }}</div>
</div>
<div
v-if="metadatum.semantic_uri"
class="field">
<div class="label">{{ $i18n.getHelperTitle('metadata', 'semantic_uri') }}</div>
<div class="value">{{ metadatum.semantic_uri }}</div>
</div>
<!-- <div class="field">
<div class="label">{{ $i18n.getHelperTitle('metadata', 'status') }}</div>
<div class="value">
<template v-if="metadatum.status === 'publish'">{{ $i18n.get('publish_visibility') }}</template>
<template v-if="metadatum.status === 'private'">{{ $i18n.get('private_visibility') }}</template>
</div>
</div> -->
<div class="field">
<div class="label">{{ $i18n.get('label_display') }}</div>
<div class="value">
<template v-if="metadatum.display === 'yes'">{{ $i18n.get('label_display_default') }}</template>
<template v-if="metadatum.display === 'no'">{{ $i18n.get('label_not_display') }}</template>
<template v-if="metadatum.display === 'never'">{{ $i18n.get('label_display_never') }}</template>
</div>
</div>
<div
v-if="insertOptions != ''"
class="field">
<div class="label">{{ $i18n.get('label_insert_options') }}</div>
<div class="value">{{ insertOptions }}</div>
</div>
<div
v-if="metadatum.options_as_html"
v-html="metadatum.options_as_html" />
</div>
</template>
<script>
export default {
props: {
metadatum: Object
},
computed: {
insertOptions() {
const enableInsertOptions = [];
if (this.metadatum.required === 'yes')
enableInsertOptions.push(this.$i18n.getHelperTitle('metadata', 'required'));
if (this.metadatum.multiple === 'yes')
enableInsertOptions.push(this.$i18n.getHelperTitle('metadata', 'multiple'));
if (this.metadatum.collection_key === 'yes')
enableInsertOptions.push(this.$i18n.getHelperTitle('metadata', 'collection_key'));
return enableInsertOptions.join(', ');
}
}
}
</script>
<style lang="scss" scoped>
.metadatum-details {
padding: 0.75em 1.5em 0.75em 3.5em;
-moz-column-count: 3;
-moz-column-gap: 0;
-moz-column-rule: none;
-webkit-column-count: 3;
-webkit-column-gap: 0;
-webkit-column-rule: none;
column-count: 3;
column-gap: 4em;
column-rule: none;
@media screen and (max-width: 1024px) {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
@media screen and (max-width: 768px) {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
/deep/ .field {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
margin-bottom: 1em;
& > .field:not(:last-child) {
margin-bottom: 0em;
}
.label {
white-space: normal;
}
.value {
font-size: 0.9em;
}
}
}
</style>

9
src/views/admin/components/search/filters-items-list.vue
View File

@ -22,11 +22,13 @@
isRepositoryLevel) || filters.length > 0)" isRepositoryLevel) || filters.length > 0)"
class="link-style collapse-all" class="link-style collapse-all"
@click="collapseAll = !collapseAll"> @click="collapseAll = !collapseAll">
{{ !collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
<span class="icon"> <span class="icon">
<i <i
:class="{ 'tainacan-icon-arrowdown' : !collapseAll, 'tainacan-icon-arrowright' : collapseAll }" :class="{ 'tainacan-icon-arrowdown' : !collapseAll, 'tainacan-icon-arrowright' : collapseAll }"
class="has-text-secondary tainacan-icon tainacan-icon-1-25em"/> class="has-text-secondary tainacan-icon tainacan-icon-1-125em"/>
</span>
<span class="collapse-all__text">
{{ !collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
</span> </span>
</button> </button>
@ -495,6 +497,9 @@
.collapse-all { .collapse-all {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
margin-left: -0.65em;
}
.collapse-all__text {
font-size: 0.75em !important; font-size: 0.75em !important;
} }
.filters-components-list { .filters-components-list {

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

@ -1,6 +1,6 @@
import axios from '../../../axios'; import axios from '../../../axios';
export const fetchMetadata = ({commit}, {collectionId, isRepositoryLevel, isContextEdit, includeDisabled, isAdvancedSearch, parent, includeControlMetadataTypes}) => { export const fetchMetadata = ({commit}, { collectionId, isRepositoryLevel, isContextEdit, includeDisabled, isAdvancedSearch, parent, includeControlMetadataTypes, includeOptionsAsHtml }) => {
const source = axios.CancelToken.source(); const source = axios.CancelToken.source();
@ -26,6 +26,9 @@ export const fetchMetadata = ({commit}, {collectionId, isRepositoryLevel, isCont
if (includeControlMetadataTypes) if (includeControlMetadataTypes)
endpoint += '&include_control_metadata_types=true'; endpoint += '&include_control_metadata_types=true';
if (includeOptionsAsHtml)
endpoint += '&include_options_as_html=yes';
axios.tainacan.get(endpoint, { cancelToken: source.token }) axios.tainacan.get(endpoint, { cancelToken: source.token })
.then((res) => { .then((res) => {
let metadata = res.data; let metadata = res.data;
@ -48,7 +51,7 @@ export const fetchMetadata = ({commit}, {collectionId, isRepositoryLevel, isCont
}); });
}; };
export const sendMetadatum = ({commit}, {collectionId, name, metadatumType, status, isRepositoryLevel, newIndex, parent}) => { export const sendMetadatum = ({commit}, {collectionId, name, metadatumType, status, isRepositoryLevel, newIndex, parent, includeOptionsAsHtml}) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let endpoint = ''; let endpoint = '';
if (!isRepositoryLevel) if (!isRepositoryLevel)
@ -56,7 +59,12 @@ export const sendMetadatum = ({commit}, {collectionId, name, metadatumType, stat
else else
endpoint = '/metadata/'; endpoint = '/metadata/';
axios.tainacan.post(endpoint + '?context=edit', { endpoint += '?context=edit';
if (includeOptionsAsHtml)
endpoint += '&include_options_as_html=yes';
axios.tainacan.post(endpoint, {
name: name, name: name,
metadata_type: metadatumType, metadata_type: metadatumType,
status: status, status: status,
@ -74,7 +82,7 @@ export const sendMetadatum = ({commit}, {collectionId, name, metadatumType, stat
}); });
}; };
export const updateMetadatum = ({commit}, {collectionId, metadatumId, isRepositoryLevel, index, options}) => { export const updateMetadatum = ({commit}, {collectionId, metadatumId, isRepositoryLevel, index, options, includeOptionsAsHtml}) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let endpoint = ''; let endpoint = '';
@ -83,7 +91,12 @@ export const updateMetadatum = ({commit}, {collectionId, metadatumId, isReposito
else else
endpoint = '/metadata/' + metadatumId; endpoint = '/metadata/' + metadatumId;
axios.tainacan.put(endpoint + '?context=edit', options) endpoint += '?context=edit';
if (includeOptionsAsHtml)
endpoint += '&include_options_as_html=yes';
axios.tainacan.put(endpoint, options)
.then(res => { .then(res => {
let metadatum = res.data; let metadatum = res.data;
commit('setSingleMetadatum', { metadatum: metadatum, index: index, isRepositoryLevel: isRepositoryLevel }); commit('setSingleMetadatum', { metadatum: metadatum, index: index, isRepositoryLevel: isRepositoryLevel });

283
src/views/admin/pages/lists/filters-page.vue
View File

@ -12,12 +12,31 @@
<div <div
v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_filters') || (!isRepositoryLevel && collection && collection.current_user_can_edit_filters))" v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_filters') || (!isRepositoryLevel && collection && collection.current_user_can_edit_filters))"
:style="{ height: activeFilterList.length <= 0 && !isLoadingFilters ? 'auto' : 'calc(100vh - 6px - ' + columnsTopY + 'px)'}" :style="{ height: activeFiltersList.length <= 0 && !isLoadingFilters ? 'auto' : 'calc(100vh - 6px - ' + columnsTopY + 'px)'}"
class="columns" class="columns"
ref="filterEditionPageColumns"> ref="filterEditionPageColumns">
<div class="column"> <div class="column">
<div class="tainacan-form sub-header">
<h3>{{ $i18n.get('filters') }}</h3>
<template v-if="activeFiltersList && activeFiltersList.length > 5 && !isLoadingFilters">
<b-field class="header-item">
<b-input
:placeholder="$i18n.get('instruction_type_search_filter_filter')"
v-model="filterNameFilterString"
icon="magnify"
size="is-small"
icon-right="close-circle"
icon-right-clickable
@icon-right-click="filterNameFilterString = ''" />
</b-field>
</template>
</div>
<section <section
v-if="activeFilterList.length <= 0 && !isLoadingFilters" v-if="activeFiltersList.length <= 0 && !isLoadingFilters"
class="field is-grouped-centered section"> class="field is-grouped-centered section">
<div class="content has-text-gray has-text-centered"> <div class="content has-text-gray has-text-centered">
<p> <p>
@ -29,11 +48,12 @@
<p>{{ $i18n.get('info_create_filters' ) }}</p> <p>{{ $i18n.get('info_create_filters' ) }}</p>
</div> </div>
</section> </section>
<draggable <draggable
class="active-filters-area" class="active-filters-area"
@change="handleChangeOnFilter" @change="handleChangeOnFilter"
:class="{'filters-area-receive': isDraggingFromAvailable}" :class="{'filters-area-receive': isDraggingFromAvailable}"
v-model="activeFilterList" v-model="activeFiltersList"
:group="{ name:'filters', pull: false, put: true }" :group="{ name:'filters', pull: false, put: true }"
:sort="(openedFilterId == '' || openedFilterId == undefined) && !isRepositoryLevel" :sort="(openedFilterId == '' || openedFilterId == undefined) && !isRepositoryLevel"
:handle="'.handle'" :handle="'.handle'"
@ -44,16 +64,17 @@
<div <div
class="active-filter-item" class="active-filter-item"
:class="{ :class="{
'not-sortable-item': (isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true), 'not-sortable-item': (isRepositoryLevel || isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true || filterNameFilterString != ''),
'not-focusable-item': openedFilterId == filter.id, 'not-focusable-item': openedFilterId == filter.id,
'disabled-filter': filter.enabled == false, 'disabled-filter': filter.enabled == false,
'inherited-filter': filter.inherited || isRepositoryLevel 'inherited-filter': filter.inherited || isRepositoryLevel
}" }"
v-for="(filter, index) in activeFilterList" v-for="(filter, index) in activeFiltersList"
:key="filter.id"> :key="filter.id"
v-show="filterNameFilterString == '' || filter.name.toString().toLowerCase().indexOf(filterNameFilterString.toString().toLowerCase()) >= 0">
<div class="handle"> <div class="handle">
<span <span
:style="{ opacity: !(isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true || isRepositoryLevel) ? '1.0' : '0.0' }" :style="{ opacity: !(isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true || isRepositoryLevel || filterNameFilterString != '') ? '1.0' : '0.0' }"
v-tooltip="{ v-tooltip="{
content: (isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true) ? $i18n.get('info_not_allowed_change_order_filters') : $i18n.get('instruction_drag_and_drop_filter_sort'), content: (isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true) ? $i18n.get('info_not_allowed_change_order_filters') : $i18n.get('instruction_drag_and_drop_filter_sort'),
autoHide: true, autoHide: true,
@ -63,24 +84,6 @@
class="icon grip-icon"> class="icon grip-icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/>
</span> </span>
<span
v-tooltip="{
content: filter.collection_id != collectionId ? $i18n.get('label_repository_filter') : $i18n.get('label_collection_filter'),
autoHide: true,
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon icon-level-identifier">
<i
:class="{
'tainacan-icon-collections': filter.collection_id == collectionId,
'tainacan-icon-repository': filter.collection_id != collectionId,
'has-text-turquoise5': filter.enabled && filter.collection_id != 'default',
'has-text-blue5': filter.enabled && filter.collection_id == 'default',
'has-text-gray3': !filter.enabled
}"
class="tainacan-icon" />
</span>
<span <span
class="filter-name" class="filter-name"
:class="{'is-danger': formWithErrors == filter.id }"> :class="{'is-danger': formWithErrors == filter.id }">
@ -98,9 +101,33 @@
</span> </span>
<span <span
v-if="filter.status == 'private'" v-if="filter.status == 'private'"
class="icon"> class="icon"
v-tooltip="{
content: $i18n.get('status_private'),
autoHide: true,
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
placement: 'auto-start'
}">
<i class="tainacan-icon tainacan-icon-private"/> <i class="tainacan-icon tainacan-icon-private"/>
</span> </span>
<span
v-tooltip="{
content: filter.collection_id != collectionId ? $i18n.get('label_repository_filter') : $i18n.get('label_collection_filter'),
autoHide: true,
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon icon-level-identifier">
<i
:class="{
'tainacan-icon-collections': filter.collection_id == collectionId,
'tainacan-icon-repository': filter.collection_id != collectionId,
'has-text-turquoise5': filter.enabled && filter.collection_id != 'default',
'has-text-blue5': filter.enabled && filter.collection_id == 'default',
'has-text-gray3': !filter.enabled
}"
class="tainacan-icon" />
</span>
</span> </span>
<span <span
class="loading-spinner" class="loading-spinner"
@ -164,7 +191,7 @@
v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_filters') || !isRepositoryLevel)" v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_filters') || !isRepositoryLevel)"
class="column available-metadata-area"> class="column available-metadata-area">
<div class="field" > <div class="field" >
<h3 class="label has-text-secondary"> {{ $i18n.get('label_available_metadata') }}</h3> <h3 class="label"> {{ $i18n.get('label_available_metadata') }}</h3>
<draggable <draggable
@change="handleChangeOnMetadata" @change="handleChangeOnMetadata"
v-if="availableMetadata.length > 0 && !isLoadingMetadatumTypes" v-if="availableMetadata.length > 0 && !isLoadingMetadatumTypes"
@ -194,21 +221,6 @@
class="icon grip-icon"> class="icon grip-icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/>
</span> </span>
<span
v-tooltip="{
content: isRepositoryLevel || metadatum.collection_id != collectionId ? $i18n.get('label_repository_filter') : $i18n.get('label_collection_filter'),
autoHide: true,
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon icon-level-identifier">
<i
:class="{
'tainacan-icon-collections has-text-turquoise5': metadatum.collection_id == collectionId && !isRepositoryLevel,
'tainacan-icon-repository has-text-blue5': isRepositoryLevel || metadatum.collection_id != collectionId
}"
class="tainacan-icon" />
</span>
<span <span
v-tooltip="{ v-tooltip="{
content: metadatum.name + (metadatum.parent_name ? (' (' + $i18n.get('info_child_of') + ' ' + metadatum.parent_name + ')') : ''), content: metadatum.name + (metadatum.parent_name ? (' (' + $i18n.get('info_child_of') + ' ' + metadatum.parent_name + ')') : ''),
@ -225,6 +237,21 @@
<em>{{ '(' + $i18n.get('info_child_of') + ' ' + metadatum.parent_name + ')' }}</em> <em>{{ '(' + $i18n.get('info_child_of') + ' ' + metadatum.parent_name + ')' }}</em>
</span> </span>
</span> </span>
<span
v-tooltip="{
content: isRepositoryLevel || metadatum.collection_id != collectionId ? $i18n.get('label_repository_filter') : $i18n.get('label_collection_filter'),
autoHide: true,
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon icon-level-identifier">
<i
:class="{
'tainacan-icon-collections has-text-turquoise5': metadatum.collection_id == collectionId && !isRepositoryLevel,
'tainacan-icon-repository has-text-blue5': isRepositoryLevel || metadatum.collection_id != collectionId
}"
class="tainacan-icon" />
</span>
</div> </div>
</template> </template>
</draggable> </draggable>
@ -380,11 +407,12 @@ export default {
currentFilterTypePreview: undefined, currentFilterTypePreview: undefined,
columnsTopY: 0, columnsTopY: 0,
filtersSearchCancel: undefined, filtersSearchCancel: undefined,
metadataSearchCancel: undefined metadataSearchCancel: undefined,
filterNameFilterString: ''
} }
}, },
computed: { computed: {
activeFilterList: { activeFiltersList: {
get() { get() {
return this.getFilters(); return this.getFilters();
}, },
@ -400,9 +428,9 @@ export default {
'$route.query': { '$route.query': {
handler(newQuery) { handler(newQuery) {
if (newQuery.edit != undefined) { if (newQuery.edit != undefined) {
let existingFilterIndex = this.activeFilterList.findIndex((filter) => filter.id == newQuery.edit); let existingFilterIndex = this.activeFiltersList.findIndex((filter) => filter.id == newQuery.edit);
if (existingFilterIndex >= 0) if (existingFilterIndex >= 0)
this.editFilter(this.activeFilterList[existingFilterIndex]) this.editFilter(this.activeFiltersList[existingFilterIndex])
} }
}, },
immediate: true immediate: true
@ -541,7 +569,7 @@ export default {
this.availableMetadata.splice(metadatumIndex, 1); this.availableMetadata.splice(metadatumIndex, 1);
// Inserts it at the end of the list // Inserts it at the end of the list
let lastFilterIndex = this.activeFilterList.length; let lastFilterIndex = this.activeFiltersList.length;
// // Updates store with temporary Filter // // Updates store with temporary Filter
// this.addTemporaryFilter(metadatumType); // this.addTemporaryFilter(metadatumType);
@ -567,7 +595,7 @@ export default {
this.choosenMetadatum = {}; this.choosenMetadatum = {};
// Removes element from filters list // Removes element from filters list
this.activeFilterList.splice(this.newFilterIndex, 1); this.activeFiltersList.splice(this.newFilterIndex, 1);
}, },
handleChangeOnMetadata($event) { handleChangeOnMetadata($event) {
if ($event.removed) { if ($event.removed) {
@ -576,7 +604,7 @@ export default {
}, },
updateFiltersOrder() { updateFiltersOrder() {
let filtersOrder = []; let filtersOrder = [];
for (let filter of this.activeFilterList) { for (let filter of this.activeFiltersList) {
filtersOrder.push({'id': filter.id, 'enabled': filter.enabled}); filtersOrder.push({'id': filter.id, 'enabled': filter.enabled});
} }
this.isUpdatingFiltersOrder = true; this.isUpdatingFiltersOrder = true;
@ -602,7 +630,7 @@ export default {
} }
} }
for (let activeFilter of this.activeFilterList) { for (let activeFilter of this.activeFiltersList) {
for (let i = availableMetadata.length - 1; i >= 0 ; i--) { for (let i = availableMetadata.length - 1; i >= 0 ; i--) {
if (activeFilter.metadatum != undefined) { if (activeFilter.metadatum != undefined) {
if (activeFilter.metadatum.metadatum_id == availableMetadata[i].id) if (activeFilter.metadatum.metadatum_id == availableMetadata[i].id)
@ -615,7 +643,7 @@ export default {
}, },
onChangeEnable($event, index) { onChangeEnable($event, index) {
let filtersOrder = []; let filtersOrder = [];
for (let filter of this.activeFilterList) { for (let filter of this.activeFiltersList) {
filtersOrder.push({'id': filter.id, 'enabled': filter.enabled}); filtersOrder.push({'id': filter.id, 'enabled': filter.enabled});
} }
filtersOrder[index].enabled = $event; filtersOrder[index].enabled = $event;
@ -744,16 +772,16 @@ export default {
// Checks URL as router watcher would not wait for list to load // Checks URL as router watcher would not wait for list to load
if (this.$route.query.edit != undefined) { if (this.$route.query.edit != undefined) {
let existingFilterIndex = this.activeFilterList.findIndex((filter) => filter.id == this.$route.query.edit); let existingFilterIndex = this.activeFiltersList.findIndex((filter) => filter.id == this.$route.query.edit);
if (existingFilterIndex >= 0) if (existingFilterIndex >= 0)
this.editFilter(this.activeFilterList[existingFilterIndex]); this.editFilter(this.activeFiltersList[existingFilterIndex]);
} }
// Cancels previous Request // Cancels previous Request
if (this.metadataSearchCancel != undefined) if (this.metadataSearchCancel != undefined)
this.metadataSearchCancel.cancel('Metadata search Canceled.'); this.metadataSearchCancel.cancel('Metadata search Canceled.');
// Needs to be done after activeFilterList exists to compare and remove chosen metadata. // Needs to be done after activeFiltersList exists to compare and remove chosen metadata.
this.fetchMetadata({ this.fetchMetadata({
collectionId: this.collectionId, collectionId: this.collectionId,
isRepositoryLevel: this.isRepositoryLevel, isRepositoryLevel: this.isRepositoryLevel,
@ -822,6 +850,7 @@ export default {
.column { .column {
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
padding: 0.75em 0;
&>section.field { &>section.field {
position: absolute; position: absolute;
@ -835,6 +864,25 @@ export default {
margin-right: 0; margin-right: 0;
} }
} }
h3 {
font-weight: 500;
}
}
.sub-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5em 1em 0.5em 0.5em;
.header-item {
margin-left: 0.75rem;
margin-bottom: 0px;
}
h3 {
margin-right: auto;
}
} }
.loading-spinner { .loading-spinner {
@ -851,7 +899,6 @@ export default {
.active-filters-area { .active-filters-area {
font-size: 0.875em; font-size: 0.875em;
margin-right: 0.8em;
margin-left: -0.8em; margin-left: -0.8em;
padding-right: 3em; padding-right: 3em;
min-height: 330px; min-height: 330px;
@ -866,7 +913,7 @@ export default {
} }
&.filters-area-receive { &.filters-area-receive {
border: 1px dashed gray; border: 1px dashed var(--tainacan-gray4);
} }
.collapse { .collapse {
@ -928,7 +975,7 @@ export default {
.controls { .controls {
font-size: 0.875em; font-size: 0.875em;
position: absolute; position: absolute;
right: 5px; right: 10px;
top: 10px; top: 10px;
.switch { .switch {
position: relative; position: relative;
@ -941,53 +988,42 @@ export default {
} }
} }
&.not-sortable-item, &.not-sortable-item:hover { &.not-sortable-item,
&.not-sortable-item:hover {
cursor: default; cursor: default;
background-color: var(--tainacan-white) !important; background-color: var(--tainacan-white) !important;
} }
&.not-focusable-item, &.not-focusable-item:hover { &.not-focusable-item,
&.not-focusable-item:hover {
cursor: default; cursor: default;
.metadatum-name { .metadatum-name {
color: var(--tainacan-secondary); color: var(--tainacan-secondary);
} }
} }
&.disabled-metadatum { &.disabled-filter:not(.not-sortable-item),
&.disabled-filter:not(.not-sortable-item):hover {
color: var(--tainacan-gray3); color: var(--tainacan-gray3);
.label-details, .not-saved {
color: var(--tainacan-gray3) !important;
}
} }
} }
.active-filter-item:not(:hover) .icon-level-identifier .tainacan-icon::before,
.active-filter-item:hover.not-sortable-item .icon-level-identifier .tainacan-icon::before {
color: var(--tainacan-gray3) !important;
}
.active-filter-item:hover:not(.not-sortable-item) { .active-filter-item:hover:not(.not-sortable-item) {
background-color: var(--tainacan-secondary); background-color: var(--tainacan-turquoise1);
border-color: var(--tainacan-secondary); border-color: var(--tainacan-turquoise1);
color: var(--tainacan-white) !important;
&>.field, form { .label-details, .not-saved {
background-color: var(--tainacan-white) !important; color: var(--tainacan-gray4) !important;
} }
.grip-icon { .grip-icon {
color: var(--tainacan-white); color: var(--tainacan-secondary);
} }
.label-details, .icon, .icon-level-identifier>i {
color: var(--tainacan-white) !important;
}
.switch.is-small {
input[type="checkbox"] + .check {
background-color: var(--tainacan-secondary) !important;
border: 1.5px solid white !important;
&::before { background-color: var(--tainacan-white) !important; }
}
input[type="checkbox"]:checked + .check {
border: 1.5px solid white !important;
&::before { background-color: var(--tainacan-white) !important; }
}
&:hover input[type="checkbox"] + .check {
border: 1.5px solid white !important;
background-color: var(--tainacan-secondary) !important;
}
}
} }
.sortable-ghost { .sortable-ghost {
border: 1px dashed var(--tainacan-gray2); border: 1px dashed var(--tainacan-gray2);
@ -999,9 +1035,7 @@ export default {
position: relative; position: relative;
.grip-icon { .grip-icon {
color: var(--tainacan-gray3); color: var(--tainacan-white);
top: 2px;
position: relative;
} }
} }
} }
@ -1026,7 +1060,7 @@ export default {
} }
h3 { h3 {
margin: 0.2em 0em 1em 0em; margin: 0.875em 0em 1em 0em;
font-weight: 500; font-weight: 500;
} }
@ -1059,7 +1093,7 @@ export default {
font-weight: bold; font-weight: bold;
margin-left: 0.4em; margin-left: 0.4em;
display: inline-block; display: inline-block;
width: calc(100% - 80px); width: calc(100% - 60px);
} }
&:after, &:after,
&:before { &:before {
@ -1103,56 +1137,55 @@ export default {
position: relative; position: relative;
top: 2px; top: 2px;
} }
.available-metadatum-item:not(.disabled-metadatum) { .available-metadatum-item:not(:hover) .icon-level-identifier .tainacan-icon::before,
&:hover{ .available-filter-item:hover.not-sortable-item .icon-level-identifier .tainacan-icon::before {
background-color: var(--tainacan-secondary); color: var(--tainacan-gray3) !important;
border-color: var(--tainacan-secondary); }
color: var(--tainacan-white) !important; .available-metadatum-item:not(.disabled-metadatum):hover{
position: relative; background-color: var(--tainacan-turquoise1);
left: -4px; border-color: var(--tainacan-turquoise2);
position: relative;
left: -4px;
&:after { &:after {
border-color: transparent var(--tainacan-secondary) transparent transparent; border-color: transparent var(--tainacan-turquoise1) transparent transparent;
} }
&:before { &:before {
border-color: transparent var(--tainacan-secondary) transparent transparent; border-color: transparent var(--tainacan-turquoise2) transparent transparent;
} }
.icon-level-identifier>i { .grip-icon {
color: var(--tainacan-white) !important; color: var(--tainacan-secondary) !important;
}
.grip-icon {
color: var(--tainacan-white) !important;
}
} }
} }
} }
.inherited-filter { .inherited-filter {
&.active-filter-item:hover:not(.not-sortable-item) { &.active-filter-item:hover:not(.not-sortable-item) {
background-color: var(--tainacan-blue5); background-color: var(--tainacan-blue1);
border-color: var(--tainacan-blue5); border-color: var(--tainacan-blue2);
.switch.is-small { .grip-icon {
input[type="checkbox"] + .check { color: var(--tainacan-blue5) !important;
background-color: var(--tainacan-blue5) !important;
}
&:hover input[type="checkbox"] + .check {
background-color: var(--tainacan-blue5) !important;
}
} }
} }
} }
.inherited-metadatum { .inherited-metadatum {
.switch.is-small input[type="checkbox"]:checked + .check {
border: 1.5px solid var(--tainacan-blue5);
&::before { background-color: var(--tainacan-blue5); }
}
&.available-metadatum-item:not(.disabled-metadatum):hover {
background-color: var(--tainacan-blue1) !important;
border-color: var(--tainacan-blue2) !important;
&.available-metadatum-item:hover { .grip-icon {
background-color: var(--tainacan-blue5) !important; color: var(--tainacan-blue5) !important;
border-color: var(--tainacan-blue5) !important; }
&:after { &:after {
border-color: transparent var(--tainacan-blue5) transparent transparent !important; border-color: transparent var(--tainacan-blue1) transparent transparent !important;
} }
&:before { &:before {
border-color: transparent var(--tainacan-blue5) transparent transparent !important; border-color: transparent var(--tainacan-blue2) transparent transparent !important;
} }
} }

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

@ -1,7 +1,7 @@
<template> <template>
<div :class="{ 'repository-level-page page-container': isRepositoryLevel }"> <div :class="{ 'repository-level-page page-container': isRepositoryLevel }">
<tainacan-title <tainacan-title
:bread-crumb-items="[{ path: '', label: this.$i18n.get('metadata') }]"/> :bread-crumb-items="[{ path: '', label: this.$i18n.get('metadata') }]"/>
<template v-if="isRepositoryLevel"> <template v-if="isRepositoryLevel">
<p>{{ $i18n.get('info_repository_metadata_inheritance') }}</p> <p>{{ $i18n.get('info_repository_metadata_inheritance') }}</p>
@ -14,12 +14,78 @@
v-model="activeTab"> v-model="activeTab">
<b-tab-item :label="$i18n.get('metadata')"> <b-tab-item :label="$i18n.get('metadata')">
<div <div
:style="{ height: activeMetadatumList.length <= 0 && !isLoadingMetadata ? 'auto' : 'calc(100vh - 6px - ' + columnsTopY + 'px)'}" :style="{ height: activeMetadatumList && activeMetadatumList.length <= 0 && !isLoadingMetadata ? 'auto' : 'calc(100vh - 6px - ' + columnsTopY + 'px)'}"
class="columns" class="columns"
ref="metadataEditionPageColumns"> ref="metadataEditionPageColumns">
<b-loading :active.sync="isLoadingMetadatumTypes"/> <b-loading :active.sync="isLoadingMetadatumTypes"/>
<div class="column"> <div class="column">
<div class="tainacan-form sub-header">
<h3>{{ $i18n.get('metadata') }}</h3>
<template v-if="activeMetadatumList && !isLoadingMetadata">
<b-field class="header-item">
<b-dropdown
:mobile-modal="true"
:disabled="activeMetadatumList.length <= 0"
class="show metadata-options-dropdown"
aria-role="list"
trap-focus>
<button
:aria-label="$i18n.get('label_filter_by_metadata_type')"
class="button is-white"
slot="trigger">
<span>{{ $i18n.get('label_filter_by_metadata_type') }}</span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
</span>
</button>
<div class="metadata-options-container">
<b-dropdown-item
v-for="(metadataType, index) in metadataTypeFilterOptions"
:key="index"
class="control"
custom
aria-role="listitem">
<b-checkbox
v-model="metadataType.enabled"
:native-value="metadataType.enabled">
{{ metadataType.name }}
</b-checkbox>
</b-dropdown-item>
</div>
</b-dropdown>
</b-field>
<b-field class="header-item">
<b-input
:placeholder="$i18n.get('instruction_type_search_metadata_filter')"
v-model="metadataNameFilterString"
icon="magnify"
size="is-small"
icon-right="close-circle"
icon-right-clickable
@icon-right-click="metadataNameFilterString = ''" />
</b-field>
</template>
</div>
<button
aria-controls="filters-items-list"
:aria-expanded="!collapseAll"
v-if="activeMetadatumList.length > 0"
class="link-style collapse-all"
@click="collapseAll = !collapseAll">
<span class="icon">
<i
:class="{ 'tainacan-icon-arrowdown' : collapseAll, 'tainacan-icon-arrowright' : !collapseAll }"
class="has-text-secondary tainacan-icon tainacan-icon-1-125em"/>
</span>
<span class="collapse-all__text">
{{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
</span>
</button>
<section <section
v-if="activeMetadatumList.length <= 0 && !isLoadingMetadata" v-if="activeMetadatumList.length <= 0 && !isLoadingMetadata"
class="field is-grouped-centered section"> class="field is-grouped-centered section">
@ -33,6 +99,7 @@
<p>{{ $i18n.get('info_create_metadata' ) }}</p> <p>{{ $i18n.get('info_create_metadata' ) }}</p>
</div> </div>
</section> </section>
<draggable <draggable
v-model="activeMetadatumList" v-model="activeMetadatumList"
class="active-metadata-area" class="active-metadata-area"
@ -47,11 +114,13 @@
:animation="250"> :animation="250">
<div <div
v-for="(metadatum, index) in activeMetadatumList.filter((meta) => meta != undefined && meta.parent == 0)" v-for="(metadatum, index) in activeMetadatumList.filter((meta) => meta != undefined && meta.parent == 0)"
:key="metadatum.id"> :key="metadatum.id"
v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)">
<div <div
class="active-metadatum-item" class="active-metadatum-item"
:class="{ :class="{
'not-sortable-item': isRepositoryLevel || metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder, 'is-compact-item': !isCollapseOpen(metadatum.id),
'not-sortable-item': isRepositoryLevel || metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied,
'not-focusable-item': openedMetadatumId == metadatum.id, 'not-focusable-item': openedMetadatumId == metadatum.id,
'disabled-metadatum': metadatum.enabled == false, 'disabled-metadatum': metadatum.enabled == false,
'inherited-metadatum': metadatum.inherited || isRepositoryLevel, 'inherited-metadatum': metadatum.inherited || isRepositoryLevel,
@ -61,7 +130,19 @@
:ref="'metadatum-handler-' + metadatum.id" :ref="'metadatum-handler-' + metadatum.id"
class="handle"> class="handle">
<span <span
:style="{ opacity: !(isRepositoryLevel || metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder) ? '1.0' : '0.0' }" v-tooltip="{
content: $i18n.get('label_view_metadata_details'),
autoHide: true,
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
placement: 'auto-start'
}"
@click="$set(collapses, metadatum.id, !isCollapseOpen(metadatum.id))"
class="gray-icon icon"
:style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }">
<i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
</span>
<span
:style="{ opacity: !(isRepositoryLevel || metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }"
v-tooltip="{ v-tooltip="{
content: isRepositoryLevel || metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'), content: isRepositoryLevel || metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'),
autoHide: true, autoHide: true,
@ -71,24 +152,6 @@
class="icon grip-icon"> class="icon grip-icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/>
</span> </span>
<span
v-tooltip="{
content: (metadatum.collection_id == 'default') || isRepositoryLevel ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'),
autoHide: true,
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon icon-level-identifier">
<i
:class="{
'tainacan-icon-collections': (metadatum.collection_id != 'default' && !isRepositoryLevel),
'tainacan-icon-repository': (metadatum.collection_id == 'default') || isRepositoryLevel,
'has-text-turquoise5': metadatum.enabled && (metadatum.collection_id != 'default' && !isRepositoryLevel),
'has-text-blue5': metadatum.enabled && (metadatum.collection_id == 'default' || isRepositoryLevel),
'has-text-gray3': !metadatum.enabled
}"
class="tainacan-icon" />
</span>
<span <span
class="metadatum-name" class="metadatum-name"
:class="{'is-danger': formWithErrors == metadatum.id }"> :class="{'is-danger': formWithErrors == metadatum.id }">
@ -106,10 +169,44 @@
{{ $i18n.get('info_not_saved') }} {{ $i18n.get('info_not_saved') }}
</span> </span>
<span <span
v-if="metadatum.status == 'private'" v-if="metadatum.status === 'private'"
class="icon"> class="icon"
v-tooltip="{
content: $i18n.get('status_private'),
autoHide: true,
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
placement: 'auto-start'
}">
<i class="tainacan-icon tainacan-icon-private"/> <i class="tainacan-icon tainacan-icon-private"/>
</span> </span>
<span
v-if="metadatum.required === 'yes'"
v-tooltip="{
content: $i18n.get('label_required'),
autoHide: true,
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
placement: 'auto-start'
}">
*&nbsp;
</span>
<span
v-tooltip="{
content: (metadatum.collection_id == 'default') || isRepositoryLevel ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'),
autoHide: true,
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon icon-level-identifier">
<i
:class="{
'tainacan-icon-collections': (metadatum.collection_id != 'default' && !isRepositoryLevel),
'tainacan-icon-repository': (metadatum.collection_id == 'default') || isRepositoryLevel,
'has-text-turquoise5': metadatum.enabled && (metadatum.collection_id != 'default' && !isRepositoryLevel),
'has-text-blue5': metadatum.enabled && (metadatum.collection_id == 'default' || isRepositoryLevel),
'has-text-gray3': !metadatum.enabled
}"
class="tainacan-icon" />
</span>
</span> </span>
<span <span
class="loading-spinner" class="loading-spinner"
@ -158,6 +255,11 @@
</a> </a>
</span> </span>
</div> </div>
<transition name="form-collapse">
<metadatum-details
v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
:metadatum="metadatum" />
</transition>
<transition name="form-collapse"> <transition name="form-collapse">
<div v-if="openedMetadatumId == metadatum.id"> <div v-if="openedMetadatumId == metadatum.id">
<metadatum-edition-form <metadatum-edition-form
@ -175,8 +277,12 @@
<child-metadata-list <child-metadata-list
v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.component == 'tainacan-compound'" v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.component == 'tainacan-compound'"
:parent.sync="metadatum" :parent.sync="metadatum"
:metadata-name-filter-string="metadataNameFilterString"
:metadata-type-filter-options="metadataTypeFilterOptions"
:has-some-metadata-type-filter-applied="hasSomeMetadataTypeFilterApplied"
:is-parent-multiple="metadatum.multiple == 'yes' || (editForms[metadatum.id] && editForms[metadatum.id].multiple == 'yes')" :is-parent-multiple="metadatum.multiple == 'yes' || (editForms[metadatum.id] && editForms[metadatum.id].multiple == 'yes')"
:is-repository-level="isRepositoryLevel" /> :is-repository-level="isRepositoryLevel"
:collapse-all="collapseAll" />
</div> </div>
</draggable> </draggable>
</div> </div>
@ -185,7 +291,7 @@
v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_metadata')) || !isRepositoryLevel" v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_metadata')) || !isRepositoryLevel"
class="column available-metadata-area" > class="column available-metadata-area" >
<div class="field"> <div class="field">
<h3 class="label has-text-secondary">{{ $i18n.get('label_available_metadata_types') }}</h3> <h3 class="label">{{ $i18n.get('label_available_metadata_types') }}</h3>
<draggable <draggable
v-model="availableMetadatumList" v-model="availableMetadatumList"
:sort="false" :sort="false"
@ -254,6 +360,7 @@
<script> <script>
import MetadataMappingList from '../../components/lists/metadata-mapping-list.vue'; import MetadataMappingList from '../../components/lists/metadata-mapping-list.vue';
import MetadatumEditionForm from '../../components/edition/metadatum-edition-form.vue'; import MetadatumEditionForm from '../../components/edition/metadatum-edition-form.vue';
import MetadatumDetails from '../../components/other/metadatum-details.vue';
import ChildMetadataList from '../../components/metadata-types/compound/child-metadata-list.vue'; import ChildMetadataList from '../../components/metadata-types/compound/child-metadata-list.vue';
import CustomDialog from '../../components/other/custom-dialog.vue'; import CustomDialog from '../../components/other/custom-dialog.vue';
import { mapGetters, mapActions } from 'vuex'; import { mapGetters, mapActions } from 'vuex';
@ -263,7 +370,8 @@ export default {
components: { components: {
MetadataMappingList, MetadataMappingList,
MetadatumEditionForm, MetadatumEditionForm,
ChildMetadataList ChildMetadataList,
MetadatumDetails
}, },
data() { data() {
return { return {
@ -277,13 +385,20 @@ export default {
formWithErrors: '', formWithErrors: '',
hightlightedMetadatum: '', hightlightedMetadatum: '',
editForms: {}, editForms: {},
columnsTopY: 0 collapses: {},
columnsTopY: 0,
collapseAll: false,
metadataNameFilterString: '',
metadataTypeFilterOptions: []
} }
}, },
computed: { computed: {
collection() { collection() {
return this.getCollection(); return this.getCollection();
}, },
hasSomeMetadataTypeFilterApplied() {
return this.metadataTypeFilterOptions.length && this.metadataTypeFilterOptions.some((metadatumType) => metadatumType.enabled);
},
availableMetadatumList: { availableMetadatumList: {
get() { get() {
return this.getMetadatumTypes(); return this.getMetadatumTypes();
@ -311,6 +426,9 @@ export default {
} }
}, },
immediate: true immediate: true
},
collapseAll(isCollapsed) {
this.activeMetadatumList.forEach((metadatum) => this.$set(this.collapses, metadatum.id, isCollapsed));
} }
}, },
beforeRouteLeave ( to, from, next ) { beforeRouteLeave ( to, from, next ) {
@ -356,13 +474,20 @@ export default {
this.fetchMetadatumTypes() this.fetchMetadatumTypes()
.then(() => { .then(() => {
this.metadataTypeFilterOptions = JSON.parse(JSON.stringify(this.getMetadatumTypes()))
.map((metadatumType) => {
return {
enabled: false,
name: metadatumType.name,
type: metadatumType.className
}
});
this.isLoadingMetadatumTypes = false; this.isLoadingMetadatumTypes = false;
}) })
.catch(() => { .catch(() => {
this.isLoadingMetadatumTypes = false; this.isLoadingMetadatumTypes = false;
}); });
this.refreshMetadata(); this.refreshMetadata();
}, },
beforeDestroy() { beforeDestroy() {
@ -389,7 +514,6 @@ export default {
'getMetadatumTypes', 'getMetadatumTypes',
'getMetadata', 'getMetadata',
]), ]),
handleChange(event) { handleChange(event) {
if (event.added) { if (event.added) {
this.addNewMetadatum(event.added.element, event.added.newIndex); this.addNewMetadatum(event.added.element, event.added.newIndex);
@ -538,7 +662,8 @@ export default {
isRepositoryLevel: this.isRepositoryLevel, isRepositoryLevel: this.isRepositoryLevel,
isContextEdit: true, isContextEdit: true,
includeDisabled: true, includeDisabled: true,
parent: '0' parent: '0',
includeOptionsAsHtml: true
}).then((resp) => { }).then((resp) => {
resp.request resp.request
.then(() => { .then(() => {
@ -575,15 +700,56 @@ export default {
<div>` + metadatum.preview_template + `</div> <div>` + metadatum.preview_template + `</div>
</div> </div>
</div>`; </div>`;
},
filterByMetadatumName(metadatum) {
if (metadatum.metadata_type_object &&
metadatum.metadata_type_object.component == 'tainacan-compound' &&
metadatum.metadata_type_options &&
metadatum.metadata_type_options.children_objects &&
metadatum.metadata_type_options.children_objects.length
) {
let childNamesArray = metadatum.metadata_type_options.children_objects.map((children) => children.name);
childNamesArray.push(metadatum.name);
return childNamesArray.some((childName) => childName.toString().toLowerCase().indexOf(this.metadataNameFilterString.toString().toLowerCase()) >= 0);
}
else
return metadatum.name.toString().toLowerCase().indexOf(this.metadataNameFilterString.toString().toLowerCase()) >= 0;
},
filterByMetadatumType(metadatum) {
if (!this.hasSomeMetadataTypeFilterApplied)
return true;
if (metadatum.metadata_type_object &&
metadatum.metadata_type_object.component == 'tainacan-compound' &&
metadatum.metadata_type_options &&
metadatum.metadata_type_options.children_objects &&
metadatum.metadata_type_options.children_objects.length
) {
let childTypesArray = metadatum.metadata_type_options.children_objects.map((children) => children.metadata_type);
childTypesArray.push(metadatum.metadata_type);
for (let metadatumType of this.metadataTypeFilterOptions) {
if (metadatumType.enabled && childTypesArray.some((childType) => childType == metadatumType.type))
return true;
}
} else {
for (let metadatumType of this.metadataTypeFilterOptions) {
if (metadatumType.enabled && metadatum.metadata_type == metadatumType.type)
return true;
}
}
return false;
},
isCollapseOpen(metadatumId) {
return this.collapses[metadatumId] == true;
} }
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
#tainacan-admin-app .metadata-list-page .available-metadata-area .available-metadatum-item:hover .icon {
color: white !important;
}
.metadata-list-page { .metadata-list-page {
padding-bottom: 0; padding-bottom: 0;
@ -603,12 +769,12 @@ export default {
flex-shrink: 1; flex-shrink: 1;
flex-grow: 1; flex-grow: 1;
} }
a.back-link{ a.back-link {
font-weight: 500; font-weight: 500;
float: right; float: right;
margin-top: 5px; margin-top: 5px;
} }
hr{ hr {
margin: 3px 0px 4px 0px; margin: 3px 0px 4px 0px;
height: 1px; height: 1px;
background-color: var(--tainacan-secondary); background-color: var(--tainacan-secondary);
@ -624,6 +790,7 @@ export default {
.column { .column {
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
padding: 0.75em 0;
&>section.field { &>section.field {
position: absolute; position: absolute;
@ -637,6 +804,9 @@ export default {
margin-right: 0; margin-right: 0;
} }
} }
h3 {
font-weight: 500;
}
} }
.page-title { .page-title {
@ -648,6 +818,50 @@ export default {
} }
} }
.sub-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5em 1em 0.5em 0.5em;
.header-item {
margin-left: 0.75rem;
margin-bottom: 0px;
}
h3 {
margin-right: auto;
}
.dropdown-menu {
display: block;
div.dropdown-content {
padding: 0;
.metadata-options-container {
max-height: 288px;
overflow: auto;
font-size: 1.125em;
}
.dropdown-item {
padding: 0.25em 1.0em 0.25em 0.75em;
}
.dropdown-item span{
vertical-align: middle;
}
}
}
}
.collapse-all {
display: inline-flex;
align-items: center;
margin-left: 0.25em;
}
.collapse-all__text {
font-size: 0.75em !important;
}
.loading-spinner { .loading-spinner {
animation: spinAround 500ms infinite linear; animation: spinAround 500ms infinite linear;
border: 2px solid var(--tainacan-gray2); border: 2px solid var(--tainacan-gray2);
@ -662,7 +876,6 @@ export default {
.active-metadata-area { .active-metadata-area {
font-size: 0.875em; font-size: 0.875em;
margin-right: 0.8em;
margin-left: -0.8em; margin-left: -0.8em;
padding-right: 3em; padding-right: 3em;
min-height: 330px; min-height: 330px;
@ -677,7 +890,7 @@ export default {
} }
&.metadata-area-receive { &.metadata-area-receive {
border: 1px dashed gray; border: 1px dashed var(--tainacan-gray4);
} }
.collapse { .collapse {
@ -732,7 +945,7 @@ export default {
.controls { .controls {
font-size: 0.875em; font-size: 0.875em;
position: absolute; position: absolute;
right: 5px; right: 10px;
top: 10px; top: 10px;
.switch { .switch {
position: relative; position: relative;
@ -750,48 +963,35 @@ export default {
cursor: default; cursor: default;
background-color: var(--tainacan-white) !important; background-color: var(--tainacan-white) !important;
} }
&.not-focusable-item, &.not-focusable-item:hover { &.not-focusable-item,
&.not-focusable-item:hover {
cursor: default; cursor: default;
.metadatum-name { .metadatum-name {
color: var(--tainacan-secondary); color: var(--tainacan-secondary);
} }
} }
&.disabled-metadatum { &.disabled-metadatum:not(.not-sortable-item),
&.disabled-metadatum:not(.not-sortable-item):hover {
color: var(--tainacan-gray3); color: var(--tainacan-gray3);
.label-details, .not-saved {
color: var(--tainacan-gray3) !important;
}
} }
} }
.active-metadatum-item:not(:hover) .icon-level-identifier .tainacan-icon::before,
.active-filter-item:hover.not-sortable-item .icon-level-identifier .tainacan-icon::before {
color: var(--tainacan-gray3) !important;
}
.active-metadatum-item:hover:not(.not-sortable-item) { .active-metadatum-item:hover:not(.not-sortable-item) {
background-color: var(--tainacan-secondary); background-color: var(--tainacan-turquoise1);
border-color: var(--tainacan-secondary); border-color: var(--tainacan-turquoise1);
color: var(--tainacan-white) !important;
&>.field, form { .label-details, .not-saved {
background-color: var(--tainacan-white) !important; color: var(--tainacan-gray4) !important;
} }
.label-details, .icon, .not-saved, .icon-level-identifier>i {
color: var(--tainacan-white) !important;
}
.grip-icon { .grip-icon {
color: var(--tainacan-white); color: var(--tainacan-secondary) !important;
}
.switch.is-small {
input[type="checkbox"] + .check {
background-color: var(--tainacan-secondary) !important;
border: 1.5px solid white !important;
&::before { background-color: var(--tainacan-white) !important; }
}
input[type="checkbox"]:checked + .check {
border: 1.5px solid white !important;
&::before { background-color: var(--tainacan-white) !important; }
}
&:hover input[type="checkbox"] + .check {
border: 1.5px solid white !important;
background-color: var(--tainacan-secondary) !important;
}
} }
} }
.sortable-ghost { .sortable-ghost {
@ -829,8 +1029,7 @@ export default {
} }
h3 { h3 {
margin: 0.2em 0em 1em 0em; margin: 0.875em 0em 1em 0em;
font-weight: 500;
} }
.available-metadatum-item { .available-metadatum-item {
@ -915,13 +1114,13 @@ export default {
} }
25% { 25% {
color: var(--tainacan-white); color: var(--tainacan-white);
background-color: #2cb4c1; background-color: var(--tainacan-secondary);
border-color: #2cb4c1; border-color: var(--tainacan-secondary);
} }
75% { 75% {
color: var(--tainacan-white); color: var(--tainacan-white);
background-color: #2cb4c1; background-color: var(--tainacan-secondary);
border-color: #2cb4c1; border-color: var(--tainacan-secondary);
} }
100% { 100% {
color: #222; color: #222;
@ -930,10 +1129,10 @@ export default {
} }
} }
@keyframes hightlighten-icon { @keyframes hightlighten-icon {
0% { color: #b1b1b1; } 0% { color: var(--tainacan-gray3); }
25% { color: var(--tainacan-white); } 25% { color: var(--tainacan-white); }
75% { color: var(--tainacan-white); } 75% { color: var(--tainacan-white); }
100% { color: #b1b1b1; } 100% { color: var(--tainacan-gray3); }
} }
@keyframes hightlighten-arrow { @keyframes hightlighten-arrow {
0% { 0% {
@ -941,12 +1140,12 @@ export default {
border-color: transparent white transparent transparent; border-color: transparent white transparent transparent;
} }
25% { 25% {
border-color: transparent #2cb4c1 transparent transparent; border-color: transparent var(--tainacan-secondary) transparent transparent;
border-color: transparent #2cb4c1 transparent transparent; border-color: transparent var(--tainacan-secondary) transparent transparent;
} }
75% { 75% {
border-color: transparent #2cb4c1 transparent transparent; border-color: transparent var(--tainacan-secondary) transparent transparent;
border-color: transparent #2cb4c1 transparent transparent; border-color: transparent var(--tainacan-secondary)transparent transparent;
} }
100% { 100% {
border-color: transparent white transparent transparent; border-color: transparent white transparent transparent;
@ -975,51 +1174,48 @@ export default {
} }
} }
.available-metadatum-item:hover { .available-metadatum-item:hover {
background-color: var(--tainacan-secondary); background-color: var(--tainacan-turquoise1);
border-color: var(--tainacan-secondary); border-color: var(--tainacan-turquoise2);
color: var(--tainacan-white);
position: relative; position: relative;
left: -4px; left: -4px;
&:after { &:after {
border-color: transparent var(--tainacan-secondary) transparent transparent; border-color: transparent var(--tainacan-turquoise1) transparent transparent;
} }
&:before { &:before {
border-color: transparent var(--tainacan-secondary) transparent transparent; border-color: transparent var(--tainacan-turquoise2) transparent transparent;
} }
.icon {
color: var(--tainacan-white) !important;
}
.grip-icon { .grip-icon {
color: var(--tainacan-white); color: var(--tainacan-secondary);
} }
} }
} }
.inherited-metadatum { .inherited-metadatum {
&.active-metadatum-item:hover:not(.not-sortable-item) { .switch.is-small input[type="checkbox"]:checked + .check {
background-color: var(--tainacan-blue5); border: 1.5px solid var(--tainacan-blue5);
border-color: var(--tainacan-blue5); &::before { background-color: var(--tainacan-blue5); }
}
.switch.is-small { &.active-metadatum-item:hover:not(.not-sortable-item) {
input[type="checkbox"] + .check { background-color: var(--tainacan-blue1);
background-color: var(--tainacan-blue5) !important; border-color: var(--tainacan-blue1);
}
&:hover input[type="checkbox"] + .check { .grip-icon {
background-color: var(--tainacan-blue5) !important; color: var(--tainacan-blue5) !important;
}
} }
} }
&.available-metadatum-item:hover { &.available-metadatum-item:hover {
background-color: var(--tainacan-blue5) !important; background-color: var(--tainacan-blue1) !important;
border-color: var(--tainacan-blue5) !important; border-color: var(--tainacan-blue2) !important;
.grip-icon {
color: var(--tainacan-blue5) !important;
}
&:after { &:after {
border-color: transparent var(--tainacan-blue5) transparent transparent !important; border-color: transparent var(--tainacan-blue1) transparent transparent !important;
} }
&:before { &:before {
border-color: transparent var(--tainacan-blue5) transparent transparent !important; border-color: transparent var(--tainacan-blue2) transparent transparent !important;
} }
} }
} }

2
src/views/admin/scss/_tabs.scss
View File

@ -36,7 +36,7 @@
} }
.b-tabs { .b-tabs {
.tab-content { .tab-content {
padding: 0.75em 1.5em; padding: 0.75em;
} }
.tabs a, .tabs a,
.tabs a:hover, .tabs a:hover,

4
src/views/admin/scss/_tooltips.scss
View File

@ -14,10 +14,10 @@
} }
.repository-tooltip { .repository-tooltip {
.tooltip-inner { .tooltip-inner {
background: var(--tainacan-blue1) !important; background: var(--tainacan-blue2) !important;
} }
.tooltip-arrow { .tooltip-arrow {
border-color: var(--tainacan-blue1) !important; border-color: var(--tainacan-blue2) !important;
} }
} }
.tooltip { .tooltip {

6
src/views/tainacan-admin-i18n.php
View File

@ -536,6 +536,10 @@ return apply_filters( 'tainacan-admin-i18n', [
'label_switch_document_type' => __( 'Switch document type', 'tainacan' ), 'label_switch_document_type' => __( 'Switch document type', 'tainacan' ),
'label_sending_form' => __( 'Sending form...', 'tainacan' ), 'label_sending_form' => __( 'Sending form...', 'tainacan' ),
'label_form_not_loaded' => __( 'This form could not be loaded', 'tainacan' ), 'label_form_not_loaded' => __( 'This form could not be loaded', 'tainacan' ),
'label_compact_list' => __( 'Compact list', 'tainacan'),
'label_detailed_list' => __( 'Detailed list', 'tainacan'),
'label_view_metadata_details' => __( 'View metadata details', 'tainacan'),
'label_filter_by_metadata_type' => __( 'Filter by metadatum type', 'tainacan'),
// Instructions. More complex sentences to guide user and placeholders // Instructions. More complex sentences to guide user and placeholders
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ), 'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),
@ -551,6 +555,8 @@ return apply_filters( 'tainacan-admin-i18n', [
'instruction_cover_page' => __( 'Search a Page to choose.', 'tainacan' ), 'instruction_cover_page' => __( 'Search a Page to choose.', 'tainacan' ),
'instruction_type_search_users' => __( 'Search users...', 'tainacan' ), 'instruction_type_search_users' => __( 'Search users...', 'tainacan' ),
'instruction_type_search_users_filter' => __( 'Search users to filter...', 'tainacan' ), 'instruction_type_search_users_filter' => __( 'Search users to filter...', 'tainacan' ),
'instruction_type_search_metadata_filter' => __( 'Search metadata to filter...', 'tainacan' ),
'instruction_type_search_filter_filter' => __( 'Search filters to filter...', 'tainacan' ),
'instruction_type_search_roles_filter' => __( 'Search roles to filter...', 'tainacan' ), 'instruction_type_search_roles_filter' => __( 'Search roles to filter...', 'tainacan' ),
'instruction_select_a_parent_collection' => __( 'Select a parent collection.', 'tainacan' ), 'instruction_select_a_parent_collection' => __( 'Select a parent collection.', 'tainacan' ),
'instruction_select_collection_thumbnail' => __( 'Select a thumbnail image for collection', 'tainacan' ), 'instruction_select_collection_thumbnail' => __( 'Select a thumbnail image for collection', 'tainacan' ),