Browse Source

update editable search result logic

create_edit_user
jason.lam 3 months ago
parent
commit
a55a7c50f3
3 changed files with 52 additions and 53 deletions
  1. +2
    -6
      src/components/RoughScheduleDetail/ViewByBomDetails.tsx
  2. +24
    -26
      src/components/RoughScheduleDetail/ViewByFGDetails.tsx
  3. +26
    -21
      src/components/SearchResults/EditableSearchResults.tsx

+ 2
- 6
src/components/RoughScheduleDetail/ViewByBomDetails.tsx View File

@@ -312,10 +312,6 @@ const ViewByBomDetails: React.FC<Props> = ({ apiRef, isEdit }) => {
}); });
}; };


useEffect(()=>{
console.log("[debug] pagingController", pagingController)
},[])

const overallColumns = useMemo<Column<any>[]>( const overallColumns = useMemo<Column<any>[]>(
() => [ () => [
{ {
@@ -420,7 +416,7 @@ const ViewByBomDetails: React.FC<Props> = ({ apiRef, isEdit }) => {
setPagingController={updatePagingController} setPagingController={updatePagingController}
pagingController={pagingController[7]} pagingController={pagingController[7]}
isAutoPaging={true} isAutoPaging={true}
isHideButton={true}
isEditable={false}
isEdit={false} isEdit={false}
/> />
</Grid> </Grid>
@@ -436,7 +432,7 @@ const ViewByBomDetails: React.FC<Props> = ({ apiRef, isEdit }) => {
setPagingController={updatePagingController} setPagingController={updatePagingController}
pagingController={pagingController[index]} pagingController={pagingController[index]}
isAutoPaging={true} isAutoPaging={true}
isHideButton={true}
isEditable={false}
isEdit={isEdit} isEdit={isEdit}
/> />
</Grid> </Grid>


+ 24
- 26
src/components/RoughScheduleDetail/ViewByFGDetails.tsx View File

@@ -512,41 +512,41 @@ const ViewByFGDetails: React.FC<Props> = ({ apiRef, isEdit }) => {


const fakeOverallRecords = useMemo<FGRecord[]>( const fakeOverallRecords = useMemo<FGRecord[]>(
() => [ () => [
{ id: 1, code: "PP1080", name: "咖哩汁", lastMonthAvgStock: 2400, safetyStock: 2400, inStockQty: 2400, productionQty: 8400.0,
{ id: 1, code: "PP1080", name: "咖哩汁", lastMonthAvgStock: 2400, safetyStock: 2400, inStockQty: 2400, productionQty: 8400.0*7,
lines: [ lines: [
{ id: 1, code: "MH0040", name: "大豆油(1噸/桶)", inStockQty: 54.44 , purchaseQty: 544.4 },
{ id: 2, code: "GI3236", name: "清水(煮過牛腩)", inStockQty: 317.52 , purchaseQty: 3175.2 },
{ id: 3, code: "MG1700", name: "STERILTOM 意大利茄粒", inStockQty: 9.00 , purchaseQty: 90 },
{ id: 4, code: "FA0533", name: "乾蔥茸", inStockQty: 6.04 , purchaseQty: 60.4 },
{ id: 5, code: "FA0210", name: "薑茸", inStockQty: 6.04 , purchaseQty: 60.4 },
{ id: 6, code: "FA0608", name: "粗蒜茸", inStockQty: 6.04 , purchaseQty: 60.4 },
{ id: 7, code: "FA0056", name: "洋蔥肉", inStockQty: 241.98 , purchaseQty: 2419.8 },
{ id: 8, code: "PP1188", name: "咖喱膽", inStockQty: 36.00 , purchaseQty: 360 },
{ id: 9, code: "PP8001", name: "咖哩汁箱料粉", inStockQty: 77.42 , purchaseQty: 774.2 },
{ id: 10, code: "PP1096", name: "白麵撈", inStockQty: 60.00 , purchaseQty: 600 },
{ id: 10, code: "NA0476", name: "2磅份量三邊覆合袋 (0.1x225x260mm)個計", inStockQty: 600.00 , purchaseQty: 6000 },
{ id: 1, code: "MH0040", name: "大豆油(1噸/桶)", inStockQty: 54.44 , purchaseQty: 544.4*7 },
{ id: 2, code: "GI3236", name: "清水(煮過牛腩)", inStockQty: 317.52 , purchaseQty: 3175.2*7 },
{ id: 3, code: "MG1700", name: "STERILTOM 意大利茄粒", inStockQty: 9.00 , purchaseQty: 90*7 },
{ id: 4, code: "FA0533", name: "乾蔥茸", inStockQty: 6.04 , purchaseQty: 60.4*7 },
{ id: 5, code: "FA0210", name: "薑茸", inStockQty: 6.04 , purchaseQty: 60.4*7 },
{ id: 6, code: "FA0608", name: "粗蒜茸", inStockQty: 6.04 , purchaseQty: 60.4*7 },
{ id: 7, code: "FA0056", name: "洋蔥肉", inStockQty: 241.98 , purchaseQty: 2419.8*7 },
{ id: 8, code: "PP1188", name: "咖喱膽", inStockQty: 36.00 , purchaseQty: 360*7 },
{ id: 9, code: "PP8001", name: "咖哩汁箱料粉", inStockQty: 77.42 , purchaseQty: 774.2*7 },
{ id: 10, code: "PP1096", name: "白麵撈", inStockQty: 60.00 , purchaseQty: 600*7 },
{ id: 10, code: "NA0476", name: "2磅份量三邊覆合袋 (0.1x225x260mm)個計", inStockQty: 600.00 , purchaseQty: 6000*7 },
] ]
}, },
{ id: 2, code: "PP1193", name: "蔥油(1磅) ", lastMonthAvgStock: 1320, safetyStock: 1322, inStockQty: 1322, productionQty: 4627, { id: 2, code: "PP1193", name: "蔥油(1磅) ", lastMonthAvgStock: 1320, safetyStock: 1322, inStockQty: 1322, productionQty: 4627,
lines: [ lines: [
{ id: 2, code: "MH0040", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 20 },
{ id: 3, code: "FA0161", name: "洋蔥粒", inStockQty: 0, purchaseQty: 10 }
{ id: 2, code: "MH0040", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 20*7 },
{ id: 3, code: "FA0161", name: "洋蔥粒", inStockQty: 0, purchaseQty: 10*7 }
] ]
}, },
{ id: 3, code: " PP1188", name: "咖喱膽", lastMonthAvgStock: 1017, safetyStock: 1017, inStockQty: 1016.2, productionQty: 3556.7, { id: 3, code: " PP1188", name: "咖喱膽", lastMonthAvgStock: 1017, safetyStock: 1017, inStockQty: 1016.2, productionQty: 3556.7,
lines: [ lines: [
{ id: 1, code: "MH0040", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 217.72 },
{ id: 2, code: "FA0161", name: "洋蔥粒", inStockQty: 0, purchaseQty: 18.15 },
{ id: 3, code: "FA0608", name: "粗蒜茸", inStockQty: 0, purchaseQty: 18.15 },
{ id: 4, code: "MG1288", name: "炸紅蔥頭", inStockQty: 0, purchaseQty: 6.05 },
{ id: 5, code: "FA0210", name: "薑茸", inStockQty: 0, purchaseQty: 6.05 },
{ id: 6, code: "MG0066", name: "咖哩料(5斤x16包+2斤/包)", inStockQty: 0, purchaseQty: 241.98 },
{ id: 1, code: "MH0040", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 217.72*7 },
{ id: 2, code: "FA0161", name: "洋蔥粒", inStockQty: 0, purchaseQty: 18.15*7 },
{ id: 3, code: "FA0608", name: "粗蒜茸", inStockQty: 0, purchaseQty: 18.15*7 },
{ id: 4, code: "MG1288", name: "炸紅蔥頭", inStockQty: 0, purchaseQty: 6.05*7 },
{ id: 5, code: "FA0210", name: "薑茸", inStockQty: 0, purchaseQty: 6.05*7 },
{ id: 6, code: "MG0066", name: "咖哩料(5斤x16包+2斤/包)", inStockQty: 0, purchaseQty: 241.98*7 },
] ]
}, },
{ id: 4, code: " PP1096", name: "白麵撈", lastMonthAvgStock: 1040, safetyStock: 1040, inStockQty: 1040, productionQty: 3640, { id: 4, code: " PP1096", name: "白麵撈", lastMonthAvgStock: 1040, safetyStock: 1040, inStockQty: 1040, productionQty: 3640,
lines: [ lines: [
{ id: 1, code: "MH0040", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 190.00 },
{ id: 1, code: "MH0040", name: "星加坡綠富貴花牌幼白麵粉 (50磅/包)", inStockQty: 0, purchaseQty: 250.00 },
{ id: 1, code: "MH0040", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 190.00*7 },
{ id: 1, code: "MH0040", name: "星加坡綠富貴花牌幼白麵粉 (50磅/包)", inStockQty: 0, purchaseQty: 250.00*7 },
{ id: 2, code: "FA0161", name: "蔥油", inStockQty: 1322, purchaseQty: 0 }, { id: 2, code: "FA0161", name: "蔥油", inStockQty: 1322, purchaseQty: 0 },
] ]
}, },
@@ -563,12 +563,11 @@ const ViewByFGDetails: React.FC<Props> = ({ apiRef, isEdit }) => {
<EditableSearchResults<FGRecord> <EditableSearchResults<FGRecord>
index={7} index={7}
items={fakeOverallRecords} items={fakeOverallRecords}
isMockUp={true}
columns={overallColumns} columns={overallColumns}
setPagingController={updatePagingController} setPagingController={updatePagingController}
pagingController={pagingController[7]} pagingController={pagingController[7]}
isAutoPaging={false} isAutoPaging={false}
isHideButton={true}
isEditable={false}
isEdit={isEdit} isEdit={isEdit}
hasCollapse={true} hasCollapse={true}
/> />
@@ -580,12 +579,11 @@ const ViewByFGDetails: React.FC<Props> = ({ apiRef, isEdit }) => {
</Typography> </Typography>
<EditableSearchResults<FGRecord> <EditableSearchResults<FGRecord>
items={fakeRecords[index]} // Use the corresponding records for the day items={fakeRecords[index]} // Use the corresponding records for the day
isMockUp={true}
columns={columns} columns={columns}
setPagingController={updatePagingController} setPagingController={updatePagingController}
pagingController={pagingController[index]} pagingController={pagingController[index]}
isAutoPaging={false} isAutoPaging={false}
isHideButton={false}
isEditable={true}
isEdit={isEdit} isEdit={isEdit}
hasCollapse={true} hasCollapse={true}
/> />


+ 26
- 21
src/components/SearchResults/EditableSearchResults.tsx View File

@@ -45,7 +45,6 @@ export type Column<T extends ResultWithId> =


interface Props<T extends ResultWithId> { interface Props<T extends ResultWithId> {
items: T[], items: T[],
isMockUp?: Boolean,
columns: Column<T>[], columns: Column<T>[],
noWrapper?: boolean, noWrapper?: boolean,
setPagingController: (value: { pageNum: number; pageSize: number; totalCount: number, index?: number}) => void, setPagingController: (value: { pageNum: number; pageSize: number; totalCount: number, index?: number}) => void,
@@ -56,14 +55,13 @@ interface Props<T extends ResultWithId> {
function EditableSearchResults<T extends ResultWithId>({ function EditableSearchResults<T extends ResultWithId>({
index, index,
items, items,
isMockUp,
columns, columns,
noWrapper, noWrapper,
pagingController, pagingController,
setPagingController, setPagingController,
isAutoPaging = true, isAutoPaging = true,
isEdit = true,
isHideButton = false,
isEdit = false,
isEditable = true,
hasCollapse = false, hasCollapse = false,
}: Props<T>) { }: Props<T>) {
const [page, setPage] = useState(0); const [page, setPage] = useState(0);
@@ -132,15 +130,19 @@ function EditableSearchResults<T extends ResultWithId>({
<> <>
<TableRow hover tabIndex={-1} key={row.id}> <TableRow hover tabIndex={-1} key={row.id}>
{ {
!isHideButton && <TableCell>
(isEditable || hasCollapse) && <TableCell>
{(editingRowId === row.id) ? ( {(editingRowId === row.id) ? (
<> <>
<IconButton disabled={!isEdit} onClick={() => handleSaveClick(row)}>
<SaveIcon/>
</IconButton>
<IconButton disabled={!isEdit} onClick={() => setEditingRowId(null)}>
<CancelIcon/>
</IconButton>
{
isEditable && <IconButton disabled={!isEdit} onClick={() => handleSaveClick(row)}>
<SaveIcon/>
</IconButton>
}
{
isEditable && <IconButton disabled={!isEdit} onClick={() => setEditingRowId(null)}>
<CancelIcon/>
</IconButton>
}
{ {
hasCollapse && <IconButton hasCollapse && <IconButton
aria-label="expand row" aria-label="expand row"
@@ -153,14 +155,18 @@ function EditableSearchResults<T extends ResultWithId>({
</> </>
) : ( ) : (
<> <>
<IconButton disabled={!isEdit}
onClick={() => handleEditClick(row.id as number)}>
<EditIcon/>
</IconButton>
<IconButton disabled={!isEdit}
onClick={() => handleDeleteClick(row.id as number)}>
<DeleteIcon/>
</IconButton>
{
isEditable && <IconButton disabled={!isEdit}
onClick={() => handleEditClick(row.id as number)}>
<EditIcon/>
</IconButton>
}
{
isEditable && <IconButton disabled={!isEdit}
onClick={() => handleDeleteClick(row.id as number)}>
<DeleteIcon/>
</IconButton>
}
{ {
hasCollapse && <IconButton hasCollapse && <IconButton
aria-label="expand row" aria-label="expand row"
@@ -173,7 +179,6 @@ function EditableSearchResults<T extends ResultWithId>({
</> </>
)} )}
</TableCell> </TableCell>

} }
{columns.map((column, idx) => { {columns.map((column, idx) => {
console.log(column) console.log(column)
@@ -254,7 +259,7 @@ function EditableSearchResults<T extends ResultWithId>({
<Table stickyHeader> <Table stickyHeader>
<TableHead> <TableHead>
<TableRow> <TableRow>
{!isHideButton && <TableCell>Actions</TableCell>} {/* Action Column Header */}
{(isEditable || hasCollapse) && <TableCell>Actions</TableCell>} {/* Action Column Header */}
{columns.map((column, idx) => ( {columns.map((column, idx) => (
<TableCell key={`${column.field.toString()}${idx}`}> <TableCell key={`${column.field.toString()}${idx}`}>
{column.label} {column.label}


Loading…
Cancel
Save