From 364a32ac26b4dc6892429fb9b656fa802d0f47a4 Mon Sep 17 00:00:00 2001
From: Georg Ehrke <developer@georgehrke.com>
Date: Mon, 20 Jan 2020 16:27:29 +0100
Subject: [PATCH] Show self-added categories in list, making it easier to
 remove them

Signed-off-by: Georg Ehrke <developer@georgehrke.com>
---
 .../Editor/Properties/PropertySelectMultiple.vue    | 12 +++++++++++-
 .../PropertySelectMultipleColoredOption.vue         | 13 ++++++++++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/Editor/Properties/PropertySelectMultiple.vue b/src/components/Editor/Properties/PropertySelectMultiple.vue
index 5b00b6e70..ae975992d 100644
--- a/src/components/Editor/Properties/PropertySelectMultiple.vue
+++ b/src/components/Editor/Properties/PropertySelectMultiple.vue
@@ -95,7 +95,17 @@ export default {
 			return !(this.isReadOnly && this.value.length === 0)
 		},
 		options() {
-			return this.propModel.options.slice().sort((a, b) => a.localeCompare(b, getLocale().replace('_', '-'), { sensitivity: 'base' }))
+			const options = this.propModel.options.slice()
+			for (const value of (this.value || [])) {
+				if (options.includes(value)) {
+					continue
+				}
+
+				options.push(value)
+			}
+
+			return options
+				.sort((a, b) => a.localeCompare(b, getLocale().replace('_', '-'), { sensitivity: 'base' }))
 		},
 	},
 	methods: {
diff --git a/src/components/Editor/Properties/PropertySelectMultipleColoredOption.vue b/src/components/Editor/Properties/PropertySelectMultipleColoredOption.vue
index fcd3d7697..9f84a7b8b 100644
--- a/src/components/Editor/Properties/PropertySelectMultipleColoredOption.vue
+++ b/src/components/Editor/Properties/PropertySelectMultipleColoredOption.vue
@@ -23,7 +23,7 @@
 <template>
 	<span class="property-select-multiple-colored-tag">
 		<div class="property-select-multiple-colored-tag__color-indicator" :style="{ 'background-color': color}" />
-		<span class="property-select-multiple-colored-tag__label">{{ option }}</span>
+		<span class="property-select-multiple-colored-tag__label">{{ label }}</span>
 	</span>
 </template>
 
@@ -34,13 +34,20 @@ export default {
 	name: 'PropertySelectMultipleColoredOption',
 	props: {
 		option: {
-			type: String,
+			type: [String, Object],
 			required: true,
 		},
 	},
 	computed: {
+		label() {
+			if (typeof this.option === 'string') {
+				return this.option
+			}
+
+			return this.option.label
+		},
 		colorObject() {
-			return uidToColor(this.option)
+			return uidToColor(this.label)
 		},
 		color() {
 			const color = this.colorObject