-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: Extract reusable filter stuff (#173)
- Loading branch information
1 parent
7614ec3
commit 5771cf4
Showing
38 changed files
with
413 additions
and
525 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
85 changes: 85 additions & 0 deletions
85
apps/webservice/src/app/[workspaceSlug]/_components/filter/ChoiceConditionRender.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,85 @@ | ||
| import { useState } from "react"; | ||
| import { IconSelector } from "@tabler/icons-react"; | ||
| import { capitalCase } from "change-case"; | ||
|
|
||
| import { cn } from "@ctrlplane/ui"; | ||
| import { Button } from "@ctrlplane/ui/button"; | ||
| import { | ||
| Command, | ||
| CommandGroup, | ||
| CommandInput, | ||
| CommandItem, | ||
| CommandList, | ||
| } from "@ctrlplane/ui/command"; | ||
| import { Popover, PopoverContent, PopoverTrigger } from "@ctrlplane/ui/popover"; | ||
|
|
||
| type ChoiceConditionRenderProps = { | ||
| onSelect: (value: string) => void; | ||
| type: string; | ||
| selected: string | null; | ||
| options: { key: string; value: string; display: string }[]; | ||
| className?: string; | ||
| }; | ||
|
|
||
| export const ChoiceConditionRender: React.FC<ChoiceConditionRenderProps> = ({ | ||
| onSelect, | ||
| type, | ||
| selected, | ||
| options, | ||
| className, | ||
| }) => { | ||
| const [open, setOpen] = useState(false); | ||
|
|
||
| return ( | ||
| <div className={cn("flex w-full items-center gap-2", className)}> | ||
| <div className="grid w-full grid-cols-12"> | ||
| <div className="col-span-2 flex items-center rounded-l-md border bg-transparent px-3 text-sm text-muted-foreground"> | ||
| {capitalCase(type)} | ||
| </div> | ||
| <div className="col-span-10"> | ||
| <Popover open={open} onOpenChange={setOpen}> | ||
| <PopoverTrigger asChild> | ||
| <Button | ||
| variant="outline" | ||
| role="combobox" | ||
| aria-expanded={open} | ||
| className="w-full items-center justify-start gap-2 rounded-l-none rounded-r-md bg-transparent px-2 hover:bg-neutral-800/50" | ||
| > | ||
| <IconSelector className="h-4 w-4 text-muted-foreground" /> | ||
| <span | ||
| className={cn(selected != null && "text-muted-foreground")} | ||
| > | ||
| {selected ?? `Select ${type}...`} | ||
| </span> | ||
| </Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent align="start" className="w-[462px] p-0"> | ||
| <Command> | ||
| <CommandInput placeholder={`Search ${type}...`} /> | ||
| <CommandGroup> | ||
| <CommandList> | ||
| {options.length === 0 && ( | ||
| <CommandItem disabled>No options to add</CommandItem> | ||
| )} | ||
| {options.map((option) => ( | ||
| <CommandItem | ||
| key={option.key} | ||
| value={option.key} | ||
| onSelect={() => { | ||
| onSelect(option.key); | ||
| setOpen(false); | ||
| }} | ||
| > | ||
| {option.display} | ||
| </CommandItem> | ||
| ))} | ||
| </CommandList> | ||
| </CommandGroup> | ||
| </Command> | ||
| </PopoverContent> | ||
| </Popover> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
92 changes: 92 additions & 0 deletions
92
apps/webservice/src/app/[workspaceSlug]/_components/filter/DateConditionRender.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,92 @@ | ||
| import type { DateValue } from "@internationalized/date"; | ||
| import { ZonedDateTime } from "@internationalized/date"; | ||
| import ms from "ms"; | ||
|
|
||
| import { cn } from "@ctrlplane/ui"; | ||
| import { DateTimePicker } from "@ctrlplane/ui/date-time-picker/date-time-picker"; | ||
| import { | ||
| Select, | ||
| SelectContent, | ||
| SelectItem, | ||
| SelectTrigger, | ||
| SelectValue, | ||
| } from "@ctrlplane/ui/select"; | ||
| import { DateOperator } from "@ctrlplane/validators/conditions"; | ||
|
|
||
| const toZonedDateTime = (date: Date): ZonedDateTime => { | ||
| const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone; | ||
| const offset = -date.getTimezoneOffset() * ms("1m"); | ||
| const year = date.getFullYear(); | ||
| const month = date.getMonth() + 1; | ||
| const day = date.getDate(); | ||
| const hour = date.getHours(); | ||
| const minute = date.getMinutes(); | ||
| const second = date.getSeconds(); | ||
| const millisecond = date.getMilliseconds(); | ||
|
|
||
| return new ZonedDateTime( | ||
| year, | ||
| month, | ||
| day, | ||
| timeZone, | ||
| offset, | ||
| hour, | ||
| minute, | ||
| second, | ||
| millisecond, | ||
| ); | ||
| }; | ||
|
|
||
| type Operator = "before" | "after" | "before-or-on" | "after-or-on"; | ||
|
|
||
| type DateConditionRenderProps = { | ||
| setDate: (date: DateValue) => void; | ||
| setOperator: (operator: DateOperator) => void; | ||
| value: string; | ||
| operator: Operator; | ||
| type: string; | ||
| className?: string; | ||
| }; | ||
|
|
||
| export const DateConditionRender: React.FC<DateConditionRenderProps> = ({ | ||
| setDate, | ||
| setOperator, | ||
| value, | ||
| operator, | ||
| type, | ||
| className, | ||
| }) => ( | ||
| <div className={cn("flex w-full items-center gap-2", className)}> | ||
| <div className="grid w-full grid-cols-12"> | ||
| <div className="col-span-2 flex items-center rounded-l-md border bg-transparent px-3 text-sm text-muted-foreground"> | ||
| {type} | ||
| </div> | ||
| <div className="col-span-3"> | ||
| <Select value={operator} onValueChange={setOperator}> | ||
| <SelectTrigger className="rounded-none text-muted-foreground hover:bg-neutral-800/50"> | ||
| <SelectValue | ||
| placeholder="Operator" | ||
| className="text-muted-foreground" | ||
| /> | ||
| </SelectTrigger> | ||
| <SelectContent className="text-muted-foreground"> | ||
| <SelectItem value={DateOperator.Before}>before</SelectItem> | ||
| <SelectItem value={DateOperator.After}>after</SelectItem> | ||
| <SelectItem value={DateOperator.BeforeOrOn}> | ||
| before or on | ||
| </SelectItem> | ||
| <SelectItem value={DateOperator.AfterOrOn}>after or on</SelectItem> | ||
| </SelectContent> | ||
| </Select> | ||
| </div> | ||
| <div className="col-span-7"> | ||
| <DateTimePicker | ||
| value={toZonedDateTime(new Date(value))} | ||
| onChange={setDate} | ||
| aria-label={type} | ||
| variant="filter" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); |
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
2 changes: 1 addition & 1 deletion
2
apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobMetadata.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
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.