Fix All Image Add Lazy Loading
This commit is contained in:
@@ -81,8 +81,8 @@ function ListDaftarInformasi({ search }: { search: string }) {
|
||||
<TableTr>
|
||||
<TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
|
||||
<TableTh style={{ width: '25%' }}>Jenis Informasi</TableTh>
|
||||
<TableTh style={{ width: '60%' }}>Deskripsi</TableTh>
|
||||
<TableTh style={{ width: '10%', textAlign: 'center' }}>Aksi</TableTh>
|
||||
<TableTh style={{ width: '40%' }}>Deskripsi</TableTh>
|
||||
<TableTh style={{ width: '20%', textAlign: 'center' }}>Aksi</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
@@ -93,7 +93,9 @@ function ListDaftarInformasi({ search }: { search: string }) {
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Tooltip label={item.jenisInformasi} position="top-start" openDelay={500}>
|
||||
<Text fw={500} lineClamp={1}>{item.jenisInformasi}</Text>
|
||||
<Box w={200}>
|
||||
<Text fw={500} lineClamp={1}>{item.jenisInformasi}</Text>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
@@ -104,20 +106,24 @@ function ListDaftarInformasi({ search }: { search: string }) {
|
||||
multiline
|
||||
maw={400}
|
||||
>
|
||||
<Text lineClamp={1} fz="sm" c="dimmed">
|
||||
{item.deskripsi?.replace(/<[^>]*>?/gm, '').substring(0, 80) + '...'}
|
||||
</Text>
|
||||
<Box w={200}>
|
||||
<Text lineClamp={1} fz="sm" c="dimmed">
|
||||
{item.deskripsi?.replace(/<[^>]*>?/gm, '').substring(0, 80) + '...'}
|
||||
</Text>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</TableTd>
|
||||
<TableTd style={{ textAlign: 'center' }}>
|
||||
<Tooltip label="Lihat Detail" withArrow>
|
||||
<Button
|
||||
size="xs"
|
||||
radius="md"
|
||||
variant="light"
|
||||
color="blue"
|
||||
size="sm"
|
||||
leftSection={<IconDeviceImacCog size={16} />}
|
||||
onClick={() => router.push(`/admin/ppid/daftar-informasi-publik-desa-darmasaba/${item.id}`)}
|
||||
>
|
||||
<IconDeviceImacCog size={20} />
|
||||
Detail
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</TableTd>
|
||||
|
||||
@@ -59,7 +59,7 @@ function Page() {
|
||||
<Grid>
|
||||
<GridCol span={12}>
|
||||
<Center>
|
||||
<Image src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo PPID" />
|
||||
<Image loading='lazy' src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo PPID" />
|
||||
</Center>
|
||||
</GridCol>
|
||||
<GridCol span={12}>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
|
||||
import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
@@ -112,11 +112,14 @@ function ListResponden({ search }: ListRespondenProps) {
|
||||
<TableTd style={{ width: '20%' }}>{item.jenisKelamin.name}</TableTd>
|
||||
<TableTd style={{ width: '15%', textAlign: 'center' }}>
|
||||
<Button
|
||||
variant="light"
|
||||
size="xs"
|
||||
radius="md"
|
||||
variant="light"
|
||||
color="blue"
|
||||
leftSection={<IconDeviceImacCog size={16} />}
|
||||
onClick={() => router.push(`/admin/ppid/ikm-desa-darmasaba/responden/${item.id}`)}
|
||||
>
|
||||
<IconDeviceImac size={20} />
|
||||
Detail
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
|
||||
@@ -28,6 +28,7 @@ function EditProfilePPID() {
|
||||
|
||||
// Load data on mount
|
||||
useEffect(() => {
|
||||
|
||||
const loadData = async () => {
|
||||
const id = params?.id as string;
|
||||
if (!id) {
|
||||
@@ -230,6 +231,7 @@ function EditProfilePPID() {
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ddd',
|
||||
}}
|
||||
loading='lazy'
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@@ -54,7 +54,7 @@ function Page() {
|
||||
<Grid>
|
||||
<GridCol span={12}>
|
||||
<Center>
|
||||
<Image src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo Desa" />
|
||||
<Image loading='lazy' src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo Desa" />
|
||||
</Center>
|
||||
</GridCol>
|
||||
<GridCol span={12}>
|
||||
@@ -76,6 +76,7 @@ function Page() {
|
||||
alt="Foto Profil PPID"
|
||||
radius="md"
|
||||
onError={(e) => { e.currentTarget.src = "/perbekel.png"; }}
|
||||
loading='lazy'
|
||||
/>
|
||||
</Center>
|
||||
<Paper
|
||||
|
||||
@@ -51,9 +51,9 @@ export default function EditPegawaiPPID() {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
stateStrukturPPID.posisiOrganisasi.findMany.load();
|
||||
const loadPegawai = async () => {
|
||||
try {
|
||||
await stateStrukturPPID.posisiOrganisasi.findMany.load(1, 0); // ambil semua data
|
||||
const data = await stateOrganisasi.edit.load(id);
|
||||
if (data) {
|
||||
setFormData({
|
||||
@@ -81,6 +81,8 @@ export default function EditPegawaiPPID() {
|
||||
);
|
||||
}
|
||||
};
|
||||
console.log('Current posisiId:', formData.posisiId);
|
||||
console.log('Available positions:', stateStrukturPPID.posisiOrganisasi.findMany.data?.map(p => p.id));
|
||||
|
||||
loadPegawai();
|
||||
}, [id]);
|
||||
@@ -223,6 +225,7 @@ export default function EditPegawaiPPID() {
|
||||
alt="Preview Gambar"
|
||||
radius="md"
|
||||
style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
|
||||
loading='lazy'
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
@@ -314,7 +317,7 @@ export default function EditPegawaiPPID() {
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
Simpan Perubahan
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
@@ -17,6 +17,7 @@ function DetailPegawai() {
|
||||
const router = useRouter();
|
||||
|
||||
useShallowEffect(() => {
|
||||
stateStrukturPPID.posisiOrganisasi.findMany.load();
|
||||
statePegawai.findUnique.load(params?.id as string);
|
||||
}, []);
|
||||
|
||||
@@ -117,6 +118,7 @@ function DetailPegawai() {
|
||||
border: '1px solid #e0e0e0',
|
||||
borderRadius: '8px',
|
||||
}}
|
||||
loading='lazy'
|
||||
/>
|
||||
) : (
|
||||
<Text fz="sm" c="dimmed" mt="sm">Tidak ada foto profil</Text>
|
||||
|
||||
@@ -16,7 +16,7 @@ function CreatePegawaiPPID() {
|
||||
const [previewImage, setPreviewImage] = useState<{ preview: string; file: File } | null>(null);
|
||||
const stateOrganisasi = useProxy(stateStrukturPPID.pegawai)
|
||||
useEffect(() => {
|
||||
stateStrukturPPID.posisiOrganisasi.findMany.load();
|
||||
stateStrukturPPID.posisiOrganisasi.findMany.load(1, 0);
|
||||
resetForm();
|
||||
}, []);
|
||||
|
||||
@@ -183,6 +183,7 @@ function CreatePegawaiPPID() {
|
||||
border: '1px solid #e0e0e0',
|
||||
borderRadius: '8px',
|
||||
}}
|
||||
loading='lazy'
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@@ -59,10 +59,10 @@ function ListPegawaiPPID({ search }: { search: string }) {
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4}>Daftar Pegawai PPID</Title>
|
||||
<Tooltip label="Tambah Pegawai Baru" withArrow>
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
onClick={() => router.push('/admin/ppid/struktur-ppid/pegawai/create')}
|
||||
>
|
||||
Tambah Baru
|
||||
@@ -82,10 +82,10 @@ function ListPegawaiPPID({ search }: { search: string }) {
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4}>Daftar Pegawai PPID</Title>
|
||||
<Tooltip label="Tambah Pegawai Baru" withArrow>
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
onClick={() => router.push('/admin/ppid/struktur-ppid/pegawai/create')}
|
||||
>
|
||||
Tambah Baru
|
||||
@@ -152,12 +152,14 @@ function ListPegawaiPPID({ search }: { search: string }) {
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
size="xs"
|
||||
radius="md"
|
||||
variant="light"
|
||||
color="blue"
|
||||
leftSection={<IconDeviceImacCog size={16} />}
|
||||
onClick={() => router.push(`/admin/ppid/struktur-ppid/pegawai/${item.id}`)}
|
||||
size="sm"
|
||||
>
|
||||
<IconDeviceImacCog size={20} />
|
||||
Detail
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
|
||||
@@ -118,6 +118,7 @@ function nodeTemplate(node: any) {
|
||||
style={{
|
||||
border: '1px solid #D3D1D1FF',
|
||||
}}
|
||||
loading='lazy'
|
||||
/>
|
||||
</Tooltip>
|
||||
<Text fw={600} ta="center" size="sm">{name}</Text>
|
||||
|
||||
@@ -60,7 +60,7 @@ function VisiMisiPPIDList() {
|
||||
<Grid>
|
||||
<GridCol span={12}>
|
||||
<Center>
|
||||
<Image src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo PPID" />
|
||||
<Image loading='lazy' src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo PPID" />
|
||||
</Center>
|
||||
</GridCol>
|
||||
<GridCol span={12}>
|
||||
|
||||
Reference in New Issue
Block a user