Skip to content

Commit

Permalink
form updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@sinanptm
sinanptm committed Sep 14, 2024
1 parent c790d50 commit 72dd55e
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 44 deletions.
40 changes: 32 additions & 8 deletions client/components/forms/actions/userValidation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,11 +77,35 @@ export const updateProfileFormValidation = z.object({
});

export const appointmentFormValidation = z.object({
appointmentType: z.string().min(1,'AppointMent type is required'),
reason: z.string().trim().min(5, "Reason must be at least 5 characters long"),
note: z.string().trim().min(5, "Notes must be at least 5 characters long"),
schedule: z.coerce.date(),
payment: z.enum(["online", "outpatient"]),
doctor: z.string().min(1,"Doctor is required"),
slot:z.string().min(1,'Slot is required')
});
appointmentType: z.string({
required_error: "Appointment type is required",
}).min(1, "Appointment type is required"),

reason: z.string({
required_error: "Reason for appointment is required",
}).trim().min(5, "Reason must be at least 5 characters long")
.max(500, "Reason must not exceed 500 characters"),

note: z.string().trim()
.min(5, "Notes must be at least 5 characters long")
.max(1000, "Notes must not exceed 1000 characters")
.optional(),

date: z.coerce.date()
.refine((date) => date > new Date(), {
message: "Appointment date must be in the future",
}),

payment: z.enum(["online", "outpatient"], {
required_error: "Payment method is required",
invalid_type_error: "Invalid payment method",
}),

doctor: z.string({
required_error: "Doctor selection is required",
}).min(1, "Doctor selection is required"),

slot: z.string({
required_error: "Time slot selection is required",
}).min(1, "Time slot selection is required"),
})
83 changes: 47 additions & 36 deletions client/components/forms/patient/AppointmentForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { useGetSlotsOfDoctor } from "@/lib/hooks/slots/useSlot"
import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { formatDate } from "@/lib/utils"
import { FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"

const AppointmentForm = () => {
const { data, isLoading } = useGetDoctorsList()
Expand All @@ -27,7 +28,7 @@ const AppointmentForm = () => {
appointmentType: "",
reason: "",
note: "",
schedule: new Date(Date.now()),
date: new Date(Date.now()),
payment: "online",
doctor: "",
slot: "",
Expand All @@ -51,7 +52,7 @@ const AppointmentForm = () => {
}
setSlotFilter({
doctorId: value.doctor || "",
date: value.schedule ? new Date(value.schedule) : new Date(),
date: value.date ? new Date(value.date) : new Date(),
})
})

Expand All @@ -73,11 +74,11 @@ const AppointmentForm = () => {
<CustomFormField
fieldType={FormFieldType.DATE_PICKER}
control={form.control}
name="schedule"
showDateText="Only date after today is valid"
name="date"
showDateText="Appointment date must be in the future"
label="Expected appointment date"
isLimited
dateFormat="MM/dd/yyyy"
dateFormat="dd/MM/yyyy"
/>

<CustomFormField
Expand Down Expand Up @@ -131,37 +132,47 @@ const AppointmentForm = () => {
)}
</CustomFormField>

{isDoctorSelected && (
<div className="space-y-3 p-3 rounded-lg shadow-md border-2 border-gray-400">
<h3 className="text-base font-semibold text-gray-200">Available Time Slots {formatDate(slotFilter.date)}</h3>
{isGettingSlot ? (
<div className="flex items-center justify-center h-20">
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-gray-400"></div>
</div>
) : slots && slots.length > 0 ? (
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2">
{slots.map((slot) => (
<Button
type="button"
key={slot._id}
variant="ghost"
onClick={() => form.setValue('slot', slot._id!)}
className={`w-full justify-center py-1 px-2 text-xs font-medium transition-all duration-200 border ${form.watch('slot') === slot._id
? 'bg-primary text-primary-foreground border-primary shadow-md scale-105'
: 'bg-gray-700 text-gray-200 border-gray-600 hover:bg-gray-600 hover:text-gray-100'
}`}
>
{slot.startTime} - {slot.endTime}
</Button>
))}
</div>
) : (
<div className="flex items-center justify-center h-20 text-sm text-gray-400">
No available slots for the selected date and doctor.
</div>
)}
</div>
)}
<FormField
control={form.control}
name="slot"
render={({ field }) => (
<FormItem>
<FormLabel className="text-gray-200">Time Slot</FormLabel>
{isDoctorSelected && (
<div className="space-y-3 p-3 rounded-lg shadow-md border-2 border-gray-400">
<h3 className="text-base font-semibold text-gray-200">Available Time Slots for {formatDate(slotFilter.date)}</h3>
{isGettingSlot ? (
<div className="flex items-center justify-center h-20">
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-gray-400"></div>
</div>
) : slots && slots.length > 0 ? (
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2">
{slots.map((slot) => (
<Button
type="button"
key={slot._id}
variant="ghost"
onClick={() => form.setValue('slot', slot._id!, { shouldValidate: true })}
className={`w-full justify-center py-1 px-2 text-xs font-medium transition-all duration-200 border ${field.value === slot._id
? 'bg-primary text-primary-foreground border-primary shadow-md scale-105'
: 'bg-gray-700 text-gray-200 border-gray-600 hover:bg-gray-600 hover:text-gray-100'
}`}
>
{slot.startTime} - {slot.endTime}
</Button>
))}
</div>
) : (
<div className="flex items-center justify-center h-20 text-sm text-gray-400">
No available slots for the selected date and doctor.
</div>
)}
</div>
)}
<FormMessage className="text-red-500" />
</FormItem>
)}
/>

<div className="flex flex-col gap-6 xl:flex-row">
<CustomFormField
Expand Down
1 change: 1 addition & 0 deletions client/components/forms/patient/RegistrationForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ const RegistrationForm = ({ refetch }: { refetch: any }) => {
control={form.control}
name="birthDate"
label="Date of birth *"
dateFormat="dd/mm/yy"
showDateText="Please Select A Date Before Today"
/>

Expand Down

1 comment on commit 72dd55e

@vercel
Copy link

@vercel vercel bot commented on 72dd55e Sep 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

avm-care – ./

avm-care-sinans-projects-8d312afe.vercel.app
avm-care-git-main-sinans-projects-8d312afe.vercel.app
avm-care.vercel.app

Please sign in to comment.