1 Commits

17 changed files with 840 additions and 788 deletions

1099
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -22,7 +22,6 @@
<div data-testid="expand-container" class="flex flex-col items-center">
<!-- + / × button -->
<button
data-testid="expand-button"
class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-600 text-white text-2xl font-bold hover:bg-blue-700 transition"
on:click={toggle}
aria-expanded={expanded}

View File

@@ -13,9 +13,8 @@
// props, old syntax
export let list: ListItem[] = [];
export let currentName: string;
export let vorgangToken: string | null;
export let onSave: (n: string, o: string, t?: string) => unknown = () => {};
export let onDelete: ((n: string) => unknown) | null = () => {};
export let onSave: (n: string, o: string) => unknown = () => {};
export let onDelete: (n: string) => unknown = () => {};
let localName = currentName;
let isEditing = false;
@@ -44,10 +43,8 @@
}
function commitEdit() {
if (!error && localName != currentName) onSave(localName, currentName, vorgangToken);
// restore original value
if (error) { localName = currentName }
if (!error && localName != currentName) onSave(localName, currentName);
isEditing = false;
}
@@ -57,60 +54,30 @@
}
function handleDeleteClick() {
// vorgangToken defined when deleting Vorgang, otherwise Crime
onDelete(vorgangToken || currentName);
onDelete(currentName);
}
</script>
<div data-testid="test-nameItemEditor" class="flex flex-col gap-1">
{#if isEditing}
<div class="flex items-center gap-1">
<input
data-testid="test-input"
bind:this={inputRef}
bind:value={localName}
onkeydown={handleKeydown}
class="flex-1 border border-gray-300 rounded px-1.5 py-0.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
/>
<button
data-testid="commit-button"
disabled={!!error || localName === currentName}
onclick={commitEdit}
class="text-gray-500 hover:text-green-600 transition disabled:opacity-40"
>
<Check class="w-4 h-4" />
</button>
<button
data-testid="cancel-button"
onclick={cancelEdit}
class="text-gray-500 hover:text-red-600 transition"
>
<X class="w-4 h-4" />
</button>
</div>
{:else}
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-gray-900 truncate">{localName}</span>
<button
data-testid="edit-button"
onclick={startEdit}
class="text-gray-500 hover:text-blue-600 transition"
>
<Edit class="w-4 h-4" />
</button>
{#if onDelete}
<div data-testid="test-nameItemEditor">
{#if isEditing}
<input
data-testid="test-input"
bind:this={inputRef}
bind:value={localName}
onkeydown={handleKeydown}
/>
<button
data-testid="delete-button"
onclick={handleDeleteClick}
class="text-gray-500 hover:text-red-600 transition"
data-testid="commit-button"
disabled={!!error || localName === currentName}
onclick={commitEdit}><Check /></button
>
<Trash class="w-4 h-4" />
</button>
{/if}
</div>
{/if}
{#if error}
<p class="text-xs text-red-500 mt-1">{error}</p>
{/if}
<button data-testid="cancel-button" onclick={cancelEdit}><X /></button>
{:else}
<span>{localName}</span>
<button data-testid="edit-button" onclick={startEdit}><Edit /></button>
<button data-testid="delete-button" onclick={handleDeleteClick}><Trash /></button>
{/if}
{#if error}
<p class="text-red-500">{error}</p>
{/if}
</div>

View File

@@ -234,27 +234,3 @@ export const vorgangPINValidation = function (vorgangToken: string, vorgangPIN:
return true;
};
/**
* Change VorgangName or VorgangPIN
* @param vorgangToken
* @param newValue
* @returns {int} number of affected lines
*/
export const updateVorgangAttrByToken = function (vorgangToken: string,
newValue: string,
column: string) {
const renameSQLStmt = `UPDATE cases set ${column} = ? WHERE token = ?`;
const statement = db.prepare(renameSQLStmt);
let info;
try {
info = statement.run(newValue, vorgangToken);
} catch (err) {
console.log(`error: ${err}`)
return 0;
}
return info.changes;
};

View File

@@ -1,6 +1,8 @@
import { type ServerLoadEvent } from '@sveltejs/kit';
import type { PageServerLoad } from '../anmeldung/$types';
import { ROUTE_NAMES } from '..';
export const load: PageServerLoad = (event: ServerLoadEvent) => {
if (event.locals.user) {
return {

View File

@@ -3,35 +3,12 @@
import Trash from '$lib/icons/Trash.svelte';
import Folder from '$lib/icons/Folder.svelte';
import EmptyList from '$lib/components/EmptyList.svelte';
import NameItemEditor from '$lib/components/NameItemEditor.svelte';
import Alert from '$lib/components/Alert.svelte';
import Button from '$lib/components/Button.svelte';
import Modal from '$lib/components/Modal/Modal.svelte';
import ModalTitle from '$lib/components/Modal/ModalTitle.svelte';
import ModalContent from '$lib/components/Modal/ModalContent.svelte';
import ModalFooter from '$lib/components/Modal/ModalFooter.svelte';
import { API_ROUTES, ROUTE_NAMES } from '../../index.js';
import { invalidateAll } from '$app/navigation';
let { data, form } = $props();
let vorgangList = $state(data.vorgangList);
// same as `vorgangList` but with one different property to be used
// with ´NameItemEditor`
const derivedList = $derived.by(
() => {
return vorgangList.map(
({ vorgangName, ...rest }) => (
{
name: vorgangName,
...rest
}
)
)
}
);
let vorgangList = data.vorgangList;
let isEmptyList = vorgangList.length === 0;
let vorgangName = $state('');
@@ -84,12 +61,16 @@
return true;
}
async function deleteVorgang(vorgangToken: string) {
async function delete_item(ev: Event) {
let delete_item = window.confirm('Bist du sicher?');
if (delete_item) {
let url = API_ROUTES.VORGANG(vorgangToken);
const target = ev.currentTarget as HTMLElement | null;
if (!target) return;
let filename = target.id.split('del__')[1];
let url = API_ROUTES.VORGANG(filename);
try {
const response = await fetch(url, { method: 'DELETE' });
if (response.status == 204) {
@@ -106,46 +87,6 @@
}
}
}
//Variablen für Modal
let open = $state(false);
let inProgress = $state(false);
let isError = $state(false);
async function handleSave(newName: string, oldName: string, vorgangToken: string) {
open = true;
inProgress = true;
isError = false;
try {
const res = await fetch(API_ROUTES.VORGANG(vorgangToken), {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ vorgangToken, oldName, newName })
});
if (!res.ok) {
throw new Error('Fehler beim Speichern');
}
await invalidateAll();
vorgangList = data.vorgangList;
open = false;
} catch (err) {
console.error('⚠️ Netzwerkfehler beim Speichern', err);
isError = true;
} finally {
inProgress = false;
}
}
async function closeModal() {
open = false;
isError = false;
}
</script>
<div class="-z-10 bg-white">
@@ -159,21 +100,30 @@
{:else}
{#each vorgangList as vorgangItem}
<li data-testid="test-list-item">
<div class="flex items-center justify-center gap-3">
<a
href="{ROUTE_NAMES.VORGANG(vorgangItem.vorgangToken)}"
class="flex flex-col items-center justify-center gap-2 py-4 rounded-lg hover:bg-gray-50 transition text-center"
href="{ROUTE_NAMES.VORGANG(vorgangItem.vorgangToken)}"
class="flex justify-between gap-x-6 py-5"
>
<Folder class="w-6 h-6 text-gray-600" />
<div class="flex gap-x-4">
<Folder />
<div class="min-w-0 flex-auto">
<span class="text-sm font-semibold leading-6 text-gray-900"
>{vorgangItem.vorgangName}</span
>
<button
style="padding: 2px"
id="del__{vorgangItem.vorgangToken}"
on:click|preventDefault={delete_item}
aria-label="Vorgang {vorgangItem.name} löschen"
>
<Trash />
</button>
</div>
</div>
<div class="hidden sm:flex sm:flex-col sm:items-end">
<p class="text-sm leading-6 text-gray-900">Vorgang</p>
</div>
</a>
<NameItemEditor
list={derivedList}
currentName={vorgangItem.vorgangName}
vorgangToken={vorgangItem.vorgangToken}
onSave={handleSave}
onDelete={deleteVorgang}
/>
</div>
</li>
{/each}
{/if}
@@ -243,22 +193,8 @@
</ExpandableForm>
<Modal {open}
><ModalTitle>Umbenennen</ModalTitle><ModalContent>
{#if inProgress}
<p class="py-2 mb-1">Vorgang läuft...</p>
{:else if isError}
<Alert class="w-full" type="error">Fehler beim Umbenennen</Alert>
{:else}
<Alert class="w-full">Umbenennen erfolgreich</Alert>
{/if}
</ModalContent>
<ModalFooter><Button disabled={inProgress} on:click={closeModal}>Ok</Button></ModalFooter>
</Modal>
<style>
ul {
min-width: 24rem;
}
</style>

View File

@@ -1,8 +1,10 @@
import { Readable } from 'stream';
import { BUCKET, client } from '$lib/minio';
import { fail, error } from '@sveltejs/kit';
import { v4 as uuidv4 } from 'uuid';
import { getVorgangByName } from '$lib/server/vorgangService';
import { db } from '$lib/server/dbService';
import { getVorgangByName, vorgangNameExists } from '$lib/server/vorgangService';
const isRequiredFieldValid = (value: unknown) => {
if (value == null) return false;

View File

@@ -190,39 +190,11 @@
}
}
async function savePIN(newVorgangPIN: string, oldVorgangPIN: string) {
open = true;
inProgress = true;
isError = false;
try {
const res = await fetch(API_ROUTES.VORGANG(vorgangToken), {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ vorgangToken, oldVorgangPIN, newVorgangPIN,
changePIN: true})
});
if (!res.ok) {
throw new Error('Fehler beim Speichern');
}
await invalidateAll();
crimesList = data.crimesList;
open = false;
} catch (err) {
console.error('⚠️ Netzwerkfehler beim Speichern', err);
isError = true;
} finally {
inProgress = false;
}
}
async function handleDelete(tatort: string) {
open = true;
inProgress = true;
isError = false;
let path = API_ROUTES.CRIME(vorgangToken, tatort)
let path = API_ROUTES.CRIME(vorgangToken, tatort);
try {
const res = await fetch(path, {
@@ -276,18 +248,10 @@ Mit freundlichen Grüßen,
{#if data.vorgang && crimesList}
<div class="-z-10 bg-white">
<div class="flex flex-col items-center justify-center w-full">
<h1 class="text-xl">{vorgangName}</h1>
<h1 class="text-xl">Vorgang {vorgangName}</h1>
{#if admin}
<div class="flex items-center gap-2">
Zugangs-PIN:
<NameItemEditor
list={[]}
currentName={vorgangPIN}
onSave={savePIN}
onDelete={null}
/>
</div>
Zugangs-PIN: {vorgangPIN}
<a class="pt-2 pb-6" href={constructMailToLink()}
><Button disabled={isEmptyList}>Share Link</Button></a
>
@@ -299,57 +263,51 @@ Mit freundlichen Grüßen,
<EmptyList></EmptyList>
{:else}
{#each crimesList as item (item.name)}
<li
data-testid="test-list-item"
class="flex items-center justify-between gap-6 py-4 px-2 hover:bg-gray-50 rounded-lg transition"
>
<div class="flex items-center gap-4 flex-1">
<a
data-testid="crime-link"
href="{ROUTE_NAMES.CRIME(vorgangToken, item.name, vorgangPIN)}"
class="flex items-center justify-center w-8 h-8 text-gray-600 hover:text-blue-600 transition"
aria-label="{ROUTE_NAMES.CRIME(vorgangToken, item.name, vorgangPIN)}"
title={item.name}
>
<Cube class="w-5 h-5" />
</a>
<div class="flex flex-col flex-1 min-w-0">
{#if admin}
<NameItemEditor
list={crimesList}
currentName={item.name}
onSave={handleSave}
onDelete={handleDelete}
/>
{:else}
<p
data-testid="test-nameItem-p"
class="text-sm font-semibold leading-6 text-gray-900 truncate"
>
{item.name}
</p>
{/if}
<!-- size left, last modified right -->
<div class="flex items-center justify-between mt-1 text-xs leading-5 text-gray-500">
{#if item.size}
<span>{shortenFileSize(item.size)}</span>
{:else}
<span></span>
{/if}
{#if item.lastModified}
<span>
Zuletzt geändert
<time datetime={item.lastModified}>
{timeElapsed(new Date(item.lastModified))}
</time>
</span>
{/if}
</div>
</div>
</div>
</li>
<li data-testid="test-list-item">
<div class=" flex gap-x-4">
<a
data-testid="crime-link"
href={ROUTE_NAMES.CRIME(vorgangToken, item.name, vorgangPIN)}
class=" flex justify-between gap-x-6 py-5"
aria-label={ROUTE_NAMES.CRIME(vorgangToken, item.name, vorgangPIN)}
title={item.name}
>
<Cube />
</a>
<div class="min-w-0 flex-auto">
{#if admin}
<NameItemEditor
list={crimesList}
currentName={item.name}
onSave={handleSave}
onDelete={handleDelete}
></NameItemEditor>
{:else}
<p
data-testid="test-nameItem-p"
class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
>
{item.name}
</p>
{/if}
{#if item.size}
<p class="mt-1 truncate text-xs leading-5 text-gray-500">
{shortenFileSize(item.size)}
</p>
{/if}
</div>
</div>
<div class="hidden sm:flex sm:flex-col sm:items-end">
<p class="text-sm leading-6 text-gray-900">3D Tatort</p>
{#if item.lastModified}
<p class="mt-1 text-xs leading-5 text-gray-500">
Zuletzt geändert <time datetime="2023-01-23T13:23Z"
>{timeElapsed(new Date(item.lastModified))}</time
>
</p>
{/if}
</div>
</li>
{/each}
{/if}
</ul>

View File

@@ -1,4 +1,5 @@
import { getVorgaenge } from '$lib/server/vorgangService';
import { json } from '@sveltejs/kit';
export async function GET() {
const vorgaenge = getVorgaenge();
@@ -6,4 +7,4 @@ export async function GET() {
return new Response(JSON.stringify(vorgaenge), {
status: 200
});
}
}

View File

@@ -3,8 +3,7 @@ import { json } from '@sveltejs/kit';
import {
deleteVorgangByToken,
getCrimesListByToken,
vorgangNameExists,
updateVorgangAttrByToken
vorgangNameExists
} from '$lib/server/vorgangService';
export async function DELETE({ params }) {
@@ -58,31 +57,3 @@ export async function GET({ params }) {
return new Response(null, { status: 500 });
}
}
// change Vorgang properties
export async function PUT({ request }) {
const data = await request.json();
const vorgangToken = data['vorgangToken'];
const changePIN = data['changePIN'];
let attrChanged;
let newValue;
if (changePIN) {
attrChanged = 'pin';
newValue = data['newVorgangPIN']
} else {
attrChanged = 'name';
newValue = data['newName']
}
const res = updateVorgangAttrByToken(vorgangToken, newValue, attrChanged);
if (!res) {
return json({ msg: 'Fehler beim Umbenennen' }, { status: 400 });
}
return json({ success: 'success' }, { status: 200 });
}

View File

@@ -1,3 +1,4 @@
import { json } from '@sveltejs/kit';
import { deleteUser } from '$lib/server/userService';
export async function DELETE({ params }) {

View File

@@ -18,13 +18,7 @@ describe('NameItemEditor - Funktionalität', () => {
onDelete
};
test('Focus Input nach Klick auf edit', async () => {
render(NameItemEditor, { props: baseProps });
await fireEvent.click(screen.getByTestId('edit-button'));
const input = screen.getByTestId('test-input');
expect(document.activeElement).toBe(input);
});
test.todo('FocusIn nach Klick auf edit');
it('zeigt initial Edit/Delete Buttons und aktuellen Namen', () => {
render(NameItemEditor, { props: baseProps });
@@ -93,7 +87,7 @@ describe('NameItemEditor - Funktionalität', () => {
expect(onSave).not.toHaveBeenCalled();
});
it('ruft onSave korrekt auf bei gültigem Namen: Tatort/Crime', async () => {
it('ruft onSave korrekt auf bei gültigem Namen', async () => {
render(NameItemEditor, { props: baseProps });
await fireEvent.click(screen.getByTestId('edit-button'));
@@ -101,7 +95,7 @@ describe('NameItemEditor - Funktionalität', () => {
await fireEvent.input(input, { target: { value: testLocalName } });
await fireEvent.click(screen.getByTestId('commit-button'));
expect(onSave).toHaveBeenCalledWith(testLocalName, testCurrentName, undefined);
expect(onSave).toHaveBeenCalledWith(testLocalName, testCurrentName);
});
it('ruft onDelete korrekt auf', async () => {
@@ -123,7 +117,7 @@ describe('NameItemEditor - Funktionalität', () => {
expect(screen.getByTestId('edit-button')).toBeInTheDocument();
});
it('triggert Save bei Enter-Taste: Tatort/Crime', async () => {
it('triggert Save bei Enter-Taste', async () => {
render(NameItemEditor, { props: baseProps });
await fireEvent.click(screen.getByTestId('edit-button'));
@@ -131,7 +125,7 @@ describe('NameItemEditor - Funktionalität', () => {
await fireEvent.input(input, { target: { value: 'ViaEnter' } });
await fireEvent.keyDown(input, { key: 'Enter' });
expect(onSave).toHaveBeenCalledWith('ViaEnter', testCurrentName, undefined);
expect(onSave).toHaveBeenCalledWith('ViaEnter', testCurrentName);
});
it('bricht ab bei Escape-Taste', async () => {

View File

@@ -41,7 +41,7 @@ export const baseData = {
vorgang: testVorgangsList[0],
vorgangList: testVorgangsList,
crimesList: testCrimesList,
url: new URL(`https://example.com/list/${testVorgangsList[0].vorgangToken}`),
url: `https://example.com/list/${testVorgangsList[0].vorgangToken}`,
crimeNames: ['modell-A', 'Fall-A']
};

View File

@@ -77,39 +77,7 @@ describe('Vorgang Anzeige via Token', () => {
// Cookie wird nicht gesetzt
expect(cookiesSet).not.toHaveBeenCalled();
});
it('Falsche PIN', async () => {
// Mock formData
const vorgObj = baseData.vorgang;
const formData = new FormData();
formData.set('vorgang-token', vorgObj.vorgangToken);
formData.set('vorgang-pin', vorgObj.vorgangPIN);
const mockRequest = {
formData: vi.fn().mockResolvedValue(formData)
};
// PIN-Validierung nicht erfolgreich
vi.mocked(vorgangPINValidation).mockReturnValueOnce(false);
const cookiesSet = vi.fn();
const event = {
request: mockRequest,
cookies: {
set: cookiesSet
}
};
const result = await actions.default(event);
expect(result.status).toBe(400);
expect(result.data.message).toMatch(/Falsch/i);
});
// Nicht vorhandener Vorgang-Token nicht notwendig, da PIN-Check
// entsprechend fehlerhaft
it.skip('Nicht vorhandener Vorgang-Token', () => {});
it.todo('Überprüfe was passiert, wenn Eingabe falsch, bzw. nicht im System passend gefunden');
});
describe('Teste Guard', () => {

View File

@@ -26,29 +26,9 @@ async function clickPlusButton() {
}
describe('Seite: Vorgangsansicht', () => {
test('Share Link disabled wenn Liste leer', () => {
const testData = { ...baseData, crimesList: [] };
render(TatortListPage, { props: { data: testData } });
const button = screen.getByRole('button', { name: /share link/i });
expect(button).toBeInTheDocument()
expect(button).toBeDisabled();
});
test.todo('Share Link disabled wenn Liste leer');
describe('Szenario: Admin + Liste gefüllt - Funktionalität', () => {
test('Share Link Link generierung richtig', () => {
const testData = { ...baseData};
render(TatortListPage, { props: { data: testData } });
const link = screen.getByRole('link', { name: /share link/i });
expect(link).toBeInTheDocument()
// const vorgangTokenFirstUUIDGroup = testData.vorgangList[0].vorgangToken.split('-')[0]
const vorgangURL = testData.url.toString()
const vorgangURLEncoded = encodeURIComponent(vorgangURL)
expect(link).toHaveAttribute('href', expect.stringContaining(vorgangURLEncoded));
});
test.todo('Share Link Link generierung richtig');
it('führt PUT-Request aus und aktualisiert UI nach onSave', async () => {
const data = structuredClone(baseData);
@@ -153,7 +133,7 @@ describe('Hinzufügen Button', () => {
console.log(`test: input field validation`);
});
it.todo('Create Tatort successful', async () => {
it.skip('Create Tatort successful', async () => {
console.log(`test: tatort upload`);
});
});

View File

@@ -100,16 +100,4 @@ describe('Seite: Vorgangsansicht', () => {
expect(linkElement).toHaveAttribute('href', expectedURL);
});
});
describe('PIN Anzeige & Button', () => {
it('Teste korrekte Anzeige von PIN Komponente', () => {
const testData = { ...baseData};
render(TatortListPage, { props: { data: testData } });
const vorgObj = baseData.vorgangList[0]
// PIN is being displayed within ´NameItemEditor´
let label = screen.queryByText(vorgObj.vorgangPIN);
expect(label).toBeInTheDocument();
});
});
});

View File

@@ -6,14 +6,6 @@ import { ROUTE_NAMES } from '../../src/routes';
import { actions } from '../../src/routes/(angemeldet)/list/+page.server';
import { createVorgang } from '$lib/server/vorgangService';
// mock animation features of the browser
window.HTMLElement.prototype.scrollIntoView = vi.fn();
window.HTMLElement.prototype.animate = vi.fn(() => ({
finished: Promise.resolve(),
cancel: vi.fn(),
}))
describe('Vorgänge Liste Page EmptyList-Komponente View', () => {
it('zeigt EmptyList-Komponente an, wenn Liste leer ist', () => {
const testData = { ...baseData, vorgangList: [] };
@@ -55,8 +47,16 @@ describe('Teste Links auf Korrektheit', () => {
});
async function clickPlusButton() {
// mock animation features of the browser
window.HTMLElement.prototype.scrollIntoView = vi.fn();
window.HTMLElement.prototype.animate = vi.fn(() => ({
finished: Promise.resolve(),
cancel: vi.fn(),
}))
// button is visible
const button = screen.getByTestId('expand-button')
const button = screen.getByRole('button')
expect(button).toBeInTheDocument();
await fireEvent.click(button)
@@ -171,14 +171,4 @@ describe('Hinzufügen Buton', () => {
const result = await actions.default(event);
expect(result).toEqual({ token: testVorgangToken });
});
});
describe('Vorgang-Operationen', () => {
it('Teste korrekte Anzeige von Vorgang-Input Komponente', () => {
const testData = { ...baseData};
const { getAllByTestId } = render(VorgangListPage, { props: { data: testData } });
let buttons = getAllByTestId('edit-button')
expect(buttons.length).toBeGreaterThan(1);
});
});