105 lines
5.7 KiB
TypeScript
105 lines
5.7 KiB
TypeScript
import type { ChangeEvent, FormEvent } from "react";
|
|
import type { Applications, DatabaseType, ServersType } from "../../types/enums";
|
|
import type { ServerFormState } from "./types";
|
|
import { Modal } from "../common/Modal";
|
|
|
|
interface ServerModalProps {
|
|
isOpen: boolean;
|
|
form: ServerFormState;
|
|
loading: boolean;
|
|
onClose: () => void;
|
|
onChange: (event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
|
|
onSubmit: (event: FormEvent) => void;
|
|
serverTypeOptions: ServersType[];
|
|
applicationOptions: Applications[];
|
|
databaseOptions: DatabaseType[];
|
|
}
|
|
|
|
export const ServerModal = ({
|
|
isOpen,
|
|
form,
|
|
loading,
|
|
onClose,
|
|
onChange,
|
|
onSubmit,
|
|
serverTypeOptions,
|
|
applicationOptions,
|
|
databaseOptions,
|
|
}: ServerModalProps) => {
|
|
return (
|
|
<Modal isOpen={isOpen} title="Adicionar novo servidor" onClose={onClose} bodyClassName={Styles.modalBody}>
|
|
<form onSubmit={onSubmit} className={Styles.form}>
|
|
<div className={Styles.formGrid}>
|
|
<div className={Styles.field}>
|
|
<label htmlFor="name" className={Styles.label}>Nome</label>
|
|
<input id="name" name="name" className={Styles.input} value={form.name} onChange={onChange} required />
|
|
</div>
|
|
<div className={Styles.field}>
|
|
<label htmlFor="ip" className={Styles.label}>IP</label>
|
|
<input id="ip" name="ip" className={Styles.input} value={form.ip} onChange={onChange} placeholder="192.168.0.10" required />
|
|
</div>
|
|
</div>
|
|
<div className={Styles.formGrid}>
|
|
<div className={Styles.field}>
|
|
<label htmlFor="port" className={Styles.label}>Porta</label>
|
|
<input id="port" name="port" type="number" min="1" className={Styles.input} value={form.port} onChange={onChange} required />
|
|
</div>
|
|
<div className={Styles.field}>
|
|
<label htmlFor="user" className={Styles.label}>Usuário</label>
|
|
<input id="user" name="user" className={Styles.input} value={form.user} onChange={onChange} required />
|
|
</div>
|
|
</div>
|
|
<div className={Styles.field}>
|
|
<label htmlFor="password" className={Styles.label}>Senha</label>
|
|
<input id="password" name="password" type="password" className={Styles.input} value={form.password} onChange={onChange} required />
|
|
</div>
|
|
<div className={Styles.formGrid}>
|
|
<div className={Styles.field}>
|
|
<label htmlFor="type" className={Styles.label}>Tipo</label>
|
|
<select id="type" name="type" className={Styles.select} value={form.type} onChange={onChange}>
|
|
{serverTypeOptions.map((option) => (
|
|
<option key={option} value={option}>{option.toLowerCase()}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className={Styles.field}>
|
|
<label htmlFor="application" className={Styles.label}>Aplicação</label>
|
|
<select id="application" name="application" className={Styles.select} value={form.application} onChange={onChange}>
|
|
{applicationOptions.map((option) => (
|
|
<option key={option} value={option}>{option.toLowerCase()}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className={Styles.field}>
|
|
<label htmlFor="dbType" className={Styles.label}>Banco de dados</label>
|
|
<select id="dbType" name="dbType" className={Styles.select} value={form.dbType} onChange={onChange}>
|
|
{databaseOptions.map((option) => (
|
|
<option key={option} value={option}>{option.toLowerCase()}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className={Styles.modalActions}>
|
|
<button type="button" className={Styles.secondaryButton} onClick={onClose}>Cancelar</button>
|
|
<button type="submit" className={Styles.primaryButton} disabled={loading}>
|
|
{loading ? "Salvando..." : "Salvar servidor"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
const Styles = {
|
|
modalBody: "space-y-4",
|
|
form: "space-y-4",
|
|
formGrid: "grid gap-4 md:grid-cols-2",
|
|
field: "flex flex-col gap-2",
|
|
label: "text-xs font-semibold uppercase tracking-wide text-text-secondary dark:text-slate-400",
|
|
input: "rounded-lg border border-cardBorder bg-white px-3 py-2 text-sm text-text outline-none focus:border-accent focus:ring-1 focus:ring-accent dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100",
|
|
select: "rounded-lg border border-cardBorder bg-white px-3 py-2 text-sm text-text outline-none focus:border-accent focus:ring-1 focus:ring-accent capitalize dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100",
|
|
modalActions: "flex justify-end gap-3 pt-2",
|
|
secondaryButton: "rounded-md border border-cardBorder px-4 py-2 text-sm font-medium text-text hover:bg-bg disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-slate-800",
|
|
primaryButton: "rounded-md bg-accent px-4 py-2 text-sm font-semibold text-white hover:bg-hover disabled:opacity-70 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200",
|
|
};
|