feat(FilePicker): Expose canPick option to gray out nodes

Signed-off-by: Louis Chmn <[email protected]>

Author: artonge

lib/components/FilePicker/FileList.vue

@@ -67,7 +67,7 @@
 						:key="file.fileid || file.path"
 						:allow-pick-directory="allowPickDirectory"
 						:show-checkbox="multiselect"
-						:can-pick="multiselect || selectedFiles.length === 0 || selectedFiles.includes(file)"
+						:can-pick="(multiselect || selectedFiles.length === 0 || selectedFiles.includes(file)) && (canPick === undefined || canPick(file))"
 						:selected="selectedFiles.includes(file)"
 						:node="file"
 						:crop-image-previews="cropImagePreviews"
@@ -82,6 +82,7 @@
 <script setup lang="ts">
 import type { FilesSortingMode, INode } from '@nextcloud/files'
 import type { FileListViews } from '../../composables/filesSettings.ts'
+import type { IFilePickerCanPick } from '../types.ts'
 
 import { FileType, sortNodes } from '@nextcloud/files'
 import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
@@ -125,6 +126,10 @@ const props = defineProps<{
 	 * Files to show
 	 */
 	files: INode[]
+	/**
+	 * Custom function to decide if a node can be picked
+	 */
+	canPick?: IFilePickerCanPick
 }>()
 
 /// sorting related stuff

lib/components/FilePicker/FileListRow.vue

@@ -10,6 +10,7 @@
 		:class="[
 			{
 				'file-picker__row--selected': selected && !showCheckbox,
+				'file-picker__row--not-pickable': !isPickable,
 			},
 		]"
 		:data-filename="node.basename"
