jukka/intra.noxus.fi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add ticket tags system, tag filtering, and auto-close feature

Browse Source 
- Fix tickets API endpoint: add type, customer_name, customer_id, tags fields
- Add tags array to ticket data structure with add/remove UI
- Add tag filter input to toolbar and tag column in ticket list
- Add ticket_tags API endpoint for updating tags
- Add set_tags and auto_close_days actions to auto-rules
- Auto-close check runs on ticket list load, closes expired tickets
- Add tag CSS styles with editable tag badges in detail view

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jukka Lampikoski
2026-03-10 10:32:09 +02:00
parent f918952c3f
commit 562153e040
4 changed files with 170 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
api.php
View File

@@ -1430,6 +1430,22 @@ switch ($action) {
requireAuth();
$tickets = loadTickets();
// Palauta ilman viestisisältöjä (lista-näkymä)
// Auto-close tarkistus: sulje tiketit joiden auto_close_at on ohitettu
$now = date('Y-m-d H:i:s');
$autoCloseCount = 0;
foreach ($tickets as &$tc) {
if (!empty($tc['auto_close_at']) && $tc['auto_close_at'] <= $now && !in_array($tc['status'], ['suljettu'])) {
$tc['status'] = 'suljettu';
$tc['updated'] = $now;
$autoCloseCount++;
}
}
unset($tc);
if ($autoCloseCount > 0) {
saveTickets($tickets);
addLog('ticket_auto_close', '', '', "Automaattisulku: $autoCloseCount tikettiä");
}
$list = array_map(function($t) {
$msgCount = count($t['messages'] ?? []);
$lastMsg = $msgCount > 0 ? $t['messages'][$msgCount - 1] : null;
@@ -1439,7 +1455,12 @@ switch ($action) {
'from_email' => $t['from_email'],
'from_name' => $t['from_name'],
'status' => $t['status'],
'type' => $t['type'] ?? 'muu',
'assigned_to' => $t['assigned_to'] ?? '',
'customer_id' => $t['customer_id'] ?? '',
'customer_name' => $t['customer_name'] ?? '',
'tags' => $t['tags'] ?? [],
'auto_close_at' => $t['auto_close_at'] ?? '',
'created' => $t['created'],
'updated' => $t['updated'],
'message_count' => $msgCount,
@@ -1538,6 +1559,8 @@ switch ($action) {
'assigned_to' => '',
'customer_id' => '',
'customer_name' => '',
'tags' => [],
'auto_close_at' => '',
'created' => $email['date'],
'updated' => $email['date'],
'message_id' => $email['message_id'],
@@ -1564,6 +1587,16 @@ switch ($action) {
if ($match) {
if (!empty($rule['set_status'])) $ticket['status'] = $rule['set_status'];
if (!empty($rule['set_type'])) $ticket['type'] = $rule['set_type'];
if (!empty($rule['set_tags'])) {
$ruleTags = array_map('trim', explode(',', $rule['set_tags']));
$ticket['tags'] = array_values(array_unique(array_merge($ticket['tags'], $ruleTags)));
}
if (!empty($rule['auto_close_days'])) {
$days = intval($rule['auto_close_days']);
if ($days > 0) {
$ticket['auto_close_at'] = date('Y-m-d H:i:s', strtotime("+{$days} days"));
}
}
break; // First matching rule wins
}
}
@@ -1830,6 +1863,37 @@ switch ($action) {
echo json_encode(['success' => true]);
break;
case 'ticket_tags':
requireAuth();
if ($method !== 'POST') break;
$input = json_decode(file_get_contents('php://input'), true);
$id = $input['id'] ?? '';
$tags = $input['tags'] ?? [];
// Sanitize tags: trim, lowercase, remove empty
$tags = array_values(array_filter(array_map(function($t) {
return trim(strtolower($t));
}, $tags)));
$tickets = loadTickets();
$found = false;
foreach ($tickets as &$t) {
if ($t['id'] === $id) {
$t['tags'] = $tags;
$t['updated'] = date('Y-m-d H:i:s');
$found = true;
addLog('ticket_tags', $t['id'], $t['subject'], 'Tagit: ' . implode(', ', $tags));
echo json_encode($t);
break;
}
}
unset($t);
if (!$found) {
http_response_code(404);
echo json_encode(['error' => 'Tikettiä ei löydy']);
break;
}
saveTickets($tickets);
break;
case 'ticket_rules':
requireAuth();
$config = loadConfig();
@@ -1850,6 +1914,8 @@ switch ($action) {
'subject_contains' => trim($input['subject_contains'] ?? ''),
'set_status' => $input['set_status'] ?? '',
'set_type' => $input['set_type'] ?? '',
'set_tags' => trim($input['set_tags'] ?? ''),
'auto_close_days' => intval($input['auto_close_days'] ?? 0),
'enabled' => $input['enabled'] ?? true,
];

10
index.html
View File

@@ -261,6 +261,7 @@
<option value="odottaa">Odottaa vastausta</option>
<option value="ratkaistu">Ratkaistu</option>
</select>
<input type="text" id="ticket-tag-filter" placeholder="#tagi" style="padding:9px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:0.88rem;max-width:140px;">
<label style="display:flex;align-items:center;gap:0.4rem;font-size:0.85rem;color:#777;cursor:pointer;white-space:nowrap;">
<input type="checkbox" id="ticket-show-closed"> Suljetut
</label>
@@ -292,6 +293,7 @@
<th>Aihe</th>
<th>Lähettäjä</th>
<th>Asiakas</th>
<th>Tagit</th>
<th>Viestejä</th>
<th>Päivitetty</th>
</tr>
@@ -383,6 +385,14 @@
<option value="muu">Muu</option>
</select>
</div>
<div class="form-group">
<label>Aseta tagit (pilkulla eroteltuna)</label>
<input type="text" id="rule-form-tags" placeholder="esim. notification, automaatti">
</div>
<div class="form-group">
<label>Auto-close (päivää)</label>
<input type="number" id="rule-form-autoclose" min="0" max="365" placeholder="esim. 7" style="max-width:120px;">
</div>
</div>
<div style="display:flex;gap:0.5rem;margin-top:1rem;">
<button class="btn-primary" id="btn-save-rule">Tallenna</button>

57
script.js
View File

@@ -1003,11 +1003,18 @@ function renderTickets() {
filtered = filtered.filter(t => (t.type || 'muu') === typeFilter);
}
// Tag filter
const tagFilter = (document.getElementById('ticket-tag-filter').value || '').trim().toLowerCase().replace(/^#/, '');
if (tagFilter) {
filtered = filtered.filter(t => (t.tags || []).some(tag => tag.toLowerCase().includes(tagFilter)));
}
if (query) {
filtered = filtered.filter(t =>
(t.subject || '').toLowerCase().includes(query) ||
(t.from_name || '').toLowerCase().includes(query) ||
(t.from_email || '').toLowerCase().includes(query)
(t.from_email || '').toLowerCase().includes(query) ||
(t.tags || []).some(tag => tag.toLowerCase().includes(query))
);
}
@@ -1032,6 +1039,7 @@ function renderTickets() {
<td><strong>${esc(t.subject)}</strong></td>
<td>${esc(t.from_name || t.from_email)}</td>
<td>${t.customer_name ? esc(t.customer_name) : '<span style="color:#ccc;">-</span>'}</td>
<td>${(t.tags || []).length > 0 ? (t.tags || []).map(tag => '<span class="ticket-tag">#' + esc(tag) + '</span>').join(' ') : '<span style="color:#ccc;">-</span>'}</td>
<td style="text-align:center;">${lastType} ${t.message_count}</td>
<td class="nowrap">${esc((t.updated || '').substring(0, 16))}</td>
</tr>`;
@@ -1062,6 +1070,7 @@ function renderTickets() {
document.getElementById('ticket-search-input').addEventListener('input', () => renderTickets());
document.getElementById('ticket-status-filter').addEventListener('change', () => renderTickets());
document.getElementById('ticket-type-filter').addEventListener('change', () => renderTickets());
document.getElementById('ticket-tag-filter').addEventListener('input', () => renderTickets());
document.getElementById('ticket-show-closed').addEventListener('change', () => renderTickets());
document.getElementById('bulk-select-all').addEventListener('change', function() {
const checkboxes = document.querySelectorAll('.ticket-checkbox');
@@ -1114,6 +1123,16 @@ async function showTicketDetail(id) {
</select>
<button class="btn-danger" id="btn-ticket-delete" style="padding:6px 12px;font-size:0.82rem;">Poista</button>
</div>
</div>
<div style="display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;margin-top:0.5rem;">
<span style="font-size:0.82rem;color:#888;font-weight:600;">Tagit:</span>
<div id="ticket-tags-container" style="display:flex;gap:0.35rem;flex-wrap:wrap;align-items:center;">
${(ticket.tags || []).map(tag => '<span class="ticket-tag ticket-tag-editable" data-tag="' + esc(tag) + '">#' + esc(tag) + ' <button class="ticket-tag-remove" title="Poista">&times;</button></span>').join('')}
</div>
<div style="display:flex;gap:0.3rem;align-items:center;">
<input type="text" id="ticket-tag-input" placeholder="+ Lisää tagi" style="padding:4px 8px;border:1px solid #ddd;border-radius:6px;font-size:0.82rem;width:120px;">
</div>
${ticket.auto_close_at ? '<span style="font-size:0.78rem;color:#e67e22;margin-left:0.5rem;">&#9200; Auto-close: ' + esc(ticket.auto_close_at.substring(0, 10)) + '</span>' : ''}
</div>`;
// Load users for assignment dropdown
@@ -1180,6 +1199,36 @@ async function showTicketDetail(id) {
} catch (e) { alert(e.message); }
});
// Tags: add new tag on Enter
document.getElementById('ticket-tag-input').addEventListener('keydown', async (e) => {
if (e.key !== 'Enter') return;
e.preventDefault();
const input = e.target;
const newTag = input.value.trim().toLowerCase().replace(/^#/, '');
if (!newTag) return;
const currentTags = (ticket.tags || []).slice();
if (!currentTags.includes(newTag)) currentTags.push(newTag);
input.value = '';
try {
await apiCall('ticket_tags', 'POST', { id: currentTicketId, tags: currentTags });
await showTicketDetail(currentTicketId);
} catch (e2) { alert(e2.message); }
});
// Tags: remove tag
document.querySelectorAll('.ticket-tag-remove').forEach(btn => {
btn.addEventListener('click', async (e) => {
e.stopPropagation();
const tagEl = btn.closest('.ticket-tag-editable');
const tagToRemove = tagEl.dataset.tag;
const currentTags = (ticket.tags || []).filter(t => t !== tagToRemove);
try {
await apiCall('ticket_tags', 'POST', { id: currentTicketId, tags: currentTags });
await showTicketDetail(currentTicketId);
} catch (e2) { alert(e2.message); }
});
});
// Thread messages
const thread = document.getElementById('ticket-thread');
thread.innerHTML = (ticket.messages || []).map(m => {
@@ -1362,6 +1411,8 @@ function renderRules() {
const actions = [];
if (r.set_status) actions.push('Tila → ' + (ticketStatusLabels[r.set_status] || r.set_status));
if (r.set_type) actions.push('Tyyppi → ' + (ticketTypeLabels[r.set_type] || r.set_type));
if (r.set_tags) actions.push('Tagit: #' + r.set_tags.split(',').map(t => t.trim()).join(' #'));
if (r.auto_close_days) actions.push('Auto-close: ' + r.auto_close_days + 'pv');
return `<div style="display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1rem;background:${r.enabled ? '#f8f9fb' : '#fafafa'};border:1px solid #e8ebf0;border-radius:8px;margin-bottom:0.5rem;opacity:${r.enabled ? '1' : '0.5'};">
<div>
<div style="font-weight:600;color:#0f3460;font-size:0.9rem;">${esc(r.name)}</div>
@@ -1401,6 +1452,8 @@ function showRuleForm(rule) {
document.getElementById('rule-form-subject').value = rule ? rule.subject_contains : '';
document.getElementById('rule-form-status').value = rule ? (rule.set_status || '') : '';
document.getElementById('rule-form-type').value = rule ? (rule.set_type || '') : '';
document.getElementById('rule-form-tags').value = rule ? (rule.set_tags || '') : '';
document.getElementById('rule-form-autoclose').value = rule ? (rule.auto_close_days || '') : '';
editingRuleId = rule ? rule.id : null;
}
@@ -1423,6 +1476,8 @@ document.getElementById('btn-save-rule').addEventListener('click', async () => {
subject_contains: document.getElementById('rule-form-subject').value.trim(),
set_status: document.getElementById('rule-form-status').value,
set_type: document.getElementById('rule-form-type').value,
set_tags: document.getElementById('rule-form-tags').value.trim(),
auto_close_days: parseInt(document.getElementById('rule-form-autoclose').value) || 0,
enabled: true,
};
const existingId = document.getElementById('rule-form-id').value;

38
style.css
View File

@@ -1274,6 +1274,44 @@ span.empty {
border-color: #0f3460;
}
/* Ticket tags */
.ticket-tag {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 0.72rem;
font-weight: 600;
background: #e8ebf0;
color: #555;
white-space: nowrap;
letter-spacing: 0.2px;
}
.ticket-tag-editable {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px 6px 3px 8px;
cursor: default;
}
.ticket-tag-remove {
background: none;
border: none;
cursor: pointer;
font-size: 0.85rem;
color: #999;
padding: 0 2px;
line-height: 1;
border-radius: 3px;
transition: color 0.15s, background 0.15s;
}
.ticket-tag-remove:hover {
color: #e74c3c;
background: rgba(231, 76, 60, 0.1);
}
/* Changelog */
.nowrap {
white-space: nowrap;