MIF_E31212365/resources/js/Pages/Admin/InputMateri.jsx

148 lines
5.4 KiB
JavaScript

import React, { useState } from "react";
import AdminLayout from "./Layout/AdminLayout";
import MDEditor from "@uiw/react-md-editor";
import { Link } from "@inertiajs/react";
import Swal from "sweetalert2";
import HitApi from "../../Utils/HitApi";
const InputMateri = (props) => {
const { data } = props;
const [form, setForm] = useState({
materi: data.materi ?? "",
video: data.video ?? "",
fileVideo: undefined,
});
const handleSubmit = (e) => {
e.preventDefault();
Swal.fire({
title: "Konfirmasi",
text: "Apakah anda yakin ingin menyimpan data?",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Ya",
}).then((result) => {
if (result.isConfirmed) {
Swal.fire({
title: "Loading",
html: '<div class="body-loading"><div class="loadingspinner"></div></div>', // add html attribute if you want or remove
allowOutsideClick: false,
showConfirmButton: false,
});
if (form.fileVideo) {
const formData = new FormData();
formData.append("file", form.fileVideo);
formData.append("id", data.id);
formData.append("video", form.video);
formData.append("materi", form.materi);
HitApi({
url: "/api/v1/materi/input",
method: "POST",
body: formData,
onSuccess: (res) => {
Swal.fire(
"Berhasil",
"Data berhasil disimpan",
"success"
);
},
onError: () => {
// Swal.fire("Gagal", "Data gagal ditambahkan", "error");
},
isFormData: true,
});
} else {
HitApi({
url: "/api/v1/materi/input",
method: "POST",
body: { ...form, id: data.id },
onSuccess: () => {
Swal.fire(
"Berhasil",
"Data berhasil disimpan",
"success"
);
},
onError: () => {
// Swal.fire("Gagal", "Data gagal ditambahkan", "error");
},
});
}
}
});
};
return (
<AdminLayout title="Materi">
<form onSubmit={handleSubmit} className="flex flex-col w-full">
{/* <div className="text-xs breadcrumbs mb-2">
<ul>
<li>
<Link href="/admin/materi">SD</Link>
</li>
<li>
<Link href="/admin/materi/detail">Matematika</Link>
</li>
<li>Input Materi</li>
</ul>
</div> */}
<h1 className="py-3 font-semibold text-lg">
Judul: {data.name}
</h1>
<MDEditor
value={form.materi}
highlightEnable={false}
minHeight={"100%"}
onChange={(e) => setForm({ ...form, materi: e })}
/>
<label className="form-control w-full mt-3">
<div className="label">
<span className="label-text font-semibold">
Input Video
</span>
</div>
<input
value={form.video}
onChange={(e) =>
setForm({ ...form, video: e.target.value })
}
type="text"
placeholder="Type here"
className="input input-bordered w-full"
/>
</label>
<label className="form-control w-full mt-3">
<div className="label">
<span className="label-text font-semibold">
Upload Video
</span>
</div>
<input
accept="video/*"
type="file"
onChange={(e) =>
setForm({ ...form, fileVideo: e.target.files[0] })
}
className="file-input file-input-bordered w-full max-w-xs"
/>
</label>
<div className="flex flex-row justify-start mt-4">
<button type="submit" className="btn btn-primary">
Simpan
</button>
</div>
</form>
</AdminLayout>
);
};
export default InputMateri;