@@ -108,6 +109,10 @@ function toggleSelected() {
  * Handle clicking the table row, if it is a directory it is opened, else selected
  */
 function handleClick() {
+	if (!isPickable.value) {
+		return
+	}
+
 	if (isDirectory.value) {
 		emit('enterDirectory', props.node)
 	} else {
@@ -135,6 +140,12 @@ function handleKeyDown(event: KeyboardEvent) {
 		&--selected {
 			background-color: var(--color-background-dark);
 		}
+
+		&--not-pickable {
+			filter: saturate(0.7);
+			opacity: 0.7;
+		}
+
 		&:hover {
 			background-color: var(--color-background-hover);
 		}

lib/components/FilePicker/FilePicker.vue

@@ -43,6 +43,7 @@
 				:multiselect="multiselect"
 				:loading="isLoading"
 				:name="viewHeadline"
+				:can-pick="canPickFn"
 				@update:path="currentView = 'files'" />
 			<NcEmptyContent
 				v-else-if="filterString"
@@ -67,7 +68,7 @@
 <script setup lang="ts">
 import type { Node } from '@nextcloud/files'
 import type { IFilesViewId } from '../../composables/views.ts'
-import type { IDialogButton, IFilePickerButton, IFilePickerButtonFactory, IFilePickerFilter } from '../types.ts'
+import type { IDialogButton, IFilePickerButton, IFilePickerButtonFactory, IFilePickerCanPick, IFilePickerFilter } from '../types.ts'
 
 import { emit as emitOnEventBus } from '@nextcloud/event-bus'
 import { computed, onMounted, ref, shallowRef, toRef, watch } from 'vue'
@@ -108,6 +109,11 @@ const props = withDefaults(defineProps<{
 	 */
 	filterFn?: IFilePickerFilter
 
+	/**
+	 * Custom function to decide if a node can be picked
+	 */
+	canPickFn?: IFilePickerCanPick
+
 	/**
 	 * List of allowed mime types
 	 * You can use placeholders for e.g. allowing all subtypes of images `['image/*']`.
@@ -132,6 +138,7 @@ const props = withDefaults(defineProps<{
 	allowPickDirectory: false,
 	disabledNavigation: false,
 	filterFn: undefined,
+	canPickFn: undefined,
 	mimetypeFilter: () => [],
 	multiselect: false,
 	path: undefined,

lib/components/types.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import type { Node } from '@nextcloud/files'
+import type { INode, Node } from '@nextcloud/files'
 
 export type IDialogSeverity = 'info' | 'warning' | 'error'
 
@@ -58,3 +58,8 @@ export type IFilePickerButtonFactory = (selectedNodes: Node[], currentPath: stri
  * Type of filter functions to filter the FilePicker's file list
  */
 export type IFilePickerFilter = (node: Node) => boolean
+
+/**
+ * Type of functions to allow or not picking a node
+ */
+export type IFilePickerCanPick = (node: INode) => boolean

lib/filepicker-builder.ts

@@ -4,7 +4,7 @@
  */
 
 import type { Node } from '@nextcloud/files'
-import type { IFilePickerButton, IFilePickerButtonFactory, IFilePickerFilter } from './components/types.ts'
+import type { IFilePickerButton, IFilePickerButtonFactory, IFilePickerCanPick, IFilePickerFilter } from './components/types.ts'
 
 import IconMove from '@mdi/svg/svg/folder-move.svg?raw'
 import IconCopy from '@mdi/svg/svg/folder-multiple.svg?raw'
@@ -37,6 +37,7 @@ export class FilePicker<IsMultiSelect extends boolean> {
 	private buttons: IFilePickerButton[] | IFilePickerButtonFactory
 	private path?: string
 	private filter?: IFilePickerFilter
+	private canPick?: IFilePickerCanPick
 	private container?: string
 	private disabledNavigation: boolean
 
@@ -48,6 +49,7 @@ export class FilePicker<IsMultiSelect extends boolean> {
 		buttons: IFilePickerButton[] | IFilePickerButtonFactory,
 		path?: string,
 		filter?: IFilePickerFilter,
+		canPick?: IFilePickerCanPick,
 		container?: string,
 		disabledNavigation = false,
 	) {
@@ -57,6 +59,7 @@ export class FilePicker<IsMultiSelect extends boolean> {
 		this.directoriesAllowed = directoriesAllowed
 		this.path = path
 		this.filter = filter
+		this.canPick = canPick
 		this.buttons = buttons
 		this.container = container
 		this.disabledNavigation = disabledNavigation
@@ -78,6 +81,7 @@ export class FilePicker<IsMultiSelect extends boolean> {
 			mimetypeFilter: this.mimeTypeFilter,
 			multiselect: this.multiSelect,
 			filterFn: this.filter,
+			canPickFn: this.canPick,
 			disabledNavigation: this.disabledNavigation,
 		}, {
 			container: this.container,
@@ -112,6 +116,7 @@ export class FilePickerBuilder<IsMultiSelect extends boolean> {
 	private directoriesAllowed = false
 	private path?: string
 	private filter?: IFilePickerFilter
+	private canPick?: IFilePickerCanPick
 	private buttons: IFilePickerButton[] | IFilePickerButtonFactory = []
 	private container?: string
 	private disabledNavigation = false
@@ -269,6 +274,16 @@ export class FilePickerBuilder<IsMultiSelect extends boolean> {
 		return this
 	}
 
+	/**
+	 * Add function to allow or not picking a node
+	 *
+	 * @param canPick Function to decide if a node can be picked
+	 */
+	public setCanPick(canPick: IFilePickerCanPick) {
+		this.canPick = canPick
+		return this
+	}
+
 	/**
 	 * Disable navigation (view selection)
 	 */
@@ -289,6 +304,7 @@ export class FilePickerBuilder<IsMultiSelect extends boolean> {
 			this.buttons,
 			this.path,
 			this.filter,
+			this.canPick,
 			this.container,
 			this.disabledNavigation,
 		)

lib/index.ts

@@ -57,5 +57,6 @@ export type {
 	IDialogButton,
 	IDialogSeverity,
 	IFilePickerButton,
+	IFilePickerCanPick,
 	IFilePickerFilter,
 } from './components/types.ts'