stage two See merge request spatial/postamates_frontend!35dev
Timofey Malinin
2 years ago
commit
3134a672c7
@ -0,0 +1,45 @@
|
||||
import { useLayoutEffect, useRef, useState } from "react";
|
||||
import { uploadPointsFile } from "../../api.js";
|
||||
import { Button, Upload } from "antd";
|
||||
import { UploadOutlined } from "@ant-design/icons";
|
||||
|
||||
export const LoadingStage = ({setFileId}) => {
|
||||
const ref = useRef(null);
|
||||
const [isClicked, setIsClicked] = useState(true);
|
||||
|
||||
const onFileChange = async (options) => {
|
||||
const { onSuccess, onError, file, onProgress } = options;
|
||||
const config = {
|
||||
onUploadProgress: event => {
|
||||
const percent = Math.floor((event.loaded / event.total) * 100);
|
||||
onProgress({ percent });
|
||||
}
|
||||
};
|
||||
try {
|
||||
const {id} = await uploadPointsFile(file, config);
|
||||
onSuccess("Ok");
|
||||
setFileId(id);
|
||||
} catch (e) {
|
||||
//
|
||||
}
|
||||
};
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (ref && ref.current && !isClicked) {
|
||||
ref.current.click();
|
||||
setIsClicked(true);
|
||||
}
|
||||
}, [isClicked]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Upload
|
||||
name='file'
|
||||
accept='application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml'
|
||||
customRequest={onFileChange}
|
||||
>
|
||||
<Button icon={<UploadOutlined />}>Выбрать файл .xlsx</Button>
|
||||
</Upload>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,91 @@
|
||||
import { Button, Modal, Spin } from "antd";
|
||||
import { useState } from "react";
|
||||
import { importPoints } from "../../api.js";
|
||||
import { LoadingStage } from "./LoadingStage.jsx";
|
||||
import { ReportStage } from "./ReportStage.jsx";
|
||||
import { CheckCircleOutlined, LoadingOutlined } from "@ant-design/icons";
|
||||
|
||||
export const OnLoadModal = ({onClose, isOpened}) => {
|
||||
const [fileId, setFileId] = useState();
|
||||
const [report, setReport] = useState();
|
||||
const [isImporting, setIsImporting] = useState(false);
|
||||
const [isReportStage, setIsReportStage] = useState(false);
|
||||
|
||||
const onImportPoints = async () => {
|
||||
setIsImporting(true);
|
||||
try {
|
||||
const { message } = await importPoints(fileId);
|
||||
setReport(message);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
} finally {
|
||||
setIsImporting(false);
|
||||
}
|
||||
}
|
||||
|
||||
const getFooter = () => {
|
||||
if (isReportStage) return [
|
||||
<Button
|
||||
key="finish-button"
|
||||
type="primary"
|
||||
onClick={onClose}
|
||||
>
|
||||
Перейти к выбору
|
||||
</Button>
|
||||
]
|
||||
if (report) return [
|
||||
<Button
|
||||
key="report-button"
|
||||
type="primary"
|
||||
onClick={() => setIsReportStage(true)}
|
||||
>
|
||||
Просмотреть отчет
|
||||
</Button>
|
||||
]
|
||||
return [
|
||||
<Button
|
||||
key="close-button"
|
||||
type="default"
|
||||
onClick={onClose}
|
||||
>
|
||||
Отмена
|
||||
</Button>,
|
||||
<Button
|
||||
key="ok-button"
|
||||
type="primary"
|
||||
onClick={() => onImportPoints()}
|
||||
disabled={!fileId || isImporting}
|
||||
>
|
||||
Импортировать
|
||||
</Button>,
|
||||
]
|
||||
}
|
||||
const getContent = () => {
|
||||
if (isImporting) return (
|
||||
<div className="flex flex-col justify-center gap-2 items-center">
|
||||
<Spin indicator={<LoadingOutlined style={{ fontSize: 64}} spin />} />
|
||||
Импортируем точки...
|
||||
</div>
|
||||
);
|
||||
if (isReportStage) return <ReportStage report={report} />;
|
||||
if (report) return (
|
||||
<div className="flex items-center justify-center font-bold gap-2">
|
||||
<CheckCircleOutlined style={{ fontSize: 24, color: "#52C41A" }} />
|
||||
Точки успешно импортированы
|
||||
</div>
|
||||
);
|
||||
return <LoadingStage setFileId={setFileId} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={isOpened}
|
||||
title="Импорт точек"
|
||||
onCancel={onClose}
|
||||
width={400}
|
||||
footer={getFooter()}
|
||||
>
|
||||
{getContent()}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,57 @@
|
||||
import { useMode } from "../../stores/useMode.js";
|
||||
import { Button } from "antd";
|
||||
import { ImportOutlined } from "@ant-design/icons";
|
||||
import { OnLoadModal } from "./OnLoadModal.jsx";
|
||||
import { useState } from "react";
|
||||
import { AddPointsModal } from "./AddPointsModal.jsx";
|
||||
import { MODES } from "../../config.js";
|
||||
|
||||
export const ImportModeSidebarButtons = () => {
|
||||
const { mode, isImportMode, setImportMode } = useMode();
|
||||
const [loadModalOpen, setLoadModalOpen] = useState(false);
|
||||
const [addPointsModalOpen, setAddPointsModalOpen] = useState(false);
|
||||
|
||||
const onCancel = () => {
|
||||
setImportMode(false);
|
||||
};
|
||||
|
||||
const onImport = () => {
|
||||
setImportMode(true);
|
||||
setLoadModalOpen(true);
|
||||
};
|
||||
|
||||
if (isImportMode) {
|
||||
return (
|
||||
<div className="flex flex-row flex-0 gap-2 border-t-[1px] border-b-[1px]">
|
||||
<Button type="default" onClick={onCancel}>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button type="primary" className="flex-1" onClick={() => setAddPointsModalOpen(true)}>
|
||||
Добавить в базу
|
||||
</Button>
|
||||
{loadModalOpen &&
|
||||
<OnLoadModal
|
||||
isOpened={loadModalOpen}
|
||||
onClose={() => setLoadModalOpen(false)}
|
||||
/>
|
||||
}
|
||||
{addPointsModalOpen &&
|
||||
<AddPointsModal
|
||||
isOpened={addPointsModalOpen}
|
||||
onClose={() => setAddPointsModalOpen(false)}
|
||||
/>
|
||||
}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return mode === MODES.PENDING && (
|
||||
<div className="flex flex-col flex-0 border-t-[1px] border-b-[1px]">
|
||||
<Button type="default" onClick={onImport}>
|
||||
<ImportOutlined />
|
||||
Импортировать
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in new issue