20 lines
2.6 KiB
TypeScript
20 lines
2.6 KiB
TypeScript
"use client"
|
|
import {useState} from "react"
|
|
import type {AlertGroup} from "@mmapp/contracts/alerts"
|
|
import {Input} from "@/components/ui/input"
|
|
import {Button} from "@/components/ui/button"
|
|
export function AlertsGroupForm({group,disabled,onSave,onDelete}:{group:AlertGroup;disabled:boolean;onSave:(patch:Partial<AlertGroup>)=>Promise<boolean>;onDelete:()=>void}){
|
|
const [draft,setDraft]=useState<Partial<AlertGroup>>({})
|
|
const value={...group,...draft},dirty=Object.keys(draft).some(key=>value[key as keyof AlertGroup]!==group[key as keyof AlertGroup])
|
|
return <section aria-label={"Группа "+group.name} className="rounded-lg border border-border p-3 space-y-3">
|
|
<fieldset disabled={disabled} className="space-y-3 min-w-0">
|
|
<Input aria-label="Имя группы" value={value.name} onChange={e=>setDraft(previous=>({...previous,name:e.target.value}))} className="text-xs"/>
|
|
<label className="flex flex-wrap items-center gap-2 text-xs">Режим<select aria-label="Режим группы" value={value.combineMode} onChange={e=>setDraft(previous=>({...previous,combineMode:e.target.value==="all"?"all":"any"}))} className="h-8 border border-input rounded-md bg-background px-2"><option value="any">ANY (или)</option><option value="all">ALL (и)</option></select></label>
|
|
<label className="flex flex-wrap items-center gap-2 text-xs">Cooldown<select aria-label="Cooldown группы" value={value.cooldownOverride??""} onChange={e=>setDraft(previous=>({...previous,cooldownOverride:e.target.value===""?null:e.target.value as AlertGroup["cooldownOverride"]}))} className="h-8 border border-input rounded-md bg-background px-2"><option value="">По умолчанию</option>{["1м","5м","15м","1ч","4ч","24ч"].map(c=><option key={c} value={c}>{c}</option>)}</select></label>
|
|
<label className="flex items-center gap-2 text-xs"><input type="checkbox" checked={value.enabled} onChange={e=>setDraft(previous=>({...previous,enabled:e.target.checked}))}/>Группа включена</label>
|
|
<div className="flex flex-wrap gap-2"><Button type="button" size="sm" disabled={!dirty||!value.name.trim()} onClick={async()=>{if(await onSave(draft))setDraft({})}}>Сохранить группу</Button><Button type="button" size="sm" variant="ghost" disabled={!dirty} onClick={()=>setDraft({})}>Сбросить</Button><Button type="button" size="sm" variant="outline" onClick={onDelete}>Удалить группу</Button></div>
|
|
</fieldset>
|
|
{dirty?<p role="status" className="text-xs text-muted-foreground">Изменения группы ещё не сохранены.</p>:null}
|
|
</section>
|
|
}
|