update api request and response
This commit is contained in:
Samandar Turgunboyev
@@ -26,12 +26,27 @@ export interface PlanListData {
|
||||
title: string;
|
||||
description: string;
|
||||
date: string;
|
||||
comment: null | string;
|
||||
doctor: {
|
||||
id: number;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
} | null;
|
||||
pharmacy: {
|
||||
id: number;
|
||||
name: string;
|
||||
} | null;
|
||||
user: {
|
||||
id: number;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
};
|
||||
is_done: true;
|
||||
longitude: number;
|
||||
latitude: number;
|
||||
extra_location: {
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
};
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
@@ -40,10 +55,18 @@ export interface PlanCreateReq {
|
||||
description: string;
|
||||
date: string;
|
||||
user_id: number;
|
||||
doctor_id: number | null;
|
||||
pharmacy_id: number | null;
|
||||
longitude: number;
|
||||
latitude: number;
|
||||
extra_location: { longitude: number; latitude: number };
|
||||
}
|
||||
|
||||
export interface PlanUpdateReq {
|
||||
title: string;
|
||||
description: string;
|
||||
date: string;
|
||||
longitude: number;
|
||||
latitude: number;
|
||||
extra_location: { longitude: number; latitude: number };
|
||||
}
|
||||
|
||||
@@ -5,4 +5,10 @@ export const createPlanFormData = z.object({
|
||||
description: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
user: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
date: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
doctor_id: z.string().optional(),
|
||||
pharmacy_id: z.string().optional(),
|
||||
});
|
||||
|
||||
// longitude: number;
|
||||
// latitude: number;
|
||||
// extra_location: { longitude: number; latitude: number };
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { doctor_api } from "@/features/doctors/lib/api";
|
||||
import { pharmacies_api } from "@/features/pharmacies/lib/api";
|
||||
import { plans_api } from "@/features/plans/lib/api";
|
||||
import type {
|
||||
PlanCreateReq,
|
||||
@@ -53,8 +55,16 @@ const AddedPlan = ({ initialValues, setDialogOpen }: Props) => {
|
||||
date: initialValues ? initialValues?.date : "",
|
||||
},
|
||||
});
|
||||
|
||||
const [type, setType] = useState<"DOCTOR" | "PHARM">("DOCTOR");
|
||||
const [long, setLong] = useState<number>(41.233);
|
||||
const [lat, setLat] = useState<number>(63.233);
|
||||
const [searchUser, setSearchUser] = useState<string>("");
|
||||
const [openUser, setOpenUser] = useState<boolean>(false);
|
||||
const [searchDoctor, setSearchDoctor] = useState<string>("");
|
||||
const [openDoctor, setOpenDoctor] = useState<boolean>(false);
|
||||
const [searchPharm, setSearchPharm] = useState<string>("");
|
||||
const [openPharm, setOpenPharm] = useState<boolean>(false);
|
||||
const queryClient = useQueryClient();
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
@@ -79,6 +89,50 @@ const AddedPlan = ({ initialValues, setDialogOpen }: Props) => {
|
||||
},
|
||||
});
|
||||
|
||||
const user_id = form.watch("user");
|
||||
|
||||
const { data: doctor, isLoading: isDoctorLoading } = useQuery({
|
||||
queryKey: ["doctor_list", searchDoctor, user_id],
|
||||
queryFn: () => {
|
||||
const params: {
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
user_id?: number;
|
||||
full_name?: string;
|
||||
} = {
|
||||
limit: 8,
|
||||
full_name: searchDoctor,
|
||||
user_id: Number(user_id),
|
||||
};
|
||||
|
||||
return doctor_api.list(params);
|
||||
},
|
||||
select(data) {
|
||||
return data.data.data;
|
||||
},
|
||||
});
|
||||
|
||||
const { data: pharm, isLoading: isPharmLoading } = useQuery({
|
||||
queryKey: ["pharm_list", searchPharm, user_id],
|
||||
queryFn: () => {
|
||||
const params: {
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
user_id?: number;
|
||||
name?: string;
|
||||
} = {
|
||||
limit: 8,
|
||||
name: searchPharm,
|
||||
user_id: Number(user_id),
|
||||
};
|
||||
|
||||
return pharmacies_api.list(params);
|
||||
},
|
||||
select(data) {
|
||||
return data.data.data;
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate, isPending } = useMutation({
|
||||
mutationFn: (body: PlanCreateReq) => plans_api.create(body),
|
||||
onSuccess: () => {
|
||||
@@ -117,18 +171,32 @@ const AddedPlan = ({ initialValues, setDialogOpen }: Props) => {
|
||||
function onSubmit(data: z.infer<typeof createPlanFormData>) {
|
||||
if (initialValues) {
|
||||
edit({
|
||||
id: initialValues.id,
|
||||
body: {
|
||||
date: formatDate.format(data.date, "YYYY-MM-DD"),
|
||||
description: data.description,
|
||||
extra_location: {
|
||||
latitude: initialValues.latitude,
|
||||
longitude: initialValues.longitude,
|
||||
},
|
||||
latitude: initialValues.latitude,
|
||||
longitude: initialValues.longitude,
|
||||
title: data.name,
|
||||
},
|
||||
id: initialValues.id,
|
||||
});
|
||||
} else {
|
||||
mutate({
|
||||
date: formatDate.format(data.date, "YYYY-MM-DD"),
|
||||
description: data.description,
|
||||
extra_location: {
|
||||
latitude: lat,
|
||||
longitude: long,
|
||||
},
|
||||
latitude: lat,
|
||||
longitude: long,
|
||||
title: data.name,
|
||||
doctor_id: data.doctor_id ? Number(data.doctor_id) : null,
|
||||
pharmacy_id: data.pharmacy_id ? Number(data.pharmacy_id) : null,
|
||||
user_id: Number(data.user),
|
||||
});
|
||||
}
|
||||
@@ -223,6 +291,213 @@ const AddedPlan = ({ initialValues, setDialogOpen }: Props) => {
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setType("DOCTOR")}
|
||||
className={cn(
|
||||
"cursor-pointer h-10 text-sm",
|
||||
type === "DOCTOR"
|
||||
? "bg-blue-700 hover:bg-blue-700 text-white"
|
||||
: "bg-gray-300 hover:bg-gray-300 text-black/80",
|
||||
)}
|
||||
>
|
||||
Shifokorga birlashtirish
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setType("PHARM")}
|
||||
type="button"
|
||||
className={cn(
|
||||
"cursor-pointer h-10 text-sm",
|
||||
type === "PHARM"
|
||||
? "bg-blue-700 hover:bg-blue-700 text-white"
|
||||
: "bg-gray-300 hover:bg-gray-300 text-black/80",
|
||||
)}
|
||||
>
|
||||
Dorixonaga birlashtirish
|
||||
</Button>
|
||||
</div>
|
||||
{type === "DOCTOR" && (
|
||||
<FormField
|
||||
name="doctor_id"
|
||||
control={form.control}
|
||||
render={({ field }) => {
|
||||
const selectedUser = doctor?.results.find(
|
||||
(u) => String(u.id) === field.value,
|
||||
);
|
||||
return (
|
||||
<FormItem className="flex flex-col">
|
||||
<Label className="text-md">Shifokorlar</Label>
|
||||
|
||||
<Popover open={openDoctor} onOpenChange={setOpenDoctor}>
|
||||
<PopoverTrigger asChild disabled={initialValues !== null}>
|
||||
<FormControl>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={openDoctor}
|
||||
className={cn(
|
||||
"w-full h-12 justify-between",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{selectedUser
|
||||
? `${selectedUser.first_name} ${selectedUser.last_name}`
|
||||
: "Shifokorni tanlang"}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
|
||||
<PopoverContent
|
||||
className="w-[--radix-popover-trigger-width] p-0"
|
||||
align="start"
|
||||
>
|
||||
<Command shouldFilter={false}>
|
||||
<CommandInput
|
||||
placeholder="Qidirish..."
|
||||
className="h-9"
|
||||
value={searchDoctor}
|
||||
onValueChange={setSearchDoctor}
|
||||
/>
|
||||
|
||||
<CommandList>
|
||||
{isDoctorLoading ? (
|
||||
<div className="py-6 text-center text-sm">
|
||||
<Loader2 className="mx-auto h-4 w-4 animate-spin" />
|
||||
</div>
|
||||
) : doctor && doctor.results.length > 0 ? (
|
||||
<CommandGroup>
|
||||
{doctor.results.map((u) => (
|
||||
<CommandItem
|
||||
key={u.id}
|
||||
value={`${u.id}`}
|
||||
onSelect={() => {
|
||||
field.onChange(String(u.id));
|
||||
setOpenDoctor(false);
|
||||
setLat(u.latitude);
|
||||
setLong(u.longitude);
|
||||
form.setValue("pharmacy_id", undefined);
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
field.value === String(u.id)
|
||||
? "opacity-100"
|
||||
: "opacity-0",
|
||||
)}
|
||||
/>
|
||||
{u.first_name} {u.last_name}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
) : (
|
||||
<CommandEmpty>Shifokor topilmadi</CommandEmpty>
|
||||
)}
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{type === "PHARM" && (
|
||||
<FormField
|
||||
name="pharmacy_id"
|
||||
control={form.control}
|
||||
render={({ field }) => {
|
||||
const selectedUser = pharm?.results.find(
|
||||
(u) => String(u.id) === field.value,
|
||||
);
|
||||
return (
|
||||
<FormItem className="flex flex-col">
|
||||
<Label className="text-md">Dorixonalar</Label>
|
||||
|
||||
<Popover open={openPharm} onOpenChange={setOpenPharm}>
|
||||
<PopoverTrigger asChild disabled={initialValues !== null}>
|
||||
<FormControl>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={openPharm}
|
||||
className={cn(
|
||||
"w-full h-12 justify-between",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{selectedUser
|
||||
? `${selectedUser.name}`
|
||||
: "Dorixonani tanlang"}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
|
||||
<PopoverContent
|
||||
className="w-[--radix-popover-trigger-width] p-0"
|
||||
align="start"
|
||||
>
|
||||
<Command shouldFilter={false}>
|
||||
<CommandInput
|
||||
placeholder="Qidirish..."
|
||||
className="h-9"
|
||||
value={searchPharm}
|
||||
onValueChange={setSearchPharm}
|
||||
/>
|
||||
|
||||
<CommandList>
|
||||
{isPharmLoading ? (
|
||||
<div className="py-6 text-center text-sm">
|
||||
<Loader2 className="mx-auto h-4 w-4 animate-spin" />
|
||||
</div>
|
||||
) : pharm && pharm.results.length > 0 ? (
|
||||
<CommandGroup>
|
||||
{pharm.results.map((u) => (
|
||||
<CommandItem
|
||||
key={u.id}
|
||||
value={`${u.id}`}
|
||||
onSelect={() => {
|
||||
field.onChange(String(u.id));
|
||||
setOpenPharm(false);
|
||||
setLat(u.latitude);
|
||||
setLong(u.longitude);
|
||||
form.setValue("doctor_id", undefined);
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
field.value === String(u.id)
|
||||
? "opacity-100"
|
||||
: "opacity-0",
|
||||
)}
|
||||
/>
|
||||
{u.name}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
) : (
|
||||
<CommandEmpty>Dorixona topilmadi</CommandEmpty>
|
||||
)}
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
@@ -307,7 +582,9 @@ const AddedPlan = ({ initialValues, setDialogOpen }: Props) => {
|
||||
|
||||
<Button
|
||||
className="w-full h-12 text-lg rounded-lg bg-blue-600 hover:bg-blue-600 cursor-pointer"
|
||||
disabled={isPending || editPending || initialValues?.is_done}
|
||||
disabled={
|
||||
isPending || editPending || initialValues?.comment ? true : false
|
||||
}
|
||||
>
|
||||
{isPending || editPending ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
|
||||
@@ -59,6 +59,10 @@ const PalanTable = ({
|
||||
<TableHead className="text-start">Reja nomi</TableHead>
|
||||
<TableHead className="text-start">Tavsifi</TableHead>
|
||||
<TableHead className="text-start">Kimga tegishli</TableHead>
|
||||
<TableHead className="text-start">Shifokor biriktirgan</TableHead>
|
||||
<TableHead className="text-start">
|
||||
Dorixonaga biriktirgan
|
||||
</TableHead>
|
||||
<TableHead className="text-start">Status</TableHead>
|
||||
<TableHead className="text-right">Harakatlar</TableHead>
|
||||
</TableRow>
|
||||
@@ -72,12 +76,20 @@ const PalanTable = ({
|
||||
<TableCell>
|
||||
{plan.user.first_name + " " + plan.user.last_name}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{plan.doctor
|
||||
? plan.doctor.first_name + " " + plan.doctor.last_name
|
||||
: "-"}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{plan.pharmacy ? plan.pharmacy.name : "-"}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={clsx(
|
||||
plan.is_done ? "text-green-500" : "text-red-500",
|
||||
plan.comment ? "text-green-500" : "text-red-500",
|
||||
)}
|
||||
>
|
||||
{plan.is_done ? "Bajarilgan" : "Bajarilmagan"}
|
||||
{plan.comment ? "Bajarilgan" : "Bajarilmagan"}
|
||||
</TableCell>
|
||||
<TableCell className="flex gap-2 justify-end">
|
||||
<Button
|
||||
@@ -94,7 +106,7 @@ const PalanTable = ({
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={plan.is_done}
|
||||
disabled={plan.comment ? true : false}
|
||||
className="bg-blue-500 text-white hover:bg-blue-500 hover:text-white cursor-pointer"
|
||||
onClick={() => {
|
||||
setEditingPlan(plan);
|
||||
@@ -107,7 +119,7 @@ const PalanTable = ({
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
className="cursor-pointer"
|
||||
disabled={plan.is_done}
|
||||
disabled={plan.comment ? true : false}
|
||||
onClick={() => handleDelete(plan)}
|
||||
>
|
||||
<Trash className="h-4 w-4" />
|
||||
|
||||
@@ -8,6 +8,13 @@ import {
|
||||
} from "@/shared/ui/dialog";
|
||||
|
||||
import { Badge } from "@/shared/ui/badge";
|
||||
import {
|
||||
Circle,
|
||||
Map,
|
||||
Placemark,
|
||||
YMaps,
|
||||
ZoomControl,
|
||||
} from "@pbe/react-yandex-maps";
|
||||
import clsx from "clsx";
|
||||
import { type Dispatch, type SetStateAction } from "react";
|
||||
|
||||
@@ -22,7 +29,7 @@ const PlanDetail = ({ detail, setDetail, plan }: Props) => {
|
||||
|
||||
return (
|
||||
<Dialog open={detail} onOpenChange={setDetail}>
|
||||
<DialogContent className="sm:max-w-lg">
|
||||
<DialogContent className="sm:max-w-lg max-h-[80vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-xl font-semibold">
|
||||
Reja haqida batafsil
|
||||
@@ -30,19 +37,47 @@ const PlanDetail = ({ detail, setDetail, plan }: Props) => {
|
||||
</DialogHeader>
|
||||
|
||||
<DialogDescription className="space-y-4 mt-2 text-md">
|
||||
{/* Reja nomi */}
|
||||
<div>
|
||||
<p className="font-semibold text-gray-900">Reja nomi:</p>
|
||||
<p>{plan.title}</p>
|
||||
</div>
|
||||
|
||||
{/* Reja tavsifi */}
|
||||
<div>
|
||||
<p className="font-semibold text-gray-900">Tavsifi:</p>
|
||||
<p>{plan.description}</p>
|
||||
</div>
|
||||
|
||||
{/* Kimga tegishli */}
|
||||
{plan.comment && (
|
||||
<div>
|
||||
<p className="font-semibold text-gray-900">Qanday bajarildi:</p>
|
||||
<p>{plan.comment}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{plan.doctor && (
|
||||
<div>
|
||||
<p className="font-semibold text-gray-900">
|
||||
Shikorga biriktirgan
|
||||
</p>
|
||||
<p>
|
||||
<span>Shifokot ismi: </span>
|
||||
{plan.doctor.first_name} {plan.doctor.last_name}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{plan.pharmacy && (
|
||||
<div>
|
||||
<p className="font-semibold text-gray-900">
|
||||
Dorixonaga biriktirgan
|
||||
</p>
|
||||
<p>
|
||||
<span>Dorixona nomi: </span>
|
||||
{plan.pharmacy.name}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<p className="font-semibold text-gray-900">Kimga tegishli:</p>
|
||||
<p>
|
||||
@@ -50,21 +85,56 @@ const PlanDetail = ({ detail, setDetail, plan }: Props) => {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Reja statusi */}
|
||||
<div>
|
||||
<p className="font-semibold text-gray-900">Reja statusi:</p>
|
||||
|
||||
<Badge
|
||||
className={clsx(
|
||||
plan.is_done
|
||||
plan.comment
|
||||
? "bg-green-100 text-green-700"
|
||||
: "bg-yellow-100 text-yellow-700",
|
||||
"text-sm px-4 py-2 mt-2",
|
||||
)}
|
||||
>
|
||||
{plan.is_done ? "Bajarilgan" : "Bajarilmagan"}
|
||||
{plan.comment ? "Bajarilgan" : "Bajarilmagan"}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{plan.doctor
|
||||
? "Shifokor manzili:"
|
||||
: plan.pharmacy && "Dorixona manzili:"}
|
||||
</div>
|
||||
|
||||
<YMaps query={{ lang: "en_RU" }}>
|
||||
<div className="h-[300px] w-full rounded-md overflow-hidden">
|
||||
<Map
|
||||
state={{
|
||||
center: [plan.latitude, plan.longitude],
|
||||
zoom: 12,
|
||||
}}
|
||||
width="100%"
|
||||
height="100%"
|
||||
>
|
||||
<ZoomControl
|
||||
options={{
|
||||
position: { right: "10px", bottom: "70px" },
|
||||
}}
|
||||
/>
|
||||
|
||||
<Placemark geometry={[plan.latitude, plan.longitude]} />
|
||||
|
||||
<Circle
|
||||
geometry={[[plan.latitude, plan.longitude], 300]}
|
||||
options={{
|
||||
fillColor: "rgba(255, 100, 0, 0.3)",
|
||||
strokeColor: "rgba(255, 100, 0, 0.8)",
|
||||
strokeWidth: 2,
|
||||
}}
|
||||
/>
|
||||
</Map>
|
||||
</div>
|
||||
</YMaps>
|
||||
</DialogDescription>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
Reference in New Issue
Block a user