Add support for categories

css/app-sidebar.scss

@@ -459,6 +459,7 @@
 
 	.property-text,
 	.property-select,
+	.property-select-multiple,
 	.property-title {
 		display: flex;
 		width: 100%;
@@ -515,6 +516,31 @@
 		}
 	}
 
+	.property-select-multiple {
+		.property-select-multiple__input.property-select-multiple__input--readonly {
+			width: 100%;
+
+			.property-select-multiple-colored-tag-wrapper {
+				align-items: center;
+				overflow: hidden;
+				max-width: 100%;
+				position: relative;
+				padding: 3px 5px;
+
+				.multiselect__tag {
+					line-height: 20px;
+					padding: 1px 5px;
+					background-image: none;
+					display: inline-flex;
+					align-items: center;
+					border-radius: 3px;
+					max-width: fit-content;
+					margin: 3px;
+				}
+			}
+		}
+	}
+
 	.property-title {
 		&__input,
 		&__input input {
@@ -632,3 +658,17 @@
 		margin-left: auto;
 	}
 }
+
+.property-select-multiple-colored-tag {
+	width: 100%;
+	display: flex;
+	align-items: center;
+
+	&__color-indicator {
+		width: 12px;
+		height: 12px;
+		border-radius: 50%;
+		border: none;
+		margin-right: 8px;
+	}
+}

package.json

@@ -54,6 +54,7 @@
 		"color-convert": "^2.0.1",
 		"debounce": "^1.2.0",
 		"jstz": "^2.1.1",
+		"md5": "^2.2.1",
 		"p-limit": "^2.2.1",
 		"p-queue": "^6.2.0",
 		"uuid": "^3.3.3",

src/components/Editor/Properties/PropertySelectMultiple.vue

@@ -0,0 +1,117 @@
+<!--
+  - @copyright Copyright (c) 2019 Georg Ehrke <[email protected]>
+  -
+  - @author Georg Ehrke <[email protected]>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div v-if="display" class="property-select-multiple">
+		<div
+			class="property-select-multiple__icon"
+			:class="icon"
+			:title="readableName" />
+
+		<div
+			class="property-select-multiple__input"
+			:class="{ 'property-select-multiple__input--readonly': isReadOnly }">
+			<Multiselect
+				v-if="!isReadOnly"
+				:options="options"
+				:searchable="true"
+				:placeholder="placeholder"
+				:tag-placeholder="tagPlaceholder"
+				:allow-empty="true"
+				:title="readableName"
+				:value="value"
+				:multiple="true"
+				:taggable="true"
+				@select="selectValue"
+				@tag="selectValue"
+				@remove="unselectValue">
+				<template v-if="coloredOptions" #tag="scope">
+					<PropertySelectMultipleColoredTag v-bind="scope" />
+				</template>
+				<template v-if="coloredOptions" #option="scope">
+					<PropertySelectMultipleColoredOption v-bind="scope" />
+				</template>
+			</Multiselect>
+			<!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+			<div v-else class="property-select-multiple-colored-tag-wrapper">
+				<PropertySelectMultipleColoredTag
+					v-for="singleValue in value"
+					:key="singleValue"
+					:option="singleValue" />
+			</div>
+		</div>
+
+		<div
+			v-if="hasInfo"
+			v-tooltip="info"
+			class="property-select-multiple__info icon-details" />
+	</div>
+</template>
+
+<script>
+import PropertyMixin from '../../../mixins/PropertyMixin'
+import { Multiselect } from '@nextcloud/vue'
+import PropertySelectMultipleColoredTag from './PropertySelectMultipleColoredTag.vue'
+import PropertySelectMultipleColoredOption from './PropertySelectMultipleColoredOption.vue'
+
+export default {
+	name: 'PropertySelectMultiple',
+	components: {
+		PropertySelectMultipleColoredOption,
+		PropertySelectMultipleColoredTag,
+		Multiselect
+	},
+	mixins: [
+		PropertyMixin
+	],
+	props: {
+		coloredOptions: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		display() {
+			return !(this.isReadOnly && this.value.length === 0)
+		},
+		options() {
+			return this.propModel.options
+		}
+	},
+	methods: {
+		selectValue(value) {
+			if (!value) {
+				return
+			}
+
+			this.$emit('addSingleValue', value)
+		},
+		unselectValue(value) {
+			if (!value) {
+				return
+			}
+
+			this.$emit('removeSingleValue', value)
+		}
+	}
+}
+</script>

src/components/Editor/Properties/PropertySelectMultipleColoredOption.vue

