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

Merge pull request #773 from tainacan/feature/736 

feat: conditional metadata section #736
This commit is contained in:
Vinícius Nunes Medeiros 2023-02-22 14:22:18 -03:00 committed by GitHub
parent 66c25f0deb 1af1e797e2
commit e908d6783f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 905 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/assets/css/tainacan-gutenberg-block-item-submission-form.css
View File

@ -240,12 +240,29 @@
display: flex;
flex-wrap: wrap;
justify-content: flex-start; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-steps {
margin-top: 1em;
display: flex;
justify-content: space-evenly;
align-items: center; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-steps .fake-step {
width: 1em;
height: 1em;
border-radius: 100%;
background-color: var(--tainacan-input-border-color, rgba(200, 200, 200, 0.3)); }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-steps .fake-step:first-of-type {
background-color: var(--tainacan-secondary, rgba(200, 200, 200, 0.3)); }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-steps + .metadata-section {
margin-top: -0.5em;
border: 1px solid var(--tainacan-input-border-color, rgba(200, 200, 200, 0.3));
padding: 2em; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .metadata-section {
width: 100%;
padding: 0.5em 1em;
display: flex;
flex-wrap: nowrap;
flex-direction: column; }
flex-direction: column;
box-sizing: border-box; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .metadata-section .fake-metadata {
display: flex;
flex-direction: column;

2
src/assets/css/tainacan-gutenberg-block-item-submission-form.css.map
View File

File diff suppressed because one or more lines are too long

13
src/classes/entities/class-tainacan-item.php
View File

@ -1130,7 +1130,7 @@ class Item extends Entity {
*
* This function expects a $metadata_section object. For a more generic approach, check the get_metadata_sections_as_html function
*
* @param object $metadata_section The Metadata Section object
* @param \Tainacan\Entities\Metadata_Section $metadata_section The Metadata Section object
* @param array|string $args {
* Optional. Array or string of arguments.
*
@ -1169,6 +1169,17 @@ class Item extends Entity {
$return = '';
if($metadata_section->is_conditional_section()) {
$rules = $metadata_section->get_conditional_section_rules();
$item_id = $this->get_id();
foreach($rules as $meta_id => $meta_values_conditional) {
$meta_values = get_post_meta( $item_id, $meta_id );
if (!array_intersect($meta_values, $meta_values_conditional)) {
return $return;
}
}
}
$defaults = array(
'hide_name' => false,
'hide_description' => true,

70
src/classes/entities/class-tainacan-metadata-section.php
View File

@ -18,7 +18,9 @@ class Metadata_Section extends Entity {
$name,
$slug,
$description,
$description_bellow_name;
$description_bellow_name,
$is_conditional_section,
$conditional_section_rules;
/**
* {@inheritDoc}
@ -94,6 +96,34 @@ class Metadata_Section extends Entity {
return $tainacan_metadata_sections->get_metadata_object_list($this->get_id(), $args);
}
/**
* Get if section is conditional.
*
* @return string "yes"|"no"
*/
function get_is_conditional_section() {
return $this->get_mapped_property( 'is_conditional_section' );
}
/**
* get the rules of the conditional section
*
* @return array|object
*/
function get_conditional_section_rules() {
return $this->get_mapped_property( 'conditional_section_rules' );
}
/**
* Checks if section is conditional
*
* @return boolean
*/
function is_conditional_section() {
return $this->get_is_conditional_section() == 'yes';
}
/**
* Set the metadata section name
*
@ -141,6 +171,25 @@ class Metadata_Section extends Entity {
}
/**
* set if section is conditional.
*
* @return void
*/
function set_is_conditional_section($value) {
return $this->set_mapped_property( 'is_conditional_section', $value );
}
/**
* set the rules of the conditional section
*
* @return void
*/
function set_conditional_section_rules($value) {
return $this->set_mapped_property( 'conditional_section_rules', $value );
}
/**
* Transient property used to store the status of the metadatum section for a particular collection
*
@ -168,6 +217,25 @@ class Metadata_Section extends Entity {
$name = $this->get_name();
$collection = $this->get_collection();
if ($this->is_conditional_section()) {
$metadata_section_id = $this->get_id();
if ($metadata_section_id == static::$default_section_slug) {
$this->add_error($this->get_id(), __("conditional section cannot be enabled in default section", 'tainacan'));
$no_errors = false;
} else {
$metadata_list = $this->get_metadata_object_list();
$required_metadata_list = array_filter($metadata_list, function($m) {
return $m->is_required();
});
if ( count($required_metadata_list) ) {
$no_errors = false;
foreach($required_metadata_list as $metadata) {
$this->add_error($metadata->get_id(), __("metadata cannot be required", 'tainacan'));
}
}
}
}
if( empty($collection) ) {
$this->add_error($this->get_id(), __("collection is required", 'tainacan'));
$no_errors = false;

11
src/classes/entities/class-tainacan-metadatum.php
View File

@ -533,6 +533,17 @@ class Metadatum extends Entity {
return false;
}
}
if( $this->is_required() ) {
$meta_section_id = $this->get_metadata_section_id();
if($meta_section_id != \Tainacan\Entities\Metadata_Section::$default_section_slug) {
$meta_section = new \Tainacan\Entities\Metadata_Section($meta_section_id);
if($meta_section->is_conditional_section()) {
$this->add_error($this->get_id(), __('Metadata cannot be required into conditional section', 'tainacan'));
return false;
}
}
}
// You cant have a taxonomy metadatum inside a multiple compound metadatum
if ( $this->get_parent() > 0 && $this->get_metadata_type_object()->get_primitive_type() == 'term' ) {

15
src/classes/repositories/class-tainacan-metadata-sections.php
View File

@ -76,6 +76,21 @@ class Metadata_Sections extends Repository {
'title' => __( 'Collection', 'tainacan' ),
'type' => ['integer', 'string'],
'description' => __( 'The collection ID', 'tainacan' ),
],
'is_conditional_section' => [
'map' => 'meta',
'title' => __( 'Enable conditional section', 'tainacan' ),
'type' => 'string',
'description' => __( 'Binds this section visibility to a set of rules related to some metadata values.', 'tainacan' ),
'on_error' => __( 'Value should be "yes" or "no"', 'tainacan' ),
'validation' => v::stringType()->in( [ 'yes', 'no' ] ),
'default' => 'no'
],
'conditional_section_rules' => [
'map' => 'meta',
'title' => __( 'Conditional section rules', 'tainacan' ),
'type' => ['object', 'array'],
'description' => __( 'The conditions that will allow this section to be displayed, based on metadata values.', 'tainacan' ),
]
] );
}

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

@ -372,19 +372,25 @@
<div
v-for="(metadataSection, sectionIndex) of metadataSections"
:key="sectionIndex"
:class="'metadata-section-slug-' + metadataSection.slug"
:id="'metadata-section-id-' + metadataSection.id">
:class="'metadata-section-slug-' + metadataSection.slug + (isSectionHidden(metadataSection.id) ? ' metadata-section-hidden' : '')"
:id="'metadata-section-id-' + metadataSection.id"
v-tooltip="{
content: isSectionHidden(metadataSection.id) ? $i18n.get('info_metadata_section_hidden_conditional') : false,
autoHide: true,
placement: 'auto',
popperClass: ['tainacan-tooltip', 'tooltip']
}">
<div class="metadata-section-header section-label">
<span
class="collapse-handle"
@click="(isMetadataNavigation || $adminOptions.hideItemEditionCollapses) ? null : toggleMetadataSectionCollapse(sectionIndex)">
@click="(isMetadataNavigation || $adminOptions.hideItemEditionCollapses || isSectionHidden(metadataSection.id)) ? null : toggleMetadataSectionCollapse(sectionIndex)">
<span
v-if="!$adminOptions.hideItemEditionCollapses && !isMetadataNavigation"
class="icon">
<i
:class="{
'tainacan-icon-arrowdown' : metadataSectionCollapses[sectionIndex] || errorMessage,
'tainacan-icon-arrowright' : !(metadataSectionCollapses[sectionIndex] || errorMessage)
'tainacan-icon-arrowdown' : (metadataSectionCollapses[sectionIndex] || errorMessage) && !isSectionHidden(metadataSection.id),
'tainacan-icon-arrowright' : !(metadataSectionCollapses[sectionIndex] || errorMessage) || isSectionHidden(metadataSection.id)
}"
class="has-text-secondary tainacan-icon tainacan-icon-1-25em"/>
</span>
@ -409,7 +415,7 @@
<transition name="filter-item">
<div
class="metadata-section-metadata-list"
v-show="metadataSectionCollapses[sectionIndex] || isMetadataNavigation">
v-show="(metadataSectionCollapses[sectionIndex] || isMetadataNavigation) && !isSectionHidden(metadataSection.id)">
<p
class="metadatum-description-help-info"
v-if="metadataSection.description && metadataSection.description_bellow_name == 'yes'">
@ -852,6 +858,9 @@ export default {
formErrors() {
return eventBusItemMetadata && eventBusItemMetadata.errors && eventBusItemMetadata.errors.length ? eventBusItemMetadata.errors : []
},
conditionalSections() {
return eventBusItemMetadata && eventBusItemMetadata.conditionalSections ? eventBusItemMetadata.conditionalSections : [];
},
isEditingItemMetadataInsideIframe() {
return this.$route.query && this.$route.query.editingmetadata;
},
@ -1016,6 +1025,25 @@ export default {
.then((metadataSections) => {
this.metadataSectionCollapses = Array(metadataSections.length).fill(true)
this.isLoadingMetadataSections = false;
/**
* Creates the conditional metadata set to later watch values
* of certain metadata that control sections visibility.
*/
eventBusItemMetadata.conditionalSections = {};
for (let metadataSection of metadataSections) {
if ( metadataSection.is_conditional_section == 'yes') {
const conditionalSectionId = Object.keys(metadataSection.conditional_section_rules);
if ( conditionalSectionId.length ) {
eventBusItemMetadata.conditionalSections[metadataSection.id] = {
sectionId: metadataSection.id,
metadatumId: conditionalSectionId[0],
metadatumValues: metadataSection.conditional_section_rules[conditionalSectionId[0]],
hide: true
};
}
}
}
})
.catch((error) => {
this.isLoadingMetadataSections = false;
@ -1284,6 +1312,16 @@ export default {
this.metadataCollapses[i] = true;
}
}
/* Sets initial state for conditional sections based on metadatum values */
for (let conditionalSectionId in this.conditionalSections) {
const currentItemMetadatum = metadata.find(anItemMetadatum => anItemMetadatum.metadatum.id == this.conditionalSections[conditionalSectionId].metadatumId);
if (currentItemMetadatum) {
const itemMetadatumValues = Array.isArray(currentItemMetadatum.value) ? currentItemMetadatum.value : [ currentItemMetadatum.value ];
const conditionalValues = Array.isArray(eventBusItemMetadata.conditionalSections[conditionalSectionId].metadatumValues) ? eventBusItemMetadata.conditionalSections[conditionalSectionId].metadatumValues : [eventBusItemMetadata.conditionalSections[conditionalSectionId].metadatumValues];
eventBusItemMetadata.conditionalSections[conditionalSectionId].hide = itemMetadatumValues.every(aValue => conditionalValues.indexOf(aValue) < 0);
}
}
this.isLoading = false;
});
@ -1803,6 +1841,9 @@ export default {
webkit.messageHandlers.cordova_iab
)
webkit.messageHandlers.cordova_iab.postMessage(JSON.stringify({ 'type': 'exited_from_navigation', 'item': this.item }));
},
isSectionHidden(sectionId) {
return this.conditionalSections[sectionId] && this.conditionalSections[sectionId].hide;
}
}
}
@ -2125,6 +2166,15 @@ export default {
border-bottom: 1px solid var(--tainacan-input-border-color);
}
.metadata-section-hidden {
opacity: 0.5;
filter: grayscale(1.0);
& > {
pointer-events: none;
}
}
.item-edition-tab-content {
border-top: 1px solid var(--tainacan-input-border-color);
}

221
src/views/admin/components/edition/metadata-section-edition-form.vue
View File

@ -122,6 +122,93 @@
</b-field>
</div>
<div
@click="hideConditionalSectionSettings = !hideConditionalSectionSettings;"
class="metadata-form-section">
<span class="icon">
<i
class="tainacan-icon"
:class="!hideConditionalSectionSettings ? 'tainacan-icon-arrowdown' : 'tainacan-icon-arrowright'" />
</span>
<strong>{{ $i18n.get('label_advanced_metadata_options') }}</strong>
<hr>
</div>
<transition name="filter-item">
<div
v-show="!hideConditionalSectionSettings"
class="options-columns">
<b-field
:addons="false"
:label="$i18n.getHelperTitle('metadata-sections', 'is_conditional_section')"
:type="formErrors['is_conditional_section'] != undefined ? 'is-danger' : ''"
:message="formErrors['is_conditional_section'] != undefined ? formErrors['is_conditional_section'] : ''">
&nbsp;
<b-switch
size="is-small"
@input="clearErrors('is_conditional_section')"
v-model="form.is_conditional_section"
true-value="yes"
false-value="no"
name="is_conditional_section">
<help-button
:title="$i18n.getHelperTitle('metadata-sections', 'is_conditional_section')"
:message="$i18n.getHelperMessage('metadata-sections', 'is_conditional_section')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</b-switch>
</b-field>
<div v-if="isConditionalSection && !availableConditionalMetadata.length">
<p style="break-inside: avoid;">{{ $i18n.get('info_create_select_metadatum_for_conditional_section') }}</p>
</div>
<transition name="filter-item">
<b-field
v-if="isConditionalSection && availableConditionalMetadata.length"
:addons="false"
:type="formErrors['conditional_section_rules'] != undefined ? 'is-danger' : ''"
:message="formErrors['conditional_section_rules'] != undefined ? formErrors['conditional_section_rules'] : ''">
<label class="label is-inline">
{{ $i18n.getHelperTitle('metadata-sections', 'conditional_section_rules') }}
<help-button
:title="$i18n.getHelperTitle('metadata-sections', 'conditional_section_rules')"
:message="$i18n.getHelperMessage('metadata-sections', 'conditional_section_rules')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label>
<b-select
v-model="selectedConditionalMetadatum"
:placeholder="$i18n.get('label_select_metadatum')">
<option
v-for="conditionalMetadatum of availableConditionalMetadata"
:key="conditionalMetadatum.id"
:value="conditionalMetadatum.id">
{{ conditionalMetadatum.name }}
</option>
</b-select>
</b-field>
</transition>
<transition name="filter-item">
<b-field
v-if="isConditionalSection && selectedConditionalMetadatum"
:addons="false"
:type="formErrors['conditional_section_rules'] != undefined ? 'is-danger' : ''"
:message="formErrors['conditional_section_rules'] != undefined ? formErrors['conditional_section_rules'] : ''">
<label class="label is-inline">
{{ availableConditionalMetadata.find((availableMetadatum) => availableMetadatum.id == selectedConditionalMetadatum).name }}
</label>
<div style="overflow-y: auto; overflow-x: hidden; max-height: 100px;">
<b-checkbox
v-model="selectedConditionalValue"
v-for="(conditionalValue, conditionalValueIndex) of availableConditionalMetadata.find((availableMetadatum) => availableMetadatum.id == selectedConditionalMetadatum).metadata_type_object.options.options.split('\n')"
:key="conditionalValueIndex"
:native-value="conditionalValue">
{{ conditionalValue }}
</b-checkbox>
</div>
</b-field>
</transition>
</div>
</transition>
<!-- Hook for extra Form options -->
<template v-if="hasEndLeftForm" >
@ -156,7 +243,7 @@
</template>
<script>
import { mapActions } from 'vuex';
import { mapActions, mapGetters } from 'vuex';
import { formHooks } from "../../js/mixins";
export default {
@ -166,7 +253,7 @@
index: '',
originalMetadataSection: Object,
collectionId: '',
isInsideImporterFlow: false
isInsideImporterFlow: false,
},
data() {
return {
@ -175,7 +262,28 @@
formErrorMessage: '',
closedByForm: false,
entityName: 'metadataSection',
isUpdating: false
isUpdating: false,
selectedConditionalMetadatum: undefined,
selectedConditionalValue: [],
hideConditionalSectionSettings: false
}
},
computed: {
...mapGetters('metadata', [
'getMetadataSections'
]),
availableConditionalMetadata() {
if (this.getMetadataSections.length) {
const otherMetadataSections = this.getMetadataSections.filter(aMetadataSection => aMetadataSection.id != this.form.id);
const availableMetadata = [];
for (let aMetadataSection of otherMetadataSections)
availableMetadata.push.apply(availableMetadata, aMetadataSection.metadata_object_list);
return availableMetadata.filter(aMetadatum => aMetadatum.metadata_type === 'Tainacan\\Metadata_Types\\Selectbox');
}
return {};
},
isConditionalSection() {
return this.form.is_conditional_section == 'yes';
}
},
created() {
@ -184,6 +292,12 @@
if (this.form.status == 'auto-draft')
this.form.status = 'publish';
if ( this.form.is_conditional_section == 'yes' && Object.keys(this.form.conditional_section_rules).length ) {
const conditionalMetadatum = Object.keys(this.form.conditional_section_rules)[0];
this.selectedConditionalMetadatum = conditionalMetadatum;
this.selectedConditionalValue = this.form.conditional_section_rules[conditionalMetadatum];
}
this.formErrors = this.form.formErrors != undefined ? this.form.formErrors : {};
this.formErrorMessage = this.form.formErrors != undefined ? this.form.formErrorMessage : '';
},
@ -200,79 +314,40 @@
]),
saveEdition(metadataSection) {
if ( (metadataSection.metadata_type_object && metadataSection.metadata_type_object.form_component) || metadataSection.edit_form == '') {
if ( this.form.is_conditional_section == 'yes' && this.selectedConditionalMetadatum && this.selectedConditionalValue ) {
this.form.conditional_section_rules = {}
this.form.conditional_section_rules[this.selectedConditionalMetadatum] = this.selectedConditionalValue;
} else
this.form.conditional_section_rules = null;
this.fillExtraFormData(this.form);
this.isUpdating = true;
this.updateMetadataSection({
collectionId: this.collectionId,
metadataSectionId: metadataSection.id,
index: this.index,
options: this.form
this.fillExtraFormData(this.form);
this.isUpdating = true;
this.updateMetadataSection({
collectionId: this.collectionId,
metadataSectionId: metadataSection.id,
index: this.index,
options: this.form
})
.then(() => {
this.form = {};
this.formErrors = {};
this.formErrorMessage = '';
this.isUpdating = false;
this.closedByForm = true;
this.$emit('onEditionFinished');
})
.then(() => {
this.form = {};
this.formErrors = {};
this.formErrorMessage = '';
this.isUpdating = false;
this.closedByForm = true;
.catch((errors) => {
this.isUpdating = false;
for (let error of errors.errors) {
for (let attribute of Object.keys(error))
this.formErrors[attribute] = error[attribute];
}
this.formErrorMessage = errors.error_message;
this.$emit('onEditionFinished');
})
.catch((errors) => {
this.isUpdating = false;
for (let error of errors.errors) {
for (let attribute of Object.keys(error))
this.formErrors[attribute] = error[attribute];
}
this.formErrorMessage = errors.error_message;
this.form.formErrors = this.formErrors;
this.form.formErrorMessage = this.formErrorMessage;
});
} else {
let formElement = document.getElementById('metadataSectionEditForm');
let formData = new FormData(formElement);
let formObj = {};
for (let [key, value] of formData.entries()) {
if (key === 'description_bellow_name')
formObj[key] = value ? 'yes' : 'no';
else
formObj[key] = value;
}
this.fillExtraFormData(formObj);
this.isUpdating = true;
this.updateMetadataSection({
collectionId: this.collectionId,
metadataSectionId: metadataSection.id,
index: this.index,
options: formObj
})
.then(() => {
this.form = {};
this.formErrors = {};
this.formErrorMessage = '';
this.isUpdating = false;
this.closedByForm = true;
this.$emit('onEditionFinished');
})
.catch((errors) => {
this.isUpdating = false;
for (let error of errors.errors) {
for (let attribute of Object.keys(error))
this.formErrors[attribute] = error[attribute];
}
this.formErrorMessage = errors.error_message;
this.$emit('onErrorFound');
this.form.formErrors = this.formErrors;
this.form.formErrorMessage = this.formErrorMessage;
});
}
this.form.formErrors = this.formErrors;
this.form.formErrorMessage = this.formErrorMessage;
});
},
clearErrors(attribute) {
this.formErrors[attribute] = undefined;

16
src/views/admin/js/event-bus-item-metadata.js
View File

@ -4,7 +4,8 @@ import store from './store/store'
export const eventBusItemMetadata = new Vue({
store,
data: {
errors : []
errors : [],
conditionalSections: {}
},
watch: {
errors() {
@ -88,6 +89,19 @@ export const eventBusItemMetadata = new Vue({
this.$emit('isUpdatingValue', false);
}
/**
* Updates conditionalSections set values if this is one of the
* metadata with values that affect the sections visibility.
*/
let updatedConditionalSections = JSON.parse(JSON.stringify(this.conditionalSections));
for (let conditionalSectionId in updatedConditionalSections) {
if ( updatedConditionalSections[conditionalSectionId].metadatumId == metadatumId ) {
const conditionalValues = Array.isArray(updatedConditionalSections[conditionalSectionId].metadatumValues) ? updatedConditionalSections[conditionalSectionId].metadatumValues : [ this.conditionalSections[conditionalSectionId].metadatumValues ];
updatedConditionalSections[conditionalSectionId].hide = values.every(aValue => conditionalValues.indexOf(aValue) < 0);
}
}
this.conditionalSections = updatedConditionalSections;
},
removeItemMetadataGroup({ itemId, metadatumId, parentMetaId, parentMetadatum }) {

72
src/views/gutenberg-blocks/blocks/item-submission-form/block.json
View File

@ -13,140 +13,144 @@
},
"attributes": {
"collectionId": {
"type": "String",
"type": "string",
"default": ""
},
"isCollectionModalOpen": {
"type": "Boolean",
"type": "boolean",
"default": false
},
"hideFileModalButton": {
"type": "Boolean",
"type": "boolean",
"default": false
},
"hideTextModalButton": {
"type": "Boolean",
"type": "boolean",
"default": false
},
"hideLinkModalButton": {
"type": "Boolean",
"type": "boolean",
"default": false
},
"hideThumbnailSection": {
"type": "Boolean",
"type": "boolean",
"default": false
},
"hideAttachmentsSection": {
"type": "Boolean",
"type": "boolean",
"default": false
},
"hideHelpButtons": {
"type": "Boolean",
"type": "boolean",
"default": false
},
"hideMetadataTypes": {
"type": "Boolean",
"type": "boolean",
"default": false
},
"showAllowCommentsSection": {
"type": "Boolean",
"type": "boolean",
"default": false
},
"hideCollapses": {
"type": "Boolean",
"type": "boolean",
"default": false
},
"backgroundColor": {
"type": "String",
"type": "string",
"default": "rgba(255,255,255,0)"
},
"baseFontSize": {
"type": "Number",
"type": "number",
"default": 16
},
"inputColor": {
"type": "String",
"type": "string",
"default": "#1d1d1d"
},
"inputBackgroundColor": {
"type": "String",
"type": "string",
"default": "#ffffff"
},
"inputBorderColor": {
"type": "String",
"type": "string",
"default": "#dbdbdb"
},
"labelColor": {
"type": "String",
"type": "string",
"default": "#454647"
},
"infoColor": {
"type": "String",
"type": "string",
"default": "#555758"
},
"primaryColor": {
"type": "String",
"type": "string",
"default": "#d9eced"
},
"secondaryColor": {
"type": "String",
"type": "string",
"default": "#298596"
},
"enabledMetadata": {
"type": "Array",
"type": "array",
"default": []
},
"collectionMetadata": {
"type": "Array",
"type": "array",
"default": []
},
"isLoadingCollectionMetadata": {
"type": "Boolean",
"type": "boolean",
"default": false
},
"sentFormHeading": {
"type": "String",
"type": "string",
"default": "Form submitted!"
},
"sentFormMessage": {
"type": "String",
"type": "string",
"default": "Thank you. Your item was submitted to the collection."
},
"documentSectionLabel": {
"type": "String",
"type": "string",
"default": "Document"
},
"attachmentsSectionLabel": {
"type": "String",
"type": "string",
"default": "Attachments"
},
"thumbnailSectionLabel": {
"type": "String",
"type": "string",
"default": "Thumbnail"
},
"metadataSectionLabel": {
"type": "String",
"type": "string",
"default": "Metadata"
},
"showItemLinkButton": {
"type": "Boolean",
"type": "boolean",
"default": false
},
"itemLinkButtonLabel": {
"type": "String",
"type": "string",
"default": "Go to the item page"
},
"helpInfoBellowLabel": {
"type": "Boolean",
"type": "boolean",
"default": false
},
"showTermsAgreementCheckbox": {
"type": "Boolean",
"type": "boolean",
"default": false
},
"termsAgreementMessage": {
"type": "String",
"type": "string",
"default": "I agree to submit this item information."
},
"isLayoutSteps": {
"type": "boolean",
"default": false
}
},
"supports": {

229
src/views/gutenberg-blocks/blocks/item-submission-form/deprecated.js
View File

@ -2,6 +2,235 @@ const { __ } = wp.i18n;
const { RichText, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
export default [
/* Deprecated on Tainacan 0.20.0, due to isLayoutSteps */
{
"attributes": {
"collectionId": {
"type": "String",
"default": ""
},
"isCollectionModalOpen": {
"type": "Boolean",
"default": false
},
"hideFileModalButton": {
"type": "Boolean",
"default": false
},
"hideTextModalButton": {
"type": "Boolean",
"default": false
},
"hideLinkModalButton": {
"type": "Boolean",
"default": false
},
"hideThumbnailSection": {
"type": "Boolean",
"default": false
},
"hideAttachmentsSection": {
"type": "Boolean",
"default": false
},
"hideHelpButtons": {
"type": "Boolean",
"default": false
},
"hideMetadataTypes": {
"type": "Boolean",
"default": false
},
"showAllowCommentsSection": {
"type": "Boolean",
"default": false
},
"hideCollapses": {
"type": "Boolean",
"default": false
},
"backgroundColor": {
"type": "String",
"default": "rgba(255,255,255,0)"
},
"baseFontSize": {
"type": "Number",
"default": 16
},
"inputColor": {
"type": "String",
"default": "#1d1d1d"
},
"inputBackgroundColor": {
"type": "String",
"default": "#ffffff"
},
"inputBorderColor": {
"type": "String",
"default": "#dbdbdb"
},
"labelColor": {
"type": "String",
"default": "#454647"
},
"infoColor": {
"type": "String",
"default": "#555758"
},
"primaryColor": {
"type": "String",
"default": "#d9eced"
},
"secondaryColor": {
"type": "String",
"default": "#298596"
},
"enabledMetadata": {
"type": "Array",
"default": []
},
"collectionMetadata": {
"type": "Array",
"default": []
},
"isLoadingCollectionMetadata": {
"type": "Boolean",
"default": false
},
"sentFormHeading": {
"type": "String",
"default": "Form submitted!"
},
"sentFormMessage": {
"type": "String",
"default": "Thank you. Your item was submitted to the collection."
},
"documentSectionLabel": {
"type": "String",
"default": "Document"
},
"attachmentsSectionLabel": {
"type": "String",
"default": "Attachments"
},
"thumbnailSectionLabel": {
"type": "String",
"default": "Thumbnail"
},
"metadataSectionLabel": {
"type": "String",
"default": "Metadata"
},
"showItemLinkButton": {
"type": "Boolean",
"default": false
},
"itemLinkButtonLabel": {
"type": "String",
"default": "Go to the item page"
},
"helpInfoBellowLabel": {
"type": "Boolean",
"default": false
},
"showTermsAgreementCheckbox": {
"type": "Boolean",
"default": false
},
"termsAgreementMessage": {
"type": "String",
"default": "I agree to submit this item information."
}
},
save({ attributes, className }) {
const {
collectionId,
backgroundColor,
hideFileModalButton,
hideTextModalButton,
hideLinkModalButton,
hideThumbnailSection,
hideAttachmentsSection,
showAllowCommentsSection,
hideHelpButtons,
hideMetadataTypes,
hideCollapses,
documentSectionLabel,
thumbnailSectionLabel,
attachmentsSectionLabel,
metadataSectionLabel,
baseFontSize,
inputColor,
inputBackgroundColor,
inputBorderColor,
labelColor,
infoColor,
primaryColor,
secondaryColor,
enabledMetadata,
sentFormHeading,
sentFormMessage,
showItemLinkButton,
itemLinkButtonLabel,
helpInfoBellowLabel,
showTermsAgreementCheckbox,
termsAgreementMessage
} = attributes;
const blockProps = useBlockProps.save();
let termsAgreementMessageHTML = <RichText.Content { ...blockProps } tagName="p" value={ termsAgreementMessage } />;
termsAgreementMessageHTML = (termsAgreementMessageHTML && termsAgreementMessageHTML.props && termsAgreementMessageHTML.props.value) ? termsAgreementMessageHTML.props.value : '';
if (backgroundColor.rgb != undefined) {
if (backgroundColor.rgb.a)
backgroundColor = 'rgba(' + backgroundColor.rgb.r + ',' + backgroundColor.rgb.g + ',' + backgroundColor.rgb.b + ',' + backgroundColor.rgb.a + ')';
else
backgroundColor = 'rgb(' + backgroundColor.rgb.r + ',' + backgroundColor.rgb.g + ',' + backgroundColor.rgb.b + ')';
}
return <div
style={{
'font-size': baseFontSize + 'px',
'--tainacan-base-font-size': baseFontSize + 'px',
'--tainacan-background-color': backgroundColor,
'--tainacan-input-color': inputColor,
'--tainacan-input-background-color': inputBackgroundColor,
'--tainacan-input-border-color': inputBorderColor,
'--tainacan-label-color': labelColor,
'--tainacan-info-color': infoColor,
'--tainacan-primary': primaryColor,
'--tainacan-secondary': secondaryColor
}}
className={ className }>
<div
id="tainacan-item-submission-form"
data-module="item-submission-form"
collection-id={ collectionId }
hide-file-modal-button={ hideFileModalButton.toString() }
hide-text-modal-button={ hideTextModalButton.toString() }
hide-link-modal-button={ hideLinkModalButton.toString() }
hide-thumbnail-section={ hideThumbnailSection.toString() }
hide-attachments-section={ hideAttachmentsSection.toString() }
show-allow-comments-section={ showAllowCommentsSection.toString() }
hide-help-buttons={ hideHelpButtons.toString() }
hide-metadata-types={ hideMetadataTypes.toString() }
hide-collapses={ hideCollapses.toString() }
enabled-metadata={ enabledMetadata.toString() }
sent-form-heading={ sentFormHeading }
sent-form-message={ sentFormMessage }
document-section-label={ documentSectionLabel }
thumbnail-section-label={ thumbnailSectionLabel }
attachments-section-label={ attachmentsSectionLabel }
metadata-section-label={ metadataSectionLabel }
show-item-link-button={ showItemLinkButton ? showItemLinkButton.toString() : 'false' }
show-terms-agreement-checkbox={ showTermsAgreementCheckbox ? showTermsAgreementCheckbox.toString() : 'false' }
terms-agreement-message={ termsAgreementMessageHTML }
item-link-button-label={ itemLinkButtonLabel ? itemLinkButtonLabel : __( 'Go to the item page', 'tainacan' ) }
help-info-bellow-label={ helpInfoBellowLabel ? helpInfoBellowLabel.toString() : 'false' } >
</div>
</div>
}
},
/* Deprecated on Tainacan 0.18.8, due to the backgroundColor being a string instead of object */
{
"attributes": {

26
src/views/gutenberg-blocks/blocks/item-submission-form/edit.js
View File

@ -56,7 +56,8 @@ export default function ({ attributes, setAttributes, className }) {
itemLinkButtonLabel,
helpInfoBellowLabel,
showTermsAgreementCheckbox,
termsAgreementMessage
termsAgreementMessage,
isLayoutSteps
} = attributes;
const blockProps = useBlockProps();
@ -280,6 +281,16 @@ export default function ({ attributes, setAttributes, className }) {
<PanelBody
title={__('Form elements', 'tainacan')}
initialOpen={ true } >
<ToggleControl
label={__('Show metadata sections as steps on the form.', 'tainacan')}
help={ isLayoutSteps ? __('Do not show the metadata sections as separate steps of the form.', 'tainacan') : __('Toggle to show the metadata sections as steps of the form.', 'tainacan')}
checked={ isLayoutSteps }
onChange={ ( isChecked ) => {
isLayoutSteps = isChecked;
setAttributes({ isLayoutSteps: isChecked });
}
}
/>
<ToggleControl
label={__('Hide the Document type file button', 'tainacan')}
help={ hideFileModalButton ? __('Do not show the button for uploading a file document', 'tainacan') : __('Toggle to show the button to upload a file document.', 'tainacan')}
@ -646,8 +657,17 @@ export default function ({ attributes, setAttributes, className }) {
<div style={{ flexGrow: '1' }}>
{ metadataSectionLabel ?
<div class="fake-text section-label"></div>
:null }
{ !hideCollapses ? <div class="fake-link"></div> : null }
: null }
{ !hideCollapses && !isLayoutSteps ?
<div class="fake-link"></div>
: null }
{ isLayoutSteps ?
<div class="fake-steps">
<div class="fake-step"/>
<div class="fake-step"/>
<div class="fake-step"/>
</div>
: null }
<div class="metadata-section">
{ enabledMetadata.length ?
enabledMetadata.map( (isEnabled) => {

329
src/views/gutenberg-blocks/blocks/item-submission-form/item-submission/item-submission-form.vue
View File

@ -4,6 +4,7 @@
:is-full-page="false"
:active.sync="isLoading"
:can-cancel="false"/>
<template v-if="couldLoadCollection && collecionAllowsItemSubmission">
<form
v-if="!hasSentForm"
@ -400,7 +401,7 @@
</div>
<a
v-if="!hideCollapses"
v-if="!showSteppedLayout && !hideCollapses"
class="collapse-all"
@click="toggleCollapseAll()">
{{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
@ -416,89 +417,111 @@
v-if="hasBeforeHook('metadata')"
class="item-submission-hook item-submission-hook-metadata-before"
v-html="getBeforeHook('metadata')" />
<div
v-for="(metadataSection, sectionIndex) of metadataSections"
:key="sectionIndex"
:class="'metadata-section-slug-' + metadataSection.slug"
:id="'metadata-section-id-' + metadataSection.id">
<div class="metadata-section-header section-label">
<span
class="collapse-handle"
@click="!hideCollapses ? toggleMetadataSectionCollapse(sectionIndex) : ''">
<span
v-if="!hideCollapses"
class="icon"
@click="toggleMetadataSectionCollapse(sectionIndex)">
<i
:class="{
'tainacan-icon-arrowdown' : metadataSectionCollapses[sectionIndex] || formErrorMessage,
'tainacan-icon-arrowright' : !(metadataSectionCollapses[sectionIndex] || formErrorMessage)
}"
class="has-text-secondary tainacan-icon tainacan-icon-1-25em"/>
</span>
<label>{{ metadataSection.name }}</label>
<help-button
v-if="!hideHelpButtons &&
!helpInfoBellowLabel &&
metadataSection.description"
:title="metadataSection.name"
:message="metadataSection.description" />
</span>
</div>
<transition name="filter-item">
<component
v-if="metadataSections.length"
:is="showSteppedLayout ? 'b-steps' : 'div'"
v-model="activeSectionStep"
:has-navigation="false"
type="is-secondary"
mobile-mode="compact"
size="is-small"
ref="item-submission-steps-layout">
<component
:is="showSteppedLayout ? 'b-step-item' : 'div'"
v-for="(metadataSection, sectionIndex) of metadataSections"
:key="sectionIndex"
:step="sectionIndex + 1"
:label="metadataSection.name"
:label-position="'right'"
:clickable="true"
:class="'metadata-section-slug-' + metadataSection.slug + (!showSteppedLayout && isSectionHidden(metadataSection.id) ? ' metadata-section-hidden' : '')"
:id="'metadata-section-id-' + metadataSection.id"
v-tooltip="{
content: !showSteppedLayout && isSectionHidden(metadataSection.id) ? $i18n.get('info_metadata_section_hidden_conditional') : false,
autoHide: true,
placement: 'auto',
popperClass: ['tainacan-tooltip', 'tooltip']
}">
<div
class="metadata-section-metadata-list"
v-show="metadataSectionCollapses[sectionIndex]">
<!-- JS-side hook for extra content -->
<div
v-if="hasBeforeHook('metadata_section')"
class="item-submission-hook item-submission-hook-metadata-section-before"
v-html="getBeforeHook('metadata_section', { metadataSection: metadataSection, sectionIndex: sectionIndex })" />
<p
class="metadatum-description-help-info"
v-if="metadataSection.description && (!hideHelpButtons && helpInfoBellowLabel)">
{{ metadataSection.description }}
</p>
<template v-if="itemMetadata && Array.isArray(itemMetadata)">
<template v-for="(itemMetadatum, index) of itemMetadata.filter(anItemMetadatum => anItemMetadatum.metadatum.metadata_section_id == metadataSection.id)">
<!-- JS-side hook for extra content -->
<div
:key="index"
v-if="hasBeforeHook('metadatum')"
class="item-submission-hook item-submission-hook-metadatum-before"
v-html="getBeforeHook('metadatum', { metadatum: itemMetadatum.metadatum, index: index, metadataSection: metadataSection, sectionIndex: sectionIndex })" />
<tainacan-form-item
:key="index"
v-if="enabledMetadata[index] == 'true'"
:item-metadatum="itemMetadatum"
:hide-collapses="hideCollapses"
:is-collapsed="metadataCollapses[index]"
@changeCollapse="onChangeCollapse($event, index)"/>
<!-- JS-side hook for extra content -->
<div
:key="index"
v-if="hasAfterHook('metadatum')"
class="item-submission-hook item-submission-hook-metadatum-after"
v-html="getAfterHook('metadatum', { metadatum: itemMetadatum.metadatum, index: index, metadataSection: metadataSection, sectionIndex: sectionIndex })" />
</template>
</template>
<!-- JS-side hook for extra content -->
<div
v-if="hasAfterHook('metadata_section')"
class="item-submission-hook item-submission-hook-metadata-section-after"
v-html="getAfterHook('metadata_section', { metadataSection: metadataSection, sectionIndex: sectionIndex })" />
v-if="!showSteppedLayout"
class="metadata-section-header section-label">
<span
class="collapse-handle"
@click="!hideCollapses && !isSectionHidden(metadataSection.id) ? toggleMetadataSectionCollapse(sectionIndex) : ''">
<span
v-if="!hideCollapses"
class="icon"
@click="toggleMetadataSectionCollapse(sectionIndex)">
<i
:class="{
'tainacan-icon-arrowdown' : (metadataSectionCollapses[sectionIndex] || formErrorMessage) && !isSectionHidden(metadataSection.id),
'tainacan-icon-arrowright' : !(metadataSectionCollapses[sectionIndex] || formErrorMessage) || isSectionHidden(metadataSection.id)
}"
class="has-text-secondary tainacan-icon tainacan-icon-1-25em"/>
</span>
<label>{{ metadataSection.name }}</label>
<help-button
v-if="!hideHelpButtons &&
!helpInfoBellowLabel &&
metadataSection.description"
:title="metadataSection.name"
:message="metadataSection.description" />
</span>
</div>
</transition>
<transition name="filter-item">
<div
class="metadata-section-metadata-list"
v-show="metadataSectionCollapses[sectionIndex] && (showSteppedLayout || !isSectionHidden(metadataSection.id))">
</div>
<!-- JS-side hook for extra content -->
<div
v-if="hasBeforeHook('metadata_section')"
class="item-submission-hook item-submission-hook-metadata-section-before"
v-html="getBeforeHook('metadata_section', { metadataSection: metadataSection, sectionIndex: sectionIndex })" />
<p
class="metadatum-description-help-info"
v-if="metadataSection.description && (!hideHelpButtons && helpInfoBellowLabel)">
{{ metadataSection.description }}
</p>
<template v-if="itemMetadata && Array.isArray(itemMetadata)">
<template v-for="(itemMetadatum, index) of itemMetadata.filter(anItemMetadatum => anItemMetadatum.metadatum.metadata_section_id == metadataSection.id)">
<!-- JS-side hook for extra content -->
<div
:key="index"
v-if="hasBeforeHook('metadatum')"
class="item-submission-hook item-submission-hook-metadatum-before"
v-html="getBeforeHook('metadatum', { metadatum: itemMetadatum.metadatum, index: index, metadataSection: metadataSection, sectionIndex: sectionIndex })" />
<tainacan-form-item
:key="index"
v-if="enabledMetadata[index] == 'true'"
:item-metadatum="itemMetadatum"
:hide-collapses="hideCollapses"
:is-collapsed="metadataCollapses[index]"
@changeCollapse="onChangeCollapse($event, index)"/>
<!-- JS-side hook for extra content -->
<div
:key="index"
v-if="hasAfterHook('metadatum')"
class="item-submission-hook item-submission-hook-metadatum-after"
v-html="getAfterHook('metadatum', { metadatum: itemMetadatum.metadatum, index: index, metadataSection: metadataSection, sectionIndex: sectionIndex })" />
</template>
</template>
<!-- JS-side hook for extra content -->
<div
v-if="hasAfterHook('metadata_section')"
class="item-submission-hook item-submission-hook-metadata-section-after"
v-html="getAfterHook('metadata_section', { metadataSection: metadataSection, sectionIndex: sectionIndex })" />
</div>
</transition>
</component>
</component>
<!-- JS-side hook for extra content -->
<div
@ -536,15 +559,9 @@
v-if="error.errors.length"
:key="index">
<a
v-if="['thumbnail', 'attachments', 'document'].includes(error.metadatum_id)"
v-if="['thumbnail', 'attachments', 'document'].includes(error.metadatum_id) || metadataElements[error.metadatum_id + (error.parent_meta_id ? ('_parent_meta_id-' + error.parent_meta_id) : '')]"
class="has-text-danger"
@click="metadataElements[error.metadatum_id].scrollIntoView({ behavior: 'smooth', block: 'center' })">
{{ getErrorMessage(error.errors) }}
</a>
<a
v-else-if="metadataElements[error.metadatum_id + (error.parent_meta_id ? ('_parent_meta_id-' + error.parent_meta_id) : '')]"
class="has-text-danger"
@click="metadataElements[error.metadatum_id + (error.parent_meta_id ? ('_parent_meta_id-' + error.parent_meta_id) : '')].scrollIntoView({ behavior: 'smooth', block: 'center' })">
@click="goToErrorMetadatum(error)">
{{ getErrorMessage(error.errors) }}
</a>
<p v-else>{{ getErrorMessage(error.errors) }}</p>
@ -584,8 +601,12 @@
class="item-submission-hook item-submission-hook-footer-before"
v-html="getBeforeHook('footer')" />
<div class="wp-block-buttons">
<div class="wp-block-button is-style-outline">
<div
class="wp-block-buttons"
style="gap: 1rem;">
<div
class="wp-block-button is-style-outline"
style="margin-right: auto;">
<button
@click="onDiscard()"
type="button"
@ -593,7 +614,29 @@
{{ $i18n.get('cancel') }}
</button>
</div>
<div class="wp-block-button">
<div
v-if="showSteppedLayout && activeSectionStep > 0"
class="wp-block-button">
<button
@click="onPreviousStep()"
type="button"
class="wp-block-button__link wp-element-button">
{{ $i18n.get('previous') }}
</button>
</div>
<div
v-if="showSteppedLayout && activeSectionStep < metadataSections.length - 1"
class="wp-block-button">
<button
@click="onNextStep()"
type="button"
class="wp-block-button__link wp-element-button">
{{ $i18n.get('next') }}
</button>
</div>
<div
v-if="!showSteppedLayout || activeSectionStep == metadataSections.length - 1"
class="wp-block-button">
<button
:disabled="showTermsAgreementCheckbox && !userHasAgreedToTerms"
@click="onSubmit()"
@ -724,7 +767,8 @@ export default {
itemLinkButtonLabel: String,
helpInfoBellowLabel: Boolean,
showTermsAgreementCheckbox: Boolean,
termsAgreementMessage: String
termsAgreementMessage: String,
isLayoutSteps: Boolean
},
data(){
return {
@ -758,10 +802,14 @@ export default {
captchaSiteKey: tainacan_plugin['item_submission_captcha_site_key'],
linkToCreatedItem: '',
userHasAgreedToTerms: false,
metadataElements: {}
metadataElements: {},
activeSectionStep: 0,
}
},
computed: {
showSteppedLayout() {
return this.isLayoutSteps;
},
itemSubmission() {
return this.getItemSubmission();
},
@ -791,9 +839,9 @@ export default {
// To find which is the section of this metadatum, we look for an intersection of the existeing sections
// in this collection and the list of section ids in the repository metadata
const intersectionOfSections = this.metadataSections.filter(
(aMetadataSection) => metadatumSectionId.includes("" + aMetadataSection.id) && aMetadataSection.id !== 'default_section'
);
const intersectionOfSections = this.getMetadataSections() // We do not use the computed metadataSections here as we want to include every section, even those hidden by stepped layout
.filter((aMetadataSection) => metadatumSectionId.includes("" + aMetadataSection.id) && aMetadataSection.id !== 'default_section');
if (intersectionOfSections.length === 1)
metadatum.metadata_section_id = intersectionOfSections[0].id;
@ -807,7 +855,7 @@ export default {
return tweakedItemMetadata;
},
metadataSections() {
return this.getMetadataSections();
return this.showSteppedLayout ? this.getMetadataSections().filter(aMetadataSection => !this.isSectionHidden(aMetadataSection.id)) : this.getMetadataSections();
},
formErrors() {
return eventBusItemMetadata && eventBusItemMetadata.errors && eventBusItemMetadata.errors.length ? eventBusItemMetadata.errors : []
@ -826,7 +874,10 @@ export default {
thumbnailErrorMessage() {
const existingError = this.formErrors.find(error => error.metadatum_id == 'thumbnail');
return existingError ? existingError.errors : '';
}
},
conditionalSections() {
return eventBusItemMetadata && eventBusItemMetadata.conditionalSections ? eventBusItemMetadata.conditionalSections : [];
},
},
created() {
@ -876,6 +927,25 @@ export default {
.then((metadataSections) => {
this.metadataSectionCollapses = Array(metadataSections.length).fill(true);
this.isLoadingMetadataSections = false;
/**
* Creates the conditional metadata set to later watch values
* of certain metadata that control sections visibility.
*/
eventBusItemMetadata.conditionalSections = {};
for (let metadataSection of metadataSections) {
if ( metadataSection.is_conditional_section == 'yes') {
const conditionalSectionId = Object.keys(metadataSection.conditional_section_rules);
if ( conditionalSectionId.length ) {
eventBusItemMetadata.conditionalSections[metadataSection.id] = {
sectionId: metadataSection.id,
metadatumId: conditionalSectionId[0],
metadatumValues: metadataSection.conditional_section_rules[conditionalSectionId[0]],
hide: true
};
}
}
}
})
.catch((error) => {
this.isLoadingMetadataSections = false;
@ -1046,7 +1116,6 @@ export default {
}
this.setItemSubmissionMetadata( metadata.map((metadatum) => { return { metadatum_id: metadatum.id, value: null } }) );
this.couldLoadCollection = true;
this.isLoading = false;
// Mounts grecapcha
if (this.useCaptcha == 'yes') {
@ -1056,6 +1125,8 @@ export default {
this.$console.log(error);
}
}
this.isLoading = false;
})
.catch(() => {
this.couldLoadCollection = false;
@ -1095,6 +1166,30 @@ export default {
this.formErrors.map((error) => {
this.metadataElements[error.metadatum_id + (error.parent_meta_id ? ('_parent_meta_id-' + error.parent_meta_id) : '')] = document.getElementById('tainacan-item-metadatum_id-' + error.metadatum_id + (error.parent_meta_id ? ('_parent_meta_id-' + error.parent_meta_id) : ''));
});
},
goToErrorMetadatum(error) {
if ( ['thumbnail', 'attachments', 'document'].includes(error.metadatum_id) )
this.metadataElements[error.metadatum_id].scrollIntoView({ behavior: 'smooth', block: 'center' });
else if ( this.metadataElements[error.metadatum_id + (error.parent_meta_id ? ('_parent_meta_id-' + error.parent_meta_id) : '')] ) {
if ( this.showSteppedLayout ) {
const stepWhereTheErrorIs = this.metadataSections.findIndex((aMetadataSection) => aMetadataSection.metadata_object_list.findIndex((aMetadatatum) => aMetadatatum.id == error.metadatum_id || aMetadatatum.id == error.parent_meta_id) >= 0);
if (stepWhereTheErrorIs >= 0)
this.activeSectionStep = stepWhereTheErrorIs;
}
this.metadataElements[error.metadatum_id + (error.parent_meta_id ? ('_parent_meta_id-' + error.parent_meta_id) : '')].scrollIntoView({ behavior: 'smooth', block: 'center' });
}
},
onPreviousStep() {
if ( this.$refs['item-submission-steps-layout'] && typeof this.$refs['item-submission-steps-layout'].prev == 'function' )
this.$refs['item-submission-steps-layout'].prev();
},
onNextStep() {
if ( this.$refs['item-submission-steps-layout'] && typeof this.$refs['item-submission-steps-layout'].next == 'function' )
this.$refs['item-submission-steps-layout'].next();
},
isSectionHidden(sectionId) {
return this.conditionalSections[sectionId] && this.conditionalSections[sectionId].hide;
}
}
}
@ -1141,6 +1236,14 @@ export default {
}
}
.metadata-section-hidden {
opacity: 0.5;
filter: grayscale(1.0);
& > {
pointer-events: none;
}
}
.section-label {
position: relative;
@ -1223,6 +1326,8 @@ export default {
margin-top: 1.25em;
.field {
margin-left: 0;
margin-right: 0;
padding: 0.75em 0.75em 0.5em 0.75em;
border: 1px dashed var(--tainacan-input-border-color);
@ -1313,5 +1418,29 @@ export default {
}
}
.b-steps {
border: 1px solid var(--tainacan-input-border-color);
border-radius: 2px;
margin-top: 1em;
/deep/ .steps {
.step-items {
margin-top: -1em;
padding-right: 0px;
margin-right: 0px;
padding-left: 0px;
margin-left: 0px;
.step-item.is-active .step-title {
color: var(--tainacan-secondary);
}
.step-item:not(.is-active) .step-title {
color: var(--tainacan-label-color);
}
}
}
}
}
</style>

5
src/views/gutenberg-blocks/blocks/item-submission-form/item-submission/scss/item-submission-basics.sass
View File

@ -11,4 +11,7 @@
@import "../../../../../../../node_modules/bulma/sass/elements/button.sass"
@import "../../../../../../../node_modules/bulma/sass/grid/columns.sass"
@import "../../../../../../../node_modules/bulma/sass/components/dropdown.sass"
@import "../../../../../../../node_modules/bulma/sass/components/modal.sass"
@import "../../../../../../../node_modules/bulma/sass/components/modal.sass"
$body-background-color: #fff;
$body-color: #fff;

6
src/views/gutenberg-blocks/blocks/item-submission-form/save.js
View File

@ -32,7 +32,8 @@ export default function({ attributes, className }) {
itemLinkButtonLabel,
helpInfoBellowLabel,
showTermsAgreementCheckbox,
termsAgreementMessage
termsAgreementMessage,
isLayoutSteps
} = attributes;
const blockProps = useBlockProps.save();
@ -84,7 +85,8 @@ export default function({ attributes, className }) {
show-terms-agreement-checkbox={ showTermsAgreementCheckbox ? showTermsAgreementCheckbox.toString() : 'false' }
terms-agreement-message={ termsAgreementMessageHTML }
item-link-button-label={ itemLinkButtonLabel ? itemLinkButtonLabel : __( 'Go to the item page', 'tainacan' ) }
help-info-bellow-label={ helpInfoBellowLabel ? helpInfoBellowLabel.toString() : 'false' } >
help-info-bellow-label={ helpInfoBellowLabel ? helpInfoBellowLabel.toString() : 'false' }
is-layout-steps={ isLayoutSteps.toString() } >
</div>
</div>
};

22
src/views/gutenberg-blocks/blocks/item-submission-form/style.scss
View File

@ -303,12 +303,34 @@
flex-wrap: wrap;
justify-content: flex-start;
}
.fake-steps {
margin-top: 1em;
display: flex;
justify-content: space-evenly;
align-items: center;
.fake-step {
width: 1em;
height: 1em;
border-radius: 100%;
background-color: var(--tainacan-input-border-color, rgba(200,200,200, 0.3));
}
.fake-step:first-of-type {
background-color: var(--tainacan-secondary, rgba(200,200,200, 0.3));
}
}
.fake-steps+.metadata-section {
margin-top: -0.5em;
border: 1px solid var(--tainacan-input-border-color, rgba(200,200,200, 0.3));
padding: 2em;
}
.metadata-section {
width: 100%;
padding: 0.5em 1em;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
box-sizing: border-box;
.fake-metadata {
display: flex;

9
src/views/gutenberg-blocks/blocks/item-submission-form/theme.js
View File

@ -19,7 +19,8 @@ import {
Input,
Select,
Taginput,
Snackbar
Snackbar,
Steps
} from 'buefy';
import VTooltip from 'floating-vue';
import cssVars from 'css-vars-ponyfill';
@ -87,6 +88,7 @@ export default (element) => {
Vue.use(Snackbar);
Vue.use(Modal);
Vue.use(Input);
Vue.use(Steps);
Vue.use(VTooltip, {
popperTriggers: ['hover'],
themes: {
@ -166,7 +168,8 @@ export default (element) => {
itemLinkButtonLabel: '',
helpInfoBellowLabel: false,
showItemLinkButton: false,
termsAgreementMessage: ''
termsAgreementMessage: '',
isLayoutSteps: false
},
beforeMount () {
// Collection source settings
@ -194,6 +197,8 @@ export default (element) => {
this.hideMetadataTypes = this.isParameterTrue('hide-metadata-types');
if (this.$el.attributes['help-info-bellow-label'] != undefined)
this.helpInfoBellowLabel = this.isParameterTrue('help-info-bellow-label');
if (this.$el.attributes['is-layout-steps'] != undefined)
this.isLayoutSteps = this.isParameterTrue('is-layout-steps');
// Form sections labels
if (this.$el.attributes['document-section-label'] != undefined)

2
src/views/gutenberg-blocks/blocks/item-submission-form/theme.vue
View File

@ -23,6 +23,7 @@
:help-info-bellow-label="$root.helpInfoBellowLabel ? $root.helpInfoBellowLabel : false"
:show-terms-agreement-checkbox="$root.showTermsAgreementCheckbox ? $root.showTermsAgreementCheckbox : false"
:terms-agreement-message="$root.termsAgreementMessage"
:is-layout-steps="$root.isLayoutSteps"
/>
</template>
@ -55,6 +56,7 @@ export default {
@import "../../../../../node_modules/buefy/src/scss/components/_dialog.scss";
@import "../../../../../node_modules/buefy/src/scss/components/_notices.scss";
@import "../../../../../node_modules/buefy/src/scss/components/_numberinput.scss";
@import "../../../../../node_modules/buefy/src/scss/components/_steps.scss";
// Block level custom variables
@import "../../../admin/scss/_custom_variables.scss";

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

@ -1004,6 +1004,8 @@ return apply_filters( 'tainacan-i18n', [
'info_item_submission_draft_status' => __( 'Warning: draft items may be submitted even without filling all required metadata.', 'tainacan' ),
'info_empty_geocoordinate_metadata_list' => __( 'No geocoordinate metadata was found. Try enabling it in the "displayed metadata" dropdown.', 'tainacan' ),
'info_non_located_item' => __( 'This item does not have any location based on this metadata.', 'tainacan' ),
'info_metadata_section_hidden_conditional' => __( 'Section disabled due to a conditional metadatum value.', 'tainacan' ),
'info_create_select_metadatum_for_conditional_section' => __( 'For configuring conditional sections, first create one select type metadatum to use its values as rules for displaing this section. The metadatum should be inside another metadatum section.', 'tainacan' ),
/* Activity actions */
'action_update-metadata-value' => __( 'Item Metadata Value Updates', 'tainacan'),