mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-24 15:25:46 +00:00
refactor(FE-316,317): Extract Uniformity table columns to constant
This commit is contained in:
rstubryan
@@ -3,7 +3,7 @@
|
|||||||
import React, { useCallback, useState, useEffect } from 'react';
|
import React, { useCallback, useState, useEffect } from 'react';
|
||||||
import useSWR from 'swr';
|
import useSWR from 'swr';
|
||||||
import { Icon } from '@iconify/react';
|
import { Icon } from '@iconify/react';
|
||||||
import { SortingState, CellContext } from '@tanstack/react-table';
|
import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
|
||||||
import { cn } from '@/lib/helper';
|
import { cn } from '@/lib/helper';
|
||||||
import Button from '@/components/Button';
|
import Button from '@/components/Button';
|
||||||
import UniformityChart from '@/components/pages/uniformity/UniformityChart';
|
import UniformityChart from '@/components/pages/uniformity/UniformityChart';
|
||||||
@@ -168,6 +168,142 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// ===== TABLE COLUMNS DEFINITION =====
|
||||||
|
const uniformityColumns: ColumnDef<Uniformity>[] = [
|
||||||
|
{
|
||||||
|
id: 'select',
|
||||||
|
header: ({ table }) => {
|
||||||
|
const allRows = table.getRowModel().rows;
|
||||||
|
const selectableRows = allRows.filter((row) => {
|
||||||
|
const uniformity = row.original;
|
||||||
|
return !isUniformityLocked(uniformity);
|
||||||
|
});
|
||||||
|
|
||||||
|
const hasNoSelectableRows = selectableRows.length === 0;
|
||||||
|
|
||||||
|
const handleSelectAll = () => {
|
||||||
|
const isAllSelected = selectableRows.every((row) =>
|
||||||
|
row.getIsSelected()
|
||||||
|
);
|
||||||
|
|
||||||
|
selectableRows.forEach((row) => {
|
||||||
|
row.toggleSelected(!isAllSelected);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const isAllSelected =
|
||||||
|
selectableRows.length > 0 &&
|
||||||
|
selectableRows.every((row) => row.getIsSelected());
|
||||||
|
|
||||||
|
const isSomeSelected = selectableRows.some((row) =>
|
||||||
|
row.getIsSelected()
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='w-full flex flex-row justify-center'>
|
||||||
|
<CheckboxInput
|
||||||
|
name='allRow'
|
||||||
|
checked={isAllSelected}
|
||||||
|
indeterminate={isSomeSelected && !isAllSelected}
|
||||||
|
onChange={handleSelectAll}
|
||||||
|
disabled={hasNoSelectableRows}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const uniformity = row.original;
|
||||||
|
const isDisabled = isUniformityLocked(uniformity);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn({ 'opacity-50': isDisabled })}>
|
||||||
|
<CheckboxInput
|
||||||
|
name='row'
|
||||||
|
checked={row.getIsSelected()}
|
||||||
|
indeterminate={row.getIsSomeSelected()}
|
||||||
|
onChange={row.getToggleSelectedHandler()}
|
||||||
|
disabled={isDisabled}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Lokasi',
|
||||||
|
cell: (props) => props.row.original.location.name || '-',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Flock',
|
||||||
|
cell: (props) => `Flock ${props.row.original.project_flock_kandang_id}`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Kandang',
|
||||||
|
cell: (props) => props.row.original.kandang.name || '-',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Tanggal (Week)',
|
||||||
|
cell: (props) => `Week ${props.row.original.week}`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Status',
|
||||||
|
cell: (props) => {
|
||||||
|
const status = props.row.original.status;
|
||||||
|
return (
|
||||||
|
<Badge variant='soft' color={getStatusColor(status)}>
|
||||||
|
{getStatusText(status)}
|
||||||
|
</Badge>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Uniformity',
|
||||||
|
cell: (props) => {
|
||||||
|
const uniformity = props.row.original.uniformity;
|
||||||
|
return <span>{uniformity}%</span>;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Aksi',
|
||||||
|
cell: (props: CellContext<Uniformity, unknown>) => {
|
||||||
|
const currentPageSize = props.table.getPaginationRowModel().rows.length;
|
||||||
|
const currentPageRows = props.table.getPaginationRowModel().flatRows;
|
||||||
|
const currentRowRelativeIndex =
|
||||||
|
currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
|
||||||
|
|
||||||
|
const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
|
||||||
|
|
||||||
|
const deleteClickHandler = () => {
|
||||||
|
setSelectedUniformity(props.row.original);
|
||||||
|
singleDeleteModal.openModal();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{currentPageSize > 2 && (
|
||||||
|
<RowDropdownOptions isLast2Rows={isLast2Rows}>
|
||||||
|
<RowOptionsMenu
|
||||||
|
type='dropdown'
|
||||||
|
props={props}
|
||||||
|
deleteClickHandler={deleteClickHandler}
|
||||||
|
/>
|
||||||
|
</RowDropdownOptions>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentPageSize <= 2 && (
|
||||||
|
<RowCollapseOptions>
|
||||||
|
<RowOptionsMenu
|
||||||
|
type='collapse'
|
||||||
|
props={props}
|
||||||
|
deleteClickHandler={deleteClickHandler}
|
||||||
|
/>
|
||||||
|
</RowCollapseOptions>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<section className='[&_button]:w-full [&_button]:sm:w-fit [&_button]:last:mt-2 [&_button]:last:sm:mt-0 sm:flex sm:justify-between grid grid-cols-1 sm:gap-0 gap-2'>
|
<section className='[&_button]:w-full [&_button]:sm:w-fit [&_button]:last:mt-2 [&_button]:last:sm:mt-0 sm:flex sm:justify-between grid grid-cols-1 sm:gap-0 gap-2'>
|
||||||
@@ -211,151 +347,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
|
|||||||
>
|
>
|
||||||
<Table<Uniformity>
|
<Table<Uniformity>
|
||||||
data={isResponseSuccess(uniformities) ? uniformities?.data : []}
|
data={isResponseSuccess(uniformities) ? uniformities?.data : []}
|
||||||
columns={[
|
columns={uniformityColumns}
|
||||||
{
|
|
||||||
id: 'select',
|
|
||||||
header: ({ table }) => {
|
|
||||||
const allRows = table.getRowModel().rows;
|
|
||||||
const selectableRows = allRows.filter((row) => {
|
|
||||||
const uniformity = row.original;
|
|
||||||
return !isUniformityLocked(uniformity);
|
|
||||||
});
|
|
||||||
|
|
||||||
const hasNoSelectableRows = selectableRows.length === 0;
|
|
||||||
|
|
||||||
const handleSelectAll = () => {
|
|
||||||
const isAllSelected = selectableRows.every((row) =>
|
|
||||||
row.getIsSelected()
|
|
||||||
);
|
|
||||||
|
|
||||||
selectableRows.forEach((row) => {
|
|
||||||
row.toggleSelected(!isAllSelected);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const isAllSelected =
|
|
||||||
selectableRows.length > 0 &&
|
|
||||||
selectableRows.every((row) => row.getIsSelected());
|
|
||||||
|
|
||||||
const isSomeSelected = selectableRows.some((row) =>
|
|
||||||
row.getIsSelected()
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='w-full flex flex-row justify-center'>
|
|
||||||
<CheckboxInput
|
|
||||||
name='allRow'
|
|
||||||
checked={isAllSelected}
|
|
||||||
indeterminate={isSomeSelected && !isAllSelected}
|
|
||||||
onChange={handleSelectAll}
|
|
||||||
disabled={hasNoSelectableRows}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const uniformity = row.original;
|
|
||||||
const isDisabled = isUniformityLocked(uniformity);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={cn({ 'opacity-50': isDisabled })}>
|
|
||||||
<CheckboxInput
|
|
||||||
name='row'
|
|
||||||
checked={row.getIsSelected()}
|
|
||||||
indeterminate={row.getIsSomeSelected()}
|
|
||||||
onChange={row.getToggleSelectedHandler()}
|
|
||||||
disabled={isDisabled}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: '#',
|
|
||||||
cell: (props) =>
|
|
||||||
tableFilterState.pageSize * (tableFilterState.page - 1) +
|
|
||||||
props.row.index +
|
|
||||||
1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Lokasi',
|
|
||||||
cell: (props) => props.row.original.location.name || '-',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Flock',
|
|
||||||
cell: (props) =>
|
|
||||||
`Flock ${props.row.original.project_flock_kandang_id}`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Kandang',
|
|
||||||
cell: (props) => props.row.original.kandang.name || '-',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Tanggal (Week)',
|
|
||||||
cell: (props) => `Week ${props.row.original.week}`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Status',
|
|
||||||
cell: (props) => {
|
|
||||||
const status = props.row.original.status;
|
|
||||||
return (
|
|
||||||
<Badge variant='soft' color={getStatusColor(status)}>
|
|
||||||
{getStatusText(status)}
|
|
||||||
</Badge>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Uniformity',
|
|
||||||
cell: (props) => {
|
|
||||||
const uniformity = props.row.original.uniformity;
|
|
||||||
return <span>{uniformity}%</span>;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Aksi',
|
|
||||||
cell: (props: CellContext<Uniformity, unknown>) => {
|
|
||||||
const currentPageSize =
|
|
||||||
props.table.getPaginationRowModel().rows.length;
|
|
||||||
const currentPageRows =
|
|
||||||
props.table.getPaginationRowModel().flatRows;
|
|
||||||
const currentRowRelativeIndex =
|
|
||||||
currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
|
|
||||||
|
|
||||||
const isLast2Rows =
|
|
||||||
currentRowRelativeIndex > currentPageSize - 2;
|
|
||||||
|
|
||||||
const deleteClickHandler = () => {
|
|
||||||
setSelectedUniformity(props.row.original);
|
|
||||||
singleDeleteModal.openModal();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{currentPageSize > 2 && (
|
|
||||||
<RowDropdownOptions isLast2Rows={isLast2Rows}>
|
|
||||||
<RowOptionsMenu
|
|
||||||
type='dropdown'
|
|
||||||
props={props}
|
|
||||||
deleteClickHandler={deleteClickHandler}
|
|
||||||
/>
|
|
||||||
</RowDropdownOptions>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{currentPageSize <= 2 && (
|
|
||||||
<RowCollapseOptions>
|
|
||||||
<RowOptionsMenu
|
|
||||||
type='collapse'
|
|
||||||
props={props}
|
|
||||||
deleteClickHandler={deleteClickHandler}
|
|
||||||
/>
|
|
||||||
</RowCollapseOptions>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
pageSize={tableFilterState.pageSize}
|
pageSize={tableFilterState.pageSize}
|
||||||
page={isResponseSuccess(uniformities) ? uniformities?.meta?.page : 0}
|
page={isResponseSuccess(uniformities) ? uniformities?.meta?.page : 0}
|
||||||
totalItems={
|
totalItems={
|
||||||
|
|||||||
Reference in New Issue
Block a user