Skip to content

Commit

Permalink
feat: 발주품목 삭제 후 랜더링(reload X) #48
Browse files Browse the repository at this point in the history
  • Loading branch information
@kaf829
kaf829 committed Sep 18, 2023
1 parent 7bcce24 commit 94893cc
Showing 1 changed file with 38 additions and 37 deletions.
75 changes: 38 additions & 37 deletions frontend/src/views/dashboard/components/PorderComponents2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,13 @@ import DashboardCard from '../../../components/shared/DashboardCard';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import axios from 'axios';
import { Pagination } from '@mui/material';
import { LocalizationProvider, DesktopDateTimePicker, DatePicker } from '@mui/x-date-pickers';
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import swal from 'sweetalert2'
import { toggleCheckbox } from 'src/redux/slices/pOrderInfoCheckboxReducer';
import { REMOVE_ALL_SELECTED_PRODUCTS } from 'src/redux/slices/selectedProductsReducer';
import { seletedPOrderList } from '../../../redux/thunks/SelectedPOrderList';
import reload from 'src/redux/slices/pOrderListReducer';
import { tableCellClasses } from "@mui/material/TableCell";

import { reload } from 'src/redux/slices/pOrderListReducer';
import { seletedPOrderList } from '../../../redux/thunks/SelectedPOrderList';
const PorderComponets2 = () => {
const [visibleCount, setVisibleCount] = useState(10);
const [visibleProducts, setVisibleProducts] = useState([]);
Expand All @@ -41,6 +40,7 @@ const PorderComponets2 = () => {
const [isDataUpdated, setDataUpdated] = useState(false);
const [pOrderCount, setPOrderCount] = useState("");
const [pOrderItemState, setPOrderItemState] = useState("");
const reloadFlag = useSelector((state) => state.pOrderList.reload);

const dispatch = useDispatch();
useEffect(() => {
Expand All @@ -62,6 +62,13 @@ const PorderComponets2 = () => {

}, [visibleProducts, dispatch])

useEffect(() => {
if(reloadFlag === true){
dispatch(reload(false))
dispatch(seletedPOrderList(pOrderCode))
}
}, [reloadFlag])


const selectedProducts = useSelector((state) => state.pOrderInfoCheckbox.selectedCheckBox);
const removeCheckboxPOrder = useSelector((state) => state.selectedProduct.selectedProduct);
Expand Down Expand Up @@ -148,10 +155,6 @@ const PorderComponets2 = () => {
icon: 'success',
showConfirmButton: false,
});
// 생성한 newProduct을 콘솔에 출력하여 확인
console.log('새로운 제품:', newProduct);
// dispatch(reload(false)) // 이 부분을 주석 처리
console.log('업데이트된 visibleProducts:', updatedVisibleProducts);
setItemCode("");
setSelectedDateTime("");
setPOrderItemPrice("");
Expand Down Expand Up @@ -230,7 +233,6 @@ const PorderComponets2 = () => {
setIsModalOpen(false);
}


const handleEdit = (productId) => {
setEditMode((prevState) => ({ ...prevState, [productId]: !prevState[productId] }));
if (editMode[productId]) { // 이 부분을 수정하여 "Save" 버튼을 눌렀을 때만 axios 통신이 일어나도록 함
Expand Down Expand Up @@ -377,27 +379,27 @@ const PorderComponets2 = () => {
</StyledTableRow>
) : (
visibleProducts.map((product, index) => (
<StyledTableRow key={index}
<TableRow key={index}
sx={{
backgroundColor: index % 2 !== 0 ? "#f3f3f3" : "white",
'&:hover': {
backgroundColor: 'rgba(0, 0, 0, 0.04)', // 이 부분은 hover 시 배경색을 설정하며, 필요에 따라 조정할 수 있습니다.
}
}}ㄴ
>
<StyledTableCell sx={{ padding: 2 }}>
<TableCell sx={{ padding: 2 }}>
<Checkbox
checked={selectedProducts.includes(product.porderItemNo)}
onChange={() => {
handleCheckboxChange(product.porderItemNo)
setPOrderItemState(product.porderState)
}}
/>
</StyledTableCell>
<StyledTableCell sx={{ padding: 2 }}>
</TableCell>
<TableCell sx={{ padding: 2 }}>
<Typography sx={{ fontSize: '15px', fontWeight: '500' }} >{product.porderState}</Typography>
</StyledTableCell>
<StyledTableCell sx={{ padding: 2, textAlign: 'right' }}>
</TableCell>
<TableCell sx={{ padding: 2, textAlign: 'right' }}>
{editMode[product.porderItemNo] ? (
<TextField
value={editItemCode}
Expand All @@ -413,8 +415,8 @@ const PorderComponets2 = () => {
{product.itemCode}
</Typography>
)}
</StyledTableCell>
<StyledTableCell sx={{ padding: 2, textAlign: 'right' }}>
</TableCell>
<TableCell sx={{ padding: 2, textAlign: 'right' }}>
{editMode[product.porderItemNo] ? (
<TextField
value={editItemName}
Expand All @@ -429,41 +431,41 @@ const PorderComponets2 = () => {
{product.itemName}
</Typography>
)}
</StyledTableCell>
<StyledTableCell style={{ textAlign: 'right', padding: 2 }}>
</TableCell>
<TableCell style={{ textAlign: 'right', padding: 2 }}>
{editMode[product.porderItemNo] ? (
<TextField
type="number"
type="number"
value={editPOrderItemPrice}
onChange={(e) => {
handleChange(product.porderItemNo, 'porderPrice', e.target.value)
setEditPOrderItemPrice(e.target.value)

}}
/>
) : (
<Typography variant="subtitle2" fontWeight={600}>
{product.porderPrice}
</Typography>
)}
</StyledTableCell>
<StyledTableCell style={{ textAlign: 'right', padding: 2 }}>
</TableCell>
<TableCell style={{ textAlign: 'right', padding: 2 }}>
{editMode[product.porderItemNo] ? (
<TextField
type="number"
value={product.porderCount}
type="number"
value={editPOrderCount}
onChange={(e) => {
handleChange(product.porderItemNo, 'porderCount', e.target.value)
setEditPOrderCount(e.target.value)

}}
/>
) : (
<Typography variant="subtitle2" fontWeight={600}>
{product.porderCount}
</Typography>
)}
</StyledTableCell>
<StyledTableCell style={{ textAlign: 'right', padding: 2 }}>
</TableCell>
<TableCell style={{ textAlign: 'right', padding: 2 }}>
{editMode[product.porderItemNo] ? (
<Typography variant="subtitle2" fontWeight={600}>
{editPOrderItemPrice * editPOrderCount}</Typography>
Expand All @@ -472,10 +474,9 @@ const PorderComponets2 = () => {
{(+product.porderCount) * (+product.porderPrice)}
</Typography>
)}
</StyledTableCell>
<StyledTableCell sx={{ padding: 2 }}>
</TableCell>
<TableCell sx={{ padding: 2 }}>
{editMode[product.porderItemNo] ? (

<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
label={`금일 (${formattedToday})`}
Expand All @@ -494,8 +495,8 @@ const PorderComponets2 = () => {
<Typography sx={{ fontSize: '15px', fontWeight: '500' }}>{product.receiveDeadline}</Typography>
)
}
</StyledTableCell>
<StyledTableCell sx={{ padding: 2 }}>
</TableCell>
<TableCell sx={{ padding: 2 }}>
{product.porderState !== "준비" ?
(
<Button
Expand Down Expand Up @@ -523,19 +524,19 @@ const PorderComponets2 = () => {
setPOrderItemNo(product.porderItemNo)
}}
>
{editMode[product.porderItemNo] ? 'Save' : 'Edit'}
{editMode[product.porderItemNo] ? 'Save' : '수정'}
</Button>
)
}
</StyledTableCell>
</TableCell>

<StyledTableCell sx={{ display: "none", padding: 2 }} >
<TableCell sx={{ display: "none", padding: 2 }} >
<Typography
value={product.porderCode}
onChange={(e) => setPOrderCode(e.target.value)}
/>
</StyledTableCell>
</StyledTableRow>
</TableCell>
</TableRow>
))
)}
</TableBody>
Expand Down

0 comments on commit 94893cc

Please sign in to comment.