update state store

This commit is contained in:
dmsanhrProject 2025-11-05 09:34:59 +07:00
parent ec9e505ea0
commit 023578555e
5 changed files with 32 additions and 17 deletions

View File

@ -1,6 +1,6 @@
import { useState } from "react"; import { useState } from "react";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { setFile, setResult, setValidatedData } from "../../../store/slices/uploadSlice"; import { setFile, setResult, setValidatedData, setPdfPageCount, setSelectedPages } from "../../../store/slices/uploadSlice";
import { uploadFile, uploadPdf, saveToDatabase } from "./service_admin_upload"; import { uploadFile, uploadPdf, saveToDatabase } from "./service_admin_upload";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import * as pdfjsLib from "pdfjs-dist"; import * as pdfjsLib from "pdfjs-dist";
@ -11,18 +11,16 @@ pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
import * as XLSX from 'xlsx'; import * as XLSX from 'xlsx';
// pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
export function useUploadController() { export function useUploadController() {
const dispatch = useDispatch(); const dispatch = useDispatch();
const navigate = useNavigate(); const navigate = useNavigate();
const { file, result } = useSelector((state) => state.upload); const { file, result, pdfPageCount, selectedPages } = useSelector((state) => state.upload);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [selectedTable, setSelectedTable] = useState(null); const [selectedTable, setSelectedTable] = useState(null);
const [selectedPages, setSelectedPages] = useState(""); // const [selectedPages, setSelectedPages] = useState("");
const [tableTitle, setTableTitle] = useState(""); const [tableTitle, setTableTitle] = useState("");
const [pdfPageCount, setPdfPageCount] = useState(null); // const [pdfPageCount, setPdfPageCount] = useState(null);
const [selectedSheet, setSelectedSheet] = useState(null); const [selectedSheet, setSelectedSheet] = useState(null);
const [sheetCount, setSheetCount] = useState(null); const [sheetCount, setSheetCount] = useState(null);
const [sheetNames, setSheetNames] = useState([]); const [sheetNames, setSheetNames] = useState([]);
@ -38,7 +36,8 @@ export function useUploadController() {
reader.onload = async (e) => { reader.onload = async (e) => {
const typedArray = new Uint8Array(e.target.result); const typedArray = new Uint8Array(e.target.result);
const pdf = await pdfjsLib.getDocument({ data: typedArray }).promise; const pdf = await pdfjsLib.getDocument({ data: typedArray }).promise;
setPdfPageCount(pdf.numPages); // setPdfPageCount(pdf.numPages);
dispatch(setPdfPageCount(pdf.numPages));
console.log(`📄 PDF terdeteksi dengan ${pdf.numPages} halaman`); console.log(`📄 PDF terdeteksi dengan ${pdf.numPages} halaman`);
}; };
reader.readAsArrayBuffer(f); reader.readAsArrayBuffer(f);
@ -47,9 +46,6 @@ export function useUploadController() {
} }
} }
else if (ext === "xlsx" || ext === "xls") { else if (ext === "xlsx" || ext === "xls") {
// const data = await f.arrayBuffer();
// const workbook = XLSX.read(data, { type: 'array' });
// const sheetNames = workbook.SheetNames;
const data = await f.arrayBuffer(); const data = await f.arrayBuffer();
const workbook = XLSX.read(data, { type: 'array' }); const workbook = XLSX.read(data, { type: 'array' });
const sheetNames = workbook.SheetNames; const sheetNames = workbook.SheetNames;
@ -58,7 +54,8 @@ export function useUploadController() {
setSheetNames(sheetNames); setSheetNames(sheetNames);
} }
else { else {
setPdfPageCount(null); // setPdfPageCount(null);
dispatch(setPdfPageCount(null));
} }
}; };
@ -67,6 +64,7 @@ export function useUploadController() {
if (!file) return; if (!file) return;
setLoading(true); setLoading(true);
try { try {
console.log(selectedPages);
const res = await uploadFile(file, selectedPages, selectedSheet); const res = await uploadFile(file, selectedPages, selectedSheet);
dispatch(setResult(res)); dispatch(setResult(res));

View File

@ -30,7 +30,9 @@ export async function uploadFile(file, page = null, sheet = null) {
const formData = new FormData(); const formData = new FormData();
formData.append("file", file); formData.append("file", file);
formData.append("page", page); formData.append("page", page);
if (sheet != null) {
formData.append("sheet", sheet); formData.append("sheet", sheet);
}
try { try {
const response = await api.post("/upload", formData, { const response = await api.post("/upload", formData, {

View File

@ -1,9 +1,11 @@
import { useUploadController } from "./controller_admin_upload"; import { useUploadController } from "./controller_admin_upload";
import { useDispatch } from "react-redux";
import FileDropzone from "../../../components/FileDropzone"; import FileDropzone from "../../../components/FileDropzone";
import PdfPageSelector from "../../../components/PdfPageSelector"; import PdfPageSelector from "../../../components/PdfPageSelector";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
export default function ViewsAdminUploadStep1() { export default function ViewsAdminUploadStep1() {
const dispatch = useDispatch();
const { const {
loading, loading,
file, file,
@ -24,7 +26,8 @@ export default function ViewsAdminUploadStep1() {
const handlePageSelection = (pages) => { const handlePageSelection = (pages) => {
console.log("Halaman PDF yang dipilih:", pages); console.log("Halaman PDF yang dipilih:", pages);
setSelectedPages(pages); // setSelectedPages(pages);
dispatch(setSelectedPages(pages));
}; };
const ext = file ? file.name.split(".").pop().toLowerCase() : ""; const ext = file ? file.name.split(".").pop().toLowerCase() : "";
@ -106,10 +109,13 @@ export default function ViewsAdminUploadStep1() {
<div className={`mt-6 flex justify-center ${(result && result.file_type === ".pdf" && result.tables?.length > 1) ? 'hidden' : 'block' }`}> <div className={`mt-6 flex justify-center ${(result && result.file_type === ".pdf" && result.tables?.length > 1) ? 'hidden' : 'block' }`}>
<button <button
onClick={handleUpload} onClick={handleUpload}
disabled={loading || (result && result.file_type === ".pdf" && result.tables?.length > 1) || (ext === "pdf" && pdfPageCount > 3 && selectedPages === "")} disabled={
loading ||
(result && result.file_type === ".pdf" && result.tables?.length > 1) ||
(ext === "pdf" && pdfPageCount > 3 && (selectedPages === "" || selectedPages == null))}
className="w-full px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition" className="w-full px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition"
> >
{loading ? "Mengunggah..." : "Upload"} {loading ? "Mengunggah..." : "Process"}
</button> </button>
</div> </div>
</div> </div>

View File

@ -2,7 +2,8 @@ import axios from "axios";
import { getToken } from "../utils/auth"; import { getToken } from "../utils/auth";
const api = axios.create({ const api = axios.create({
baseURL: "http://labai.polinema.ac.id:808", // baseURL: "http://labai.polinema.ac.id:808",
baseURL: "http://localhost:8000",
}); });
api.interceptors.request.use((config) => { api.interceptors.request.use((config) => {

View File

@ -4,6 +4,8 @@ const initialState = {
file: null, file: null,
result: null, result: null,
validatedData: null, validatedData: null,
pdfPageCount: null,
selectedPages: null
}; };
const uploadSlice = createSlice({ const uploadSlice = createSlice({
@ -19,6 +21,12 @@ const uploadSlice = createSlice({
setValidatedData: (state, action) => { setValidatedData: (state, action) => {
state.validatedData = action.payload; state.validatedData = action.payload;
}, },
setPdfPageCount: (state, action) => {
state.pdfPageCount = action.payload;
},
setSelectedPages: (state, action) => {
state.selectedPages = action.payload;
},
reset: (state) => { reset: (state) => {
state.file = null; state.file = null;
state.result = null; state.result = null;
@ -27,5 +35,5 @@ const uploadSlice = createSlice({
}, },
}); });
export const { setFile, setResult, setValidatedData, reset } = uploadSlice.actions; export const { setFile, setResult, setValidatedData, reset, setPdfPageCount, setSelectedPages } = uploadSlice.actions;
export default uploadSlice.reducer; export default uploadSlice.reducer;