fix: Admin
Deskripsi: - Penambahan field nama rekening di db bank - Optimalisasi event ## No Issue
This commit is contained in:
124
src/app_modules/admin/map/component/comp_detail_data_drawer.tsx
Normal file
124
src/app_modules/admin/map/component/comp_detail_data_drawer.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
import { RouterMap } from "@/app/lib/router_hipmi/router_map";
|
||||
import { MODEL_MAP } from "@/app_modules/map/lib/interface";
|
||||
import {
|
||||
Stack,
|
||||
AspectRatio,
|
||||
Box,
|
||||
Grid,
|
||||
Image,
|
||||
Text,
|
||||
Button,
|
||||
Center,
|
||||
} from "@mantine/core";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import {
|
||||
IconBuildingSkyscraper,
|
||||
IconListDetails,
|
||||
IconPhoneCall,
|
||||
IconMapPin,
|
||||
IconPinned,
|
||||
} from "@tabler/icons-react";
|
||||
import { useState } from "react";
|
||||
import { adminMap_funGetOneById } from "../fun/fun_get_one_by_id";
|
||||
|
||||
export function ComponentAdminMap_DetailDataDrawer({
|
||||
mapId,
|
||||
}: {
|
||||
mapId: string;
|
||||
}) {
|
||||
const [data, setData] = useState<MODEL_MAP>();
|
||||
|
||||
useShallowEffect(() => {
|
||||
onLoadMap(mapId);
|
||||
}, [mapId]);
|
||||
|
||||
async function onLoadMap(mapId: string) {
|
||||
try {
|
||||
const res = await adminMap_funGetOneById({ mapId: mapId });
|
||||
setData(res as any);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<AspectRatio ratio={1 / 1} mah={300}>
|
||||
<Image
|
||||
radius={"md"}
|
||||
width={300}
|
||||
alt="Foto"
|
||||
src={RouterMap.api_foto + data?.imageMapId}
|
||||
/>
|
||||
</AspectRatio>
|
||||
|
||||
<Box>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconBuildingSkyscraper />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text>{data?.Portofolio.namaBisnis}</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconListDetails />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text>{data?.Portofolio.MasterBidangBisnis.name}</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconPhoneCall />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text>+{data?.Portofolio.tlpn}</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconMapPin />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text>{data?.Portofolio.alamatKantor}</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconPinned />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text>{data?.Portofolio.deskripsi}</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
{data ? (
|
||||
<Center>
|
||||
<Button
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
window.open(
|
||||
`https://maps.google.com?q=${data?.latitude},${data?.longitude}`,
|
||||
"_blank",
|
||||
"width=800,height=600,noopener,noreferrer"
|
||||
);
|
||||
}}
|
||||
>
|
||||
Buka Google Map
|
||||
</Button>
|
||||
</Center>
|
||||
) : (
|
||||
<Center>
|
||||
<Button radius={"xl"} disabled>
|
||||
Buka Google Map
|
||||
</Button>
|
||||
</Center>
|
||||
)}
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
65
src/app_modules/admin/map/component/comp_skeleton_drawer.tsx
Normal file
65
src/app_modules/admin/map/component/comp_skeleton_drawer.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import { Box, Button, Center, Grid, Skeleton, Stack } from "@mantine/core";
|
||||
import {
|
||||
IconBuildingSkyscraper,
|
||||
IconListDetails,
|
||||
IconMapPin,
|
||||
IconPhoneCall,
|
||||
IconPinned,
|
||||
} from "@tabler/icons-react";
|
||||
|
||||
export function ComponentAdminMap_SkeletonDrawer() {
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<Skeleton h={300} width={300} />
|
||||
<Box>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconBuildingSkyscraper />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Skeleton radius={"xl"} h={10} />
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconListDetails />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Skeleton radius={"xl"} h={10} />
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconPhoneCall />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Skeleton radius={"xl"} h={10} />
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconMapPin />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Skeleton radius={"xl"} h={10} />
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconPinned />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Skeleton radius={"xl"} h={10} />
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Box>
|
||||
<Center>
|
||||
<Button radius={"xl"} disabled>
|
||||
Buka Google Map
|
||||
</Button>
|
||||
</Center>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { RouterMap } from "@/app/lib/router_hipmi/router_map";
|
||||
import { MODEL_MAP } from "@/app_modules/map/lib/interface";
|
||||
import {
|
||||
AspectRatio,
|
||||
Box,
|
||||
@@ -9,21 +11,20 @@ import {
|
||||
Image,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { ComponentAdmin_UIDrawerNotifikasi } from "../../notifikasi/ui_drawer_notifikasi";
|
||||
import { MODEL_MAP } from "@/app_modules/map/lib/interface";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import { adminMap_funGetOneById } from "../fun/fun_get_one_by_id";
|
||||
import { useState } from "react";
|
||||
import { RouterMap } from "@/app/lib/router_hipmi/router_map";
|
||||
import {
|
||||
IconBuildingSkyscraper,
|
||||
IconListDetails,
|
||||
IconPhoneCall,
|
||||
IconMapPin,
|
||||
IconPhoneCall,
|
||||
IconPinned,
|
||||
} from "@tabler/icons-react";
|
||||
import { useState } from "react";
|
||||
import { adminMap_funGetOneById } from "../fun/fun_get_one_by_id";
|
||||
import _ from "lodash";
|
||||
import { ComponentAdminMap_SkeletonDrawer } from "./comp_skeleton_drawer";
|
||||
import { ComponentAdminMap_DetailDataDrawer } from "./comp_detail_data_drawer";
|
||||
|
||||
export function ComponentAdminMap_Drawer({
|
||||
opened,
|
||||
@@ -41,8 +42,12 @@ export function ComponentAdminMap_Drawer({
|
||||
}, [mapId]);
|
||||
|
||||
async function onLoadMap(mapId: string) {
|
||||
const res = await adminMap_funGetOneById({ mapId: mapId });
|
||||
setData(res as any);
|
||||
try {
|
||||
const res = await adminMap_funGetOneById({ mapId: mapId });
|
||||
setData(res as any);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -60,59 +65,12 @@ export function ComponentAdminMap_Drawer({
|
||||
position="right"
|
||||
size={"sm"}
|
||||
>
|
||||
<Stack>
|
||||
<AspectRatio ratio={1 / 1} mah={300}>
|
||||
<Image
|
||||
radius={"md"}
|
||||
width={300}
|
||||
alt="Foto"
|
||||
src={RouterMap.api_foto + data?.imageMapId}
|
||||
/>
|
||||
</AspectRatio>
|
||||
{_.isEmpty(data) ? (
|
||||
<ComponentAdminMap_SkeletonDrawer />
|
||||
) : (
|
||||
<ComponentAdminMap_DetailDataDrawer mapId={mapId} />
|
||||
)}
|
||||
|
||||
<Box>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconBuildingSkyscraper />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text>{data?.Portofolio.namaBisnis}</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconListDetails />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text>{data?.Portofolio.MasterBidangBisnis.name}</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconPhoneCall />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text>+{data?.Portofolio.tlpn}</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconMapPin />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text>{data?.Portofolio.alamatKantor}</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconPinned />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text >{data?.Portofolio.deskripsi}</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Stack>
|
||||
{/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
|
||||
</Drawer>
|
||||
</>
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
import { ComponentAdminMap_DetailDataDrawer } from "./comp_detail_data_drawer";
|
||||
import { ComponentAdminMap_SkeletonDrawer } from "./comp_skeleton_drawer";
|
||||
import { ComponentAdminMap_Drawer } from "./drawer_detail_map";
|
||||
|
||||
export { ComponentAdminMap_Drawer };
|
||||
export { ComponentAdminMap_SkeletonDrawer };
|
||||
export { ComponentAdminMap_DetailDataDrawer };
|
||||
|
||||
Reference in New Issue
Block a user