feat(11-02): add sitesApi client and SiteFormDialog component
- Sites API client with CRUD, device assignment, and bulk-assign methods - SiteFormDialog handles create and edit with mutation and cache invalidation - Form fields: name, address, lat/lng, elevation, notes Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jason Staack
182
frontend/src/components/sites/SiteFormDialog.tsx
Normal file
182
frontend/src/components/sites/SiteFormDialog.tsx
Normal file
@@ -0,0 +1,182 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { sitesApi, type SiteResponse, type SiteCreate, type SiteUpdate } from '@/lib/api'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Button } from '@/components/ui/button'
|
||||
|
||||
interface SiteFormDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
tenantId: string
|
||||
site?: SiteResponse | null
|
||||
}
|
||||
|
||||
export function SiteFormDialog({ open, onOpenChange, tenantId, site }: SiteFormDialogProps) {
|
||||
const queryClient = useQueryClient()
|
||||
const isEdit = !!site
|
||||
|
||||
const [name, setName] = useState('')
|
||||
const [address, setAddress] = useState('')
|
||||
const [latitude, setLatitude] = useState('')
|
||||
const [longitude, setLongitude] = useState('')
|
||||
const [elevation, setElevation] = useState('')
|
||||
const [notes, setNotes] = useState('')
|
||||
|
||||
// Populate form when editing or reset when dialog opens/closes
|
||||
useEffect(() => {
|
||||
if (site) {
|
||||
setName(site.name)
|
||||
setAddress(site.address ?? '')
|
||||
setLatitude(site.latitude != null ? String(site.latitude) : '')
|
||||
setLongitude(site.longitude != null ? String(site.longitude) : '')
|
||||
setElevation(site.elevation != null ? String(site.elevation) : '')
|
||||
setNotes(site.notes ?? '')
|
||||
} else {
|
||||
setName('')
|
||||
setAddress('')
|
||||
setLatitude('')
|
||||
setLongitude('')
|
||||
setElevation('')
|
||||
setNotes('')
|
||||
}
|
||||
}, [site, open])
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: SiteCreate) => sitesApi.create(tenantId, data),
|
||||
onSuccess: () => {
|
||||
void queryClient.invalidateQueries({ queryKey: ['sites', tenantId] })
|
||||
onOpenChange(false)
|
||||
},
|
||||
})
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: (data: SiteUpdate) => sitesApi.update(tenantId, site!.id, data),
|
||||
onSuccess: () => {
|
||||
void queryClient.invalidateQueries({ queryKey: ['sites', tenantId] })
|
||||
onOpenChange(false)
|
||||
},
|
||||
})
|
||||
|
||||
const isPending = createMutation.isPending || updateMutation.isPending
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
const data = {
|
||||
name: name.trim(),
|
||||
address: address.trim() || null,
|
||||
latitude: latitude ? parseFloat(latitude) : null,
|
||||
longitude: longitude ? parseFloat(longitude) : null,
|
||||
elevation: elevation ? parseFloat(elevation) : null,
|
||||
notes: notes.trim() || null,
|
||||
}
|
||||
|
||||
if (isEdit) {
|
||||
updateMutation.mutate(data)
|
||||
} else {
|
||||
createMutation.mutate(data)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{isEdit ? 'Edit Site' : 'Create Site'}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{isEdit ? 'Update site details.' : 'Add a new site to organize devices by physical location.'}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="site-name">Name *</Label>
|
||||
<Input
|
||||
id="site-name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Main Office"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="site-address">Address</Label>
|
||||
<Input
|
||||
id="site-address"
|
||||
value={address}
|
||||
onChange={(e) => setAddress(e.target.value)}
|
||||
placeholder="123 Main St, City, State"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="site-latitude">Latitude</Label>
|
||||
<Input
|
||||
id="site-latitude"
|
||||
type="number"
|
||||
step="any"
|
||||
value={latitude}
|
||||
onChange={(e) => setLatitude(e.target.value)}
|
||||
placeholder="-33.8688"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="site-longitude">Longitude</Label>
|
||||
<Input
|
||||
id="site-longitude"
|
||||
type="number"
|
||||
step="any"
|
||||
value={longitude}
|
||||
onChange={(e) => setLongitude(e.target.value)}
|
||||
placeholder="151.2093"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="site-elevation">Elevation (m)</Label>
|
||||
<Input
|
||||
id="site-elevation"
|
||||
type="number"
|
||||
step="any"
|
||||
value={elevation}
|
||||
onChange={(e) => setElevation(e.target.value)}
|
||||
placeholder="58"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="site-notes">Notes</Label>
|
||||
<textarea
|
||||
id="site-notes"
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
placeholder="Additional details about this site..."
|
||||
rows={3}
|
||||
className="flex w-full rounded-md border border-border bg-elevated/50 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted transition-colors focus:border-accent focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={!name.trim() || isPending}>
|
||||
{isEdit ? 'Save Changes' : 'Create Site'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -493,6 +493,77 @@ export const deviceTagsApi = {
|
||||
api.delete(`/api/tenants/${tenantId}/device-tags/${tagId}`).then((r) => r.data),
|
||||
}
|
||||
|
||||
// ─── Sites ───────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface SiteResponse {
|
||||
id: string
|
||||
name: string
|
||||
latitude: number | null
|
||||
longitude: number | null
|
||||
address: string | null
|
||||
elevation: number | null
|
||||
notes: string | null
|
||||
device_count: number
|
||||
online_count: number
|
||||
online_percent: number
|
||||
alert_count: number
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface SiteListResponse {
|
||||
sites: SiteResponse[]
|
||||
unassigned_count: number
|
||||
}
|
||||
|
||||
export interface SiteCreate {
|
||||
name: string
|
||||
latitude?: number | null
|
||||
longitude?: number | null
|
||||
address?: string | null
|
||||
elevation?: number | null
|
||||
notes?: string | null
|
||||
}
|
||||
|
||||
export interface SiteUpdate {
|
||||
name?: string
|
||||
latitude?: number | null
|
||||
longitude?: number | null
|
||||
address?: string | null
|
||||
elevation?: number | null
|
||||
notes?: string | null
|
||||
}
|
||||
|
||||
export const sitesApi = {
|
||||
list: (tenantId: string) =>
|
||||
api.get<SiteListResponse>(`/api/tenants/${tenantId}/sites`).then((r) => r.data),
|
||||
|
||||
get: (tenantId: string, siteId: string) =>
|
||||
api.get<SiteResponse>(`/api/tenants/${tenantId}/sites/${siteId}`).then((r) => r.data),
|
||||
|
||||
create: (tenantId: string, data: SiteCreate) =>
|
||||
api.post<SiteResponse>(`/api/tenants/${tenantId}/sites`, data).then((r) => r.data),
|
||||
|
||||
update: (tenantId: string, siteId: string, data: SiteUpdate) =>
|
||||
api.put<SiteResponse>(`/api/tenants/${tenantId}/sites/${siteId}`, data).then((r) => r.data),
|
||||
|
||||
delete: (tenantId: string, siteId: string) =>
|
||||
api.delete(`/api/tenants/${tenantId}/sites/${siteId}`).then((r) => r.data),
|
||||
|
||||
assignDevice: (tenantId: string, siteId: string, deviceId: string) =>
|
||||
api.post(`/api/tenants/${tenantId}/sites/${siteId}/devices/${deviceId}`).then((r) => r.data),
|
||||
|
||||
removeDevice: (tenantId: string, siteId: string, deviceId: string) =>
|
||||
api.delete(`/api/tenants/${tenantId}/sites/${siteId}/devices/${deviceId}`).then((r) => r.data),
|
||||
|
||||
bulkAssign: (tenantId: string, siteId: string, deviceIds: string[]) =>
|
||||
api
|
||||
.post<{ assigned: number }>(`/api/tenants/${tenantId}/sites/${siteId}/devices/bulk-assign`, {
|
||||
device_ids: deviceIds,
|
||||
})
|
||||
.then((r) => r.data),
|
||||
}
|
||||
|
||||
// ─── Metrics ──────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface HealthMetricPoint {
|
||||
|
||||
Reference in New Issue
Block a user