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

Fix: Avatar

Browse Source 
Deskripsi:
- Avatar job
- Avatar collaboration
- Avatar event
## No Issuue
This commit is contained in:
Bagasbanuna02
2024-10-01 16:31:12 +08:00
parent ca5c30499a
commit 284787243b
110 changed files with 1122 additions and 2064 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/app_modules/colab/component/card_view/card_beranda.tsx
View File

@@ -1,12 +1,10 @@
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import { Card, Stack } from "@mantine/core";
import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
import { Stack } from "@mantine/core";
import { MODEL_COLLABORATION } from "../../model/interface";
import ComponentColab_CardSectionData from "./card_section_data";
import ComponentColab_CardSectionHeaderAuthorName from "./card_section_header_author_name";
import ComponentColab_JumlahPartisipan from "./card_section_jumlah_partisipan";
import { useRouter } from "next/navigation";
import { useState } from "react";
export function ComponentColab_CardBeranda({
data,
@@ -15,28 +13,14 @@ export function ComponentColab_CardBeranda({
data: MODEL_COLLABORATION;
userLoginId: string;
}) {
const router = useRouter();
const [loadingCreate, setLoadingCreate] = useState(false);
return (
<>
<Card
style={{
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
color: "white",
borderRadius: "10px",
marginBottom: "20px",
padding: "15px",
}}
>
<ComponentGlobal_CardStyles marginBottom={"15px"}>
<Stack>
<ComponentColab_CardSectionHeaderAuthorName
authorName={data?.Author?.Profile?.name}
imagesId={data?.Author?.Profile?.imagesId}
profileId={data?.Author?.Profile?.id}
isAuthor={userLoginId === data.Author.id ? true : false}
colabId={data.id}
profile={data.Author.Profile as any}
/>
<ComponentColab_CardSectionData
colabId={data.id}
@@ -47,7 +31,7 @@ export function ComponentColab_CardBeranda({
jumlah={data.ProjectCollaboration_Partisipasi}
/>
</Stack>
</Card>
</ComponentGlobal_CardStyles>
</>
);
}

19
src/app_modules/colab/component/card_view/card_proyek_saya.tsx
View File

@@ -1,23 +1,14 @@
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import { Card, Stack } from "@mantine/core";
import { MODEL_COLLABORATION } from "../../model/interface";
import ComponentColab_CardSectionData from "./card_section_data";
import ComponentColab_JumlahPartisipan from "./card_section_jumlah_partisipan";
import { MODEL_COLLABORATION } from "../../model/interface";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
export function ComponentColab_CardProyekSaya({data, path}: {data: MODEL_COLLABORATION, path: string}) {
return (
<>
<Card
style={{
padding: "15px",
backgroundColor: AccentColor.darkblue,
borderRadius: "10px",
border: `2px solid ${AccentColor.blue}`,
color: "white",
marginBottom: "15px",
}}
>
<ComponentGlobal_CardStyles marginBottom={"15px"}>
<Stack>
<ComponentColab_CardSectionData
colabId={data.id}
@@ -28,7 +19,7 @@ export function ComponentColab_CardProyekSaya({data, path}: {data: MODEL_COLLABO
jumlah={data.ProjectCollaboration_Partisipasi}
/>
</Stack>
</Card>
</ComponentGlobal_CardStyles>
</>
);
}

5
src/app_modules/colab/component/card_view/card_section_data.tsx
View File

@@ -4,6 +4,8 @@ import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/noti
import { Card, Center, Grid, Stack, Text, Title } from "@mantine/core";
import { useRouter } from "next/navigation";
import { MODEL_COLLABORATION } from "../../model/interface";
import { useState } from "react";
import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
export default function ComponentColab_CardSectionData({
colabId,
@@ -15,6 +17,7 @@ export default function ComponentColab_CardSectionData({
data?: MODEL_COLLABORATION;
}) {
const router = useRouter();
const [visible, setVisible] = useState(false);
return (
<>
@@ -22,6 +25,7 @@ export default function ComponentColab_CardSectionData({
px={"md"}
onClick={() => {
if (path) {
setVisible(true);
router.push(path + colabId);
} else {
ComponentGlobal_NotifikasiPeringatan("Path tidak ditemukan");
@@ -79,6 +83,7 @@ export default function ComponentColab_CardSectionData({
</Text>
</Stack>
</Stack>
{visible && <ComponentGlobal_CardLoadingOverlay />}
</Card.Section>
</>
);

147
src/app_modules/colab/component/card_view/card_section_header_author_name.tsx
View File

@@ -1,87 +1,74 @@
"use client";
import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
import {
ActionIcon,
Avatar,
Card,
Divider,
Grid,
Menu,
Stack,
Text,
} from "@mantine/core";
import ComponentColab_AuthorNameOnHeader from "../header_author_name";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import { useRouter } from "next/navigation";
import { IconDots, IconEdit } from "@tabler/icons-react";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import { useDisclosure } from "@mantine/hooks";
import { useState } from "react";
import { ComponentGlobal_AvatarAndUsername } from "@/app_modules/_global/component";
import UIGlobal_Drawer from "@/app_modules/_global/ui/ui_drawer";
import { ActionIcon, Group, Stack } from "@mantine/core";
import { IconDots, IconEdit } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
export default function ComponentColab_CardSectionHeaderAuthorName({
profileId,
imagesId,
authorName,
isPembatas,
isAuthor,
colabId,
profile,
}: {
profileId?: string;
imagesId?: string;
authorName?: string;
isPembatas?: boolean;
isAuthor?: boolean;
colabId?: string;
profile?: any;
}) {
const router = useRouter();
return (
<>
<Card.Section px={"md"}>
<Stack spacing={"xs"}>
<Grid>
<Grid.Col
span={"content"}
onClick={() => {
if (profileId) {
router.push(RouterProfile.katalogOLD + profileId);
} else {
ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
}
}}
>
<Avatar
size={30}
sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
radius={"xl"}
bg={"gray.1"}
src={
imagesId
? RouterProfile.api_foto_profile + imagesId
: "/aset/global/avatar.png"
}
/>
</Grid.Col>
<Grid.Col span={"auto"}>
<Stack justify="center" h={"100%"}>
<Text lineClamp={1} fz={"sm"} fw={"bold"}>
{authorName ? authorName : "Nama author"}
</Text>
</Stack>
</Grid.Col>
<Grid.Col span={"content"}>
<Stack spacing={"xs"}>
<ComponentGlobal_AvatarAndUsername
profile={profile}
component={
<Group position="right">
<ButtonAction
isAuthor={isAuthor as any}
colabId={colabId as any}
/>
</Grid.Col>
</Grid>
{isPembatas ? <Divider /> : ""}
</Stack>
</Card.Section>
</Group>
}
/>
{/* <Grid>
<Grid.Col
span={"content"}
onClick={() => {
if (profileId) {
router.push(RouterProfile.katalogOLD + profileId);
} else {
ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
}
}}
>
<Avatar
size={30}
sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
radius={"xl"}
bg={"gray.1"}
src={
imagesId
? RouterProfile.api_foto_profile + imagesId
: "/aset/global/avatar.png"
}
/>
</Grid.Col>
<Grid.Col span={"auto"}>
<Stack justify="center" h={"100%"}>
<Text lineClamp={1} fz={"sm"} fw={"bold"}>
{authorName ? authorName : "Nama author"}
</Text>
</Stack>
</Grid.Col>
<Grid.Col span={"content"}>
</Grid.Col>
</Grid> */}
{/* {isPembatas ? <Divider /> : ""} */}
</Stack>
</>
);
}
@@ -94,7 +81,7 @@ function ButtonAction({
colabId: string;
}) {
const router = useRouter();
const [openDrawe, setOpenDrawer] = useState(false);
const [openDrawer, setOpenDrawer] = useState(false);
const listPage = [
{
@@ -107,40 +94,12 @@ function ButtonAction({
return (
<>
{/* <Menu
opened={opened}
onChange={setOpened}
position="left-start"
offset={0}
shadow="lg"
withArrow
arrowPosition="center"
>
<Menu.Target >
<Stack justify="center" h={"100%"} >
<ActionIcon variant="transparent">
{isAuthor ? <IconDots size={20} /> : ""}
</ActionIcon>
</Stack>
</Menu.Target>
<Menu.Dropdown bg={"gray.1"} >
<Menu.Item
icon={<IconEdit size={15} />}
onClick={() => {
router.push(RouterColab.edit + colabId);
}}
>
Edit
</Menu.Item>
</Menu.Dropdown>
</Menu> */}
<ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
{isAuthor ? <IconDots size={20} color="white" /> : ""}
</ActionIcon>
<UIGlobal_Drawer
opened={openDrawe}
opened={openDrawer}
close={() => setOpenDrawer(false)}
component={listPage}
/>

9
src/app_modules/colab/component/card_view/card_section_jumlah_partisipan.tsx
View File

@@ -1,7 +1,6 @@
"use client";
import { Stack, Divider, Center, Text, Grid, Card } from "@mantine/core";
import { IconUsersGroup } from "@tabler/icons-react";
import { Card, Center, Divider, Grid, Stack, Text } from "@mantine/core";
export default function ComponentColab_JumlahPartisipan({
jumlah,
@@ -10,18 +9,18 @@ export default function ComponentColab_JumlahPartisipan({
}) {
return (
<>
<Card.Section px={"md"}>
<Card.Section px={"md"} >
<Stack>
<Divider />
<Center>
<Grid>
<Grid.Col span={"content"}>
<Text c={"gray"} fz={"xs"} fw={"bold"}>
<Text c={"white"} fz={"xs"} fw={"bold"}>
{jumlah?.length ? jumlah?.length : 0}
</Text>
</Grid.Col>
<Grid.Col span={"auto"}>
<Text c={"gray"} fz={"xs"} fw={"bold"}>
<Text c={"white"} fz={"xs"} fw={"bold"}>
Partisipan
</Text>
</Grid.Col>

26
src/app_modules/colab/component/card_view/card_semua_partisipan.tsx
View File

@@ -1,13 +1,11 @@
import { Card, Stack } from "@mantine/core";
import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
import { Stack } from "@mantine/core";
import {
MODEL_COLLABORATION,
MODEL_COLLABORATION_PARTISIPASI,
MODEL_COLLABORATION_PARTISIPASI
} from "../../model/interface";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import ComponentColab_CardSectionData from "./card_section_data";
import ComponentColab_CardSectionHeaderAuthorName from "./card_section_header_author_name";
import ComponentColab_JumlahPartisipan from "./card_section_jumlah_partisipan";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
export function ComponentColab_CardSemuaPartisipan({
data,
@@ -18,21 +16,11 @@ export function ComponentColab_CardSemuaPartisipan({
}) {
return (
<>
<Card
style={{
padding: "15px",
backgroundColor: AccentColor.darkblue,
borderRadius: "10px",
border: `2px solid ${AccentColor.blue}`,
color: "white",
marginBottom: "15px",
}}
>
<ComponentGlobal_CardStyles marginBottom={"15px"}>
<Stack>
{/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
<ComponentColab_CardSectionHeaderAuthorName
authorName={data?.ProjectCollaboration.Author.Profile.name}
imagesId={data?.ProjectCollaboration.Author.Profile.imagesId}
profileId={data?.ProjectCollaboration.Author.Profile.id}
profile={data?.ProjectCollaboration.Author.Profile}
/>
<ComponentColab_CardSectionData
colabId={data?.ProjectCollaboration.id}
@@ -43,7 +31,7 @@ export function ComponentColab_CardSemuaPartisipan({
jumlah={data?.ProjectCollaboration.ProjectCollaboration_Partisipasi}
/>
</Stack>
</Card>
</ComponentGlobal_CardStyles>
</>
);
}

31
src/app_modules/colab/component/detail/header_author_list_partisipan.tsx
View File

@@ -1,13 +1,13 @@
"use client";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_AvatarAndUsername } from "@/app_modules/_global/component";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import { MODEL_USER } from "@/app_modules/home/model/interface";
import {
ActionIcon,
Avatar,
Button,
Divider,
Drawer,
Grid,
@@ -16,7 +16,7 @@ import {
ScrollArea,
Stack,
Text,
Title,
Title
} from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { IconCaretRight, IconX } from "@tabler/icons-react";
@@ -89,8 +89,27 @@ export default function ComponentColab_AuthorNameOnListPartisipan({
</Stack>
</Drawer>
<Stack spacing={"xs"}>
<Grid>
<Stack spacing={"xs"} p={"xs"}>
<ComponentGlobal_AvatarAndUsername
profile={author?.Profile as any}
fontSize={"sm"}
component={
<Stack justify="center" align="flex-end" h={"100%"}>
{deskripsi ? (
<ActionIcon
onClick={() => open()}
radius={"xl"}
variant="transparent"
>
<IconCaretRight color={MainColor.yellow} />
</ActionIcon>
) : (
""
)}
</Stack>
}
/>
{/* <Grid>
<Grid.Col
span={"content"}
onClick={() => {
@@ -136,7 +155,7 @@ export default function ComponentColab_AuthorNameOnListPartisipan({
</Stack>
</Grid.Col>
</Grid>
{isPembatas ? <Divider /> : ""}
{isPembatas ? <Divider /> : ""} */}
</Stack>
</>
);

5
src/app_modules/colab/component/detail/list_partisipasi_user.tsx
View File

@@ -30,6 +30,7 @@ import { MODEL_COLLABORATION_PARTISIPASI } from "../../model/interface";
import ComponentColab_AuthorNameOnListPartisipan from "./header_author_list_partisipan";
import notifikasiToUser_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_user";
import mqtt_client from "@/util/mqtt_client";
export default function ComponentColab_DetailListPartisipasiUser({
listPartisipan,
userLoginId,
@@ -117,6 +118,7 @@ export default function ComponentColab_DetailListPartisipasiUser({
},
}}
>
<Stack spacing={"xs"}>
<Group position="right">
<ActionIcon onClick={close} variant="transparent">
@@ -125,7 +127,7 @@ export default function ComponentColab_DetailListPartisipasiUser({
</Group>
<Textarea
maxLength={300}
label="Deskripsi Diri"
label={<Text c={"white"} mb={"sm"} fw={"bold"}>Deskripsi Diri</Text>}
placeholder="Deskripsikan diri anda yang sesuai dengan proyek ini.."
minRows={4}
onChange={(val) => {
@@ -179,7 +181,6 @@ export default function ComponentColab_DetailListPartisipasiUser({
backgroundColor: AccentColor.blue,
color: "white",
borderRadius: "10px",
marginBottom: "20px",
padding: "15px",
}}
>

42
src/app_modules/colab/component/header_author_name.tsx
View File

@@ -1,31 +1,38 @@
"use client";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { Stack, Grid, Avatar, Divider, Text, Group } from "@mantine/core";
import { ComponentGlobal_AvatarAndUsername } from "@/app_modules/_global/component";
import { Group, Stack, Text } from "@mantine/core";
import { useRouter } from "next/navigation";
import moment from "moment";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
export default function ComponentColab_AuthorNameOnHeader({
profileId,
imagesId,
authorName,
tglPublish,
isPembatas,
profile,
}: {
profileId?: string;
imagesId?: string;
authorName?: string;
tglPublish?: Date;
isPembatas?: boolean;
profile: any;
}) {
const router = useRouter();
return (
<>
<Stack spacing={"xs"} style={{
color: "white"
}}>
<Grid>
<ComponentGlobal_AvatarAndUsername
profile={profile}
component={
<Group position="right">
{tglPublish ? (
<Text fz={"xs"}>
{new Intl.DateTimeFormat("id-ID", {
dateStyle: "medium",
}).format(tglPublish)}
</Text>
) : (
""
)}
</Group>
}
/>
<Stack spacing={"xs"}>
{/* <Grid>
<Grid.Col
span={"content"}
onClick={() => {
@@ -69,8 +76,7 @@ export default function ComponentColab_AuthorNameOnHeader({
)}
</Stack>
</Grid.Col>
</Grid>
{isPembatas ? <Divider /> : ""}
</Grid> */}
</Stack>
</>
);