Merge pull request #259 from bipproduction/lukman/26-september-2024

style : update style
This commit is contained in:
Amalia
2024-09-26 14:19:47 +08:00
committed by GitHub
7 changed files with 251 additions and 181 deletions

View File

@@ -208,7 +208,6 @@ export default function NavbarCreateDivisionCalender() {
data={[
{ value: 'once', label: 'Acara 1 Kali' },
{ value: 'daily', label: 'Setiap Hari' },
// { value: 'weekdays', label: 'Hari Kerja (Sen - Jum)' },
{ value: 'weekly', label: 'Mingguan' },
{ value: 'monthly', label: 'Bulanan' },
{ value: 'yearly', label: 'Tahunan' },
@@ -226,31 +225,60 @@ export default function NavbarCreateDivisionCalender() {
)
}
/>
<TextInput styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
type='number'
required
label="Jumlah pengulangan"
size="md"
placeholder='Jumlah pengulangan'
value={isData.repeatValue}
onChange={(event) => {
setData({ ...isData, repeatValue: String(event.currentTarget.value) })
setTouched({ ...touched, repeatValue: false })
{isData.repeatEventTyper == "once" ?
<TextInput styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
onBlur={() => setTouched({ ...touched, repeatValue: true })}
// TODO :: NANTI DIPERBAIKI
error={
touched.repeatValue && (
isData.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : ""
// || Number(isData.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh 0" : ""
)
}
/>
type='number'
required
label="Jumlah pengulangan"
size="md"
disabled
placeholder='Jumlah pengulangan'
value={isData.repeatValue}
onChange={(event) => {
setData({ ...isData, repeatValue: String(event.currentTarget.value) })
setTouched({ ...touched, repeatValue: false })
}}
onBlur={() => setTouched({ ...touched, repeatValue: true })}
// TODO :: NANTI DIPERBAIKI
error={
touched.repeatValue && (
isData.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : ""
// || Number(isData.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh 0" : ""
)
}
/>
:
<TextInput styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
type='number'
required
label="Jumlah pengulangan"
size="md"
placeholder='Jumlah pengulangan'
value={isData.repeatValue}
onChange={(event) => {
setData({ ...isData, repeatValue: String(event.currentTarget.value) })
setTouched({ ...touched, repeatValue: false })
}}
onBlur={() => setTouched({ ...touched, repeatValue: true })}
// TODO :: NANTI DIPERBAIKI
error={
touched.repeatValue && (
isData.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : ""
// || Number(isData.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh 0" : ""
)
}
/>
}
<Textarea styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,

View File

@@ -254,7 +254,6 @@ export default function UpdateDivisionCalender() {
data={[
{ value: 'once', label: 'Acara 1 Kali' },
{ value: 'daily', label: 'Setiap Hari' },
// { value: 'weekdays', label: 'Hari Kerja (Sen - Jum)' },
{ value: 'weekly', label: 'Mingguan' },
{ value: 'monthly', label: 'Bulanan' },
{ value: 'yearly', label: 'Tahunan' },
@@ -278,30 +277,58 @@ export default function UpdateDivisionCalender() {
}
required
/>
<TextInput styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
type='number'
required
label="Jumlah pengulangan"
size="md"
placeholder='Jumlah pengulangan'
defaultValue={isDataCalender?.repeatValue}
onChange={(event) => {
setDataCalender({ ...isDataCalender, repeatValue: String(event.currentTarget.value) })
setTouched({ ...touched, repeatValue: false })
{isDataCalender?.repeatEventTyper == "once" ?
<TextInput styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
onBlur={() => setTouched({ ...touched, repeatValue: true })}
error={
touched.repeatValue && (
isDataCalender?.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : null
// || Number(isDataCalender?.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh dibawah 1" : null
)
}
/>
type='number'
required
label="Jumlah pengulangan"
size="md"
disabled
placeholder='Jumlah pengulangan'
defaultValue={isDataCalender?.repeatValue}
onChange={(event) => {
setDataCalender({ ...isDataCalender, repeatValue: String(event.currentTarget.value) })
setTouched({ ...touched, repeatValue: false })
}}
onBlur={() => setTouched({ ...touched, repeatValue: true })}
error={
touched.repeatValue && (
isDataCalender?.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : null
// || Number(isDataCalender?.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh dibawah 1" : null
)
}
/>
:
<TextInput styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
type='number'
required
label="Jumlah pengulangan"
size="md"
placeholder='Jumlah pengulangan'
defaultValue={isDataCalender?.repeatValue}
onChange={(event) => {
setDataCalender({ ...isDataCalender, repeatValue: String(event.currentTarget.value) })
setTouched({ ...touched, repeatValue: false })
}}
onBlur={() => setTouched({ ...touched, repeatValue: true })}
error={
touched.repeatValue && (
isDataCalender?.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : null
// || Number(isDataCalender?.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh dibawah 1" : null
)
}
/>
}
<Textarea styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,

View File

@@ -133,12 +133,12 @@ export default function DrawerCutDocuments({
</Grid.Col>
</Grid>
</Box>
<Box p={10} pb={60}>
<Box pb={60}>
<Box>
<Breadcrumbs
separator={<GoChevronRight />}
separatorMargin="md"
mt="xs"
mb={10}
>
{dataJalur.map((v, i) => {
return (
@@ -156,9 +156,9 @@ export default function DrawerCutDocuments({
<ScrollArea
h={{
base: "55vh",
xl: "58vh",
md: "57vh",
sm: "58vh",
xl: "56vh",
md: "56vh",
sm: "56vh",
}}
type="scroll"
scrollbarSize={2}
@@ -205,7 +205,7 @@ export default function DrawerCutDocuments({
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "60vh",
height: "50vh",
}}
>
<Text c="dimmed" ta={"center"} fs={"italic"}>

View File

@@ -1,6 +1,6 @@
"use clent"
import { LayoutDrawer, TEMA } from '@/module/_global';
import { ActionIcon, Box, Button, Divider, Flex, Grid, Modal, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { ActionIcon, Box, Button, Center, Divider, Flex, Grid, Modal, Progress, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { useParams, useRouter, useSearchParams } from 'next/navigation';
import React, { useRef, useState } from 'react';
import toast from 'react-hot-toast';
@@ -24,6 +24,7 @@ export default function DrawerMenuDocumentDivision() {
const openRef = useRef<() => void>(null)
const [fileForm, setFileForm] = useState<any>()
const tema = useHookstate(TEMA)
const [loading, setLoading] = useState(false)
const [bodyFolder, setBodyFolder] = useState({
name: '',
@@ -49,101 +50,112 @@ export default function DrawerMenuDocumentDivision() {
async function onUploadFile(data: any) {
try {
setLoading(true)
const fd = new FormData()
fd.append(`file`, data)
fd.append("data", JSON.stringify({
idPath: (path == undefined || path == '' || path == null) ? 'home' : path,
idDivision: param.id
}))
setOpenModal(false)
// setOpenDrawerDocument(false)
const res = await funUploadFileDocument(fd)
if (!res.success) {
toast.error(res.message)
}
setLoading(false)
} catch (error) {
console.error(error);
toast.error("Gagal upload file, coba lagi nanti");
setLoading(false)
}
refresh.set(true)
setOpenModal(false)
setOpenDrawerDocument(false)
}
return (
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 2, sm: 3, lg: 3 }}
onClick={() => setOpenDrawerDocument(true)}
>
<Flex justify={'center'} align={'center'} direction={'column'} >
<Box>
<IoAddCircle size={30} color={tema.get().utama} />
</Box>
<Box >
<Text c={tema.get().utama}>Tambah Dokumen</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
{loading ? (
<Box >
<Progress mt={"10vh"} size="lg" value={100} animated />
<Text ta={"center"}>Loading...</Text>
</Box>
) :
(
<Stack pt={10}>
<SimpleGrid
cols={{ base: 2, sm: 3, lg: 3 }}
onClick={() => setOpenDrawerDocument(true)}
>
<Flex justify={'center'} align={'center'} direction={'column'} >
<Box>
<IoAddCircle size={30} color={tema.get().utama} />
</Box>
<Box >
<Text c={tema.get().utama}>Tambah Dokumen</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
)
}
<LayoutDrawer opened={openDrawerDocument} onClose={() => setOpenDrawerDocument(false)} title={''}>
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
onClick={() => setOpenDrawerDocument(true)}
>
{loading ? (
<Box >
<Progress mt={"10vh"} size="lg" value={100} animated />
<Text ta={"center"}>Loading...</Text>
</Box>
) :
(
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
onClick={() => setOpenDrawerDocument(true)}
>
<Flex onClick={() => setOpenModal(true)} justify={'center'} align={'center'} direction={'column'} mb={20} >
<Box>
<ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
<FaFolderClosed size={40} color={tema.get().utama} />
</ActionIcon>
</Box>
<Box mt={10}>
<Text c={tema.get().utama}>Membuat Folder</Text>
</Box>
</Flex>
<Dropzone
openRef={openRef}
onDrop={async (files) => {
if (!files || _.isEmpty(files))
return toast.error('Tidak ada file yang dipilih')
onUploadFile(files[0])
}}
activateOnClick={false}
maxSize={3 * 1024 ** 2}
accept={['text/csv', 'image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
onReject={(files) => {
refresh.set(true)
setOpenModal(false)
setOpenDrawerDocument(false)
toast.error('File yang diizinkan: .csv, .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
}}
>
<Flex justify={'center'} align={'center'} direction={'column'} mb={20} onClick={() => openRef.current?.()}>
<Box>
<ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
<HiDocumentText size={40} color={tema.get().utama} />
</ActionIcon>
</Box>
<Box mt={10}>
<Text c={tema.get().utama}>Upload File</Text>
</Box>
</Flex>
</Dropzone>
<Flex onClick={() => setOpenModal(true)} justify={'center'} align={'center'} direction={'column'} mb={20} >
<Box>
<ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
<FaFolderClosed size={40} color={tema.get().utama} />
</ActionIcon>
</Box>
<Box mt={10}>
<Text c={tema.get().utama}>Membuat Folder</Text>
</Box>
</Flex>
<Dropzone
openRef={openRef}
onDrop={async (files) => {
if (!files || _.isEmpty(files))
return toast.error('Tidak ada file yang dipilih')
onUploadFile(files[0])
}}
activateOnClick={false}
maxSize={3 * 1024 ** 2}
accept={['text/csv', 'image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
onReject={(files) => {
refresh.set(true)
setOpenModal(false)
setOpenDrawerDocument(false)
toast.error('File yang diizinkan: .csv, .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
}}
>
<Flex justify={'center'} align={'center'} direction={'column'} mb={20} onClick={() => openRef.current?.()}>
<Box>
<ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
<HiDocumentText size={40} color={tema.get().utama} />
</ActionIcon>
</Box>
<Box mt={10}>
<Text c={tema.get().utama}>Upload File</Text>
</Box>
</Flex>
</Dropzone>
{/* <Flex justify={'center'} align={'center'} direction={'column'} mb={20} >
<Box>
<ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
<FaRegImage size={40} color={tema.get().utama} />
</ActionIcon>
</Box>
<Box mt={10}>
<Text c={tema.get().utama}>Upload Foto</Text>
</Box>
</Flex> */}
</SimpleGrid>
</SimpleGrid>
)
}
</LayoutDrawer>

View File

@@ -17,8 +17,9 @@ import {
ActionIcon,
ScrollArea,
Skeleton,
Grid,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
@@ -39,6 +40,7 @@ export default function DrawerShareDocument({
const refresh = useHookstate(globalRefreshDocument);
const tema = useHookstate(TEMA);
const [loading, setLoading] = useState(true);
const isMobile2 = useMediaQuery("(max-width: 438px)");
async function onShare() {
try {
@@ -100,8 +102,8 @@ export default function DrawerShareDocument({
};
return (
<Box pt={10}>
<Box mt={10}>
<Box>
<Box>
<ScrollArea
h={{
base: "58vh",
@@ -154,8 +156,15 @@ export default function DrawerShareDocument({
);
return (
<Box mb={15} key={i} onClick={() => handleFileClick(i)}>
<Flex justify={"space-between"} align={"center"}>
<Group>
<Grid align='center'>
<Grid.Col span={{
base: 1,
xs: 1,
sm: 1,
md: 1,
lg: 1,
xl: 1,
}}>
<ActionIcon
variant="light"
color="gray"
@@ -165,34 +174,30 @@ export default function DrawerShareDocument({
>
<FaUsers fontSize={40} />
</ActionIcon>
<Stack align="flex-start" justify="flex-start">
<Text
style={{
cursor: "pointer",
display: "flex",
alignItems: "center",
}}
>
{v.name}
</Text>
</Stack>
</Group>
<Text
style={{
cursor: "pointer",
display: "flex",
alignItems: "center",
paddingLeft: 20,
}}
>
{isSelected ? (
<FaCheck style={{ marginRight: 10 }} />
) : (
""
)}
</Text>
</Flex>
<Divider my={"md"} />
</Grid.Col>
<Grid.Col span={{
base: 11,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}>
<Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
</Flex>
{isSelected ? (
<FaCheck style={{ marginRight: 10 }} />
) : (
""
)}
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider my={10} />
</Box>
</Box>
);
})}

View File

@@ -521,28 +521,24 @@ export default function NavbarDocumentDivision() {
{isMobile2 ? (
<Breadcrumbs
separator={<GoChevronRight />}
separatorMargin="md"
mt="xs"
my="xs"
style={{ cursor: "pointer" }}
>
{dataJalur.slice(0, 3).map((v, i) => {
return (
<>
<Box w={50}>
<Text
onClick={() => router.push("?path=" + v.id)}
key={i}
style={{
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
maxWidth: "100%",
}}
>
{v.name}
</Text>
</Box>
</>
<Text
onClick={() => router.push("?path=" + v.id)}
key={i}
style={{
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
maxWidth: "100%",
}}
truncate={"end"}
>
{v.name}
</Text>
);
})}
{dataJalur.length > 3 && (
@@ -574,8 +570,7 @@ export default function NavbarDocumentDivision() {
) : (
<Breadcrumbs
separator={<GoChevronRight />}
separatorMargin="md"
mt="xs"
my="xs"
style={{ cursor: "pointer" }}
>
{dataJalur.slice(0, 4).map((v, i) => {

View File

@@ -145,6 +145,9 @@ export default function ListFileDetailProject() {
{item.extension == "png" && <BsFiletypePng size={30} />}
{item.extension == "jpg" && <BsFiletypeJpg size={30} />}
{item.extension == "jpeg" && <BsFiletypeJpg size={30} />}
{item.extension == "PNG" && <BsFiletypePng size={30} />}
{item.extension == "JPG" && <BsFiletypeJpg size={30} />}
{item.extension == "JPEG" && <BsFiletypeJpg size={30} />}
{item.extension == "heic" && <BsFiletypeHeic size={30} />}
</Grid.Col>
<Grid.Col