apilar ulandi
This commit is contained in:
Samandar Turgunboyev
@@ -1,8 +1,23 @@
|
||||
import type { TourPlanType } from "@/features/tour-plan/lib/data";
|
||||
import { tour_plan_api } from "@/features/tour-plan/lib/api";
|
||||
import type {
|
||||
PlanTourCreate,
|
||||
PlanTourListDataRes,
|
||||
PlanTourUpdate,
|
||||
} from "@/features/tour-plan/lib/data";
|
||||
import { tourPlanForm } from "@/features/tour-plan/lib/form";
|
||||
import { FakeUserList } from "@/features/users/lib/data";
|
||||
import { user_api } from "@/features/users/lib/api";
|
||||
import formatDate from "@/shared/lib/formatDate";
|
||||
import { cn } from "@/shared/lib/utils";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import { Calendar } from "@/shared/ui/calendar";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/shared/ui/command";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
@@ -13,103 +28,196 @@ import {
|
||||
import { Input } from "@/shared/ui/input";
|
||||
import { Label } from "@/shared/ui/label";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/shared/ui/select";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Circle, Map, Placemark, YMaps } from "@pbe/react-yandex-maps";
|
||||
import { ChevronDownIcon, Loader2 } from "lucide-react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import type { AxiosError } from "axios";
|
||||
import { Check, ChevronDownIcon, ChevronsUpDown, Loader2 } from "lucide-react";
|
||||
import { useState, type Dispatch, type SetStateAction } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import type z from "zod";
|
||||
|
||||
interface Props {
|
||||
initialValues: TourPlanType | null;
|
||||
initialValues: PlanTourListDataRes | null;
|
||||
setDialogOpen: Dispatch<SetStateAction<boolean>>;
|
||||
setPlans: Dispatch<SetStateAction<TourPlanType[]>>;
|
||||
}
|
||||
|
||||
const AddedTourPlan = ({ initialValues, setDialogOpen, setPlans }: Props) => {
|
||||
const [load, setLoad] = useState<boolean>(false);
|
||||
const AddedTourPlan = ({ initialValues, setDialogOpen }: Props) => {
|
||||
const queryClient = useQueryClient();
|
||||
const form = useForm<z.infer<typeof tourPlanForm>>({
|
||||
resolver: zodResolver(tourPlanForm),
|
||||
defaultValues: {
|
||||
date: initialValues?.date || undefined,
|
||||
district: initialValues?.district || "",
|
||||
lat: initialValues?.lat || "41.2949",
|
||||
long: initialValues?.long || "69.2361",
|
||||
date: initialValues?.date ? new Date(initialValues?.date) : undefined,
|
||||
district: initialValues?.place_name || "",
|
||||
|
||||
user: initialValues?.user.id.toString() || "",
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate, isPending } = useMutation({
|
||||
mutationFn: (body: PlanTourCreate) => tour_plan_api.create(body),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ["tour_plan_list"] });
|
||||
setDialogOpen(false);
|
||||
},
|
||||
onError: (err: AxiosError) => {
|
||||
const errMessage = err.response?.data as { message: string };
|
||||
const messageText = errMessage.message;
|
||||
toast.error(messageText || "Xatolik yuz berdi", {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate: edit, isPending: editPending } = useMutation({
|
||||
mutationFn: ({ body, id }: { id: number; body: PlanTourUpdate }) =>
|
||||
tour_plan_api.update({ body, id }),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ["tour_plan_list"] });
|
||||
setDialogOpen(false);
|
||||
},
|
||||
onError: (err: AxiosError) => {
|
||||
const errMessage = err.response?.data as { message: string };
|
||||
const messageText = errMessage.message;
|
||||
toast.error(messageText || "Xatolik yuz berdi", {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [searchUser, setSearchUser] = useState<string>("");
|
||||
|
||||
const lat = form.watch("lat");
|
||||
const long = form.watch("long");
|
||||
const [openUser, setOpenUser] = useState<boolean>(false);
|
||||
const { data: user, isLoading: isUserLoading } = useQuery({
|
||||
queryKey: ["user_list", searchUser],
|
||||
queryFn: () => {
|
||||
const params: {
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
search?: string;
|
||||
is_active?: boolean | string;
|
||||
region_id?: number;
|
||||
} = {
|
||||
limit: 8,
|
||||
search: searchUser,
|
||||
};
|
||||
|
||||
const handleMapClick = (e: { get: (key: string) => number[] }) => {
|
||||
const coords = e.get("coords");
|
||||
form.setValue("lat", coords[0].toString());
|
||||
form.setValue("long", coords[1].toString());
|
||||
};
|
||||
return user_api.list(params);
|
||||
},
|
||||
select(data) {
|
||||
return data.data.data;
|
||||
},
|
||||
});
|
||||
|
||||
function onSubmit(values: z.infer<typeof tourPlanForm>) {
|
||||
setLoad(true);
|
||||
const newObject: TourPlanType = {
|
||||
id: initialValues ? initialValues.id : Date.now(),
|
||||
user: FakeUserList.find((u) => u.id === Number(values.user))!,
|
||||
date: values.date,
|
||||
district: values.district,
|
||||
lat: values.lat,
|
||||
long: values.long,
|
||||
status: "planned",
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
setPlans((prev) => {
|
||||
if (initialValues) {
|
||||
return prev.map((item) =>
|
||||
item.id === initialValues.id ? newObject : item,
|
||||
);
|
||||
} else {
|
||||
return [...prev, newObject];
|
||||
}
|
||||
if (!initialValues) {
|
||||
mutate({
|
||||
date: formatDate.format(values.date, "YYYY-MM-DD"),
|
||||
place_name: values.district,
|
||||
user_id: Number(values.user),
|
||||
});
|
||||
setLoad(false);
|
||||
setDialogOpen(false);
|
||||
}, 2000);
|
||||
} else if (initialValues) {
|
||||
edit({
|
||||
body: {
|
||||
user: Number(values.user),
|
||||
date: formatDate.format(values.date, "YYYY-MM-DD"),
|
||||
place_name: values.district,
|
||||
},
|
||||
id: initialValues.id,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="user"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>Kim uchun</Label>
|
||||
<FormControl>
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Foydalanuvchilar" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{FakeUserList.map((e) => (
|
||||
<SelectItem value={String(e.id)}>
|
||||
{e.firstName} {e.lastName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
control={form.control}
|
||||
render={({ field }) => {
|
||||
const selectedUser = user?.results.find(
|
||||
(u) => String(u.id) === field.value,
|
||||
);
|
||||
return (
|
||||
<FormItem className="flex flex-col">
|
||||
<Label className="text-md">Foydalanuvchi</Label>
|
||||
|
||||
<Popover open={openUser} onOpenChange={setOpenUser}>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={openUser}
|
||||
className={cn(
|
||||
"w-full h-12 justify-between",
|
||||
!field.value && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{selectedUser
|
||||
? `${selectedUser.first_name} ${selectedUser.last_name}`
|
||||
: "Foydalanuvchi 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={searchUser}
|
||||
onValueChange={setSearchUser}
|
||||
/>
|
||||
|
||||
<CommandList>
|
||||
{isUserLoading ? (
|
||||
<div className="py-6 text-center text-sm">
|
||||
<Loader2 className="mx-auto h-4 w-4 animate-spin" />
|
||||
</div>
|
||||
) : user && user.results.length > 0 ? (
|
||||
<CommandGroup>
|
||||
{user.results.map((u) => (
|
||||
<CommandItem
|
||||
key={u.id}
|
||||
value={`${u.id}`}
|
||||
onSelect={() => {
|
||||
field.onChange(String(u.id));
|
||||
setOpenUser(false);
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
field.value === String(u.id)
|
||||
? "opacity-100"
|
||||
: "opacity-0",
|
||||
)}
|
||||
/>
|
||||
{u.first_name} {u.last_name} {u.region.name}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
) : (
|
||||
<CommandEmpty>Foydalanuvchi topilmadi</CommandEmpty>
|
||||
)}
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
@@ -168,7 +276,7 @@ const AddedTourPlan = ({ initialValues, setDialogOpen, setPlans }: Props) => {
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="h-[300px] w-full border rounded-lg overflow-hidden">
|
||||
{/* <div className="h-[300px] w-full border rounded-lg overflow-hidden">
|
||||
<YMaps>
|
||||
<Map
|
||||
defaultState={{ center: [Number(lat), Number(long)], zoom: 16 }}
|
||||
@@ -188,13 +296,13 @@ const AddedTourPlan = ({ initialValues, setDialogOpen, setPlans }: Props) => {
|
||||
/>
|
||||
</Map>
|
||||
</YMaps>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full bg-blue-500 hover:bg-blue-500 cursor-pointer"
|
||||
>
|
||||
{load ? (
|
||||
{isPending || editPending ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : initialValues ? (
|
||||
"Tahrirlash"
|
||||
|
||||
Reference in New Issue
Block a user