Merge pull request #162 from bipproduction/amalia/06-des-24

Amalia/06 des 24

src/app/api/new/portofolio/route.ts

@@ -8,9 +8,11 @@ export async function GET(request: Request) {
       let fixData
       const { searchParams } = new URL(request.url)
       const profile = searchParams.get("profile")
+      const kategori_halaman = searchParams.get("cat")
       const page = searchParams.get("page")
+      const dataSkip = Number(page) * 10 - 10;
 
-      if (page == "profile") {
+      if (kategori_halaman == "profile") {
          fixData = await prisma.portofolio.findMany({
             take: 2,
             orderBy: {
@@ -27,8 +29,10 @@ export async function GET(request: Request) {
                profileId: true,
             },
          });
-      } else if (page == "portofolio") {
+      } else if (kategori_halaman == "portofolio") {
          fixData = await prisma.portofolio.findMany({
+            skip: dataSkip,
+            take: 10,
             orderBy: {
                createdAt: "desc",
             },

src/app/dev/katalog/[id]/layout.tsx

@@ -1,31 +1,24 @@
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
-import { KatalogLayout } from "@/app_modules/katalog/main";
-import { Profile_getOneProfileAndUserById } from "@/app_modules/katalog/profile/fun/get/get_one_user_profile";
+import { LayoutKatalogNew } from "@/app_modules/katalog/main";
 
-export default async function Layout({
-  children,
-  params,
-}: {
-  children: any;
-  params: { id: string };
-}) {
-  const profileId = params.id;
-  const dataProfile = await Profile_getOneProfileAndUserById(profileId);
-  const authorId = dataProfile?.userId;
+export default async function Layout({ children, params, }: { children: any; params: { id: string } }) {
+  // const profileId = params.id;
+  // const dataProfile = await Profile_getOneProfileAndUserById(profileId);
+  // const authorId = dataProfile?.userId;
 
-  const userLoginId = await funGetUserIdByToken();
-  const userRoleId = dataProfile?.User?.masterUserRoleId;
+  // const userLoginId = await funGetUserIdByToken();
+  // const userRoleId = dataProfile?.User?.masterUserRoleId;
 
   return (
     <>
-      <KatalogLayout
+      {/* <KatalogLayout
         profileId={profileId}
         userLoginId={userLoginId as string}
         authorId={authorId as any}
         userRoleId={userRoleId as string}
       >
         {children}
-      </KatalogLayout>
+      </KatalogLayout> */}
+      <LayoutKatalogNew>{children}</LayoutKatalogNew>
     </>
   );
 }

src/app/dev/katalog/[id]/page.tsx

@@ -1,14 +1,11 @@
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
-import { Katalog_MainView, ViewKatalogNew } from "@/app_modules/katalog";
-import { funGetListPortofolio } from "@/app_modules/katalog/portofolio/fun/get/get_list_portofolio";
-import { Profile_getOneProfileAndUserById } from "@/app_modules/katalog/profile/fun/get/get_one_user_profile";
+import { ViewKatalogNew } from "@/app_modules/katalog";
 
 export default async function Page({ params }: { params: { id: string } }) {
-  let profileId = params.id;
-  const userLoginId = await funGetUserIdByToken();
+  // let profileId = params.id;
+  // const userLoginId = await funGetUserIdByToken();
 
-  const listPorto = await funGetListPortofolio(profileId);
-  const dataProfile = await Profile_getOneProfileAndUserById(profileId);
+  // const listPorto = await funGetListPortofolio(profileId);
+  // const dataProfile = await Profile_getOneProfileAndUserById(profileId);
 
   return (
     <>

src/app/dev/portofolio/daftar-portofolio/[id]/page.tsx

@@ -1,17 +1,17 @@
-import { Portofolio_ViewListDetail } from "@/app_modules/katalog/portofolio";
-import { portofolio_funGetAllDaftarByid } from "@/app_modules/katalog/portofolio/fun/get/get_all_portofolio";
+import { ListDetailPortofolioNew } from "@/app_modules/katalog/portofolio";
 
 export default async function Page({ params }: { params: { id: string } }) {
-  const profileId = params.id;
-  const dataPortofolio = await portofolio_funGetAllDaftarByid({
-    profileId,
-    page: 1,
-  });
+  // const profileId = params.id;
+  // const dataPortofolio = await portofolio_funGetAllDaftarByid({
+  //   profileId,
+  //   page: 1,
+  // });
 
 
   return (
     <>
-      <Portofolio_ViewListDetail dataPortofolio={dataPortofolio as any} profileId={profileId} />
+      {/* <Portofolio_ViewListDetail dataPortofolio={dataPortofolio as any} profileId={profileId} /> */}
+      <ListDetailPortofolioNew />
     </>
   );
 }

src/app_modules/katalog/component/drawer_katalog_new.tsx

@@ -0,0 +1,110 @@
+import { RouterAdminDashboard } from "@/app/lib/router_hipmi/router_admin";
+import { RouterPortofolio, RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import { AccentColor } from "@/app_modules/_global/color";
+import Component_ButtonLogout from "@/app_modules/auth/logout/view";
+import { ActionIcon, Drawer, Group, SimpleGrid, Stack, Text } from "@mantine/core";
+import { IconDashboard } from "@tabler/icons-react";
+import { IconEdit, IconPencilPlus, IconPhotoEdit, IconPolaroid, IconX } from "@tabler/icons-react";
+import { useParams, useRouter } from "next/navigation";
+
+export default function DrawerKatalogNew({ opened, close, userRoleId, userId }: { opened: boolean, close: () => void, userRoleId: string, userId: string }) {
+   const param = useParams<{ id: string }>()
+   const router = useRouter()
+
+   const listPage = [
+      {
+         id: "1",
+         name: "Edit profile",
+         icon: <IconEdit />,
+         path: RouterProfile.edit + param.id,
+      },
+      {
+         id: "2",
+         name: "Ubah foto profile",
+         icon: <IconPhotoEdit />,
+         path: RouterProfile.update_foto_profile + param.id,
+      },
+      {
+         id: "3",
+         name: "Ubah latar belakang",
+         icon: <IconPolaroid />,
+         path: RouterProfile.update_foto_background + param.id,
+      },
+      {
+         id: "4",
+         name: "Tambah portofolio",
+         icon: <IconPencilPlus />,
+         path: RouterPortofolio.create + param.id,
+      },
+   ];
+
+   return <>
+      <Drawer
+         opened={opened}
+         onClose={() => close()}
+         position={"bottom"}
+         size={"auto"}
+         withCloseButton={false}
+         styles={{
+            content: {
+               padding: 0,
+               position: "absolute",
+               margin: "auto",
+               backgroundColor: "transparent",
+               left: 0,
+               right: 0,
+               width: 500,
+            },
+            body: {
+               backgroundColor: AccentColor.darkblue,
+               borderTop: `2px solid ${AccentColor.blue}`,
+               borderRight: `1px solid ${AccentColor.blue}`,
+               borderLeft: `1px solid ${AccentColor.blue}`,
+               borderRadius: "20px 20px 0px 0px",
+               color: "white",
+               paddingBottom: "5%",
+            },
+         }}
+      >
+         <Stack spacing={"xs"}>
+            <Group position="right">
+               <ActionIcon onClick={close} variant="transparent">
+                  <IconX color="white" />
+               </ActionIcon>
+            </Group>
+            <SimpleGrid cols={4}>
+               {listPage.map((e, i) => (
+                  <Stack key={i} align="center" spacing={"xs"}>
+                     <ActionIcon
+                        variant="transparent"
+                        c="white"
+                        onClick={() => { router.push(e.path, { scroll: false }); }}
+                     >
+                        {e.icon}
+                     </ActionIcon>
+                     <Text align="center" color="white">
+                        {e.name}
+                     </Text>
+                  </Stack>
+               ))}
+
+               <Component_ButtonLogout userId={userId} />
+               {userRoleId != "1" && (
+                  <Stack align="center" spacing={"xs"}>
+                     <ActionIcon
+                        variant="transparent"
+                        c="white"
+                        onClick={() => { router.push(RouterAdminDashboard.main_admin, { scroll: false }); }}
+                     >
+                        <IconDashboard />
+                     </ActionIcon>
+                     <Text align="center" color="white">
+                        Dashboard Admin
+                     </Text>
+                  </Stack>
+               )}
+            </SimpleGrid>
+         </Stack>
+      </Drawer>
+   </>;
+}

src/app_modules/katalog/main/index.ts

@@ -1,3 +1,5 @@
 import KatalogLayout from "./layout";
+import LayoutKatalogNew from "./layout_new";
 
 export { KatalogLayout };
+export { LayoutKatalogNew }

src/app_modules/katalog/main/layout_new.tsx

@@ -0,0 +1,60 @@
+'use client'
+import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
+import { UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from "@/app_modules/_global/ui";
+import { apiGetUserProfile } from "@/app_modules/user";
+import { ActionIcon } from "@mantine/core";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
+import { IconDotsVertical } from "@tabler/icons-react";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import DrawerKatalogNew from "../component/drawer_katalog_new";
+
+export default function LayoutKatalogNew({ children }: { children: any }) {
+   const param = useParams<{ id: string }>()
+   const [authorId, setAuthorId] = useState("")
+   const [userRoleId, setUserRoleId] = useState("")
+   const [userLoginId, setUserLoginId] = useState("")
+   const [opened, { open, close }] = useDisclosure()
+
+   async function getProfile() {
+      try {
+         const response = await apiGetUserProfile(`?profile=${param.id}`)
+         const response2 = await funGetUserIdByToken()
+         if (response.success) {
+            setAuthorId(response.data.id)
+            setUserRoleId(response.data.masterUserRoleId)
+            setUserLoginId(response2)
+         }
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   useShallowEffect(() => {
+      getProfile()
+   }, [])
+
+   return (
+      <>
+         <UIGlobal_LayoutTamplate
+            header={
+               <UIGlobal_LayoutHeaderTamplate
+                  title="KATALOG"
+                  customButtonRight={
+                     authorId !== userLoginId ? (
+                        <ActionIcon disabled variant="transparent"></ActionIcon>
+                     ) : (
+                        <ActionIcon c="white" variant="transparent" onClick={() => open()}>
+                           <IconDotsVertical />
+                        </ActionIcon>
+                     )
+                  }
+               />
+            }
+         >
+            {children}
+            <DrawerKatalogNew opened={opened} close={() => close()} userRoleId={userRoleId} userId={userLoginId} />
+         </UIGlobal_LayoutTamplate>
+      </>
+   )
+}

src/app_modules/katalog/portofolio/index.ts

@@ -10,6 +10,7 @@ import Portofolio_EditMedsosBisnis from "./edit/medsos/ui_edit_medsos";
 import LayoutPortofolio_EditDataBisnis from "./edit/data/layout";
 import LayoutPortofolio_EditLogoBisnis from "./edit/logo/layout";
 import LayoutPortofolio_EditMedsosBisnis from "./edit/medsos/layout";
+import ListDetailPortofolioNew from './view/list_detail_portofolio_new';
 
 export {
   CreatePortofolio,
@@ -22,8 +23,9 @@ export {
   LayoutPortofolio_EditDataBisnis,
   LayoutPortofolio_EditLogoBisnis,
   LayoutPortofolio_EditMedsosBisnis,
-  apiGetPortofolioByProfile
+  apiGetPortofolioByProfile,
 };
 export type { IListPortofolio };
 export { Portofolio_ViewListDetail } from "./view/view_list_detail_portofolio";
+export { ListDetailPortofolioNew }
 

src/app_modules/katalog/portofolio/ui/ui_list_detail_portofolio_new.tsx

@@ -0,0 +1,59 @@
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { Box, Center } from "@mantine/core";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import { ComponentPortofolio_DaftarBoxView } from "../component/card_view_daftar";
+import { portofolio_funGetAllDaftarByid } from "../fun/get/get_all_portofolio";
+import { MODEL_PORTOFOLIO } from "../model/interface";
+import { useParams } from "next/navigation";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetPortofolioByProfile } from "../lib/api_portofolio";
+
+export default function Portofolio_UiListDetailNew() {
+   const param = useParams<{ id: string }>()
+   const profileId = param.id
+   const [data, setData] = useState<MODEL_PORTOFOLIO[]>([])
+   const [activePage, setActivePage] = useState(1)
+
+   async function getPortofolio() {
+      try {
+         const response = await apiGetPortofolioByProfile(`?profile=${param.id}&cat=portofolio&page=1`)
+         if (response.success) {
+            setData(response.data);
+         }
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+
+   useShallowEffect(() => {
+      getPortofolio()
+   }, []);
+
+   return <>
+      <Box py={5}>
+         <ScrollOnly
+            height="90vh"
+            renderLoading={() => (
+               <Center mt={"lg"}>
+                  <ComponentGlobal_Loader />
+               </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+               const loadData = await portofolio_funGetAllDaftarByid({
+                  profileId,
+                  page: activePage + 1,
+               });
+               setActivePage((val) => val + 1);
+
+               return loadData;
+            }}
+         >
+            {(item) => <ComponentPortofolio_DaftarBoxView data={item} />}
+         </ScrollOnly>
+      </Box>
+   </>;
+}

src/app_modules/katalog/portofolio/view/list_detail_portofolio_new.tsx

@@ -0,0 +1,13 @@
+'use client'
+import { UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from "@/app_modules/_global/ui";
+import Portofolio_UiListDetailNew from "../ui/ui_list_detail_portofolio_new";
+
+export default function ListDetailPortofolioNew() {
+   return (
+      <>
+         <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Daftar Portofolio" />} >
+            <Portofolio_UiListDetailNew />
+         </UIGlobal_LayoutTamplate>
+      </>
+   )
+}

src/app_modules/katalog/ui/list_portolio_new.tsx

@@ -17,7 +17,7 @@ export default function ListPortofolioProfileNew() {
    async function getPortofolio() {
       try {
          setLoading(true)
-         const response = await apiGetPortofolioByProfile(`?profile=${param.id}&page=profile`)
+         const response = await apiGetPortofolioByProfile(`?profile=${param.id}&cat=profile`)
          if (response.success) {
             setDataPortofolio(response.data);
          }

src/app_modules/katalog/view_katalog_new.tsx

@@ -8,11 +8,6 @@ export default function ViewKatalogNew() {
       <>
          <Stack mb={"lg"}>
             <ProfileDetail />
-            {/* <Portofolio_UiListView
-               listPorto={listPorto as any}
-               profile={profile}
-               userLoginId={userLoginId}
-            /> */}
             <ListPortofolioProfileNew />
          </Stack>
       </>