fix(design): fix loading the default column-link providers

- add configuration to avoid saving incorrect column configs - add info cards if no providers are chosen Signed-off-by: Florian Steffens <florian.steffens@nextcloud.com>
nextcloud · Sep 13, 2023 · a2ef4bc · a2ef4bc
1 parent 2b620b0
commit a2ef4bc
Show file tree

Hide file tree

Showing 15 changed files with 108 additions and 22 deletions.
diff --git a/src/modules/modals/EditColumn.vue b/src/modules/modals/EditColumn.vue
@@ -18,7 +18,7 @@
 						:title-missing-error="editErrorTitle" />
 				</div>
 				<div class="col-2 space-LR space-T">
-					<component :is="getColumnForm" :column="editColumn" />
+					<component :is="getColumnForm" :column="editColumn" :can-save.sync="canSave" />
 				</div>
 			</div>
 			<div class="buttons">
@@ -36,7 +36,7 @@
 							{{ t('tables', 'Cancel') }}
 						</NcButton>
 					</div>
-					<NcButton type="primary" :aria-label="t('tables', 'Save')" @click="saveColumn">
+					<NcButton type="primary" :aria-label="t('tables', 'Save')" :disabled="!canSave" @click="saveColumn">
 						{{ t('tables', 'Save') }}
 					</NcButton>
 				</div>
