OpenNIT
Quelltext des aktuellen Standes
Fassung 1.1.1
index.php
8 KB<?php $this->layout('layouts/admin', [
'page_title' => 'Tags verwalten',
'current_admin_page' => 'tags',
]); ?>
<?php $tags = $tags ?? []; ?>
<div class="settings-page">
<!-- Neuen Tag erstellen -->
<section class="settings-card">
<div class="settings-card-header">
<span class="settings-card-icon">✚</span>
<div>
<h2><?= $this->te('Neuen Tag erstellen') ?></h2>
<p class="settings-card-desc"><?= $this->te('Erstellen Sie einen neuen Tag für die Dokumentation.') ?></p>
</div>
</div>
<div class="settings-card-body">
<form action="/admin/tags" method="POST" class="form">
<input type="hidden" name="_csrf" value="<?= $this->csrf() ?>">
<div class="tag-create-row">
<div class="form-group">
<label for="new-name"><?= $this->te('Name') ?></label>
<input type="text" id="new-name" name="name" class="form-control" placeholder="<?= $this->te('z.B. Wartung') ?>" required maxlength="100">
</div>
<div class="form-group">
<label for="new-color"><?= $this->te('Farbe') ?></label>
<div class="color-picker-row">
<input type="color" id="new-color" name="color" class="color-input" value="#6b7280">
<span class="color-preview" id="new-color-preview" style="background:var(--gray-500);"></span>
</div>
</div>
<div class="form-group" style="align-self:flex-end;">
<button type="submit" class="btn btn-primary"><?= $this->te('Tag erstellen') ?></button>
</div>
</div>
</form>
</div>
</section>
<!-- Tags-Liste -->
<section class="settings-card">
<div class="settings-card-header">
<span class="settings-card-icon">🔖</span>
<div>
<h2><?= $this->t('Alle Tags') ?> (<?= count($tags) ?>)</h2>
<p class="settings-card-desc"><?= $this->te('Tags verwalten, bearbeiten und löschen.') ?></p>
</div>
</div>
<div class="settings-card-body" style="padding:0;">
<?php if (empty($tags)): ?>
<div style="padding:2rem;text-align:center;color:var(--color-text-muted,var(--gray-500));">
<p><?= $this->te('Noch keine Tags vorhanden.') ?></p>
</div>
<?php else: ?>
<div class="admin-table-wrap">
<table class="tag-table">
<thead>
<tr>
<th scope="col" style="width:48px;"><?= $this->te('Farbe') ?></th>
<th scope="col"><?= $this->te('Name') ?></th>
<th scope="col" style="width:90px;"><?= $this->te('Verwendet') ?></th>
<th scope="col" style="width:240px;"><?= $this->te('Aktionen') ?></th>
</tr>
</thead>
<tbody>
<?php foreach ($tags as $tag): ?>
<tr data-tag-id="<?= $tag['id'] ?>">
<td>
<span class="tag-color-dot" style="background:<?= $this->e($tag['color']) ?>;"></span>
</td>
<td>
<span class="tag-chip-preview" style="background:<?= $this->e($tag['color']) ?>20;color:<?= $this->e($tag['color']) ?>;border:1px solid <?= $this->e($tag['color']) ?>40;">
<?= $this->e($tag['name']) ?>
</span>
</td>
<td style="text-align:center;">
<span class="tag-usage-count"><?= $this->te((int)($tag['usage_count'] ?? 0) === 1 ? '{anzahl} Seite' : '{anzahl} Seiten', ['anzahl' => (int)($tag['usage_count'] ?? 0)]) ?></span>
</td>
<td>
<div class="tag-actions">
<form action="/admin/tags/<?= $tag['id'] ?>" method="POST" class="tag-edit-form" style="display:flex;gap:0.375rem;align-items:center;">
<input type="hidden" name="_csrf" value="<?= $this->csrf() ?>">
<input type="hidden" name="_method" value="PUT">
<input type="text" name="name" value="<?= $this->e($tag['name']) ?>" class="form-control" style="width:120px;" required maxlength="100">
<input type="color" name="color" value="<?= $this->e($tag['color']) ?>" class="color-input-sm">
<button type="submit" class="btn btn-sm btn-secondary" title="<?= $this->te('Speichern') ?>">✓</button>
</form>
<form action="/admin/tags/<?= $tag['id'] ?>" method="POST" style="margin:0;" onsubmit="return confirm('Tag "<?= $this->e($tag['name']) ?>" wirklich löschen?<?= ($tag['usage_count'] ?? 0) > 0 ? ' Er wird von ' . ($tag['usage_count'] ?? 0) . ' Seite(n) entfernt.' : '' ?>')">
<input type="hidden" name="_csrf" value="<?= $this->csrf() ?>">
<input type="hidden" name="_method" value="DELETE">
<button type="submit" class="btn btn-sm btn-danger" title="<?= $this->te('Löschen') ?>">×</button>
</form>
</div>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<?php endif; ?>
</div>
</section>
</div>
<style>
.tag-table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-sm, 0.875rem);
}
.tag-table th,
.tag-table td {
padding: 0.625rem 0.75rem;
text-align: left;
border-bottom: 1px solid var(--color-border, var(--gray-200));
}
.tag-table th {
background: var(--color-bg-alt, var(--gray-50));
font-weight: 600;
font-size: var(--font-size-xs, 0.75rem);
text-transform: uppercase;
color: var(--color-text-muted, var(--gray-500));
letter-spacing: 0.025em;
}
.tag-table tbody tr:hover {
background: var(--color-bg-hover, var(--gray-50));
}
.tag-color-dot {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid rgba(0,0,0,0.1);
}
.tag-chip-preview {
display: inline-block;
padding: 0.2rem 0.625rem;
border-radius: 9999px;
font-size: 0.8rem;
font-weight: 600;
}
.tag-usage-count {
font-size: 0.8rem;
color: var(--color-text-muted, var(--gray-500));
}
.tag-actions {
display: flex;
gap: 0.5rem;
align-items: center;
}
.tag-create-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 1rem;
align-items: end;
}
.color-picker-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.color-input {
width: 40px;
height: 36px;
border: 1px solid var(--color-border, var(--gray-300));
border-radius: var(--radius, 0.375rem);
cursor: pointer;
padding: 2px;
background: var(--color-bg);
}
.color-input-sm {
width: 32px;
height: 30px;
border: 1px solid var(--color-border, var(--gray-300));
border-radius: var(--radius, 0.375rem);
cursor: pointer;
padding: 1px;
background: var(--color-bg);
}
.color-preview {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid rgba(0,0,0,0.1);
}
@media (max-width: 640px) {
.tag-create-row {
grid-template-columns: 1fr;
}
.tag-actions {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.tag-edit-form { flex-wrap: wrap; }
}
</style>