feat: bind filter values for papers filtering

Now all filters are available in the +page.ts file and can be used to make filtered requests
SE-UUlm · Jan 19, 2025 · e50576d · e50576d
1 parent 3abd1ea
commit e50576d
Show file tree

Hide file tree

Showing 10 changed files with 113 additions and 44 deletions.
diff --git a/src/lib/components/composites/navigation-bar/SimpleNavigationBar.svelte b/src/lib/components/composites/navigation-bar/SimpleNavigationBar.svelte
@@ -27,6 +27,6 @@
     {:then title}
         <h2 class="place-content-center truncate">{title}</h2>
     {:catch}
-        <h2 class="place-content-center">Error</h2>
+        <h2 class="place-content-center">Loading failed</h2>
     {/await}
 </NavigationBar>
diff --git a/src/lib/components/composites/paper-components/paper-view/cards/PaperDetailsCard.svelte b/src/lib/components/composites/paper-components/paper-view/cards/PaperDetailsCard.svelte
@@ -68,7 +68,7 @@
     loadingPaper
         .then((paper) => {
             additionalInfos = {
-                "Publication Type": paper.type ?? "N/A",
+                "Publication Type": paper.publicationType ?? "N/A",
                 "Publication Name": "N/A",
                 DOI: paper.doi ?? "N/A",
             };

diff --git a/src/lib/components/composites/select/Select.svelte b/src/lib/components/composites/select/Select.svelte
@@ -5,10 +5,10 @@
     interface Props {
         options: SelectOption[];
         categoryLabel?: string;
+        selectedValues?: string[];
     }
 
-    const { options, categoryLabel = "category" }: Props = $props();
-    let selectedValues = $state<string[] | undefined>(undefined);
+    let { options, categoryLabel = "category", selectedValues = $bindable([]) }: Props = $props();
     let label = $derived(getSelectLabel(selectedValues));
 
     function getSelectLabel(selectedValues: string[] | undefined): string {

diff --git a/src/routes/project/[projectId]/papers/+page.svelte b/src/routes/project/[projectId]/papers/+page.svelte
@@ -14,6 +14,7 @@
     import DecisionsSelect from "./DecisionsSelect.svelte";
     import CriteriaSelect from "./CriteriaSelect.svelte";
     import type { PapersByStage } from "./types";
+    import type { Paper } from "$lib/model/backend";
 
     let { data } = $props();
     const {
@@ -29,6 +30,7 @@
     } = data;
 
     let papersByStage = $state<PapersByStage[]>([]);
+    let selectedPaper = $state<Paper | undefined>(undefined);
 
     loadingPapersByStage
         .then((loadedPapersByStage) => {
@@ -39,15 +41,38 @@
         });
 
     let showFilters = $state(true);
+
+    interface PapersFilters {
+        stages: string[];
+        reviewers: string[];
+        publishers: string[];
+        years: string[];
+        decisions: string[];
+        criteria: string[];
+    }
+
+    let papersFilters = $state<PapersFilters>({
+        stages: [],
+        reviewers: [],
+        publishers: [],
+        years: [],
+        decisions: [],
+        criteria: [],
+    });
+
+    $effect(() => {
+        const filters = Object.assign({}, $state.snapshot(papersFilters));
+        console.log(filters);
+    });
 </script>
 
 <svelte:head>
     {#await loadingProject}
-        <title>Loading Project...</title>
+        <title>Loading project...</title>
     {:then project}
         <title>Papers | {project.name}</title>
     {:catch}
-        <title>Papers</title>
+        <title>Failed loading project</title>
     {/await}
 </svelte:head>
 <ProjectNavigationBar {user} {projectId} {loadingProject} defaultTabValue="papers" />
@@ -63,53 +88,86 @@
                         <ChevronDown class="size-4" />
                     {/if}
                 </Button>
-                <SearchBar placeholderText="Search paper" onSearch={() => {}} />
+                <SearchBar
+                    placeholderText="Search paper"
+                    onSearch={() => {
+                        console.log($state.snapshot(papersFilters));
+                    }}
+                />
             </div>
             {#if showFilters}
                 <div class="flex flex-row items-center gap-2.5 flex-wrap">
-                    <StagesSelect {loadingStageCount} />
-                    <ReviewersSelect {loadingReviewers} />
-                    <PublishersSelect {loadingPublishers} />
-                    <YearsSelect {loadingYears} />
-                    <DecisionsSelect />
-                    <CriteriaSelect {loadingCriteria} />
+                    <StagesSelect {loadingStageCount} bind:selectedStages={papersFilters.stages} />
+                    <ReviewersSelect
+                        {loadingReviewers}
+                        bind:selectedReviewers={papersFilters.reviewers}
+                    />
+                    <PublishersSelect
+                        {loadingPublishers}
+                        bind:selectedPublishers={papersFilters.publishers}
+                    />
+                    <YearsSelect {loadingYears} bind:selectedYears={papersFilters.years} />
+                    <DecisionsSelect bind:selectedDecisions={papersFilters.decisions} />
+                    <CriteriaSelect
+                        {loadingCriteria}
+                        bind:selectedCriteria={papersFilters.criteria}
+                    />
                 </div>
             {/if}
         </div>
         <div class="w-full h-full">
+            <span class="text-hint">
+                {papersByStage.length}
+                {papersByStage.length === 1 ? "Stage" : "Stages"}
+            </span>
             <Accordion.Root type="multiple">
                 {#each papersByStage as stage, index}
                     <Accordion.Item value={`stage-${index}`}>
-                        <Accordion.Trigger>Stage {stage.stageIndex}</Accordion.Trigger>
+                        <!-- TODO: Add amount of filtered/all e.g. (3/7) -->
+                        <Accordion.Trigger>
+                            Stage {stage.stageIndex} ({stage.papers.length})
+                        </Accordion.Trigger>
                         <Accordion.Content>
                             <div class="flex flex-col pl-5 gap-4">
                                 {#each stage.papers as { paper }}
-                                    <PaperListEntry {paper} {projectId} showReviewStatus />
+                                    <PaperListEntry
+                                        {paper}
+                                        {projectId}
+                                        showReviewStatus
+                                        onClick={() => {
+                                            selectedPaper = paper;
+                                        }}
+                                    />
                                 {/each}
+                                <!-- TODO: Add 'add paper' button -->
                             </div>
                         </Accordion.Content>
                     </Accordion.Item>
                 {/each}
             </Accordion.Root>
         </div>
     </div>
-    <Card.Root class="flex flex-col w-[60%] h-full gap-5 shadow-lg hidden">
-        <Card.Content>
-            <h2>General Information</h2>
-            <div class="flex flex-col gap-2.5">
-                <div class="flex flex-row justify-between items-center">
-                    <h3>Number of Papers</h3>
-                    <p>4</p>
+    {#if selectedPaper}
+        <!-- <PaperDetailsCard loadingPaper={Promise.resolve(selectedPaper)} allowEditModeToggle={false} startInEditMode={false} showButtonBar={false} /> -->
+        <Card.Root class="flex flex-col w-[60%] h-full gap-5 shadow-lg">
+            <Card.Content>
+                <!-- TODO: replace with paper details card -->
+                <h2>General Information</h2>
+                <div class="flex flex-col gap-2.5">
+                    <div class="flex flex-row justify-between items-center">
+                        <h3>Number of Papers</h3>
+                        <p>4</p>
+                    </div>
+                    <div class="flex flex-row justify-between items-center">
+                        <h3>Number of Reviews</h3>
+                        <p>8</p>
+                    </div>
+                    <div class="flex flex-row justify-between items-center">
+                        <h3>Number of Decisions</h3>
+                        <p>4</p>
+                    </div>
                 </div>
-                <div class="flex flex-row justify-between items-center">
-                    <h3>Number of Reviews</h3>
-                    <p>8</p>
-                </div>
-                <div class="flex flex-row justify-between items-center">
-                    <h3>Number of Decisions</h3>
-                    <p>4</p>
-                </div>
-            </div>
-        </Card.Content>
-    </Card.Root>
+            </Card.Content>
+        </Card.Root>
+    {/if}
 </main>
diff --git a/src/routes/project/[projectId]/papers/CriteriaSelect.svelte b/src/routes/project/[projectId]/papers/CriteriaSelect.svelte
@@ -5,9 +5,10 @@
 
     interface Props {
         loadingCriteria: Promise<Criterion[]>;
+        selectedCriteria?: string[];
     }
 
-    const { loadingCriteria }: Props = $props();
+    let { loadingCriteria, selectedCriteria = $bindable(undefined) }: Props = $props();
 
     let criteria = $state<Criterion[] | undefined>(undefined);
     let options = $derived<SelectOption[]>(
@@ -28,4 +29,4 @@
         });
 </script>
 
-<Select {options} categoryLabel="Criteria" />
+<Select {options} categoryLabel="Criteria" bind:selectedValues={selectedCriteria} />
diff --git a/src/routes/project/[projectId]/papers/DecisionsSelect.svelte b/src/routes/project/[projectId]/papers/DecisionsSelect.svelte
@@ -2,11 +2,17 @@
     import Select from "$lib/components/composites/select/Select.svelte";
     import type { SelectOption } from "$lib/components/composites/select/types";
 
+    interface Props {
+        selectedDecisions?: string[];
+    }
+
+    let { selectedDecisions = $bindable(undefined) }: Props = $props();
+
     let options = $state<SelectOption[]>([
         { value: "accepted", label: "Accepted" },
         { value: "declined", label: "Declined" },
         { value: "maybe", label: "Maybe" },
     ]);
 </script>
 
-<Select {options} categoryLabel="Decisions" />
+<Select {options} categoryLabel="Decisions" bind:selectedValues={selectedDecisions} />
diff --git a/src/routes/project/[projectId]/papers/PublishersSelect.svelte b/src/routes/project/[projectId]/papers/PublishersSelect.svelte
@@ -4,9 +4,10 @@
 
     interface Props {
         loadingPublishers: Promise<string[]>;
+        selectedPublishers?: string[];
     }
 
-    const { loadingPublishers }: Props = $props();
+    let { loadingPublishers, selectedPublishers = $bindable(undefined) }: Props = $props();
 
     let publishers = $state<string[] | undefined>(undefined);
     let options = $derived<SelectOption[]>(
@@ -27,4 +28,4 @@
         });
 </script>
 
-<Select {options} categoryLabel="Publishers" />
+<Select {options} categoryLabel="Publishers" bind:selectedValues={selectedPublishers} />
diff --git a/src/routes/project/[projectId]/papers/ReviewersSelect.svelte b/src/routes/project/[projectId]/papers/ReviewersSelect.svelte
@@ -6,9 +6,10 @@
 
     interface Props {
         loadingReviewers: Promise<User[]>;
+        selectedReviewers?: string[];
     }
 
-    const { loadingReviewers }: Props = $props();
+    let { loadingReviewers, selectedReviewers = $bindable(undefined) }: Props = $props();
 
     let reviewers = $state<User[] | undefined>(undefined);
     let options = $derived<SelectOption[]>(
@@ -29,4 +30,4 @@
         });
 </script>
 
-<Select {options} categoryLabel="Reviewers" />
+<Select {options} categoryLabel="Reviewers" bind:selectedValues={selectedReviewers} />
diff --git a/src/routes/project/[projectId]/papers/StagesSelect.svelte b/src/routes/project/[projectId]/papers/StagesSelect.svelte
@@ -4,9 +4,10 @@
 
     interface Props {
         loadingStageCount: Promise<number>;
+        selectedStages?: string[];
     }
 
-    const { loadingStageCount }: Props = $props();
+    let { loadingStageCount, selectedStages = $bindable(undefined) }: Props = $props();
 
     let stageCount = $state<number | undefined>(undefined);
     let options = $derived<SelectOption[]>(
@@ -28,4 +29,4 @@
         });
 </script>
 
-<Select {options} categoryLabel="Stages" />
+<Select {options} categoryLabel="Stages" bind:selectedValues={selectedStages} />
diff --git a/src/routes/project/[projectId]/papers/YearsSelect.svelte b/src/routes/project/[projectId]/papers/YearsSelect.svelte
@@ -4,9 +4,10 @@
 
     interface Props {
         loadingYears: Promise<number[]>;
+        selectedYears?: string[];
     }
 
-    const { loadingYears }: Props = $props();
+    let { loadingYears, selectedYears = $bindable(undefined) }: Props = $props();
 
     let years = $state<number[] | undefined>(undefined);
     let options = $derived<SelectOption[]>(
@@ -40,4 +41,4 @@
         });
 </script>
 
-<Select {options} categoryLabel="Years" />
+<Select {options} categoryLabel="Years" bind:selectedValues={selectedYears} />