Enhancement: Add column width setting (code review changes)

Signed-off-by: Kostiantyn Miakshyn <molodchick@gmail.com>

Author: Koc

src/modules/modals/CreateColumn.vue

@@ -15,7 +15,8 @@
 						:title.sync="column.title"
 						:custom-settings.sync="column.customSettings"
 						:selected-views.sync="column.selectedViews"
-						:title-missing-error="titleMissingError" />
+						:title-missing-error="titleMissingError"
+						:width-invalid-error="widthInvalidError" />
 				</div>
 				<div class="fix-col-2" style="display: block">
 					<div class="row no-padding-on-mobile space-L">
@@ -115,6 +116,7 @@ import UsergroupForm from '../../shared/components/ncTable/partials/columnTypePa
 import { useTablesStore } from '../../store/store.js'
 import { useDataStore } from '../../store/data.js'
 import { mapActions } from 'pinia'
+import { COLUMN_WIDTH_MAX, COLUMN_WIDTH_MIN } from '../../shared/constants.js'
 
 export default {
 	name: 'CreateColumn',
@@ -193,6 +195,7 @@ export default {
 			textAppAvailable: !!window.OCA?.Text?.createEditor,
 			addNewAfterSave: false,
 			typeMissingError: false,
+			widthInvalidError: false,
 			titleMissingError: false,
 			typeOptions: [
 				{ id: 'text', label: t('tables', 'Text') },
@@ -290,10 +293,10 @@ export default {
 				showInfo(t('tables', 'Please insert a title for the new column.'))
 				this.titleMissingError = true
 			} else if (this.column.customSettings?.width
-				&& (this.column.customSettings?.width < 20 || this.column.customSettings?.width > 1000)) {
+				&& (this.column.customSettings?.width < COLUMN_WIDTH_MIN || this.column.customSettings?.width > COLUMN_WIDTH_MAX)) {
 				this.titleMissingError = false
-				showError(t('tables', 'Cannot save column. Column width must be between {min} and {max}.', { min: 20, max: 1000 }))
-				this.typeMissingError = true
+				showError(t('tables', 'Cannot save column. Column width must be between {min} and {max}.', { min: COLUMN_WIDTH_MIN, max: COLUMN_WIDTH_MAX }))
+				this.widthInvalidError = true
 			} else if (this.column.type === null) {
 				this.titleMissingError = false
 				showInfo(t('tables', 'You need to select a type for the new column.'))
@@ -328,9 +331,8 @@ export default {
 				mandatory: this.column.mandatory,
 				viewId: this.isView ? this.element.id : null,
 				tableId: !this.isView ? this.element.id : null,
-				customSettings: this.column.customSettings,
+				customSettings: { width: this.column.customSettings.width },
 			}
-			data.customSettings = { width: data.customSettings.width }
 
 			if (this.combinedType === ColumnTypes.TextLine) {
 				data.textUnique = this.column.textUnique
@@ -435,6 +437,7 @@ export default {
 				this.column.selectedViews = []
 			}
 			this.titleMissingError = false
+			this.widthInvalidError = false
 			this.typeMissingError = false
 		},
 	},

src/modules/modals/EditColumn.vue

@@ -15,7 +15,8 @@
 						:title.sync="editColumn.title"
 						:custom-settings.sync="editColumn.customSettings"
 						:edit-column="true"
-						:title-missing-error="editErrorTitle" />
+						:title-missing-error="editErrorTitle"
+						:width-invalid-error="widthInvalidError" />
 				</div>
 				<div class="col-2 space-LR space-T">
 					<component :is="getColumnForm" :column="editColumn" :can-save.sync="canSave" />
@@ -69,6 +70,7 @@ import { ColumnTypes } from '../../shared/components/ncTable/mixins/columnHandle
 import moment from '@nextcloud/moment'
 import { mapActions } from 'pinia'
 import { useDataStore } from '../../store/data.js'
+import { COLUMN_WIDTH_MAX, COLUMN_WIDTH_MIN } from '../../shared/constants.js'
 
 export default {
 	name: 'EditColumn',
@@ -120,9 +122,10 @@ export default {
 	data() {
 		return {
 			loading: false,
-			editColumn: Object.assign({}, this.column),
+			editColumn: JSON.parse(JSON.stringify(this.column)),
 			deleteId: null,
 			editErrorTitle: false,
+			widthInvalidError: false,
 			canSave: true, // used to avoid saving an incorrect config
 		}
 	},
@@ -169,13 +172,12 @@ export default {
 			}
 
 			if (this.editColumn.customSettings?.width
-				&& (this.editColumn.customSettings?.width < 20 || this.editColumn.customSettings?.width > 1000)) {
-				showError(t('tables', 'Cannot save column. Column width must be between {min} and {max}.', { min: 20, max: 1000 }))
-				this.editErrorTitle = true
+				&& (this.editColumn.customSettings?.width < COLUMN_WIDTH_MIN || this.editColumn.customSettings?.width > COLUMN_WIDTH_MAX)) {
+				showError(t('tables', 'Cannot save column. Column width must be between {min} and {max}.', { min: COLUMN_WIDTH_MIN, max: COLUMN_WIDTH_MAX }))
+				this.widthInvalidError = true
 				return
 			}
 
-			this.editErrorTitle = false
 			await this.updateLocalColumn()
 			this.reset()
 			this.$emit('close')
@@ -185,6 +187,7 @@ export default {
 			this.editColumn = null
 			this.deleteId = null
 			this.editErrorTitle = false
+			this.widthInvalidError = false
 		},
 		async updateLocalColumn() {
 			const data = Object.assign({}, this.editColumn)

src/shared/components/ncTable/partials/columnTypePartials/forms/MainForm.vue

@@ -29,17 +29,17 @@
 		</div>
 
 		<!-- column width -->
-		<div class="fix-col-4 mandatory title space-T">
+		<div class="fix-col-4 mandatory title space-T" :class="{error: widthInvalidError}">
 			{{ t('tables', 'Column width') }}
 		</div>
-		<div class="fix-col-4">
+		<div class="fix-col-4" :class="{error: widthInvalidError}">
 			<input
 				v-model.number="localColumnWidth"
 				type="number"
 				pattern="\d+"
 				min="20"
 				max="1000"
-				:placeholder="t('tables', 'Enter a column width')">
+				:placeholder="t('tables', 'Enter a column width between {min} and {max}', { min: COLUMN_WIDTH_MIN, max: COLUMN_WIDTH_MAX })">
 		</div>
 
 		<!-- add to views -->
@@ -77,6 +77,7 @@ import { NcCheckboxRadioSwitch, NcSelect } from '@nextcloud/vue'
 import { mapState } from 'pinia'
 import { translate as t } from '@nextcloud/l10n'
 import { useTablesStore } from '../../../../../../store/store.js'
+import { COLUMN_WIDTH_MAX, COLUMN_WIDTH_MIN } from '../../../../../constants.js'
 
 export default {
 	name: 'MainForm',
@@ -105,6 +106,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		widthInvalidError: {
+			type: Boolean,
+			default: false,
+		},
 		editColumn: {
 			type: Boolean,
 			default: false,
@@ -116,6 +121,12 @@ export default {
 			},
 		},
 	},
+	data() {
+		return {
+			COLUMN_WIDTH_MIN,
+			COLUMN_WIDTH_MAX,
+		}
+	},
 	computed: {
 		...mapState(useTablesStore, ['views', 'activeElement', 'isView']),
 		localTitle: {
@@ -163,3 +174,13 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.error {
+	color:  var(--color-error);
+}
+
+.error input {
+	border-color: var(--color-error);
+}
+</style>

src/shared/constants.ts

@@ -48,3 +48,6 @@ export const USERGROUP_TYPE = {
 	GROUP: 1,
 	CIRCLE: 2,
 }
+
+export const COLUMN_WIDTH_MIN = 50
+export const COLUMN_WIDTH_MAX = 1000