86 lines
1.9 KiB
Svelte
86 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import Cube from '$lib/icons/Cube.svelte';
|
|
import Edit from '$lib/icons/Edit.svelte';
|
|
import Trash from '$lib/icons/Trash.svelte';
|
|
import shortenFileSize from '$lib/helper/shortenFileSize';
|
|
import timeElapsed from '$lib/helper/timeElapsed';
|
|
|
|
export let data;
|
|
export let i;
|
|
|
|
let crimesList = data.crimesList;
|
|
let item = crimesList[i];
|
|
|
|
let admin = data.user?.admin;
|
|
let link = `/view/${item.prefix}/${item.name}?token=${data.caseToken}`;
|
|
|
|
console.log('Debug Mina', crimesList, data);
|
|
|
|
function editName() {
|
|
console.log('Edit Name');
|
|
}
|
|
|
|
function deleteCase() {
|
|
console.log('Delete Case');
|
|
}
|
|
|
|
function checkIsEmpty() {
|
|
if (!item.name) console.log('Das Feld ist leer');
|
|
}
|
|
|
|
function cancelEdit() {
|
|
console.log('Bearbeitung abgebrochen');
|
|
}
|
|
</script>
|
|
|
|
<a href={link} class="flex justify-between items-center gap-x-6 py-5">
|
|
<div class=" flex gap-x-4">
|
|
<Cube class="h-auto" />
|
|
<div class="min-w-0 flex-auto">
|
|
{#if admin}
|
|
<input
|
|
class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
|
|
type="text"
|
|
value={item.name}
|
|
on:click|preventDefault={(ev) => {
|
|
editName();
|
|
}}
|
|
/>
|
|
|
|
<button
|
|
class="p-2"
|
|
on:click|preventDefault={(ev) => {
|
|
editName();
|
|
}}
|
|
>
|
|
<Edit />
|
|
</button>
|
|
|
|
<button
|
|
class="p-2"
|
|
on:click|preventDefault={async (ev) => {
|
|
deleteCase();
|
|
}}
|
|
>
|
|
<Trash />
|
|
</button>
|
|
{:else}
|
|
<span class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1">
|
|
{item.name}
|
|
</span>
|
|
{/if}
|
|
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">{shortenFileSize(item.size)}</p>
|
|
</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>
|
|
|
|
<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>
|
|
</div>
|
|
</a>
|