chore: add some icons for an easier view

ZeitOnline · Aug 26, 2024 · 8ad09e3 · 8ad09e3
1 parent e0e30fd
commit 8ad09e3
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -43,7 +43,8 @@ Following the modus operandi of other games, it was decided that eckchen needed
 
 1. Clone the repo
 2. Run `nvm use` to install the latest lts version
-3. Run `npm run dev` to start the dev server
+3. Run `npm i --force` to install the required packages. As soon as Svelte 5 will become stable, we will not need --force.
+4. Run `npm run dev` to start the dev server
 
 ## Test
 

diff --git a/src/components/DashboardTable.svelte b/src/components/DashboardTable.svelte
@@ -71,51 +71,57 @@
 </div>
 
 <div class="relative overflow-x-auto py-z-ds-8 my-z-ds-24" aria-live="polite">
-
-		<table
-			id="search-results-table"
-			class="w-full text-sm text-left rtl:text-right text-z-ds-general-black-100"
-		>
-			<thead>
+	<table
+		id="search-results-table"
+		class="w-full text-sm text-left rtl:text-right text-z-ds-general-black-100"
+	>
+		<thead>
+			<tr>
+				<th class="text-nowrap">Name des Spiels</th>
+				<th>Datum</th>
+				<th>Aktiv</th>
+				<th class="text-right">Aktionen</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#if paginatedItems.length > 0}
+				{#each paginatedItems as item (item.id)}
+					<tr in:blur={{ duration: 300, delay: 0, easing: cubicInOut }}>
+						<td>{@html highlightMatch(item.name, debouncedSearchTerm)}</td>
+						<td
+							>{@html highlightMatch(
+								transformedPublishedData(item.release_date),
+								debouncedSearchTerm
+							)}</td
+						>
+						<td>{item.active ? '✅' : '❌'}</td>
+						<td>
+							<div class="flex items-center justify-end gap-z-ds-4">
+								<button
+									aria-label="Spiel bearbeiten"
+									onclick={() => handleEditGame(item.id)}
+									class="z-ds-button z-ds-button-outline"
+								>
+									<IconHandler iconName="update" />
+								</button>
+								<button
+									aria-label="Spiel löschen"
+									onclick={() => handleDeleteGame(item.id)}
+									class="z-ds-button"
+								>
+									<IconHandler iconName="delete" extraClasses="w-5 h-5" />
+								</button>
+							</div>
+						</td>
+					</tr>
+				{/each}
+			{:else}
 				<tr>
-					<th class="text-nowrap">Name des Spiels</th>
-					<th>Datum</th>
-					<th>Aktiv</th>
-					<th class="text-right">Aktionen</th>
+					<td colspan="5" class="text-center py-z-ds-8">No data found</td>
 				</tr>
-			</thead>
-			<tbody>
-				{#if paginatedItems.length > 0}
-					{#each paginatedItems as item (item.id)}
-						<tr in:blur={{ duration: 300, delay: 0, easing: cubicInOut }}>
-							<td>{@html highlightMatch(item.name, debouncedSearchTerm)}</td>
-							<td
-								>{@html highlightMatch(
-									transformedPublishedData(item.release_date),
-									debouncedSearchTerm
-								)}</td
-							>
-							<td>{item.active ? '✅' : '❌'}</td>
-							<td>
-								<div class="flex items-center justify-end gap-z-ds-4">
-									<button
-										onclick={() => handleEditGame(item.id)}
-										class="z-ds-button z-ds-button-outline">Bearbeiten</button
-									>
-									<button onclick={() => handleDeleteGame(item.id)} class="z-ds-button">Löschen</button
-									>
-								</div>
-							</td>
-						</tr>
-					{/each}
-				{:else}
-					<tr>
-						<td colspan="5" class="text-center py-z-ds-8">No data found</td>
-					</tr>
-				{/if}
-			</tbody>
-		</table>
-
+			{/if}
+		</tbody>
+	</table>
 </div>
 
-<DashboardPagination bind:currentPage {totalPages} />
+<DashboardPagination bind:currentPage {totalPages} />
diff --git a/src/components/icons/DeleteIcon.svelte b/src/components/icons/DeleteIcon.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	let { extraClasses }: { extraClasses?: string } = $props();
+</script>
+
+<svg
+	aria-hidden="true"
+	class={extraClasses}
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	><path
+		d="M10.818 9.30103C10.818 8.75521 10.3703 8.31273 9.81799 8.31273C9.26571 8.31273 8.81799 8.75521 8.81799 9.30103V15.9854C8.81799 16.5313 9.26571 16.9737 9.81799 16.9737C10.3703 16.9737 10.818 16.5313 10.818 15.9854V9.30103Z"
+		fill="currentColor"
+	/><path
+		d="M15.1244 9.30103C15.1244 8.75521 14.6767 8.31273 14.1244 8.31273C13.5721 8.31273 13.1244 8.75521 13.1244 9.30103V15.9854C13.1244 16.5313 13.5721 16.9737 14.1244 16.9737C14.6767 16.9737 15.1244 16.5313 15.1244 15.9854V9.30103Z"
+		fill="currentColor"
+	/><path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M9 3C8.44772 3 8 3.44248 8 3.9883H4C3.44772 3.9883 3 4.43078 3 4.97661C3 5.51159 3.43011 5.94729 3.96722 5.96439C3.87809 6.25663 3.8439 6.57121 3.87608 6.89571L5.05865 18.8223C5.18116 20.0579 6.23236 21 7.48858 21H16.3918C17.6455 21 18.6955 20.0615 18.8211 18.8286L20.0353 6.90194C20.0685 6.57548 20.0345 6.2589 19.9449 5.96491H20C20.5523 5.96491 21 5.52243 21 4.97661C21 4.43078 20.5523 3.9883 20 3.9883H16C16 3.44248 15.5523 3 15 3H9ZM5.86655 6.70294C5.8411 6.44633 6.04512 6.22397 6.30601 6.22397H17.606C17.8673 6.22397 18.0715 6.44707 18.0453 6.70406L16.8311 18.6307C16.8084 18.8537 16.6185 19.0234 16.3918 19.0234H7.48858C7.26138 19.0234 7.07127 18.853 7.04911 18.6296L5.86655 6.70294Z"
+		fill="currentColor"
+	/></svg
+>
diff --git a/src/components/icons/IconHandler.svelte b/src/components/icons/IconHandler.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { IconOption } from '$types';
-	import { ChevronRightIcon, EditIcon, ErrorIcon, SearchIcon, TickIcon, UploadIcon } from '.';
+	import { ChevronRightIcon, EditIcon, ErrorIcon, SearchIcon, TickIcon, UploadIcon, DeleteIcon } from '.';
 
 	let { iconName, extraClasses }: { iconName: IconOption; extraClasses?: string } = $props();
 </script>
@@ -9,14 +9,16 @@
 	<TickIcon {extraClasses} />
 {:else if iconName == 'update'}
 	<EditIcon {extraClasses} />
-{:else if iconName == 'delete' || iconName == 'error'}
+{:else if iconName == 'error'}
 	<ErrorIcon {extraClasses} />
 {:else if iconName == 'chevron'}
 	<ChevronRightIcon {extraClasses} />
 {:else if iconName == 'search'}
 	<SearchIcon {extraClasses} />
 {:else if iconName == 'upload'}
 	<UploadIcon {extraClasses} />
+{:else if iconName == 'delete'}
+	<DeleteIcon {extraClasses} />
 {:else}
 	<TickIcon {extraClasses} />
 {/if}
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
@@ -3,4 +3,5 @@ export { default as EditIcon } from './EditIcon.svelte';
 export { default as TickIcon } from './TickIcon.svelte';
 export { default as SearchIcon } from './SearchIcon.svelte';
 export { default as ErrorIcon } from './HasErrorIcon.svelte';
-export { default as UploadIcon } from './UploadIcon.svelte';
+export { default as UploadIcon } from './UploadIcon.svelte';
+export { default as DeleteIcon } from './DeleteIcon.svelte';
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -7,7 +7,7 @@ export type View = "dashboard" | "new-game" | "edit-game" | "delete-game" | "act
 /**
  * These are the possible icons in the app (used for the logs for example)
  */
-export type IconOption = "create" | "delete" | "update" | "chevron" | "search" | "error" | "upload";
+export type IconOption = "create" | "delete" | "update" | "chevron" | "search" | "error" | "upload" | "delete";
 
 /**
  * This is how I game looks like