Merge pull request #16 from bipproduction/katalog/view

Katalog/view

README_DEV.md

@@ -1,3 +1,5 @@
+## Page info
+
 ### API
 - src/app/api
 
@@ -28,3 +30,8 @@ Deskripsi: Folder client yang mencakup sub menu dari menu-menu utama
 
 - Home:
 1. home page
+
+## NOTE
+Function name: 
+- g = global
+- gs = global state

src/app/api/profile/edit/route.ts

@@ -0,0 +1,33 @@
+import { myConsole } from "@/app/fun/my_console";
+import prisma from "@/app/lib/prisma";
+import { NextResponse } from "next/server";
+
+export async function POST(req: Request) {
+  if (req.method === "POST") {
+    const body = await req.json();
+    // myConsole(body);
+
+    const data = await prisma.profile.update({
+        where: {
+            id: body.id
+        },
+        data: {
+            name: body.name,
+            email: body.email,
+            alamat: body.alamat,
+            jenisKelamin: body.jenisKelamin
+        }
+    })
+
+    if(data) {
+        return NextResponse.json({status: 200})
+    } else {
+        return new Response("Error",{ status :401 });
+    }
+
+
+
+    return NextResponse.json({ success: true });
+  }
+  return NextResponse.json({ success: false });
+}

src/app/dev/katalog/profile/edit/layout.tsx

@@ -0,0 +1,9 @@
+import { EditProfileLayout } from "@/app_modules/katalog/profile";
+
+export default function Layout({ children }: { children: any }) {
+  return (
+    <>
+      <EditProfileLayout>{children}</EditProfileLayout>
+    </>
+  );
+}

src/app/dev/katalog/profile/edit/page.tsx

@@ -0,0 +1,13 @@
+import { getProfile } from "@/app_modules/katalog/profile";
+import EditProfile from "@/app_modules/katalog/profile/edit/view";
+
+export default async function Page() {
+  const data = await getProfile();
+
+  return (
+    <>
+      {/* {JSON.stringify(data)} */}
+      <EditProfile data={data} />
+    </>
+  );
+}

src/app/dev/katalog/view/page.tsx

@@ -1,7 +1,12 @@
+import { getProfile } from "@/app_modules/katalog/profile";
 import { KatalogView } from "@/app_modules/katalog/view";
 
 export default async function Page() {
-    return <>
+  const data = await getProfile();
-    <KatalogView/>
+  return (
+    <>
+      {/* {JSON.stringify(data)} */}
+      <KatalogView />
     </>
+  );
 }

src/app/fun/my_console.ts

