react
This commit is contained in:
Samandar Turgunboyev
471
src/features/phamarcy/ui/CreatePharmacy.tsx
Normal file
471
src/features/phamarcy/ui/CreatePharmacy.tsx
Normal file
@@ -0,0 +1,471 @@
|
||||
"use client";
|
||||
|
||||
import { district_api } from "@/features/district/lib/api";
|
||||
import { object_api } from "@/features/object/lib/api";
|
||||
import type { CreatePharmacyReq } from "@/features/phamarcy/lib/data";
|
||||
import formatPhone from "@/shared/lib/formatPhone";
|
||||
import onlyNumber from "@/shared/lib/onlyNumber";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/shared/ui/form";
|
||||
import { Input } from "@/shared/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/shared/ui/select";
|
||||
import { DashboardLayout } from "@/widgets/dashboard-layout/ui/DashboardLayout";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import {
|
||||
Circle,
|
||||
Map,
|
||||
Placemark,
|
||||
Polygon,
|
||||
YMaps,
|
||||
ZoomControl,
|
||||
} from "@pbe/react-yandex-maps";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { AxiosError } from "axios";
|
||||
import { Loader2, LocateFixed } from "lucide-react";
|
||||
import { useRef, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
import z from "zod";
|
||||
import { pharmacy_api } from "../lib/api";
|
||||
import { objectForm } from "../lib/form";
|
||||
|
||||
interface CoordsData {
|
||||
lat: number;
|
||||
lon: number;
|
||||
polygon: [number, number][][];
|
||||
}
|
||||
|
||||
const CreatePharmacy = () => {
|
||||
const queryClinent = useQueryClient();
|
||||
const router = useNavigate();
|
||||
const mapRef = useRef<ymaps.Map | null>(null);
|
||||
const form = useForm<z.infer<typeof objectForm>>({
|
||||
resolver: zodResolver(objectForm),
|
||||
defaultValues: {
|
||||
districts: "",
|
||||
name: "",
|
||||
inn: "",
|
||||
phoneDirector: "+998",
|
||||
phonePharmacy: "+998",
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate, isPending } = useMutation({
|
||||
mutationFn: (body: CreatePharmacyReq) => pharmacy_api.create(body),
|
||||
onSuccess: () => {
|
||||
router("/pharmacy");
|
||||
queryClinent.refetchQueries({ queryKey: ["pharmacy_list"] });
|
||||
},
|
||||
onError: (error: AxiosError) => {
|
||||
const data = error.response?.data as { message?: string };
|
||||
const errorData = error.response?.data as {
|
||||
messages?: {
|
||||
token_class: string;
|
||||
token_type: string;
|
||||
message: string;
|
||||
}[];
|
||||
};
|
||||
const errorName = error.response?.data as {
|
||||
data?: {
|
||||
name: string[];
|
||||
};
|
||||
};
|
||||
|
||||
toast.error(
|
||||
errorName.data?.name[0] ||
|
||||
data.message ||
|
||||
errorData?.messages?.[0].message ||
|
||||
"Xatolik yuz berdi",
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const { data: districts } = useQuery({
|
||||
queryKey: ["my_disctrict"],
|
||||
queryFn: () => district_api.getDiscrict(),
|
||||
select(data) {
|
||||
return data.data.data;
|
||||
},
|
||||
});
|
||||
|
||||
const district_id = form.watch("districts");
|
||||
|
||||
const { data: streets } = useQuery({
|
||||
queryKey: ["object_list", district_id],
|
||||
queryFn: () => object_api.getAll({ district_id: Number(district_id) }),
|
||||
select(data) {
|
||||
return data.data.data;
|
||||
},
|
||||
});
|
||||
|
||||
const [coords, setCoords] = useState({
|
||||
latitude: 41.311081,
|
||||
longitude: 69.240562,
|
||||
});
|
||||
|
||||
const getCoords = async (name: string): Promise<CoordsData | null> => {
|
||||
const res = await fetch(
|
||||
`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(name)}&format=json&polygon_geojson=1&limit=1`,
|
||||
);
|
||||
const data = await res.json();
|
||||
|
||||
if (data.length > 0 && data[0].geojson) {
|
||||
const lat = parseFloat(data[0].lat);
|
||||
const lon = parseFloat(data[0].lon);
|
||||
|
||||
let polygon: [number, number][][] = [];
|
||||
|
||||
if (data[0].geojson.type === "Polygon") {
|
||||
polygon = data[0].geojson.coordinates.map((ring: [number, number][]) =>
|
||||
ring.map((coord: [number, number]) => [coord[1], coord[0]]),
|
||||
);
|
||||
} else if (data[0].geojson.type === "MultiPolygon") {
|
||||
polygon = data[0].geojson.coordinates.map(
|
||||
(poly: [number, number][][]) =>
|
||||
poly[0].map((coord: [number, number]) => [coord[1], coord[0]]),
|
||||
);
|
||||
}
|
||||
|
||||
return { lat, lon, polygon };
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const [polygonCoords, setPolygonCoords] = useState<
|
||||
[number, number][][] | null
|
||||
>(null);
|
||||
const [circleCoords, setCircleCoords] = useState<[number, number] | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
const handleStreetChange = (streetId: string) => {
|
||||
form.setValue("streets", streetId);
|
||||
|
||||
const selectedStreet = streets?.find((s) => s.id === Number(streetId));
|
||||
if (!selectedStreet) return;
|
||||
|
||||
setCoords({
|
||||
latitude: selectedStreet.latitude,
|
||||
longitude: selectedStreet.longitude,
|
||||
});
|
||||
form.setValue("latitude", selectedStreet.latitude);
|
||||
form.setValue("longitude", selectedStreet.longitude);
|
||||
|
||||
setCircleCoords([selectedStreet.latitude, selectedStreet.longitude]);
|
||||
|
||||
if (mapRef.current) {
|
||||
mapRef.current.setCenter(
|
||||
[selectedStreet.latitude, selectedStreet.longitude],
|
||||
16,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleShowMyLocation = () => {
|
||||
if (!navigator.geolocation) {
|
||||
alert("Sizning brauzeringiz geolokatsiyani qo‘llab-quvvatlamaydi");
|
||||
return;
|
||||
}
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(position) => {
|
||||
const lat = position.coords.latitude;
|
||||
const lon = position.coords.longitude;
|
||||
setCoords({ latitude: lat, longitude: lon });
|
||||
form.setValue("latitude", lat);
|
||||
form.setValue("longitude", lon);
|
||||
if (mapRef.current) {
|
||||
mapRef.current.setCenter([lat, lon], 20);
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
alert("Joylashuv aniqlanmadi: " + error.message);
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
const handleMapClick = (
|
||||
e: ymaps.IEvent<MouseEvent, { coords: [number, number] }>,
|
||||
) => {
|
||||
const [lat, lon] = e.get("coords");
|
||||
setCoords({ latitude: lat, longitude: lon });
|
||||
form.setValue("latitude", lat);
|
||||
form.setValue("longitude", lon);
|
||||
};
|
||||
|
||||
const onSubmit = (values: z.infer<typeof objectForm>) => {
|
||||
mutate({
|
||||
district_id: Number(values.districts),
|
||||
extra_location: {
|
||||
latitude: values.latitude,
|
||||
longitude: values.longitude,
|
||||
},
|
||||
inn: values.inn,
|
||||
latitude: values.latitude,
|
||||
longitude: values.longitude,
|
||||
name: values.name,
|
||||
owner_phone: onlyNumber(values.phoneDirector),
|
||||
place_id: Number(values.streets),
|
||||
responsible_phone: onlyNumber(values.phonePharmacy),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<div className="max-w-3xl mx-auto space-y-6">
|
||||
<h1 className="text-3xl font-bold">{"Qo'shish"}</h1>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Nomi</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder="Nomi" className="h-12" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="inn"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>INN</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder="INN" className="h-12" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="phoneDirector"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Dorixona egasining nomeri</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
placeholder="+998 90 123-45-67"
|
||||
className="h-12"
|
||||
onChange={(e) => {
|
||||
const formatted = formatPhone(e.target.value);
|
||||
field.onChange(formatted);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="phonePharmacy"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Mas’ul shaxsning nomeri</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
placeholder="+998 90 123-45-67"
|
||||
className="h-12"
|
||||
onChange={(e) => {
|
||||
const formatted = formatPhone(e.target.value);
|
||||
field.onChange(formatted);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="districts"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Tuman</FormLabel>
|
||||
<FormControl>
|
||||
<Select
|
||||
key={field.value}
|
||||
onValueChange={async (id) => {
|
||||
field.onChange(id);
|
||||
const selectedDistrict = districts?.find(
|
||||
(d) => d.id === Number(id),
|
||||
);
|
||||
if (!selectedDistrict) return;
|
||||
|
||||
const coordsData = await getCoords(
|
||||
selectedDistrict.name,
|
||||
);
|
||||
if (!coordsData) return;
|
||||
|
||||
setCoords({
|
||||
latitude: coordsData.lat,
|
||||
longitude: coordsData.lon,
|
||||
});
|
||||
setPolygonCoords(coordsData.polygon);
|
||||
}}
|
||||
value={field.value}
|
||||
>
|
||||
<SelectTrigger className="w-full h-12">
|
||||
<SelectValue placeholder="Tumanlar" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{districts?.map((d) => (
|
||||
<SelectItem key={d.id} value={String(d.id)}>
|
||||
{d.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="streets"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{"Ko'cha"}</FormLabel>
|
||||
<FormControl>
|
||||
<Select
|
||||
key={field.value}
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
field.onChange(value);
|
||||
handleStreetChange(value);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-full h-12">
|
||||
<SelectValue placeholder="Ko'chalar" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{streets?.map((s) => (
|
||||
<SelectItem key={s.id} value={String(s.id)}>
|
||||
{s.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="latitude"
|
||||
render={() => (
|
||||
<FormItem>
|
||||
<FormLabel>Xarita</FormLabel>
|
||||
<FormControl>
|
||||
<div className="relative h-80 border rounded-lg overflow-hidden">
|
||||
<YMaps query={{ lang: "en_RU" }}>
|
||||
<Map
|
||||
defaultState={{
|
||||
center: [coords.latitude, coords.longitude],
|
||||
zoom: 12,
|
||||
}}
|
||||
width="100%"
|
||||
height="100%"
|
||||
onClick={handleMapClick}
|
||||
>
|
||||
<ZoomControl
|
||||
options={{
|
||||
position: { right: "10px", bottom: "70px" },
|
||||
}}
|
||||
/>
|
||||
<Placemark
|
||||
geometry={[coords.latitude, coords.longitude]}
|
||||
/>
|
||||
|
||||
{polygonCoords && (
|
||||
<Polygon
|
||||
geometry={polygonCoords}
|
||||
options={{
|
||||
fillColor: "rgba(0, 150, 255, 0.2)",
|
||||
strokeColor: "rgba(0, 150, 255, 0.8)",
|
||||
strokeWidth: 2,
|
||||
interactivityModel: "default#transparent",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{circleCoords && (
|
||||
<Circle
|
||||
geometry={[circleCoords, 500]}
|
||||
options={{
|
||||
fillColor: "rgba(255, 100, 0, 0.3)",
|
||||
strokeColor: "rgba(255, 100, 0, 0.8)",
|
||||
strokeWidth: 2,
|
||||
interactivityModel: "default#transparent",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Map>
|
||||
</YMaps>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
onClick={handleShowMyLocation}
|
||||
className="absolute bottom-3 right-2.5 shadow-md bg-white text-black hover:bg-gray-100"
|
||||
>
|
||||
<LocateFixed className="w-4 h-4 mr-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex gap-2 justify-end">
|
||||
<Button
|
||||
variant="outline"
|
||||
type="button"
|
||||
className="h-12 p-3"
|
||||
onClick={() => router("/pharmacy")}
|
||||
>
|
||||
Bekor qilish
|
||||
</Button>
|
||||
<Button type="submit" className="h-12 p-5">
|
||||
{isPending ? <Loader2 className="animate-spin" /> : "Qo'shish"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreatePharmacy;
|
||||
Reference in New Issue
Block a user