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

feat(FE): Add skeleton components for master data tables

Browse Source
This commit is contained in:
rstubryan
2026-03-02 13:50:25 +07:00
parent 1341b1ff53
commit f2b59ded3c
26 changed files with 967 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/master-data/flock/FlocksTable.tsx
+37 -22
View File
@@ -14,10 +14,10 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
import RequirePermission from '@/components/helper/RequirePermission';
import PopoverButton from '@/components/popover/PopoverButton';
import PopoverContent from '@/components/popover/PopoverContent';
import FlockTableSkeleton from '@/components/pages/master-data/flock/skeleton/FlockTableSkeleton';
import { Flock } from '@/types/api/master-data/flock';
import { FlockApi } from '@/services/api/master-data';
import { cn } from '@/lib/helper';
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
import { useTableFilter } from '@/services/hooks/useTableFilter';
@@ -249,27 +249,42 @@ const FlockTable = () => {
{/* Table Section */}
<div className='flex flex-col mb-4'>
<Table<Flock>
data={isResponseSuccess(flocks) ? flocks?.data : []}
columns={flocksColumns}
pageSize={tableFilterState.pageSize}
page={isResponseSuccess(flocks) ? flocks?.meta?.page : 0}
totalItems={
isResponseSuccess(flocks) ? flocks?.meta?.total_results : 0
}
onPageChange={setPage}
onPageSizeChange={setPageSize}
isLoading={isLoading}
sorting={sorting}
setSorting={setSorting}
className={{
containerClassName: cn('p-3 mb-0', {
'w-full':
isResponseSuccess(flocks) && flocks?.data?.length === 0,
}),
headerColumnClassName: 'text-nowrap',
}}
/>
{isLoading ? (
<div className='w-full flex flex-row justify-center items-center p-4'>
<span className='loading loading-spinner loading-xl' />
</div>
) : !isResponseSuccess(flocks) || flocks.data?.length === 0 ? (
<div className='p-3'>
<FlockTableSkeleton
columns={flocksColumns}
icon={
<Icon
icon='heroicons:document-text'
className='text-white'
width={20}
height={20}
/>
}
/>
</div>
) : (
<Table<Flock>
data={flocks?.data}
columns={flocksColumns}
pageSize={tableFilterState.pageSize}
page={flocks?.meta?.page ?? 0}
totalItems={flocks?.meta?.total_results ?? 0}
onPageChange={setPage}
onPageSizeChange={setPageSize}
isLoading={false}
sorting={sorting}
setSorting={setSorting}
className={{
containerClassName: 'p-3 mb-0',
headerColumnClassName: 'text-nowrap',
}}
/>
)}
</div>
</div>