checkbox for status visibility in frontend

This commit is contained in:
gom-by
2025-02-03 16:11:10 +01:00
parent 97dc0b8022
commit 83e6d145b2
4 changed files with 47 additions and 36 deletions

View File

@@ -18,7 +18,7 @@ type Event struct {
bun.BaseModel `bun:"table:events"` bun.BaseModel `bun:"table:events"`
EventID uuid.UUID `bun:"event_id,type:uuid,pk,default:gen_random_uuid()" json:"id"` EventID uuid.UUID `bun:"event_id,type:uuid,pk,default:gen_random_uuid()" json:"id"`
Title string `bun:"title,notnull,default:'no title'" json:"title"` Title string `bun:"title,notnull" json:"title"`
CreationDate time.Time `bun:"creation_date,notnull,default:current_timestamp" json:"creationDate"` CreationDate time.Time `bun:"creation_date,notnull,default:current_timestamp" json:"creationDate"`
ScheduleStart time.Time `bun:"schedule_start,notnull" json:"start"` ScheduleStart time.Time `bun:"schedule_start,notnull" json:"start"`
ScheduleEnd time.Time `bun:"schedule_end,notnull" json:"end"` ScheduleEnd time.Time `bun:"schedule_end,notnull" json:"end"`

View File

@@ -28,10 +28,13 @@ import { Button } from "@/components/ui/button";
import { KeyedMutator } from "swr"; import { KeyedMutator } from "swr";
import { getCookie } from "cookies-next"; import { getCookie } from "cookies-next";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
import { Checkbox } from "@radix-ui/react-checkbox"; import { Checkbox } from "@/components/ui/checkbox";
import { eventNames } from "process";
import { useSearchParams } from "next/navigation";
import { CheckedState } from "@radix-ui/react-checkbox";
interface CalendarEventExternalDB extends CalendarEventExternal { interface CalendarEventExternalDB extends CalendarEventExternal {
status: "Active" | "Inactive" status: "Active" | "Inactive"
} }
const Planning: React.FC<{ const Planning: React.FC<{
@@ -183,7 +186,7 @@ const Planning: React.FC<{
end: `${new Date(newEvent.end).toISOString()}`, end: `${new Date(newEvent.end).toISOString()}`,
title: newEvent.title, title: newEvent.title,
status: eventStatus status: eventStatus
} }
const res = await request<undefined>( const res = await request<undefined>(
`/events/new`, `/events/new`,
{ {
@@ -291,6 +294,9 @@ const EventDialog: React.FC<
onActiveStateChange, onActiveStateChange,
event, event,
}) => { }) => {
const [checked, setChecked] = useState<CheckedState>(event.status === "Active")
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-md"> <DialogContent className="sm:max-w-md">
@@ -379,18 +385,23 @@ const EventDialog: React.FC<
Rendre cette évènement actif ? Rendre cette évènement actif ?
</Label> </Label>
<Checkbox <Checkbox
className="grid-cols-4 p-0 m-0 h-4 w-4 border rounded"
id="status" id="status"
checked={true} checked={
checked
}
onCheckedChange={(e) => { onCheckedChange={(e) => {
const isChecked = typeof e === "boolean" ? e : false; const booleanCheck = !!e
if (onActiveStateChange != undefined) { setChecked(prev => { return !prev })
onActiveStateChange(isChecked) if (onActiveStateChange) {
onActiveStateChange(booleanCheck)
} }
}} }}
/> />
</div> </div>
</div> </div>
<div className="">
Date syntax : yyyy-MM-dd HH:mm
</div>
<DialogFooter className="flex flex-row justify-end"> <DialogFooter className="flex flex-row justify-end">
{onUpdate && ( {onUpdate && (
<Button <Button

View File

@@ -1,30 +1,30 @@
"use client"; "use client"
import * as React from "react"; import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"; import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"; import { Check } from "lucide-react"
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils"
const Checkbox = React.forwardRef< const Checkbox = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>, React.ElementRef<typeof CheckboxPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<CheckboxPrimitive.Root <CheckboxPrimitive.Root
ref={ref} ref={ref}
className={cn( className={cn(
"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
className, className
)} )}
{...props} {...props}
> >
<CheckboxPrimitive.Indicator <CheckboxPrimitive.Indicator
className={cn("flex items-center justify-center text-current")} className={cn("flex items-center justify-center text-current")}
> >
<Check className="h-4 w-4" /> <Check className="h-4 w-4" />
</CheckboxPrimitive.Indicator> </CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root> </CheckboxPrimitive.Root>
)); ))
Checkbox.displayName = CheckboxPrimitive.Root.displayName; Checkbox.displayName = CheckboxPrimitive.Root.displayName
export { Checkbox }; export { Checkbox }

View File

@@ -1993,9 +1993,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@schedule-x/calendar": { "node_modules/@schedule-x/calendar": {
"version": "2.14.3", "version": "2.17.0",
"resolved": "https://registry.npmjs.org/@schedule-x/calendar/-/calendar-2.14.3.tgz", "resolved": "https://registry.npmjs.org/@schedule-x/calendar/-/calendar-2.17.0.tgz",
"integrity": "sha512-JR2HxAOzaz+6DguGhT7gYp8ydJmIgbPeTd4hTDd05zyF6OoUcbEgFmiZDC5VvDTbThzjkS1a9v/OM2n0WAHcPA==", "integrity": "sha512-a/Rpf+yOKjTpiMXNmZzhzlsF1/NvbUL4CRglHlY4Dn/oK/d3bOA1Q++y/Qzsv77y+cM7Ly1zLVl2aFvJNqT7Zg==",
"license": "MIT", "license": "MIT",
"peer": true, "peer": true,
"peerDependencies": { "peerDependencies": {