Checks cardinality before displaying options to add new values on metadata inputs. #568

This commit is contained in:
mateuswetah 2021-08-26 12:08:57 -03:00
parent 1039a86d4f
commit 108a3d3baa
7 changed files with 33 additions and 11 deletions

View File

@ -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" />

View File

@ -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() {

View File

@ -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 );

View File

@ -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: {

View File

@ -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"

View File

@ -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 {

View File

@ -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,