@@ -108,9 +108,10 @@ export default {
 	data() {
 		return {
 			loading: false,
-			editColumn: structuredClone(this.column),
+			editColumn: Object.assign({}, this.column),
 			deleteId: null,
 			editErrorTitle: false,
+			canSave: true, // avoid to save an incorrect config
 		}
 	},
 	computed: {
@@ -165,7 +166,7 @@ export default {
 			this.editErrorTitle = false
 		},
 		async updateColumn() {
-			const data = { ...this.editColumn }
+			const data = Object.assign({}, this.editColumn)
 			if ((this.column.type === ColumnTypes.SelectionMulti || this.column.type === ColumnTypes.SelectionCheck) && data.selectionDefault !== null) data.selectionDefault = JSON.stringify(data.selectionDefault)
 			delete data.type
 			delete data.id

diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/DatetimeDateForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/DatetimeDateForm.vue
@@ -26,6 +26,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		canSave: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	data() {
 		return {

diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/DatetimeForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/DatetimeForm.vue
@@ -23,6 +23,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		canSave: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	data() {
 		return {

diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/DatetimeTimeForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/DatetimeTimeForm.vue
@@ -23,6 +23,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		canSave: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	data() {
 		return {

diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/NumberForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/NumberForm.vue
@@ -75,6 +75,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		canSave: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	data() {
 		return {

diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/NumberProgressForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/NumberProgressForm.vue
@@ -26,6 +26,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		canSave: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	data() {
 		return {

diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/NumberStarsForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/NumberStarsForm.vue
@@ -44,6 +44,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		canSave: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	data() {
 		return {

diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/SelectionCheckForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/SelectionCheckForm.vue
@@ -26,6 +26,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		canSave: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	data() {
 		return {

diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/SelectionForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/SelectionForm.vue
@@ -41,6 +41,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		canSave: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	data() {
 		return {

diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/SelectionMultiForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/SelectionMultiForm.vue
@@ -40,6 +40,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		canSave: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	data() {
 		return {

diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/TextLineForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/TextLineForm.vue
@@ -48,6 +48,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		canSave: {
+			type: Boolean,
+			default: true,
+		},
 	},
 
 	data() {

diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/TextLinkForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/TextLinkForm.vue
@@ -7,6 +7,11 @@
 			<div class="fix-col-4">
 				{{ t('tables', 'Allowed types') }}
 			</div>
+			<div v-if="!canSave" class="fix-col-4">
+				<NcNoteCard type="warning">
+					{{ t('tables', 'Please select at least one provider.') }}
+				</NcNoteCard>
+			</div>
 			<div class="col-4 space-B typeSelection">
 				<NcCheckboxRadioSwitch v-for="provider in getProviders" :key="provider.id" :checked.sync="provider.active" type="switch">
 					{{ provider.label }}
@@ -20,7 +25,7 @@
 </template>
 
 <script>
-import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch, NcNoteCard } from '@nextcloud/vue'
 import axios from '@nextcloud/axios'
 import displayError from '../../../../../utils/displayError.js'
 import { generateOcsUrl } from '@nextcloud/router'
@@ -30,12 +35,17 @@ export default {
 
 	components: {
 		NcCheckboxRadioSwitch,
+		NcNoteCard,
 	},
 	props: {
 		column: {
 			type: Object,
 			default: null,
 		},
+		canSave: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	data() {
 		return {
@@ -60,11 +70,24 @@ export default {
 			})
 			return activeProviderIds
 		},
+		error: {
+			get() {
+				return !this.canSave
+			},
+			set(v) {
+				this.$emit('update:can-save', !v)
+			},
+		},
 	},
 
 	watch: {
 		getSelectedProviderIds() {
 			this.mutableColumn.textAllowedPattern = this.getSelectedProviderIds.join(',')
+			if (this.getSelectedProviderIds.length === 0) {
+				this.error = true
+			} else {
+				this.error = false
+			}
 		},
 		column() {
 			this.mutableColumn = this.column
@@ -108,8 +131,8 @@ export default {
 			})
 		},
 		isActive(providerId) {
-			if (this.column.textAllowedPattern) {
-				const selectedProviders = this.column.textAllowedPattern.split(',')
+			if (this.column?.id) {
+				const selectedProviders = this.column.textAllowedPattern?.split(',')
 				return selectedProviders.indexOf(providerId) !== -1
 			} else {
 				return this.preActivatedProviders.indexOf(providerId) !== -1

diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/TextLongForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/TextLongForm.vue
@@ -36,6 +36,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		canSave: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	data() {
 		return {

diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/TextRichForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/TextRichForm.vue
@@ -26,6 +26,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		canSave: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	data() {
 		return {

diff --git a/src/shared/components/ncTable/partials/rowTypePartials/TextLinkForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/TextLinkForm.vue
@@ -1,18 +1,27 @@
 <template>
 	<RowFormWrapper :title="column.title" :mandatory="column.mandatory" :description="column.description" :loading="isLoadingResults">
-		<NcSelect v-model="localValue"
-			:options="results"
-			:clearable="true"
-			label="title"
-			style="width: 100%"
-			@search="v => term = v">
-			<template #option="props">
-				<LinkWidget :thumbnail-url="props.thumbnailUrl" :icon-url="props.icon" :title="props.title" :subline="props.subline" :icon-size="40" />
-			</template>
-			<template #selected-option="props">
-				<LinkWidget :thumbnail-url="props.thumbnailUrl" :icon-url="props.icon" :title="props.title" :subline="props.subline" :icon-size="40" />
-			</template>
-		</NcSelect>
+		<div class="row">
+			<div v-if="providers.length === 0" class="col-4">
+				<NcNoteCard type="info">
+					{{ 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"
+					:options="results"
+					:clearable="true"
+					label="title"
+					style="width: 100%"
+					@search="v => term = v">
+					<template #option="props">
+						<LinkWidget :thumbnail-url="props.thumbnailUrl" :icon-url="props.icon" :title="props.title" :subline="props.subline" :icon-size="40" />
+					</template>
+					<template #selected-option="props">
+						<LinkWidget :thumbnail-url="props.thumbnailUrl" :icon-url="props.icon" :title="props.title" :subline="props.subline" :icon-size="40" />
+					</template>
+				</NcSelect>
+			</div>
+		</div>
 	</RowFormWrapper>
 </template>
 
@@ -21,7 +30,7 @@ import RowFormWrapper from './RowFormWrapper.vue'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import displayError from '../../../../utils/displayError.js'
-import { NcSelect } from '@nextcloud/vue'
+import { NcNoteCard, NcSelect } from '@nextcloud/vue'
 import debounce from 'debounce'
 import generalHelper from '../../../../mixins/generalHelper.js'
 import LinkWidget from '../LinkWidget.vue'
@@ -30,6 +39,7 @@ import { translate as t } from '@nextcloud/l10n'
 export default {
 
 	components: {
+		NcNoteCard,
 		RowFormWrapper,
 		NcSelect,
 		LinkWidget,
@@ -104,7 +114,11 @@ export default {
 	},
 
 	mounted() {
-		this.providers = this.column?.textAllowedPattern?.split(',')
+		if (this.column?.textAllowedPattern) {
+			this.providers = this.column?.textAllowedPattern?.split(',')
+		} else {
+			this.providers = []
+		}
 	},
 
 	methods: {