Merge pull request #96 from Kim-Jaemin420/develop

문서 I 수정
kosco-project · May 18, 2021 · e52690e · e52690e
2 parents b80c5da + 4c5b2e7
commit e52690e
Show file tree

Hide file tree

Showing 7 changed files with 204 additions and 162 deletions.
diff --git a/src/components/doc/I/IBottom.jsx b/src/components/doc/I/IBottom.jsx
@@ -44,7 +44,8 @@ const BottomBox = styled.div`
 `;
 
 const IBottom = ({ onChecked }) => {
-  const state = useSelector(state => state.i.D3);
+  const D3 = useSelector(state => state.i.D3);
+  console.log(D3[4]);
   const inputArg = ({ target }) => onChecked({ target });
 
   return (
@@ -62,37 +63,37 @@ const IBottom = ({ onChecked }) => {
           <tr>
             <td>1&#41; Lay the Suit on a Clean and Flat surface</td>
             <td>
-              <input type='checkbox' data-name="0" data-key="Normal" checked={state[0].Normal === 1} onChange={inputArg}/>
+              <input type='checkbox' data-name="0" data-key="Normal" checked={!!D3[0].Normal} onChange={inputArg}/>
             </td>
             <td>
-              <input type='checkbox' data-name="0" data-key="Abnormal" checked={state[0].Abnormal === 1} onChange={inputArg}/>
+              <input type='checkbox' data-name="0" data-key="Abnormal" checked={!!D3[0].Abnormal} onChange={inputArg}/>
             </td>
           </tr>
           <tr>
             <td> Closure state of Storage Bag</td>
             <td>
-              <input type='checkbox' data-name="1" data-key="Normal" checked={state[1].Normal === 1} onChange={inputArg}/>
+              <input type='checkbox' data-name="1" data-key="Normal" checked={!!D3[1].Normal} onChange={inputArg}/>
             </td>
             <td>
-              <input type='checkbox' data-name="1" data-key="Abnormal" checked={state[1].Abnormal === 1} onChange={inputArg}/>
+              <input type='checkbox' data-name="1" data-key="Abnormal" checked={!!D3[1].Abnormal} onChange={inputArg}/>
             </td>
           </tr>
           <tr>
             <td>3&#41; State of Labelling of Donning instruction</td>
             <td>
-              <input type='checkbox' data-name="2" data-key="Normal" checked={state[2].Normal === 1} onChange={inputArg}/>
+              <input type='checkbox' data-name="2" data-key="Normal" checked={!!D3[2].Normal} onChange={inputArg}/>
             </td>
             <td>
-              <input type='checkbox' data-name="2" data-key="Abnormal" checked={state[2].Abnormal === 1} onChange={inputArg}/>
+              <input type='checkbox' data-name="2" data-key="Abnormal" checked={!!D3[2].Abnormal} onChange={inputArg}/>
             </td>
           </tr>
           <tr>
             <td>4&#41; State of Labelling of Suit type and size</td>
             <td>
-              <input type='checkbox' data-name="3" data-key="Normal" checked={state[3].Normal === 1} onChange={inputArg}/>
+              <input type='checkbox' data-name="3" data-key="Normal" checked={!!D3[3].Normal} onChange={inputArg}/>
             </td>
             <td>
-              <input type='checkbox' data-name="3" data-key="Abnormal" checked={state[3].Abnormal === 1} onChange={inputArg}/>
+              <input type='checkbox' data-name="3" data-key="Abnormal" checked={!!D3[3].Abnormal} onChange={inputArg}/>
             </td>
           </tr>
         </tbody>
@@ -110,64 +111,64 @@ const IBottom = ({ onChecked }) => {
           <tr>
             <td>1&#41; Check Rips, Tears and / or Puncture</td>
             <td>
-              <input type='checkbox' data-name="4" data-key="Normal" checked={state[4].Normal === 1} onChange={inputArg}/>
+              <input type='checkbox' data-name="4" data-key="Normal" checked={!!D3[4].Normal} onChange={inputArg}/>
             </td>
             <td>
-              <input type='checkbox' data-name="4" data-key="Abnormal" checked={state[4].Abnormal === 1} onChange={inputArg}/>
+              <input type='checkbox' data-name="4" data-key="Abnormal" checked={!!D3[4].Abnormal} onChange={inputArg}/>
             </td>
           </tr>
           <tr>
             <td>2&#41; Check Zipper operation</td>
             <td>
-              <input type='checkbox' data-name="5" data-key="Normal" checked={state[5].Normal === 1} onChange={inputArg}/>
+              <input type='checkbox' data-name="5" data-key="Normal" checked={!!D3[5].Normal} onChange={inputArg}/>
             </td>
             <td>
-              <input type='checkbox' data-name="5" data-key="Abnormal" checked={state[5].Abnormal === 1} onChange={inputArg}/>
+              <input type='checkbox' data-name="5" data-key="Abnormal" checked={!!D3[5].Abnormal} onChange={inputArg}/>
             </td>
           </tr>
           <tr>
             <td>3&#41; Check Head support and / or Buoyancy ring</td>
             <td>
-              <input type='checkbox' data-name="6" data-key="Normal" checked={state[6].Normal === 1} onChange={inputArg}/>
+              <input type='checkbox' data-name="6" data-key="Normal" checked={!!D3[6].Normal} onChange={inputArg}/>
             </td>
             <td>
-              <input type='checkbox' data-name="6" data-key="Abnormal" checked={state[6].Abnormal === 1} onChange={inputArg}/>
+              <input type='checkbox' data-name="6" data-key="Abnormal" checked={!!D3[6].Abnormal} onChange={inputArg}/>
             </td>
           </tr>
           <tr>
             <td>4&#41; Check Inflation hose</td>
             <td>
-              <input type='checkbox' data-name="7" data-key="Normal" checked={state[7].Normal === 1} onChange={inputArg}/>
+              <input type='checkbox' data-name="7" data-key="Normal" checked={!!D3[7].Normal} onChange={inputArg}/>
             </td>
             <td>
-              <input type='checkbox' data-name="7" data-key="Abnormal" checked={state[7].Abnormal === 1} onChange={inputArg}/>
+              <input type='checkbox' data-name="7" data-key="Abnormal" checked={!!D3[7].Abnormal} onChange={inputArg}/>
             </td>
           </tr>
           <tr>
             <td>5&#41; Check Retro-Reflective tape</td>
             <td>
-              <input type='checkbox' data-name="8" data-key="Normal" checked={state[8].Normal === 1} onChange={inputArg}/>
+              <input type='checkbox' data-name="8" data-key="Normal" checked={!!D3[8].Normal} onChange={inputArg}/>
             </td>
             <td>
-              <input type='checkbox' data-name="8" data-key="Abnormal" checked={state[8].Abnormal === 1} onChange={inputArg}/>
+              <input type='checkbox' data-name="8" data-key="Abnormal" checked={!!D3[8].Abnormal} onChange={inputArg}/>
             </td>
           </tr>
           <tr>
             <td>6&#41; Check Whistle, Light and Expiration of Batteies</td>
             <td>
-              <input type='checkbox' data-name="9" data-key="Normal" checked={state[9].Normal === 1} onChange={inputArg}/>
+              <input type='checkbox' data-name="9" data-key="Normal" checked={!!D3[9].Normal} onChange={inputArg}/>
             </td>
             <td>
-              <input type='checkbox' data-name="9" data-key="Abnormal" checked={state[9].Abnormal === 1} onChange={inputArg}/>
+              <input type='checkbox' data-name="9" data-key="Abnormal" checked={!!D3[9].Abnormal} onChange={inputArg}/>
             </td>
           </tr>
           <tr>
             <td>7&#41; Make sure the suit is Dry inside and outside</td>
             <td>
-              <input type='checkbox' data-name="10" data-key="Normal" checked={state[10].Normal === 1} onChange={inputArg}/>
+              <input type='checkbox' data-name="10" data-key="Normal" checked={!!D3[10].Normal} onChange={inputArg}/>
             </td>
             <td>
-              <input type='checkbox' data-name="10" data-key="Abnormal" checked={state[10].Abnormal === 1} onChange={inputArg}/>
+              <input type='checkbox' data-name="10" data-key="Abnormal" checked={!!D3[10].Abnormal} onChange={inputArg}/>
             </td>
           </tr>
         </tbody>

diff --git a/src/components/doc/I/IForm.jsx b/src/components/doc/I/IForm.jsx
@@ -16,11 +16,11 @@ const ButtonBox = styled.div`
     margin: 0 15px;
   }`;
 
-const IForm = ({ onChange, onRemove, onInsert, lists, onChangeD2, onChecked, showModal, showCommModal }) => {
+const IForm = ({ onChange, onRemove, onInsert, onChangeD2, onChecked, showModal, showCommModal }) => {
   return (
     <form>
       <IInfo />
-      <ITop onChange={onChange} onRemove={onRemove} onInsert={onInsert} lists={lists} onChangeD2={onChangeD2}/>
+      <ITop onChange={onChange} onRemove={onRemove} onInsert={onInsert} onChangeD2={onChangeD2}/>
       <IBottom onChecked={onChecked}/>
       <IBottom2 />
       <ButtonBox>

diff --git a/src/components/doc/I/IInfo.jsx b/src/components/doc/I/IInfo.jsx
@@ -1,3 +1,4 @@
+import moment from 'moment';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -45,13 +46,13 @@ const IInfo = () => {
       </p>
       <div className='info-box'>
         <p>
-          <span>Ship's Name :</span>
+          <span>Ship's Name :</span> { JSON.parse(localStorage.getItem('shipNm'))}
         </p>
         <p>
-          <span>Certificate No :</span>
+          <span>Certificate No :</span> { JSON.parse(localStorage.getItem('certNo'))}
         </p>
         <p>
-          <span>Inspection Date :</span>
+          <span>Inspection Date :</span> { moment().format('YYYY-MM-DD') }
         </p>
       </div>
     </InfoBox>

diff --git a/src/components/doc/I/ITableRow.jsx b/src/components/doc/I/ITableRow.jsx
@@ -5,23 +5,23 @@ import { useSelector } from 'react-redux';
 import DeleteButton from '../common/DeleteButton';
 
 const ITableRow = ({ id, onRemove, num, onChange }) => {
-  const { ManufDt } = useSelector(state => state.i.D1[id]);
+  const { SerNo, ManufType, ManufDt } = useSelector(state => state.i.D1[id]);
   const inputArg = ({ target }) => onChange({ target, id });
 
   return (
     <tr>
       <td>{num}</td>
       <td>
-        <input type='text' onChange={inputArg} name="SerNo"/>
+        <input type='text' value={SerNo} onChange={inputArg} name="SerNo"/>
       </td>
       <td>
-        <input type='text' onChange={inputArg} name="ManufType"/>
+        <input type='text' value={ManufType} onChange={inputArg} name="ManufType"/>
       </td>
       <td>
         <DatePicker
-          selected={ManufDt}
+          selected={new Date(ManufDt)}
           name="ManufDt"
-          dateFormat="MMM.yyyy"
+          dateFormat="yyyy-MM"
           onChange={value => onChange({ id, target: { name: "ManufDt", value } })}
           showMonthYearPicker
         />

diff --git a/src/components/doc/I/ITop.jsx b/src/components/doc/I/ITop.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import ITableRow from './ITableRow';
 
@@ -50,7 +51,10 @@ const ButtonDiv = styled.div`
   text-align: center;
 `;
 
-const ITop = ({ onChange, onRemove, onInsert, lists, onChangeD2 }) => {
+const ITop = ({ onChange, onRemove, onInsert, onChangeD2 }) => {
+  const D1 = useSelector(state => state.i.D1)
+  const D2 = useSelector(state => state.i.D2)
+
   return (
     <>
       <BottomBox>
@@ -66,9 +70,9 @@ const ITop = ({ onChange, onRemove, onInsert, lists, onChangeD2 }) => {
             </tr>
           </thead>
           <tbody>
-          {lists.map((list, index) => (
-            <ITableRow key={list.id} id={list.id} onRemove={onRemove} num={index + 1} onChange={onChange}/>
-              ))}
+            {Object.entries(D1).map((item, index) => (
+              <ITableRow key={item[0]} id={item[0]} onRemove={onRemove} num={index + 1} onChange={onChange} />
+            ))}
           </tbody>
         </table>
         <ButtonDiv>
@@ -77,9 +81,9 @@ const ITop = ({ onChange, onRemove, onInsert, lists, onChangeD2 }) => {
           </button>
         </ButtonDiv>
         <p className='title'>(2) Special Additional Requirements :</p>
-        <input type='text' onChange={onChangeD2} name="0" style={{ marginBottom: 15, width: '100%', border: '1px solid #000' }} />
+        <input type='text' value={D2[0]} onChange={onChangeD2} name="0" style={{ marginBottom: 15, width: '100%', border: '1px solid #000' }} />
         <p className='title'>(3) Last Service Date / Service Station :</p>
-        <input type='text' onChange={onChangeD2} name="1" style={{ width: '100%', border: '1px solid #000' }} />
+        <input type='text' value={D2[1]} onChange={onChangeD2} name="1" style={{ width: '100%', border: '1px solid #000' }} />
       </BottomBox>
     </>
   );