Files
server-manager/views/teams/index.php
Agent 13f14416a4 feat: teams redesign — cards, filter, user autocomplete
- Teams index: cards with animation, search filter
- Team detail: user autocomplete via AJAX (search on type)
- CSS: card grid styles, autocomplete dropdown
- Backend: searchUsers endpoint, filter support
2026-06-09 18:11:20 -04:00

96 lines
3.7 KiB
PHP

<?php $teams = $teams ?? []; $search = $search ?? ''; ?>
<div class="page-header">
<div class="page-header-left">
<h1 class="page-title">Teams</h1>
<p class="page-subtitle">Create and manage work teams with server access</p>
</div>
<div class="page-header-right">
<a href="/teams/create" class="btn btn-primary">
<i class="fas fa-plus"></i> Create Team
</a>
</div>
</div>
<div class="teams-toolbar">
<div class="teams-search">
<i class="fas fa-search teams-search-icon"></i>
<input type="text" id="teamSearch" class="form-input teams-search-input"
placeholder="Search teams..." value="<?= htmlspecialchars($search) ?>">
<?php if ($search !== ''): ?>
<button class="teams-search-clear" onclick="clearSearch()">&times;</button>
<?php endif; ?>
</div>
</div>
<?php if (empty($teams)): ?>
<div class="empty-state">
<i class="fas fa-users-cog"></i>
<p><?= $search !== '' ? 'No teams match your search.' : 'No teams created yet.' ?></p>
<?php if ($search !== ''): ?>
<a href="/teams" class="btn btn-secondary">Clear Search</a>
<?php else: ?>
<a href="/teams/create" class="btn btn-primary">Create Your First Team</a>
<?php endif; ?>
</div>
<?php else: ?>
<div class="teams-grid" id="teamsGrid">
<?php foreach ($teams as $team): ?>
<div class="team-card">
<div class="team-card-header">
<div class="team-card-icon">
<i class="fas fa-users"></i>
</div>
<h3 class="team-card-title">
<a href="/teams/<?= $team['id'] ?>"><?= htmlspecialchars($team['name']) ?></a>
</h3>
</div>
<p class="team-card-desc">
<?= htmlspecialchars(mb_substr($team['description'] ?? 'No description', 0, 100)) ?>
</p>
<div class="team-card-stats">
<span class="team-stat">
<i class="fas fa-user"></i> <?= (int) ($team['member_count'] ?? 0) ?> members
</span>
<span class="team-stat">
<i class="fas fa-server"></i> <?= (int) ($team['server_count'] ?? 0) ?> servers
</span>
</div>
<div class="team-card-actions">
<a href="/teams/<?= $team['id'] ?>" class="btn btn-sm btn-primary">
<i class="fas fa-cog"></i> Manage
</a>
<button class="btn btn-sm btn-danger" title="Delete"
onclick="deleteTeam(<?= $team['id'] ?>, '<?= htmlspecialchars(addslashes($team['name'])) ?>')">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<form id="deleteForm" method="POST" style="display:none">
<input type="hidden" name="_csrf_token" value="<?= $this->csrfToken() ?>">
</form>
<script>
document.getElementById('teamSearch')?.addEventListener('input', function() {
const val = this.value.trim();
const url = val ? '/teams?search=' + encodeURIComponent(val) : '/teams';
window.location.href = url;
});
function clearSearch() {
window.location.href = '/teams';
}
function deleteTeam(id, name) {
if (confirm('Delete team "' + name + '"?\nThis will remove access for all members.')) {
const form = document.getElementById('deleteForm');
form.action = '/teams/' + id + '/delete';
form.submit();
}
}
</script>