Tickets: Anliegen zur Auswahl, und das Team kann uebernehmen
Bisher sah jedes Ticket gleich aus: ein Knopf, ein Thread, und im Thread stand als Erstes die Frage, worum es ueberhaupt geht. Und wer sich darum kuemmert, stand nirgends — man sah hinterher nur, wer zufaellig auf "Schliessen" geklickt hat. Anliegen sind Kategorien, die man in der Config anlegt: Name, Emoji, eine Zeile Beschreibung, ein Einstiegstext und optional eine Rolle, die beim Oeffnen erfaehrt, dass etwas anliegt. Der Ticket-Post wird dadurch vom Knopf zum Auswahlmenue; das gewaehlte Anliegen steht im Thread-Namen und der Einstiegstext gleich im ersten Beitrag — gute Stelle fuer "was wir wissen muessen". Wer keine anlegt, merkt nichts: ohne Eintrag bleibt es beim einen Knopf. Wer nur eine Sorte Tickets hat, soll nichts einrichten muessen. Uebernehmen ist ein Knopf im Thread, sichtbar fuers Team (wer aufraeumen darf, darf auch uebernehmen). Danach steht im Thread, wer sich kuemmert, und der Knopf wird zu "Freigeben". Die Bedingung "nur wenn noch niemand dran ist" steckt im UPDATE und nicht davor — zwei gleichzeitige Klicks wuerden sonst beide gewinnen. Beim Schliessen landen Anliegen und Bearbeiter im Transcript und im Mod-Log-Eintrag. Die Erstellung ist dabei aus client.js nach tickets.js gewandert. Knopf und Menue gehen jetzt denselben Weg, und in client.js sind drei Importzeilen weggefallen, die nur noch dort standen. Geprueft: alsEmoji gegen 20 Eingaben (Unicode, Hautfarbe, ZWJ-Ketten, Server-Emoji, Murks) und das fertige Panel gegen discord.js selbst — ein ungueltiges Emoji oder ein zu langes Label laesst Discord sonst die ganze Nachricht fallen, und das faellt erst beim Senden auf. Im Browser: Liste, Bearbeiten-Formular und der leere Zustand. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -344,6 +344,8 @@ export default function Settings({ me }) {
|
||||
const [serverStats, setServerStats] = useState(null);
|
||||
const [watchdog, setWatchdog] = useState(null);
|
||||
const [automod, setAutomod] = useState(null);
|
||||
const [anliegen, setAnliegen] = useState([]);
|
||||
const [anliegenDraft, setAnliegenDraft] = useState({ id: null, name: '', emoji: '🎫', beschreibung: '', ping_role_id: '', intro: '' });
|
||||
const [dienstDraft, setDienstDraft] = useState({ id: null, name: '', url: '', gruppe: 'Dienste', oeffentlich: false });
|
||||
const [owner, setOwner] = useState(null);
|
||||
const [auditAlle, setAuditAlle] = useState(false);
|
||||
@@ -473,6 +475,7 @@ export default function Settings({ me }) {
|
||||
apiGet('/api/serverstats').then(setServerStats).catch(() => {});
|
||||
apiGet('/api/watchdog').then(setWatchdog).catch(() => {});
|
||||
apiGet('/api/automod').then(setAutomod).catch(() => {});
|
||||
apiGet('/api/ticket-categories').then((d) => setAnliegen(d.kategorien ?? [])).catch(() => {});
|
||||
apiGet('/api/ssoapps').then((d) => setSsoApps(d.apps)).catch(() => {});
|
||||
apiGet('/api/services').then((d) => setServices(d.services)).catch(() => {});
|
||||
apiGet('/api/pages/all/list').then((d) => setPages(d.pages)).catch(() => {});
|
||||
@@ -1835,6 +1838,33 @@ export default function Settings({ me }) {
|
||||
</>
|
||||
);
|
||||
|
||||
async function anliegenSpeichern() {
|
||||
const body = { ...anliegenDraft };
|
||||
try {
|
||||
const res = body.id
|
||||
? await apiPut(`/api/ticket-categories/${body.id}`, body)
|
||||
: await apiPost('/api/ticket-categories', body);
|
||||
setAnliegen(res.kategorien ?? []);
|
||||
setAnliegenDraft({ id: null, name: '', emoji: '🎫', beschreibung: '', ping_role_id: '', intro: '' });
|
||||
setFeedback(body.id ? 'Anliegen gespeichert.' : 'Anliegen angelegt.');
|
||||
} catch (e) {
|
||||
setFeedback(e.body?.error ?? 'Speichern fehlgeschlagen.');
|
||||
}
|
||||
setTimeout(() => setFeedback(null), 3000);
|
||||
}
|
||||
|
||||
async function anliegenLoeschen(id, name) {
|
||||
if (!window.confirm(`„${name}" wirklich entfernen? Offene Tickets bleiben bestehen.`)) return;
|
||||
try {
|
||||
const res = await apiDelete(`/api/ticket-categories/${id}`);
|
||||
setAnliegen(res.kategorien ?? []);
|
||||
if (anliegenDraft.id === id) setAnliegenDraft({ id: null, name: '', emoji: '🎫', beschreibung: '', ping_role_id: '', intro: '' });
|
||||
} catch {
|
||||
setFeedback('Entfernen fehlgeschlagen.');
|
||||
setTimeout(() => setFeedback(null), 3000);
|
||||
}
|
||||
}
|
||||
|
||||
/** AutoMod-Regel an- oder abschalten */
|
||||
async function automodSchalten(id, aktiv) {
|
||||
try {
|
||||
@@ -1849,6 +1879,97 @@ export default function Settings({ me }) {
|
||||
|
||||
const tabSupport = (
|
||||
<>
|
||||
<div className="settings-section">
|
||||
<h2 className="settings-title">// Ticket-Anliegen</h2>
|
||||
<p className="section-intro">
|
||||
Ohne Anliegen hat der Ticket-Post einen Knopf und jedes Ticket sieht gleich aus.
|
||||
Mit Anliegen wird daraus ein Auswahlmenü: der Titel steht im Thread-Namen,
|
||||
der Einstiegstext gleich im ersten Beitrag, und die hinterlegte Rolle erfährt
|
||||
sofort, dass etwas anliegt. Nach dem Ändern <strong>/ticket-setup</strong> neu
|
||||
ausführen — der alte Post behält sonst sein altes Menü.
|
||||
</p>
|
||||
|
||||
{anliegen.length === 0 && (
|
||||
<p className="notice">Noch keine Anliegen — es bleibt beim einfachen Knopf.</p>
|
||||
)}
|
||||
|
||||
{anliegen.map((k) => (
|
||||
<div className="am-row card" key={k.id}>
|
||||
<div className="am-head">
|
||||
<span className="tk-emoji">{k.emoji}</span>
|
||||
<span className="st-name">{k.name}</span>
|
||||
{k.ping_role_id && (
|
||||
<span className="tm-chip">
|
||||
pingt {roleItems.find((r) => r.id === k.ping_role_id)?.label ?? 'Rolle'}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
className="btn btn-mini"
|
||||
style={{ marginLeft: 'auto' }}
|
||||
onClick={() => setAnliegenDraft({
|
||||
id: k.id, name: k.name, emoji: k.emoji,
|
||||
beschreibung: k.beschreibung ?? '',
|
||||
ping_role_id: k.ping_role_id ?? '',
|
||||
intro: k.intro ?? '',
|
||||
})}
|
||||
>
|
||||
Bearbeiten
|
||||
</button>
|
||||
<button className="card-delete" title="Anliegen entfernen" onClick={() => anliegenLoeschen(k.id, k.name)}>✕</button>
|
||||
</div>
|
||||
{(k.beschreibung || k.intro) && (
|
||||
<div className="am-meta">
|
||||
{k.beschreibung && <span>{k.beschreibung}</span>}
|
||||
{k.intro && <span className="am-exempt">Einstiegstext hinterlegt</span>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<h3 className="tm-form-title" style={{ marginTop: '1.6rem' }}>
|
||||
{anliegenDraft.id ? 'Anliegen bearbeiten' : 'Anliegen hinzufügen'}
|
||||
</h3>
|
||||
<div className="field">
|
||||
<label>Name <span className="field-hint">steht im Menü und im Thread-Namen</span></label>
|
||||
<input type="text" maxLength={80} placeholder="z. B. Fehler melden" value={anliegenDraft.name}
|
||||
onChange={(e) => setAnliegenDraft({ ...anliegenDraft, name: e.target.value })} />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Emoji <span className="field-hint">ein Zeichen oder ein Server-Emoji wie <:name:123> — unpassendes wird weggelassen</span></label>
|
||||
<input type="text" maxLength={32} placeholder="🐛" value={anliegenDraft.emoji}
|
||||
onChange={(e) => setAnliegenDraft({ ...anliegenDraft, emoji: e.target.value })} />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Kurzbeschreibung <span className="field-hint">graue Zeile unter dem Namen im Menü — höchstens 100 Zeichen</span></label>
|
||||
<input type="text" maxLength={100} placeholder="Etwas funktioniert nicht wie erwartet" value={anliegenDraft.beschreibung}
|
||||
onChange={(e) => setAnliegenDraft({ ...anliegenDraft, beschreibung: e.target.value })} />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Rolle benachrichtigen <span className="field-hint">wird beim Öffnen im Thread erwähnt — leer = kein Ping</span></label>
|
||||
<PickSelect
|
||||
items={roleItems}
|
||||
value={anliegenDraft.ping_role_id ?? ''}
|
||||
onChange={(v) => setAnliegenDraft({ ...anliegenDraft, ping_role_id: v })}
|
||||
empty="— kein Ping —"
|
||||
/>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Einstiegstext <span className="field-hint">steht im ersten Beitrag — gute Stelle für „was wir wissen müssen"</span></label>
|
||||
<textarea rows={3} maxLength={1024} placeholder="Schreib uns bitte gleich dazu: was hast du gemacht, was ist passiert?"
|
||||
value={anliegenDraft.intro}
|
||||
onChange={(e) => setAnliegenDraft({ ...anliegenDraft, intro: e.target.value })} />
|
||||
</div>
|
||||
<div className="settings-actions">
|
||||
<button className="btn btn-save" onClick={anliegenSpeichern}>
|
||||
{anliegenDraft.id ? 'Änderungen speichern' : 'Hinzufügen'}
|
||||
</button>
|
||||
{anliegenDraft.id && (
|
||||
<button className="btn btn-ghost" onClick={() => setAnliegenDraft({ id: null, name: '', emoji: '🎫', beschreibung: '', ping_role_id: '', intro: '' })}>
|
||||
Abbrechen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{automod && (
|
||||
<div className="settings-section">
|
||||
<h2 className="settings-title">// AutoMod</h2>
|
||||
|
||||
@@ -1884,6 +1884,10 @@ label.toggle {
|
||||
font-size: .62rem; letter-spacing: .06em; color: var(--muted2); white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Emoji eines Ticket-Anliegens — gleiche Breite wie der Statuspunkt daneben,
|
||||
damit die Namen untereinander auf einer Linie stehen */
|
||||
.tk-emoji { font-size: 1rem; line-height: 1; width: 1.2rem; text-align: center; flex: 0 0 auto; }
|
||||
|
||||
/* ── AUTOMOD-REGELN ────────────────────────────────── */
|
||||
.am-row { padding: .9rem 1.1rem; margin-bottom: .7rem; min-width: 0; }
|
||||
.am-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
|
||||
|
||||
Reference in New Issue
Block a user