113 lines
3.3 KiB
TypeScript
113 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
|
|
import { MODEL_USER } from "@/app_modules/home/model/interface";
|
|
import {
|
|
ActionIcon,
|
|
Avatar,
|
|
Box,
|
|
Center,
|
|
Divider,
|
|
Grid,
|
|
Paper,
|
|
Stack,
|
|
Text,
|
|
TextInput,
|
|
Title,
|
|
} from "@mantine/core";
|
|
import { IconChevronRight, IconSearch } from "@tabler/icons-react";
|
|
import { useState } from "react";
|
|
import { UserSearch_searchByName } from "../fun/search/fun_search_by_name";
|
|
import { useRouter } from "next/navigation";
|
|
import ComponentGlobal_MaintenanceInformation from "@/app_modules/component_global/maintenance_information";
|
|
|
|
export default function UserSearch_MainView({
|
|
listUser,
|
|
}: {
|
|
listUser: MODEL_USER[];
|
|
}) {
|
|
const router = useRouter();
|
|
const [user, setUser] = useState(listUser);
|
|
|
|
async function onSearch(name: string) {
|
|
await UserSearch_searchByName(name).then((res) => setUser(res as any));
|
|
}
|
|
|
|
// return (
|
|
// <>
|
|
// <Center h={"50vh"}>
|
|
// <ComponentGlobal_MaintenanceInformation/>
|
|
// </Center>
|
|
// </>
|
|
// );
|
|
|
|
return (
|
|
<>
|
|
<Box>
|
|
{/* <pre>{JSON.stringify(user, null,2)}</pre>r */}
|
|
<Stack spacing={"md"}>
|
|
<TextInput
|
|
icon={<IconSearch size={20} />}
|
|
placeholder="Masukan nama pegguna"
|
|
onChange={(val) => onSearch(val.target.value)}
|
|
/>
|
|
{!user ? (
|
|
""
|
|
) : (
|
|
<Box>
|
|
{user?.map((e) =>
|
|
e.Profile === null ? (
|
|
""
|
|
) : (
|
|
<Stack key={e.id} spacing={"xs"} mt={"xs"}>
|
|
<Grid >
|
|
<Grid.Col span={2}>
|
|
<Center h={"100%"}>
|
|
<Avatar
|
|
sx={{borderStyle: "solid", borderWidth: "0.5px"}}
|
|
radius={"xl"}
|
|
size={"md"}
|
|
src={
|
|
RouterProfile.api_foto_profile +
|
|
`${e?.Profile?.imagesId}`
|
|
}
|
|
/>
|
|
</Center>
|
|
</Grid.Col>
|
|
<Grid.Col span={"auto"}>
|
|
<Stack spacing={0}>
|
|
<Text fw={"bold"} truncate>
|
|
{e?.Profile?.name}
|
|
</Text>
|
|
<Text fz={"sm"} fs={"italic"}>
|
|
+{e?.nomor}
|
|
</Text>
|
|
</Stack>
|
|
</Grid.Col>
|
|
<Grid.Col span={2}>
|
|
<Center h={"100%"}>
|
|
<ActionIcon
|
|
variant="transparent"
|
|
onClick={() =>
|
|
router.push(
|
|
RouterProfile.katalog + `${e?.Profile?.id}`
|
|
)
|
|
}
|
|
>
|
|
<IconChevronRight />
|
|
</ActionIcon>
|
|
</Center>
|
|
</Grid.Col>
|
|
</Grid>
|
|
<Divider />
|
|
</Stack>
|
|
)
|
|
)}
|
|
</Box>
|
|
)}
|
|
</Stack>
|
|
</Box>
|
|
</>
|
|
);
|
|
}
|