Creates condition paramether to form hooks. #663

This commit is contained in:
mateuswetah 2022-02-03 17:33:11 -03:00
parent f0315b0d1c
commit cdc6e88357
12 changed files with 244 additions and 258 deletions

View File

@ -3,7 +3,7 @@
/**
* @see \Tainacan\Admin_Hooks->register()
*/
function tainacan_register_admin_hook( $context, $callback, $position = 'end-left' ) {
function tainacan_register_admin_hook( $context, $callback, $position = 'end-left', $conditional = null ) {
$admin_hooks = \Tainacan\Admin_Hooks::get_instance();
return $admin_hooks->register( $context, $callback, $position );
return $admin_hooks->register( $context, $callback, $position, $conditional );
}

View File

@ -41,10 +41,11 @@ class Admin_Hooks {
/**
*
* @param string $context The context to add the hook to (collection, metadatum, item, taxonomy, term or filter)
* @param string $position The position inside the page to hook. (begin, end, begin-left, begin-right, end-left, end-right)
* @param callable $callback The callback that will output the form HTML
* @param string $position The position inside the page to hook. (begin, end, begin-left, begin-right, end-left, end-right)
* @param array $conditional Key-named array containing an 'attribute' and a 'value' that will be checked in the context form object before rendering the hook.
*/
public function register( $context, $callback, $position = 'end-left' ) {
public function register( $context, $callback, $position = 'end-left', $conditional = null ) {
$contexts = $this->get_available_contexts();
$positions = $this->get_available_positions();
@ -54,8 +55,14 @@ class Admin_Hooks {
}
$result = call_user_func($callback);
if (is_string($result)){
$this->registered_hooks[$context][$position][] = $result;
if ( is_string($result) ) {
$this->registered_hooks[$context][$position][] = [
'form' => $result,
'conditional' => !empty($conditional) ? $conditional : false
];
return true;
}
return false;

View File

@ -31,14 +31,11 @@
</b-field>
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['collection'] != undefined &&
formHooks['collection']['begin-left'] != undefined">
<template v-if="hasBeginLeftForm">
<form
class="form-hook-region"
id="form-collection-begin-left"
v-html="formHooks['collection']['begin-left'].join('')"/>
v-html="getBeginLeftForm"/>
</template>
<!-- Thumbnail -------------------------------- -->
@ -340,15 +337,12 @@
</b-field>
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['collection'] != undefined &&
formHooks['collection']['end-left'] != undefined">
<template v-if="hasEndLeftForm">
<form
ref="form-collection-end-left"
id="form-collection-end-left"
class="form-hook-region"
v-html="formHooks['collection']['end-left'].join('')"/>
v-html="getEndLeftForm"/>
</template>
</div>
@ -427,14 +421,11 @@
</b-field>
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['collection'] != undefined &&
formHooks['collection']['begin-right'] != undefined">
<template v-if="hasBeginRightForm">
<form
id="form-collection-begin-right"
class="form-hook-region"
v-html="formHooks['collection']['begin-right'].join('')"/>
v-html="getBeginRightForm"/>
</template>
<!-- Description -------------------------------- -->
@ -606,14 +597,11 @@
</transition>
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['collection'] != undefined &&
formHooks['collection']['end-right'] != undefined">
<template v-if="hasEndRightForm">
<form
id="form-collection-end-right"
class="form-hook-region"
v-html="formHooks['collection']['end-right'].join('')"/>
v-html="getEndRightForm"/>
</template>
</div>

View File

@ -2,7 +2,7 @@
<form
id="filterEditForm"
class="tainacan-form"
@submit.prevent="saveEdition(editForm)">
@submit.prevent="saveEdition(form)">
<div class="options-columns">
<b-field
:addons="false"
@ -18,20 +18,17 @@
:message="$i18n.getHelperMessage('filters', 'name')"/>
</label>
<b-input
v-model="editForm.name"
v-model="form.name"
name="name"
@focus="clearErrors('name')"/>
</b-field>
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['filter'] != undefined &&
formHooks['filter']['begin-left'] != undefined">
<template v-if="hasBeginLeftForm">
<form
id="form-filter-begin-left"
class="form-hook-region"
v-html="formHooks['filter']['begin-left'].join('')"/>
v-html="getBeginLeftForm"/>
</template>
<b-field
@ -48,7 +45,7 @@
type="textarea"
name="description"
:rows="3"
v-model="editForm.description"
v-model="form.description"
@focus="clearErrors('description')" />
</b-field>
@ -67,7 +64,7 @@
@focus="clearErrors('label_status')"
id="tainacan-select-status-publish"
name="status"
v-model="editForm.status"
v-model="form.status"
native-value="publish">
<span class="icon has-text-gray3">
<i class="tainacan-icon tainacan-icon-public"/>
@ -79,7 +76,7 @@
@focus="clearErrors('label_status')"
id="tainacan-select-status-private"
name="status"
v-model="editForm.status"
v-model="form.status"
native-value="private">
<span class="icon has-text-gray3">
<i class="tainacan-icon tainacan-icon-private"/>
@ -91,7 +88,7 @@
<b-field
:addons="false"
v-if="editForm.filter_type_object && editForm.filter_type_object.use_max_options">
v-if="form.filter_type_object && form.filter_type_object.use_max_options">
<label class="label is-inline">
{{ $i18n.get('label_max_options_to_show') }}
<help-button
@ -104,15 +101,15 @@
class="is-flex">
<b-select
name="max_options"
v-model="editForm.max_options"
v-model="form.max_options"
:placeholder="$i18n.get('instruction_select_max_options_to_show')">
<option value="4">4</option>
<option value="8">8</option>
<option value="12">12</option>
<option
v-if="editForm.max_options && ![4,8,12].find( (element) => element == editForm.max_options )"
:value="editForm.max_options">
{{ editForm.max_options }}</option>
v-if="form.max_options && ![4,8,12].find( (element) => element == form.max_options )"
:value="form.max_options">
{{ form.max_options }}</option>
</b-select>
<button
class="button is-white is-pulled-right"
@ -134,7 +131,7 @@
class="is-flex">
<b-input
name="max_options"
v-model="editForm.max_options"
v-model="form.max_options"
type="number"
step="1" />
<button
@ -155,23 +152,20 @@
<component
:errors="formErrors['filter_type_options']"
v-if="(editForm.filter_type_object && editForm.filter_type_object.form_component) || editForm.edit_form == ''"
:is="editForm.filter_type_object.form_component"
:filter="editForm"
v-model="editForm.filter_type_options"/>
v-if="(form.filter_type_object && form.filter_type_object.form_component) || form.edit_form == ''"
:is="form.filter_type_object.form_component"
:filter="form"
v-model="form.filter_type_options"/>
<div
v-html="editForm.edit_form"
v-html="form.edit_form"
v-else/>
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['filter'] != undefined &&
formHooks['filter']['end-left'] != undefined">
<template v-if="hasEndLeftForm">
<form
id="form-filter-end-left"
class="form-hook-region"
v-html="formHooks['filter']['end-left'].join('')"/>
v-html="getEndLeftForm"/>
</template>
</div>
@ -210,7 +204,7 @@ export default {
},
data(){
return {
editForm: {},
form: {},
oldForm: {},
formErrors: {},
formErrorMessage: '',
@ -223,9 +217,9 @@ export default {
created() {
this.editForm = this.editedFilter;
this.formErrors = this.editForm.formErrors != undefined ? this.editForm.formErrors : {};
this.formErrorMessage = this.editForm.formErrors != undefined ? this.editForm.formErrorMessage : '';
this.form = this.editedFilter;
this.formErrors = this.form.formErrors != undefined ? this.form.formErrors : {};
this.formErrorMessage = this.form.formErrors != undefined ? this.form.formErrorMessage : '';
this.oldForm = JSON.parse(JSON.stringify(this.originalFilter));
},
@ -233,15 +227,15 @@ export default {
// Fills hook forms with it's real values
this.$nextTick()
.then(() => {
this.updateExtraFormData(this.editForm);
this.updateExtraFormData(this.form);
});
},
beforeDestroy() {
if (this.closedByForm) {
this.editedFilter.saved = true;
} else {
this.oldForm.saved = this.editForm.saved;
if (JSON.stringify(this.editForm) != JSON.stringify(this.oldForm))
this.oldForm.saved = this.form.saved;
if (JSON.stringify(this.form) != JSON.stringify(this.oldForm))
this.editedFilter.saved = false;
else
this.editedFilter.saved = true;
@ -256,10 +250,10 @@ export default {
if ((filter.filter_type_object && filter.filter_type_object.form_component) || filter.edit_form == '') {
this.isLoading = true;
// this.fillExtraFormData(this.editForm);
this.updateFilter({ filterId: filter.id, index: this.index, options: this.editForm})
// this.fillExtraFormData(this.form);
this.updateFilter({ filterId: filter.id, index: this.index, options: this.form})
.then(() => {
this.editForm = {};
this.form = {};
this.formErrors = {};
this.formErrorMessage = '';
this.isLoading = false;
@ -275,8 +269,8 @@ export default {
this.formErrorMessage = errors.error_message;
this.$emit('onErrorFound');
this.editForm.formErrors = this.formErrors;
this.editForm.formErrorMessage = this.formErrorMessage;
this.form.formErrors = this.formErrors;
this.form.formErrorMessage = this.formErrorMessage;
});
} else {
let formElement = document.getElementById('filterEditForm');
@ -291,7 +285,7 @@ export default {
this.isLoading = true;
this.updateFilter({ filterId: filter.id, index: this.index, options: formObj})
.then(() => {
this.editForm = {};
this.form = {};
this.formErrors = {};
this.formErrorMessage = '';
this.isLoading = false;
@ -307,8 +301,8 @@ export default {
this.formErrorMessage = errors.error_message;
this.$emit('onErrorFound');
this.editForm.formErrors = this.formErrors;
this.editForm.formErrorMessage = this.formErrorMessage;
this.form.formErrors = this.formErrors;
this.form.formErrorMessage = this.formErrorMessage;
});
}
},

View File

@ -43,14 +43,11 @@
<div class="column is-7">
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['item'] != undefined &&
formHooks['item']['begin-right'] != undefined">
<template v-if="hasBeginRightForm">
<form
id="form-item-begin-right"
class="form-hook-region"
v-html="formHooks['item']['begin-right'].join('')"/>
v-html="getBeginRightForm"/>
</template>
<div class="columns">
@ -179,6 +176,7 @@
</b-field>
</div>
<!-- The item metadata inputs -->
<tainacan-form-item
v-show="(metadataNameFilterString == '' || filterByMetadatumName(itemMetadatum))"
v-for="(itemMetadatum, index) of metadatumList"
@ -190,15 +188,13 @@
@changeCollapse="onChangeCollapse($event, index)"/>
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['item'] != undefined &&
formHooks['item']['end-right'] != undefined">
<template v-if="hasEndRightForm">
<form
id="form-item-end-right"
class="form-hook-region"
v-html="formHooks['item']['end-right'].join('')"/>
v-html="getEndRightForm"/>
</template>
</b-tab-item>
@ -281,14 +277,11 @@
<div class="sticky-container">
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['item'] != undefined &&
formHooks['item']['begin-left'] != undefined">
<template v-if="hasBeginLeftForm">
<form
id="form-item-begin-left"
class="form-hook-region"
v-html="formHooks['item']['begin-left'].join('')"/>
id="form-item-begin-left"
class="form-hook-region"
v-html="getBeginLeftForm"/>
</template>
<!-- Document -------------------------------- -->
@ -538,14 +531,11 @@
</div>
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['item'] != undefined &&
formHooks['item']['end-left'] != undefined">
<template v-if="hasEndLeftForm">
<form
id="form-item-end-left"
class="form-hook-region"
v-html="formHooks['item']['end-left'].join('')"/>
v-html="getEndLeftForm"/>
</template>
</div>

View File

@ -1,16 +1,16 @@
<template>
<form
id="metadatumEditForm"
@submit.prevent="saveEdition(editForm)"
@submit.prevent="saveEdition(form)"
autofocus="true"
tabindex="-1"
role="dialog"
aria-modal>
<div
v-if="editForm && Object.keys(editForm).length"
v-if="form && Object.keys(form).length"
class="tainacan-modal-content">
<div class="tainacan-modal-title">
<h2 v-html="editForm.name ? ($i18n.get('instruction_configure_the_metadatum') + ' <em>' + editForm.name + '</em>') : $i18n.get('instruction_configure_new_metadatum')" />
<h2 v-html="form.name ? ($i18n.get('instruction_configure_the_metadatum') + ' <em>' + form.name + '</em>') : $i18n.get('instruction_configure_new_metadatum')" />
<!-- <a
class="back-link"
@click="onEditionCanceled()">
@ -20,7 +20,7 @@
</div>
<div
class="tainacan-form"
:class="'tainacan-metadatum-edition-form--type-' + editForm.metadata_type_object.component">
:class="'tainacan-metadatum-edition-form--type-' + form.metadata_type_object.component">
<div class="options-columns">
<b-field
:addons="false"
@ -36,20 +36,18 @@
:message="$i18n.getHelperMessage('metadata', 'name')"/>
</label>
<b-input
v-model="editForm.name"
v-model="form.name"
name="name"
@focus="clearErrors('name')"/>
</b-field>
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['metadatum'] != undefined &&
formHooks['metadatum']['begin-left'] != undefined">
v-if="hasBeginLeftForm">
<form
id="form-metadatum-begin-left"
class="form-hook-region"
v-html="formHooks['metadatum']['begin-left'].join('')"/>
v-html="getBeginLeftForm"/>
</template>
<b-field
@ -66,12 +64,12 @@
type="textarea"
name="description"
rows="3"
v-model="editForm.description"
v-model="form.description"
@focus="clearErrors('description')"/>
</b-field>
<b-field
v-if="editForm.metadata_type_object.component != 'tainacan-compound'"
v-if="form.metadata_type_object.component != 'tainacan-compound'"
:addons="false"
:type="formErrors['placeholder'] != undefined ? 'is-danger' : ''"
:message="formErrors['placeholder'] != undefined ? formErrors['placeholder'] : ''">
@ -82,13 +80,13 @@
:message="$i18n.getHelperMessage('metadata', 'placeholder')"/>
</label>
<b-input
v-model="editForm.placeholder"
v-model="form.placeholder"
name="placeholder"
@focus="clearErrors('placeholder')"/>
</b-field>
<b-field
v-if="editForm.parent == 0"
v-if="form.parent == 0"
:addons="false"
:type="formErrors['status'] != undefined ? 'is-danger' : ''"
:message="formErrors['status'] != undefined ? formErrors['status'] : ''">
@ -103,7 +101,7 @@
@focus="clearErrors('label_status')"
id="tainacan-select-status-publish"
name="status"
v-model="editForm.status"
v-model="form.status"
native-value="publish">
<span class="icon has-text-gray3">
<i class="tainacan-icon tainacan-icon-public"/>
@ -114,7 +112,7 @@
@focus="clearErrors('label_status')"
id="tainacan-select-status-private"
name="status"
v-model="editForm.status"
v-model="form.status"
native-value="private">
<span class="icon has-text-gray3">
<i class="tainacan-icon tainacan-icon-private"/>
@ -126,7 +124,7 @@
<!-- Display on listing -->
<b-field
v-if="editForm.parent == 0"
v-if="form.parent == 0"
:type="formErrors['display'] != undefined ? 'is-danger' : ''"
:message="formErrors['display'] != undefined ? formErrors['display'] : ''"
:addons="false">
@ -138,7 +136,7 @@
</label>
<b-select
expanded
v-model="editForm.display"
v-model="form.display"
@input="clearErrors('display')">
<option value="yes">
{{ $i18n.get('label_display_default') }}
@ -157,12 +155,12 @@
<label class="label is-inline">{{ $i18n.get('label_insert_options') }}</label>
<b-field
v-if="editForm.metadata_type_object.component != 'tainacan-compound' && (editForm.parent == 0 || (editForm.parent != 0 && !isParentMultiple))"
v-if="form.metadata_type_object.component != 'tainacan-compound' && (form.parent == 0 || (form.parent != 0 && !isParentMultiple))"
:type="formErrors['required'] != undefined ? 'is-danger' : ''"
:message="formErrors['required'] != undefined ? formErrors['required'] : ''">
<b-checkbox
@input="clearErrors('required')"
v-model="editForm.required"
v-model="form.required"
true-value="yes"
false-value="no"
class="is-inline-block"
@ -175,12 +173,12 @@
</b-field>
<b-field
v-if="editForm.metadata_type_object.component != 'tainacan-compound'"
v-if="form.metadata_type_object.component != 'tainacan-compound'"
:type="formErrors['collection_key'] != undefined ? 'is-danger' : ''"
:message="formErrors['collection_key'] != undefined ? formErrors['collection_key'] : ''">
<b-checkbox
@input="clearErrors('collection_key')"
v-model="editForm.collection_key"
v-model="form.collection_key"
true-value="yes"
false-value="no"
class="is-inline-block"
@ -193,12 +191,12 @@
</b-field>
<b-field
v-if="!originalMetadatum.metadata_type_object.core && editForm.parent == 0"
v-if="!originalMetadatum.metadata_type_object.core && form.parent == 0"
:type="formErrors['multiple'] != undefined ? 'is-danger' : ''"
:message="formErrors['multiple'] != undefined ? formErrors['multiple'] : ''">
<b-checkbox
@input="clearErrors('multiple')"
v-model="editForm.multiple"
v-model="form.multiple"
true-value="yes"
false-value="no"
class="is-inline-block"
@ -213,18 +211,18 @@
</b-field>
<b-field
v-if="!originalMetadatum.metadata_type_object.core && editForm.parent == 0"
v-if="!originalMetadatum.metadata_type_object.core && form.parent == 0"
:addons="false"
:label="$i18n.get('label_limit_max_values')">
&nbsp;
<b-switch
size="is-small"
:disabled="editForm.multiple != 'yes'"
:disabled="form.multiple != 'yes'"
v-model="showCardinalityOptions" />
</b-field>
<b-field
v-if="!originalMetadatum.metadata_type_object.core && editForm.parent == 0"
v-if="!originalMetadatum.metadata_type_object.core && form.parent == 0"
:type="formErrors['cardinality'] != undefined ? 'is-danger' : ''"
:message="formErrors['cardinality'] != undefined ? formErrors['cardinality'] : ''"
:addons="false">
@ -235,17 +233,17 @@
:message="$i18n.getHelperMessage('metadata', 'cardinality')"/>
</label>
<b-numberinput
:disabled="!showCardinalityOptions || editForm.multiple != 'yes'"
:disabled="!showCardinalityOptions || form.multiple != 'yes'"
name="cardinality"
step="1"
min="2"
v-model="editForm.cardinality"/>
v-model="form.cardinality"/>
</b-field>
<b-field v-if="!isRepositoryLevel && isInsideImporterFlow">
<b-checkbox
class="is-inline-block"
v-model="editForm.repository_level"
v-model="form.repository_level"
@input="clearErrors('repository_level')"
name="repository_level"
true-value="yes"
@ -259,7 +257,7 @@
</div>
<div
v-if="(editForm.metadata_type_object && editForm.metadata_type_object.form_component && editForm.metadata_type_object.component != 'tainacan-compound') || editForm.edit_form != ''"
v-if="(form.metadata_type_object && form.metadata_type_object.form_component && form.metadata_type_object.component != 'tainacan-compound') || form.edit_form != ''"
class="metadata-form-section"
@click="hideMetadataTypeOptions = !hideMetadataTypeOptions;">
<span class="icon">
@ -267,7 +265,7 @@
class="tainacan-icon"
:class="!hideMetadataTypeOptions ? 'tainacan-icon-arrowdown' : 'tainacan-icon-arrowright'" />
</span>
<strong>{{ $i18n.getWithVariables('label_options_of_the_%s_metadata_type', [ editForm.metadata_type_object.name ]) }}</strong>
<strong>{{ $i18n.getWithVariables('label_options_of_the_%s_metadata_type', [ form.metadata_type_object.name ]) }}</strong>
<hr>
</div>
@ -277,23 +275,20 @@
class="options-columns">
<component
:errors="formErrors['metadata_type_options']"
v-if="(editForm.metadata_type_object && editForm.metadata_type_object.form_component) || editForm.edit_form != ''"
:is="editForm.metadata_type_object.form_component"
:metadatum="editForm"
v-model="editForm.metadata_type_options"/>
v-if="(form.metadata_type_object && form.metadata_type_object.form_component) || form.edit_form != ''"
:is="form.metadata_type_object.form_component"
:metadatum="form"
v-model="form.metadata_type_options"/>
<div
v-html="editForm.edit_form"
v-html="form.edit_form"
v-else/>
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['metadatum'] != undefined &&
formHooks['metadatum']['end-left'] != undefined">
<template v-if="hasEndLeftForm" >
<form
id="form-metadatum-end-left"
class="form-hook-region"
v-html="formHooks['metadatum']['end-left'].join('')"/>
v-html="getEndLeftForm"/>
</template>
</div>
</transition>
@ -323,7 +318,7 @@
:message="$i18n.getHelperMessage('metadata', 'semantic_uri')"/>
</label>
<b-input
v-model="editForm.semantic_uri"
v-model="form.semantic_uri"
name="semantic_uri"
type="url"
@focus="clearErrors('semantic_uri')"/>
@ -371,7 +366,7 @@
},
data() {
return {
editForm: {},
form: {},
formErrors: {},
formErrorMessage: '',
closedByForm: false,
@ -384,26 +379,26 @@
},
watch: {
showCardinalityOptions() {
this.editForm.cardinality = !this.showCardinalityOptions ? 1 : 2;
this.form.cardinality = !this.showCardinalityOptions ? 1 : 2;
}
},
created() {
this.editForm = JSON.parse(JSON.stringify(this.originalMetadatum));
if (this.editForm.status == 'auto-draft')
this.editForm.status = 'publish';
this.form = JSON.parse(JSON.stringify(this.originalMetadatum));
if (this.editForm.cardinality && this.editForm.cardinality > 1)
if (this.form.status == 'auto-draft')
this.form.status = 'publish';
if (this.form.cardinality && this.form.cardinality > 1)
this.showCardinalityOptions = true;
this.formErrors = this.editForm.formErrors != undefined ? this.editForm.formErrors : {};
this.formErrorMessage = this.editForm.formErrors != undefined ? this.editForm.formErrorMessage : '';
this.formErrors = this.form.formErrors != undefined ? this.form.formErrors : {};
this.formErrorMessage = this.form.formErrors != undefined ? this.form.formErrorMessage : '';
},
mounted() {
// Fills hook forms with it's real values
this.$nextTick()
.then(() => {
this.updateExtraFormData(this.editForm);
this.updateExtraFormData(this.form);
});
},
methods: {
@ -413,22 +408,22 @@
saveEdition(metadatum) {
if ( (metadatum.metadata_type_object && metadatum.metadata_type_object.form_component) || metadatum.edit_form == '') {
let repository = this.editForm.repository_level;
let repository = this.form.repository_level;
if (repository && repository === 'yes')
this.isRepositoryLevel = true;
this.fillExtraFormData(this.editForm);
this.fillExtraFormData(this.form);
this.isUpdating = true;
this.updateMetadatum({
collectionId: this.collectionId,
metadatumId: metadatum.id,
isRepositoryLevel: this.isRepositoryLevel,
index: this.index,
options: this.editForm,
options: this.form,
includeOptionsAsHtml: true
})
.then(() => {
this.editForm = {};
this.form = {};
this.formErrors = {};
this.formErrorMessage = '';
this.isUpdating = false;
@ -445,8 +440,8 @@
}
this.formErrorMessage = errors.error_message;
this.editForm.formErrors = this.formErrors;
this.editForm.formErrorMessage = this.formErrorMessage;
this.form.formErrors = this.formErrors;
this.form.formErrorMessage = this.formErrorMessage;
});
} else {
let formElement = document.getElementById('metadatumEditForm');
@ -467,7 +462,7 @@
includeOptionsAsHtml: true
})
.then(() => {
this.editForm = {};
this.form = {};
this.formErrors = {};
this.formErrorMessage = '';
this.isUpdating = false;
@ -486,8 +481,8 @@
this.formErrorMessage = errors.error_message;
this.$emit('onErrorFound');
this.editForm.formErrors = this.formErrors;
this.editForm.formErrorMessage = this.formErrorMessage;
this.form.formErrors = this.formErrors;
this.form.formErrorMessage = this.formErrorMessage;
});
}
},

View File

@ -36,14 +36,11 @@
</b-field>
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['taxonomy'] != undefined &&
formHooks['taxonomy']['begin-left'] != undefined">
<template v-if="hasBeginLeftForm">
<form
id="form-taxonomy-begin-left"
class="form-hook-region"
v-html="formHooks['taxonomy']['begin-left'].join('')"/>
v-html="getBeginLeftForm"/>
</template>
<!-- Description -------------------------------- -->
@ -149,14 +146,11 @@
</b-field>
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['taxonomy'] != undefined &&
formHooks['taxonomy']['end-left'] != undefined">
<template v-if="hasEndLeftForm">
<form
id="form-taxonomy-end-left"
class="form-hook-region"
v-html="formHooks['taxonomy']['end-left'].join('')"/>
v-html="getEndLeftForm"/>
</template>
</div>
</div>

View File

@ -7,16 +7,16 @@
id="termEditForm"
class="tainacan-form"
:class="{ 'tainacan-modal-content': isModal }"
@submit.prevent="saveEdition(editForm)">
@submit.prevent="saveEdition(form)">
<component
:is="isModal ? 'header' : 'div'"
class="tainacan-page-title"
:class="{ 'tainacan-modal-title': isModal }">
<h2>{{ editForm & editForm.id && editForm.id != 'new' ? $i18n.get("title_term_edit") : $i18n.get("title_term_creation") }}</h2>
<h2>{{ form & form.id && form.id != 'new' ? $i18n.get("title_term_edit") : $i18n.get("title_term_creation") }}</h2>
<a
v-if="editForm && editForm.url != undefined && editForm.url!= ''"
v-if="form && form.url != undefined && form.url!= ''"
target="_blank"
:href="editForm.url">
:href="form.url">
<span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-see"/>
</span>
@ -44,20 +44,18 @@
</label>
<b-input
:placeholder="$i18n.get('label_term_without_name')"
v-model="editForm.name"
v-model="form.name"
name="name"
@focus="clearErrors({ name: 'name', repeated: 'repeated' })"/>
</b-field>
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['term'] != undefined &&
formHooks['term']['begin-left'] != undefined">
v-if="hasBeginLeftForm">
<form
id="form-term-begin-left"
class="form-hook-region"
v-html="formHooks['term']['begin-left'].join('')"/>
v-html="getBeginLeftForm"/>
</template>
<div class="columns is-gapless image-and-description-area">
@ -70,11 +68,11 @@
<div class="thumbnail-field">
<figure class="image">
<span
v-if="editForm.header_image === undefined || editForm.header_image === false"
v-if="form.header_image === undefined || form.header_image === false"
class="image-placeholder">{{ $i18n.get('label_empty_term_image') }}</span>
<img
:alt="$i18n.get('label_image')"
:src="(editForm.header_image === undefined || editForm.header_image === false) ? $thumbHelper.getEmptyThumbnailPlaceholder() : editForm.header_image">
:src="(form.header_image === undefined || form.header_image === false) ? $thumbHelper.getEmptyThumbnailPlaceholder() : form.header_image">
</figure>
<div class="thumbnail-buttons-row">
<a
@ -130,7 +128,7 @@
<b-input
type="textarea"
name="description"
v-model="editForm.description"
v-model="form.description"
@focus="clearErrors('description')"/>
</b-field>
</div>
@ -192,14 +190,11 @@
</b-field>
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['term'] != undefined &&
formHooks['term']['end-left'] != undefined">
<template v-if="hasEndLeftForm">
<form
id="form-term-end-left"
class="form-hook-region"
v-html="formHooks['term']['end-left'].join('')"/>
v-html="getEndLeftForm"/>
</template>
<!-- Submit buttons -------------- -->
@ -234,7 +229,7 @@
name: 'TermEditionForm',
mixins: [ formHooks ],
props: {
editForm: Object,
form: Object,
taxonomyId: '',
isModal: false
},
@ -260,19 +255,19 @@
// Fills hook forms with it's real values
this.$nextTick()
.then(() => {
this.updateExtraFormData(this.editForm);
this.updateExtraFormData(this.form);
document.getElementById('termEditForm').scrollIntoView({ behavior: 'smooth' });
});
this.showCheckboxesWarning = false;
this.hasParent = this.editForm.parent != undefined && this.editForm.parent > 0;
this.initialParentId = this.editForm.parent;
this.hasParent = this.form.parent != undefined && this.form.parent > 0;
this.initialParentId = this.form.parent;
this.initializeMediaFrames();
if (this.hasParent) {
this.isFetchingParentTerms = true;
this.showCheckboxesWarning = false;
this.fetchParentName({ taxonomyId: this.taxonomyId, parentId: this.editForm.parent })
this.fetchParentName({ taxonomyId: this.taxonomyId, parentId: this.form.parent })
.then((parentName) => {
this.parentTermName = parentName;
this.isFetchingParentTerms = false;
@ -299,11 +294,11 @@
if (term.id === 'new') {
let data = {
name: this.editForm.name,
description: this.editForm.description,
parent: this.hasParent ? this.editForm.parent : 0,
header_image_id: this.editForm.header_image_id,
header_image: this.editForm.header_image,
name: this.form.name,
description: this.form.description,
parent: this.hasParent ? this.form.parent : 0,
header_image_id: this.form.header_image_id,
header_image: this.form.header_image,
};
this.fillExtraFormData(data);
this.isLoading = true;
@ -313,7 +308,7 @@
})
.then((term) => {
this.$emit('onEditionFinished', {term: term, hasChangedParent: this.hasChangedParent });
this.editForm = {};
this.form = {};
this.formErrors = {};
this.isLoading = false;
if (this.isModal)
@ -333,12 +328,12 @@
} else {
let data = {
id: this.editForm.id,
name: this.editForm.name,
description: this.editForm.description,
parent: this.hasParent ? this.editForm.parent : 0,
header_image_id: this.editForm.header_image_id,
header_image: this.editForm.header_image,
id: this.form.id,
name: this.form.name,
description: this.form.description,
parent: this.hasParent ? this.form.parent : 0,
header_image_id: this.form.header_image_id,
header_image: this.form.header_image,
}
this.fillExtraFormData(data);
this.isLoading = true;
@ -364,13 +359,13 @@
}
},
cancelEdition() {
this.$emit('onEditionCanceled', this.editForm);
this.$emit('onEditionCanceled', this.form);
if (this.isModal)
this.$parent.close();
},
deleteHeaderImage() {
this.editForm = Object.assign({},
this.editForm,
this.form = Object.assign({},
this.form,
{
header_image_id: "0",
header_image: false
@ -384,11 +379,11 @@
frame_title: this.$i18n.get('instruction_select_term_header_image'),
frame_button: this.$i18n.get('label_select_file')
},
relatedPostId: this.editForm.id,
relatedPostId: this.form.id,
onSave: (croppedImage) => {
this.editForm = Object.assign({},
this.editForm,
this.form = Object.assign({},
this.form,
{
header_image_id: croppedImage.id.toString(),
header_image: croppedImage.url
@ -432,7 +427,7 @@
this.fetchPossibleParentTerms({
taxonomyId: this.taxonomyId,
termId: this.editForm.id,
termId: this.form.id,
search: this.parentTermSearchQuery,
offset: this.parentTermSearchOffset })
.then((res) => {
@ -453,7 +448,7 @@
}, 250),
onToggleSwitch() {
if (this.editForm.parent == 0) {
if (this.form.parent == 0) {
this.hasChangedParent = this.hasParent;
} else {
this.hasChangedParent = !this.hasParent;
@ -464,7 +459,7 @@
},
onSelectParentTerm(selectedParentTerm) {
this.hasChangedParent = this.initialParentId != selectedParentTerm.id;
this.editForm.parent = selectedParentTerm.id;
this.form.parent = selectedParentTerm.id;
this.selectedParentTerm = selectedParentTerm;
this.parentTermName = selectedParentTerm.name;
this.showCheckboxesWarning = true;

View File

@ -51,6 +51,7 @@ export const dateInter = {
};
// Used for filling extra form data on hooks
// Any form component that uses this should have a 'entityName' and a 'form' in their data atts
export const formHooks = {
data() {
return {
@ -58,6 +59,32 @@ export const formHooks = {
formHookEventName: ''
}
},
computed: {
hasBeginLeftForm() {
return this.formHooks && this.formHooks[this.entityName] && this.formHooks[this.entityName]['begin-left'] && this.formHooks[this.entityName]['begin-left'].length > 0;
},
hasBeginRightForm() {
return this.formHooks && this.formHooks[this.entityName] && this.formHooks[this.entityName]['begin-right'] && this.formHooks[this.entityName]['begin-right'].length > 0;
},
hasEndLeftForm() {
return this.formHooks && this.formHooks[this.entityName] && this.formHooks[this.entityName]['end-left'] && this.formHooks[this.entityName]['end-left'].length > 0;
},
hasEndRightForm() {
return this.formHooks && this.formHooks[this.entityName] && this.formHooks[this.entityName]['end-right'] && this.formHooks[this.entityName]['end-right'].length > 0;
},
getBeginLeftForm() {
return this.formHooks[this.entityName]['begin-left'].map(aForm => this.checkFormConditionals(aForm)).join('');
},
getBeginRightForm() {
return this.formHooks[this.entityName]['begin-right'].map(aForm => this.checkFormConditionals(aForm)).join('');
},
getEndLeftForm() {
return this.formHooks[this.entityName]['end-left'].map(aForm => this.checkFormConditionals(aForm)).join('');
},
getEndRightForm() {
return this.formHooks[this.entityName]['end-right'].map(aForm => this.checkFormConditionals(aForm)).join('');
}
},
created() {
this.formHookEventName = 'tainacan-' + this.entityName + '-hook-reload';
this.formHookEvent = new Event(this.formHookEventName);
@ -77,7 +104,12 @@ export const formHooks = {
];
// Gets data from existing extra form hooks
for (let position of positions) {
if (this.formHooks[this.entityName] && this.formHooks[this.entityName][position] && this.formHooks[this.entityName][position] != undefined) {
if (
this.formHooks[this.entityName] &&
this.formHooks[this.entityName][position] &&
this.formHooks[this.entityName][position]['form'] &&
this.formHooks[this.entityName][position]['form'] != undefined
) {
let formElement = document.getElementById('form-' + this.entityName + '-' + position);
if (formElement) {
for (let element of formElement.elements) {
@ -107,7 +139,12 @@ export const formHooks = {
];
// Gets data from existing extra form hooks
for (let position of positions) {
if (this.formHooks[this.entityName] && this.formHooks[this.entityName][position] && this.formHooks[this.entityName][position] != undefined) {
if (
this.formHooks[this.entityName] &&
this.formHooks[this.entityName][position] &&
this.formHooks[this.entityName][position]['form'] &&
this.formHooks[this.entityName][position]['form'] != undefined
) {
let formElement = document.getElementById('form-' + this.entityName + '-' + position);
if (formElement) {
@ -132,6 +169,16 @@ export const formHooks = {
}
}
}
},
checkFormConditionals(aForm) {
console.log(this.form, aForm)
if (aForm['form']) {
if (aForm['conditional'] && aForm['conditional']['attribute'] && aForm['conditional']['value'])
return (this.form && this.form[aForm['conditional']['attribute']] === aForm['conditional']['value'] ) ? aForm['form'] : '';
else
return aForm['form'];
}
return '';
}
}
};

View File

@ -27,14 +27,11 @@
<div class="column is-7">
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['view-item'] != undefined &&
formHooks['view-item']['begin-right'] != undefined">
<template v-if="hasBeginRightForm">
<div
id="view-item-begin-right"
class="form-hook-region"
v-html="formHooks['view-item']['begin-right'].join('')"/>
v-html="getBeginRightForm"/>
</template>
<div
@ -191,14 +188,11 @@
</div>
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['view-item'] != undefined &&
formHooks['view-item']['end-right'] != undefined">
<template v-if="hasEndRightForm">
<div
id="view-item-end-right"
class="form-hook-region"
v-html="formHooks['view-item']['end-right'].join('')"/>
v-html="getEndRightForm"/>
</template>
</b-tab-item>
@ -270,14 +264,11 @@
<div class="sticky-container">
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['view-item'] != undefined &&
formHooks['view-item']['begin-left'] != undefined">
<template v-if="hasBeginLeftForm">
<div
id="view-item-begin-left"
class="form-hook-region"
v-html="formHooks['view-item']['begin-left'].join('')"/>
v-html="getBeginLeftForm"/>
</template>
<!-- Document -------------------------------- -->
@ -353,14 +344,11 @@
</div>
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['view-item'] != undefined &&
formHooks['view-item']['end-left'] != undefined">
<template v-if="hasEndLeftForm">
<div
id="view-item-end-left"
class="form-hook-region"
v-html="formHooks['view-item']['end-left'].join('')"/>
v-html="getEndLeftForm"/>
</template>
</div>

View File

@ -6,9 +6,9 @@
aria-modal
id="termEditForm"
class="tainacan-form term-creation-panel"
@submit.prevent="saveEdition(editForm)">
@submit.prevent="saveEdition(form)">
<h4>{{ editForm & editForm.id && editForm.id != 'new' ? $i18n.get("title_term_edit") : $i18n.get("title_term_creation") }}</h4>
<h4>{{ form & form.id && form.id != 'new' ? $i18n.get("title_term_edit") : $i18n.get("title_term_creation") }}</h4>
<div>
<b-loading
@ -29,7 +29,7 @@
</label>
<b-input
:placeholder="$i18n.get('label_term_without_name')"
v-model="editForm.name"
v-model="form.name"
name="name"
@focus="clearErrors({ name: 'name', repeated: 'repeated' })"/>
</b-field>
@ -113,7 +113,7 @@
name: 'TermEditionForm',
mixins: [ formHooks ],
props: {
editForm: Object,
form: Object,
taxonomyId: ''
},
data() {
@ -133,12 +133,12 @@
},
mounted() {
this.hasParent = this.editForm.parent != undefined && this.editForm.parent > 0;
this.initialParentId = this.editForm.parent;
this.hasParent = this.form.parent != undefined && this.form.parent > 0;
this.initialParentId = this.form.parent;
if (this.hasParent) {
this.isFetchingParentTerms = true;
this.fetchParentName({ taxonomyId: this.taxonomyId, parentId: this.editForm.parent })
this.fetchParentName({ taxonomyId: this.taxonomyId, parentId: this.form.parent })
.then((parentName) => {
this.parentTermName = parentName;
this.isFetchingParentTerms = false;
@ -164,14 +164,14 @@
saveEdition(term) {
if (term.id === 'new') {
this.$emit('onEditionFinished', { name: this.editForm.name, parent: this.editForm.parent });
this.editForm = {};
this.$emit('onEditionFinished', { name: this.form.name, parent: this.form.parent });
this.form = {};
this.formErrors = {};
this.isLoading = false;
}
},
cancelEdition() {
this.$emit('onEditionCanceled', this.editForm);
this.$emit('onEditionCanceled', this.form);
},
clearErrors(attributes) {
if (attributes instanceof Object){
@ -206,7 +206,7 @@
this.fetchPossibleParentTerms({
taxonomyId: this.taxonomyId,
termId: this.editForm.id,
termId: this.form.id,
search: this.parentTermSearchQuery,
offset: this.parentTermSearchOffset })
.then((res) => {
@ -227,7 +227,7 @@
}, 250),
onToggleSwitch() {
if (this.editForm.parent == 0)
if (this.form.parent == 0)
this.hasChangedParent = this.hasParent;
else
this.hasChangedParent = !this.hasParent;
@ -237,7 +237,7 @@
},
onSelectParentTerm(selectedParentTerm) {
this.hasChangedParent = this.initialParentId != selectedParentTerm.id;
this.editForm.parent = selectedParentTerm.id;
this.form.parent = selectedParentTerm.id;
this.selectedParentTerm = selectedParentTerm;
this.parentTermName = selectedParentTerm.name;
this.showCheckboxesWarning = true;

View File

@ -12,14 +12,11 @@
label-width="120px">
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['item'] != undefined &&
formHooks['item']['begin-left'] != undefined">
<template v-if="hasBeginLeftForm">
<form
id="form-item-begin-left"
class="form-hook-region"
v-html="formHooks['item']['begin-left'].join('')"/>
v-html="getBeginLeftForm"/>
</template>
<!-- Document -------------------------------- -->
@ -257,14 +254,11 @@
</template>
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['item'] != undefined &&
formHooks['item']['end-left'] != undefined">
<template v-if="hasEndLeftForm">
<form
id="form-item-end-left"
class="form-hook-region"
v-html="formHooks['item']['end-left'].join('')"/>
v-html="getEndLeftForm"/>
</template>
<!-- Attachments ------------------------------------------ -->
@ -323,14 +317,11 @@
</template>
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['item'] != undefined &&
formHooks['item']['begin-right'] != undefined">
<template v-if="hasBeginRightForm">
<form
id="form-item-begin-right"
class="form-hook-region"
v-html="formHooks['item']['begin-right'].join('')"/>
v-html="getBeginRightForm"/>
</template>
<!-- Comment Status ------------------------ -->
@ -393,14 +384,11 @@
</template>
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
formHooks['item'] != undefined &&
formHooks['item']['end-right'] != undefined">
<template v-if="hasEndRightForm">
<form
id="form-item-end-right"
class="form-hook-region"
v-html="formHooks['item']['end-right'].join('')"/>
v-html="getEndRightForm"/>
</template>
<!-- Google reCAPTCHA -->