Merge pull request #62694 from Dataport/feature/file-tags

feat(systemtags): implement tag filter

Author: tomek2k1

apps/systemtags/src/components/FileListFilterTags.vue

@@ -0,0 +1,117 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div>
+		<NcTextField
+			v-if="availableTags.length > 5"
+			v-model="searchQuery"
+			type="search"
+			:label="t('systemtags', 'Search tags')" />
+		<NcButton
+			v-for="tag of shownTags"
+			:key="tag.id"
+			alignment="start"
+			:pressed="isSelected(tag)"
+			variant="tertiary"
+			wide
+			@update:pressed="toggleTag(tag, $event)">
+			<template #icon>
+				<NcIconSvgWrapper :path="mdiTagOutline" />
+			</template>
+			{{ tag.displayName }}
+		</NcButton>
+		<span v-if="shownTags.length === 0 && !loading">
+			{{ t('systemtags', 'No tags available') }}
+		</span>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { TagsFilter } from '../files_filters/TagsFilter.ts'
+import type { TagWithId } from '../types.ts'
+
+import { mdiTagOutline } from '@mdi/js'
+import { t } from '@nextcloud/l10n'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
+import { fetchTags } from '../services/api.ts'
+
+const props = defineProps<{
+	filter: TagsFilter
+}>()
+
+const loading = ref(true)
+const searchQuery = ref('')
+const availableTags = ref<TagWithId[]>([])
+const selectedTags = ref<TagWithId[]>([...props.filter.selectedTags])
+
+watch(selectedTags, () => {
+	props.filter.setTags(selectedTags.value.length > 0 ? [...selectedTags.value] : undefined)
+})
+
+onMounted(async () => {
+	try {
+		const tags = await fetchTags()
+		availableTags.value = tags.filter((tag) => tag.userVisible)
+	} finally {
+		loading.value = false
+	}
+	props.filter.addEventListener('reset', resetFilter)
+	props.filter.addEventListener('deselect', onDeselect)
+})
+
+onUnmounted(() => {
+	props.filter.removeEventListener('reset', resetFilter)
+	props.filter.removeEventListener('deselect', onDeselect)
+})
+
+const shownTags = computed(() => {
+	if (!searchQuery.value) {
+		return availableTags.value
+	}
+	const query = searchQuery.value.toLocaleLowerCase()
+	return availableTags.value.filter((tag) => tag.displayName.toLocaleLowerCase().includes(query))
+})
+
+/**
+ * Check if a tag is currently selected
+ *
+ * @param tag The tag to check
+ */
+function isSelected(tag: TagWithId): boolean {
+	return selectedTags.value.some((t) => t.id === tag.id)
+}
+
+/**
+ * Toggle a tag from the selected list
+ *
+ * @param tag The tag to toggle
+ * @param selected Whether the tag should be selected
+ */
+function toggleTag(tag: TagWithId, selected: boolean) {
+	selectedTags.value = selectedTags.value.filter((t) => t.id !== tag.id)
+	if (selected) {
+		selectedTags.value = [...selectedTags.value, tag]
+	}
+}
+
+/**
+ * Reset selected tags (triggered by filter reset event)
+ */
+function resetFilter() {
+	selectedTags.value = []
+}
+
+/**
+ * Remove a single tag from selected (triggered by chip removal)
+ *
+ * @param event The deselect custom event carrying the tag ID
+ */
+function onDeselect(event: CustomEvent<number>) {
+	selectedTags.value = selectedTags.value.filter((t) => t.id !== event.detail)
+}
+</script>

apps/systemtags/src/files_filters/TagsFilter.ts

