diff --git a/src/app/(user)/components/workspace/components/context/components/tag-filter-select.tsx b/src/app/(user)/components/workspace/components/context/components/tag-filter-select.tsx index 6275c6a3..35422a43 100644 --- a/src/app/(user)/components/workspace/components/context/components/tag-filter-select.tsx +++ b/src/app/(user)/components/workspace/components/context/components/tag-filter-select.tsx @@ -31,11 +31,15 @@ export function FilterSelect({ defaultValue }: { defaultValue?: FilterOption }) router.push(`${pathname}?${newSerchParams}`); } - return handleSelectOption(value as FilterOption)} + /> + + ); } diff --git a/src/app/(user)/components/workspace/components/context/components/tags-selector.tsx b/src/app/(user)/components/workspace/components/context/components/tags-selector.tsx new file mode 100644 index 00000000..6568e933 --- /dev/null +++ b/src/app/(user)/components/workspace/components/context/components/tags-selector.tsx @@ -0,0 +1,49 @@ +'use client'; + +import { usePathname, useRouter, useSearchParams } from 'next/navigation'; +import { useState } from 'react'; + +import Button from '@/app/components/ui/button/button'; +import { useCloseUiComponent } from '@/app/components/ui/hooks/useCloseUiComponent'; +import Popover from '@/app/components/ui/popover/popover'; + +export default function TagsSelector({ options }: { options: { value: string, label: string }[]}) { + const pathname = usePathname(); + const searchParams = useSearchParams(); + const router = useRouter(); + const [tags, setTags] = useState([]); + const [isClosed, close] = useCloseUiComponent(); + + function handleSelectOption(tag: string) { + setTags([...tags, tag]); + } + + function applyTags() { + const newSerchParams = new URLSearchParams(searchParams.toString()); + const currentTags = newSerchParams.get('selectedTagsFilter')?.split(',') || []; + newSerchParams.set('selectedTagsFilter', [...currentTags, ...tags].join(',')); + router.push(`${pathname}?${newSerchParams}`); + close(); + setTags([]); + } + + return ( +
+ }> +
+ {options.length > 0 ? options.map(({ value, label }) => ( +
handleSelectOption(value)} + key={value} + className={`cursor-pointer rounded border border-neutral-500 p-1 hover:bg-neutral-500 ${tags.includes(value) ? 'bg-neutral-500' : ''}`} + > + {label} +
+ )) :
No tags left to apply
} +
+
+ +
+
+
+ ); +} diff --git a/src/app/(user)/components/workspace/components/context/context.tsx b/src/app/(user)/components/workspace/components/context/context.tsx index baa9bc21..c999bb24 100644 --- a/src/app/(user)/components/workspace/components/context/context.tsx +++ b/src/app/(user)/components/workspace/components/context/context.tsx @@ -6,6 +6,7 @@ import { FilterOption } from '@/lib/notes/get-notes-by-tags'; import NoteComponent from './components/note'; import { FilterSelect } from './components/tag-filter-select'; +import TagsSelector from './components/tags-selector'; function buildQueryWithTag(tag: string, selectedTagsFilter?: string[]) { return selectedTagsFilter?.length ? { selectedTagsFilter: [...selectedTagsFilter, tag].join(',') } : { selectedTagsFilter: tag }; @@ -47,6 +48,14 @@ export default function Context({ tags, notes, selectedTagsFilter, selectedOpera } const dynamicTags = tags.reduce((tagsSofar, tag) => { + if (!fixedTagValues.includes(tag) && !isSelected(tag)) { + return [...tagsSofar, { value: tag, label: tag }]; + } + + return tagsSofar; + }, [] as { value: string, label: string }[]); + + const selectedDynamicTags = selectedTagsFilter?.reduce((tagsSofar, tag) => { if (!fixedTagValues.includes(tag)) { return [...tagsSofar, { value: tag, label: tag }]; } @@ -56,12 +65,24 @@ export default function Context({ tags, notes, selectedTagsFilter, selectedOpera return (
-
+
+ +
+
{fixedTags.map(renderTag)} - {dynamicTags.map(renderTag)} + {selectedDynamicTags?.map(renderTag)}
+ { + notes.length === 0 ? ( +
+
No notes found.
+ {selectedOperator === FilterOption.Intersection ?
Try removing some tags or using the Union operator
: null} +
+ ) : null + } + {notes.map(({ text, id }) => (
diff --git a/src/app/components/ui/popover/popover.tsx b/src/app/components/ui/popover/popover.tsx index f6833bdf..111db04a 100644 --- a/src/app/components/ui/popover/popover.tsx +++ b/src/app/components/ui/popover/popover.tsx @@ -40,7 +40,7 @@ export default function Popover({ {isPopoverOpen ? -