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

refactor(FE-84-87) refactor checkbox using reuseable component checkboxinput

Browse Source
This commit is contained in:
randy-ar
2025-10-25 13:58:46 +07:00
parent 4f3dfb4221
commit f0f6ec53cb
10 changed files with 476 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/production/project-flock/ProjectFlockTable.tsx
+82 -87
View File
@@ -1,6 +1,7 @@
'use client';
import Button from '@/components/Button';
import CheckboxInput from '@/components/input/CheckboxInput';
import DebouncedTextInput from '@/components/input/DebouncedTextInput';
import SelectInput, { OptionType } from '@/components/input/SelectInput';
import { useModal } from '@/components/Modal';
@@ -120,10 +121,15 @@ const ProjectFlockTable = () => {
periodFilter: 'period',
},
});
// State
const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
const selectedRowIds = Object.keys(rowSelection)
.filter((id) => rowSelection[id])
.map((id) => parseInt(id));
const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
const [areaSelectInputValue, setAreaSelectInputValue] = useState('');
const [kandangSelectInputValue, setKandangSelectInputValue] = useState('');
const [selectedArea, setSelectedArea] = useState<OptionType | null>(null);
const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
null
@@ -132,6 +138,14 @@ const ProjectFlockTable = () => {
null
);
const [periodInputValue, setPeriodInputValue] = useState<number | null>(null);
const [sorting, setSorting] = useState<SortingState>([]);
const [selectedProjectFlock, setSelectedProjectFlock] =
useState<ProjectFlock>();
const deleteModal = useModal();
const confirmModal = useModal();
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const [selectedFlocks, setSelectedFlocks] = useState<ProjectFlock[]>([]);
const [isApproveLoading, setIsApproveLoading] = useState(false);
// Fetch Data
const {
@@ -193,16 +207,6 @@ const ProjectFlockTable = () => {
}))
: [];
// State
const [sorting, setSorting] = useState<SortingState>([]);
const [selectedProjectFlock, setSelectedProjectFlock] =
useState<ProjectFlock>();
const deleteModal = useModal();
const confirmModal = useModal();
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const [selectedIds, setSelectedIds] = useState<number[]>([]);
const [selectedFlocks, setSelectedFlocks] = useState<ProjectFlock[]>([]);
const [isApproveLoading, setIsApproveLoading] = useState(false);
// Handler
const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
const newVal = val as OptionType;
@@ -221,40 +225,6 @@ const ProjectFlockTable = () => {
const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
updateFilter('search', e.target.value);
};
const handleSelectAll = (checked: boolean) => {
if (checked && isResponseSuccess(projectFlocks)) {
const allIds = projectFlocks.data
.filter((item) => item.approval.step_name === 'Pengajuan')
.map((item) => item.id);
setSelectedIds(allIds);
setSelectedFlocks(
projectFlocks.data.filter(
(item) => item.approval.step_name === 'Pengajuan'
)
);
} else {
setSelectedIds([]);
setSelectedFlocks([]);
}
};
const handleSelectRow = (id: number, checked: boolean) => {
if (!isResponseSuccess(projectFlocks)) return;
const targetFlock = projectFlocks.data.find((item) => item.id === id);
if (!targetFlock) return;
if (checked) {
setSelectedIds((prev) => [...prev, id]);
setSelectedFlocks((prev) => [...(prev || []), targetFlock]);
} else {
setSelectedIds((prev) => prev.filter((val) => val !== id));
setSelectedFlocks((prev) =>
(prev || []).filter((flock) => flock.id !== id)
);
}
};
const confirmationModalApproveClickHandler = async () => {
setIsApproveLoading(true);
@@ -265,7 +235,7 @@ const ProjectFlockTable = () => {
method: 'POST',
payload: {
action: 'APPROVED',
approvable_ids: selectedFlocks.map((flock) => flock.id),
approvable_ids: selectedRowIds.map((id) => id),
},
});
@@ -277,8 +247,7 @@ const ProjectFlockTable = () => {
toast.error(approveProjectFlockRes?.message as string);
confirmModal.closeModal();
}
setSelectedIds([]);
setSelectedFlocks([]);
setRowSelection({});
refreshProjectFlocks();
setIsApproveLoading(false);
};
@@ -301,11 +270,9 @@ const ProjectFlockTable = () => {
variant='outline'
color='success'
onClick={() => {
if (selectedIds.length > 0) {
confirmModal.openModal();
}
confirmModal.openModal();
}}
disabled={!(selectedIds.length > 0)}
disabled={selectedRowIds.length === 0}
className='w-full sm:w-fit'
>
<Icon icon='material-symbols:check' width={24} height={24} />
@@ -400,33 +367,58 @@ const ProjectFlockTable = () => {
columns={[
{
id: 'select',
header: () => {
const allSelected =
isResponseSuccess(projectFlocks) &&
projectFlocks.data.length > 0 &&
selectedIds.length === projectFlocks.data.length;
return (
<input
type='checkbox'
className='checkbox checkbox-sm'
checked={allSelected}
onChange={(e) => handleSelectAll(e.target.checked)}
/>
header: ({ table }) => {
const allRows = table.getRowModel().rows;
const selectableRows = allRows.filter(
(row) => row.original?.approval?.step_number == 1
);
},
cell: (props) => {
const id = props.row.original.id;
const isChecked = selectedIds.includes(id);
const allSelected = selectableRows.every((row) =>
row.getIsSelected()
) && selectableRows.length != 0;
const someSelected =
selectableRows.some((row) => row.getIsSelected()) &&
!allSelected;
const toggleSelectableRows = () => {
const shouldSelect = !allSelected;
selectableRows.forEach((row) =>
row.toggleSelected(shouldSelect)
);
};
return (
<input
disabled={
props.row.original.approval.step_name != 'Pengajuan'
<div className='w-full flex flex-row justify-center'>
<CheckboxInput
name='allRow'
checked={allSelected}
indeterminate={someSelected}
onChange={toggleSelectableRows}
disabled={
isResponseSuccess(projectFlocks) &&
projectFlocks?.data?.filter(
(flock) => flock.approval.step_number == 1
).length == 0
}
/>
</div>
);
},
cell: ({ row }) => {
return (
<CheckboxInput
name='row'
checked={
row.getIsSelected() &&
row.original.approval.step_number == 1
}
type='checkbox'
className='checkbox checkbox-sm'
checked={isChecked}
onChange={(e) => handleSelectRow(id, e.target.checked)}
disabled={
!row.getCanSelect() ||
row.original.approval.step_number != 1
}
indeterminate={row.getIsSomeSelected()}
onChange={row.getToggleSelectedHandler()}
/>
);
},
@@ -541,6 +533,8 @@ const ProjectFlockTable = () => {
isLoading={isLoading}
sorting={sorting}
setSorting={setSorting}
rowSelection={rowSelection}
setRowSelection={setRowSelection}
className={{
containerClassName: cn({
'mb-20':
@@ -578,18 +572,19 @@ const ProjectFlockTable = () => {
<ConfirmationModal
ref={confirmModal.ref}
type='success'
text={
selectedFlocks.length > 0
? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks
.map(
(flock) =>
`${flock.flock?.name ?? '(Tanpa nama)'} - ${
flock.area?.name ?? '-'
}`
)
.join(', ')})`
: 'Tidak ada Project Flock yang dipilih.'
}
text={`Apakah anda yakin ingin reject data transfer ke laying ini (${selectedRowIds.length} data)?`}
// text={
// selectedFlocks.length > 0
// ? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks
// .map(
// (flock) =>
// `${flock.flock?.name ?? '(Tanpa nama)'} - ${
// flock.area?.name ?? '-'
// }`
// )
// .join(', ')})`
// : 'Tidak ada Project Flock yang dipilih.'
// }
secondaryButton={{
text: 'Tidak',
}}
src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+81 -154
View File
@@ -14,7 +14,7 @@ import { Icon } from '@iconify/react';
import { useFormik } from 'formik';
import { useRouter } from 'next/navigation';
import { useEffect, useMemo, useState } from 'react';
import useSWR from 'swr';
import useSWR, { KeyedMutator } from 'swr';
import {
ProjectFlockFormSchema,
ProjectFlockFormValues,
@@ -35,15 +35,20 @@ import { BaseApiResponse } from '@/types/api/api-general';
import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
import { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import ProjectFlockKandangTable from './ProjectFlockKandangTable';
interface ProjectFlockFormProps {
formType?: 'add' | 'edit' | 'detail';
initialValues?: ProjectFlock;
refreshProjectFlocks?: KeyedMutator<
BaseApiResponse<ProjectFlock> | undefined
>;
}
const ProjectFlockForm = ({
formType = 'add',
initialValues,
refreshProjectFlocks,
}: ProjectFlockFormProps) => {
// State
const router = useRouter();
@@ -71,18 +76,34 @@ const ProjectFlockForm = ({
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const [isApproveLoading, setIsApproveLoading] = useState(false);
const [isApprovedDisabled, setIsApprovedDisabled] = useState(initialValues?.approval.step_name == 'Pengajuan' ? false : true);
const [isRejectedDisabled, setIsRejectedDisabled] = useState(!isApprovedDisabled);
const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(!isApprovedDisabled ? 'APPROVED' : 'REJECTED');
const [isApprovedDisabled, setIsApprovedDisabled] = useState(
initialValues?.approval.step_name == 'Pengajuan' ? false : true
);
const [isRejectedDisabled, setIsRejectedDisabled] = useState(
!isApprovedDisabled
);
const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
!isApprovedDisabled ? 'APPROVED' : 'REJECTED'
);
const [rowSelection, setRowSelection] = useState<Record<string, boolean>>(
() =>
Object.fromEntries(
(initialValues?.kandangs ?? []).map((k: Kandang) => [
k.id.toString(),
true,
])
)
);
useEffect(() => {
if (initialValues?.approval?.step_name) {
const approvedDisabled = initialValues.approval.step_name !== 'Pengajuan';
setIsApprovedDisabled(approvedDisabled);
setIsRejectedDisabled(!approvedDisabled);
setApprovalAction(!approvedDisabled ? 'APPROVED' : 'REJECTED');
}
}, [initialValues]);
if (initialValues?.approval?.step_name) {
const approvedDisabled = initialValues.approval.step_name !== 'Pengajuan';
setIsApprovedDisabled(approvedDisabled);
setIsRejectedDisabled(!approvedDisabled);
setApprovalAction(!approvedDisabled ? 'APPROVED' : 'REJECTED');
}
}, [initialValues]);
// Fetch Data
const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
@@ -122,7 +143,7 @@ const ProjectFlockForm = ({
search: '',
location_id: selectedLocation == '' ? '0' : selectedLocation,
}).toString()}`;
const { data: kandang, isLoading: isLoadingKandang } = useSWR(
const { data: kandang, isLoading: isLoadingKandang, mutate: refreshKandang} = useSWR(
kandangUrl,
KandangApi.getAllFetcher
);
@@ -180,6 +201,20 @@ const ProjectFlockForm = ({
}
}
}, [kandang]);
useEffect(() => {
if (initialValues?.kandangs) {
refreshKandang();
setOpenSelectKandangs(true);
const newRowSelection = Object.fromEntries(
initialValues.kandangs.map((k: Kandang) => [
k.id.toString(),
true,
])
);
setRowSelection(newRowSelection);
}
}, [initialValues, refreshKandang]);
// Options Handler
const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -224,38 +259,6 @@ const ProjectFlockForm = ({
formik.setFieldTouched('category', true);
};
const kandangChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
const { value, checked } = event.target;
if (checked) {
formik.setFieldValue(
'kandang_ids',
formik.values.kandang_ids.concat(parseInt(value))
);
} else {
formik.setFieldValue(
'kandang_ids',
formik.values.kandang_ids.filter((id) => id !== parseInt(value))
);
}
};
const kandangCheckAll = (event: React.ChangeEvent<HTMLInputElement>) => {
const { checked } = event.target;
if (checked) {
formik.setFieldValue(
'kandang_ids',
optionsKandang
.filter(
(kandang) =>
kandang.status === 'NON_ACTIVE' ||
formik.values.kandang_ids.includes(kandang.id)
)
.map((kandang) => kandang.id)
);
} else {
formik.setFieldValue('kandang_ids', []);
}
};
// Submit Handler
const createProjectFlockHandler = async (
payload: CreateProjectFlockPayload
@@ -418,6 +421,16 @@ const ProjectFlockForm = ({
}
}, [periodFlocks]);
useEffect(() => {
const selectedRowIds = Object.keys(rowSelection)
.filter((id) => rowSelection[id])
.map((id) => parseInt(id));
formikSetValues({
...formik.values,
kandang_ids: selectedRowIds,
});
}, [rowSelection, formikSetValues]);
// Actions handler
const confirmationModalDeleteClickHandler = async () => {
setIsDeleteLoading(true);
@@ -454,14 +467,17 @@ const ProjectFlockForm = ({
});
if (isResponseSuccess(approveProjectFlockRes)) {
if(action == 'APPROVED'){
setIsApprovedDisabled(true);
setIsRejectedDisabled(false);
}
if(action == 'REJECTED'){
setIsRejectedDisabled(true);
setIsApprovedDisabled(false);
if (refreshProjectFlocks) {
await refreshProjectFlocks();
}
// if (action == 'APPROVED') {
// setIsApprovedDisabled(true);
// setIsRejectedDisabled(false);
// }
// if (action == 'REJECTED') {
// setIsRejectedDisabled(true);
// setIsApprovedDisabled(false);
// }
toast.success(approveProjectFlockRes.message as string);
}
if (isResponseError(approveProjectFlockRes)) {
@@ -520,10 +536,7 @@ const ProjectFlockForm = ({
confirmModal.openModal();
}
}}
disabled={
!initialValues?.id ||
isApprovedDisabled
}
disabled={!initialValues?.id || isApprovedDisabled}
className='w-full sm:w-fit'
>
<Icon icon='material-symbols:check' width={24} height={24} />
@@ -538,10 +551,7 @@ const ProjectFlockForm = ({
confirmModal.openModal();
}
}}
disabled={
!initialValues?.id ||
isRejectedDisabled
}
disabled={!initialValues?.id || isRejectedDisabled}
className='w-full sm:w-fit'
>
<Icon icon='mdi:times' width={24} height={24} />
@@ -682,100 +692,13 @@ const ProjectFlockForm = ({
{isLoadingKandang && (
<span className='loading loading-dots loading-xl'></span>
)}
<table className='table'>
{/* head */}
<thead>
<tr>
<th>
<label>
<input
type='checkbox'
checked={
optionsKandang
.filter(
(k) =>
k.status === 'NON_ACTIVE' ||
formik.values.kandang_ids.includes(k.id)
)
.every((k) =>
formik.values.kandang_ids.includes(k.id)
) &&
optionsKandang.filter(
(k) =>
k.status === 'NON_ACTIVE' ||
formik.values.kandang_ids.includes(k.id)
).length > 0
}
className='checkbox transition-none'
disabled={
formType === 'detail' ||
optionsKandang.filter(
(k) => k.status === 'NON_ACTIVE'
).length == 0
}
onChange={
formType === 'detail'
? () => {}
: kandangCheckAll
}
/>
</label>
</th>
<th>Kandang</th>
{/* <th>Status</th> */}
<th>Penanggung Jawab</th>
</tr>
</thead>
<tbody>
{/* rows */}
{selectedLocation != '' &&
optionsKandang.map((kandang) => (
<tr key={kandang.id}>
<th>
<label>
<input
value={kandang.id}
type='checkbox'
className='checkbox transition-none'
checked={formik.values.kandang_ids.includes(
kandang.id
)}
onChange={
formType === 'detail'
? () => {}
: kandangChangeHandler
}
disabled={
formType === 'detail' ||
kandang.status != 'NON_ACTIVE'
}
/>
</label>
</th>
<td>{kandang.name}</td>
{/* <td>{kandang.status}</td> */}
<td>{kandang.pic?.name}</td>
</tr>
))}
{selectedLocation == '' && (
<tr>
<td colSpan={3} className='text-center text-muted'>
Data tidak tersedia
</td>
</tr>
)}
</tbody>
{/* foot */}
{selectedLocation != '' && (
<tfoot>
<tr>
<th></th>
<th>Kandang</th>
<th>Penanggung Jawab</th>
</tr>
</tfoot>
)}
</table>
<ProjectFlockKandangTable
listKandang={optionsKandang}
rowSelection={rowSelection}
setRowSelection={setRowSelection}
selectedIds={formik.values.kandang_ids}
formType={formType}
/>
</div>
</Collapse>
</div>
@@ -845,7 +768,11 @@ const ProjectFlockForm = ({
<ConfirmationModal
ref={confirmModal.ref}
type={approvalAction == 'APPROVED' ? 'success' : 'error'}
text={`Apakah anda yakin ingin ${approvalAction == 'APPROVED' ? 'approve' : 'reject'} Project Flock berikut? (${initialValues?.flock?.name} - ${initialValues?.area?.name})?`}
text={`Apakah anda yakin ingin ${
approvalAction == 'APPROVED' ? 'approve' : 'reject'
} Project Flock berikut? (${initialValues?.flock?.name} - ${
initialValues?.area?.name
})?`}
secondaryButton={{
text: 'Tidak',
}}
src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
+146
View File
@@ -0,0 +1,146 @@
'use client';
import CheckboxInput from '@/components/input/CheckboxInput';
import PillBadge from '@/components/PillBadge';
import Table from '@/components/Table';
import { cn } from '@/lib/helper';
import { Kandang } from '@/types/api/master-data/kandang';
import { OnChangeFn } from '@tanstack/react-table';
const ProjectFlockKandangTable = ({
listKandang,
rowSelection,
setRowSelection,
selectedIds,
formType = 'add',
}: {
listKandang: Kandang[];
rowSelection: Record<string, boolean>;
setRowSelection: OnChangeFn<Record<string, boolean>>;
selectedIds: (number | undefined)[];
formType: 'add' | 'edit' | 'detail';
}) => {
console.log('selectedIds');
console.log(selectedIds);
return (
<Table<Kandang>
data={listKandang}
columns={[
{
id: 'select',
header: ({ table }) => {
const allRows = table.getRowModel().rows;
const selectableRows = allRows.filter(
(row) =>
row.original.status == 'NON_ACTIVE' ||
row.original.status == 'PENGAJUAN'
);
const allSelected =
selectableRows.every((row) => row.getIsSelected()) &&
selectableRows.length != 0 && formType != 'detail';
const someSelected =
selectableRows.some((row) => row.getIsSelected()) && !allSelected && formType != 'detail';
const toggleSelectableRows = () => {
const shouldSelect = !allSelected;
selectableRows.forEach((row) => row.toggleSelected(shouldSelect));
};
return (
<div className='w-full flex flex-row justify-center'>
<CheckboxInput
name='allRow'
checked={allSelected}
indeterminate={someSelected}
onChange={toggleSelectableRows}
disabled={
listKandang.filter(
(kandang) =>
kandang.status == 'NON_ACTIVE' ||
kandang.status == 'PENGAJUAN'
).length == 0 || formType == 'detail'
}
/>
</div>
);
},
cell: ({ row }) => {
return (
<CheckboxInput
name='row'
checked={
(row.getIsSelected() &&
(row.original.status == 'NON_ACTIVE' ||
row.original.status == 'PENGAJUAN')) ||
selectedIds.includes(row.original.id)
}
disabled={
!row.getCanSelect() ||
(row.original.status != 'NON_ACTIVE' &&
row.original.status != 'PENGAJUAN') ||
formType == 'detail'
}
indeterminate={row.getIsSomeSelected()}
onChange={row.getToggleSelectedHandler()}
/>
);
},
},
{
accessorFn: (row) => row.name,
header: 'Kandang',
},
{
accessorFn: (row) => row.status,
header: 'Status',
cell: (props) => {
return (
<PillBadge
color={(() => {
switch (props.row.original.status) {
case 'ACTIVE':
return 'red';
case 'PENGAJUAN':
return 'green';
case 'NON_ACTIVE':
return 'blue';
default:
return 'gray';
}
})()}
content={props.row.original.status
.toLowerCase()
.replace(/_/g, ' ')
.replace(/\b\w/g, (char) => char.toUpperCase())}
/>
);
},
},
{
accessorFn: (row) => row.pic?.name,
header: 'Penanggung Jawab',
},
]}
className={{
containerClassName: cn({
'mb-20': listKandang?.length === 0,
}),
tableWrapperClassName: 'overflow-x-auto min-h-full!',
tableClassName: 'font-inter w-full table-auto min-h-full!',
headerRowClassName: 'border-b border-b-gray-200',
headerColumnClassName:
'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
bodyRowClassName: 'border-b border-b-gray-200',
bodyColumnClassName:
'px-6 py-3 last:flex last:flex-row last:justify-end',
paginationClassName: 'hidden',
}}
rowSelection={rowSelection}
setRowSelection={setRowSelection}
/>
);
};
export default ProjectFlockKandangTable;