From da90d3a25546bbd5416e11b962fe95ea13b0454f Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
Date: Fri, 10 Feb 2023 21:48:43 +0100
Subject: [PATCH] fix: Use NcSelect instead of NcMultiselect and use
 NcTextField instead of custom input

This resolves some styling issues, like hovering the submit input does not set the border
on the text input or mismatching borders.
Moreover the `NcMultiselect` is deprecated and should be replaced with the `NcSelect`.

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>
---
 src/components/Nav/NewCollective.vue | 115 ++++++++++++++++-----------
 1 file changed, 68 insertions(+), 47 deletions(-)

diff --git a/src/components/Nav/NewCollective.vue b/src/components/Nav/NewCollective.vue
index a7e074136..37186431d 100644
--- a/src/components/Nav/NewCollective.vue
+++ b/src/components/Nav/NewCollective.vue
@@ -33,51 +33,65 @@
 			</NcActionButton>
 		</template>
 	</NcAppNavigationItem>
-	<div v-else class="collective-create">
-		<form v-show="editing" @submit.prevent.stop="createCollective">
-			<NcEmojiPicker :show-preview="true" @select="addEmoji">
-				<NcButton type="tertiary"
-					:aria-label="t('collectives', 'Select emoji for collective')"
-					:title="t('collectives', 'Select emoji')"
-					class="button-emoji"
-					@click.prevent>
-					{{ emoji }}
-				</NcButton>
-			</NcEmojiPicker>
-
-			<input v-if="!pickCircle"
-				ref="nameField"
-				v-model="text"
-				:placeholder="t('collectives', 'New collective name')"
-				type="text"
-				required>
-			<NcMultiselect v-else
-				ref="circleSelector"
+	<form v-else
+		v-show="editing"
+		class="collective-create"
+		@submit.prevent.stop="createCollective">
+		<NcEmojiPicker :show-preview="true" @select="addEmoji">
+			<NcButton type="tertiary"
+				:aria-label="t('collectives', 'Select emoji for collective')"
+				:title="t('collectives', 'Select emoji')"
+				class="button-emoji"
+				@click.prevent>
+				{{ emoji }}
+			</NcButton>
+		</NcEmojiPicker>
+
+		<NcTextField v-if="!pickCircle"
+			ref="nameField"
+			:value.sync="text"
+			:error="text === ''"
+			:label="t('collectives', 'New collective name')"
+			:show-trailing-button="!!text"
+			required
+			trailing-button-icon="arrowRight"
+			:trailing-button-label="t('collectives', 'Create new collective')"
+			@trailing-button-click="createCollective" />
+
+		<div v-else class="circle-selector--container">
+			<NcSelect ref="circleSelector"
 				v-model="circle"
+				:loading="loading"
 				:options="circles"
+				:searchable="!circle"
 				open-direction="below"
-				:placeholder="t('collectives', 'Select circle...')"
+				:placeholder="t('collectives', 'Select circle …')"
 				required />
-			<input type="submit"
-				value=""
+			<NcButton :disabled="loading || !circle"
 				:aria-label="t('collectives', 'Create a new collective')"
-				class="icon-confirm"
-				:class="{ 'icon-loading-small': loading }">
-			<NcActions>
-				<NcActionButton icon="icon-close"
-					:aria-label="t('collectives', 'Cancel creating a new collective')"
-					@click.stop.prevent="cancelEdit" />
-			</NcActions>
-		</form>
-	</div>
+				type="tertiary-no-background"
+				@click="createCollective">
+				<template #icon>
+					<ArrowRightIcon :size="20" />
+				</template>
+			</NcButton>
+		</div>
+
+		<NcActions>
+			<NcActionButton icon="icon-close"
+				:aria-label="t('collectives', 'Cancel creating a new collective')"
+				@click.stop.prevent="cancelEdit" />
+		</NcActions>
+	</form>
 </template>
 
 <script>
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
-import { NcActionButton, NcActions, NcAppNavigationItem, NcButton, NcMultiselect } from '@nextcloud/vue'
+import { NcActionButton, NcActions, NcAppNavigationItem, NcButton, NcSelect, NcTextField } from '@nextcloud/vue'
 import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
 import { mapActions, mapGetters } from 'vuex'
 import CirclesIcon from '../Icon/CirclesIcon.vue'
+import ArrowRightIcon from 'vue-material-design-icons/ArrowRight.vue'
 import { GET_CIRCLES, NEW_COLLECTIVE } from '../../store/actions.js'
 import displayError from '../../util/displayError.js'
 
@@ -86,13 +100,15 @@ const randomColor = () => '#' + ((1 << 24) * Math.random() | 0).toString(16)
 export default {
 	name: 'NewCollective',
 	components: {
+		ArrowRightIcon,
+		CirclesIcon,
 		NcAppNavigationItem,
 		NcActionButton,
 		NcActions,
 		NcButton,
-		CirclesIcon,
 		NcEmojiPicker,
-		NcMultiselect,
+		NcSelect,
+		NcTextField,
 	},
 	directives: {},
 	data() {
@@ -155,7 +171,7 @@ export default {
 			this.editing = true
 			this.emoji = this.randomCollectiveEmoji()
 			this.$nextTick(() => {
-				this.$refs.nameField.focus()
+				this.$refs.nameField.$el.focus()
 			})
 		},
 
@@ -174,6 +190,8 @@ export default {
 		 * @param {Event} e - trigger event
 		 */
 		createCollective(e) {
+			if (!this.name) return
+
 			const updateCollective = () => {
 				this.clear()
 				if (this.$store.getters.collectiveChanged) {
@@ -207,22 +225,25 @@ export default {
 
 <style lang="scss" scoped>
 .collective-create {
-	form {
+	display: flex;
+	align-items: center;
+
+	.circle-selector--container {
 		display: flex;
+		align-items: center;
+		flex-grow: 1;
+		min-width: 0;
 
-		input[type='text'] {
+		.v-select.select {
+			min-width: 100%;
 			flex-grow: 1;
 		}
-
-		input[type='submit'] {
-			border-radius: var(--border-radius-large) !important;
-			border-width: 2px;
-			margin-right: 0;
+		:deep(.vs__actions) {
+			margin-right: 32px;
 		}
-
-		.multiselect {
-			min-width: unset;
-			flex-grow: 1;
+		.button-vue {
+			position: relative;
+			left: -44px;
 		}
 	}
 }