import { Checkbox } from "@/components/ui/checkbox"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "@/components/ui/command"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { cn } from "@/lib/utils"; import { Calendar, CalendarPlus, CalendarSync, Check, Circle, CircleAlert, CircleCheck, CircleDashed, CircleDotDashed, CircleEllipsis, CircleX, SignalHigh, SignalLow, SignalMedium, Tag, UserCircle, X, } from "lucide-react"; import { Dispatch, SetStateAction, useRef, useState, useEffect } from "react"; import { Avatar, AvatarFallback } from "@/components/ui/avatar"; import { Button } from "@/components/ui/button"; import { AnimatePresence, motion } from "motion/react"; interface AnimateChangeInHeightProps { children: React.ReactNode; className?: string; } export const AnimateChangeInHeight: React.FC = ({ children, className, }) => { const containerRef = useRef(null); const [height, setHeight] = useState("auto"); useEffect(() => { if (containerRef.current) { const resizeObserver = new ResizeObserver((entries) => { // We only have one entry, so we can use entries[0]. const observedHeight = entries[0].contentRect.height; setHeight(observedHeight); }); resizeObserver.observe(containerRef.current); return () => { // Cleanup the observer when the component is unmounted resizeObserver.disconnect(); }; } }, []); return (

{children}

); }; export enum FilterType { STATUS = "Status", ASSIGNEE = "Assignee", LABELS = "Labels", PRIORITY = "Priority", DUE_DATE = "Due date", CREATED_DATE = "Created date", UPDATED_DATE = "Updated date", } export enum FilterOperator { IS = "is", IS_NOT = "is not", IS_ANY_OF = "is any of", INCLUDE = "include", DO_NOT_INCLUDE = "do not include", INCLUDE_ALL_OF = "include all of", INCLUDE_ANY_OF = "include any of", EXCLUDE_ALL_OF = "exclude all of", EXCLUDE_IF_ANY_OF = "exclude if any of", BEFORE = "before", AFTER = "after", } export enum Status { BACKLOG = "Backlog", TODO = "Todo", IN_PROGRESS = "In Progress", IN_REVIEW = "In Review", DONE = "Done", CANCELLED = "Cancelled", } export enum Assignee { ANDREW_LUO = "Andrew Luo", NO_ASSIGNEE = "No assignee", } export enum Labels { BUG = "Bug", FEATURE = "Feature", HOTFIX = "Hotfix", RELEASE = "Release", } export enum Priority { URGENT = "Urgent", HIGH = "High", MEDIUM = "Medium", LOW = "Low", } export enum DueDate { IN_THE_PAST = "in the past", IN_24_HOURS = "24 hours from now", IN_3_DAYS = "3 days from now", IN_1_WEEK = "1 week from now", IN_1_MONTH = "1 month from now", IN_3_MONTHS = "3 months from now", } export type FilterOption = { name: FilterType | Status | Assignee | Labels | Priority | DueDate; icon: React.ReactNode | undefined; label?: string; }; export type Filter = { id: string; type: FilterType; operator: FilterOperator; value: string[]; }; const FilterIcon = ({ type, }: { type: FilterType | Status | Assignee | Labels | Priority; }) => { switch (type) { case Assignee.ANDREW_LUO: return ( AL ); case Assignee.NO_ASSIGNEE: return ; case FilterType.STATUS: return ; case FilterType.ASSIGNEE: return ; case FilterType.LABELS: return ; case FilterType.PRIORITY: return ; case FilterType.DUE_DATE: return ; case FilterType.CREATED_DATE: return ; case FilterType.UPDATED_DATE: return ; case Status.BACKLOG: return ; case Status.TODO: return ; case Status.IN_PROGRESS: return ; case Status.IN_REVIEW: return ; case Status.DONE: return ; case Status.CANCELLED: return ; case Priority.URGENT: return ; case Priority.HIGH: return ; case Priority.MEDIUM: return ; case Priority.LOW: return ; case Labels.BUG: return

; case Labels.FEATURE: return

; case Labels.HOTFIX: return

; case Labels.RELEASE: return

; } }; export const filterViewOptions: FilterOption[][] = [ [ { name: FilterType.STATUS, icon: , }, { name: FilterType.ASSIGNEE, icon: , }, { name: FilterType.LABELS, icon: , }, { name: FilterType.PRIORITY, icon: , }, ], [ { name: FilterType.DUE_DATE, icon: , }, { name: FilterType.CREATED_DATE, icon: , }, { name: FilterType.UPDATED_DATE, icon: , }, ], ]; export const statusFilterOptions: FilterOption[] = Object.values(Status).map( (status) => ({ name: status, icon: , }) ); export const assigneeFilterOptions: FilterOption[] = Object.values( Assignee ).map((assignee) => ({ name: assignee, icon: , })); export const labelFilterOptions: FilterOption[] = Object.values(Labels).map( (label) => ({ name: label, icon: , }) ); export const priorityFilterOptions: FilterOption[] = Object.values( Priority ).map((priority) => ({ name: priority, icon: , })); export const dateFilterOptions: FilterOption[] = Object.values(DueDate).map( (date) => ({ name: date, icon: undefined, }) ); export const filterViewToFilterOptions: Record = { [FilterType.STATUS]: statusFilterOptions, [FilterType.ASSIGNEE]: assigneeFilterOptions, [FilterType.LABELS]: labelFilterOptions, [FilterType.PRIORITY]: priorityFilterOptions, [FilterType.DUE_DATE]: dateFilterOptions, [FilterType.CREATED_DATE]: dateFilterOptions, [FilterType.UPDATED_DATE]: dateFilterOptions, }; const filterOperators = ({ filterType, filterValues, }: { filterType: FilterType; filterValues: string[]; }) => { switch (filterType) { case FilterType.STATUS: case FilterType.ASSIGNEE: case FilterType.PRIORITY: if (Array.isArray(filterValues) && filterValues.length > 1) { return [FilterOperator.IS_ANY_OF, FilterOperator.IS_NOT]; } else { return [FilterOperator.IS, FilterOperator.IS_NOT]; } case FilterType.LABELS: if (Array.isArray(filterValues) && filterValues.length > 1) { return [ FilterOperator.INCLUDE_ANY_OF, FilterOperator.INCLUDE_ALL_OF, FilterOperator.EXCLUDE_ALL_OF, FilterOperator.EXCLUDE_IF_ANY_OF, ]; } else { return [FilterOperator.INCLUDE, FilterOperator.DO_NOT_INCLUDE]; } case FilterType.DUE_DATE: case FilterType.CREATED_DATE: case FilterType.UPDATED_DATE: if (filterValues?.includes(DueDate.IN_THE_PAST)) { return [FilterOperator.IS, FilterOperator.IS_NOT]; } else { return [FilterOperator.BEFORE, FilterOperator.AFTER]; } default: return []; } }; const FilterOperatorDropdown = ({ filterType, operator, filterValues, setOperator, }: { filterType: FilterType; operator: FilterOperator; filterValues: string[]; setOperator: (operator: FilterOperator) => void; }) => { const operators = filterOperators({ filterType, filterValues }); return ( {operator} {operators.map((operator) => ( setOperator(operator)} > {operator} ))} ); }; const FilterValueCombobox = ({ filterType, filterValues, setFilterValues, }: { filterType: FilterType; filterValues: string[]; setFilterValues: (filterValues: string[]) => void; }) => { const [open, setOpen] = useState(false); const [commandInput, setCommandInput] = useState(""); const commandInputRef = useRef(null); const nonSelectedFilterValues = filterViewToFilterOptions[filterType]?.filter( (filter) => !filterValues.includes(filter.name) ); return ( { setOpen(open); if (!open) { setTimeout(() => { setCommandInput(""); }, 200); } }} >

{filterType !== FilterType.PRIORITY && (

{filterValues?.slice(0, 3).map((value) => ( ))}

)} {filterValues?.length === 1 ? filterValues?.[0] : `${filterValues?.length} selected`}

{ setCommandInput(e.currentTarget.value); }} ref={commandInputRef} /> No results found. {filterValues.map((value) => ( { setFilterValues(filterValues.filter((v) => v !== value)); setTimeout(() => { setCommandInput(""); }, 200); setOpen(false); }} > {value} ))} {nonSelectedFilterValues?.length > 0 && ( <> {nonSelectedFilterValues.map((filter: FilterOption) => ( { setFilterValues([...filterValues, currentValue]); setTimeout(() => { setCommandInput(""); }, 200); setOpen(false); }} > {filter.icon} {filter.name} {filter.label && ( {filter.label} )} ))} )} ); }; const FilterValueDateCombobox = ({ filterType, filterValues, setFilterValues, }: { filterType: FilterType; filterValues: string[]; setFilterValues: (filterValues: string[]) => void; }) => { const [open, setOpen] = useState(false); const [commandInput, setCommandInput] = useState(""); const commandInputRef = useRef(null); return ( { setOpen(open); if (!open) { setTimeout(() => { setCommandInput(""); }, 200); } }} > {filterValues?.[0]} { setCommandInput(e.currentTarget.value); }} ref={commandInputRef} /> No results found. {filterViewToFilterOptions[filterType].map( (filter: FilterOption) => ( { setFilterValues([currentValue]); setTimeout(() => { setCommandInput(""); }, 200); setOpen(false); }} > {filter.name} ) )} ); }; export default function Filters({ filters, setFilters, }: { filters: Filter[]; setFilters: Dispatch>; }) { return (

{filters .filter((filter) => filter.value?.length > 0) .map((filter) => (

{filter.type}

{ setFilters((prev) => prev.map((f) => (f.id === filter.id ? { ...f, operator } : f)) ); }} /> {filter.type === FilterType.CREATED_DATE || filter.type === FilterType.UPDATED_DATE || filter.type === FilterType.DUE_DATE ? ( { setFilters((prev) => prev.map((f) => f.id === filter.id ? { ...f, value: filterValues } : f ) ); }} /> ) : ( { setFilters((prev) => prev.map((f) => f.id === filter.id ? { ...f, value: filterValues } : f ) ); }} /> )}

))}

); }