Add possibility filter select/multiselect columns with dropdown

src/shared/components/ncTable/mixins/columnsTypes/selection.js

@@ -54,6 +54,7 @@ export default class SelectionColumn extends AbstractSelectionColumn {
 		const filterValue = filter.magicValuesEnriched ? filter.magicValuesEnriched : filter.value
 		const cellLabel = this.getLabel(cell.value)
 		const filterMethod = {
+			[FilterIds.ContainsItem]() { return filterValue.map(option => option.id).includes(cell.value) },
 			[FilterIds.Contains]() { return cellLabel?.toLowerCase().includes(filterValue?.toLowerCase()) },
 			[FilterIds.DoesNotContain]() { return !cellLabel?.toLowerCase().includes(filterValue?.toLowerCase()) },
 			[FilterIds.BeginsWith]() { return cellLabel?.startsWith(filterValue) },

src/shared/components/ncTable/mixins/columnsTypes/selectionMulti.js

@@ -71,6 +71,13 @@ export default class SelectionMutliColumn extends AbstractSelectionColumn {
 		const valueString = this.getValueString(cell)
 
 		const filterMethod = {
+			[FilterIds.ContainsItem]() {
+				if ((!cell.value || !cell.value.length) && filter.value.length > 0) {
+					return false
+				}
+				const filterOptionIds = filter.value.map(option => option.id)
+				return cell.value.filter(v => filterOptionIds.includes(v)).length > 0
+			},
 			[FilterIds.Contains]() { return valueString?.includes(filterValue) },
 			[FilterIds.DoesNotContain]() { return !valueString?.includes(filterValue) },
 			[FilterIds.IsEqual]() { return valueString === filterValue },

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

@@ -39,6 +39,7 @@ export function getFilterWithId(id) {
 
 export const FilterIds = {
 	Contains: 'contains',
+	ContainsItem: 'contains-item',
 	DoesNotContain: 'does-not-contain',
 	BeginsWith: 'begins-with',
 	EndsWith: 'ends-with',
@@ -52,6 +53,12 @@ export const FilterIds = {
 }
 
 export const Filters = {
+	ContainsItem: new Filter({
+		id: FilterIds.ContainsItem,
+		label: t('tables', 'Contains items'),
+		goodFor: [ColumnTypes.SelectionMulti, ColumnTypes.Selection],
+		incompatibleWith: [FilterIds.DoesNotContain, FilterIds.IsEmpty, FilterIds.IsEqual],
+	}),
 	Contains: new Filter({
 		id: FilterIds.Contains,
 		label: t('tables', 'Contains'),
@@ -128,8 +135,16 @@ export const Filters = {
 }
 
 export function getFiltersForColumn(column, viewSetting) {
-	if (viewSetting?.filter?.length > 0) {
-		return viewSetting.filter.filter(filter => filter.columnId === column.id)
-	}
-	return []
+	const filters = viewSetting?.filter?.filter(filter => {
+		if (filter.columnId !== column.id) {
+			return false
+		}
+
+		if (filter.operator.id === FilterIds.ContainsItem) {
+			return filter.value.length > 0
+		}
+
+		return true
+	})
+	return filters?.length > 0 ? filters : []
 }

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

@@ -42,6 +42,10 @@ export default {
 
 	computed: {
 		getValue() {
+			if (FilterIds.ContainsItem === this.operator.id) {
+				return this.value
+			}
+
 			let value = this.value
 			Object.values(MagicFields).forEach(field => {
 				value = value.replace('@' + field.id, field.label)
@@ -51,6 +55,8 @@ export default {
 		labelText() {
 			if (this.operator.id === FilterIds.IsEmpty) {
 				return this.operator.getOperatorLabel()
+			} else if (this.operator.id === FilterIds.ContainsItem) {
+				return this.operator.getOperatorLabel() + ' "' + this.getValue.map(item => item.label).join(', ') + '"'
 			} else {
 				return this.operator.getOperatorLabel() + ' "' + this.getValue + '"'
 			}

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

@@ -36,7 +36,26 @@
 					{{ t('tables', 'Back') }}
 				</NcActionButton>
 				<NcActionCaption :name="t('tables', 'Search for value')" />
+
+				<template v-if="'contains-item' === selectedOperator.id">
+					<NcActionInput
+						v-model="searchOptions"
+						type="multiselect"
+						:multiple="true"
+						:options="column.selectionOptions"
+						:placeholder="t('tables', 'Select options')" />
+					<NcActionButton
+						:close-after-click="true"
+						@click="submitFilterInput()">
+						<template #icon>
+							<Magnify :size="20" />
+						</template>
+						{{ t('tables', 'Submit') }}
+					</NcActionButton>
+				</template>
+
 				<NcActionInput
+					v-else
 					ref="filterInput"
 					:label-visible="false"
 					:label="t('tables', 'Keyword and submit')"
@@ -47,6 +66,7 @@
 						<Magnify :size="20" />
 					</template>
 				</NcActionInput>
+
 				<NcActionCaption
 					v-if="getMagicFields.length > 0"
 					:name="t('tables', 'Or use magic values')" />
@@ -184,6 +204,7 @@ export default {
 	data() {
 		return {
 			searchValue: '',
+			searchOptions: [],
 			operator: null,
 			sortMode: null,
 			term: '',
@@ -334,6 +355,8 @@ export default {
 			}
 			this.createFilter()
 			this.localOpenState = false
+			this.searchOptions = []
+			this.selectOperator = false
 		},
 		getFilterForColumn(column) {
 			return this.localViewSetting?.filter?.filter(item => item.columnId === column.id)
@@ -342,18 +365,18 @@ export default {
 			const filterObject = {
 				columnId: this.column.id,
 				operator: this.selectedOperator,
-				value: this.searchValue,
+				value: FilterIds.ContainsItem === this.selectedOperator.id ? this.searchOptions : this.searchValue,
 			}
 			if (!this.localViewSetting.filter) {
 				this.localViewSetting.filter = []
 			}
 			this.localViewSetting.filter.push(filterObject)
 			this.localViewSetting = JSON.parse(JSON.stringify(this.localViewSetting))
-			this.close()
 		},
 		reset() {
 			this.operator = null
 			this.searchValue = ''
+			this.searchOptions = []
 			this.sortMode = this.getSortMode
 			this.selectOperator = false
 			this.selectValue = false
@@ -409,4 +432,8 @@ export default {
 .selected-option {
 	width: 100%;
 }
+
+:deep(.vs__dropdown-menu) {
+	--vs-dropdown-max-height: 120px;
+}
 </style>

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

@@ -98,7 +98,7 @@ import {
 import { MetaColumns } from '../mixins/metaColumns.js'
 import { translate as t } from '@nextcloud/l10n'
 import { useTablesStore } from '../../../../store/store.js'
-import { getFiltersForColumn } from '../mixins/filter.js'
+import { FilterIds, getFiltersForColumn } from '../mixins/filter.js'
 
 export default {
 	name: 'CustomTable',
@@ -347,6 +347,10 @@ export default {
 	methods: {
 		t,
 		addMagicFieldsValues(filter) {
+			if (FilterIds.ContainsItem === filter.operator.id) {
+				return
+			}
+
 			Object.values(MagicFields).forEach(field => {
 				const newFilterValue = filter.value.replace('@' + field.id, field.replace)
 				if (filter.value !== newFilterValue) {