Apply code review fixes

Signed-off-by: Kostiantyn Miakshyn <[email protected]>

Author: Koc

src/shared/components/ncTable/mixins/columnHandler.js

@@ -18,3 +18,9 @@ export const ColumnTypes = {
 	Datetime: 'datetime',
 	Usergroup: 'usergroup',
 }
+
+export function getColumnWidthStyle(column) {
+	const width = column.customSettings?.width ? `min(${column.customSettings.width}px, 90vw)` : null
+
+	return width ? { width, maxWidth: width, minWidth: width } : null
+}

src/shared/components/ncTable/partials/TableHeader.vue

@@ -10,11 +10,7 @@
 				<div v-if="hasRightHiddenNeighbor(-1)" class="hidden-indicator-first" @click="unhide(-1)" />
 			</div>
 		</th>
-		<th v-for="col in visibleColumns" :key="col.id"
-			:style="{
-				width: col.customSettings?.width ? `${col.customSettings.width}px` : 'auto',
-				maxWidth: col.customSettings?.width ? `${col.customSettings.width}px` : 'auto',
-				minWidth: col.customSettings?.width ? `${col.customSettings.width}px` : 'auto'}">
+		<th v-for="col in visibleColumns" :key="col.id" :style="getColumnWidthStyle(col)">
 			<div class="cell-wrapper">
 				<div class="cell-options-wrapper">
 					<div class="cell">
@@ -52,6 +48,7 @@ import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import TableHeaderColumnOptions from './TableHeaderColumnOptions.vue'
 import FilterLabel from './FilterLabel.vue'
 import { getFilterWithId } from '../mixins/filter.js'
+import { getColumnWidthStyle } from '../mixins/columnHandler.js'
 
 export default {
 
@@ -114,6 +111,7 @@ export default {
 
 	methods: {
 		getFilterWithId,
+		getColumnWidthStyle,
 		updateOpenState(columnId) {
 			this.openedColumnHeaderMenus[columnId] = !this.openedColumnHeaderMenus[columnId]
 			this.openedColumnHeaderMenus = Object.assign({}, this.openedColumnHeaderMenus)

src/shared/components/ncTable/partials/TableRow.vue

@@ -8,10 +8,7 @@
 			<NcCheckboxRadioSwitch :checked="selected" @update:checked="v => $emit('update-row-selection', { rowId: row.id, value: v })" />
 		</td>
 		<td v-for="col in visibleColumns" :key="col.id"
-			:style="{
-				width: col.customSettings?.width ? `${col.customSettings.width}px` : 'auto',
-				maxWidth: col.customSettings?.width ? `${col.customSettings.width}px` : 'auto',
-				minWidth: col.customSettings?.width ? `${col.customSettings.width}px` : 'auto'}"
+			:style="getColumnWidthStyle(col)"
 			:class="{
 				'search-result': getCell(col.id)?.searchStringFound,
 				'filter-result': getCell(col.id)?.filterFound,
@@ -51,7 +48,7 @@ import TableCellSelection from './TableCellSelection.vue'
 import TableCellMultiSelection from './TableCellMultiSelection.vue'
 import TableCellTextRich from './TableCellEditor.vue'
 import TableCellUsergroup from './TableCellUsergroup.vue'
-import { ColumnTypes } from './../mixins/columnHandler.js'
+import { ColumnTypes, getColumnWidthStyle } from './../mixins/columnHandler.js'
 import { translate as t } from '@nextcloud/l10n'
 import {
 	TYPE_META_ID, TYPE_META_CREATED_BY, TYPE_META_CREATED_AT, TYPE_META_UPDATED_BY, TYPE_META_UPDATED_AT,
@@ -125,6 +122,7 @@ export default {
 	},
 	methods: {
 		t,
+		getColumnWidthStyle,
 		handleCellClick(column) {
 			// If the column type doesn't support inline editing, trigger the edit modal
 			if (this.nonInlineEditableColumnTypes.includes(column.type) && this.config.canEditRows) {

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

@@ -37,8 +37,8 @@
 				v-model.number="localColumnWidth"
 				type="number"
 				pattern="\d+"
-				min="20"
-				max="1000"
+				:min="COLUMN_WIDTH_MIN"
+				:max="COLUMN_WIDTH_MAX"
 				:placeholder="t('tables', 'Enter a column width between {min} and {max}', { min: COLUMN_WIDTH_MIN, max: COLUMN_WIDTH_MAX })">
 		</div>
 
@@ -148,7 +148,7 @@ export default {
 			},
 		},
 		localColumnWidth: {
-			get() { return this.customSettings.width ?? null },
+			get() { return this.customSettings?.width ?? null },
 			set(width) {
 				this.$emit('update:customSettings', { ...this.customSettings, ...{ width } })
 			},