psc/vcard4reseller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Einloggen-als-Mitarbeiterliste im Screenshot-Layout

Browse Source 
Aufgeklappte Firmen-Mitarbeiterliste: Spalten Mitarbeiter · E-Mail · Telefon ·
Position · Aktionen; „Einloggen als" als orange umrandeter Button mit Login-Icon.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Thomas Peterson 2026-06-07 10:45:13 +02:00
parent cc92b48869
commit 9bd8b45588
1 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/views/CompaniesView.vue
View File

@ -141,16 +141,19 @@ onMounted(load)
<td></td>
<td colspan="7">
<table class="subtbl">
<thead><tr><th>Mitarbeiter</th><th>E-Mail</th><th>Position</th><th></th></tr></thead>
<thead><tr><th>Mitarbeiter</th><th>E-Mail</th><th>Telefon</th><th>Position</th><th class="right">Aktionen</th></tr></thead>
<tbody>
<tr v-if="!loginable(c).length"><td colspan="4" class="muted sm">Keine einloggbaren Mitarbeiter.</td></tr>
<tr v-if="!loginable(c).length"><td colspan="5" class="muted sm">Keine einloggbaren Mitarbeiter.</td></tr>
<tr v-for="e in loginable(c)" :key="e.id">
<td><strong>{{ e.firstName }} {{ e.lastName }}</strong></td>
<td class="muted">{{ e.email || '–' }}</td>
<td class="muted">{{ e.phone || '–' }}</td>
<td>{{ e.position || '–' }}</td>
<td class="right">
<button class="btn btn-ghost btn-sm orange" :disabled="busy !== ''"
@click="loginAs(e.id)">⤷ Einloggen als</button>
<button class="btn-loginas" :disabled="busy !== ''" @click="loginAs(e.id)">
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3" /></svg>
Einloggen als
</button>
</td>
</tr>
</tbody>
@ -204,5 +207,13 @@ onMounted(load)
.subrow > td { background: #fbfbfb; padding: 0 1rem 1rem !important; border-bottom: 1px solid #f4f4f4 !important; }
.subtbl { width: 100%; border-collapse: collapse; }
.subtbl th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .6rem .7rem; }
.subtbl td { padding: .55rem .7rem; border-top: 1px solid #f0f0f0; }
.subtbl th.right { text-align: right; }
.subtbl td { padding: .6rem .7rem; border-top: 1px solid #f0f0f0; vertical-align: middle; }
.btn-loginas {
display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .85rem;
border: 1px solid var(--psc-orange); background: #fff; color: var(--psc-orange-dark);
border-radius: 8px; font-weight: 600; font-size: .82rem; cursor: pointer; font-family: var(--font);
}
.btn-loginas:hover { background: var(--psc-orange-soft); }
.btn-loginas:disabled { opacity: .55; cursor: default; }
</style>