feat: 발주 입고 페이지 추가

2Jo-Logistics-Management · Aug 7, 2023 · 17436d5 · 17436d5
1 parent 8d2b9ff
commit 17436d5
Show file tree

Hide file tree

Showing 5 changed files with 538 additions and 324 deletions.
diff --git a/frontend/src/views/dashboard/components/PorderComponents2.js b/frontend/src/views/dashboard/components/PorderComponents2.js
@@ -19,7 +19,7 @@ import products from '../../data/memberData';
 import PorderModal from '../components/modal/PorderModal';
 import { open_Modal } from '../../../redux/slices/porderModalDuck';
 import pOrderItemUpdateAxios from '../../../axios/POrderItemUpdateAxios'
-import pOrderItemUpdateThunk from "../../../redux/slices/selectedPOrderReducer";
+
 const PorderComponets2 = () => {
   const [visibleCount, setVisibleCount] = useState(10);
   const [visibleProducts, setVisibleProducts] = useState([]);
@@ -46,11 +46,14 @@ const PorderComponets2 = () => {
   const porderData = useSelector((state) => state.selectedPOrder.seletedPOrder);
   console.log("밑에 컴포넌트(위에서 선택한 data):"+ porderData);
 
-  if (!porderModalState) {
-    return null;
-  }
+  // if (!porderModalState) {
+  //   return null;
+  // }
+
+
+
 
-  const handleEdit = (productId) => {
+  const handleEdit = (productId) => { 
     setEditMode((prevState) => ({ ...prevState, [productId]: !prevState[productId] }));
     if (editMode[productId]) { // 이 부분을 수정하여 "Save" 버튼을 눌렀을 때만 axios 통신이 일어나도록 함
       const index = tempProducts.findIndex((product) => product.id === productId);

diff --git a/frontend/src/views/dashboard/components/PorderComponets.js b/frontend/src/views/dashboard/components/PorderComponets.js
@@ -103,18 +103,25 @@ const PorderComponets = () => {
 
   const handleSelectAllChange = () => {
     if (selectAll) {
-      // 이미 선택된 상태라면, 모든 상품을 선택 취소한다.
-      dispatch(REMOVE_ALL_SELECTED_PRODUCTS());
+      // 이미 선택된 상태라면, 현재 페이지의 모든 상품 선택을 해제한다.
+      currentItems.forEach(product => {
+        dispatch(REMOVE_SELECTED_PRODUCT(product.id));
+      });
     } else {
-      // 선택되지 않은 상태라면, 모든 상품을 선택한다.
-      products.forEach(product => {
+      // 선택되지 않은 상태라면, 현재 페이지의 모든 상품을 선택한다.
+      currentItems.forEach(product => {
         dispatch(ADD_SELECTED_PRODUCT(product.id));
       });
     }
     // 전체 선택 체크박스 상태를 토글한다.
     setSelectAll(!selectAll);
   };
 
+  useEffect(() => {
+    // 선택된 상품의 수가 현재 페이지의 상품 수와 동일하다면, 전체 선택 체크박스를 선택 상태로 설정한다.
+    const allSelectedOnCurrentPage = currentItems.every(item => selectedProducts.includes(item.id));
+    setSelectAll(allSelectedOnCurrentPage);
+  }, [selectedProducts, currentItems]);
 
   useEffect(() => {
     // 선택된 상품의 수가 전체 상품의 수와 동일하다면, 전체 선택 체크박스를 선택 상태로 설정한다.
@@ -142,6 +149,7 @@ const PorderComponets = () => {
               삭제
             </Button>
           </Box>
+
 
           <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
             {/* Your second box content here */}
@@ -168,7 +176,16 @@ const PorderComponets = () => {
             </Button>
           </Box>
         </Box>
-
+        <Box>
+        {selectedProducts.length >= 2 && (
+            <Typography 
+                variant="h6" 
+                style={{color: 'red', fontWeight: 'bold'}}
+            >
+                선택된 상품 개수: {selectedProducts.length} 입니다
+            </Typography>
+        )}
+        </Box>
 
         <br />