gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-20 13:32:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(FE): implement lazy loading for kandang select input

Browse Source
This commit is contained in:
ValdiANS
2026-03-09 13:41:18 +07:00
parent c42fdbf33d
commit 02e4dba288
2 changed files with 61 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx
+32 -12
View File
@@ -2,7 +2,16 @@
import * as React from 'react';
import { useState, useEffect } from 'react';
import { Plus, X, Save, Send, Info, FilePlus, ListChecks } from 'lucide-react';
import {
Plus,
X,
Save,
Send,
Info,
FilePlus,
ListChecks,
Loader2,
} from 'lucide-react';
import { Card, CardContent } from '@/figma-make/components/base/card';
import { Button } from '@/figma-make/components/base/button';
import { Label } from '@/figma-make/components/base/label';
@@ -86,16 +95,11 @@ export function DailyChecklistContent() {
searchParams.get('category') || ''
);
const { options: kandangOptions } = useSelect(
DailyChecklistKandangApi.basePath,
'id',
'name',
'search',
{
page: '1',
limit: '100',
}
);
const {
options: kandangOptions,
isLoadingMore: isLoadingMoreKandang,
loadMore: loadMoreKandang,
} = useSelect(DailyChecklistKandangApi.basePath, 'id', 'name');
const { data: phases } = useSWR<
BaseApiResponse<Phase[] | undefined>,
@@ -168,6 +172,16 @@ export function DailyChecklistContent() {
const [documents, setDocuments] = useState<File[]>([]);
const [deletedDocumentIds, setDeletedDocumentIds] = useState<number[]>([]);
const handleKandangScroll = (e: React.UIEvent<HTMLDivElement>) => {
const target = e.target as HTMLDivElement;
if (target.scrollHeight - target.scrollTop <= target.clientHeight + 10) {
if (!isLoadingMoreKandang) {
loadMoreKandang();
}
}
};
// Sync state to URL query params
useEffect(() => {
const params = new URLSearchParams(searchParams.toString());
@@ -994,7 +1008,7 @@ export function DailyChecklistContent() {
>
<SelectValue placeholder='Pilih kandang' />
</SelectTrigger>
<SelectContent>
<SelectContent onScroll={handleKandangScroll}>
{kandangOptions.map((kandang) => (
<SelectItem
key={kandang.value}
@@ -1003,6 +1017,12 @@ export function DailyChecklistContent() {
{kandang.label}
</SelectItem>
))}
{isLoadingMoreKandang && (
<div className='flex justify-center p-2'>
<Loader2 className='h-4 w-4 animate-spin text-gray-500' />
</div>
)}
</SelectContent>
</Select>
</div>
src/figma-make/components/pages/list-daily-checklist/ListDailyChecklistContent.tsx
+29 -12
View File
@@ -1,7 +1,15 @@
'use client';
import { useState } from 'react';
import { Eye, CheckCircle, XCircle, Search, Trash2, Edit } from 'lucide-react';
import {
Eye,
CheckCircle,
XCircle,
Search,
Trash2,
Edit,
Loader2,
} from 'lucide-react';
import { Card, CardContent } from '@/figma-make/components/base/card';
import { Button } from '@/figma-make/components/base/button';
import { Badge } from '@/figma-make/components/base/badge';
@@ -93,21 +101,25 @@ export function ListDailyChecklistContent() {
}
);
const { options: kandangOptions } = useSelect(
DailyChecklistKandangApi.basePath,
'id',
'name',
'search',
{
page: '1',
limit: '100',
}
);
const {
options: kandangOptions,
isLoadingMore: isLoadingMoreKandang,
loadMore: loadMoreKandang,
} = useSelect(DailyChecklistKandangApi.basePath, 'id', 'name');
const checklistList = isResponseSuccess(checklistListRes)
? checklistListRes.data || []
: [];
const handleKandangScroll = (e: React.UIEvent<HTMLDivElement>) => {
const target = e.target as HTMLDivElement;
if (target.scrollHeight - target.scrollTop <= target.clientHeight + 10) {
if (!isLoadingMoreKandang) {
loadMoreKandang();
}
}
};
// Modals
const [showApproveModal, setShowApproveModal] = useState(false);
const [showRejectModal, setShowRejectModal] = useState(false);
@@ -490,7 +502,7 @@ export function ListDailyChecklistContent() {
>
<SelectValue placeholder='Semua Kandang' />
</SelectTrigger>
<SelectContent>
<SelectContent onScroll={handleKandangScroll}>
<SelectItem value='ALL'>Semua Kandang</SelectItem>
{kandangOptions.map((kandang) => (
<SelectItem
@@ -500,6 +512,11 @@ export function ListDailyChecklistContent() {
{kandang.label}
</SelectItem>
))}
{isLoadingMoreKandang && (
<div className='flex justify-center p-2'>
<Loader2 className='h-4 w-4 animate-spin text-gray-500' />
</div>
)}
</SelectContent>
</Select>
</div>