Checks cardinality before displaying options to add new values on metadata inputs. #568
This commit is contained in:
parent
1039a86d4f
commit
108a3d3baa
|
@ -194,7 +194,7 @@
|
||||||
</b-field>
|
</b-field>
|
||||||
|
|
||||||
<b-field
|
<b-field
|
||||||
v-if="editForm.multiple == 'yes' && !originalMetadatum.metadata_type_object.core && editForm.parent == 0"
|
v-if="!originalMetadatum.metadata_type_object.core && editForm.parent == 0"
|
||||||
:type="formErrors['cardinality'] != undefined ? 'is-danger' : ''"
|
:type="formErrors['cardinality'] != undefined ? 'is-danger' : ''"
|
||||||
:message="formErrors['cardinality'] != undefined ? formErrors['cardinality'] : ''"
|
:message="formErrors['cardinality'] != undefined ? formErrors['cardinality'] : ''"
|
||||||
:addons="false">
|
:addons="false">
|
||||||
|
@ -205,6 +205,7 @@
|
||||||
:message="$i18n.getHelperMessage('metadata', 'cardinality')"/>
|
:message="$i18n.getHelperMessage('metadata', 'cardinality')"/>
|
||||||
</label>
|
</label>
|
||||||
<b-input
|
<b-input
|
||||||
|
:disabled="editForm.multiple != 'yes'"
|
||||||
name="cardinality"
|
name="cardinality"
|
||||||
type="number"
|
type="number"
|
||||||
step="1" />
|
step="1" />
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
@input="onInput"
|
@input="onInput"
|
||||||
@blur="onBlur"
|
@blur="onBlur"
|
||||||
:data="options"
|
:data="options"
|
||||||
:maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? null : 1)"
|
:maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? (maxMultipleValues !== undefined ? maxMultipleValues : null) : 1)"
|
||||||
autocomplete
|
autocomplete
|
||||||
:remove-on-keys="[]"
|
:remove-on-keys="[]"
|
||||||
:dropdown-position="isLastMetadatum ? 'top' :'auto'"
|
:dropdown-position="isLastMetadatum ? 'top' :'auto'"
|
||||||
|
@ -52,7 +52,7 @@
|
||||||
</template>
|
</template>
|
||||||
</b-taginput>
|
</b-taginput>
|
||||||
<a
|
<a
|
||||||
v-if="currentUserCanEditItems && itemMetadatum.item && itemMetadatum.item.id"
|
v-if="currentUserCanEditItems && itemMetadatum.item && itemMetadatum.item.id && (maxMultipleValues === undefined || maxMultipleValues > selected.length)"
|
||||||
:disabled="!$route || $route.query.iframemode"
|
:disabled="!$route || $route.query.iframemode"
|
||||||
@click="createNewItemModal = !createNewItemModal"
|
@click="createNewItemModal = !createNewItemModal"
|
||||||
class="add-link">
|
class="add-link">
|
||||||
|
@ -105,7 +105,10 @@
|
||||||
computed: {
|
computed: {
|
||||||
collection() {
|
collection() {
|
||||||
return this.getCollection();
|
return this.getCollection();
|
||||||
}
|
},
|
||||||
|
maxMultipleValues() {
|
||||||
|
return (this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.cardinality && !isNaN(this.itemMetadatum.metadatum.cardinality)) ? this.itemMetadatum.metadatum.cardinality : undefined;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
createNewItemModal() {
|
createNewItemModal() {
|
||||||
|
|
|
@ -83,7 +83,7 @@
|
||||||
</template>
|
</template>
|
||||||
</transition-group>
|
</transition-group>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="isMultiple">
|
<template v-if="isMultiple && (maxMultipleValues === undefined || maxMultipleValues - 1 > values.length)">
|
||||||
<a
|
<a
|
||||||
@click="addValue"
|
@click="addValue"
|
||||||
class="is-inline-block add-link">
|
class="is-inline-block add-link">
|
||||||
|
@ -144,6 +144,9 @@
|
||||||
isMultiple() {
|
isMultiple() {
|
||||||
return (this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.multiple == 'yes') ? this.itemMetadatum.metadatum.multiple == 'yes' : false;
|
return (this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.multiple == 'yes') ? this.itemMetadatum.metadatum.multiple == 'yes' : false;
|
||||||
},
|
},
|
||||||
|
maxMultipleValues() {
|
||||||
|
return (this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.cardinality && !isNaN(this.itemMetadatum.metadatum.cardinality)) ? this.itemMetadatum.metadatum.cardinality : undefined;
|
||||||
|
},
|
||||||
isTextInputComponent() {
|
isTextInputComponent() {
|
||||||
const array = ['tainacan-relationship','tainacan-taxonomy', 'tainacan-compound', 'tainacan-user'];
|
const array = ['tainacan-relationship','tainacan-taxonomy', 'tainacan-compound', 'tainacan-user'];
|
||||||
return !(array.indexOf(this.metadatumComponent) >= 0 );
|
return !(array.indexOf(this.metadatumComponent) >= 0 );
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
v-if="getComponent == 'tainacan-taxonomy-tag-input'"
|
v-if="getComponent == 'tainacan-taxonomy-tag-input'"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
:is="getComponent"
|
:is="getComponent"
|
||||||
:maxtags="maxtags"
|
:maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? (maxMultipleValues !== undefined ? maxMultipleValues : null) : 1)"
|
||||||
v-model="valueComponent"
|
v-model="valueComponent"
|
||||||
:allow-select-to-create="allowSelectToCreate"
|
:allow-select-to-create="allowSelectToCreate"
|
||||||
:allow-new="allowNew"
|
:allow-new="allowNew"
|
||||||
|
@ -25,6 +25,7 @@
|
||||||
:taxonomy="taxonomy"
|
:taxonomy="taxonomy"
|
||||||
:collection-id="itemMetadatum.metadatum.collection_id"
|
:collection-id="itemMetadatum.metadatum.collection_id"
|
||||||
:is-taxonomy="true"
|
:is-taxonomy="true"
|
||||||
|
:max-multiple-values="maxMultipleValues"
|
||||||
:metadatum="itemMetadatum.metadatum"
|
:metadatum="itemMetadatum.metadatum"
|
||||||
:amount-selected="Array.isArray(valueComponent) ? valueComponent.length : (valueComponent ? '1' : '0')"
|
:amount-selected="Array.isArray(valueComponent) ? valueComponent.length : (valueComponent ? '1' : '0')"
|
||||||
:is-checkbox="getComponent == 'tainacan-taxonomy-checkbox'"
|
:is-checkbox="getComponent == 'tainacan-taxonomy-checkbox'"
|
||||||
|
@ -106,7 +107,10 @@
|
||||||
return '';
|
return '';
|
||||||
},
|
},
|
||||||
displayCreateNewTerm() {
|
displayCreateNewTerm() {
|
||||||
return this.allowNew;
|
return this.allowNew && (this.maxMultipleValues === undefined || this.maxMultipleValues > this.value.length);
|
||||||
|
},
|
||||||
|
maxMultipleValues() {
|
||||||
|
return (this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.cardinality && !isNaN(this.itemMetadatum.metadatum.cardinality)) ? this.itemMetadatum.metadatum.cardinality : undefined;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
|
|
@ -7,7 +7,6 @@
|
||||||
size="is-small"
|
size="is-small"
|
||||||
icon="magnify"
|
icon="magnify"
|
||||||
:allow-new="false"
|
:allow-new="false"
|
||||||
:maxtags="maxtags"
|
|
||||||
@add="emitAdd"
|
@add="emitAdd"
|
||||||
@remove="emitRemove"
|
@remove="emitRemove"
|
||||||
v-model="selected"
|
v-model="selected"
|
||||||
|
|
|
@ -66,7 +66,8 @@
|
||||||
<label
|
<label
|
||||||
v-if="isCheckbox"
|
v-if="isCheckbox"
|
||||||
class="b-checkbox checkbox">
|
class="b-checkbox checkbox">
|
||||||
<input
|
<input
|
||||||
|
:disabled="(selected.indexOf((isNaN(Number(option.value)) ? option.value : Number(option.value))) < 0) && maxMultipleValues !== undefined && maxMultipleValues - 1 < selected.length"
|
||||||
v-model="selected"
|
v-model="selected"
|
||||||
:value="option.id ? (isNaN(Number(option.id)) ? option.id : Number(option.id)) : (isNaN(Number(option.value)) ? option.value : Number(option.value))"
|
:value="option.id ? (isNaN(Number(option.id)) ? option.id : Number(option.id)) : (isNaN(Number(option.value)) ? option.value : Number(option.value))"
|
||||||
type="checkbox">
|
type="checkbox">
|
||||||
|
@ -144,6 +145,7 @@
|
||||||
:key="key">
|
:key="key">
|
||||||
<label class="b-checkbox checkbox">
|
<label class="b-checkbox checkbox">
|
||||||
<input
|
<input
|
||||||
|
:disabled="(selected.indexOf((isNaN(Number(option.value)) ? option.value : Number(option.value))) < 0) && maxMultipleValues !== undefined && maxMultipleValues - 1 < selected.length"
|
||||||
v-model="selected"
|
v-model="selected"
|
||||||
:value="option.value"
|
:value="option.value"
|
||||||
type="checkbox">
|
type="checkbox">
|
||||||
|
@ -198,6 +200,7 @@
|
||||||
v-if="isCheckbox"
|
v-if="isCheckbox"
|
||||||
class="b-checkbox checkbox">
|
class="b-checkbox checkbox">
|
||||||
<input
|
<input
|
||||||
|
:disabled="(selected.indexOf((isNaN(Number(option.value)) ? option.value : Number(option.value))) < 0) && maxMultipleValues !== undefined && maxMultipleValues - 1 < selected.length"
|
||||||
v-model="selected"
|
v-model="selected"
|
||||||
:value="(isNaN(Number(option.value)) ? option.value : Number(option.value))"
|
:value="(isNaN(Number(option.value)) ? option.value : Number(option.value))"
|
||||||
type="checkbox">
|
type="checkbox">
|
||||||
|
@ -340,7 +343,8 @@
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
amountSelected: 0
|
amountSelected: 0,
|
||||||
|
maxMultipleValues: undefined
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -11,10 +11,18 @@
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border: 1px solid var(--tainacan-gray4);
|
|
||||||
transition: background 150ms ease-out;
|
transition: background 150ms ease-out;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 1px;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
}
|
}
|
||||||
|
input[type="checkbox"]:not([disabled=disabled]) + .check {
|
||||||
|
border-color: var(--tainacan-gray4);
|
||||||
|
}
|
||||||
|
input[type="checkbox"][disabled=disabled] + .check {
|
||||||
|
border-color: var(--tainacan-gray2);
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
&:focus input[type="checkbox"] + .check,
|
&:focus input[type="checkbox"] + .check,
|
||||||
&:active input[type="checkbox"] + .check,
|
&:active input[type="checkbox"] + .check,
|
||||||
|
|
Loading…
Reference in New Issue