PLG_Development/PLG-MuDiCS
3
0
Fork 0
mirror of https://codeberg.org/PLG-Development/PLG-MuDiCS synced 2026-07-05 16:37:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(control): add select all files button

Browse Source 
closes #25
This commit is contained in:
E44
2026-06-14 20:26:21 +02:00
parent 87eaf90c12
commit 2dd390e815
1 changed files with 94 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
control/frontend/src/routes/FileView.svelte
+94 -48
View File
@@ -11,7 +11,12 @@
ZoomIn, ZoomIn,
ZoomOut ZoomOut
} from 'lucide-svelte'; } from 'lucide-svelte';
import { change_height, current_height, next_height_step_size } from '$lib/ts/stores/ui_behavior'; import {
change_height,
current_height,
get_selectable_color_classes,
next_height_step_size
} from '$lib/ts/stores/ui_behavior';
import Button from '$lib/components/Button.svelte'; import Button from '$lib/components/Button.svelte';
import PathBar from './PathBar.svelte'; import PathBar from './PathBar.svelte';
import { select, selected_display_ids, selected_file_ids } from '$lib/ts/stores/select'; import { select, selected_display_ids, selected_file_ids } from '$lib/ts/stores/select';
@@ -50,6 +55,16 @@
const s = $selected_file_ids; const s = $selected_file_ids;
selected_files = liveQuery(() => get_selected_files(s)); selected_files = liveQuery(() => get_selected_files(s));
}); });
let all_files_selected: boolean = $state(false);
$effect(() => {
const fe = $current_folder_elements;
const sfe_id = $selected_file_ids;
if (fe && sfe_id && fe.length !== 0) {
all_files_selected =
fe.length === sfe_id.length &&
!fe.find((inode) => !sfe_id.includes(get_file_primary_key(inode)));
}
});
let current_folder_elements: Observable<Inode[]> | undefined = $state(); let current_folder_elements: Observable<Inode[]> | undefined = $state();
$effect(() => { $effect(() => {
const path = $current_file_path, const path = $current_file_path,
@@ -147,6 +162,18 @@
}; };
}; };
async function toggle_all_selected_files(current_files: Inode[]) {
let action: 'select' | 'deselect';
if (all_files_selected === false) {
action = 'select';
} else {
action = 'deselect';
}
for (const file of current_files) {
await select(selected_file_ids, get_file_primary_key(file), action);
}
}
async function sync_selected_files( async function sync_selected_files(
current_selected_file_ids: string[], current_selected_file_ids: string[],
selected_display_ids: string[], selected_display_ids: string[],
@@ -291,29 +318,46 @@
<span class="text-xl font-bold pl-2 content-center truncate min-w-0"> <span class="text-xl font-bold pl-2 content-center truncate min-w-0">
Dateien Anzeigen und Verwalten Dateien Anzeigen und Verwalten
</span> </span>
<div class="flex flex-row"> <div class="flex flex-row gap-1">
<Button <button
title="Dateien größer darstellen" disabled={$current_folder_elements?.length === 0}
className="aspect-square p-1.5! pr-1! rounded-r-none" class="min-w-40 px-4 rounded-xl duration-200 transition-colors {$current_folder_elements?.length ===
bg="bg-stone-600" 0
disabled={!next_height_step_size('file', $current_height, 1)} ? 'text-stone-500 cursor-not-allowed'
click_function={() => { : 'cursor-pointer'} {get_selectable_color_classes(all_files_selected, {
change_height('file', 1); bg: true,
}} hover: $current_folder_elements?.length !== 0,
active: $current_folder_elements?.length !== 0,
text: true
})}"
onclick={async () => await toggle_all_selected_files($current_folder_elements ?? [])}
> >
<ZoomIn class="size-full" /> <span>{all_files_selected ? 'Alle Abwählen' : 'Alle Auswählen'}</span>
</Button> </button>
<Button <div class="flex flex-row">
title="Dateien kleiner darstellen" <Button
className="aspect-square p-1.5! pl-1! rounded-l-none" title="Dateien größer darstellen"
bg="bg-stone-600" className="aspect-square p-1.5! pr-1! rounded-r-none"
disabled={!next_height_step_size('file', $current_height, -1)} bg="bg-stone-600"
click_function={() => { disabled={!next_height_step_size('file', $current_height, 1)}
change_height('file', -1); click_function={() => {
}} change_height('file', 1);
> }}
<ZoomOut class="size-full" /> >
</Button> <ZoomIn class="size-full" />
</Button>
<Button
title="Dateien kleiner darstellen"
className="aspect-square p-1.5! pl-1! rounded-l-none"
bg="bg-stone-600"
disabled={!next_height_step_size('file', $current_height, -1)}
click_function={() => {
change_height('file', -1);
}}
>
<ZoomOut class="size-full" />
</Button>
</div>
</div> </div>
</div> </div>
<div class="flex flex-col gap-2 p-2 overflow-hidden relative rounded-b-2xl"> <div class="flex flex-col gap-2 p-2 overflow-hidden relative rounded-b-2xl">
@@ -389,34 +433,36 @@
</div> </div>
</div> </div>
</div> </div>
<div class="min-h-0 size-full overflow-y-auto overflow-x-hidden bg-stone-750 rounded-xl relative"> <div
<FileDropZone className="rounded-xl size-full"/> class="min-h-0 size-full overflow-y-auto overflow-x-hidden bg-stone-750 rounded-xl relative"
<div class="flex flex-col gap-2 p-2 min-h-0 max-w-full"> >
{#if $selected_online_display_ids.length === 0} <FileDropZone className="rounded-xl size-full" />
<span class="text-stone-450 px-10 py-6 leading-relaxed text-center"> <div class="flex flex-col gap-2 p-2 min-h-0 max-w-full">
Es sind keine Bildschirme ausgewählt. {#if $selected_online_display_ids.length === 0}
<span class="text-stone-450 px-10 py-6 leading-relaxed text-center">
Es sind keine Bildschirme ausgewählt.
</span>
{:else}
{#each $current_folder_elements ?? [] as folder_element (get_file_primary_key(folder_element))}
<section in:slide={{ duration: 100 }} class="outline-none">
<InodeElement file={folder_element} />
</section>
{/each}
{#if ($current_folder_elements ?? []).length === 0}
<span class="text-stone-450 px-10 py-6 leading-relaxed text-center max-w-full">
Es existieren keine Dateien auf {$selected_display_ids.length === 1
? 'dem ausgewähltem Bildchirm'
: 'den ausgewählten Bildschirmen'} im aktuellen Ordner. Klicke auf <HighlightedText
bg="bg-stone-700"
fg="text-stone-400"
className="p-1!"><Upload class="inline pb-1" /></HighlightedText
> um Datei(en) hochzuladen.
</span> </span>
{:else}
{#each $current_folder_elements ?? [] as folder_element (get_file_primary_key(folder_element))}
<section in:slide={{ duration: 100 }} class="outline-none">
<InodeElement file={folder_element} />
</section>
{/each}
{#if ($current_folder_elements ?? []).length === 0}
<span class="text-stone-450 px-10 py-6 leading-relaxed text-center max-w-full">
Es existieren keine Dateien auf {$selected_display_ids.length === 1
? 'dem ausgewähltem Bildchirm'
: 'den ausgewählten Bildschirmen'} im aktuellen Ordner. Klicke auf <HighlightedText
bg="bg-stone-700"
fg="text-stone-400"
className="p-1!"><Upload class="inline pb-1" /></HighlightedText
> um Datei(en) hochzuladen.
</span>
{/if}
{/if} {/if}
</div> {/if}
</div> </div>
</div>
<PopUp <PopUp
content={popup_content} content={popup_content}
close_function={popup_close_function} close_function={popup_close_function}