style : update skeleton

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

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)}