tambah keterangan di perubahan status laporan

components/Extras/calendar.view.js

@@ -38,6 +38,11 @@ const jadwalSchema = Yup.object().shape({
 	dari_tanggal: Yup.date().required("Required"),
 	sampai_tanggal: Yup.date().required("Required"),
 });
+
+const laporanSchema = Yup.object().shape({
+	keterangan: Yup.string().required("Harus diisi"),
+});
+
 class Calendar extends Component {
 	calendarPlugins = [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, bootstrapPlugin];
 
@@ -74,7 +79,7 @@ class Calendar extends Component {
 		this.defaultStatus();
 		this.setState({ laporan });
 
-		let color = "#" + Math.floor(Math.random() * 16777215).toString(16);
+		let color = "#" + Math.random().toString(16).slice(2, 8);
 		if (laporan.data.jadwal) {
 			color = laporan.data.jadwal.warna;
 		}
@@ -145,24 +150,26 @@ class Calendar extends Component {
 
 	handleChangeSelect = (selectedOption) => this.setState({ selectedOption });
 
-	handleSimpan = async (e) => {
-		const { selectedOption } = this.state;
+	handleSimpan = async (value) => {
 		const { token, query } = this.props;
 		const { id } = query;
 		let update = null;
-		this.setState({ selectedOption });
-		const toastid = toast.loading("Please wait...");
-		if (selectedOption.value === this.getStatus()[1].value) {
-			update = await updateLaporan(token, id, { change_role: "true" });
-		} else if (selectedOption.value === this.getStatus()[2].value) {
-			update = await updateLaporan(token, id, { aktif: "false" });
-		}
-
-		if (!update) {
-			toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
-		} else {
-			toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
-			Router.push("/app/penjadwalan");
+		if (value.status.value === this.getStatus()[1].value || value.status.value === this.getStatus()[2].value) {
+			const toastid = toast.loading("Please wait...");
+			const data = { keterangan: value.keterangan };
+			if (value.status.value === this.getStatus()[1].value) {
+				data.change_role = "true";
+				update = await updateLaporan(token, id, data);
+			} else if (value.status.value === this.getStatus()[2].value) {
+				data.aktif = "false";
+				update = await updateLaporan(token, id, data);
+			}
+			if (!update) {
+				toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
+			} else {
+				toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
+				Router.push("/app/penjadwalan");
+			}
 		}
 	};
 
@@ -205,12 +212,51 @@ class Calendar extends Component {
 											<h2 class="card-title-1">Status Pelaporan</h2>
 										</div>
 										<CardBody>
-											<Select value={selectedOption} onChange={this.handleChangeSelect} options={this.getStatus()} required />
-											<div className="btn-simpanjadwal">
-												<Button onClick={this.handleSimpan} className="text-btn-penjadwalan-1 btn-colorpenjadwalan" color="primary" block disabled={laporan.data?.evaluasi.length}>
-													<h4 className="text-btn-penjadwalan-1">Simpan</h4>
-												</Button>
-											</div>
+											<Formik
+												enableReinitialize={true}
+												initialValues={{
+													status: this.getStatus()[0],
+													keterangan: "",
+												}}
+												validationSchema={selectedOption?.value === this.getStatus()[2].value || selectedOption?.value === this.getStatus()[1].value ? laporanSchema : null}
+												onSubmit={this.handleSimpan}
+											>
+												{() => (
+													<Form>
+														<FormGroup>
+															<label className="col-form-label">Status Laporan</label>
+															<Field name="status">
+																{({ field, form }) => (
+																	<Select
+																		value={field.value}
+																		onChange={(e) => {
+																			form.setFieldValue(field.name, e);
+																			this.handleChangeSelect(e);
+																		}}
+																		options={this.getStatus()}
+																		required
+																	/>
+																)}
+															</Field>
+															<ErrorMessage name="status" component="div" className="form-text text-danger" />
+														</FormGroup>
+														{selectedOption?.value === this.getStatus()[0].value ? (
+															""
+														) : (
+															<FormGroup>
+																<label className="col-form-label">Keterangan</label>
+																<Field name="keterangan">{({ field, form }) => <Input type="text" placeholder="Keterangan" {...field} />}</Field>
+																<ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
+															</FormGroup>
+														)}
+														<div className="btn-simpanjadwal">
+															<Button className="text-btn-penjadwalan-1 btn-colorpenjadwalan" color="primary" block disabled={laporan.data?.evaluasi.length}>
+																<h4 className="text-btn-penjadwalan-1">Simpan</h4>
+															</Button>
+														</div>
+													</Form>
+												)}
+											</Formik>
 										</CardBody>
 									</Card>
 									{selectedOption?.value === this.getStatus()[2].value || selectedOption?.value === this.getStatus()[1].value ? (