wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#style: UI Katalog

Browse Source 
Deskripsi:
- UI Katalog selesai
- UI Portofolio selesai
- UI Profile selesa
## NO Isuuee
This commit is contained in:
Bagasbanuna02
2024-07-10 17:07:41 +08:00
parent 5f620c030b
commit ab6f2fe8a7
88 changed files with 1288 additions and 1117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/app_modules/katalog/profile/create/layout.tsx
View File

@@ -1,27 +1,15 @@
"use client";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import ComponentGlobal_HeaderTamplate from "@/app_modules/component_global/header_tamplate";
import {
ActionIcon,
AppShell,
Group,
Header,
Text,
Title,
} from "@mantine/core";
import { IconArrowLeft } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
export default function ProfileLayout({ children }: { children: any }) {
const router = useRouter();
return (
<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentGlobal_HeaderTamplate title="Buat Profile" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Buat Profile" />}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

68
src/app_modules/katalog/profile/create/view.tsx
View File

@@ -1,8 +1,12 @@
"use client";
import { myConsole } from "@/app/fun/my_console";
import { ApiHipmi } from "@/app/lib/api";
import { Warna } from "@/app/lib/warna";
import { RouterHome } from "@/app/lib/router_hipmi/router_home";
import ComponentGlobal_BoxInformation from "@/app_modules/component_global/box_information";
import { AccentColor, MainColor } from "@/app_modules/component_global/color/color_pallet";
import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import {
AspectRatio,
Avatar,
@@ -17,25 +21,13 @@ import {
Text,
TextInput,
} from "@mantine/core";
import { useAtom } from "jotai";
import { IconAt, IconCamera, IconUpload } from "@tabler/icons-react";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-simple-toasts";
import funCreateNewProfile from "../fun/fun_create_profile";
import { IconAt, IconCamera, IconUpload } from "@tabler/icons-react";
import ComponentKatalog_NotedBox from "../../component/noted_box";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { MODEL_PROFILE } from "../model/interface";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import { RouterHome } from "@/app/lib/router_hipmi/router_home";
import { useForm } from "@mantine/form";
import { useTimeout } from "@mantine/hooks";
import { validRegex } from "../../component/regular_expressions";
import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
import funCreateNewProfile from "../fun/fun_create_profile";
import { MODEL_PROFILE } from "../model/interface";
export default function CreateProfile({ userId }: { userId: any }) {
const [filePP, setFilePP] = useState<File | null>(null);
@@ -55,7 +47,7 @@ export default function CreateProfile({ userId }: { userId: any }) {
<Stack px={"sm"} spacing={"xl"}>
<Box>
<Stack>
<ComponentKatalog_NotedBox informasi="Upload foto profile anda." />
<ComponentGlobal_BoxInformation informasi="Upload foto profile anda." />
<Center>
{imgPP ? (
<Paper shadow="lg" radius={"100%"}>
@@ -100,8 +92,6 @@ export default function CreateProfile({ userId }: { userId: any }) {
setImgPP(buffer);
setFilePP(files);
}
// console.log(buffer, "ini buffer");
// console.log(files, " ini file");
} catch (error) {
console.log(error);
}
@@ -112,10 +102,10 @@ export default function CreateProfile({ userId }: { userId: any }) {
<Button
{...props}
radius={"xl"}
variant="outline"
w={150}
leftIcon={<IconCamera />}
compact
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Upload
</Button>
@@ -127,7 +117,7 @@ export default function CreateProfile({ userId }: { userId: any }) {
<Box>
<Stack>
<ComponentKatalog_NotedBox informasi="Upload foto latar belakang profile anda." />
<ComponentGlobal_BoxInformation informasi="Upload foto latar belakang profile anda." />
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"} withBorder shadow="lg" bg={"gray.2"}>
{imgBG ? (
@@ -171,10 +161,10 @@ export default function CreateProfile({ userId }: { userId: any }) {
<Button
{...props}
radius={"xl"}
variant="outline"
w={150}
leftIcon={<IconCamera />}
compact
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Upload
</Button>
@@ -186,8 +176,11 @@ export default function CreateProfile({ userId }: { userId: any }) {
<Stack mb={"lg"}>
<TextInput
styles={{
label: { color: "white" },
}}
withAsterisk
label="Nama"
label={"Nama"}
maxLength={50}
placeholder="Nama lengkap"
onChange={(val) => {
@@ -198,6 +191,9 @@ export default function CreateProfile({ userId }: { userId: any }) {
}}
/>
<TextInput
styles={{
label: { color: "white" },
}}
withAsterisk
icon={<IconAt size={15} />}
label="Email"
@@ -218,6 +214,9 @@ export default function CreateProfile({ userId }: { userId: any }) {
}}
/>
<TextInput
styles={{
label: { color: "white" },
}}
withAsterisk
label="Alamat"
maxLength={100}
@@ -231,6 +230,9 @@ export default function CreateProfile({ userId }: { userId: any }) {
/>
<Select
styles={{
label: { color: "white" },
}}
withAsterisk
label="Jenis Kelamin"
placeholder="Pilih satu"
@@ -315,11 +317,15 @@ function ButtonAction({
loaderPosition="center"
mt={"md"}
radius={50}
bg={Warna.hijau_muda}
color="green"
bg={MainColor.yellow}
color="yellow"
onClick={() => {
onSubmit();
}}
style={{
border: `2px solid ${AccentColor.yellow}`,
color: "black",
}}
>
Simpan
</Button>

23
src/app_modules/katalog/profile/edit/layout.tsx
View File

@@ -1,27 +1,14 @@
"use client";
import {
ActionIcon,
AppShell,
Group,
Header,
Text,
Title,
} from "@mantine/core";
import { IconArrowLeft } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import ComponentKatalog_HeaderTamplate from "../../component/header_tamplate";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
export default function EditProfileLayout({ children }: { children: any }) {
const router = useRouter();
return (
<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentKatalog_HeaderTamplate title="Edit Profile" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Edit Profile" />}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

36
src/app_modules/katalog/profile/edit/view.tsx
View File

@@ -12,6 +12,7 @@ import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/
import { validRegex } from "../../component/regular_expressions";
import { Profile_funEditById } from "../fun/update/fun_edit_profile_by_id";
import { MODEL_PROFILE } from "../model/interface";
import { MainColor } from "@/app_modules/component_global/color/color_pallet";
export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
const router = useRouter();
@@ -50,6 +51,11 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
{/* <pre>{JSON.stringify(dataProfile, null, 2)}</pre> */}
<Stack px={"sm"}>
<TextInput
styles={{
label: {
color: "white",
},
}}
withAsterisk
label="Nomor"
disabled
@@ -57,6 +63,11 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
/>
<TextInput
styles={{
label: {
color: "white",
},
}}
withAsterisk
label="Username"
error={
@@ -78,6 +89,11 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
/>
<TextInput
styles={{
label: {
color: "white",
},
}}
withAsterisk
label="Nama"
placeholder="nama"
@@ -99,6 +115,11 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
/>
<TextInput
styles={{
label: {
color: "white",
},
}}
withAsterisk
label="Email"
placeholder="email"
@@ -122,6 +143,11 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
/>
<TextInput
styles={{
label: {
color: "white",
},
}}
withAsterisk
label="Alamat"
placeholder="alamat"
@@ -143,6 +169,11 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
/>
<Select
styles={{
label: {
color: "white",
},
}}
withAsterisk
label="Jenis Kelamin"
value={dataProfile?.jenisKelamin}
@@ -161,8 +192,9 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
<Button
mt={"md"}
radius={50}
bg={Warna.biru}
color="cyan"
bg={MainColor.yellow}
color="yellow"
c={"black"}
loading={loading ? true : false}
loaderPosition="center"
onClick={() => onUpdate()}

156
src/app_modules/katalog/profile/ui_profile.tsx
View File

@@ -1,156 +0,0 @@
"use client";
import {
MainColor,
AccentColor,
} from "@/app_modules/component_global/color/color_pallet";
import {
Avatar,
Box,
Center,
Group,
Image,
Paper,
Stack,
Text,
ThemeIcon,
} from "@mantine/core";
import { MODEL_PROFILE } from "./model/interface";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import {
IconBrandGmail,
IconGenderFemale,
IconGenderMale,
IconHome,
IconPhone,
} from "@tabler/icons-react";
export function Profile_UiView({
profile,
userLoginId,
}: {
profile: MODEL_PROFILE;
userLoginId: string;
}) {
const router = useRouter();
const [loadingPP, setLoadingPP] = useState(false);
const [loadingBG, setLoadingBG] = useState(false);
const [loadingEdit, setLoadingEdit] = useState(false);
const listInformation = [
{
icon: <IconPhone />,
value: profile?.User.nomor,
},
{
icon: <IconBrandGmail />,
value: profile?.email,
},
{
icon: <IconHome />,
value: profile?.alamat,
},
{
icon:
profile.jenisKelamin === "Laki-laki" ? (
<IconGenderMale />
) : (
<IconGenderFemale />
),
value: profile?.jenisKelamin,
},
];
return (
<>
<Stack
spacing={0}
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: "white",
}}
>
<Box>
<Image
radius={"sm"}
height={200}
alt="Background"
src={
profile?.ImagesBackground.url
? RouterProfile.api_url_background +
`${profile?.ImagesBackground.url}`
: "/aset/no-image.png"
}
/>
<Box
sx={{
position: "relative",
bottom: 60,
margin: "auto",
width: "100%",
marginBottom: -30,
}}
>
<Center>
<Avatar
bg={"gray.2"}
sx={{
borderStyle: "solid",
borderColor: "gray",
borderWidth: "0.5px",
}}
src={
profile?.ImageProfile?.url
? RouterProfile.api_url_foto +
`${profile?.ImageProfile.url}`
: "/aset/global/avatar.png"
}
size={100}
radius={"100%"}
/>
</Center>
<Stack align="center" c={"white"} mt={"xs"} spacing={0}>
<Text fw={"bold"} lineClamp={1}>
{profile?.name}
</Text>
<Text fs={"italic"} fz={"sm"} lineClamp={1}>
@{profile?.User?.username}
</Text>
</Stack>
</Box>
</Box>
<Box>
<Stack spacing={"xs"}>
{listInformation.map((e, i) => (
<Group key={i} align="flex-start">
<ThemeIcon
style={{
backgroundColor: "transparent",
}}
>
{e.icon}
</ThemeIcon>
<Box w={"85%"} >
<Text fw={"bold"}>{e?.value}</Text>
</Box>
</Group>
))}
</Stack>
</Box>
{/* <pre
style={{
color: "white",
}}
>
{JSON.stringify(profile, null, 2)}
</pre> */}
</Stack>
</>
);
}

33
src/app_modules/katalog/profile/upload/foto_background/index.tsx
View File

@@ -8,21 +8,23 @@ import {
Image,
Paper,
Stack,
Title,
} from "@mantine/core";
import { useState } from "react";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { MODEL_PROFILE } from "../../model/interface";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import { IconCamera } from "@tabler/icons-react";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { useRouter } from "next/navigation";
import { Profile_funUpdateFoto } from "../../fun/update/fun_update_foto_profile";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import { Profile_funUpdateBackground } from "../../fun/update/fun_update_background";
import { MODEL_PROFILE } from "../../model/interface";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
export default function Profile_UpdateFotoBackground({
dataProfile,
@@ -38,7 +40,14 @@ export default function Profile_UpdateFotoBackground({
return (
<>
<Stack spacing={"xl"}>
<Paper p={"sm"} withBorder radius={"sm"} shadow="">
<Paper
p={"sm"}
radius={"sm"}
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
}}
>
<Stack>
<AspectRatio ratio={16 / 9}>
<Image
@@ -77,10 +86,10 @@ export default function Profile_UpdateFotoBackground({
<Button
{...props}
radius={"xl"}
variant="outline"
w={150}
leftIcon={<IconCamera />}
compact
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Upload
</Button>
@@ -96,6 +105,10 @@ export default function Profile_UpdateFotoBackground({
loaderPosition="center"
radius={"xl"}
onClick={() => onUpdate(router, profile.id, file as any, setLoading)}
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Update
</Button>

30
src/app_modules/katalog/profile/upload/foto_background/layout.tsx
View File

@@ -1,38 +1,18 @@
"use client";
import {
ActionIcon,
AppShell,
FileButton,
Flex,
Footer,
Group,
Header,
Text,
} from "@mantine/core";
import { useRouter } from "next/navigation";
import { useState } from "react";
import ComponentKatalog_HeaderTamplate from "@/app_modules/katalog/component/header_tamplate";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
export default function LayoutProfile_UpdateFotoBackground({
children,
}: {
children: any;
}) {
const router = useRouter();
return (
<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentKatalog_HeaderTamplate title="Update Background" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Update Background" />}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

22
src/app_modules/katalog/profile/upload/foto_profile/index.tsx
View File

@@ -20,6 +20,10 @@ import { Profile_funUpdateFoto } from "../../fun/update/fun_update_foto_profile"
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
export default function UploadFotoProfile({
dataProfile,
@@ -35,7 +39,14 @@ export default function UploadFotoProfile({
return (
<>
<Stack spacing={"xl"}>
<Paper p={"sm"} withBorder radius={"sm"} shadow="">
<Paper
p={"sm"}
radius={"sm"}
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
}}
>
<Stack>
<AspectRatio ratio={1 / 1}>
<Image
@@ -73,10 +84,10 @@ export default function UploadFotoProfile({
<Button
{...props}
radius={"xl"}
variant="outline"
w={150}
leftIcon={<IconCamera />}
compact
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Upload
</Button>
@@ -94,6 +105,9 @@ export default function UploadFotoProfile({
onClick={() => {
onUpdate(router, profile.id, file as any, setLoading);
}}
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Update
</Button>

30
src/app_modules/katalog/profile/upload/foto_profile/layout.tsx
View File

@@ -1,38 +1,20 @@
"use client";
import {
ActionIcon,
AppShell,
FileButton,
Flex,
Footer,
Group,
Header,
Text,
} from "@mantine/core";
import { useRouter } from "next/navigation";
import { useState } from "react";
import ComponentKatalog_HeaderTamplate from "@/app_modules/katalog/component/header_tamplate";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
export default function UploadFotoProfileLayout({
children,
profileId,
}: {
children: any;
profileId: any;
}) {
const router = useRouter();
const [profile, setProfile] = useState(profileId);
return (
<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentKatalog_HeaderTamplate title="Update Foto" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Update Foto" />}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}