Fix/461 views filtering (#538)

* adjust FE to allow filtering for single selection fields - adjust filter config - code clean up - refactor data management within vue filter components Signed-off-by: Florian Steffens <[email protected]> * add query logic for single selection filtering Signed-off-by: Florian Steffens <[email protected]> * add query logic for single selection filtering Signed-off-by: Florian Steffens <[email protected]> --------- Signed-off-by: Florian Steffens <[email protected]>
nextcloud · Sep 12, 2023 · e803ba8 · e803ba8
1 parent ef49b5e
commit e803ba8
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 83 deletions.
diff --git a/lib/Db/ColumnTypes/SelectionColumnQB.php b/lib/Db/ColumnTypes/SelectionColumnQB.php
@@ -6,6 +6,12 @@
 
 class SelectionColumnQB extends SuperColumnQB implements IColumnTypeQB {
 	public function passSearchValue(IQueryBuilder $qb, string $unformattedSearchValue, string $operator, string $searchValuePlaceHolder): void {
-		$qb->setParameter($searchValuePlaceHolder, $unformattedSearchValue, IQueryBuilder::PARAM_STR);
+		if(substr($unformattedSearchValue, 0, 1) === '@') {
+			$parts = explode('-', $unformattedSearchValue);
+			$selectedId = intval($parts[2]);
+			$qb->setParameter($searchValuePlaceHolder, $selectedId, IQueryBuilder::PARAM_INT);
+		} else {
+			$qb->setParameter($searchValuePlaceHolder, $unformattedSearchValue, IQueryBuilder::PARAM_STR);
+		}
 	}
 }
diff --git a/src/modules/main/partials/editViewPartials/filter/FilterEntry.vue b/src/modules/main/partials/editViewPartials/filter/FilterEntry.vue
@@ -5,23 +5,20 @@
 				v-model="selectedColumn"
 				class="select-field"
 				:options="columns"
-				:get-option-key="(option) => option.id"
-				:placeholder="t('tables', 'Column')"
-				label="title" />
+				label="title"
+				:placeholder="t('tables', 'Column')" />
 			<NcSelect
 				v-if="selectedColumn"
 				v-model="selectedOperator"
 				class="select-field"
-				:options="operatorArray"
-				:get-option-key="(option) => option.id"
-				:placeholder="t('tables', 'Operator')"
-				label="label" />
+				:options="operators"
+				:placeholder="t('tables', 'Operator')" />
 			<NcSelect
 				v-if="selectedOperator && !selectedOperator.noSearchValue"
 				v-model="searchValue"
 				class="select-field"
-				:options="magicFieldsArray"
-				:placeholder="valuePlaceHolder"
+				:options="magicFields"
+				:placeholder="getValuePlaceholder"
 				@search="v => term = v" />
 		</div>
 		<NcButton
@@ -39,18 +36,17 @@
 
 <script>
 import { NcButton, NcSelect } from '@nextcloud/vue'
-import { getFilterWithId } from '../../../../../shared/components/ncTable/mixins/filter.js'
-import { getMagicFieldWithId } from '../../../../../shared/components/ncTable/mixins/magicFields.js'
 import Delete from 'vue-material-design-icons/Delete.vue'
 import { ColumnTypes } from '../../../../../shared/components/ncTable/mixins/columnHandler.js'
 
 export default {
-	name: 'FilterEntry',
+
 	components: {
 		NcSelect,
 		NcButton,
 		Delete,
 	},
+
 	props: {
 		filterEntry: {
 			type: Object,
@@ -61,34 +57,96 @@ export default {
 			default: null,
 		},
 	},
+
 	data() {
 		return {
-			selectedColumn: null,
-			selectedOperator: null,
-			mutableFilterEntry: this.filterEntry,
-			searchValue: '',
 			term: '',
 		}
 	},
+
 	computed: {
-		operatorArray() {
+		mutableFilterEntry: {
+			get() {
+				return this.filterEntry
+			},
+			set(filterEntry) {
+				this.$emit('update:filter-entry', filterEntry)
+			},
+		},
+		searchValue: {
+			get() {
+				// if no value is set, just return ''
+				if (this.filterEntry?.value === null || this.filterEntry?.value === '') {
+					return ''
+				}
+
+				// if the value starts with @, we try to load the magic-value object
+				if (this.filterEntry?.value.substr(0, 1) === '@') {
+					return this.magicFields.find(item => item.id === this.filterEntry?.value || item.id === this.filterEntry?.value.substr(1))
+				}
+
+				return this.filterEntry.value
+			},
+			set(searchValue) {
+				if (typeof searchValue === 'object' && searchValue?.id) {
+					this.mutableFilterEntry.value = searchValue.id
+				} else if (typeof searchValue === 'string') {
+					this.mutableFilterEntry.value = searchValue
+				} else {
+					this.mutableFilterEntry.value = ''
+				}
+			},
+		},
+		selectedColumn: {
+			get() {
+				return this.columns.find(col => col.id === this.filterEntry.columnId)
+			},
+			set(column) {
+				if (this.operators.length >= 1) {
+					this.selectedOperator = this.operators[0]
+				} else {
+					this.selectedOperator = null
+				}
+
+				this.searchValue = null
+				this.mutableFilterEntry.columnId = column?.id ?? null
+			},
+		},
+		selectedOperator: {
+			get() {
+				return this.operators.find(item => this.filterEntry.operator === item.id)
+			},
+			set(operator) {
+				this.mutableFilterEntry.operator = operator?.id
+			},
+		},
+		operators() {
 			if (this.selectedColumn) {
 				return this.selectedColumn.getPossibleOperators()
 			} else {
 				return []
 			}
 		},
-		magicFieldsArray() {
-			if (this.selectedColumn) {
+		magicFields() {
+			if (this.selectedColumn && this.selectedColumn.type.substr(0, 9) !== 'selection') {
 				if (this.term) {
 					return [this.term, ...this.selectedColumn.getPossibleMagicFields()]
 				}
 				return this.selectedColumn.getPossibleMagicFields()
+			} else if (this.selectedColumn && this.selectedColumn.type.substr(0, 9) === 'selection') {
+				const options = []
+				this.selectedColumn.selectionOptions.forEach(item => {
+					options.push({
+						id: '@selection-id-' + item.id,
+						label: item.label,
+					})
+				})
+				return options
 			} else {
 				return []
 			}
 		},
-		valuePlaceHolder() {
+		getValuePlaceholder() {
 			if (this.selectedColumn.type === ColumnTypes.Datetime) {
 				return t('tables', 'JJJJ-MM-DD hh:mm')
 			} else if (this.selectedColumn.type === ColumnTypes.DatetimeDate) {
@@ -99,45 +157,6 @@ export default {
 			return t('tables', 'Search Value')
 		},
 	},
-	watch: {
-		selectedColumn() {
-			if (!this.selectedOperator || (this.selectedOperator && !this.operatorArray.includes(this.selectedOperator))) {
-				if (this.operatorArray.length === 1) {
-					this.selectedOperator = this.operatorArray[0]
-				} else {
-					this.selectedOperator = null
-				}
-			}
-			if (this.searchValue && typeof this.searchValue === 'object' && !this.magicFieldsArray.includes(this.searchValue)) {
-				this.searchValue = null
-			}
-			this.mutableFilterEntry.columnId = this.selectedColumn?.id
-		},
-		selectedOperator() {
-			this.mutableFilterEntry.operator = this.selectedOperator?.id
-		},
-		searchValue() {
-			if (this.searchValue) {
-				this.mutableFilterEntry.value = typeof this.searchValue === 'object' ? '@' + this.searchValue.id : this.searchValue
-			} else {
-				this.mutableFilterEntry.value = ''
-			}
-		},
-	},
-	mounted() {
-		this.reset()
-	},
-	methods: {
-
-		clearValue() {
-			this.searchValue = ''
-		},
-		reset() {
-			this.selectedColumn = this.columns.find(col => col.id === this.filterEntry.columnId)
-			this.selectedOperator = getFilterWithId(this.filterEntry.operator)
-			this.searchValue = this.filterEntry.value && this.filterEntry.value.startsWith('@') ? getMagicFieldWithId(this.filterEntry.value.substring(1)) : this.filterEntry.value
-		},
-	},
 }
 </script>
 
@@ -149,8 +168,7 @@ export default {
 
 .select-field {
 	width: 30%;
-	/* flex: 1; */
-	padding: 8px;
+	padding: calc(var(--default-grid-baseline) * 2);
 	min-width: auto !important;
 }
 

diff --git a/src/modules/main/partials/editViewPartials/filter/FilterForm.vue b/src/modules/main/partials/editViewPartials/filter/FilterForm.vue
@@ -5,7 +5,7 @@
 		</div>
 		<div v-for="(filterGroup, i) in mutableFilters" :key="i">
 			<FilterGroup
-				:filter-group="filterGroup"
+				:filter-group.sync="mutableFilters[i]"
 				:view-filter-group="viewFilters ? viewFilters[i] ?? [] : null"
 				:generated-filter-group="generatedFilters ? generatedFilters[i] ?? [] : null"
 				:columns="columns"
@@ -60,15 +60,18 @@ export default {
 			default: null,
 		},
 	},
-	data() {
-		return {
-			mutableFilters: this.filters,
-		}
-	},
 
 	computed: {
 		hasFilter() {
-			return (this.mutableFilters !== null && this.mutableFilters.length > 0)
+			return this.mutableFilters?.length > 0
+		},
+		mutableFilters: {
+			get() {
+				return this.filters
+			},
+			set(filters) {
+				this.$emit('update:filters', filters)
+			},
 		},
 	},
 

diff --git a/src/modules/main/partials/editViewPartials/filter/FilterGroup.vue b/src/modules/main/partials/editViewPartials/filter/FilterGroup.vue
@@ -3,10 +3,10 @@
 		<div class="group-text">
 			{{ t('tables', '... that meet all of the following conditions') }}
 		</div>
-		<div v-for="(filter, index) in filterGroup"
-			:key="filter.columnId + filter.operator?.id+ filter.value + index">
+		<div v-for="(filter, index) in mutableFilterGroup"
+			:key="index">
 			<FilterEntry
-				:filter-entry="filter"
+				:filter-entry.sync="mutableFilterGroup[index]"
 				:columns="columns"
 				:class="{'locallyAdded': isLocallyAdded(filter)}"
 				@delete-filter="deleteFilter(index)" />
@@ -54,14 +54,14 @@ export default {
 			default: null,
 		},
 	},
-	data() {
-		return {
-			mutableFilterGroup: this.filterGroup,
-		}
-	},
-	watch: {
-		filterGroup() {
-			this.mutableFilterGroup = this.filterGroup
+	computed: {
+		mutableFilterGroup: {
+			get() {
+				return this.filterGroup
+			},
+			set(filterGroup) {
+				this.$emit('update:filter-group', filterGroup)
+			},
 		},
 	},
 	methods: {

diff --git a/src/modules/modals/ViewSettings.vue b/src/modules/modals/ViewSettings.vue
@@ -32,7 +32,7 @@
 		<!--filtering-->
 		<NcAppSettingsSection v-if="columns != null && canManageTable(view)" id="filter" :title="t('tables', 'Filter')">
 			<FilterForm
-				:filters="mutableView.filter"
+				:filters.sync="mutableFilters"
 				:view-filters="viewSetting ? view.filter : null"
 				:generated-filters="viewSetting ? generatedView.filter : null"
 				:columns="allColumns" />
@@ -92,7 +92,7 @@ export default {
 			type: Object,
 			default: null,
 		},
-		// If a new view is created or an existing view is edit
+		// If a new view is created or an existing view is edited
 		createView: {
 			type: Boolean,
 			default: false,
@@ -121,6 +121,14 @@ export default {
 		}
 	},
 	computed: {
+		mutableFilters: {
+			get() {
+				return this.mutableView.filter
+			},
+			set(filters) {
+				this.mutableView.filter = filters
+			},
+		},
 		saveText() {
 			if (this.createView) {
 				return t('tables', 'Create View')

diff --git a/src/shared/components/ncTable/mixins/filter.js b/src/shared/components/ncTable/mixins/filter.js
@@ -68,7 +68,7 @@ export const Filters = {
 		id: FilterIds.IsEqual,
 		label: t('tables', 'Is equal'),
 		shortLabel: '=',
-		goodFor: [ColumnTypes.TextLine, ColumnTypes.Number, ColumnTypes.SelectionCheck, ColumnTypes.TextLink, ColumnTypes.NumberStars, ColumnTypes.NumberProgress, ColumnTypes.DatetimeDate, ColumnTypes.DatetimeTime, ColumnTypes.Datetime],
+		goodFor: [ColumnTypes.TextLine, ColumnTypes.Number, ColumnTypes.SelectionCheck, ColumnTypes.TextLink, ColumnTypes.NumberStars, ColumnTypes.NumberProgress, ColumnTypes.DatetimeDate, ColumnTypes.DatetimeTime, ColumnTypes.Datetime, ColumnTypes.Selection],
 		incompatibleWith: [FilterIds.IsEmpty, FilterIds.IsEqual, FilterIds.BeginsWith, FilterIds.EndsWith, FilterIds.Contains, FilterIds.IsGreaterThan, FilterIds.IsGreaterThanOrEqual, FilterIds.IsLowerThan, FilterIds.IsLowerThanOrEqual],
 	}),
 	IsGreaterThan: new Filter({