mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-25 15:55:48 +00:00
feat(FE): Improve empty state handling and add "Unclose Flock"
functionality
This commit is contained in:
@@ -85,8 +85,8 @@ const DUMMY_SKELETON_DATA = Array.from({ length: 10 }, (_, index) => ({
|
|||||||
}));
|
}));
|
||||||
|
|
||||||
const emptyContentDefaultValue = (
|
const emptyContentDefaultValue = (
|
||||||
<div className='w-full p-5 text-center'>
|
<div className='w-full text-center py-4'>
|
||||||
<span className='text-lg opacity-50'>
|
<span className='text-sm opacity-50'>
|
||||||
Tidak ada data yang dapat ditampilkan...
|
Tidak ada data yang dapat ditampilkan...
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -452,6 +452,20 @@ const Table = <TData extends object>({
|
|||||||
</Fragment>
|
</Fragment>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
||||||
|
{(data.length === 0 || table.getRowModel().rows.length === 0) &&
|
||||||
|
!isLoading && (
|
||||||
|
<tr>
|
||||||
|
<td
|
||||||
|
colSpan={
|
||||||
|
table.getAllLeafColumns().length + (withCheckbox ? 1 : 0)
|
||||||
|
}
|
||||||
|
className='p-0'
|
||||||
|
>
|
||||||
|
{emptyContent}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
<tfoot
|
<tfoot
|
||||||
className={cn(
|
className={cn(
|
||||||
@@ -489,10 +503,6 @@ const Table = <TData extends object>({
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{(data.length === 0 || table.getRowModel().rows.length === 0) &&
|
|
||||||
!isLoading &&
|
|
||||||
emptyContent}
|
|
||||||
|
|
||||||
{data.length > 0 &&
|
{data.length > 0 &&
|
||||||
table.getRowModel().rows.length > 0 &&
|
table.getRowModel().rows.length > 0 &&
|
||||||
!isLoading &&
|
!isLoading &&
|
||||||
|
|||||||
@@ -70,6 +70,10 @@ const ProjectFlockClosingForm = ({
|
|||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const isKandangClosed = useMemo(() => {
|
||||||
|
return projectFlockKandang.kandang?.status === 'NON_ACTIVE';
|
||||||
|
}, [projectFlockKandang]);
|
||||||
|
|
||||||
const isCanClose = useMemo(() => {
|
const isCanClose = useMemo(() => {
|
||||||
return isResponseSuccess(projectFlockKandangApprovals)
|
return isResponseSuccess(projectFlockKandangApprovals)
|
||||||
? projectFlockKandangApprovals?.data?.[0]?.step_number <= 2
|
? projectFlockKandangApprovals?.data?.[0]?.step_number <= 2
|
||||||
@@ -81,8 +85,10 @@ const ProjectFlockClosingForm = ({
|
|||||||
const deleteProjectFlockRes = await ProjectFlockKandangApi.closing(
|
const deleteProjectFlockRes = await ProjectFlockKandangApi.closing(
|
||||||
projectFlockKandang?.id as number,
|
projectFlockKandang?.id as number,
|
||||||
{
|
{
|
||||||
closed_date: isCanClose ? formatDate(new Date(), 'YYYY-MM-DD') : '',
|
closed_date: !isKandangClosed
|
||||||
action: isCanClose ? 'close' : 'unclose',
|
? formatDate(new Date(), 'YYYY-MM-DD')
|
||||||
|
: '',
|
||||||
|
action: !isKandangClosed ? 'close' : 'unclose',
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -121,7 +127,7 @@ const ProjectFlockClosingForm = ({
|
|||||||
leftIcon='heroicons:chevron-left'
|
leftIcon='heroicons:chevron-left'
|
||||||
leftIconHref={`/production/project-flock/detail?projectFlockId=${projectFlock.id}`}
|
leftIconHref={`/production/project-flock/detail?projectFlockId=${projectFlock.id}`}
|
||||||
leftIconClassName='hover:text-gray-400'
|
leftIconClassName='hover:text-gray-400'
|
||||||
subtitle='Close Flock'
|
subtitle={isKandangClosed ? 'Unclose Flock' : 'Close Flock'}
|
||||||
className='sticky top-0 z-10 bg-base-100'
|
className='sticky top-0 z-10 bg-base-100'
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@@ -134,8 +140,8 @@ const ProjectFlockClosingForm = ({
|
|||||||
{/* Badge Row */}
|
{/* Badge Row */}
|
||||||
<div className='flex flex-row gap-2'>
|
<div className='flex flex-row gap-2'>
|
||||||
<StatusBadge
|
<StatusBadge
|
||||||
color='success'
|
color={isKandangClosed ? 'error' : 'success'}
|
||||||
text='Aktif'
|
text={isKandangClosed ? 'Non-Aktif' : 'Aktif'}
|
||||||
className={{ badge: 'w-fit text-nowrap' }}
|
className={{ badge: 'w-fit text-nowrap' }}
|
||||||
/>
|
/>
|
||||||
<div className='divider divider-horizontal p-0 m-0'></div>
|
<div className='divider divider-horizontal p-0 m-0'></div>
|
||||||
@@ -332,8 +338,14 @@ const ProjectFlockClosingForm = ({
|
|||||||
disabled={!isCanCloseValid}
|
disabled={!isCanCloseValid}
|
||||||
onClick={() => closeModal.openModal()}
|
onClick={() => closeModal.openModal()}
|
||||||
>
|
>
|
||||||
<Icon icon='mdi:checkbox-marked-circle-outline' />{' '}
|
<Icon
|
||||||
{isCanClose ? 'Close' : 'Unclose'}
|
icon={
|
||||||
|
isKandangClosed
|
||||||
|
? 'mdi:lock-open-variant'
|
||||||
|
: 'mdi:checkbox-marked-circle-outline'
|
||||||
|
}
|
||||||
|
/>{' '}
|
||||||
|
{isKandangClosed ? 'Unclose' : 'Close'}
|
||||||
</Button>
|
</Button>
|
||||||
</RequirePermission>
|
</RequirePermission>
|
||||||
</div>
|
</div>
|
||||||
@@ -342,7 +354,7 @@ const ProjectFlockClosingForm = ({
|
|||||||
ref={closeModal.ref}
|
ref={closeModal.ref}
|
||||||
type='error'
|
type='error'
|
||||||
text={
|
text={
|
||||||
isCanClose
|
!isKandangClosed
|
||||||
? 'Apakah kamu yakin ingin mengakhiri project ini ? *Pastikan persediaan produk di gudang terkait sudah kosong, dan BOP sudah selesai'
|
? 'Apakah kamu yakin ingin mengakhiri project ini ? *Pastikan persediaan produk di gudang terkait sudah kosong, dan BOP sudah selesai'
|
||||||
: 'Apakah kamu yakin ingin membuka kembali project ini ? *Project ini akan kembali ke status aktif'
|
: 'Apakah kamu yakin ingin membuka kembali project ini ? *Project ini akan kembali ke status aktif'
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user