Merge pull request #773 from tainacan/feature/736
feat: conditional metadata section #736
This commit is contained in:
Vinícius Nunes Medeiros
GitHub
commit
e908d6783f
|
|
@ -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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -534,6 +534,17 @@ class Metadatum extends Entity {
|
|||
}
|
||||
}
|
||||
|
||||
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' ) {
|
||||
$parent_metadatum = new \Tainacan\Entities\Metadatum($this->get_parent());
|
||||
|
|
|
|||
|
|
@ -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' ),
|
||||
]
|
||||
] );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -1285,6 +1313,16 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -123,6 +123,93 @@
|
|||
|
||||
</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'] : ''">
|
||||
|
||||
<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" >
|
||||
<form
|
||||
|
|
@ -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,7 +314,11 @@
|
|||
]),
|
||||
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;
|
||||
|
|
@ -230,49 +348,6 @@
|
|||
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;
|
||||
});
|
||||
}
|
||||
},
|
||||
clearErrors(attribute) {
|
||||
this.formErrors[attribute] = undefined;
|
||||
|
|
|
|||
|
|
@ -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 }) {
|
||||
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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')}
|
||||
|
|
@ -647,7 +658,16 @@ export default function ({ attributes, setAttributes, className }) {
|
|||
{ metadataSectionLabel ?
|
||||
<div class="fake-text section-label"></div>
|
||||
: null }
|
||||
{ !hideCollapses ? <div class="fake-link"></div> : 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) => {
|
||||
|
|
|
|||
|
|
@ -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,25 +417,45 @@
|
|||
v-if="hasBeforeHook('metadata')"
|
||||
class="item-submission-hook item-submission-hook-metadata-before"
|
||||
v-html="getBeforeHook('metadata')" />
|
||||
|
||||
<div
|
||||
<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"
|
||||
:class="'metadata-section-slug-' + metadataSection.slug"
|
||||
:id="'metadata-section-id-' + metadataSection.id">
|
||||
|
||||
<div class="metadata-section-header section-label">
|
||||
: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
|
||||
v-if="!showSteppedLayout"
|
||||
class="metadata-section-header section-label">
|
||||
<span
|
||||
class="collapse-handle"
|
||||
@click="!hideCollapses ? toggleMetadataSectionCollapse(sectionIndex) : ''">
|
||||
@click="!hideCollapses && !isSectionHidden(metadataSection.id) ? 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)
|
||||
'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>
|
||||
|
|
@ -450,7 +471,7 @@
|
|||
<transition name="filter-item">
|
||||
<div
|
||||
class="metadata-section-metadata-list"
|
||||
v-show="metadataSectionCollapses[sectionIndex]">
|
||||
v-show="metadataSectionCollapses[sectionIndex] && (showSteppedLayout || !isSectionHidden(metadataSection.id))">
|
||||
|
||||
<!-- JS-side hook for extra content -->
|
||||
<div
|
||||
|
|
@ -498,7 +519,9 @@
|
|||
</div>
|
||||
</transition>
|
||||
|
||||
</div>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -12,3 +12,6 @@
|
|||
@import "../../../../../../../node_modules/bulma/sass/grid/columns.sass"
|
||||
@import "../../../../../../../node_modules/bulma/sass/components/dropdown.sass"
|
||||
@import "../../../../../../../node_modules/bulma/sass/components/modal.sass"
|
||||
|
||||
$body-background-color: #fff;
|
||||
$body-color: #fff;
|
||||
|
|
@ -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>
|
||||
};
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
|
|
|
|||
Loading…
Reference in New Issue