update surat BA, menu home

components/Sanksi/BeritaAcara_A.js

@@ -23,10 +23,7 @@ class BeritaAcara extends Component {
             isEditTanggal: false,
             tanggal: "",
             setTanggal: false,
-            namaPeserta: [],
             isEditNamaPeserta: false,
-            simpulan: "",
-            rekomendasi: "",
             isEditTemuanLain: false,
             temuanLain: [],
             memberatkan: [],
@@ -37,7 +34,9 @@ class BeritaAcara extends Component {
             isEditSanksi: false,
             copied: false,
             setmeState: true,
+            descPelanggaran: [],
         };
+        this.updateValueRekomendasi = this.updateValueRekomendasi.bind(this)
     }
 
     static getInitialProps = async ({ query }) => {
@@ -45,13 +44,49 @@ class BeritaAcara extends Component {
     };
 
     componentDidMount = async () => {
-        const { query, token } = this.props;
+        const { query, token, dataPelanggaran } = this.props;
         const { id } = query;
         const getDataSave = await getAutoSave({ id, laporan: true });
-        const autoSaveDataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
-        const autoSaveDataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran?.data;
-        this.setState({ autoSaveDataPelanggaran, autoSaveDataSuratBA });
+        const dataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
+        this.setState(dataSuratBA)
     };
+
+    componentDidUpdate = (prevProps) => {
+        const { dataPelanggaran } = this.state;
+        if (prevProps.dataPelanggaran != this.state.dataPelanggaran) {
+            // this.state.descPelanggaran = dataPelanggaran?.map((e) => ({ id: e._id, simpulan: "simpulan", rekomendasi: "rekomendasi" }))
+            const descPelanggaran = {}
+            dataPelanggaran?.forEach(e => {
+                descPelanggaran[e._id] = {
+                    simpulan: 'simpulan',
+                    rekomendasi: 'rekomendasi'
+                }
+            });
+            // this.setState({ descPelanggaran })
+        }
+    }
+
+    updateValueSimpulan = (evt, id) => {
+        // this.state.descPelanggaran[id]?.simpulan = evt.target.value
+        this.setState((prevState) => ({
+            ...prevState, descPelanggaran: {
+                ...prevState.descPelanggaran, [id]: {
+                    ...prevState.descPelanggaran[id], simpulan: evt.target.value
+                }
+            }
+        }), this.handleAutoSave)
+    }
+    updateValueRekomendasi = (evt, id) => {
+        // this.state.descPelanggaran[id]?.simpulan = evt.target.value
+        this.setState((prevState) => ({
+            ...prevState, descPelanggaran: {
+                ...prevState.descPelanggaran, [id]: {
+                    ...prevState.descPelanggaran[id], rekomendasi: evt.target.value
+                }
+            }
+        }), this.handleAutoSave)
+    }
+
     setDataSuratBA = () => {
         this.props.setDataSuratBA(this.state);
     }
@@ -99,9 +134,6 @@ class BeritaAcara extends Component {
         this.state.temuanLain.push(addTemuanLain)
         this.setDataSuratBA(this.state)
         this.handleAutoSave()
-        // this.setState({
-        //     temuanLain: [...this.state.temuanLain, addTemuanLain]
-        // }, this.setDataSuratBA, this.handleAutoSave())
 
     }
     updateValueMemringankan = () => {
@@ -109,9 +141,6 @@ class BeritaAcara extends Component {
         this.state.meringankan.push(addMeringankan)
         this.setDataSuratBA(this.state)
         this.handleAutoSave()
-        // this.setState({
-        //     meringankan: [...this.state.meringankan, addMeringankan]
-        // }, this.setDataSuratBA, this.handleAutoSave())
 
     }
     updateValueMemberatkan = () => {
@@ -119,7 +148,6 @@ class BeritaAcara extends Component {
         this.state.memberatkan.push(addKeberatan)
         this.setDataSuratBA(this.state)
         this.handleAutoSave()
-
     }
 
 
@@ -136,19 +164,15 @@ class BeritaAcara extends Component {
         }, 1000);
     }
 
-
     render() {
-        const { dataPelanggaran, dataLaporan, dataSuratBA } = this.props
-        const { isEditTempat, tempat, isEditTanggal, tanggal, setTanggal, isEditTemuanLain, isEditKeberatan, isEditMeringankan, isEditSanksi, autoSaveDataSuratBA, autoSaveDataPelanggaran } = this.state
-
+        const { dataLaporan, dataSuratBA, dataPelanggaran } = this.props
+        const { descPelanggaran, tanggal, setTanggal } = this.state
         return (
             <div>
                 <div className=' content-heading border-radius-login'>
                     <span className="btn-radius">
                         <ReactToPrint
                             trigger={() => {
-                                // NOTE: could just as easily return <SomeComponent />. Do NOT pass an `onClick` prop
-                                // to the root node of the returned component as it will be overwritten.
                                 return <span>
                                     <Button color className="btn-labeled-4">
                                         <h4 className="p-0 mt-2">Print dan Download</h4>
@@ -160,7 +184,7 @@ class BeritaAcara extends Component {
                     </span>
                 </div>
                 <div style={{ display: "none" }}>
-                    <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} dataPelanggaran={this.props.dataPelanggaran} dataSuratBA={this.props.dataSuratBA} />
+                    <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} dataPelanggaran={this.state.dataPelanggaran} dataSuratBA={this.props.dataSuratBA} />
                 </div>
                 <div className='page'>
                     <page>
@@ -172,10 +196,11 @@ class BeritaAcara extends Component {
                         <div className='body'>
                             <p className='body'>
                                 Pada hari ini
-                                {isEditTanggal &&
+
+                                {dataSuratBA?.isEditTanggal &&
                                     <span>
                                         <DatePicker
-                                            selected={tanggal}
+                                            selected={new Date(this.state.tanggal)}
                                             onChange={(tanggal) => {
                                                 this.setState({ tanggal, setTanggal: true }, this.setDataSuratBA)
                                             }}
@@ -189,15 +214,15 @@ class BeritaAcara extends Component {
                                         />
                                     </span>
                                 }
-                                {setTanggal === true || autoSaveDataSuratBA?.setTanggal === true ?
-                                    <span onClick={this.isEditTanggal}> {moment(tanggal || autoSaveDataSuratBA?.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(tanggal || autoSaveDataSuratBA?.tanggal).format("D")}&nbsp; bulan &nbsp;{moment(tanggal || autoSaveDataSuratBA?.tanggal).format("MMMM")} tahun &nbsp;{moment(tanggal || autoSaveDataSuratBA?.tanggal).format("YYYY")},</span> :
+                                {setTanggal === true || this.state?.setTanggal === true ?
+                                    <span onClick={this.isEditTanggal}> {moment(tanggal || this.state?.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(tanggal || this.state?.tanggal).format("D")}&nbsp; bulan &nbsp;{moment(tanggal || this.state?.tanggal).format("MMMM")} tahun &nbsp;{moment(tanggal || this.state?.tanggal).format("YYYY")},</span> :
                                     <span onClick={this.isEditTanggal}> &nbsp;[Mohon Diisi] &nbsp;</span>
                                 }
                                 &nbsp;bertempat di
-                                {isEditTempat &&
+                                {dataSuratBA?.isEditTempat &&
                                     <span>
                                         <input type='text'
-                                            defaultValue=""
+                                            defaultValue={dataSuratBA?.tempat}
                                             ref="inputTempat"
                                             onChange={() => {
                                                 this.setState({ tempat: this.refs.inputTempat.value }, this.setDataSuratBA)
@@ -207,9 +232,9 @@ class BeritaAcara extends Component {
                                         <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.isEditTempat() }} />
                                     </span>
                                 }
-                                {dataSuratBA?.tempat || autoSaveDataSuratBA?.tempat ?
+                                {dataSuratBA?.tempat || this.state?.tempat ?
                                     <span onClick={this.isEditTempat}>
-                                        &nbsp;{dataSuratBA?.tempat || autoSaveDataSuratBA?.tempat}
+                                        &nbsp;{dataSuratBA?.tempat || this.state?.tempat}
                                     </span>
                                     :
                                     <span onClick={this.isEditTempat}>[Mohon Diisi]</span>
@@ -230,8 +255,8 @@ class BeritaAcara extends Component {
                         <div className='body'>
                             <ol>
                                 <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi  {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, tanggal
-                                    {setTanggal === true || autoSaveDataSuratBA?.setTanggal === true ?
-                                        <span> &nbsp;{moment(tanggal || autoSaveDataSuratBA?.tanggal).format("DD-MM-YYYY")}</span>
+                                    {setTanggal === true || this.state?.setTanggal === true ?
+                                        <span> &nbsp;{moment(tanggal || this.state?.tanggal).format("DD-MM-YYYY")}</span>
                                         :
                                         <span> &nbsp;....... &nbsp;</span>
                                     }
@@ -253,35 +278,49 @@ class BeritaAcara extends Component {
                                         </tr>
                                     </thead>
                                     <tbody>
-                                        {dataPelanggaran?.map((e, i) => (
+                                        {dataPelanggaran?.data?.map((e, i) => (
                                             <tr key={e._id}>
                                                 <td>{++i}</td>
                                                 {dataLaporan.data && (<td className='BA-header'>{dataLaporan.data.pt.nama}</td>)}
                                                 <td>{e.pasal}</td>
                                                 <td>{e.butir_pelanggaran}</td>
                                                 <td>{e.pelanggaran}</td>
-                                                <td contenteditable='true'>[Mohon Diisi]</td>
-                                                <td contenteditable='true'>[Mohon Diisi]</td>
+                                                <td>
+                                                    {descPelanggaran[e._id]?.simpulan}
+                                                    <input type='text'
+                                                        defaultValue=""
+                                                        onChange={(evt) => {
+                                                            this.updateValueSimpulan(evt, e._id), this.setDataSuratBA()
+                                                        }} />
+                                                </td>
+                                                <td >
+
+                                                    {descPelanggaran[e._id]?.rekomendasi}
+                                                    <input type='text'
+                                                        defaultValue=""
+                                                        onChange={(evt) => {
+                                                            this.updateValueRekomendasi(evt, e._id), this.setDataSuratBA()
+                                                        }} />
+                                                </td>
                                             </tr>
 
                                         )) ||
-
-                                            autoSaveDataPelanggaran?.map((e, i) => (
+                                            this.props.dataPelanggaran?.data?.map((e, i) => (
                                                 <tr key={e._id}>
                                                     <td>{++i}</td>
                                                     {dataLaporan.data && (<td className='BA-header'>{dataLaporan.data.pt.nama}</td>)}
                                                     <td>{e.pasal}</td>
                                                     <td>{e.butir_pelanggaran}</td>
                                                     <td>{e.pelanggaran}</td>
-                                                    <td contenteditable='true' onc>[Mohon Diisi]</td>
-                                                    <td contenteditable='true'>[Mohon Diisi]</td>
+                                                    <td >   {this.state?.descPelanggaran[e._id]?.simpulan}</td>
+                                                    <td >   {this.state?.descPelanggaran[e._id]?.rekomendasi}</td>
                                                 </tr>
 
                                             ))}
                                     </tbody>
                                 </table>
                                 <li>Temuan Lain:
-                                    {isEditTemuanLain ?
+                                    {dataSuratBA?.isEditTemuanLain ?
                                         <span>
                                             <input style={{ height: "30px", width: "250px" }} type='textarea' defaultValue={""} ref="inputTemuan"
                                             />
@@ -293,11 +332,11 @@ class BeritaAcara extends Component {
 
                                         : <Button onClick={this.isEditTemuanLain} className=" p-0 m-0" color="success">Input Data</Button>}
                                     <ol type="a">
-                                        {dataSuratBA?.temuanLain.map((value) => <li>{value}</li>) || autoSaveDataSuratBA?.temuanLain.map((value) => <li>{value}</li>)}
+                                        {dataSuratBA?.temuanLain.map((value) => <li>{value}</li>) || this.state?.temuanLain.map((value) => <li>{value}</li>)}
                                     </ol>
                                 </li>
                                 <li>Hal-hal yang memberatkan, sebagai berikut:
-                                    {isEditKeberatan ?
+                                    {dataSuratBA?.isEditKeberatan ?
                                         <span>
                                             <input style={{ height: "30px", width: "250px" }} type='text' defaultValue={""} ref="inputMemberatkan" />
                                             <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.updateValueMemberatkan(), this.isEditKeberatan() }} />
@@ -306,11 +345,11 @@ class BeritaAcara extends Component {
 
                                         : <Button onClick={this.isEditKeberatan} className=" p-0 m-0" color="success">Input Data</Button>}
                                     <ol type="a">
-                                        {dataSuratBA?.memberatkan.map((value) => <li>{value}</li>) || autoSaveDataSuratBA?.memberatkan.map((value) => <li>{value}</li>)}
+                                        {dataSuratBA?.memberatkan.map((value) => <li>{value}</li>) || this.state?.memberatkan.map((value) => <li>{value}</li>)}
                                     </ol>
                                 </li>
                                 <li>hal-hal yang meringankan, sebagai berikut:
-                                    {isEditMeringankan ?
+                                    {dataSuratBA?.isEditMeringankan ?
                                         <span>
                                             <input type='text' defaultValue={""} ref="inputMeringankan" />
                                             <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.updateValueMemringankan(), this.isEditMeringankan() }} />
@@ -319,12 +358,12 @@ class BeritaAcara extends Component {
 
                                         : <Button onClick={this.isEditMeringankan} className=" p-0 m-0" color="success">Input Data</Button>}
                                     <ol type="a">
-                                        {dataSuratBA?.meringankan.map((value) => <li>{value}</li>) || autoSaveDataSuratBA?.meringankan.map((value) => <li>{value}</li>)}
+                                        {dataSuratBA?.meringankan.map((value) => <li>{value}</li>) || this.state?.meringankan.map((value) => <li>{value}</li>)}
                                     </ol>
                                 </li>
                                 <li>
                                     Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong>“Sanksi Administratif berupa
-                                        {isEditSanksi &&
+                                        {dataSuratBA?.isEditSanksi &&
                                             <span>
                                                 <input type='text'
                                                     defaultValue=""
@@ -337,9 +376,9 @@ class BeritaAcara extends Component {
                                                 <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.isEditSanksi() }} />
                                             </span>
                                         }
-                                        {dataSuratBA?.sanksi || autoSaveDataSuratBA?.sanksi ?
+                                        {dataSuratBA?.sanksi || this.state?.sanksi ?
                                             <span onClick={this.isEditSanksi}>
-                                                &nbsp;{dataSuratBA?.sanksi || autoSaveDataSuratBA?.sanksi}
+                                                &nbsp;{dataSuratBA?.sanksi || this.state?.sanksi}
                                             </span>
                                             :
                                             <span onClick={this.isEditSanksi}>[Mohon Diisi]</span>

components/Sanksi/UploadSurat.js

@@ -354,7 +354,7 @@ export class UploadSurat extends Component {
 					<label className="col-md-2 col-form-label">List sanksi </label>
 					<div className="col-md-10">
 						<Select
-							options={this.props.listSanksi.map(e => ({ value: e, label: e }))}
+							options={this.props.listSanksi.map(e => ({ value: e, label: `Sanksi Administratif ${e.split(";")[0]} - ${e.split(";")[1]}` }))}
 							formatOptionLabel={formatOptionLabel}
 							isMulti
 							onChange={(e) => {

pages/app/sanksi/proses.js

@@ -36,7 +36,6 @@ class ProsesSanksi extends Component {
 			dataPelanggaran: {},
 			pelaporan: {},
 			listSanksi: [],
-			dataSave: {}
 		};
 	}
 
@@ -50,18 +49,20 @@ class ProsesSanksi extends Component {
 		const pelaporan = await getOneLaporan(token, id);
 		const { data: listSanksi } = await getPelanggaranSanksi(token)
 		const getDataSave = await getAutoSave({ id, laporan: true });
-		const autoSaveDataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
-		const autoSaveDataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran?.data;
-		this.setState({ pelaporan, listSanksi, autoSaveDataSuratBA, autoSaveDataPelanggaran });
+		const autoSaveDataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran;
+		this.setState({ pelaporan, listSanksi });
+		this.setState({ dataPelanggaran: autoSaveDataPelanggaran })
+
 	};
 
+
 	handleAutoSave = async (data) => {
 
 		const { query, token } = this.props;
 		const { id } = query;
+		this.setState({ dataSuratBA: data });
 		const { dataSuratBA, dataUpload } = this.state
 		await inputAutoSave({ data: { PenetapanSanksi: { dataSuratBA, dataUpload, dataPelanggaran: data } }, token, id, laporan: true })
-
 	}
 	done = async (e) => {
 		const toastid = toast.loading("Please wait...");
@@ -140,10 +141,11 @@ class ProsesSanksi extends Component {
 	};
 	setDataSuratBA = (data) => {
 		this.setState({ dataSuratBA: data });
+
 	};
 
 	render() {
-		const { dataUpload, dataPelanggaran, pelaporan, dataSuratBA, autoSaveDataSuratBA, autoSaveDataPelanggaran } = this.state;
+		const { dataUpload, dataPelanggaran, pelaporan, dataSuratBA, autoSaveDataPelanggaran } = this.state;
 		return (
 			<ContentWrapper unwrap>
 				{/* <Header /> */}
@@ -271,7 +273,7 @@ class ProsesSanksi extends Component {
 										<TabPane tabId="3">
 											<div className="pt-3 mb-3">
 												<h2>Penetapan Jenis Pelanggaran</h2>
-												<TablePenetapanSanksi query={this.props.query} handleDelegasi={this.handleDelegasi} handleAutoSave={this.handleAutoSave} setCheckedData={this.setCheckedData} dataPelanggaran={dataPelanggaran.data} />
+												<TablePenetapanSanksi query={this.props.query} handleDelegasi={this.handleDelegasi} handleAutoSave={this.handleAutoSave} setCheckedData={this.setCheckedData} dataPelanggaran={dataPelanggaran} />
 											</div>
 											<hr />
 											<div className="d-flex">
@@ -285,7 +287,7 @@ class ProsesSanksi extends Component {
 										</TabPane>
 										<TabPane tabId="4">
 											<Card>
-												<BeritaAcara query={this.props.query} handleAutoSave={this.handleAutoSave} dataPelanggaran={dataPelanggaran.data} setDataSuratBA={this.setDataSuratBA} dataLaporan={pelaporan} dataSuratBA={dataSuratBA} />
+												<BeritaAcara query={this.props.query} handleAutoSave={this.handleAutoSave} dataPelanggaran={this.state.dataPelanggaran} setDataSuratBA={this.setDataSuratBA} dataLaporan={pelaporan} dataSuratBA={dataSuratBA} />
 											</Card>
 											<div className="d-flex">
 												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("3")}>
@@ -299,7 +301,7 @@ class ProsesSanksi extends Component {
 										<TabPane tabId="5">
 											<div className="pt-3 mb-3">
 												<h2>Penetapan Sanksi</h2>
-												{this.state.listSanksi && <UploadSurat setUploadSuratSanksi={this.setUploadSuratSanksi} listSanksi={this.state.listSanksi} dataPelanggaran={dataPelanggaran.data} query={this.props.query} handleAutoSave={this.handleAutoSave} />}
+												{this.state.listSanksi && <UploadSurat setUploadSuratSanksi={this.setUploadSuratSanksi} listSanksi={this.state.listSanksi} dataPelanggaran={dataPelanggaran?.data} query={this.props.query} handleAutoSave={this.handleAutoSave} />}
 											</div>
 											<hr />
 											<div className="d-flex">
@@ -314,7 +316,7 @@ class ProsesSanksi extends Component {
 										<TabPane tabId="6">
 											<div className="pt-3 mb-3">
 												<h2>Ringkasan</h2>
-												{pelaporan.data ? <Ringkasan dataLaporan={pelaporan.data} autoSaveDataPelanggaran={autoSaveDataPelanggaran} dataPelanggaran={dataPelanggaran.data} dataUpload={dataUpload} /> : <Loader />}
+												{pelaporan.data ? <Ringkasan dataLaporan={pelaporan.data} autoSaveDataPelanggaran={autoSaveDataPelanggaran} dataPelanggaran={dataPelanggaran?.data} dataUpload={dataUpload} /> : <Loader />}
 											</div>
 											<hr />
 											<div className="d-flex">

styles/app/app/mycss.scss

@@ -18,6 +18,7 @@
     #video-css video{
         width: 450px;
         margin-right: -10px;
+        margin-top: 30px;
     
     }
     #video-css img{