SyslogSolution/denya-onecare
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Sprint A Wahab review batch — categories, property hierarchy, priority grouping

Browse Source 
Items 1-5, 9, 11 from denya-wahab-feedback-s2:
- Category.show_in_form (alert-only flag): Gas Leak hidden from issue picker
  but kept urgent for SLA/alert and reporting; emergency quick path on the
  new-issue form creates urgent tickets via include_hidden categories.
- Seed: Aluminum/Glass, Carpentry, Mould & Damp (Medium default) maintenance
  categories; Lost Property renamed Missing Item (+ sub).
- One alembic migration: add show_in_form (backfill True, Gas Leak False) +
  data rename Lost Property -> Missing Item.
- Property -> Building -> Apartment cascade with searchable apartment combobox
  on the new-issue form and ticket list filters; /api/tickets/units gains
  building filter + /units/grouped variant; /api/tickets gains additive
  building/unit_id filters. apartment_mapping.json committed (deterministic).
- Group-by-priority toggle on /tickets (four sections + unknown bucket,
  age-sortable, composes with filters, URL deep links), FM dashboard active
  tickets, and CS dashboard priority card click-through.
- Tests: 13 new (category visibility, seed idempotency/sync, unit grouping,
  ticket building/unit filters).
This commit is contained in:
root
2026-08-02 09:30:29 +00:00
parent 2e995ee758
commit 2407f294f4
16 changed files with 1579 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/tickets/list.html
+203 -7
View File
@@ -14,7 +14,7 @@
<!-- Filters -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
<div class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-8 gap-3">
<div>
<label class="block text-xs text-gray-500 font-medium mb-1">Search</label>
<input type="text" x-model="filters.search" @input.debounce="loadTickets()" placeholder="Ticket # or description..." class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-denya-500 focus:border-transparent outline-none">
@@ -52,12 +52,39 @@
</div>
<div>
<label class="block text-xs text-gray-500 font-medium mb-1">Property</label>
<select x-model="filters.property" @change="loadTickets()" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-denya-500 outline-none">
<select x-model="filters.property" @change="onPropertyChange()" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-denya-500 outline-none">
<option value="">All Properties</option>
<option value="East">Pavilion East</option>
<option value="West">Pavilion West</option>
</select>
</div>
<div>
<label class="block text-xs text-gray-500 font-medium mb-1">Building</label>
<select x-model="filters.building" @change="onBuildingChange()" :disabled="!filters.property" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-denya-500 outline-none disabled:bg-gray-50 disabled:text-gray-400">
<option value="">All Buildings</option>
<template x-for="b in buildings" :key="b">
<option :value="b" x-text="b"></option>
</template>
</select>
</div>
<div class="relative">
<label class="block text-xs text-gray-500 font-medium mb-1">Apartment</label>
<input type="text" x-model="searchApartment" @focus="apartmentOpen = true" @input="apartmentOpen = true" @keydown.escape="apartmentOpen = false"
:disabled="!filters.building" @blur="closeApartment()"
:placeholder="filterUnit ? filterUnit.apartment_code : (filters.building ? 'Search apartment...' : 'Select building')"
class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-denya-500 outline-none disabled:bg-gray-50 disabled:text-gray-400">
<div x-show="apartmentOpen && filteredApartments.length" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-40 overflow-y-auto">
<template x-for="unit in filteredApartments" :key="unit.id">
<button type="button" @mousedown.prevent="selectFilterUnit(unit)" class="block w-full text-left px-3 py-1.5 hover:bg-denya-50 text-xs">
<span class="font-medium text-gray-800" x-text="unit.apartment_code"></span>
<span class="text-gray-400" x-text="` · Floor ${unit.floor || '—'}`"></span>
</button>
</template>
</div>
<div x-show="apartmentOpen && !filteredApartments.length && filters.building" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg px-3 py-2 text-xs text-gray-400">
No apartments match
</div>
</div>
<div>
<label class="block text-xs text-gray-500 font-medium mb-1">From</label>
<input type="date" x-model="filters.dateFrom" @change="loadTickets()" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-denya-500 outline-none">
@@ -67,20 +94,27 @@
<input type="date" x-model="filters.dateTo" @change="loadTickets()" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-denya-500 outline-none">
</div>
</div>
<div class="mt-3 flex items-center justify-between">
<div class="flex items-center space-x-2">
<div class="mt-3 flex flex-wrap items-center justify-between gap-3">
<div class="flex items-center space-x-3">
<label class="flex items-center space-x-2 text-sm font-medium text-gray-700 cursor-pointer select-none">
<input type="checkbox" x-model="groupByPriority" @change="syncUrl()" class="rounded border-gray-300 text-denya-600 focus:ring-denya-500">
<span>Group by priority</span>
</label>
<div x-show="groupByPriority" class="flex items-center space-x-2 text-xs">
<button @click="ageDir = ageDir === 'asc' ? 'desc' : 'asc'" class="px-2 py-1 border border-gray-300 rounded-lg hover:bg-gray-50 text-gray-600" x-text="ageDir === 'desc' ? 'Newest first ↓' : 'Oldest first ↑'"></button>
</div>
<span class="text-xs text-gray-500">Page <span x-text="page"></span> of <span x-text="totalPages"></span></span>
</div>
<div class="flex items-center space-x-2">
<button @click="page > 1 && (page--, loadTickets())" :disabled="page <= 1" class="px-3 py-1 text-sm border rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">Prev</button>
<button @click="page < totalPages && (page++, loadTickets())" :disabled="page >= totalPages" class="px-3 py-1 text-sm border rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">Next</button>
<button @click="filters = {search:'',status:'',priority:'',property:'',dateFrom:'',dateTo:''}; page=1; loadTickets()" class="px-3 py-1 text-sm text-gray-500 border rounded hover:bg-gray-50">Clear Filters</button>
<button @click="clearFilters()" class="px-3 py-1 text-sm text-gray-500 border rounded hover:bg-gray-50">Clear Filters</button>
</div>
</div>
</div>
<!-- Tickets Table -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
<!-- Tickets Table (flat) -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200" x-show="!groupByPriority">
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead class="bg-gray-50 text-gray-600 text-xs uppercase tracking-wider">
@@ -125,6 +159,53 @@
</table>
</div>
</div>
<!-- Tickets grouped by priority -->
<div class="space-y-4" x-show="groupByPriority">
<template x-for="meta in priorityGroupMeta()" :key="meta.key">
<div x-show="(groupedTickets[meta.key] || []).length" class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div class="px-5 py-3 flex items-center justify-between border-b border-gray-100" :class="meta.cls">
<span class="text-sm font-semibold text-gray-800" x-text="`${meta.label} (${groupedTickets[meta.key].length})`"></span>
</div>
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead class="bg-gray-50 text-gray-600 text-xs uppercase tracking-wider">
<tr>
<th class="px-5 py-3 text-left">Ticket</th>
<th class="px-5 py-3 text-left">Status</th>
<th class="px-5 py-3 text-left">Priority</th>
<th class="px-5 py-3 text-left">Description</th>
<th class="px-5 py-3 text-left">Assigned To</th>
<th class="px-5 py-3 text-left">Created</th>
<th class="px-5 py-3 text-left">SLA</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100">
<template x-for="ticket in groupedTickets[meta.key]" :key="ticket.id">
<tr class="hover:bg-gray-50 transition cursor-pointer" @click="window.location.href='/tickets/'+ticket.id">
<td class="px-5 py-3 font-medium text-denya-600" x-text="ticket.ticket_number"></td>
<td class="px-5 py-3"><span class="px-2 py-1 rounded-full text-xs font-medium" :class="statusClass(ticket.status)" x-text="ticket.status"></span></td>
<td class="px-5 py-3"><span class="px-2 py-1 rounded text-xs font-medium" :class="priorityClass(ticket.priority)" x-text="priorityBadge(ticket.priority)"></span></td>
<td class="px-5 py-3 text-gray-600 max-w-xs truncate" x-text="ticket.description || ''"></td>
<td class="px-5 py-3 text-gray-500 text-xs" x-text="ticket.assigned_technician_name || '—'"></td>
<td class="px-5 py-3 text-gray-500 text-xs" x-text="formatDate(ticket.created_at)"></td>
<td class="px-5 py-3">
<span x-show="ticket.sla_deadline" class="text-xs" :class="new Date(ticket.sla_deadline) < new Date() && !['Closed','Completed'].includes(ticket.status) ? 'text-red-600 font-medium' : 'text-gray-400'">
<span x-text="formatDateShort(ticket.sla_deadline)"></span>
</span>
<span x-show="!ticket.sla_deadline" class="text-xs text-gray-300">—</span>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</template>
<div x-show="!groupedTotal && !loading" class="bg-white rounded-xl shadow-sm border border-gray-200 px-5 py-16 text-center text-gray-400">
No tickets match your filters
</div>
</div>
</div>
<script>
@@ -137,25 +218,130 @@
totalPages: 1,
sortField: 'created_at',
sortDir: 'desc',
groupByPriority: false,
ageDir: 'desc',
unitGroups: {},
buildings: [],
searchApartment: '',
apartmentOpen: false,
filterUnit: null,
filters: {
search: '',
status: '',
priority: '',
property: '',
building: '',
unitId: '',
dateFrom: '',
dateTo: ''
},
async init() {
this.applyUrlParams();
await this.loadUnits();
await this.loadTickets();
},
applyUrlParams() {
const params = new URLSearchParams(window.location.search);
if (params.get('group') === 'priority') this.groupByPriority = true;
if (params.get('priority')) this.filters.priority = params.get('priority');
if (params.get('property')) this.filters.property = params.get('property');
if (params.get('building')) this.filters.building = params.get('building');
if (params.get('unit_id')) this.filters.unitId = params.get('unit_id');
},
syncUrl() {
const params = new URLSearchParams();
if (this.groupByPriority) params.set('group', 'priority');
if (this.filters.priority) params.set('priority', this.filters.priority);
if (this.filters.property) params.set('property', this.filters.property);
if (this.filters.building) params.set('building', this.filters.building);
if (this.filters.unitId) params.set('unit_id', this.filters.unitId);
const qs = params.toString();
const url = qs ? `/tickets?${qs}` : '/tickets';
window.history.replaceState({}, '', url);
},
async loadUnits() {
try {
const data = await app().apiGet('/api/tickets/units/grouped');
this.unitGroups = data || {};
if (this.filters.property) this.buildings = Object.keys(this.unitGroups[this.filters.property] || {});
if (this.filters.unitId) {
// Restore displayed apartment for a unit_id deep link
Object.values(this.unitGroups).forEach(prop => Object.values(prop).forEach(units => {
const u = (units || []).find(x => x.id == this.filters.unitId);
if (u) this.filterUnit = u;
}));
}
} catch (e) { console.error('Units load error', e); }
},
onPropertyChange() {
this.filters.building = '';
this.filters.unitId = '';
this.filterUnit = null;
this.searchApartment = '';
this.buildings = this.filters.property ? Object.keys(this.unitGroups[this.filters.property] || {}) : [];
this.loadTickets();
this.syncUrl();
},
onBuildingChange() {
this.filters.unitId = '';
this.filterUnit = null;
this.searchApartment = '';
this.loadTickets();
this.syncUrl();
},
get buildingUnits() {
if (!this.filters.property || !this.filters.building) return [];
return this.unitGroups[this.filters.property]?.[this.filters.building] || [];
},
get filteredApartments() {
const q = (this.searchApartment || '').toLowerCase().trim();
let units = this.buildingUnits;
if (q) {
units = units.filter(u =>
(u.apartment_code || '').toLowerCase().includes(q) ||
String(u.floor || '').includes(q)
);
}
return units;
},
closeApartment() {
setTimeout(() => { this.apartmentOpen = false; }, 150);
},
selectFilterUnit(unit) {
this.filterUnit = unit;
this.filters.unitId = unit.id;
this.searchApartment = unit.apartment_code;
this.apartmentOpen = false;
this.loadTickets();
this.syncUrl();
},
get groupedTickets() {
return app().groupByPriority(this.tickets, this.ageDir);
},
get groupedTotal() {
return Object.values(this.groupedTickets).reduce((n, g) => n + g.length, 0);
},
async loadTickets() {
try {
let url = `/api/tickets?page=${this.page}&page_size=${this.pageSize}`;
if (this.filters.status) url += `&status=${encodeURIComponent(this.filters.status)}`;
if (this.filters.priority) url += `&priority=${encodeURIComponent(this.filters.priority)}`;
if (this.filters.property) url += `&property=${encodeURIComponent(this.filters.property)}`;
if (this.filters.building) url += `&building=${encodeURIComponent(this.filters.building)}`;
if (this.filters.unitId) url += `&unit_id=${encodeURIComponent(this.filters.unitId)}`;
if (this.filters.dateFrom) url += `&date_from=${encodeURIComponent(this.filters.dateFrom)}`;
if (this.filters.dateTo) url += `&date_to=${encodeURIComponent(this.filters.dateTo)}`;
@@ -204,6 +390,16 @@
if (valA > valB) return this.sortDir === 'asc' ? 1 : -1;
return 0;
});
},
clearFilters() {
this.filters = { search: '', status: '', priority: '', property: '', building: '', unitId: '', dateFrom: '', dateTo: '' };
this.filterUnit = null;
this.searchApartment = '';
this.buildings = [];
this.page = 1;
this.loadTickets();
this.syncUrl();
}
}
}