dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-05-26 13:31:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: improve admin dashboard

Browse source
This commit is contained in:
EETagent 2022-12-04 18:59:17 +01:00
parent 1a61169dec
commit 5cf2ecfba6
1 changed files with 150 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

199
frontend/src/routes/(admin)/admin/(authenticated)/dashboard/+page.svelte
View file

@ -1,61 +1,162 @@
<script lang="ts"> <script lang="ts">
import { apiFetchCandidate, apiListCandidates } from "$lib/@api/admin"; import backgroundImage from '$lib/assets/background.jpg';
import type { CandidatePreview } from "$lib/stores/candidate";
import { apiFetchCandidate, apiListCandidates } from '$lib/@api/admin';
import Home from '$lib/components/icons/Home.svelte';
import TextField from '$lib/components/textfield/TextField.svelte';
import type { CandidatePreview } from '$lib/stores/candidate';
let candidates: [CandidatePreview] = [{}]; let candidates: [CandidatePreview] = [{}];
let candidateDetails: { [id: number] : CandidatePreview } = {}; let candidateDetails: { [id: number]: CandidatePreview } = {};
let currentCandidateId: number = 0; let currentCandidateId: number = 0;
getCandidates(); getCandidates();
async function getCandidates() { async function getCandidates() {
try { try {
candidates = await apiListCandidates(); candidates = await apiListCandidates();
} catch { } catch {
console.log("error"); console.log('error');
} }
} }
async function getCandidateDetails(id: number) { async function getCandidateDetails(id: number) {
currentCandidateId = id; currentCandidateId = id;
candidateDetails[id] = await apiFetchCandidate(id); candidateDetails[id] = await apiFetchCandidate(id);
} }
type Filter = 'Vše' | 'KBB' | 'IT' | 'GYM';
let filters: Array<Filter> = ['Vše', 'KBB', 'IT', 'GYM'];
let activeFilter: Filter = 'Vše';
</script> </script>
<div> <div>
<div class="flex flex-row"> <div class="header" style={`background-image: url(${backgroundImage});`} />
<div class="list"> <div class="flex flex-row">
{#each candidates as candidate} <div class="list">
<div class="candidatePreview flex flex-row"> {#each filters as filter}
<h1 class="ml-5 text-2xl font-bold self-center">{candidate.applicationId}</h1> <div class:selected={filter === activeFilter}>
<div class="flex flex-col ml-12 mt-4"> <Home />
<h3 class="text-lg font-bold">{candidate.name} {candidate.surname?.toUpperCase()}</h3> <button on:click={() => (activeFilter = filter)}>{filter}</button>
<div class="relative"> </div>
<h3 class="text-lg absolute right-0">Obor: {candidate.study}</h3> {/each}
</div> </div>
</div> <div class="body overflow-scroll">
</div> <h1 class="text-3xl font-semibold">Uchazeči</h1>
{/each} <div class="controls my-8">
</div> <TextField placeholder="Hledat" />
<div class="detail"> <button
<h1>Details here</h1> class="bg-sspsBlue hover:bg-sspsBlueDark ml-3 w-2/5 rounded-lg p-3 py-4 text-xl font-semibold text-white transition-colors duration-300"
</div> >Nový uchazeč</button
</div> >
</div>
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-4 sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="min-w-full rounded-md border-2 border-[#dfe0e9] text-center">
<thead class="bg-[#f6f4f4] ">
<tr>
<th scope="col" class="px-6 py-4 text-sm font-medium text-gray-900"> # </th>
<th scope="col" class="px-6 py-4 text-sm font-medium text-gray-900"> First </th>
<th scope="col" class="px-6 py-4 text-sm font-medium text-gray-900"> Last </th>
<th scope="col" class="px-6 py-4 text-sm font-medium text-gray-900">
Handle
</th>
</tr>
</thead>
<tbody>
{#each Array(40) as item}
<tr class="border-b bg-white">
<td class="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-900"
>1</td
>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
Mark
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
Otto
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
@mdo
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<style> <style>
.list { .header {
@apply h-[100vh] w-96; @apply h-16 w-full;
@apply overflow-scroll float-left; }
} .list {
@apply h-[100vh] w-96;
@apply float-left overflow-scroll;
.detail { @apply border-r border-gray-400;
@apply h-[100vh] w-[calc(100vw-96px)] bg-yellow-300; }
@apply float-left overflow-hidden;
} .list div {
@apply p-3;
.candidatePreview { @apply mx-3 my-6;
@apply h-20 w-full bg-gray-200 rounded-xl mt-5; @apply flex items-center;
@apply hover:cursor-pointer; @apply rounded-xl;
}
</style> @apply transition-all duration-300;
@apply hover:bg-sspsBlue focus:bg-sspsBlue;
@apply hover:text-white focus:text-white;
}
.list div :global(path) {
@apply transition-all duration-300;
}
.list div:hover :global(path) {
@apply fill-white fill-white;
}
.list div:hover :global(path:nth-child(2)) {
@apply stroke-white stroke-white;
}
.list .selected :global(path) {
@apply fill-white fill-white;
}
.list .selected :global(path:nth-child(2)) {
@apply stroke-white stroke-white;
}
.list .selected {
@apply bg-sspsBlue;
@apply text-white;
}
.list div button {
@apply p-1;
@apply flex-1;
@apply text-left;
}
.body {
@apply h-[100vh] w-[calc(100vw-96px)];
@apply float-left overflow-hidden;
@apply my-6 mx-10;
}
.body .controls {
@apply flex flex-row items-center justify-between;
}
.candidatePreview {
@apply mt-5 h-20 w-full rounded-xl bg-gray-200;
@apply hover:cursor-pointer;
}
</style>