From 52f260166b5f7a88a75bef7534cf5428e7d4de06 Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Mon, 31 Jul 2023 20:33:31 +0200
Subject: [PATCH] [stable7] enh(emoji-picker): allow unselecting set emoji

Backport of #4381.

In collectives pages optionally have an emoji set.
Once this is set there is currently no way to remove it.

Enhance the emoji picker to show the currently selected emoji
and enable unselecting it to clear the previous selection.

See also:
* https://github.com/nextcloud/collectives/issues/422
* https://github.com/serebrov/emoji-mart-vue/issues/253#issuecomment-1585978632

Signed-off-by: Max <max@nextcloud.com>
---
 l10n/messages.pot                             |  3 +
 .../NcEmojiPicker/NcEmojiPicker.vue           | 93 ++++++++++++++++++-
 2 files changed, 95 insertions(+), 1 deletion(-)

diff --git a/l10n/messages.pot b/l10n/messages.pot
index 3777dab333..47ffa24798 100644
--- a/l10n/messages.pot
+++ b/l10n/messages.pot
@@ -200,6 +200,9 @@ msgstr ""
 msgid "Select provider"
 msgstr ""
 
+msgid "Selected"
+msgstr ""
+
 msgid "Settings"
 msgstr ""
 
diff --git a/src/components/NcEmojiPicker/NcEmojiPicker.vue b/src/components/NcEmojiPicker/NcEmojiPicker.vue
index 6df762c30e..603dc2d50b 100644
--- a/src/components/NcEmojiPicker/NcEmojiPicker.vue
+++ b/src/components/NcEmojiPicker/NcEmojiPicker.vue
@@ -84,6 +84,43 @@ This component allows the user to pick an emoji.
 	}
 </script>
 ```
+
+* Allow unselecting a previously set emoji.
+
+```vue
+<template>
+	<div>
+		<NcEmojiPicker
+			:show-preview="true"
+			:allow-unselect="true"
+			:selected-emoji="emoji"
+			@select="select"
+			@unselect="unselect"
+			style="display: inline-block">
+			<NcButton> Click Me </NcButton>
+		</NcEmojiPicker>
+		<span>selected emoji: {{ emoji }}</span>
+	</div>
+</template>
+<script>
+	export default {
+		data() {
+			return {
+				emoji: '',
+			}
+		},
+		methods: {
+			select(emoji) {
+				this.emoji = emoji
+			},
+			unselect() {
+				this.emoji = ''
+			},
+		},
+	}
+</script>
+```
+
 </docs>
 
 <template>
@@ -123,6 +160,23 @@ This component allows the user to pick an emoji.
 					@trailing-button-click="clearSearch(); slotProps.onSearch(search);"
 					@update:value="slotProps.onSearch(search)" />
 			</template>
+			<template v-if="allowUnselect && selectedEmoji" #customCategory>
+				<div class="emoji-mart-category-label">
+					<h3 class="emoji-mart-category-label">
+						{{ t('Selected') }}
+					</h3>
+				</div>
+				<Emoji class="emoji-selected"
+					:data="emojiIndex"
+					:emoji="selectedEmoji"
+					:size="32"
+					@click="unselect" />
+				<Emoji class="emoji-delete"
+					:data="emojiIndex"
+					emoji=":x:"
+					:size="10"
+					@click="unselect" />
+			</template>
 		</Picker>
 	</NcPopover>
 </template>
@@ -132,7 +186,7 @@ import NcPopover from '../NcPopover/index.js'
 import NcTextField from '../NcTextField/index.js'
 import { t } from '../../l10n.js'
 
-import { Picker, EmojiIndex } from 'emoji-mart-vue-fast'
+import { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast'
 import data from 'emoji-mart-vue-fast/data/all.json'
 
 export default {
@@ -140,6 +194,7 @@ export default {
 	components: {
 		NcPopover,
 		NcTextField,
+		Emoji,
 		Picker,
 	},
 	props: {
@@ -157,6 +212,20 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Allow unselecting the selected emoji
+		 */
+		allowUnselect: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Selected emoji to allow unselecting
+		 */
+		selectedEmoji: {
+			type: String,
+			default: '',
+		},
 		/**
 		 * The fallback emoji in the preview section
 		 */
@@ -190,6 +259,7 @@ export default {
 	emits: [
 		'select',
 		'select-data',
+		'unselect',
 	],
 	data() {
 		return {
@@ -248,6 +318,10 @@ export default {
 			}
 		},
 
+		unselect() {
+			this.$emit('unselect')
+		},
+
 		afterShow() {
 			// add focus trap in modal
 			const picker = this.$refs.picker
@@ -403,4 +477,21 @@ export default {
 		font-weight: 500;
 	}
 }
+
+</style>
+
+<style scoped>
+.row-selected span {
+	vertical-align: middle;
+}
+
+.row-selected button {
+	vertical-align: middle;
+}
+
+.emoji-delete {
+	vertical-align: top;
+	margin-left: -21px;
+	margin-top: -3px;
+}
 </style>