fix: table checkboxes works again

Kworz · May 1, 2024 · b6cc0a7 · b6cc0a7
1 parent c3ae040
commit b6cc0a7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/src/lib/components/generics/table/TableCellCheckbox.svelte b/src/lib/components/generics/table/TableCellCheckbox.svelte
@@ -1,8 +1,29 @@
 <script lang="ts">
+    import type { ChangeEventHandler } from "svelte/elements";
     import TableCell from "./TableCell.svelte";
 
-    export let group: Array<string>;
+    export let group: string[];
     export let value: string;
+
+    /**
+     * @description Function to handle the checkbox change event
+     * @warning Using an onChange function to bypass https://github.com/sveltejs/svelte/issues/2308
+     * @warning The previous implementation should work out of the box if this issue was solved.
+    **/
+    const onChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+
+        if(e.target === null) return;
+
+        const { value, checked } = e.target as any; // prevent ts to be angry because he dont know that the element is a checkbox input
+
+        if(checked)
+            group = [...group, value];
+        else
+            group = group.filter((item) => item !== value);
+
+    } 
 </script>
 
-<TableCell class="items-center"><input type="checkbox" bind:group {value} /></TableCell>
+<TableCell class="items-center">
+    <input type="checkbox" {value} checked={group.includes(value)} on:change={onChange} />
+</TableCell>
diff --git a/src/routes/app/(scm)/scm/articles/+page.svelte b/src/routes/app/(scm)/scm/articles/+page.svelte
@@ -92,10 +92,10 @@
 <PillMenu message={selected.length > 0 ? $_('scm.articles.selected', { values: { n: selected.length }}) : undefined} selection={selected.length}>
     <PillMenuButton icon={PlusCircle} click={() => createArticle = true}>{$_('app.action.create_article')}</PillMenuButton>
     <PillMenuButton icon={ArrowDownTray} href="/app/scm/articles/import" role="secondary">{$_('scm.articles.action.import_articles')}</PillMenuButton>
-    <PillMenuButton icon={ArrowUpTray} click={() => window.open(`/app/scm/articles/export/?articles=${selected.join(',')}`, '_blank')?.focus()} role="secondary">{$_('scm.articles.action.export_articles', { values: { n: selected.length }})}</PillMenuButton>
+    <PillMenuButton icon={ArrowUpTray} click={() => window.open(`/app/scm/articles/export?articles=${selected.join(',')}`, '_blank')?.focus()} role="secondary">{$_('scm.articles.action.export_articles', { values: { n: selected.length }})}</PillMenuButton>
 
     <svelte:fragment slot="selection">
-        <PillMenuButton icon={QrCode} click={() => window.open(`/app/scm/articles/print/?articles=${selected.join(',')}`, '_blank')?.focus()}>{$_('scm.articles.action.print_label', { values: { n: selected.length }})}</PillMenuButton>
+        <PillMenuButton icon={QrCode} click={() => window.open(`/app/scm/articles/print?articles=${selected.join(',')}`, '_blank')?.focus()}>{$_('scm.articles.action.print_label', { values: { n: selected.length }})}</PillMenuButton>
         <PillMenuButton icon={Trash} click={() => deleteArticles = true}>{$_('scm.article.actions.delete', { values: { n: selected.length }})}</PillMenuButton>
     </svelte:fragment>
 </PillMenu>