66 lines
4.4 KiB
JavaScript

import Alert from "@mui/material/Alert";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import MenuItem from "@mui/material/MenuItem";
import Stack from "@mui/material/Stack";
import TextField from "@mui/material/TextField";
import { useEffect, useState } from "react";
import { useExternalI18n } from "../i18n/ExternalI18nProvider.jsx";
export function ResourceGrantDialog({ loading, onClose, onSubmit, open, resources }) {
const { t } = useExternalI18n();
const [form, setForm] = useState(resourceGrantInitial);
useEffect(() => setForm(resourceGrantInitial), [open]);
return (
<GrantDialog loading={loading} open={open} title={t("grants.resourceTitle")} onClose={onClose} onSubmit={() => onSubmit(form)}>
<TargetNotice />
<TextField disabled={loading} label={t("grants.target")} required value={form.target} onChange={(event) => setForm({ ...form, target: event.target.value.trim() })} />
<TextField disabled={loading} label={t("grants.resource")} required select value={form.resourceId} onChange={(event) => setForm({ ...form, resourceId: event.target.value })}>
{resources.map((item) => <MenuItem key={item.id} value={item.id}>{item.name} ({item.id})</MenuItem>)}
</TextField>
<TextField disabled={loading} label={t("grants.quantity")} required slotProps={{ htmlInput: { min: 1 } }} type="number" value={form.quantity} onChange={(event) => setForm({ ...form, quantity: event.target.value })} />
<TextField disabled={loading} helperText={t("grants.permanentHint")} label={t("grants.validDays")} required slotProps={{ htmlInput: { min: 0 } }} type="number" value={form.durationDays} onChange={(event) => setForm({ ...form, durationDays: event.target.value })} />
<TextField disabled={loading} label={t("grants.reason")} minRows={2} multiline required value={form.reason} onChange={(event) => setForm({ ...form, reason: event.target.value })} />
</GrantDialog>
);
}
export function PrettyIdGrantDialog({ loading, onClose, onSubmit, open }) {
const { t } = useExternalI18n();
const [form, setForm] = useState(prettyGrantInitial);
useEffect(() => setForm(prettyGrantInitial), [open]);
return (
<GrantDialog loading={loading} open={open} title={t("grants.prettyIdTitle")} onClose={onClose} onSubmit={() => onSubmit(form)}>
<TargetNotice />
<TextField disabled={loading} label={t("grants.currentTarget")} required value={form.target} onChange={(event) => setForm({ ...form, target: event.target.value.trim() })} />
<TextField disabled={loading} label={t("grants.prettyId")} required slotProps={{ htmlInput: { inputMode: "numeric", pattern: "[0-9]*" } }} value={form.prettyId} onChange={(event) => setForm({ ...form, prettyId: event.target.value.trim() })} />
<TextField disabled={loading} helperText={t("grants.permanentHint")} label={t("grants.validDays")} required slotProps={{ htmlInput: { min: 0 } }} type="number" value={form.durationDays} onChange={(event) => setForm({ ...form, durationDays: event.target.value })} />
<TextField disabled={loading} label={t("grants.reason")} minRows={2} multiline required value={form.reason} onChange={(event) => setForm({ ...form, reason: event.target.value })} />
</GrantDialog>
);
}
function TargetNotice() {
const { t } = useExternalI18n();
return <Alert severity="info">{t("grants.notice")}</Alert>;
}
function GrantDialog({ children, loading, onClose, onSubmit, open, title }) {
const { t } = useExternalI18n();
return (
<Dialog fullWidth maxWidth="sm" open={open} onClose={loading ? undefined : onClose}>
<Stack component="form" onSubmit={(event) => { event.preventDefault(); onSubmit(); }}>
<DialogTitle>{title}</DialogTitle>
<DialogContent><Stack className="external-dialog-fields" spacing={2}>{children}</Stack></DialogContent>
<DialogActions><Button disabled={loading} onClick={onClose}>{t("common.cancel")}</Button><Button disabled={loading} type="submit" variant="contained">{t("grants.confirm")}</Button></DialogActions>
</Stack>
</Dialog>
);
}
const resourceGrantInitial = { durationDays: "30", quantity: "1", reason: "", resourceId: "", target: "" };
const prettyGrantInitial = { durationDays: "0", prettyId: "", reason: "", target: "" };