diff options
author | Richard Steinmetz <richard@steinmetz.cloud> | 2022-10-07 10:53:47 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-10-07 10:53:47 +0300 |
commit | dbd4309cbcb5b18c8ace44b5b6bf4df652aa393f (patch) | |
tree | 57eb465ac8b15f8d9fd39917411c0da11d43895b | |
parent | 55a1fd69db604bee68b454025b71657111bd5083 (diff) | |
parent | f2208c01cc1b2e442b45de553fca23c77f9d4e98 (diff) |
Merge pull request #4582 from nextcloud/backport/3944/stable3.5
[stable3.5] Fix category selection
-rw-r--r-- | src/components/Editor/Properties/PropertySelectMultiple.vue | 60 | ||||
-rw-r--r-- | src/components/Editor/Properties/PropertySelectMultipleColoredTag.vue | 15 |
2 files changed, 64 insertions, 11 deletions
diff --git a/src/components/Editor/Properties/PropertySelectMultiple.vue b/src/components/Editor/Properties/PropertySelectMultiple.vue index 651360b4..f7459095 100644 --- a/src/components/Editor/Properties/PropertySelectMultiple.vue +++ b/src/components/Editor/Properties/PropertySelectMultiple.vue @@ -32,19 +32,19 @@ <div class="property-select-multiple__input" :class="{ 'property-select-multiple__input--readonly': isReadOnly }"> <Multiselect v-if="!isReadOnly" + v-model="selectionData" :options="options" :searchable="true" :placeholder="placeholder" :tag-placeholder="tagPlaceholder" :allow-empty="true" :title="readableName" - :value="value" :multiple="true" :taggable="true" - track-by="value" + track-by="label" label="label" @select="selectValue" - @tag="selectValue" + @tag="tag" @remove="unselectValue"> <template v-if="coloredOptions" #tag="scope"> <PropertySelectMultipleColoredTag v-bind="scope" /> @@ -100,24 +100,43 @@ export default { default: false, }, }, + data() { + return { + selectionData: [], + } + }, computed: { display() { - return !(this.isReadOnly && this.value.length === 0) + return !(this.isReadOnly && this.selectionData.length === 0) }, options() { const options = this.propModel.options.slice() - for (const value of (this.value ?? [])) { - if (options.find(option => option.value === value)) { + for (const category of (this.selectionData ?? [])) { + if (options.find(option => option.value === category.value)) { continue } // Add pseudo options for unknown values options.push({ - value, - label: value, + value: category.value, + label: category.label, }) } + for (const category of this.value) { + if (!options.find(option => option.value === category)) { + options.push({ value: category, label: category }) + } + } + + if (this.customLabelBuffer) { + for (const category of this.customLabelBuffer) { + if (!options.find(option => option.value === category.value)) { + options.push(category) + } + } + } + return options .sort((a, b) => { return a.label.localeCompare( @@ -128,6 +147,14 @@ export default { }) }, }, + created() { + for (const category of this.value) { + const option = this.options.find(option => option.value === category) + if (option) { + this.selectionData.push(option) + } + } + }, methods: { selectValue(value) { if (!value) { @@ -142,6 +169,23 @@ export default { } this.$emit('remove-single-value', value.value) + + // store removed custom options to keep it in the option list + const options = this.propModel.options.slice() + if (!options.find(option => option.value === value.value)) { + if (!this.customLabelBuffer) { + this.customLabelBuffer = [] + } + this.customLabelBuffer.push(value) + } + }, + tag(value) { + if (!value) { + return + } + + this.selectionData.push({ value, label: value }) + this.$emit('add-single-value', value) }, }, } diff --git a/src/components/Editor/Properties/PropertySelectMultipleColoredTag.vue b/src/components/Editor/Properties/PropertySelectMultipleColoredTag.vue index d27a46e6..867e2abd 100644 --- a/src/components/Editor/Properties/PropertySelectMultipleColoredTag.vue +++ b/src/components/Editor/Properties/PropertySelectMultipleColoredTag.vue @@ -24,7 +24,7 @@ <template> <span class="multiselect__tag" :style="{ 'background-color': color, 'border-color': borderColor, color: textColor }"> - <span>{{ option }}</span> + <span>{{ label }}</span> </span> </template> @@ -36,7 +36,7 @@ export default { name: 'PropertySelectMultipleColoredTag', props: { option: { - type: String, + type: [String, Object], required: true, }, search: { @@ -49,8 +49,17 @@ export default { }, }, computed: { + label() { + if (typeof this.option === 'string') { + return this.option + } + return this.option.label + }, colorObject() { - return uidToColor(this.option) + if (typeof this.option === 'string') { + return uidToColor(this.option) + } + return uidToColor(this.option.label) }, borderColor() { const color = this.colorObject |