wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #270 from bipproduction/amalia/27-september-24

Browse Source 
Amalia/27 september 24
This commit is contained in:
Amalia
2024-09-27 15:37:58 +08:00
committed by GitHub
parent 30e30ec7ff 5e6079785a
commit a0979601a5
7 changed files with 107 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/(application)/profile/edit/page.tsx
View File

@@ -1,10 +1,8 @@
import { EditProfile } from "@/module/user" import { EditProfile } from "@/module/user"
import EditProfileCopy from "@/module/user/profile/ui/edit_profile copy"
function Page() { function Page() {
return ( return (
// <EditProfile /> <EditProfile />
<EditProfileCopy/>
) )
} }

22
src/app/api/division/[id]/detail/route.ts
View File

@@ -86,7 +86,12 @@ export async function GET(request: Request, context: { params: { id: string } })
idDivision: String(id), idDivision: String(id),
status: 0, status: 0,
isActive: true, isActive: true,
dateStart: new Date(), dateStart: {
lte: new Date()
},
dateEnd: {
gte: new Date()
},
DivisionProject: { DivisionProject: {
status: { status: {
lt: 3 lt: 3
@@ -98,13 +103,22 @@ export async function GET(request: Request, context: { params: { id: string } })
title: true, title: true,
dateStart: true, dateStart: true,
dateEnd: true, dateEnd: true,
DivisionProject: {
select: {
title: true
}
}
},
orderBy: {
dateEnd: "asc"
} }
}) })
allData = tugas.map((v: any) => ({ allData = tugas.map((v: any) => ({
..._.omit(v, ["dateStart", "dateEnd"]), ..._.omit(v, ["dateStart", "dateEnd", "DivisionProject"]),
dateStart: moment(v.dateStart).format("LL"), dateStart: moment(v.dateStart).format("ll"),
dateEnd: moment(v.dateEnd).format("LL") dateEnd: moment(v.dateEnd).format("ll"),
projectTitle: v.DivisionProject.title
})) }))
} else if (kategori == "new-file") { } else if (kategori == "new-file") {
allData = await prisma.divisionDocumentFolderFile.findMany({ allData = await prisma.divisionDocumentFolderFile.findMany({

11
src/module/_global/layout/layout_modal.tsx
View File

@@ -1,12 +1,9 @@
import { Button, Flex, Modal, SimpleGrid, Text } from '@mantine/core'; import { Button, Flex, Modal, SimpleGrid, Text } from '@mantine/core';
import React, { useState } from 'react';
import { BsQuestionCircleFill } from 'react-icons/bs';
import { useMediaQuery } from '@mantine/hooks'; import { useMediaQuery } from '@mantine/hooks';
import { BsQuestionCircleFill } from 'react-icons/bs';
export default function LayoutModal({ opened, onClose, description, onYes }: { opened: boolean, onClose: () => void, description: string, onYes: (val: boolean) => void }) { export default function LayoutModal({ opened, onClose, description, onYes, loading }: { opened: boolean, onClose: () => void, loading?: boolean, description: string, onYes: (val: boolean) => void }) {
const [isValModal, setValModal] = useState(opened)
const isMobile = useMediaQuery('(max-width: 768px)'); const isMobile = useMediaQuery('(max-width: 768px)');
const [loading, setLoading] = useState(false)
return ( return (
<Modal styles={{ <Modal styles={{
body: { body: {
@@ -28,9 +25,7 @@ export default function LayoutModal({ opened, onClose, description, onYes }: { o
{isMobile ? {isMobile ?
<> <>
<Button loading={loading} fullWidth size="lg" radius={'xl'} bg={'green'} onClick={() => { <Button loading={loading} fullWidth size="lg" radius={'xl'} bg={'green'} onClick={() => {
setLoading(true)
onYes(true) onYes(true)
setLoading(false)
}}>YA</Button> }}>YA</Button>
<Button fullWidth size="lg" radius={'xl'} bg={'#F1C1CF'} c={'#D30B30'} onClick={() => onYes(false)}>TIDAK</Button> <Button fullWidth size="lg" radius={'xl'} bg={'#F1C1CF'} c={'#D30B30'} onClick={() => onYes(false)}>TIDAK</Button>
</> </>
@@ -38,9 +33,7 @@ export default function LayoutModal({ opened, onClose, description, onYes }: { o
<> <>
<Button fullWidth size="lg" radius={'xl'} bg={'#F1C1CF'} c={'#D30B30'} onClick={() => onYes(false)}>TIDAK</Button> <Button fullWidth size="lg" radius={'xl'} bg={'#F1C1CF'} c={'#D30B30'} onClick={() => onYes(false)}>TIDAK</Button>
<Button loading={loading} fullWidth size="lg" radius={'xl'} bg={'green'} onClick={() => { <Button loading={loading} fullWidth size="lg" radius={'xl'} bg={'green'} onClick={() => {
setLoading(true)
onYes(true) onYes(true)
setLoading(false)
}}>YA</Button> }}>YA</Button>
</> </>

3
src/module/division_new/lib/type_division.ts
View File

@@ -33,7 +33,8 @@ export interface IDataTaskOnDetailDivision {
id: string, id: string,
title: string, title: string,
dateStart: string, dateStart: string,
dateEnd: string dateEnd: string,
projectTitle: string
} }
export interface IDataKalenderOnDetailDivision { export interface IDataKalenderOnDetailDivision {

4
src/module/division_new/ui/list_task.tsx
View File

@@ -73,11 +73,11 @@ export default function ListTaskOnDetailDivision() {
base: isMobile ? 230 : 300, base: isMobile ? 230 : 300,
md: 400 md: 400
}} onClick={() => router.push(`/task/${v.id}`)} bg={"white"} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}> }} onClick={() => router.push(`/task/${v.id}`)} bg={"white"} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
<Text fw={'bold'} c={tema.get().utama} lineClamp={1}>{_.startCase(v.title)}</Text> <Text fw={'bold'} c={tema.get().utama} lineClamp={1}>{v.title+' - '+ v.projectTitle}</Text>
<Group justify="space-between" mt={20}> <Group justify="space-between" mt={20}>
<Group gap={5} align="center"> <Group gap={5} align="center">
<CiClock2 size={18} /> <CiClock2 size={18} />
<Text fz={13}>{v.dateStart}</Text> <Text fz={13}>{v.dateStart} - {v.dateEnd}</Text>
</Group > </Group >
</Group> </Group>
</Box> </Box>

311
src/module/user/profile/ui/edit_profile copy.tsx
View File

@@ -1,311 +0,0 @@
"use client";
import { LayoutNavbarNew, TEMA } from "@/module/_global";
import {
Avatar,
Box,
Button,
Flex,
Indicator,
Modal,
rem,
Select,
Skeleton,
Stack,
Text,
TextInput,
} from "@mantine/core";
import toast from "react-hot-toast";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useRef, useState } from "react";
import { IEditDataProfile, IProfileById } from "../lib/type_profile";
import {
funEditProfileByCookies,
funGetProfileByCookies,
} from "../lib/api_profile";
import { useShallowEffect } from "@mantine/hooks";
import { FaCamera, FaShare } from "react-icons/fa6";
import { Dropzone } from "@mantine/dropzone";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useHookstate } from "@hookstate/core";
import { useForm } from "@mantine/form";
export default function EditProfileCopy() {
const [isValModal, setValModal] = useState(false);
const [isDataEdit, setDataEdit] = useState<IProfileById[]>([]);
const openRef = useRef<() => void>(null);
const [img, setIMG] = useState<any | null>();
const [imgForm, setImgForm] = useState<any>();
const router = useRouter();
const [loading, setLoading] = useState(true);
const tema = useHookstate(TEMA);
const [data, setData] = useState<IEditDataProfile>({
id: "",
nik: "",
name: "",
phone: "",
email: "",
gender: "",
img: "",
});
async function getAllProfile() {
try {
setLoading(true);
const res = await funGetProfileByCookies();
setData(res.data);
setIMG(`https://wibu-storage.wibudev.com/api/files/${res.data.img}`);
setLoading(false);
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
}
useShallowEffect(() => {
getAllProfile();
}, []);
async function onEditProfile(val: boolean) {
try {
if (val) {
const fd = new FormData();
fd.append("file", imgForm);
fd.append("data", JSON.stringify(data));
const res = await funEditProfileByCookies(fd);
if (res.success) {
setValModal(false);
toast.success(res.message);
router.push("/profile");
} else {
toast.error(res.message);
}
}
setValModal(false);
} catch (error) {
console.error(error);
toast.error("Gagal edit profil, coba lagi nanti");
}
}
return (
<Box>
<LayoutNavbarNew back="" title="Edit Profill" menu="" />
<Stack
align="center"
justify="center"
gap="xs"
pt={30}
px={20}
pb={100}
>
<Dropzone
openRef={openRef}
onDrop={async (files) => {
if (!files || _.isEmpty(files))
return toast.error("Tidak ada gambar yang dipilih");
setImgForm(files[0]);
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files[0].arrayBuffer())])
);
setIMG(buffer);
}}
activateOnClick={false}
maxSize={1 * 1024 ** 2}
accept={["image/png", "image/jpeg", "image/heic"]}
onReject={(files) => {
return toast.error(
"File yang diizinkan: .png, .jpg, dan .heic dengan ukuran maksimal 1 MB"
);
}}
></Dropzone>
{loading ? (
<Skeleton height={150} width={150} radius={"100"} />
) : (
<Indicator
offset={20}
withBorder
inline
color={tema.get().bgFiturHome}
position="bottom-end"
label={<FaCamera size={20} />}
size={40}
onClick={() => openRef.current?.()}
>
<Avatar
size="150"
radius={"100"}
src={img}
style={{
border: `1px solid ${"#C1BFBFFF"}`,
}}
/>
</Indicator>
)}
{loading ? (
<>
<Skeleton height={40} mt={20} radius={30} />
<Skeleton height={40} mt={20} radius={30} />
<Skeleton height={40} mt={20} radius={30} />
<Skeleton height={40} mt={20} radius={30} />
<Skeleton height={40} mt={20} radius={30} />
</>
) : (
<>
<TextInput
size="md"
type="number"
radius={30}
placeholder="NIK"
withAsterisk
label="NIK"
w={"100%"}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => {
setData({ ...data, nik: e.target.value });
}}
value={data.nik}
/>
<TextInput
size="md"
type="text"
radius={30}
placeholder="Nama"
withAsterisk
label="Nama"
value={data.name}
w={"100%"}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => {
setData({ ...data, name: e.target.value });
}}
/>
<TextInput
size="md"
type="email"
radius={30}
placeholder="Email"
withAsterisk
label="Email"
w={"100%"}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => {
setData({ ...data, email: e.target.value });
}}
value={data.email}
/>
<TextInput
size="md"
type="number"
radius={30}
placeholder="8xx xxxx xxxx"
withAsterisk
label="Nomor Telepon"
w={"100%"}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
leftSection={<Text>+62</Text>}
onChange={(e) => {
setData({ ...data, phone: e.target.value });
}}
value={data.phone}
/>
<Select
placeholder="Jenis Kelamin"
label="Jenis Kelamin"
w={"100%"}
size="md"
required
withAsterisk
radius={30}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
data={[
{
value: "M",
label: "Laki-laki",
},
{
value: "F",
label: "Perempuan",
},
]}
onChange={(val: any) => {
setData({ ...data, gender: val });
}}
value={data.gender}
/>
</>
)}
</Stack>
<Box
pos={"fixed"}
bottom={0}
p={rem(20)}
w={"100%"}
style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${tema.get().bgUtama}`,
}}
>
{loading ? (
<Skeleton height={50} radius={30} />
) : (
<Button
c={"white"}
bg={tema.get().utama}
size="md"
radius={30}
fullWidth
type="submit"
>
Simpan
</Button>
)}
</Box>
<LayoutModal
opened={isValModal}
onClose={() => setValModal(false)}
description="Apakah Anda yakin ingin
melakukan perubahan data?"
onYes={(val) => {
onEditProfile(val);
}}
/>
</Box>
);
}

160
src/module/user/profile/ui/edit_profile.tsx
View File

@@ -1,33 +1,17 @@
"use client"; "use client";
import { LayoutNavbarNew, TEMA } from "@/module/_global"; import { LayoutNavbarNew, TEMA } from "@/module/_global";
import {
Avatar,
Box,
Button,
Flex,
Indicator,
Modal,
rem,
Select,
Skeleton,
Stack,
Text,
TextInput,
} from "@mantine/core";
import toast from "react-hot-toast";
import LayoutModal from "@/module/_global/layout/layout_modal"; import LayoutModal from "@/module/_global/layout/layout_modal";
import { useRef, useState } from "react"; import { useHookstate } from "@hookstate/core";
import { IEditDataProfile, IProfileById } from "../lib/type_profile"; import { Avatar, Box, Button, Indicator, rem, Select, Skeleton, Stack, Text, TextInput } from "@mantine/core";
import {
funEditProfileByCookies,
funGetProfileByCookies,
} from "../lib/api_profile";
import { useShallowEffect } from "@mantine/hooks";
import { FaCamera, FaShare } from "react-icons/fa6";
import { Dropzone } from "@mantine/dropzone"; import { Dropzone } from "@mantine/dropzone";
import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash"; import _ from "lodash";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useHookstate } from "@hookstate/core"; import { useRef, useState } from "react";
import toast from "react-hot-toast";
import { FaCamera } from "react-icons/fa6";
import { funEditProfileByCookies, funGetProfileByCookies, } from "../lib/api_profile";
import { IEditDataProfile, IProfileById } from "../lib/type_profile";
export default function EditProfile() { export default function EditProfile() {
const [isValModal, setValModal] = useState(false); const [isValModal, setValModal] = useState(false);
@@ -38,6 +22,7 @@ export default function EditProfile() {
const router = useRouter(); const router = useRouter();
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const tema = useHookstate(TEMA); const tema = useHookstate(TEMA);
const [loadingKonfirmasi, setLoadingKonfirmasi] = useState(false);
const [touched, setTouched] = useState({ const [touched, setTouched] = useState({
nik: false, nik: false,
@@ -78,7 +63,7 @@ export default function EditProfile() {
async function onEditProfile(val: boolean) { async function onEditProfile(val: boolean) {
try { try {
if (val) { if (val) {
setLoadingKonfirmasi(true)
const fd = new FormData(); const fd = new FormData();
fd.append("file", imgForm); fd.append("file", imgForm);
fd.append("data", JSON.stringify(data)); fd.append("data", JSON.stringify(data));
@@ -96,6 +81,55 @@ export default function EditProfile() {
} catch (error) { } catch (error) {
console.error(error); console.error(error);
toast.error("Gagal edit profil, coba lagi nanti"); toast.error("Gagal edit profil, coba lagi nanti");
} finally {
setLoadingKonfirmasi(false)
}
}
function onCheck() {
if (Object.values(touched).some((v) => v == true))
return false
setValModal(true)
}
function onValidation(kategori: string, val: string) {
if (kategori == 'nik') {
setData({ ...data, nik: val })
if (val === "" || val.length !== 16) {
setTouched({ ...touched, nik: true })
} else {
setTouched({ ...touched, nik: false })
}
} else if (kategori == 'name') {
setData({ ...data, name: val })
if (val === "") {
setTouched({ ...touched, name: true })
} else {
setTouched({ ...touched, name: false })
}
} else if (kategori == 'phone') {
setData({ ...data, phone: val })
if (val == "" || !(val.length >= 10 && val.length <= 15)) {
setTouched({ ...touched, phone: true })
} else {
setTouched({ ...touched, phone: false })
}
} else if (kategori == 'email') {
setData({ ...data, email: val })
if (val == "" || !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(val)) {
setTouched({ ...touched, email: true })
} else {
setTouched({ ...touched, email: false })
}
} else if (kategori == 'gender') {
setData({ ...data, gender: val })
if (val == "" || val == "null") {
setTouched({ ...touched, gender: true })
} else {
setTouched({ ...touched, gender: false })
}
} }
} }
@@ -149,18 +183,18 @@ export default function EditProfile() {
)} )}
{loading ? ( {loading ? (
<> <>
<Skeleton height={40} mt={20} radius={30} /> <Skeleton height={40} mt={20} radius={10} />
<Skeleton height={40} mt={20} radius={30} /> <Skeleton height={40} mt={20} radius={10} />
<Skeleton height={40} mt={20} radius={30} /> <Skeleton height={40} mt={20} radius={10} />
<Skeleton height={40} mt={20} radius={30} /> <Skeleton height={40} mt={20} radius={10} />
<Skeleton height={40} mt={20} radius={30} /> <Skeleton height={40} mt={20} radius={10} />
</> </>
) : ( ) : (
<> <>
<TextInput <TextInput
size="md" size="md"
type="number" type="number"
radius={30} radius={10}
placeholder="NIK" placeholder="NIK"
withAsterisk withAsterisk
label="NIK" label="NIK"
@@ -172,12 +206,8 @@ export default function EditProfile() {
borderColor: tema.get().utama, borderColor: tema.get().utama,
}, },
}} }}
onChange={(e) => { onChange={(e) => { onValidation('nik', e.target.value) }}
setData({ ...data, nik: e.target.value });
setTouched({ ...touched, nik: false });
}}
value={data.nik} value={data.nik}
onBlur={() => setTouched({ ...touched, nik: true })}
error={ error={
touched.nik && touched.nik &&
(data.nik === "" (data.nik === ""
@@ -190,7 +220,7 @@ export default function EditProfile() {
<TextInput <TextInput
size="md" size="md"
type="text" type="text"
radius={30} radius={10}
placeholder="Nama" placeholder="Nama"
withAsterisk withAsterisk
label="Nama" label="Nama"
@@ -202,12 +232,8 @@ export default function EditProfile() {
borderColor: tema.get().utama, borderColor: tema.get().utama,
}, },
}} }}
onChange={(e) => { onChange={(e) => { onValidation('name', e.target.value) }}
setData({ ...data, name: e.target.value });
setTouched({ ...touched, name: false });
}}
value={data.name} value={data.name}
onBlur={() => setTouched({ ...touched, name: true })}
error={ error={
touched.name && touched.name &&
(data.name == "" ? "Nama Tidak Boleh Kosong" : null) (data.name == "" ? "Nama Tidak Boleh Kosong" : null)
@@ -216,7 +242,7 @@ export default function EditProfile() {
<TextInput <TextInput
size="md" size="md"
type="email" type="email"
radius={30} radius={10}
placeholder="Email" placeholder="Email"
withAsterisk withAsterisk
label="Email" label="Email"
@@ -228,19 +254,15 @@ export default function EditProfile() {
borderColor: tema.get().utama, borderColor: tema.get().utama,
}, },
}} }}
onChange={(e) => { onChange={(e) => { onValidation('email', e.target.value) }}
setData({ ...data, email: e.target.value });
setTouched({ ...touched, email: false });
}}
value={data.email} value={data.email}
onBlur={() => setTouched({ ...touched, email: true })}
error={ error={
touched.email && touched.email &&
(data.email == "" (data.email == ""
? "Email Tidak Boleh Kosong" ? "Email Tidak Boleh Kosong"
: !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test( : !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(
data.email data.email
) )
? "Email tidak valid" ? "Email tidak valid"
: null) : null)
} }
@@ -248,7 +270,7 @@ export default function EditProfile() {
<TextInput <TextInput
size="md" size="md"
type="number" type="number"
radius={30} radius={10}
placeholder="8xx xxxx xxxx" placeholder="8xx xxxx xxxx"
withAsterisk withAsterisk
label="Nomor Telepon" label="Nomor Telepon"
@@ -261,15 +283,12 @@ export default function EditProfile() {
}, },
}} }}
leftSection={<Text>+62</Text>} leftSection={<Text>+62</Text>}
onChange={(e) => { onChange={(e) => { onValidation('phone', e.target.value); }}
setData({ ...data, phone: e.target.value });
setTouched({ ...touched, phone: false });
}}
value={data.phone} value={data.phone}
onBlur={() => setTouched({ ...touched, phone: true })}
error={ error={
touched.phone && touched.phone &&
(data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" : null) (data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong"
: !(data.phone.length >= 10 && data.phone.length <= 15) ? "Nomor Telepon Tidak Valid" : null)
} }
/> />
<Select <Select
@@ -279,7 +298,7 @@ export default function EditProfile() {
size="md" size="md"
required required
withAsterisk withAsterisk
radius={30} radius={10}
styles={{ styles={{
input: { input: {
color: tema.get().utama, color: tema.get().utama,
@@ -297,15 +316,11 @@ export default function EditProfile() {
label: "Perempuan", label: "Perempuan",
}, },
]} ]}
onChange={(val: any) => { onChange={(val: any) => { onValidation('gender', val) }}
setData({ ...data, gender: val });
setTouched({ ...touched, gender: false });
}}
value={data.gender} value={data.gender}
onBlur={() => setTouched({ ...touched, gender: true })}
error={ error={
touched.gender && touched.gender &&
(data.gender == "" ? "Jenis Kelamin Tidak Boleh Kosong" : null) (data.gender == "" || data.gender == null ? "Jenis Kelamin Tidak Boleh Kosong" : null)
} }
/> />
</> </>
@@ -328,28 +343,17 @@ export default function EditProfile() {
<Button <Button
c={"white"} c={"white"}
bg={tema.get().utama} bg={tema.get().utama}
size="md" size="lg"
radius={30} radius={30}
fullWidth fullWidth
onClick={() => { onClick={() => { onCheck() }}
if (
data.nik !== "" &&
data.name !== "" &&
data.email !== "" &&
data.phone !== "" &&
data.gender !== ""
) {
setValModal(true);
} else {
toast.error("Mohon lengkapi semua form");
}
}}
> >
Simpan Simpan
</Button> </Button>
)} )}
</Box> </Box>
<LayoutModal <LayoutModal
loading={loadingKonfirmasi}
opened={isValModal} opened={isValModal}
onClose={() => setValModal(false)} onClose={() => setValModal(false)}
description="Apakah Anda yakin ingin description="Apakah Anda yakin ingin