@@ -1,5 +1,5 @@
 export function myConsole(value: any) {
-  const onData = false;
+  const onData = true;
   if (onData) {
     console.log(value);
   }

src/app/lib/api.ts

@@ -8,5 +8,6 @@ export const ApiHipmi = {
   logout: "/api/auth/logout",
 
   //Profile
-  create_profile: "/api/profile/create"
+  create_profile: "/api/profile/create",
+  edit_profile: "/api/profile/edit",
 };

src/app_modules/home/index.ts

@@ -1,4 +1,4 @@
 import HomeView from "./view";
 import HomeLayout from "./layout";
-import { getToken } from "./fun/get-token";
+import { getToken } from "./fun/api-get-token";
 export {HomeView, HomeLayout, getToken}

src/app_modules/home/view.tsx

@@ -15,7 +15,7 @@ import { Logout } from "../auth";
 import { useState } from "react";
 import { ApiHipmi } from "@/app/lib/api";
 import { useShallowEffect } from "@mantine/hooks";
-import { getToken } from "./fun/get-token";
+import { getToken } from "./fun/api-get-token";
 
 import {
   IconAffiliate,

src/app_modules/katalog/profile/edit/layout.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import {
+  ActionIcon,
+  AppShell,
+  Group,
+  Header,
+  Text,
+  Title,
+} from "@mantine/core";
+import { IconArrowLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+export default function EditProfileLayout({ children }: { children: any }) {
+  const router = useRouter()
+  return (
+    <>
+      <AppShell
+
+        header={
+          <Header height={50} px={"sm"}>
+            <Group position="apart" h={50}>
+              <ActionIcon variant="transparent" onClick={() => router.push("/dev/katalog/view")}>
+                <IconArrowLeft />
+              </ActionIcon>
+              <Text>Edit Profile</Text>
+              <ActionIcon variant="transparent"></ActionIcon>
+            </Group>
+          </Header>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/katalog/profile/edit/view.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { myConsole } from "@/app/fun/my_console";
+import { ApiHipmi } from "@/app/lib/api";
+import { Warna } from "@/app/lib/warna";
+import { gs_token } from "@/app_modules/home/state/global_state";
+import { Button, Select, Stack, TextInput } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useAtom } from "jotai";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-simple-toasts";
+import { gs_profile } from "../state/global_state";
+import { g_getProfile } from "../fun/fun-get-profile";
+
+export default function EditProfile({ data }: { data: any }) {
+  const router = useRouter();
+
+  //Get data profile
+  const [profile, setProfile] = useAtom(gs_profile);
+  useShallowEffect(() => {
+    g_getProfile(setProfile);
+  }, []);
+
+
+  async function onUpdate() {
+    const body = profile;
+    if (_.values(body).includes("")) return toast("Lengkapi data");
+
+    await fetch(ApiHipmi.edit_profile, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(body),
+    })
+      .then((res) => res.json())
+      .then((val) => {
+        myConsole(val);
+        if (val.status == 200) {
+          toast("Data tersimpan");
+          return router.push("/dev/katalog/view");
+        } else {
+          return toast("Gagal update !!!");
+        }
+      });
+  }
+
+  return (
+    <>
+      {/* {JSON.stringify(profile)} */}
+      <Stack px={"sm"}>
+        <TextInput label="Username" disabled value={data.User.username} />
+        <TextInput label="Nomor" disabled value={data.User.nomor} />
+
+        <TextInput
+          label="Nama"
+          placeholder="username"
+          value={profile.name}
+          onChange={(val) => {
+            setProfile({
+              ...profile,
+              name: val.target.value,
+            });
+          }}
+        />
+
+        <TextInput
+          label="Email"
+          placeholder="email"
+          value={profile.email}
+          onChange={(val) => {
+            myConsole(val.target.value);
+            setProfile({
+              ...profile,
+              email: val.target.value,
+            });
+          }}
+        />
+
+        <TextInput
+          label="Alamat"
+          placeholder="alamat"
+          value={profile.alamat}
+          onChange={(val) => {
+            myConsole(val.target.value);
+            setProfile({
+              ...profile,
+              alamat: val.target.value,
+            });
+          }}
+        />
+
+        <Select
+          label="Jenis Kelamin"
+          value={profile.jenisKelamin}
+          data={[
+            { value: "Laki-laki", label: "Laki-laki" },
+            { value: "Perempuan", label: "Perempuan" },
+          ]}
+          onChange={(val) => {
+            setProfile({
+              ...profile,
+              jenisKelamin: val as string,
+            });
+          }}
+        />
+
+        <Button
+          mt={"md"}
+          radius={50}
+          bg={Warna.biru}
+          color="cyan"
+          onClick={() => onUpdate()}
+        >
+          Update
+        </Button>
+      </Stack>
+    </>
+  );
+}

src/app_modules/katalog/profile/fun/api-get-profile.ts

@@ -5,6 +5,11 @@ import prisma from "@/app/lib/prisma";
 import { getToken } from "@/app_modules/home";
 import { NextResponse } from "next/server";
 
+
+/**
+ * @function api get data profile by user id
+ * @returns data profile 
+ */
 export async function getProfile() {
   const token = await getToken();
 
@@ -26,6 +31,12 @@ export async function getProfile() {
           active: true,
         },
       },
+      User: {
+        select : {
+          username: true,
+          nomor: true
+        }
+      }
     },
   });
 

src/app_modules/katalog/profile/fun/fun-get-profile.ts

@@ -0,0 +1,11 @@
+import { getProfile } from "..";
+
+/**
+ * @function get data profile
+ * @param setProfile
+ * @returns data profile
+ */
+export async function g_getProfile(setProfile: any) {
+    const data = await getProfile().then((res) => res);
+    setProfile(data)
+  }

src/app_modules/katalog/profile/index.ts

@@ -1,4 +1,8 @@
 import ProfileLayout from "./create/layout";
 import CreateProfile from "./create/view";
-import {getProfile} from "./fun/get-profile";
+import {getProfile} from "./fun/api-get-profile";
-export {ProfileLayout, CreateProfile, getProfile}
+import EditProfileLayout from './edit/layout';
+import EditProfileView from './edit/view'
+
+
+export {ProfileLayout, CreateProfile, getProfile, EditProfileView, EditProfileLayout}

src/app_modules/katalog/profile/state/global_state.ts

@@ -0,0 +1,6 @@
+import { atomWithStorage } from "jotai/utils";
+import { getProfile } from "..";
+
+export const gs_profile = atomWithStorage<any | null>("gs_profile", null);
+
+

src/app_modules/katalog/view/view.tsx

@@ -1,13 +1,158 @@
-"use client"
+"use client";
 
-import { BackgroundImage, Box, Center, Text } from "@mantine/core"
+import { Warna } from "@/app/lib/warna";
+import {
+  ActionIcon,
+  BackgroundImage,
+  Box,
+  Center,
+  Flex,
+  Grid,
+  Group,
+  Image,
+  Paper,
+  Text,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import {
+  IconAddressBook,
+  IconCamera,
+  IconEditCircle,
+  IconGenderFemale,
+  IconGenderMale,
+  IconHome,
+  IconMail,
+} from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { getProfile } from "../profile";
+import { gs_profile } from "../profile/state/global_state";
+import { myConsole } from "@/app/fun/my_console";
+import { useAtom } from "jotai";
+import { g_getProfile } from "../profile/fun/fun-get-profile";
 
-export default function KatalogView(){
+export default function KatalogView() {
-    return <>
+  const router = useRouter();
 
-    <Center>
+  //Get data profile
-        Katalog User
+  const [profile, setProfile] = useAtom(gs_profile);
-    </Center>
+  useShallowEffect(() => {
+    g_getProfile(setProfile);
+  }, []);
 
+  return (
+    <>
+      <Box>
+        <Paper bg={"gray"} p={"md"}>
+          <Image alt="" src={"/aset/logo.png"} />
+        </Paper>
+        <Center>
+          <Image
+            alt=""
+            src={"/aset/avatar.png"}
+            height={100}
+            width={100}
+            sx={{ position: "absolute", marginBottom: 10, paddingBottom: 10 }}
+          />
+        </Center>
+        <Center>
+          <ActionIcon
+            mr={-70}
+            mt={10}
+            variant="transparent"
+            bg={"gray"}
+            radius={50}
+            // onClick={() => router.push("/dev/katalog/profile/upload")}
+            sx={{ position: "relative" }}
+          >
+            <IconCamera color="black" size={20} />
+          </ActionIcon>
+        </Center>
+      </Box>
+
+      <Group position="apart">
+        <Flex direction={"column"} mt={"lg"}>
+          <Text fz={"lg"} fw={"bold"}>
+            {profile?.name}
+          </Text>
+          <Text fz={"xs"}>@{profile?.User?.username}</Text>
+        </Flex>
+        <ActionIcon
+          variant="transparent"
+          onClick={() => {
+            router.push("/dev/katalog/profile/edit");
+          }}
+        >
+          <IconEditCircle color={Warna.hijau_muda} size={20} />
+        </ActionIcon>
+      </Group>
+
+      <Flex direction={"column"} pt={"lg"}>
+        <Grid>
+          <Grid.Col span={"content"}>
+            <IconAddressBook />
+          </Grid.Col>
+          <Grid.Col span={"auto"}>
+            <Text>
+              {" "}
+              <Text>+{profile?.User.nomor}</Text>
+            </Text>
+          </Grid.Col>
+        </Grid>
+
+        <Grid>
+          <Grid.Col span={"content"}>
+            <IconMail />
+          </Grid.Col>
+          <Grid.Col span={"auto"}>
+            <Text>
+              {" "}
+              <Text> {profile?.email}</Text>
+            </Text>
+          </Grid.Col>
+        </Grid>
+
+        <Grid>
+          <Grid.Col span={"content"}>
+            <IconHome />
+          </Grid.Col>
+          <Grid.Col span={"auto"}>
+            <Text> {profile?.alamat}</Text>
+          </Grid.Col>
+        </Grid>
+
+        {(() => {
+          if (profile?.jenisKelamin === "Laki - laki") {
+            return (
+              <>
+                <Grid>
+                  <Grid.Col span={"content"}>
+                    <IconGenderMale />
+                  </Grid.Col>
+                  <Grid.Col span={"auto"}>
+                    <Text> {profile?.jenisKelamin}</Text>
+                  </Grid.Col>
+                </Grid>
+              </>
+            );
+          } else {
+            return (
+              <>
+                <Grid>
+                  <Grid.Col span={"content"}>
+                    <IconGenderFemale />
+                  </Grid.Col>
+                  <Grid.Col span={"auto"}>
+                    <Text> {profile?.jenisKelamin}</Text>
+                  </Grid.Col>
+                </Grid>
+              </>
+            );
+          }
+        })()}
+      </Flex>
+
+      {/* <pre>{JSON.stringify(profile, null, 2)}</pre> */}
     </>
+  );
 }