Merge pull request 'feature/name-autocomplete' (#21) from feature/name-autocomplete into main

Reviewed-on: #21

.gitea/workflows/publish.yml

@@ -19,10 +19,10 @@ jobs:
 
     steps:
       - name: Checkout sources
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Login to DockerHub
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           registry: https://git.vbrandl.net
           username: ${{ secrets.REGISTRY_USER }}
@@ -35,7 +35,7 @@ jobs:
           echo REPO_VERSION=$(git describe --tags --always | sed 's/^v//') >> $GITHUB_OUTPUT
 
       - name: Build and push
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: ./Containerfile

flake.nix

@@ -15,7 +15,7 @@
           };
         in {
           devShell = pkgs.mkShell {
-            nativeBuildInputs = with pkgs; [ nodejs ];
+            nativeBuildInputs = with pkgs; [ nodejs_latest ];
           };
         }
       );

package.json

@@ -17,23 +17,24 @@
 		"@sveltejs/adapter-node": "^5.2.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"@types/eslint": "^8.56.7",
+		"@types/eslint": "^9.0.0",
 		"@types/node": "^20.14.11",
+		"bulma": "^1.0.1",
 		"eslint": "^9.0.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
 		"globals": "^15.0.0",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
+		"sass": "^1.77.5",
+		"simple-svelte-autocomplete": "^2.5.2",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.0.0-alpha.20",
 		"vite": "^5.0.3",
-		"vitest": "^2.0.0",
-		"bulma": "^1.0.1",
-		"sass": "^1.77.5"
+		"vitest": "^2.0.0"
 	},
 	"type": "module",
 	"engines": {

src/lib/index.ts

@@ -1,5 +1,6 @@
 // place files you want to import through the `$lib` alias in this folder.
 
 const safePath = (input: string) => input.replace(/\W/g, '');
+export const storagePath: string = './uploads';
 
 export default safePath;

src/routes/+page.server.ts

@@ -1,12 +1,10 @@
 import { writeFileSync, mkdirSync, existsSync } from 'fs';
 import { fail } from '@sveltejs/kit';
 import type { RequestEvent } from './$types';
-import safePath from '$lib';
+import safePath, { storagePath } from '$lib';
 import { hash } from 'crypto';
 import path from 'path';
 
-const storagePath: string = './uploads';
-
 const mkdirIfNotExists = (path: string) => {
 	if (!existsSync(path)) {
 		mkdirSync(path);

src/routes/+page.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
 	import type { ActionData } from './$types';
+	// @ts-expect-error: package does not contain type definitions
+	import AutoComplete from 'simple-svelte-autocomplete';
 
 	export let form: ActionData;
 
+	let selectedName: string;
+
 	let files: FileList;
 	let sending = false;
 
@@ -21,6 +25,12 @@
 				.map(([k, v]) => `${(size / k).toFixed(1)} ${v}B`)[0] ?? `${size} bytes`
 		);
 	};
+
+	async function loadNames() {
+		const url = './names';
+		const response = await fetch(url);
+		return await response.json();
+	}
 </script>
 
 <form
@@ -44,14 +54,15 @@
 	<div class="field">
 		<label for="name" class="label">Name</label>
 		<div class="control">
-			<input
+			<AutoComplete
 				id="name"
-				class="input"
-				type="text"
 				name="name"
 				placeholder="Name"
-				value={form?.name ?? ''}
-				required
+				create={true}
+				bind:selectedItem={selectedName}
+				bind:text={selectedName}
+				createText=""
+				searchFunction={loadNames}
 			/>
 		</div>
 		{#if form?.field === 'name'}
@@ -69,10 +80,10 @@
 			<span class="file-cta">
 				<span class="file-label">Fotos auswählen...</span>
 			</span>
-			{#if files}
-				<span class="file-name"
-					>{files.length} Bild{#if files.length > 1}er{/if} ausgewählt ({fileSize(files)})</span
-				>
+			{#if files && files?.length !== 0}
+				<span class="file-name">
+					{files.length} Bild{#if files.length > 1}er{/if} ausgewählt ({fileSize(files)})
+				</span>
 			{:else}
 				<span class="file-name">Keine Bilder ausgewählt</span>
 			{/if}

src/routes/names/+server.ts

@@ -0,0 +1,12 @@
+import { storagePath } from '$lib';
+import { json } from '@sveltejs/kit';
+import { readdirSync, statSync } from 'fs';
+
+export function GET() {
+	const names = readdirSync(storagePath).filter((f) =>
+		statSync(`${storagePath}/${f}`).isDirectory()
+	);
+	names.sort();
+
+	return json(names);
+}

src/variables.scss

@@ -1,2 +1,2 @@
 /* Set your brand colors */
-$pink: pink;
+$pink: #d47479;