feat: Use simple input field instead of multiselect for plain URLs

Signed-off-by: Julius Härtl <jus@bitgrid.net>
nextcloud · Aug 22, 2024 · 6e43669 · 6e43669
1 parent 5901e00
commit 6e43669
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 23 deletions.
diff --git a/src/modules/sidebar/sections/SidebarIntegration.vue b/src/modules/sidebar/sections/SidebarIntegration.vue
@@ -48,17 +48,18 @@
 import { mapGetters, mapState } from 'vuex'
 import { generateUrl } from '@nextcloud/router'
 import permissionsMixin from '../../../shared/components/ncTable/mixins/permissionsMixin.js'
+import copyToClipboard from '../../../shared/mixins/copyToClipboard.js'
+
 import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
 import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
-import { showError, showSuccess } from '@nextcloud/dialogs'
 
 export default {
 	components: {
 		NcInputField,
 		ContentCopy,
 	},
 
-	mixins: [permissionsMixin],
+	mixins: [permissionsMixin, copyToClipboard],
 
 	data() {
 		return {
@@ -80,22 +81,7 @@ export default {
 	},
 	 methods: {
 		copyUrl() {
-			if (navigator?.clipboard) {
-				navigator.clipboard.writeText(this.apiEndpointUrl).then(function() {
-					showSuccess(t('files', 'Integration URL copied to clipboard'))
-				}, function(err) {
-					showError(t('files', 'Clipboard is not available'))
-					console.error('Async: Could not copy text: ', err)
-				})
-			} else {
-				try {
-					document.querySelector('input#urlTextField').select()
-					document.execCommand('copy')
-					showSuccess(t('files', 'Integration URL copied to clipboard'))
-				} catch (e) {
-					showError(t('files', 'Clipboard is not available'))
-				}
-			}
+			this.copyToClipboard(this.apiEndpointUrl, false)
 		},
 	 },
 }

diff --git a/src/shared/components/ncTable/partials/rowTypePartials/TextLinkForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/TextLinkForm.vue
@@ -10,8 +10,9 @@
 					{{ t('tables', 'You can not insert any links in this field. Please configure at least one link provider in the column configuration.') }}
 				</NcNoteCard>
 			</div>
-			<div class="col-4">
-				<NcSelect v-model="localValue"
+			<div class="link-input">
+				<NcTextField v-if="isPlainUrl" :value.sync="plainLink" :placeholder="t('tables', 'URL')" />
+				<NcSelect v-else v-model="localValue"
 					:options="results"
 					:clearable="true"
 					label="title"
@@ -25,32 +26,55 @@
 						<LinkWidget :thumbnail-url="props.thumbnailUrl" :icon-url="props.icon" :title="props.title" :subline="props.subline" :icon-size="40" />
 					</template>
 				</NcSelect>
+				<NcButton type="tertiary" :disabled="!localValue" :title="t('tables', 'Copy link')" @click="copyLink">
+					<template #icon>
+						<ContentCopy v-if="!copied" :size="20" />
+						<ClipboardCheckMultipleOutline v-else :size="20" />
+					</template>
+				</NcButton>
+				<NcButton type="tertiary" :disabled="!localValue" :title="t('tables', 'Open link')" @click="openLink">
+					<template #icon>
+						<OpenInNew :size="20" />
+					</template>
+				</NcButton>
 			</div>
+			<NcReferenceList :text="localValue?.value" :limit="1" :interactive="false" />
 		</div>
 	</RowFormWrapper>
 </template>
 
 <script>
+import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
+import ClipboardCheckMultipleOutline from 'vue-material-design-icons/ClipboardCheckMultipleOutline.vue'
+import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
+import { NcReferenceList } from '@nextcloud/vue/dist/Components/NcRichText.js'
 import RowFormWrapper from './RowFormWrapper.vue'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import displayError from '../../../../utils/displayError.js'
-import { NcNoteCard, NcSelect } from '@nextcloud/vue'
+import { NcButton, NcTextField, NcNoteCard, NcSelect } from '@nextcloud/vue'
 import debounce from 'debounce'
 import generalHelper from '../../../../mixins/generalHelper.js'
+import copyToClipboard from '../../../../mixins/copyToClipboard.js'
 import LinkWidget from '../LinkWidget.vue'
 import { translate as t } from '@nextcloud/l10n'
 
 export default {
 
 	components: {
+		ContentCopy,
+		ClipboardCheckMultipleOutline,
+		OpenInNew,
+		NcButton,
 		NcNoteCard,
-		RowFormWrapper,
 		NcSelect,
+		NcReferenceList,
+		NcTextField,
+		RowFormWrapper,
 		LinkWidget,
 	},
 
-	mixins: [generalHelper],
+	mixins: [generalHelper, copyToClipboard],
 
 	props: {
 		column: {
@@ -69,10 +93,24 @@ export default {
 			results: [],
 			term: '',
 			providerLoading: {},
+			copied: false,
 		}
 	},
 
 	computed: {
+		plainLink: {
+			get() {
+				return this.localValue?.value ?? ''
+			},
+			set(v) {
+				this.$emit('update:value', JSON.stringify({
+					title: v,
+					subline: t('tables', 'URL'),
+					providerId: 'url',
+					value: v,
+				}))
+			},
+		},
 		localValue: {
 			get() {
 				// if we got an old value (string not object as json)
@@ -95,6 +133,9 @@ export default {
 				this.$emit('update:value', value)
 			},
 		},
+		isPlainUrl() {
+			return this.providers?.length === 1 && this.providers[0] === 'url'
+		},
 		isLoadingResults() {
 			for (const [key, value] of Object.entries(this.providerLoading)) {
 				console.debug('is still loading results at least for: ' + key, value)
@@ -198,6 +239,33 @@ export default {
 		removeResultsByProviderId(providerId) {
 			this.results = this.results.filter(item => item.providerId !== providerId)
 		},
+
+		copyLink() {
+			if (this.localValue) {
+				if (this.copied !== false) {
+					clearTimeout(this.copied)
+				}
+
+				this.copied = this.copyToClipboard(this.localValue.value)
+					? setTimeout(() => {
+						this.copied = false
+					}, 3000)
+					: false
+			}
+		},
+
+		openLink() {
+			if (this.localValue) {
+				window.open(this.localValue.value, '_blank')
+			}
+		},
 	},
 }
 </script>
+<style scoped>
+.link-input {
+	display: flex;
+	align-items: center;
+	margin-bottom: var(--default-grid-baseline)
+}
+</style>
diff --git a/src/shared/mixins/copyToClipboard.js b/src/shared/mixins/copyToClipboard.js
@@ -0,0 +1,30 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { showError, showSuccess } from '@nextcloud/dialogs'
+
+export default {
+	methods: {
+		async copyToClipboard(content, silent = true) {
+			try {
+				if (navigator?.clipboard) {
+					await navigator.clipboard.writeText(content)
+				} else {
+					throw new Error('Clipboard is not available')
+				}
+
+				if (!silent) {
+					showSuccess(t('files', 'Copied to clipboard.'))
+				}
+				return true
+			} catch (e) {
+				console.error('Error copying to clipboard', e)
+				if (!silent) {
+					showError(t('files', 'Clipboard is not available'))
+				}
+			}
+		},
+	},
+}