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

feat: move table to seperate component

Browse source
This commit is contained in:
EETagent 2023-01-01 13:59:44 +01:00
parent 5c78b1136b
commit b8d79e8cd9
3 changed files with 71 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
frontend/src/lib/components/admin/table/Table.svelte Normal file
View file

@ -0,0 +1,60 @@
<script lang="ts">
import Delete from '$lib/components/button/Delete.svelte';
import type { CandidatePreview } from '$lib/stores/candidate';
export let candidates: Array<CandidatePreview> = [];
</script>
<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 rounded-md border-2 border-[#dfe0e9] ">
<table class="min-w-full text-center ">
<thead class="bg-[#f6f4f4] ">
<tr>
<th scope="col"> Ev. č. přihlásky </th>
<th scope="col"> Jméno </th>
<th scope="col"> Příjmení </th>
<th scope="col"> Obor </th>
<th scope="col" />
</tr>
</thead>
<tbody>
{#each candidates as candidate}
<tr class="border-b bg-white hover:cursor-pointer">
<td class="text-gray-900"
><a
target="_blank"
rel="noreferrer"
href="/admin/candidate/{candidate.applicationId}">{candidate.applicationId}</a
></td
>
<td class="text-gray-900">
{candidate.name}
</td>
<td class="text-gray-900">
{candidate.surname}
</td>
<td class="text-gray-900">
{candidate.study}
</td>
<td class="text-sm">
<Delete id={candidate.applicationId} on:delete value="Odstranit" />
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</div>
</div>
</div>
<style lang="postcss">
th {
@apply px-6 py-4 text-sm font-medium text-gray-900;
}
td {
@apply whitespace-nowrap px-6 py-4 text-sm;
}
</style>

14
frontend/src/lib/components/button/Delete.svelte
View file

@ -5,14 +5,19 @@
export let value: string;
let isPrepared = false;
export let id: number | undefined;
let isPrepared = false;
const buttonLogic = () => {
if (isPrepared) {
dispatch('delete');
dispatch('delete', {
id: id
});
} else {
dispatch('prepared');
dispatch('prepared', {
id: id
});
isPrepared = true;
setTimeout(() => {
isPrepared = false;
@ -44,9 +49,8 @@
button {
@apply inline-flex items-center;
@apply bg-red-700;
@apply @apply rounded-lg p-3 text-xl font-semibold
@apply @apply rounded-lg p-3 font-semibold
text-white transition-colors duration-300;
@apply w-full;
animation: none !important;
}

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

@ -7,6 +7,7 @@
import Fuse from 'fuse.js';
import type { PageServerData } from './$types';
import Delete from '$lib/components/button/Delete.svelte';
import Table from '$lib/components/admin/table/Table.svelte';
export let data: PageServerData;
@ -112,58 +113,7 @@
</div>
{/if}
<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 rounded-md border-2 border-[#dfe0e9] ">
<table class="min-w-full text-center ">
<thead class="bg-[#f6f4f4] ">
<tr>
<th scope="col" class="px-6 py-4 text-sm font-medium text-gray-900">
Ev. č. přihlásky
</th>
<th scope="col" class="px-6 py-4 text-sm font-medium text-gray-900"> Jméno </th>
<th scope="col" class="px-6 py-4 text-sm font-medium text-gray-900">
Příjmení
</th>
<th scope="col" class="px-6 py-4 text-sm font-medium text-gray-900"> Obor </th>
<th scope="col" class="px-6 py-4 text-sm font-medium text-gray-900" />
</tr>
</thead>
<tbody>
{#each candidatesTable as candidate}
<tr class="border-b bg-white hover:cursor-pointer">
<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900"
><a
target="_blank"
rel="noreferrer"
href="/admin/candidate/{candidate.applicationId}"
>{candidate.applicationId}</a
></td
>
<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900">
{candidate.name}
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900">
{candidate.surname}
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900">
{candidate.study}
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm">
<Delete
on:delete={async () => await deleteCandidate(candidate.applicationId)}
value="Odstranit"
/>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</div>
</div>
</div>
<Table candidates={candidatesTable} on:delete={(event) => deleteCandidate(event.detail.id)} />
</div>
</div>
</div>