112 lines
3.2 KiB
JavaScript
112 lines
3.2 KiB
JavaScript
import { useState } from 'react';
|
||
import '../style/AddAppModal.css';
|
||
|
||
function AppModal({ mode = 'add', initialData = {}, onSubmit, onClose, sections = [] }) {
|
||
const [open, setOpen] = useState(true);
|
||
const [section, setSection] = useState(initialData.section || '');
|
||
const [customSection, setCustomSection] = useState(false);
|
||
const [name, setName] = useState(initialData.name || '');
|
||
const [icon, setIcon] = useState(initialData.icon || '');
|
||
const [description, setDescription] = useState(initialData.description || '');
|
||
const [url, setUrl] = useState(initialData.url || '');
|
||
|
||
const handleSubmit = async (e) => {
|
||
e.preventDefault();
|
||
|
||
const appData = {
|
||
name,
|
||
icon,
|
||
description,
|
||
url,
|
||
};
|
||
|
||
const payload = {
|
||
section,
|
||
app: appData,
|
||
};
|
||
|
||
if (mode === 'edit') {
|
||
payload.original_name = initialData.original_name || initialData.name;
|
||
}
|
||
|
||
await onSubmit(payload);
|
||
setOpen(false);
|
||
if (onClose) onClose();
|
||
};
|
||
|
||
if (!open) return null;
|
||
|
||
return (
|
||
<div className="modal-overlay" onClick={() => { setOpen(false); if (onClose) onClose(); }}>
|
||
<div className="modal" onClick={(e) => e.stopPropagation()}>
|
||
<h2>{mode === 'edit' ? 'Edit App' : 'Add New App'}</h2>
|
||
<form onSubmit={handleSubmit}>
|
||
<select
|
||
value={customSection ? '__new__' : section}
|
||
onChange={(e) => {
|
||
const val = e.target.value;
|
||
if (val === '__new__') {
|
||
setSection('');
|
||
setCustomSection(true);
|
||
} else {
|
||
setSection(val);
|
||
setCustomSection(false);
|
||
}
|
||
}}
|
||
required={!customSection}
|
||
disabled={mode === 'edit'}
|
||
>
|
||
<option value="" disabled>Select a section</option>
|
||
{sections.map((s) => (
|
||
<option key={s.name} value={s.name}>
|
||
{s.name}
|
||
</option>
|
||
))}
|
||
<option value="__new__">➕ Create new section...</option>
|
||
</select>
|
||
|
||
{customSection && (
|
||
<input
|
||
type="text"
|
||
placeholder="New section name"
|
||
value={section}
|
||
onChange={(e) => setSection(e.target.value)}
|
||
required
|
||
/>
|
||
)}
|
||
|
||
<input
|
||
type="text"
|
||
placeholder="App name"
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
required
|
||
/>
|
||
<input
|
||
type="text"
|
||
placeholder="Icon name (e.g. grafana.svg) or full URL"
|
||
value={icon}
|
||
onChange={(e) => setIcon(e.target.value)}
|
||
/>
|
||
<input
|
||
type="text"
|
||
placeholder="Description"
|
||
value={description}
|
||
onChange={(e) => setDescription(e.target.value)}
|
||
/>
|
||
<input
|
||
type="text"
|
||
placeholder="App URL"
|
||
value={url}
|
||
onChange={(e) => setUrl(e.target.value)}
|
||
required
|
||
/>
|
||
<button type="submit">{mode === 'edit' ? 'Update' : 'Add'}</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default AppModal;
|