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
+48 -2
View File
@@ -11,7 +11,12 @@
ZoomIn,
ZoomOut
} 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 PathBar from './PathBar.svelte';
import { select, selected_display_ids, selected_file_ids } from '$lib/ts/stores/select';
@@ -50,6 +55,16 @@
const s = $selected_file_ids;
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();
$effect(() => {
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(
current_selected_file_ids: string[],
selected_display_ids: string[],
@@ -291,6 +318,22 @@
<span class="text-xl font-bold pl-2 content-center truncate min-w-0">
Dateien Anzeigen und Verwalten
</span>
<div class="flex flex-row gap-1">
<button
disabled={$current_folder_elements?.length === 0}
class="min-w-40 px-4 rounded-xl duration-200 transition-colors {$current_folder_elements?.length ===
0
? 'text-stone-500 cursor-not-allowed'
: 'cursor-pointer'} {get_selectable_color_classes(all_files_selected, {
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 ?? [])}
>
<span>{all_files_selected ? 'Alle Abwählen' : 'Alle Auswählen'}</span>
</button>
<div class="flex flex-row">
<Button
title="Dateien größer darstellen"
@@ -316,6 +359,7 @@
</Button>
</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 bg-stone-750 rounded-xl">
<PathBar />
@@ -390,7 +434,9 @@
</div>
</div>
<div class="min-h-0 size-full overflow-y-auto overflow-x-hidden bg-stone-750 rounded-xl relative">
<div
class="min-h-0 size-full overflow-y-auto overflow-x-hidden bg-stone-750 rounded-xl relative"
>
<FileDropZone className="rounded-xl size-full" />
<div class="flex flex-col gap-2 p-2 min-h-0 max-w-full">
{#if $selected_online_display_ids.length === 0}