Add template groups: bulk multi-location creation + duplicate action
For recurring jobs that repeat identically across many locations (e.g. clean AC filter in every room), one task_templates row per location is still required — schedule/completion tracking is per-location, which matters especially for floating mode — but creating and organising that many rows by hand didn't scale. - New template_groups table (id, unique name) + task_templates.group_id. POST /api/template-groups upserts by name so picking an existing group from the UI never creates a duplicate folder. - Recurring template form: optional group name (datalist-autocompleted from existing groups) plus a "create for multiple locations" toggle that reveals a checkbox list of locations; saving loops one createTemplate() call per selected location, all sharing the resolved group_id. - Duplicate button on each template row pre-fills the New Template form from that row (location/asset/next-due cleared for repicking), landing in the same group automatically — the lightweight path for adding one more room later without the bulk picker. - Recurring.tsx list now groups rows under a collapsible folder header per group_name; ungrouped templates render as flat rows as before.
This commit is contained in:
parent
c740b87f1b
commit
ee23cb1b16
6 changed files with 285 additions and 64 deletions
|
|
@ -1,6 +1,6 @@
|
|||
import type {
|
||||
Task, TaskDetail, TaskStatus, Location, Category, Asset, AssetDetail,
|
||||
Contractor, ContractorDetail, ContractorDoc, Template, AppConfig, AuthUser, TaskPhoto,
|
||||
Contractor, ContractorDetail, ContractorDoc, Template, TemplateGroup, AppConfig, AuthUser, TaskPhoto,
|
||||
} from './types'
|
||||
|
||||
const BASE = '/maintenance/api'
|
||||
|
|
@ -203,6 +203,15 @@ export function runDueTemplates(): Promise<{ ok: boolean; spawned: number }> {
|
|||
return request('/templates/run-due', { method: 'POST', body: JSON.stringify({}) })
|
||||
}
|
||||
|
||||
// Template groups (folders for recurring tasks repeated across many locations)
|
||||
export function fetchTemplateGroups(): Promise<TemplateGroup[]> {
|
||||
return request('/template-groups')
|
||||
}
|
||||
// Upsert by name — picking an existing name in the UI never creates a duplicate folder.
|
||||
export function upsertTemplateGroup(name: string): Promise<TemplateGroup> {
|
||||
return request('/template-groups', { method: 'POST', body: JSON.stringify({ name }) })
|
||||
}
|
||||
|
||||
// Config
|
||||
export function fetchConfig(): Promise<AppConfig> {
|
||||
return request('/config')
|
||||
|
|
|
|||
|
|
@ -431,6 +431,11 @@ table.data td { padding: 9px 12px; border-bottom: 1px solid var(--card-border);
|
|||
table.data tr:last-child td { border-bottom: none; }
|
||||
table.data tr.clickable { cursor: pointer; }
|
||||
table.data tr.clickable:hover td { background: var(--body-bg); }
|
||||
table.data tr.group-row { cursor: pointer; background: var(--body-bg); }
|
||||
table.data tr.group-row td { font-weight: 600; display: flex; align-items: center; gap: 6px; }
|
||||
table.data tr.group-row:hover td { background: var(--card-border); }
|
||||
.group-row-chevron { transition: transform .15s; }
|
||||
.group-row-chevron.open { transform: rotate(90deg); }
|
||||
|
||||
/* ── Stats strip ───────────────────────────────────────────── */
|
||||
.stats-strip { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { Plus, X, Play } from 'lucide-react'
|
||||
import type { Template, Category, Location, Asset, Priority, ScheduleMode } from '../types'
|
||||
import { Fragment, useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { Plus, X, Play, Copy, ChevronRight } from 'lucide-react'
|
||||
import type { Template, TemplateGroup, Category, Location, Asset, Priority, ScheduleMode } from '../types'
|
||||
import { PRIORITIES, PRIORITY_LABELS, can } from '../types'
|
||||
import { fetchTemplates, createTemplate, updateTemplate, runDueTemplates, fetchLocations, fetchAssets } from '../api'
|
||||
import {
|
||||
fetchTemplates, createTemplate, updateTemplate, runDueTemplates, fetchLocations, fetchAssets,
|
||||
fetchTemplateGroups, upsertTemplateGroup,
|
||||
} from '../api'
|
||||
import { useAuth } from '../components/AuthGate'
|
||||
import AssigneeSelect, { type Assignment } from '../components/AssigneeSelect'
|
||||
import { PriorityBadge, formatDate } from '../components/shared'
|
||||
|
|
@ -21,23 +24,30 @@ interface TemplateForm {
|
|||
template_notes: string
|
||||
active: boolean
|
||||
schedule_mode: ScheduleMode
|
||||
group_name: string
|
||||
assignment: Assignment
|
||||
// Bulk creation only — never sent as-is, resolved into one row per location.
|
||||
multiLocation: boolean
|
||||
location_ids: number[]
|
||||
}
|
||||
|
||||
const EMPTY: TemplateForm = {
|
||||
title: '', description: '', location_id: '', asset_id: '', priority: 'medium', unusable: false,
|
||||
interval_value: 1, interval_unit: 'months', next_due: '', template_notes: '', active: true,
|
||||
schedule_mode: 'fixed',
|
||||
schedule_mode: 'fixed', group_name: '',
|
||||
assignment: { assigned_type: 'staff', assigned_to: null, assigned_to_name: null, contractor_id: null },
|
||||
multiLocation: false, location_ids: [],
|
||||
}
|
||||
|
||||
export default function Recurring() {
|
||||
const { user } = useAuth()
|
||||
const [templates, setTemplates] = useState<Template[]>([])
|
||||
const [groups, setGroups] = useState<TemplateGroup[]>([])
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [locations, setLocations] = useState<Location[]>([])
|
||||
const [assets, setAssets] = useState<Asset[]>([])
|
||||
const [form, setForm] = useState<TemplateForm | null>(null)
|
||||
const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set())
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [info, setInfo] = useState<string | null>(null)
|
||||
|
||||
|
|
@ -45,6 +55,7 @@ export default function Recurring() {
|
|||
|
||||
const load = useCallback(() => {
|
||||
fetchTemplates().then(setTemplates).catch(err => setError(err.message))
|
||||
fetchTemplateGroups().then(setGroups).catch(() => {})
|
||||
}, [])
|
||||
useEffect(() => { load() }, [load])
|
||||
useEffect(() => {
|
||||
|
|
@ -52,7 +63,7 @@ export default function Recurring() {
|
|||
fetchAssets().then(setAssets).catch(() => {})
|
||||
}, [])
|
||||
|
||||
const grouped = useMemo(() => categories.map(c => ({
|
||||
const locationGroups = useMemo(() => categories.map(c => ({
|
||||
category: c,
|
||||
locations: locations.filter(l => l.category_id === c.id),
|
||||
})).filter(g => g.locations.length), [categories, locations])
|
||||
|
|
@ -62,17 +73,95 @@ export default function Recurring() {
|
|||
[assets, form?.location_id]
|
||||
)
|
||||
|
||||
const { groupSections, ungrouped } = useMemo(() => {
|
||||
const byGroup = new Map<string, Template[]>()
|
||||
const solo: Template[] = []
|
||||
for (const t of templates) {
|
||||
if (t.group_name) {
|
||||
if (!byGroup.has(t.group_name)) byGroup.set(t.group_name, [])
|
||||
byGroup.get(t.group_name)!.push(t)
|
||||
} else {
|
||||
solo.push(t)
|
||||
}
|
||||
}
|
||||
const sections = [...byGroup.entries()]
|
||||
.sort(([a], [b]) => a.localeCompare(b))
|
||||
.map(([name, members]) => ({ name, templates: members }))
|
||||
return { groupSections: sections, ungrouped: solo }
|
||||
}, [templates])
|
||||
|
||||
function toggleGroup(name: string) {
|
||||
setCollapsedGroups(prev => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(name)) next.delete(name)
|
||||
else next.add(name)
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
function openEdit(t: Template) {
|
||||
if (!canManage) return
|
||||
setForm({
|
||||
id: t.id, title: t.title, description: t.description || '',
|
||||
location_id: t.location_id, asset_id: t.asset_id || '', priority: t.priority,
|
||||
unusable: t.unusable, interval_value: t.interval_value, interval_unit: t.interval_unit,
|
||||
next_due: t.next_due.slice(0, 10), template_notes: t.template_notes, active: t.active,
|
||||
schedule_mode: t.schedule_mode, group_name: t.group_name || '',
|
||||
assignment: {
|
||||
assigned_type: t.assigned_type, assigned_to: t.assigned_to,
|
||||
assigned_to_name: t.assigned_to_name, contractor_id: t.contractor_id,
|
||||
},
|
||||
multiLocation: false, location_ids: [],
|
||||
})
|
||||
}
|
||||
|
||||
// Prefills a new template from an existing one — location/asset/due date are
|
||||
// cleared since the whole point is picking a *different* room. Lands in the
|
||||
// same group automatically so a one-off addition to "Clean AC filter" etc.
|
||||
// doesn't need the full multi-location picker.
|
||||
function duplicate(t: Template) {
|
||||
setForm({
|
||||
title: t.title, description: t.description || '',
|
||||
location_id: '', asset_id: '', priority: t.priority,
|
||||
unusable: t.unusable, interval_value: t.interval_value, interval_unit: t.interval_unit,
|
||||
next_due: '', template_notes: t.template_notes, active: true,
|
||||
schedule_mode: t.schedule_mode, group_name: t.group_name || '',
|
||||
assignment: {
|
||||
assigned_type: t.assigned_type, assigned_to: t.assigned_to,
|
||||
assigned_to_name: t.assigned_to_name, contractor_id: t.contractor_id,
|
||||
},
|
||||
multiLocation: false, location_ids: [],
|
||||
})
|
||||
}
|
||||
|
||||
function toggleFormLocation(id: number) {
|
||||
if (!form) return
|
||||
setForm({
|
||||
...form,
|
||||
location_ids: form.location_ids.includes(id)
|
||||
? form.location_ids.filter(x => x !== id)
|
||||
: [...form.location_ids, id],
|
||||
})
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if (!form || !form.title.trim() || !form.location_id || !form.next_due) {
|
||||
setError('Title, location and first due date are required')
|
||||
if (!form || !form.title.trim() || !form.next_due) {
|
||||
setError('Title and first due date are required')
|
||||
return
|
||||
}
|
||||
if (form.multiLocation) {
|
||||
if (!form.group_name.trim()) { setError('A group name is required when creating for multiple locations'); return }
|
||||
if (form.location_ids.length === 0) { setError('Select at least one location'); return }
|
||||
} else if (!form.location_id) {
|
||||
setError('Location is required')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const body = {
|
||||
const groupId = form.group_name.trim() ? (await upsertTemplateGroup(form.group_name.trim())).id : null
|
||||
const base = {
|
||||
title: form.title.trim(),
|
||||
description: form.description || null,
|
||||
location_id: form.location_id,
|
||||
asset_id: form.asset_id || null,
|
||||
priority: form.priority,
|
||||
unusable: form.unusable,
|
||||
interval_value: form.interval_value,
|
||||
|
|
@ -81,13 +170,23 @@ export default function Recurring() {
|
|||
template_notes: form.template_notes,
|
||||
active: form.active,
|
||||
schedule_mode: form.schedule_mode,
|
||||
group_id: groupId,
|
||||
assigned_type: form.assignment.assigned_type,
|
||||
assigned_to: form.assignment.assigned_to,
|
||||
assigned_to_name: form.assignment.assigned_to_name,
|
||||
contractor_id: form.assignment.contractor_id,
|
||||
}
|
||||
if (form.id) await updateTemplate(form.id, body)
|
||||
else await createTemplate(body)
|
||||
|
||||
if (form.multiLocation) {
|
||||
await Promise.all(form.location_ids.map(location_id =>
|
||||
createTemplate({ ...base, location_id, asset_id: null })
|
||||
))
|
||||
setInfo(`Created ${form.location_ids.length} templates in "${form.group_name.trim()}"`)
|
||||
} else {
|
||||
const body = { ...base, location_id: form.location_id, asset_id: form.asset_id || null }
|
||||
if (form.id) await updateTemplate(form.id, body)
|
||||
else await createTemplate(body)
|
||||
}
|
||||
setForm(null)
|
||||
setError(null)
|
||||
load()
|
||||
|
|
@ -96,6 +195,32 @@ export default function Recurring() {
|
|||
}
|
||||
}
|
||||
|
||||
function renderRow(t: Template) {
|
||||
return (
|
||||
<tr key={t.id} className={canManage ? 'clickable' : ''} onClick={() => openEdit(t)}>
|
||||
<td>{t.title}</td>
|
||||
<td>{t.location_name}</td>
|
||||
<td>{t.asset_name || '—'}</td>
|
||||
<td><PriorityBadge priority={t.priority} /></td>
|
||||
<td>{t.interval_value} {t.interval_unit}{t.schedule_mode === 'floating' && <span className="field-hint" style={{ display: 'block' }}>after completion</span>}</td>
|
||||
<td className={!t.pending_task_id && new Date(t.next_due) <= new Date() ? 'overdue' : ''}>
|
||||
{t.schedule_mode === 'floating' && t.pending_task_id
|
||||
? <span className="badge badge-outline">awaiting completion</span>
|
||||
: formatDate(t.next_due)}
|
||||
</td>
|
||||
<td>{t.assigned_type === 'contractor' ? (t.contractor_name || '—') : (t.assigned_to_name || 'Unassigned')}</td>
|
||||
<td>{!t.active && <span className="badge badge-outline">paused</span>}</td>
|
||||
<td>
|
||||
{canManage && (
|
||||
<button className="btn btn-sm" title="Duplicate to another location" onClick={e => { e.stopPropagation(); duplicate(t) }}>
|
||||
<Copy size={13} strokeWidth={1.75} />
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page-header">
|
||||
|
|
@ -118,37 +243,27 @@ export default function Recurring() {
|
|||
<div className="table-wrap">
|
||||
<table className="data">
|
||||
<thead>
|
||||
<tr><th>Task</th><th>Location</th><th>Asset</th><th>Priority</th><th>Every</th><th>Next due</th><th>Allocated</th><th></th></tr>
|
||||
<tr><th>Task</th><th>Location</th><th>Asset</th><th>Priority</th><th>Every</th><th>Next due</th><th>Allocated</th><th></th><th></th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{templates.map(t => (
|
||||
<tr key={t.id} className={canManage ? 'clickable' : ''} onClick={() => canManage && setForm({
|
||||
id: t.id, title: t.title, description: t.description || '',
|
||||
location_id: t.location_id, asset_id: t.asset_id || '', priority: t.priority,
|
||||
unusable: t.unusable, interval_value: t.interval_value, interval_unit: t.interval_unit,
|
||||
next_due: t.next_due.slice(0, 10), template_notes: t.template_notes, active: t.active,
|
||||
schedule_mode: t.schedule_mode,
|
||||
assignment: {
|
||||
assigned_type: t.assigned_type, assigned_to: t.assigned_to,
|
||||
assigned_to_name: t.assigned_to_name, contractor_id: t.contractor_id,
|
||||
},
|
||||
})}>
|
||||
<td>{t.title}</td>
|
||||
<td>{t.location_name}</td>
|
||||
<td>{t.asset_name || '—'}</td>
|
||||
<td><PriorityBadge priority={t.priority} /></td>
|
||||
<td>{t.interval_value} {t.interval_unit}{t.schedule_mode === 'floating' && <span className="field-hint" style={{ display: 'block' }}>after completion</span>}</td>
|
||||
<td className={!t.pending_task_id && new Date(t.next_due) <= new Date() ? 'overdue' : ''}>
|
||||
{t.schedule_mode === 'floating' && t.pending_task_id
|
||||
? <span className="badge badge-outline">awaiting completion</span>
|
||||
: formatDate(t.next_due)}
|
||||
</td>
|
||||
<td>{t.assigned_type === 'contractor' ? (t.contractor_name || '—') : (t.assigned_to_name || 'Unassigned')}</td>
|
||||
<td>{!t.active && <span className="badge badge-outline">paused</span>}</td>
|
||||
</tr>
|
||||
))}
|
||||
{groupSections.map(g => {
|
||||
const isOpen = !collapsedGroups.has(g.name)
|
||||
return (
|
||||
<Fragment key={g.name}>
|
||||
<tr className="group-row" onClick={() => toggleGroup(g.name)}>
|
||||
<td colSpan={9}>
|
||||
<ChevronRight size={14} strokeWidth={1.75} className={`group-row-chevron${isOpen ? ' open' : ''}`} />
|
||||
{g.name}
|
||||
<span className="badge badge-outline">{g.templates.length} location{g.templates.length === 1 ? '' : 's'}</span>
|
||||
</td>
|
||||
</tr>
|
||||
{isOpen && g.templates.map(renderRow)}
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
{ungrouped.map(renderRow)}
|
||||
{templates.length === 0 && (
|
||||
<tr><td colSpan={8} className="empty-state">No recurring templates — set up fire alarm tests, boiler service, legionella flushing…</td></tr>
|
||||
<tr><td colSpan={9} className="empty-state">No recurring templates — set up fire alarm tests, boiler service, legionella flushing…</td></tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -165,24 +280,67 @@ export default function Recurring() {
|
|||
<div className="field"><label>Title</label>
|
||||
<input type="text" value={form.title} onChange={e => setForm({ ...form, title: e.target.value })} placeholder="e.g. Fire alarm weekly test" autoFocus />
|
||||
</div>
|
||||
<div className="field"><label>Location</label>
|
||||
<select value={form.location_id} onChange={e => setForm({ ...form, location_id: e.target.value ? parseInt(e.target.value) : '', asset_id: '' })}>
|
||||
<option value="">Select location…</option>
|
||||
{grouped.map(g => (
|
||||
<optgroup key={g.category.id} label={g.category.name}>
|
||||
{g.locations.map(l => <option key={l.id} value={l.id}>{l.name}</option>)}
|
||||
</optgroup>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<div className="field"><label>Group / folder (optional)</label>
|
||||
<input
|
||||
type="text" list="template-group-names" value={form.group_name}
|
||||
onChange={e => setForm({ ...form, group_name: e.target.value })}
|
||||
placeholder="e.g. Clean AC filter"
|
||||
/>
|
||||
<datalist id="template-group-names">
|
||||
{groups.map(g => <option key={g.id} value={g.name} />)}
|
||||
</datalist>
|
||||
<div className="field-hint">Groups the same recurring job across rooms into one folder on the list below. Type an existing name to add to it, or a new one to start a folder.</div>
|
||||
</div>
|
||||
{formAssets.length > 0 && (
|
||||
<div className="field"><label>Asset (optional)</label>
|
||||
<select value={form.asset_id} onChange={e => setForm({ ...form, asset_id: e.target.value ? parseInt(e.target.value) : '' })}>
|
||||
<option value="">None</option>
|
||||
{formAssets.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{!form.id && (
|
||||
<label className="field-check">
|
||||
<input type="checkbox" checked={form.multiLocation} onChange={e => setForm({ ...form, multiLocation: e.target.checked, location_ids: [] })} />
|
||||
Create for multiple locations at once
|
||||
</label>
|
||||
)}
|
||||
|
||||
{form.multiLocation ? (
|
||||
<div className="field">
|
||||
<label>Locations</label>
|
||||
<div className="table-wrap" style={{ maxHeight: 220, overflowY: 'auto', padding: '4px 10px' }}>
|
||||
{locationGroups.map(g => (
|
||||
<div key={g.category.id} style={{ marginBottom: 8 }}>
|
||||
<div className="field-hint" style={{ fontWeight: 600, margin: '6px 0 2px' }}>{g.category.name}</div>
|
||||
{g.locations.map(l => (
|
||||
<label key={l.id} className="field-check" style={{ marginBottom: 2 }}>
|
||||
<input type="checkbox" checked={form.location_ids.includes(l.id)} onChange={() => toggleFormLocation(l.id)} />
|
||||
{l.name}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="field-hint">{form.location_ids.length} location{form.location_ids.length === 1 ? '' : 's'} selected — one template is created per location, all in the group above.</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="field"><label>Location</label>
|
||||
<select value={form.location_id} onChange={e => setForm({ ...form, location_id: e.target.value ? parseInt(e.target.value) : '', asset_id: '' })}>
|
||||
<option value="">Select location…</option>
|
||||
{locationGroups.map(g => (
|
||||
<optgroup key={g.category.id} label={g.category.name}>
|
||||
{g.locations.map(l => <option key={l.id} value={l.id}>{l.name}</option>)}
|
||||
</optgroup>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{formAssets.length > 0 && (
|
||||
<div className="field"><label>Asset (optional)</label>
|
||||
<select value={form.asset_id} onChange={e => setForm({ ...form, asset_id: e.target.value ? parseInt(e.target.value) : '' })}>
|
||||
<option value="">None</option>
|
||||
{formAssets.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="field"><label>Description</label>
|
||||
<textarea value={form.description} onChange={e => setForm({ ...form, description: e.target.value })} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -209,6 +209,13 @@ export interface Template {
|
|||
active: boolean
|
||||
schedule_mode: ScheduleMode
|
||||
pending_task_id: number | null
|
||||
group_id: number | null
|
||||
group_name: string | null
|
||||
}
|
||||
|
||||
export interface TemplateGroup {
|
||||
id: number
|
||||
name: string
|
||||
}
|
||||
|
||||
export interface AppConfig {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue