Merge pull request #639 from tainacan/feature/637

Option to set metadata input placeholders - Feature/637
This commit is contained in:
Mateus Machado Luna 2021-11-22 15:02:58 -03:00 committed by GitHub
commit 726311ba8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 87 additions and 23 deletions

View File

@ -14,6 +14,7 @@ class Metadatum extends Entity {
$order,
$parent,
$description,
$placeholder,
$required,
$multiple,
$display,
@ -111,6 +112,15 @@ class Metadatum extends Entity {
return $this->get_mapped_property('description');
}
/**
* Return the metadatum placeholder
*
* @return string
*/
function get_placeholder() {
return $this->get_mapped_property('placeholder');
}
/**
* Return if is a required metadatum
*
@ -288,6 +298,16 @@ class Metadatum extends Entity {
$this->set_mapped_property('description', $value);
}
/**
* Set metadatum placeholder
*
* @param [string] $value The text placeholder
* @return void
*/
function set_placeholder($value) {
$this->set_mapped_property('placeholder', $value);
}
/**
* Allow the metadatum be required
*

View File

@ -92,6 +92,13 @@ class Metadata extends Repository {
//'on_error' => __('The description should be a text value', 'tainacan'),
//'validation' => v::stringType()->notEmpty(),
],
'placeholder' => [
'map' => 'meta',
'title' => __( 'Placeholder', 'tainacan' ),
'type' => 'string',
'description' => __( 'The metadatum placeholder. This is a simple message that will appear inside textual input and may indicate to the user what kind of information is expected.', 'tainacan' ),
'default' => '',
],
'metadata_type' => [
'map' => 'meta',
'title' => __( 'Type', 'tainacan' ),
@ -736,21 +743,19 @@ class Metadata extends Repository {
private function get_data_core_metadata( Entities\Collection $collection ) {
return $data_core_metadata = [
'core_description' => [
'name' => 'Description',
'description' => 'description',
'collection_id' => $collection->get_id(),
'metadata_type' => 'Tainacan\Metadata_Types\Core_Description',
'status' => 'publish',
],
'core_title' => [
'name' => 'Title',
'description' => 'title',
'name' => __('Title', 'tainacan'),
'collection_id' => $collection->get_id(),
'metadata_type' => 'Tainacan\Metadata_Types\Core_Title',
'status' => 'publish',
'display' => 'yes',
],
'core_description' => [
'name' => __('Description', 'tainacan'),
'collection_id' => $collection->get_id(),
'metadata_type' => 'Tainacan\Metadata_Types\Core_Description',
'status' => 'publish',
]
];
}

View File

@ -70,6 +70,23 @@
@focus="clearErrors('description')"/>
</b-field>
<b-field
v-if="editForm.metadata_type_object.component != 'tainacan-compound'"
:addons="false"
:type="formErrors['placeholder'] != undefined ? 'is-danger' : ''"
:message="formErrors['placeholder'] != undefined ? formErrors['placeholder'] : ''">
<label class="label is-inline">
{{ $i18n.getHelperTitle('metadata', 'placeholder') }}
<help-button
:title="$i18n.getHelperTitle('metadata', 'placeholder')"
:message="$i18n.getHelperMessage('metadata', 'placeholder')"/>
</label>
<b-input
v-model="editForm.placeholder"
name="placeholder"
@focus="clearErrors('placeholder')"/>
</b-field>
<b-field
v-if="editForm.parent == 0"
:addons="false"

View File

@ -55,6 +55,7 @@
v-show="(metadataNameFilterString == '' || filterByMetadatumName(childItemMetadatum))"
:key="groupIndex + '-' + childIndex"
:item-metadatum="childItemMetadatum"
:hide-collapses="hideCollapses"
:is-collapsed="childItemMetadatum.collapse"
@changeCollapse="onChangeCollapse($event, groupIndex, childIndex)"
:class="{ 'is-last-input': childIndex == childItemMetadata.length - 1}"
@ -107,6 +108,7 @@
itemMetadatum: Object,
value: [String, Number, Array],
disabled: false,
hideCollapses: false,
metadataNameFilterString: ''
},
data() {

View File

@ -3,14 +3,13 @@
<b-input
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:disabled="disabled"
class="input"
:class="{'is-danger': isInvalidDate && dateValue}"
type="text"
v-mask="dateMask"
v-model="dateValue"
@input.native="onInput"
@blur="onBlur"
:placeholder="dateFormat.toLowerCase()" />
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : dateFormat.toLowerCase()" />
<p
v-if="isInvalidDate && dateValue"
style="font-size: 0.75em;"

View File

@ -2,6 +2,7 @@
<b-input
:disabled="disabled"
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
:value="value"
@input="onInput($event)"
@blur="onBlur"

View File

@ -22,7 +22,7 @@
:remove-on-keys="[]"
:dropdown-position="isLastMetadatum ? 'top' :'auto'"
attached
:placeholder="$i18n.get('instruction_type_existing_item')"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : $i18n.get('instruction_type_existing_item')"
:loading="isLoading"
:aria-close-label="$i18n.get('remove_value')"
:class="{'has-selected': selected != undefined && selected != []}"

View File

@ -3,10 +3,10 @@
expanded
:disabled="disabled"
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:placeholder="$i18n.get('label_selectbox_init')"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : $i18n.get('label_selectbox_init')"
:value="value"
@input="onSelected($event)">
<option value="">{{ $i18n.get('label_selectbox_init') }}...</option>
<option value="">{{ itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ($i18n.get('label_selectbox_init') + '...') }}</option>
<option
v-for="(option, index) in getOptions"
:key="index"

View File

@ -52,7 +52,8 @@
:item-metadatum="itemMetadatum"
@input="changeValue"
@blur="performValueChange"
:metadata-name-filter-string="metadataNameFilterString" />
:metadata-name-filter-string="metadataNameFilterString"
:hide-collapses="hideCollapses" />
<template v-if="isMultiple && values.length > 1">
<transition-group
name="filter-item"
@ -66,7 +67,8 @@
:item-metadatum="itemMetadatum"
@input="changeValue"
@blur="performValueChange"
:metadata-name-filter-string="metadataNameFilterString" />
:metadata-name-filter-string="metadataNameFilterString"
:hide-collapses="hideCollapses" />
<a
v-if="index > 0"
@click="removeValue(index)"
@ -109,6 +111,7 @@
@input="changeValue"
@blur="performValueChange"
:is-last-metadatum="isLastMetadatum"
:hide-collapses="hideCollapses"
:metadata-name-filter-string="metadataNameFilterString" />
</div>
</transition>

View File

@ -8,6 +8,7 @@
v-model="valueComponent"
:allow-select-to-create="allowSelectToCreate"
:allow-new="allowNewFromOptions"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : $i18n.get('instruction_type_existing_term')"
:taxonomy-id="taxonomyId"
:item-metadatum="itemMetadatum"
@showAddNewTerm="openTermCreationModal"

View File

@ -17,7 +17,7 @@
attached
ellipsis
:aria-close-label="$i18n.get('remove_value')"
:placeholder="$i18n.get('instruction_type_existing_term')"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : $i18n.get('instruction_type_existing_term')"
:loading="isFetching"
:class="{ 'has-selected': selected != undefined && selected != [] }"
autocomplete

View File

@ -5,6 +5,7 @@
:disabled="disabled"
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:value="value"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
@input="onInput($event)"
@blur="onBlur"/>
<b-autocomplete
@ -19,6 +20,7 @@
field="label"
@select="onSelect"
clearable
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
check-infinite-scroll
@infinite-scroll="searchMore">
<template #header>

View File

@ -2,6 +2,7 @@
<b-input
:disabled="disabled"
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
:value="value"
@input="onInput($event)"
@blur="onBlur"

View File

@ -13,7 +13,7 @@
:maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? (maxMultipleValues !== undefined ? maxMultipleValues : null) : 1)"
autocomplete
attached
:placeholder="$i18n.get('instruction_type_search_users')"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : $i18n.get('instruction_type_search_users')"
keep-first
open-on-focus
:remove-on-keys="[]"

View File

@ -30,7 +30,7 @@
<b-input
expanded
autocomplete="on"
:placeholder="expandResultsSection ? $i18n.get('instruction_search') : $i18n.get('instruction_click_to_see_or_search')"
:placeholder="metadatum.placeholder ? metadatum.placeholder : ( expandResultsSection ? $i18n.get('instruction_search') : $i18n.get('instruction_click_to_see_or_search') )"
:aria-label="expandResultsSection ? $i18n.get('instruction_search') : $i18n.get('instruction_click_to_see_or_search')"
v-model="optionName"
@input="autoComplete"

View File

@ -68,22 +68,35 @@
order: -1;
}
p.control:first-child .button {
border-right: none;
border-right-width: 0px;
}
p.control:last-child .button {
border-left: none;
border-left-width: 0px;
}
button,
input {
height: auto !important;
text-align: start;
}
button.is-primary:disabled,
button.is-primary:disabled:hover,
button.is-primary:disabled:focus,
button.is-primary:disabled:active {
background-color: var(--tainacan-input-border-color) !important;
}
button.is-primary:not(:disabled),
button.is-primary:not(:disabled):hover,
button.is-primary:not(:disabled):focus,
button.is-primary:not(:disabled):active {
background-color: var(--tainacan-input-background-color) !important;
}
button.is-primary,
button.is-primary:hover,
button.is-primary:focus,
button.is-primary:active {
border: 1px solid var(--tainacan-input-border-color);
background-color: var(--tainacan-input-background-color) !important;
border-width: 1px;
border-style: solid;
border-color: var(--tainacan-input-border-color) !important;
color: var(--tainacan-secondary) !important;
padding: 0.25em 0.6em !important;
border-radius: 0 !important;