Refactor giveaway job processing and enhance environment documentation
- Improved handling of the `giveawayCreate` job in the bot's job processing for better consistency. - Updated `.env.example` to clarify the usage of `BOT_TOKEN` for both the bot and WebUI. - Added `bullmq` dependency to the WebUI package for enhanced job management capabilities.
This commit is contained in:
smueller
286
apps/webui/src/components/modules/giveaways-manager.tsx
Normal file
286
apps/webui/src/components/modules/giveaways-manager.tsx
Normal file
@@ -0,0 +1,286 @@
|
||||
'use client';
|
||||
|
||||
import type { GiveawayDashboard } from '@nexumi/shared';
|
||||
import { Pause, Play, Plus, Trash2 } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import { useTranslations } from '@/components/locale-provider';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
|
||||
const EMPTY_DRAFT = {
|
||||
channelId: '',
|
||||
prize: '',
|
||||
winnerCount: '1',
|
||||
endsAt: '',
|
||||
requiredRoleId: '',
|
||||
requiredLevel: '',
|
||||
requiredMemberDays: ''
|
||||
};
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
return new Date(iso).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
|
||||
}
|
||||
|
||||
interface GiveawaysManagerProps {
|
||||
guildId: string;
|
||||
initialGiveaways: GiveawayDashboard[];
|
||||
}
|
||||
|
||||
export function GiveawaysManager({ guildId, initialGiveaways }: GiveawaysManagerProps) {
|
||||
const t = useTranslations();
|
||||
const [giveaways, setGiveaways] = useState<GiveawayDashboard[]>(initialGiveaways);
|
||||
const [draft, setDraft] = useState(EMPTY_DRAFT);
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [pendingId, setPendingId] = useState<string | null>(null);
|
||||
|
||||
async function handleCreate() {
|
||||
if (!draft.channelId.trim() || !draft.prize.trim() || !draft.endsAt) {
|
||||
toast.error(t('modulePages.giveaways.formIncomplete'));
|
||||
return;
|
||||
}
|
||||
setCreating(true);
|
||||
try {
|
||||
const response = await fetch(`/api/guilds/${guildId}/giveaways`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
channelId: draft.channelId.trim(),
|
||||
prize: draft.prize.trim(),
|
||||
winnerCount: Number(draft.winnerCount) || 1,
|
||||
endsAt: new Date(draft.endsAt).toISOString(),
|
||||
requiredRoleId: draft.requiredRoleId.trim() || undefined,
|
||||
requiredLevel: draft.requiredLevel.trim() ? Number(draft.requiredLevel) : undefined,
|
||||
requiredMemberDays: draft.requiredMemberDays.trim() ? Number(draft.requiredMemberDays) : undefined
|
||||
})
|
||||
});
|
||||
const body = (await response.json().catch(() => null)) as (GiveawayDashboard & { error?: string }) | null;
|
||||
if (!response.ok || !body) {
|
||||
toast.error(body?.error ?? t('common.saveError'));
|
||||
return;
|
||||
}
|
||||
setGiveaways((prev) => [body, ...prev]);
|
||||
setDraft(EMPTY_DRAFT);
|
||||
toast.success(t('modulePages.giveaways.created'));
|
||||
} catch {
|
||||
toast.error(t('common.saveError'));
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAction(giveaway: GiveawayDashboard, action: 'end' | 'pause' | 'unpause') {
|
||||
setPendingId(giveaway.id);
|
||||
try {
|
||||
const response = await fetch(`/api/guilds/${guildId}/giveaways/${giveaway.id}/action`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ action })
|
||||
});
|
||||
const body = (await response.json().catch(() => null)) as (GiveawayDashboard & { error?: string }) | null;
|
||||
if (!response.ok || !body) {
|
||||
toast.error(body?.error ?? t('common.saveError'));
|
||||
return;
|
||||
}
|
||||
setGiveaways((prev) => prev.map((entry) => (entry.id === giveaway.id ? body : entry)));
|
||||
toast.success(t('common.saveSuccess'));
|
||||
} catch {
|
||||
toast.error(t('common.saveError'));
|
||||
} finally {
|
||||
setPendingId(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(giveaway: GiveawayDashboard) {
|
||||
if (!window.confirm(t('modulePages.giveaways.confirmDelete'))) {
|
||||
return;
|
||||
}
|
||||
setPendingId(giveaway.id);
|
||||
try {
|
||||
const response = await fetch(`/api/guilds/${guildId}/giveaways/${giveaway.id}`, { method: 'DELETE' });
|
||||
if (!response.ok) {
|
||||
toast.error(t('common.saveError'));
|
||||
return;
|
||||
}
|
||||
setGiveaways((prev) => prev.filter((entry) => entry.id !== giveaway.id));
|
||||
toast.success(t('common.saveSuccess'));
|
||||
} catch {
|
||||
toast.error(t('common.saveError'));
|
||||
} finally {
|
||||
setPendingId(null);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('modulePages.giveaways.createTitle')}</CardTitle>
|
||||
<CardDescription>{t('modulePages.giveaways.createDescription')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.giveaways.channelId')}</Label>
|
||||
<Input
|
||||
value={draft.channelId}
|
||||
onChange={(event) => setDraft((prev) => ({ ...prev, channelId: event.target.value }))}
|
||||
placeholder="123456789012345678"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.giveaways.prize')}</Label>
|
||||
<Input value={draft.prize} onChange={(event) => setDraft((prev) => ({ ...prev, prize: event.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.giveaways.winnerCount')}</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
value={draft.winnerCount}
|
||||
onChange={(event) => setDraft((prev) => ({ ...prev, winnerCount: event.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.giveaways.endsAt')}</Label>
|
||||
<Input
|
||||
type="datetime-local"
|
||||
value={draft.endsAt}
|
||||
onChange={(event) => setDraft((prev) => ({ ...prev, endsAt: event.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.giveaways.requiredRoleId')}</Label>
|
||||
<Input
|
||||
value={draft.requiredRoleId}
|
||||
onChange={(event) => setDraft((prev) => ({ ...prev, requiredRoleId: event.target.value }))}
|
||||
placeholder={t('common.optional')}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.giveaways.requiredLevel')}</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
value={draft.requiredLevel}
|
||||
onChange={(event) => setDraft((prev) => ({ ...prev, requiredLevel: event.target.value }))}
|
||||
placeholder={t('common.optional')}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.giveaways.requiredMemberDays')}</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
value={draft.requiredMemberDays}
|
||||
onChange={(event) => setDraft((prev) => ({ ...prev, requiredMemberDays: event.target.value }))}
|
||||
placeholder={t('common.optional')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Button type="button" onClick={handleCreate} disabled={creating}>
|
||||
<Plus className="size-4" />
|
||||
{creating ? t('common.saving') : t('modulePages.giveaways.create')}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('modulePages.giveaways.listTitle')}</CardTitle>
|
||||
<CardDescription>{t('modulePages.giveaways.listDescription')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{giveaways.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">{t('modulePages.giveaways.empty')}</p>
|
||||
)}
|
||||
{giveaways.map((giveaway) => {
|
||||
const ended = Boolean(giveaway.endedAt);
|
||||
return (
|
||||
<div key={giveaway.id} className="space-y-3 rounded-md border border-border p-4">
|
||||
<div className="flex flex-wrap items-start justify-between gap-2">
|
||||
<div>
|
||||
<p className="font-medium">{giveaway.prize}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
#{giveaway.channelId} · {t('modulePages.giveaways.winnerCount')}: {giveaway.winnerCount} ·{' '}
|
||||
{t('modulePages.giveaways.entrants')}: {giveaway.entrants.length}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{ended ? (
|
||||
<Badge variant="secondary">{t('modulePages.giveaways.statusEnded')}</Badge>
|
||||
) : giveaway.paused ? (
|
||||
<Badge variant="secondary">{t('modulePages.giveaways.statusPaused')}</Badge>
|
||||
) : (
|
||||
<Badge variant="success">{t('modulePages.giveaways.statusActive')}</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{ended
|
||||
? `${t('modulePages.giveaways.endedAt')}: ${formatDate(giveaway.endedAt!)}`
|
||||
: `${t('modulePages.giveaways.endsAt')}: ${formatDate(giveaway.endsAt)}`}
|
||||
</p>
|
||||
{ended && giveaway.winners.length > 0 && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t('modulePages.giveaways.winners')}: {giveaway.winners.map((id) => `<@${id}>`).join(', ')}
|
||||
</p>
|
||||
)}
|
||||
{!ended && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={pendingId === giveaway.id}
|
||||
onClick={() => handleAction(giveaway, giveaway.paused ? 'unpause' : 'pause')}
|
||||
>
|
||||
{giveaway.paused ? <Play className="size-4" /> : <Pause className="size-4" />}
|
||||
{giveaway.paused ? t('modulePages.giveaways.unpause') : t('modulePages.giveaways.pause')}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={pendingId === giveaway.id}
|
||||
onClick={() => handleAction(giveaway, 'end')}
|
||||
>
|
||||
{t('modulePages.giveaways.end')}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
disabled={pendingId === giveaway.id}
|
||||
onClick={() => handleDelete(giveaway)}
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
{t('common.remove')}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{ended && (
|
||||
<div>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
disabled={pendingId === giveaway.id}
|
||||
onClick={() => handleDelete(giveaway)}
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
{t('common.remove')}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
318
apps/webui/src/components/modules/selfroles-manager.tsx
Normal file
318
apps/webui/src/components/modules/selfroles-manager.tsx
Normal file
@@ -0,0 +1,318 @@
|
||||
'use client';
|
||||
|
||||
import type { SelfRoleBehavior, SelfRoleEntry, SelfRoleMode, SelfRolePanelDashboard } from '@nexumi/shared';
|
||||
import { Plus, Trash2 } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import { useTranslations } from '@/components/locale-provider';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
|
||||
const MODES: SelfRoleMode[] = ['BUTTONS', 'DROPDOWN', 'REACTIONS'];
|
||||
const BEHAVIORS: SelfRoleBehavior[] = ['NORMAL', 'UNIQUE', 'VERIFY', 'TEMPORARY'];
|
||||
|
||||
function rolesToText(roles: SelfRoleEntry[]): string {
|
||||
return roles.map((role) => [role.roleId, role.label, role.emoji ?? '', role.description ?? ''].join(' | ')).join('\n');
|
||||
}
|
||||
|
||||
function textToRoles(text: string): SelfRoleEntry[] {
|
||||
return text
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line.length > 0)
|
||||
.map((line) => {
|
||||
const [roleId, label, emoji, description] = line.split('|').map((part) => part.trim());
|
||||
return {
|
||||
roleId: roleId ?? '',
|
||||
label: label || roleId || '',
|
||||
emoji: emoji || undefined,
|
||||
description: description || undefined
|
||||
};
|
||||
})
|
||||
.filter((role) => role.roleId.length > 0);
|
||||
}
|
||||
|
||||
interface LocalPanel extends SelfRolePanelDashboard {
|
||||
clientKey: string;
|
||||
rolesText: string;
|
||||
saving?: boolean;
|
||||
}
|
||||
|
||||
const EMPTY_DRAFT = {
|
||||
channelId: '',
|
||||
title: '',
|
||||
description: '',
|
||||
mode: 'BUTTONS' as SelfRoleMode,
|
||||
behavior: 'NORMAL' as SelfRoleBehavior,
|
||||
rolesText: ''
|
||||
};
|
||||
|
||||
interface SelfRolesManagerProps {
|
||||
guildId: string;
|
||||
initialPanels: SelfRolePanelDashboard[];
|
||||
}
|
||||
|
||||
export function SelfRolesManager({ guildId, initialPanels }: SelfRolesManagerProps) {
|
||||
const t = useTranslations();
|
||||
const [panels, setPanels] = useState<LocalPanel[]>(
|
||||
initialPanels.map((panel, index) => ({
|
||||
...panel,
|
||||
clientKey: panel.id ?? `existing-${index}`,
|
||||
rolesText: rolesToText(panel.roles)
|
||||
}))
|
||||
);
|
||||
const [draft, setDraft] = useState(EMPTY_DRAFT);
|
||||
const [creating, setCreating] = useState(false);
|
||||
|
||||
async function handleCreate() {
|
||||
const roles = textToRoles(draft.rolesText);
|
||||
if (!draft.channelId.trim() || !draft.title.trim() || roles.length === 0) {
|
||||
toast.error(t('modulePages.selfroles.formIncomplete'));
|
||||
return;
|
||||
}
|
||||
setCreating(true);
|
||||
try {
|
||||
const response = await fetch(`/api/guilds/${guildId}/selfroles`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
channelId: draft.channelId.trim(),
|
||||
title: draft.title.trim(),
|
||||
description: draft.description.trim() || null,
|
||||
mode: draft.mode,
|
||||
behavior: draft.behavior,
|
||||
roles
|
||||
})
|
||||
});
|
||||
const body = (await response.json().catch(() => null)) as (SelfRolePanelDashboard & { error?: string }) | null;
|
||||
if (!response.ok || !body) {
|
||||
toast.error(body?.error ?? t('common.saveError'));
|
||||
return;
|
||||
}
|
||||
setPanels((prev) => [
|
||||
{ ...body, clientKey: body.id ?? `new-${Date.now()}`, rolesText: rolesToText(body.roles) },
|
||||
...prev
|
||||
]);
|
||||
setDraft(EMPTY_DRAFT);
|
||||
toast.success(t('common.saveSuccess'));
|
||||
} catch {
|
||||
toast.error(t('common.saveError'));
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave(panel: LocalPanel) {
|
||||
setPanels((prev) => prev.map((entry) => (entry.clientKey === panel.clientKey ? { ...entry, saving: true } : entry)));
|
||||
try {
|
||||
const response = await fetch(`/api/guilds/${guildId}/selfroles/${panel.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
channelId: panel.channelId,
|
||||
title: panel.title,
|
||||
description: panel.description,
|
||||
mode: panel.mode,
|
||||
behavior: panel.behavior,
|
||||
roles: textToRoles(panel.rolesText)
|
||||
})
|
||||
});
|
||||
const body = (await response.json().catch(() => null)) as (SelfRolePanelDashboard & { error?: string }) | null;
|
||||
if (!response.ok || !body) {
|
||||
toast.error(body?.error ?? t('common.saveError'));
|
||||
return;
|
||||
}
|
||||
toast.success(t('common.saveSuccess'));
|
||||
} catch {
|
||||
toast.error(t('common.saveError'));
|
||||
} finally {
|
||||
setPanels((prev) => prev.map((entry) => (entry.clientKey === panel.clientKey ? { ...entry, saving: false } : entry)));
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(panel: LocalPanel) {
|
||||
if (!window.confirm(t('modulePages.selfroles.confirmDelete'))) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await fetch(`/api/guilds/${guildId}/selfroles/${panel.id}`, { method: 'DELETE' });
|
||||
if (!response.ok) {
|
||||
toast.error(t('common.saveError'));
|
||||
return;
|
||||
}
|
||||
setPanels((prev) => prev.filter((entry) => entry.clientKey !== panel.clientKey));
|
||||
toast.success(t('common.saveSuccess'));
|
||||
} catch {
|
||||
toast.error(t('common.saveError'));
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('modulePages.selfroles.createTitle')}</CardTitle>
|
||||
<CardDescription>{t('modulePages.selfroles.createDescription')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.selfroles.channelId')}</Label>
|
||||
<Input value={draft.channelId} onChange={(event) => setDraft((prev) => ({ ...prev, channelId: event.target.value }))} placeholder="123456789012345678" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.selfroles.panelTitle')}</Label>
|
||||
<Input value={draft.title} onChange={(event) => setDraft((prev) => ({ ...prev, title: event.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.selfroles.mode')}</Label>
|
||||
<Select value={draft.mode} onValueChange={(mode) => setDraft((prev) => ({ ...prev, mode: mode as SelfRoleMode }))}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{MODES.map((mode) => (
|
||||
<SelectItem key={mode} value={mode}>
|
||||
{t(`modulePages.selfroles.modes.${mode}`)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.selfroles.behavior')}</Label>
|
||||
<Select value={draft.behavior} onValueChange={(behavior) => setDraft((prev) => ({ ...prev, behavior: behavior as SelfRoleBehavior }))}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{BEHAVIORS.map((behavior) => (
|
||||
<SelectItem key={behavior} value={behavior}>
|
||||
{t(`modulePages.selfroles.behaviors.${behavior}`)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.selfroles.description')}</Label>
|
||||
<Input value={draft.description} onChange={(event) => setDraft((prev) => ({ ...prev, description: event.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.selfroles.roles')}</Label>
|
||||
<Textarea
|
||||
rows={5}
|
||||
value={draft.rolesText}
|
||||
onChange={(event) => setDraft((prev) => ({ ...prev, rolesText: event.target.value }))}
|
||||
placeholder={t('modulePages.selfroles.rolesPlaceholder')}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">{t('modulePages.selfroles.rolesHint')}</p>
|
||||
</div>
|
||||
<Button type="button" onClick={handleCreate} disabled={creating}>
|
||||
<Plus className="size-4" />
|
||||
{creating ? t('common.saving') : t('modulePages.selfroles.create')}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('modulePages.selfroles.listTitle')}</CardTitle>
|
||||
<CardDescription>{t('modulePages.selfroles.listDescription')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{panels.length === 0 && <p className="text-sm text-muted-foreground">{t('modulePages.selfroles.empty')}</p>}
|
||||
{panels.map((panel) => (
|
||||
<div key={panel.clientKey} className="space-y-3 rounded-md border border-border p-4">
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.selfroles.channelId')}</Label>
|
||||
<Input
|
||||
value={panel.channelId}
|
||||
onChange={(event) =>
|
||||
setPanels((prev) => prev.map((entry) => (entry.clientKey === panel.clientKey ? { ...entry, channelId: event.target.value } : entry)))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.selfroles.panelTitle')}</Label>
|
||||
<Input
|
||||
value={panel.title}
|
||||
onChange={(event) =>
|
||||
setPanels((prev) => prev.map((entry) => (entry.clientKey === panel.clientKey ? { ...entry, title: event.target.value } : entry)))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.selfroles.mode')}</Label>
|
||||
<Select
|
||||
value={panel.mode}
|
||||
onValueChange={(mode) =>
|
||||
setPanels((prev) => prev.map((entry) => (entry.clientKey === panel.clientKey ? { ...entry, mode: mode as SelfRoleMode } : entry)))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{MODES.map((mode) => (
|
||||
<SelectItem key={mode} value={mode}>
|
||||
{t(`modulePages.selfroles.modes.${mode}`)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.selfroles.behavior')}</Label>
|
||||
<Select
|
||||
value={panel.behavior}
|
||||
onValueChange={(behavior) =>
|
||||
setPanels((prev) =>
|
||||
prev.map((entry) => (entry.clientKey === panel.clientKey ? { ...entry, behavior: behavior as SelfRoleBehavior } : entry))
|
||||
)
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{BEHAVIORS.map((behavior) => (
|
||||
<SelectItem key={behavior} value={behavior}>
|
||||
{t(`modulePages.selfroles.behaviors.${behavior}`)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.selfroles.roles')}</Label>
|
||||
<Textarea
|
||||
rows={4}
|
||||
value={panel.rolesText}
|
||||
onChange={(event) =>
|
||||
setPanels((prev) => prev.map((entry) => (entry.clientKey === panel.clientKey ? { ...entry, rolesText: event.target.value } : entry)))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button type="button" variant="outline" disabled={panel.saving} onClick={() => handleSave(panel)}>
|
||||
{panel.saving ? t('common.saving') : t('common.save')}
|
||||
</Button>
|
||||
<Button type="button" variant="ghost" size="icon" aria-label={t('common.remove')} onClick={() => handleDelete(panel)}>
|
||||
<Trash2 className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
261
apps/webui/src/components/modules/tags-manager.tsx
Normal file
261
apps/webui/src/components/modules/tags-manager.tsx
Normal file
@@ -0,0 +1,261 @@
|
||||
'use client';
|
||||
|
||||
import type { TagDashboard, TagResponseType } from '@nexumi/shared';
|
||||
import { Plus, Trash2 } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import { useTranslations } from '@/components/locale-provider';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
|
||||
const RESPONSE_TYPES: TagResponseType[] = ['TEXT', 'EMBED'];
|
||||
|
||||
function toCsv(ids: string[]): string {
|
||||
return ids.join(', ');
|
||||
}
|
||||
function fromCsv(text: string): string[] {
|
||||
return text.split(',').map((entry) => entry.trim()).filter(Boolean);
|
||||
}
|
||||
|
||||
interface LocalTag extends TagDashboard {
|
||||
clientKey: string;
|
||||
allowedRoleIdsText: string;
|
||||
allowedChannelIdsText: string;
|
||||
saving?: boolean;
|
||||
}
|
||||
|
||||
const EMPTY_DRAFT = {
|
||||
name: '',
|
||||
content: '',
|
||||
responseType: 'TEXT' as TagResponseType,
|
||||
triggerWord: '',
|
||||
allowedRoleIdsText: '',
|
||||
allowedChannelIdsText: ''
|
||||
};
|
||||
|
||||
interface TagsManagerProps {
|
||||
guildId: string;
|
||||
initialTags: TagDashboard[];
|
||||
}
|
||||
|
||||
export function TagsManager({ guildId, initialTags }: TagsManagerProps) {
|
||||
const t = useTranslations();
|
||||
const [tags, setTags] = useState<LocalTag[]>(
|
||||
initialTags.map((tag, index) => ({
|
||||
...tag,
|
||||
clientKey: tag.id ?? `existing-${index}`,
|
||||
allowedRoleIdsText: toCsv(tag.allowedRoleIds),
|
||||
allowedChannelIdsText: toCsv(tag.allowedChannelIds)
|
||||
}))
|
||||
);
|
||||
const [draft, setDraft] = useState(EMPTY_DRAFT);
|
||||
const [creating, setCreating] = useState(false);
|
||||
|
||||
async function handleCreate() {
|
||||
if (!draft.name.trim()) {
|
||||
toast.error(t('modulePages.tags.nameRequired'));
|
||||
return;
|
||||
}
|
||||
setCreating(true);
|
||||
try {
|
||||
const response = await fetch(`/api/guilds/${guildId}/tags`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: draft.name.trim(),
|
||||
content: draft.content.trim() || null,
|
||||
responseType: draft.responseType,
|
||||
triggerWord: draft.triggerWord.trim() || null,
|
||||
allowedRoleIds: fromCsv(draft.allowedRoleIdsText),
|
||||
allowedChannelIds: fromCsv(draft.allowedChannelIdsText)
|
||||
})
|
||||
});
|
||||
const body = (await response.json().catch(() => null)) as (TagDashboard & { error?: string }) | null;
|
||||
if (!response.ok || !body) {
|
||||
toast.error(body?.error ?? t('common.saveError'));
|
||||
return;
|
||||
}
|
||||
setTags((prev) => [
|
||||
{
|
||||
...body,
|
||||
clientKey: body.id ?? `new-${Date.now()}`,
|
||||
allowedRoleIdsText: toCsv(body.allowedRoleIds),
|
||||
allowedChannelIdsText: toCsv(body.allowedChannelIds)
|
||||
},
|
||||
...prev
|
||||
]);
|
||||
setDraft(EMPTY_DRAFT);
|
||||
toast.success(t('common.saveSuccess'));
|
||||
} catch {
|
||||
toast.error(t('common.saveError'));
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave(tag: LocalTag) {
|
||||
setTags((prev) => prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, saving: true } : entry)));
|
||||
try {
|
||||
const response = await fetch(`/api/guilds/${guildId}/tags/${tag.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: tag.name,
|
||||
content: tag.content,
|
||||
responseType: tag.responseType,
|
||||
triggerWord: tag.triggerWord,
|
||||
allowedRoleIds: fromCsv(tag.allowedRoleIdsText),
|
||||
allowedChannelIds: fromCsv(tag.allowedChannelIdsText)
|
||||
})
|
||||
});
|
||||
const body = (await response.json().catch(() => null)) as (TagDashboard & { error?: string }) | null;
|
||||
if (!response.ok || !body) {
|
||||
toast.error(body?.error ?? t('common.saveError'));
|
||||
return;
|
||||
}
|
||||
toast.success(t('common.saveSuccess'));
|
||||
} catch {
|
||||
toast.error(t('common.saveError'));
|
||||
} finally {
|
||||
setTags((prev) => prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, saving: false } : entry)));
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(tag: LocalTag) {
|
||||
if (!window.confirm(t('modulePages.tags.confirmDelete'))) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await fetch(`/api/guilds/${guildId}/tags/${tag.id}`, { method: 'DELETE' });
|
||||
if (!response.ok) {
|
||||
toast.error(t('common.saveError'));
|
||||
return;
|
||||
}
|
||||
setTags((prev) => prev.filter((entry) => entry.clientKey !== tag.clientKey));
|
||||
toast.success(t('common.saveSuccess'));
|
||||
} catch {
|
||||
toast.error(t('common.saveError'));
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('modulePages.tags.createTitle')}</CardTitle>
|
||||
<CardDescription>{t('modulePages.tags.createDescription')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.tags.name')}</Label>
|
||||
<Input value={draft.name} onChange={(event) => setDraft((prev) => ({ ...prev, name: event.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.tags.responseType')}</Label>
|
||||
<Select value={draft.responseType} onValueChange={(value) => setDraft((prev) => ({ ...prev, responseType: value as TagResponseType }))}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{RESPONSE_TYPES.map((type) => (
|
||||
<SelectItem key={type} value={type}>
|
||||
{t(`modulePages.tags.responseTypes.${type}`)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.tags.triggerWord')}</Label>
|
||||
<Input value={draft.triggerWord} onChange={(event) => setDraft((prev) => ({ ...prev, triggerWord: event.target.value }))} placeholder={t('common.optional')} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.tags.content')}</Label>
|
||||
<Textarea rows={3} value={draft.content} onChange={(event) => setDraft((prev) => ({ ...prev, content: event.target.value }))} />
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.tags.allowedRoleIds')}</Label>
|
||||
<Input value={draft.allowedRoleIdsText} onChange={(event) => setDraft((prev) => ({ ...prev, allowedRoleIdsText: event.target.value }))} placeholder={t('modulePages.tags.idsPlaceholder')} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.tags.allowedChannelIds')}</Label>
|
||||
<Input value={draft.allowedChannelIdsText} onChange={(event) => setDraft((prev) => ({ ...prev, allowedChannelIdsText: event.target.value }))} placeholder={t('modulePages.tags.idsPlaceholder')} />
|
||||
</div>
|
||||
</div>
|
||||
<Button type="button" onClick={handleCreate} disabled={creating}>
|
||||
<Plus className="size-4" />
|
||||
{creating ? t('common.saving') : t('modulePages.tags.create')}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('modulePages.tags.listTitle')}</CardTitle>
|
||||
<CardDescription>{t('modulePages.tags.listDescription')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{tags.length === 0 && <p className="text-sm text-muted-foreground">{t('modulePages.tags.empty')}</p>}
|
||||
{tags.map((tag) => (
|
||||
<div key={tag.clientKey} className="space-y-3 rounded-md border border-border p-4">
|
||||
<div className="grid gap-3 sm:grid-cols-3">
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.tags.name')}</Label>
|
||||
<Input value={tag.name} onChange={(event) => setTags((prev) => prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, name: event.target.value } : entry)))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.tags.responseType')}</Label>
|
||||
<Select value={tag.responseType} onValueChange={(value) => setTags((prev) => prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, responseType: value as TagResponseType } : entry)))}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{RESPONSE_TYPES.map((type) => (
|
||||
<SelectItem key={type} value={type}>
|
||||
{t(`modulePages.tags.responseTypes.${type}`)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.tags.triggerWord')}</Label>
|
||||
<Input value={tag.triggerWord ?? ''} onChange={(event) => setTags((prev) => prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, triggerWord: event.target.value || null } : entry)))} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.tags.content')}</Label>
|
||||
<Textarea rows={3} value={tag.content ?? ''} onChange={(event) => setTags((prev) => prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, content: event.target.value } : entry)))} />
|
||||
</div>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.tags.allowedRoleIds')}</Label>
|
||||
<Input value={tag.allowedRoleIdsText} onChange={(event) => setTags((prev) => prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, allowedRoleIdsText: event.target.value } : entry)))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.tags.allowedChannelIds')}</Label>
|
||||
<Input value={tag.allowedChannelIdsText} onChange={(event) => setTags((prev) => prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, allowedChannelIdsText: event.target.value } : entry)))} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button type="button" variant="outline" disabled={tag.saving} onClick={() => handleSave(tag)}>
|
||||
{tag.saving ? t('common.saving') : t('common.save')}
|
||||
</Button>
|
||||
<Button type="button" variant="ghost" size="icon" aria-label={t('common.remove')} onClick={() => handleDelete(tag)}>
|
||||
<Trash2 className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
239
apps/webui/src/components/modules/ticket-categories-manager.tsx
Normal file
239
apps/webui/src/components/modules/ticket-categories-manager.tsx
Normal file
@@ -0,0 +1,239 @@
|
||||
'use client';
|
||||
|
||||
import type { TicketCategoryDashboard } from '@nexumi/shared';
|
||||
import { Plus, Trash2 } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import { useTranslations } from '@/components/locale-provider';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
|
||||
interface LocalCategory extends TicketCategoryDashboard {
|
||||
clientKey: string;
|
||||
saving?: boolean;
|
||||
}
|
||||
|
||||
function toCsv(ids: string[]): string {
|
||||
return ids.join(', ');
|
||||
}
|
||||
|
||||
function fromCsv(text: string): string[] {
|
||||
return text
|
||||
.split(',')
|
||||
.map((entry) => entry.trim())
|
||||
.filter((entry) => entry.length > 0);
|
||||
}
|
||||
|
||||
const EMPTY_DRAFT = { name: '', description: '', emoji: '', supportRoleIdsText: '' };
|
||||
|
||||
interface TicketCategoriesManagerProps {
|
||||
guildId: string;
|
||||
initialCategories: TicketCategoryDashboard[];
|
||||
}
|
||||
|
||||
export function TicketCategoriesManager({ guildId, initialCategories }: TicketCategoriesManagerProps) {
|
||||
const t = useTranslations();
|
||||
const [categories, setCategories] = useState<LocalCategory[]>(
|
||||
initialCategories.map((category, index) => ({ ...category, clientKey: category.id ?? `existing-${index}` }))
|
||||
);
|
||||
const [draft, setDraft] = useState(EMPTY_DRAFT);
|
||||
const [creating, setCreating] = useState(false);
|
||||
|
||||
async function handleCreate() {
|
||||
if (!draft.name.trim()) {
|
||||
toast.error(t('modulePages.tickets.nameRequired'));
|
||||
return;
|
||||
}
|
||||
setCreating(true);
|
||||
try {
|
||||
const response = await fetch(`/api/guilds/${guildId}/tickets/categories`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: draft.name.trim(),
|
||||
description: draft.description.trim() || null,
|
||||
emoji: draft.emoji.trim() || null,
|
||||
supportRoleIds: fromCsv(draft.supportRoleIdsText)
|
||||
})
|
||||
});
|
||||
const body = (await response.json().catch(() => null)) as (TicketCategoryDashboard & { error?: string }) | null;
|
||||
if (!response.ok || !body) {
|
||||
toast.error(body?.error ?? t('common.saveError'));
|
||||
return;
|
||||
}
|
||||
setCategories((prev) => [...prev, { ...body, clientKey: body.id ?? `new-${Date.now()}` }]);
|
||||
setDraft(EMPTY_DRAFT);
|
||||
toast.success(t('common.saveSuccess'));
|
||||
} catch {
|
||||
toast.error(t('common.saveError'));
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSaveRow(category: LocalCategory) {
|
||||
setCategories((prev) =>
|
||||
prev.map((entry) => (entry.clientKey === category.clientKey ? { ...entry, saving: true } : entry))
|
||||
);
|
||||
try {
|
||||
const response = await fetch(`/api/guilds/${guildId}/tickets/categories/${category.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: category.name,
|
||||
description: category.description,
|
||||
emoji: category.emoji,
|
||||
supportRoleIds: category.supportRoleIds
|
||||
})
|
||||
});
|
||||
const body = (await response.json().catch(() => null)) as (TicketCategoryDashboard & { error?: string }) | null;
|
||||
if (!response.ok || !body) {
|
||||
toast.error(body?.error ?? t('common.saveError'));
|
||||
return;
|
||||
}
|
||||
toast.success(t('common.saveSuccess'));
|
||||
} catch {
|
||||
toast.error(t('common.saveError'));
|
||||
} finally {
|
||||
setCategories((prev) =>
|
||||
prev.map((entry) => (entry.clientKey === category.clientKey ? { ...entry, saving: false } : entry))
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(category: LocalCategory) {
|
||||
try {
|
||||
const response = await fetch(`/api/guilds/${guildId}/tickets/categories/${category.id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
if (!response.ok) {
|
||||
toast.error(t('common.saveError'));
|
||||
return;
|
||||
}
|
||||
setCategories((prev) => prev.filter((entry) => entry.clientKey !== category.clientKey));
|
||||
toast.success(t('common.saveSuccess'));
|
||||
} catch {
|
||||
toast.error(t('common.saveError'));
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('modulePages.tickets.categoriesTitle')}</CardTitle>
|
||||
<CardDescription>{t('modulePages.tickets.categoriesDescription')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{categories.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">{t('modulePages.tickets.categoriesEmpty')}</p>
|
||||
)}
|
||||
{categories.map((category) => (
|
||||
<div key={category.clientKey} className="space-y-3 rounded-md border border-border p-4">
|
||||
<div className="grid gap-3 sm:grid-cols-4">
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.tickets.categoryName')}</Label>
|
||||
<Input
|
||||
value={category.name}
|
||||
onChange={(event) =>
|
||||
setCategories((prev) =>
|
||||
prev.map((entry) =>
|
||||
entry.clientKey === category.clientKey ? { ...entry, name: event.target.value } : entry
|
||||
)
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.tickets.categoryEmoji')}</Label>
|
||||
<Input
|
||||
value={category.emoji ?? ''}
|
||||
onChange={(event) =>
|
||||
setCategories((prev) =>
|
||||
prev.map((entry) =>
|
||||
entry.clientKey === category.clientKey ? { ...entry, emoji: event.target.value } : entry
|
||||
)
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 space-y-2">
|
||||
<Label>{t('modulePages.tickets.categoryDescription')}</Label>
|
||||
<Input
|
||||
value={category.description ?? ''}
|
||||
onChange={(event) =>
|
||||
setCategories((prev) =>
|
||||
prev.map((entry) =>
|
||||
entry.clientKey === category.clientKey
|
||||
? { ...entry, description: event.target.value }
|
||||
: entry
|
||||
)
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.tickets.supportRoleIds')}</Label>
|
||||
<Input
|
||||
value={toCsv(category.supportRoleIds)}
|
||||
onChange={(event) =>
|
||||
setCategories((prev) =>
|
||||
prev.map((entry) =>
|
||||
entry.clientKey === category.clientKey
|
||||
? { ...entry, supportRoleIds: fromCsv(event.target.value) }
|
||||
: entry
|
||||
)
|
||||
)
|
||||
}
|
||||
placeholder={t('modulePages.tickets.idsPlaceholder')}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button type="button" variant="outline" onClick={() => handleSaveRow(category)} disabled={category.saving}>
|
||||
{category.saving ? t('common.saving') : t('common.save')}
|
||||
</Button>
|
||||
<Button type="button" variant="ghost" size="icon" aria-label={t('common.remove')} onClick={() => handleDelete(category)}>
|
||||
<Trash2 className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="space-y-3 rounded-md border border-dashed border-border p-4">
|
||||
<p className="text-sm font-medium">{t('modulePages.tickets.addCategory')}</p>
|
||||
<div className="grid gap-3 sm:grid-cols-4">
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.tickets.categoryName')}</Label>
|
||||
<Input value={draft.name} onChange={(event) => setDraft((prev) => ({ ...prev, name: event.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.tickets.categoryEmoji')}</Label>
|
||||
<Input value={draft.emoji} onChange={(event) => setDraft((prev) => ({ ...prev, emoji: event.target.value }))} />
|
||||
</div>
|
||||
<div className="col-span-2 space-y-2">
|
||||
<Label>{t('modulePages.tickets.categoryDescription')}</Label>
|
||||
<Input
|
||||
value={draft.description}
|
||||
onChange={(event) => setDraft((prev) => ({ ...prev, description: event.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.tickets.supportRoleIds')}</Label>
|
||||
<Input
|
||||
value={draft.supportRoleIdsText}
|
||||
onChange={(event) => setDraft((prev) => ({ ...prev, supportRoleIdsText: event.target.value }))}
|
||||
placeholder={t('modulePages.tickets.idsPlaceholder')}
|
||||
/>
|
||||
</div>
|
||||
<Button type="button" variant="outline" onClick={handleCreate} disabled={creating}>
|
||||
<Plus className="size-4" />
|
||||
{t('modulePages.tickets.addCategory')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
133
apps/webui/src/components/modules/ticket-config-form.tsx
Normal file
133
apps/webui/src/components/modules/ticket-config-form.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
'use client';
|
||||
|
||||
import type { TicketConfigDashboard } from '@nexumi/shared';
|
||||
import { useId } from 'react';
|
||||
import { useTranslations } from '@/components/locale-provider';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import type { SettingsSaveResult } from '@/components/settings/settings-form';
|
||||
import { SettingsForm } from '@/components/settings/settings-form';
|
||||
|
||||
async function saveTicketConfig(guildId: string, value: TicketConfigDashboard): Promise<SettingsSaveResult> {
|
||||
try {
|
||||
const response = await fetch(`/api/guilds/${guildId}/tickets`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(value)
|
||||
});
|
||||
if (!response.ok) {
|
||||
const body = (await response.json().catch(() => null)) as { error?: string } | null;
|
||||
return { ok: false, error: body?.error ?? `Request failed with status ${response.status}` };
|
||||
}
|
||||
return { ok: true };
|
||||
} catch {
|
||||
return { ok: false, error: 'Network error' };
|
||||
}
|
||||
}
|
||||
|
||||
interface TicketConfigFormProps {
|
||||
guildId: string;
|
||||
initialValue: TicketConfigDashboard;
|
||||
}
|
||||
|
||||
export function TicketConfigForm({ guildId, initialValue }: TicketConfigFormProps) {
|
||||
const t = useTranslations();
|
||||
const categoryId = useId();
|
||||
const logChannelId = useId();
|
||||
const inactivityId = useId();
|
||||
|
||||
return (
|
||||
<SettingsForm<TicketConfigDashboard>
|
||||
initialValue={initialValue}
|
||||
onSave={(value) => saveTicketConfig(guildId, value)}
|
||||
>
|
||||
{({ value, setValue }) => (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('modulePages.tickets.title')}</CardTitle>
|
||||
<CardDescription>{t('modulePages.tickets.description')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between rounded-md border border-border p-4">
|
||||
<Label>{t('modulePages.tickets.enabledLabel')}</Label>
|
||||
<Switch
|
||||
checked={value.enabled}
|
||||
onCheckedChange={(enabled) => setValue((prev) => ({ ...prev, enabled }))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.tickets.mode')}</Label>
|
||||
<Select value={value.mode} onValueChange={(mode) => setValue((prev) => ({ ...prev, mode: mode as TicketConfigDashboard['mode'] }))}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="CHANNEL">{t('modulePages.tickets.mode.CHANNEL')}</SelectItem>
|
||||
<SelectItem value="THREAD">{t('modulePages.tickets.mode.THREAD')}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={categoryId}>{t('modulePages.tickets.categoryId')}</Label>
|
||||
<Input
|
||||
id={categoryId}
|
||||
value={value.categoryId}
|
||||
onChange={(event) => setValue((prev) => ({ ...prev, categoryId: event.target.value.trim() }))}
|
||||
placeholder="123456789012345678"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={logChannelId}>{t('modulePages.tickets.logChannelId')}</Label>
|
||||
<Input
|
||||
id={logChannelId}
|
||||
value={value.logChannelId}
|
||||
onChange={(event) => setValue((prev) => ({ ...prev, logChannelId: event.target.value.trim() }))}
|
||||
placeholder="123456789012345678"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={inactivityId}>{t('modulePages.tickets.inactivityHours')}</Label>
|
||||
<Input
|
||||
id={inactivityId}
|
||||
type="number"
|
||||
min={1}
|
||||
value={value.inactivityHours}
|
||||
onChange={(event) =>
|
||||
setValue((prev) => ({ ...prev, inactivityHours: Number(event.target.value) || 1 }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between rounded-md border border-border p-4">
|
||||
<div className="space-y-0.5">
|
||||
<Label>{t('modulePages.tickets.transcriptDm')}</Label>
|
||||
<p className="text-sm text-muted-foreground">{t('modulePages.tickets.transcriptDmHint')}</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={value.transcriptDm}
|
||||
onCheckedChange={(transcriptDm) => setValue((prev) => ({ ...prev, transcriptDm }))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between rounded-md border border-border p-4">
|
||||
<Label>{t('modulePages.tickets.ratingEnabled')}</Label>
|
||||
<Switch
|
||||
checked={value.ratingEnabled}
|
||||
onCheckedChange={(ratingEnabled) => setValue((prev) => ({ ...prev, ratingEnabled }))}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</SettingsForm>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user