@@ -0,0 +1,74 @@
+/*!
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { IFileListFilterChip, IFileListFilterWithUi, INode } from '@nextcloud/files'
+import type { TagWithId } from '../types.ts'
+
+import svgTagOutline from '@mdi/svg/svg/tag-outline.svg?raw'
+import { FileListFilter, registerFileListFilter } from '@nextcloud/files'
+import { t } from '@nextcloud/l10n'
+import { defineCustomElement } from 'vue'
+import FileListFilterTagsCE from '../components/FileListFilterTags.vue'
+import { getNodeSystemTags } from '../utils.ts'
+
+const tagName = 'systemtags-file-list-filter-tags'
+
+class TagsFilter extends FileListFilter implements IFileListFilterWithUi {
+	#selectedTags: TagWithId[] = []
+
+	public readonly displayName = t('systemtags', 'Tags')
+	public readonly iconSvgInline = svgTagOutline
+	public readonly tagName = tagName
+
+	constructor() {
+		super('systemtags:tags', 75)
+	}
+
+	public filter(nodes: INode[]): INode[] {
+		if (this.#selectedTags.length === 0) {
+			return nodes
+		}
+
+		const selectedNames = this.#selectedTags.map((tag) => tag.displayName)
+		return nodes.filter((node) => {
+			const nodeTags = getNodeSystemTags(node)
+			return selectedNames.some((name) => nodeTags.includes(name))
+		})
+	}
+
+	public reset(): void {
+		this.dispatchEvent(new CustomEvent('reset'))
+	}
+
+	public get selectedTags(): TagWithId[] {
+		return this.#selectedTags
+	}
+
+	public setTags(tags?: TagWithId[]): void {
+		this.#selectedTags = tags ?? []
+		this.filterUpdated()
+
+		const chips: IFileListFilterChip[] = this.#selectedTags.map((tag) => ({
+			icon: svgTagOutline,
+			text: tag.displayName,
+			onclick: () => {
+				this.dispatchEvent(new CustomEvent('deselect', { detail: tag.id }))
+				this.setTags(this.#selectedTags.filter((t) => t.id !== tag.id))
+			},
+		}))
+		this.updateChips(chips)
+	}
+}
+
+export type { TagsFilter }
+
+/**
+ * Register the file list filter by system tags
+ */
+export function registerTagsFilter() {
+	const TagsFilterElement = defineCustomElement(FileListFilterTagsCE, { shadowRoot: false })
+	customElements.define(tagName, TagsFilterElement)
+	registerFileListFilter(new TagsFilter())
+}

apps/systemtags/src/init.ts

@@ -9,6 +9,7 @@ import { action as bulkSystemTagsAction } from './files_actions/bulkSystemTagsAc
 import { registerFileSidebarAction } from './files_actions/filesSidebarAction.ts'
 import { action as inlineSystemTagsAction } from './files_actions/inlineSystemTagsAction.ts'
 import { action as openInFilesAction } from './files_actions/openInFilesAction.ts'
+import { registerTagsFilter } from './files_filters/TagsFilter.ts'
 import { registerSystemTagsView } from './files_views/systemtagsView.ts'
 
 registerDavProperty('nc:system-tags')
@@ -18,3 +19,4 @@ registerFileAction(openInFilesAction)
 
 registerSystemTagsView()
 registerFileSidebarAction()
+registerTagsFilter()

dist/ActivityCommentAction-BvMB4ZR0.chunk.mjs

@@ -0,0 +1,2 @@
+import{a as t}from"./index-B_OxHYNM.chunk.mjs";import{t as m}from"./translation-DoG5ZELJ-Cnt4vXgN.chunk.mjs";import{C as e,a as p}from"./CommentView-DKkrwe-z.chunk.mjs";import{l as i}from"./activity-CAMqbip4.chunk.mjs";import{b as a,r as s,o as n,c,m as u}from"./Web-YxOIih-q.chunk.mjs";import{_ as l}from"./public-C1mLBHT3.chunk.mjs";import"./mdi-DaKqoE8u.chunk.mjs";import"./NcModal-DiDvgcU8-D2f8VN_9.chunk.mjs";import"./logger-D3RVzcfQ-DRPkuAPJ.chunk.mjs";import"./createElementId-DhjFt1I9-CeyNLNUQ.chunk.mjs";import"./index-kP1pdrFW.chunk.mjs";import"./Check-DJVOsq9N.chunk.mjs";import"./TrashCanOutline-zBEOFG6G.chunk.mjs";import"./PencilOutline-DUsa_r-m.chunk.mjs";import"./NcActionSeparator-B9pNQaji-B5GIovH-.chunk.mjs";import"./NcAvatar-1KxMUN7V-DtAdmWOQ.chunk.mjs";import"./index-C5ZxdJOD.chunk.mjs";import"./util-C9Hc1fff.chunk.mjs";import"./ArrowRight-Ds1zL9Fh.chunk.mjs";import"./colors-Cv9F-jWS-BbMd5FbR.chunk.mjs";import"./NcUserStatusIcon-BF5OEQFU-BbBQ45O1.chunk.mjs";import"./NcActionLink-BFiaYt9A-B1MbKmUJ.chunk.mjs";import"./NcDateTime.vue_vue_type_script_setup_true_lang-BJuPH7S7-B_Nx_tHj.chunk.mjs";import"./NcActionText-CQ9qwJ0p-DjPadvh3.chunk.mjs";import"./NcUserBubble-BXR7vT0V-CeirtlO9.chunk.mjs";import"./GetComments-CnP-ZrGj.chunk.mjs";import"./index-BRj61ap9.chunk.mjs";import"./dav-BAGD64kD.chunk.mjs";import"./externalStorageUtils-CQ1qe2np.chunk.mjs";const d=a({components:{CommentEntry:p},mixins:[e],props:{reloadCallback:{type:Function,required:!0}},methods:{onNewComment(){try{this.reloadCallback()}catch(o){t(m("comments","Could not reload comments")),i.error("Could not reload comments",{error:o})}}}});function C(o,f,y,b,w,N){const r=s("CommentEntry");return n(),c(r,u(o.editorData,{autoComplete:o.autoComplete,resourceType:o.resourceType,editor:!0,userData:o.userData,resourceId:o.resourceId,class:"comments-action",onNew:o.onNewComment}),null,16,["autoComplete","resourceType","userData","resourceId","onNew"])}const W=l(d,[["render",C],["__scopeId","data-v-099b6b12"]]);export{W as default};
+//# sourceMappingURL=ActivityCommentAction-BvMB4ZR0.chunk.mjs.map

