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

style : update skeleton

Browse Source 
Deskripsi:
- update announcement
- update celender
- update division
- update task
- update project
- update user

No Issue
This commit is contained in:
lukman
2024-09-02 12:24:43 +08:00
parent b442e6e599
commit 2a8a3a1129
18 changed files with 1302 additions and 1012 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/module/task/ui/add_detail_task.tsx
View File

@@ -7,6 +7,7 @@ import {
Flex,
Group,
Input,
rem,
SimpleGrid,
Stack,
Text,
@@ -98,7 +99,7 @@ export default function AddDetailTask() {
</Group>
</Box>
<Box>
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
<Text >Tanggal Berakhir</Text>
<Group
justify="center"
bg={"white"}
@@ -109,7 +110,7 @@ export default function AddDetailTask() {
</Group>
</Box>
</SimpleGrid>
<Stack pt={15}>
<Stack pt={15} pb={100}>
<TextInput
styles={{
input: {
@@ -125,13 +126,22 @@ export default function AddDetailTask() {
onChange={(e) => {
setTitle(e.target.value)
setTouched({ ...touched, title: false })
}
}
}
onBlur={() => setTouched({ ...touched, title: true })}
error={touched.title ? "Tahapan wajib diisi" : undefined}
error={
touched.title && (
title == "" ? "Tahapan Tidak Boleh Kosong" : null
)
}
/>
</Stack>
<Box mt={"xl"}>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
c={"white"}
bg={WARNA.biruTua}
@@ -143,8 +153,6 @@ export default function AddDetailTask() {
Simpan
</Button>
</Box>
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin menambahkan tugas?"

4
src/module/task/ui/create_date_end_task.tsx
View File

@@ -79,7 +79,7 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
</Group>
</Box>
<Box>
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
<Text >Tanggal Berakhir</Text>
<Group
justify="center"
bg={"white"}
@@ -90,7 +90,7 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
</Group>
</Box>
</SimpleGrid>
<Stack pt={15}>
<Stack pt={15} mb={100}>
<TextInput
styles={{
input: {

21
src/module/task/ui/create_users_project.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { LayoutNavbarNew, SkeletonSingle, WARNA } from "@/module/_global";
import { funGetDivisionById, IDataMemberDivision } from "@/module/division_new";
import { useHookstate } from "@hookstate/core";
import {
@@ -116,26 +116,11 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
}
<Box mt={15} mb={100}>
{loading ?
Array(3)
Array(8)
.fill(null)
.map((_, i) => (
<Box key={i} mb={15}>
<Group>
<Box>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={"lg"}
radius={100}
aria-label="icon"
>
<Skeleton height={30} width={30} />
</ActionIcon>
</Box>
<Box>
<Skeleton height={20} width={"80%"} />
</Box>
</Group>
<SkeletonSingle/>
</Box>
))
:

113
src/module/task/ui/edit_detail_task.tsx
View File

@@ -9,6 +9,7 @@ import {
Input,
rem,
SimpleGrid,
Skeleton,
Stack,
Text,
TextInput,
@@ -29,6 +30,7 @@ export default function EditDetailTask() {
const [title, setTitle] = useState("")
const param = useParams<{ id: string, detail: string }>()
const [openModal, setOpenModal] = useState(false)
const [loading, setLoading] = useState(true)
async function onSubmit() {
if (value[0] == null || value[1] == null)
@@ -58,6 +60,7 @@ export default function EditDetailTask() {
async function getOneData() {
try {
setLoading(true)
const res = await funGetDetailTask(param.detail);
if (res.success) {
setTitle(res.data.title)
@@ -68,10 +71,12 @@ export default function EditDetailTask() {
} else {
toast.error(res.message);
}
setLoading(false)
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan detail tugas divisi, coba lagi nanti");
} finally {
setLoading(false)
}
}
@@ -101,43 +106,59 @@ export default function EditDetailTask() {
</Group>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
<Box>
<Text>Tanggal Mulai</Text>
<Group
justify="center"
bg={"white"}
h={45}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
</Group>
{loading ?
<Skeleton height={45} mt={20} radius={10} />
:
<>
<Text>Tanggal Mulai</Text>
<Group
justify="center"
bg={"white"}
h={45}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
</Group>
</>
}
</Box>
<Box>
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
<Group
justify="center"
bg={"white"}
h={45}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
</Group>
{loading ?
<Skeleton height={45} mt={20} radius={10} />
:
<>
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
<Group
justify="center"
bg={"white"}
h={45}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
</Group>
</>
}
</Box>
</SimpleGrid>
<Stack pt={15}>
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
label={"Nama Tahapan"}
required
placeholder="Input Nama Tahapan"
size="md"
value={title}
onChange={(e) => { setTitle(e.target.value) }}
/>
<Stack pt={15} pb={100}>
{loading ?
<Skeleton height={40} mt={20} radius={10} />
:
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
label={"Nama Tahapan"}
required
placeholder="Input Nama Tahapan"
size="md"
value={title}
onChange={(e) => { setTitle(e.target.value) }}
/>
}
</Stack>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -145,16 +166,20 @@ export default function EditDetailTask() {
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { setOpenModal(true) }}
>
Simpan
</Button>
{loading ?
<Skeleton height={50} radius={30} />
:
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { setOpenModal(true) }}
>
Simpan
</Button>
}
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}

74
src/module/task/ui/edit_task.tsx
View File

@@ -5,6 +5,7 @@ import {
Button,
Input,
rem,
Skeleton,
Stack,
Textarea,
TextInput,
@@ -22,6 +23,7 @@ export default function EditTask() {
const [title, setTitle] = useState("")
const [openModal, setOpenModal] = useState(false)
const param = useParams<{ id: string, detail: string }>()
const [loading, setLoading] = useState(true)
const [touched, setTouched] = useState({
title: false,
});
@@ -50,16 +52,19 @@ export default function EditTask() {
async function getOneData() {
try {
setLoading(true)
const res = await funGetTaskDivisionById(param.detail, 'data');
if (res.success) {
setTitle(res.data.title);
} else {
toast.error(res.message);
}
setLoading(false);
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan data tugas divisi, coba lagi nanti");
} finally {
setLoading(false);
}
}
@@ -74,36 +79,43 @@ export default function EditTask() {
<LayoutNavbarNew back="" title={"Edit Judul Tugas"} menu />
<Box p={20}>
<Stack pt={15}>
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
required
placeholder="Tugas"
label="Judul Tugas"
size="md"
value={title}
onChange={(e) => {
setTitle(e.target.value)
setTouched({ ...touched, title: false })
}}
error={
touched.title && (
title == "" ? "Error! harus memasukkan judul tugas" : null
)
}
onBlur={() => setTouched({ ...touched, title: true })}
/>
{loading ?
<Skeleton height={40} mt={20} radius={10} />
:
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
required
placeholder="Tugas"
label="Judul Tugas"
size="md"
value={title}
onChange={(e) => {
setTitle(e.target.value)
setTouched({ ...touched, title: false })
}}
error={
touched.title && (
title == "" ? "Error! harus memasukkan judul tugas" : null
)
}
onBlur={() => setTouched({ ...touched, title: true })}
/>
}
</Stack>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
{loading ?
<Skeleton height={50} radius={30} />
:
<Button
c={"white"}
bg={WARNA.biruTua}
@@ -114,7 +126,9 @@ export default function EditTask() {
>
Simpan
</Button>
</Box>
}
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}