enh: view sorting

Signed-off-by: Cleopatra Enjeck M <patrathewhiz@gmail.com>

src/modules/main/partials/editViewPartials/sort/SortForm.vue

@@ -24,7 +24,7 @@
 			<div v-for="(sortingRule, i) in mutableSort" :key="sortingRule.columnId ?? '' + i">
 				<SortEntry
 					:sort-entry="sortingRule"
-					:columns="unusedColumns(sortingRule.columnId)"
+					:columns="eligibleColumns(sortingRule.columnId)"
 					:class="{'locallyAdded': isLocallyAdded(sortingRule)}"
 					@delete-sorting-rule="deleteSortingRule(i)" />
 			</div>
@@ -110,9 +110,9 @@ export default {
 		isSameEntry(object, searchObject) {
 			return Object.keys(searchObject).every((key) => object[key] === searchObject[key])
 		},
-		unusedColumns(selectedId) {
-			if (this.hadHiddenSortingRules || !this.viewSort) return this.columns
-			return this.columns.filter(col => !this.viewSort.map(entry => entry.columnId).includes(col.id) || col.id === selectedId)
+		eligibleColumns(selectedId) { // filter sortable and unused columns
+			if (this.hadHiddenSortingRules || !this.viewSort) return this.columns?.filter(col => col.canSort())
+			return this.columns.filter(col => col.canSort() && (!this.viewSort.map(entry => entry.columnId).includes(col.id) || col.id === selectedId))
 		},
 		deleteSortingRule(index) {
 			this.mutableSort.splice(index, 1)

src/modules/main/sections/MainWrapper.vue

@@ -112,7 +112,7 @@ export default {
 
 				this.viewSetting = {}
 				if (this.isView && this.element?.sort?.length) {
-					this.viewSetting.sorting = [...this.element.sort]
+					this.viewSetting.presetSorting = [...this.element.sort]
 				}
 
 				await this.$store.dispatch('loadColumnsFromBE', {

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

@@ -56,8 +56,8 @@
 				</NcActionButton>
 			</template>
 			<template v-else>
-				<NcActionCaption v-if="canSort" :name="t('tables', 'Sorting')" />
-				<NcActionButtonGroup v-if="canSort">
+				<NcActionCaption v-if="!hasPresetSorting && canSort" :name="t('tables', 'Sorting')" />
+				<NcActionButtonGroup v-if="!hasPresetSorting && canSort">
 					<NcActionButton :class="{ selected: getSortMode === 'ASC' }" :aria-label="t('tables', 'Sort asc')" @click="sort('ASC')">
 						<template #icon>
 							<SortAsc :size="20" />
@@ -225,8 +225,11 @@ export default {
 		canSort() {
 			return this.column.canSort()
 		},
+		hasPresetSorting() {
+			return this.localViewSetting?.presetSorting?.find(item => item.columnId === this.column?.id)
+		},
 		getSortMode() {
-			const sortObject = this.localViewSetting?.sorting?.find(item => item.columnId === this.column?.id)
+			const sortObject = this.localViewSetting?.presetSorting?.find(item => item.columnId === this.column?.id) ?? this.localViewSetting?.sorting?.find(item => item.columnId === this.column?.id)
 			if (sortObject) {
 				return sortObject.mode
 			}

src/shared/components/ncTable/sections/CustomTable.vue

@@ -92,9 +92,13 @@ export default {
 		},
 		getSearchedAndFilteredAndSortedRows() {
 			// if we have to sort
+			if (this.viewSetting?.presetSorting) {
+				const sortColumn = this.columns.find(item => item.id === this.viewSetting.presetSorting?.[0].columnId)
+				return [...this.getSearchedAndFilteredRows].sort(sortColumn?.sort?.(this.viewSetting.presetSorting[0].mode))
+			}
 			if (this.viewSetting?.sorting) {
-				const sortColumn = this.columns.find(item => item.id === this.viewSetting.sorting?.[0].columnId)
-				return [...this.getSearchedAndFilteredRows].sort(sortColumn?.sort?.(this.viewSetting.sorting[0].mode))
+				const sortColumn = this.columns.find(item => item.id === this.viewSetting.sorting[0].columnId)
+				return [...this.getSearchedAndFilteredRows].sort(sortColumn.sort(this.viewSetting.sorting[0].mode))
 			}
 			return this.getSearchedAndFilteredRows
 		},