…CommentAction-eCmL1yLx.chunk.mjs.license …CommentAction-BvMB4ZR0.chunk.mjs.licensedist/ActivityCommentAction-eCmL1yLx.chunk.mjs.license renamed to dist/ActivityCommentAction-BvMB4ZR0.chunk.mjs.license dist/ActivityCommentAction-eCmL1yLx.chunk.mjs.license renamed to dist/ActivityCommentAction-BvMB4ZR0.chunk.mjs.license

@@ -0,0 +1,2 @@
+import{t as s}from"./translation-DoG5ZELJ-Cnt4vXgN.chunk.mjs";import{C as p,a as i}from"./CommentView-DKkrwe-z.chunk.mjs";import{_ as a}from"./public-C1mLBHT3.chunk.mjs";import{r as n,o as c,c as u,m as d}from"./Web-YxOIih-q.chunk.mjs";import"./index-kP1pdrFW.chunk.mjs";import"./PencilOutline-DUsa_r-m.chunk.mjs";import"./logger-D3RVzcfQ-DRPkuAPJ.chunk.mjs";import"./createElementId-DhjFt1I9-CeyNLNUQ.chunk.mjs";import"./NcModal-DiDvgcU8-D2f8VN_9.chunk.mjs";import"./NcActionSeparator-B9pNQaji-B5GIovH-.chunk.mjs";import"./NcAvatar-1KxMUN7V-DtAdmWOQ.chunk.mjs";import"./index-C5ZxdJOD.chunk.mjs";import"./util-C9Hc1fff.chunk.mjs";import"./ArrowRight-Ds1zL9Fh.chunk.mjs";import"./colors-Cv9F-jWS-BbMd5FbR.chunk.mjs";import"./NcUserStatusIcon-BF5OEQFU-BbBQ45O1.chunk.mjs";import"./NcActionLink-BFiaYt9A-B1MbKmUJ.chunk.mjs";import"./NcDateTime.vue_vue_type_script_setup_true_lang-BJuPH7S7-B_Nx_tHj.chunk.mjs";import"./NcActionText-CQ9qwJ0p-DjPadvh3.chunk.mjs";import"./Check-DJVOsq9N.chunk.mjs";import"./NcUserBubble-BXR7vT0V-CeirtlO9.chunk.mjs";import"./TrashCanOutline-zBEOFG6G.chunk.mjs";import"./index-B_OxHYNM.chunk.mjs";import"./mdi-DaKqoE8u.chunk.mjs";import"./activity-CAMqbip4.chunk.mjs";import"./GetComments-CnP-ZrGj.chunk.mjs";import"./index-BRj61ap9.chunk.mjs";import"./dav-BAGD64kD.chunk.mjs";import"./externalStorageUtils-CQ1qe2np.chunk.mjs";const l={name:"ActivityCommentEntry",components:{CommentEntry:i},mixins:[p],props:{comment:{type:Object,required:!0},reloadCallback:{type:Function,required:!0}},data(){return{commentMessage:""}},watch:{comment(){this.commentMessage=this.comment.props.message}},mounted(){this.commentMessage=this.comment.props.message},methods:{t:s}};function g(t,e,o,y,m,C){const r=n("CommentEntry");return c(),u(r,d({ref:"comment",tag:"li"},o.comment.props,{autoComplete:t.autoComplete,resourceType:t.resourceType,message:m.commentMessage,resourceId:t.resourceId,userData:t.genMentionsData(o.comment.props.mentions),class:"comments-activity",onDelete:e[0]||(e[0]=f=>o.reloadCallback())}),null,16,["autoComplete","resourceType","message","resourceId","userData"])}const U=a(l,[["render",g],["__scopeId","data-v-2d51dbfd"]]);export{U as default};
+//# sourceMappingURL=ActivityCommentEntry-lB3BaOmt.chunk.mjs.map