diff --git a/src/page/LaporanDetail/LaporanDetail.css b/src/page/LaporanDetail/LaporanDetail.css
index e0caf2fb040beff280b16924c30f011965291426..875ba2030395f123411850257b9cdc91690e9609 100644
--- a/src/page/LaporanDetail/LaporanDetail.css
+++ b/src/page/LaporanDetail/LaporanDetail.css
@@ -34,3 +34,72 @@
.img-detail{
height: 350px;
}
+
+.modal {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ padding: 0px 20px;
+ font-family: 'DM Sans', sans-serif;
+ border-radius: 10px;
+ box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
+}
+
+.modal .modal-dialog {
+ max-width: 600px !important;
+}
+
+.modal-header {
+ font-size: 30px;
+ margin-top: 16px;
+ margin-bottom: -5px;
+ padding: 15px 30px;
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ border-bottom: 0 none;
+}
+
+#investasi {
+ color: #E94745;
+}
+
+button.close {
+ color: #fc383f;
+ font-size: 40px;
+}
+
+button.close:hover {
+ color: #FA595F;
+}
+
+.modal-body {
+ padding: 10px 30px;
+}
+
+.modal-body > form {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 3;
+}
+
+.modal-body > form > input {
+ width: 100%;
+ padding: 10px 15px;
+ border-radius: 5px;
+ border: 0.7px solid black;
+}
+
+.modal-body > form > label {
+ font-weight: 500;
+ font-size: 15px;
+ line-height: 10px;
+}
+
+#space {
+ padding: 10px;
+}
+
+.modal-footer {
+ border-top: 0 none;
+ padding: 20px 30px;
+}
diff --git a/src/page/LaporanDetail/LaporanDetail.js b/src/page/LaporanDetail/LaporanDetail.js
index 29270bc368ee0bf4516f5a2a231b35b9d15814f4..60e0531a1a0199a1989ddca9adff1c307914786b 100644
--- a/src/page/LaporanDetail/LaporanDetail.js
+++ b/src/page/LaporanDetail/LaporanDetail.js
@@ -4,15 +4,20 @@ import { Redirect } from 'react-router-dom';
import axios from 'axios';
import { useState, useEffect } from 'react';
import { ChevronLeft } from 'react-feather';
+import {Modal} from 'react-bootstrap';
+import React from 'react';
const LaporanDetail = ({ isAuthenticated, match, user }) => {
- const [registered, setRegister] = useState(false);
const [laporan, setLaporan] = useState({});
const [detail, setDetail] = useState({});
const [formData, setFormData] = useState({
laporanFeedback: ''
});
-
+ const [showModal, setShowModal] = useState(false);
+ const handleClose = () => setShowModal(false);
+ const handleOpen = () => {
+ setShowModal(true);
+ }
const configGet = {
headers: {
'Content-Type': 'multipart/form-data',
@@ -26,6 +31,11 @@ const LaporanDetail = ({ isAuthenticated, match, user }) => {
}
};
+ const {
+ laporanFeedback
+ } = formData;
+
+
const handleAssign = async () => {
await axios.patch(`${process.env.REACT_APP_BACKEND_API_URL}/api/laporan/${match.params.pk}/assign/`, {}, configPut);
setTimeout('window.location.href="/operator"', 0);
@@ -60,11 +70,7 @@ const LaporanDetail = ({ isAuthenticated, match, user }) => {
}
}
- const {
- laporanFeedback
- } = formData;
-
- const onChange = e => setFormData({ ...formData, [e.target.name]: e.target.value});
+ const onChange = e => setFormData({ ...formData, [e.target.name]: e.target.value});
const postLaporanFeedback = async () => {
if (localStorage.getItem('access')) {
@@ -77,14 +83,12 @@ const LaporanDetail = ({ isAuthenticated, match, user }) => {
'Authorization': `JWT ${localStorage.getItem('access')}`,
}
};
-
formDataToSend.append('laporan', laporan.pk);
formDataToSend.append('deskripsi', laporanFeedback);
await axios.post(`${process.env.REACT_APP_BACKEND_API_URL}/api/feedback/`, formDataToSend, config)
.then((response) => {
console.log(response);
alert('Feedback telah ditambahkan');
- setRegister(true);
}, (error) => {
if (error.response) {
@@ -164,33 +168,37 @@ const LaporanDetail = ({ isAuthenticated, match, user }) => {
}
{laporan.status === "ASG" && <>
- <div className="wkd-home-sect-3-container">
- <div className="wkd-home-banner-card"
- style={{
- borderRadius: '7px'
- }}
- >
- <form id="d-t-form" className="centered">
- <div className="justify-content-center">
- <div className="form-group row">
- <label htmlFor='laporanFeedback' className="col-sm-3 col-form-label"> <span className="required"> * </span> Laporan Feedback </label>
- <div className="col-sm-9">
- <input
- id='laporanFeedback'
- className='form-control'
- type='text'
- placeholder='Tuliskan hal yang sudah dikerjakan'
- name='laporanFeedback'
- value={laporanFeedback}
- onChange={e => onChange(e)}
- required
- />
- </div>
+ <div>
+ <button className="lap-detail-button lap-blue-button" onClick={handleOpen} data-testid="btn-feedback">Feedback</button>
+ <Modal show={showModal} onHide={handleClose} data-testid="popup" centered>
+ <Modal.Header closeButton>
+ <p>Feedback <span className="jual-red">Laporan</span></p>
+ </Modal.Header>
+ <Modal.Body>
+ <form id="d-t-form" className="centered">
+ <div className="justify-content-center">
+ <div className="form-group row">
+ <label htmlFor='laporanFeedback' className="col-sm-3 col-form-label"> <span className="required"> * </span> Laporan Feedback </label>
+ <div className="col-sm-9">
+ <input
+ id='laporanFeedback'
+ className='form-control'
+ type='text'
+ placeholder='Tuliskan hal yang sudah dikerjakan'
+ name='laporanFeedback'
+ value={laporanFeedback}
+ onChange={e => onChange(e)}
+ required
+ />
</div>
</div>
- </form>
- <button id="d-t-simpan" className="lap-detail-button lap-blue-button" onClick={() => postLaporanFeedback()}>Simpan</button>
- </div>
+ </div>
+ </form>
+ </Modal.Body>
+ <Modal.Footer>
+ <button className="lap-detail-button lap-blue-button" onClick={() => postLaporanFeedback()}><span>Simpan</span></button>
+ </Modal.Footer>
+ </Modal>
</div>
<br></br>
<button data-testid="m-i-buat-1" className="lap-detail-button lap-blue-border-button mx-2" onClick={() => handleRefuse()}><span>Batalkan</span></button>