-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #52 from Vizzuality/SKY30-91-fe-allow-filtering-th…
…e-table [SKY30-91] Allow Filtering of the Global/Regional Data Tool table
- Loading branch information
Showing
10 changed files
with
436 additions
and
150 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| import * as CheckboxPrimitive from '@radix-ui/react-checkbox'; | ||
| import { cva, type VariantProps } from 'class-variance-authority'; | ||
| import { CheckIcon } from 'lucide-react'; | ||
|
|
||
| import { cn } from '@/lib/classnames'; | ||
|
|
||
| const checkboxVariants = cva(''); | ||
|
|
||
| const Checkbox = React.forwardRef< | ||
| React.ElementRef<typeof CheckboxPrimitive.Root>, | ||
| React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & | ||
| VariantProps<typeof checkboxVariants> | ||
| >(({ className, name, ...props }, ref) => ( | ||
| <CheckboxPrimitive.Root | ||
| ref={ref} | ||
| className={cn(checkboxVariants(), className, 'h-3.5 w-3.5 border-2 border-black')} | ||
| defaultChecked | ||
| id={name} | ||
| name={name} | ||
| {...props} | ||
| > | ||
| <CheckboxPrimitive.Indicator className="text-black"> | ||
| <CheckIcon className="h-2.5 w-2.5" strokeWidth={4} /> | ||
| </CheckboxPrimitive.Indicator> | ||
| </CheckboxPrimitive.Root> | ||
| )); | ||
|
|
||
| Checkbox.displayName = CheckboxPrimitive.Root.displayName; | ||
|
|
||
| export { Checkbox }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| // ? This should be a Collection Type on Strapi, relation with location, which we would then pull from the API | ||
| export const LOCATION_TYPES_FILTER_OPTIONS = [ | ||
| { | ||
| name: 'Country', | ||
| value: 'country', | ||
| }, | ||
| { | ||
| name: 'Worldwide', | ||
| value: 'worldwide', | ||
| }, | ||
| { | ||
| name: 'HighSeas', | ||
| value: 'highseas', | ||
| }, | ||
| { | ||
| name: 'Region', | ||
| value: 'region', | ||
| }, | ||
| ]; |
131 changes: 131 additions & 0 deletions
131
frontend/src/containers/data-tool/content/details/table/filters-button/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,131 @@ | ||
| import { useEffect, useMemo, useState } from 'react'; | ||
|
|
||
| import { useForm } from 'react-hook-form'; | ||
|
|
||
| import { xor } from 'lodash-es'; | ||
| import { Filter } from 'lucide-react'; | ||
|
|
||
| import { Button } from '@/components/ui/button'; | ||
| import { Checkbox } from '@/components/ui/checkbox'; | ||
| import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; | ||
|
|
||
| const ICON_CLASSNAMES = 'h-4 w-4 fill-black'; | ||
|
|
||
| type FiltersButtonProps = { | ||
| field: string; | ||
| options: { | ||
| name: string; | ||
| value: string; | ||
| }[]; | ||
| values: string[]; | ||
| onChange: (field: string, values: string[]) => void; | ||
| }; | ||
|
|
||
| type FormValues = { | ||
| filters: string[]; | ||
| }; | ||
|
|
||
| const FiltersButton: React.FC<FiltersButtonProps> = ({ field, options, values, onChange }) => { | ||
| const allFilterValues = useMemo(() => options.map(({ value }) => value), [options]); | ||
|
|
||
| const [isFiltersOpen, setIsFiltersOpen] = useState<boolean>(false); | ||
|
|
||
| const { watch, setValue } = useForm<FormValues>({ | ||
| mode: 'onChange', | ||
| defaultValues: { | ||
| filters: values, | ||
| }, | ||
| }); | ||
|
|
||
| const filters = watch('filters'); | ||
|
|
||
| useEffect(() => { | ||
| const filtersChanged = xor(filters, values).length > 0; | ||
| const allFiltersSelected = filters.length === allFilterValues.length; | ||
|
|
||
| if (filtersChanged || allFiltersSelected) { | ||
| onChange(field, filters); | ||
| } | ||
| }, [field, filters, values, onChange, allFilterValues.length]); | ||
|
|
||
| const handleSelectAll = () => { | ||
| setValue('filters', allFilterValues); | ||
| }; | ||
|
|
||
| const handleClearAll = () => { | ||
| setValue('filters', []); | ||
| }; | ||
|
|
||
| const handleOnCheckedChange = (type, checked) => { | ||
| if (checked) { | ||
| setValue('filters', [...filters, type]); | ||
| } else { | ||
| setValue( | ||
| 'filters', | ||
| filters.filter((entry) => entry !== type) | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| const noFiltersSelected = filters.length === 0; | ||
|
|
||
| return ( | ||
| <div> | ||
| <Popover open={isFiltersOpen} onOpenChange={setIsFiltersOpen}> | ||
| <PopoverTrigger> | ||
| <Button className="-ml-4" size="icon" variant="ghost"> | ||
| <span className="sr-only">Filter</span> | ||
| <Filter className={ICON_CLASSNAMES} aria-hidden /> | ||
| </Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent align="start" className="flex flex-col gap-6 font-mono text-xs"> | ||
| <div className="space-between flex gap-6"> | ||
| <Button | ||
| className="p-0 font-bold normal-case underline hover:bg-transparent" | ||
| variant="ghost" | ||
| size="sm" | ||
| onClick={handleSelectAll} | ||
| > | ||
| Select all | ||
| </Button> | ||
| <Button | ||
| className="p-0 font-bold normal-case text-slate-400 hover:bg-transparent hover:text-slate-400" | ||
| variant="ghost" | ||
| size="sm" | ||
| onClick={handleClearAll} | ||
| > | ||
| Clear all (None selected) | ||
| </Button> | ||
| </div> | ||
| <div className="mb-1 flex flex-col gap-5 py-2"> | ||
| <form className="flex flex-col gap-5"> | ||
| {options.map(({ name, value }) => { | ||
| return ( | ||
| <div key={value} className="flex items-center"> | ||
| <Checkbox | ||
| name={value} | ||
| value={value} | ||
| checked={filters.includes(value)} | ||
| onCheckedChange={(v) => handleOnCheckedChange(value, v)} | ||
| /> | ||
| <label | ||
| className="flex-grow cursor-pointer pl-2 pt-px text-xs leading-none text-black" | ||
| htmlFor={value} | ||
| > | ||
| {name} | ||
| </label> | ||
| </div> | ||
| ); | ||
| })} | ||
| </form> | ||
| </div> | ||
| {noFiltersSelected && ( | ||
| <div className="text-orange">Please, select at least one option</div> | ||
| )} | ||
| </PopoverContent> | ||
| </Popover> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default FiltersButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.