@@ -0,0 +1,51 @@
+<!--
+  - @copyright Copyright (c) 2019 Georg Ehrke <[email protected]>
+  -
+  - @author Georg Ehrke <[email protected]>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<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>
+</template>
+
+<script>
+import { uidToColor } from '../../../utils/uidToColor.js'
+
+export default {
+	name: 'PropertySelectMultipleColoredOption',
+	props: {
+		option: {
+			type: String,
+			required: true
+		}
+	},
+	computed: {
+		colorObject() {
+			return uidToColor(this.option)
+		},
+		color() {
+			const color = this.colorObject
+			return `rgb(${color.r},${color.g},${color.b})`
+		}
+	}
+}
+</script>

src/components/Editor/Properties/PropertySelectMultipleColoredTag.vue

@@ -0,0 +1,71 @@
+<!--
+  - @copyright Copyright (c) 2019 Georg Ehrke <[email protected]>
+  -
+  - @author Georg Ehrke <[email protected]>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<span :key="option" class="multiselect__tag" :style="{ 'background-color': color, 'border-color': borderColor, color: textColor }">
+		<span>{{ option }}</span>
+	</span>
+</template>
+
+<script>
+import { uidToColor } from '../../../utils/uidToColor.js'
+import { generateTextColorForRGB } from '../../../utils/color.js'
+
+export default {
+	name: 'PropertySelectMultipleColoredTag',
+	props: {
+		option: {
+			type: String,
+			required: true
+		},
+		search: {
+			type: String,
+			default: undefined
+		},
+		remove: {
+			type: Function,
+			default: () => {}
+		}
+	},
+	computed: {
+		colorObject() {
+			return uidToColor(this.option)
+		},
+		borderColor() {
+			const color = this.colorObject
+			return `rgb(${color.r},${color.g},${color.b})`
+		},
+		color() {
+			const color = this.colorObject
+			return `rgba(${color.r},${color.g},${color.b},0.7)`
+		},
+		textColor() {
+			const color = this.colorObject
+			return generateTextColorForRGB({
+				red: color.r,
+				green: color.g,
+				blue: color.b
+			})
+		}
+	}
+}
+</script>

src/defaults/defaultCategories.js

@@ -0,0 +1,43 @@
+/**
+ * Calendar App
+ *
+ * @copyright 2019 Georg Ehrke <[email protected]>
+ *
+ * @author Georg Ehrke
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU AFFERO GENERAL PUBLIC LICENSE for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this library.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+import { translate } from '@nextcloud/l10n'
+
+export default () => {
+	// This list was taken from https://tools.ietf.org/html/rfc5545#section-5
+	return [
+		translate('calendar', 'Anniversary'),
+		translate('calendar', 'Appointment'),
+		translate('calendar', 'Business'),
+		translate('calendar', 'Education'),
+		translate('calendar', 'Holiday'),
+		translate('calendar', 'Meeting'),
+		translate('calendar', 'Miscellaneous'),
+		translate('calendar', 'Non-working hours'),
+		translate('calendar', 'Not in office'),
+		translate('calendar', 'Personal'),
+		translate('calendar', 'Phone call'),
+		translate('calendar', 'Sick day'),
+		translate('calendar', 'Special occasion'),
+		translate('calendar', 'Travel'),
+		translate('calendar', 'Vacation')
+	]
+}

src/mixins/PropertyMixin.js

@@ -48,6 +48,9 @@ export default {
 		placeholder() {
 			return this.propModel.placeholder || ''
 		},
+		tagPlaceholder() {
+			return this.propModel.tagPlaceholder || ''
+		},
 		info() {
 			return this.propModel.info || ''
 		},

src/models/rfcProps.js

@@ -20,6 +20,7 @@
  *
  */
 import { translate } from '@nextcloud/l10n'
+import getDefaultCategories from '../defaults/defaultCategories.js'
 
 export default {
 	// RFC 5545
@@ -116,11 +117,13 @@ export default {
 	// },
 	categories: {
 		readableName: translate('calendar', 'Categories'),
-		icon: '',
+		icon: 'icon-tag',
 		multiple: true,
 		default: true,
-		info: translate('calendar', '')
-
+		info: translate('calendar', 'Categories help you to structure and organize your events'),
+		placeholder: translate('calendar', 'Search or add categories'),
+		tagPlaceholder: translate('calendar', 'Add this as a new category'),
+		options: getDefaultCategories()
 	},
 	resources: {
 		readableName: translate('calendar', 'Additional resources'),