import { Button, Input, Select, Option, Typography, List, ListItem, Autocomplete } from "@mui/joy"; import React, { useRef, useState } from "react"; import { useResourceStore } from "../store/module"; import Icon from "./Icon"; import toastHelper from "./Toast"; import { generateDialog } from "./Dialog"; const fileTypeAutocompleteOptions = ["image/*", "text/*", "audio/*", "video/*", "application/*"]; interface Props extends DialogProps { onCancel?: () => void; onConfirm?: (resourceList: Resource[]) => void; } type SelectedMode = "local-file" | "external-link"; interface State { selectedMode: SelectedMode; uploadingFlag: boolean; } const CreateResourceDialog: React.FC = (props: Props) => { const { destroy, onCancel, onConfirm } = props; const resourceStore = useResourceStore(); const [state, setState] = useState({ selectedMode: "local-file", uploadingFlag: false, }); const [resourceCreate, setResourceCreate] = useState({ filename: "", externalLink: "", type: "", }); const [fileList, setFileList] = useState([]); const fileInputRef = useRef(null); const handleCloseDialog = () => { if (onCancel) { onCancel(); } destroy(); }; const handleSelectedModeChanged = (mode: "local-file" | "external-link") => { setState((state) => { return { ...state, selectedMode: mode, }; }); }; const handleExternalLinkChanged = (event: React.ChangeEvent) => { const externalLink = event.target.value; setResourceCreate((state) => { return { ...state, externalLink, }; }); }; const handleFileNameChanged = (event: React.ChangeEvent) => { const filename = event.target.value; setResourceCreate((state) => { return { ...state, filename, }; }); }; const handleFileTypeChanged = (fileType: string) => { setResourceCreate((state) => { return { ...state, type: fileType, }; }); }; const handleFileInputChange = async () => { if (!fileInputRef.current || !fileInputRef.current.files) { return; } const files: File[] = []; for (const file of fileInputRef.current.files) { files.push(file); } setFileList(files); }; const allowConfirmAction = () => { if (state.selectedMode === "local-file") { if (!fileInputRef.current || !fileInputRef.current.files || fileInputRef.current.files.length === 0) { return false; } } else if (state.selectedMode === "external-link") { if (resourceCreate.filename === "" || resourceCreate.externalLink === "" || resourceCreate.type === "") { return false; } } return true; }; const handleConfirmBtnClick = async () => { if (state.uploadingFlag) { return; } setState((state) => { return { ...state, uploadingFlag: true, }; }); const createdResourceList: Resource[] = []; try { if (state.selectedMode === "local-file") { if (!fileInputRef.current || !fileInputRef.current.files) { return; } for (const file of fileInputRef.current.files) { const resource = await resourceStore.createResourceWithBlob(file); createdResourceList.push(resource); } } else { const resource = await resourceStore.createResource(resourceCreate); createdResourceList.push(resource); } } catch (error: any) { console.error(error); toastHelper.error(error.response.data.message); } if (onConfirm) { onConfirm(createdResourceList); } destroy(); }; return ( <>

Create Resource

Upload method {state.selectedMode === "local-file" && ( <>
{fileList.map((file) => ( {file.name} ))} )} {state.selectedMode === "external-link" && ( <> Link File name Type handleFileTypeChanged(value || "")} /> )}
); }; function showCreateResourceDialog(props: Omit) { generateDialog( { dialogName: "create-resource-dialog", }, CreateResourceDialog, props ); } export default showCreateResourceDialog;