feat: Expand all sections for single Document

src/lib/Collapsible.svelte

@@ -20,6 +20,8 @@
   let visibility = "none";
   $: if (open) {
     visibility = "block";
+  } else {
+    visibility = "none";
   }
   let icon = "bx-chevron-down";
   /**

src/lib/ExpandAll.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  export let checked: any;
+</script>
+
+<input id="expandall" bind:checked type="checkbox" />
+<label for="expandall" class="expandall">Expand all sections</label>
+
+<style>
+  .expandall {
+    font-size: large;
+  }
+</style>

src/lib/singleview/SingleView.svelte

@@ -18,6 +18,7 @@
   import ProductVulnerabilities from "$lib/singleview/productvulnerabilities/ProductVulnerabilities.svelte";
   import Upload from "./Upload.svelte";
   import Vulnerabilities from "./vulnerabilities/Vulnerabilities.svelte";
+  import ExpandAll from "$lib/ExpandAll.svelte";
   $: isCSAF = !(
     !$appStore.doc?.isRevisionHistoryPresent &&
     !$appStore.doc?.isDocPresent &&
@@ -27,6 +28,18 @@
     !$appStore.doc?.isTrackingPresent &&
     !$appStore.doc?.isVulnerabilitiesPresent
   );
+  let expand: boolean;
+  $: if (expand) {
+    appStore.setGeneralSectionVisible();
+    appStore.setProductTreeSectionVisible();
+    appStore.setVulnerabilitiesSectionVisible();
+    appStore.setVulnerabilitiesOverviewVisible();
+  } else {
+    appStore.setGeneralSectionInvisible();
+    appStore.setProductTreeSectionInVisible();
+    appStore.setVulnerabilitiesSectionInvisible();
+    appStore.setVulnerabilitiesOverviewInvisible();
+  }
 </script>
 
 <div class="row">
@@ -46,20 +59,23 @@
         <h1>{$appStore.doc["id"]}: {$appStore.doc["title"]}</h1>
       </div>
     </div>
-    <Collapsible header="General" open={true}>
+    <div style="margin-bottom:1rem;">
+      <ExpandAll bind:checked={expand} />
+    </div>
+    <Collapsible header="General" open={$appStore.ui.isGeneralSectionVisible}>
       <General />
     </Collapsible>
   {/if}
   {#if $appStore.doc?.productVulnerabilities.length > 1}
     <Collapsible
       header="Vulnerabilities overview"
-      open={$appStore.ui.isVulnerabilisiesOverviewVisible}
+      open={$appStore.ui.isVulnerabilitiesOverviewVisible}
     >
       <ProductVulnerabilities />
     </Collapsible>
   {:else}
-      <h2>No Vulnerabilities overview</h2>
-      (As no products are connected to vulnerabilities.)
+    <h2>No Vulnerabilities overview</h2>
+    (As no products are connected to vulnerabilities.)
   {/if}
 
   {#if $appStore.doc && $appStore.doc["isProductTreePresent"]}
@@ -96,7 +112,8 @@
     padding: 0;
     margin-top: 3rem;
   }
-  h2 { /* style similar to h2 in Collapsible.svelte */
+  h2 {
+    /* style similar to h2 in Collapsible.svelte */
     margin: 0;
     font-weight: bold;
   }

src/lib/store.ts

@@ -16,12 +16,13 @@ type AppStore = {
   ui: {
     appMode: string;
     csafLoading: boolean;
+    docToggleExpandAll: boolean;
     feedErrorMsg: string;
     feedLoading: boolean;
     singleErrorMsg: string;
     isGeneralSectionVisible: boolean;
     isRevisionHistoryVisible: boolean;
-    isVulnerabilisiesOverviewVisible: boolean;
+    isVulnerabilitiesOverviewVisible: boolean;
     isVulnerabilitiesSectionVisible: boolean;
     isProductTreeVisible: boolean;
     isFeedSectionOpen: boolean;
@@ -47,12 +48,13 @@ const generateInitialState = (): AppStore => {
     ui: {
       appMode: MODE.SINGLE,
       csafLoading: false,
+      docToggleExpandAll: false,
       feedErrorMsg: "",
       feedLoading: false,
       singleErrorMsg: "",
       isGeneralSectionVisible: true,
       isRevisionHistoryVisible: false,
-      isVulnerabilisiesOverviewVisible: false,
+      isVulnerabilitiesOverviewVisible: false,
       isVulnerabilitiesSectionVisible: false,
       isProductTreeVisible: false,
       isFeedSectionOpen: false,
@@ -78,6 +80,16 @@ function createStore() {
         return settings;
       });
     },
+    toggleDocExpandAll: () => {
+      update((settings) => {
+        if (settings.ui.docToggleExpandAll) {
+          settings.ui.docToggleExpandAll = false;
+        } else {
+          settings.ui.docToggleExpandAll = true;
+        }
+        return settings;
+      });
+    },
     setSingleMode: () => {
       update((settings) => {
         settings.ui.appMode = MODE.SINGLE;
@@ -167,21 +179,21 @@ function createStore() {
         return settings;
       });
     },
-    setVulnerabilitiesSectionVisible: () => {
+    setGeneralSectionVisible: () => {
       update((settings) => {
-        settings.ui.isVulnerabilitiesSectionVisible = true;
+        settings.ui.isGeneralSectionVisible = true;
         return settings;
       });
     },
-    setProductTreeSectionVisible: () => {
+    setGeneralSectionInvisible: () => {
       update((settings) => {
-        settings.ui.isProductTreeVisible = true;
+        settings.ui.isGeneralSectionVisible = false;
         return settings;
       });
     },
-    setProductTreeSectionInVisible: () => {
+    setVulnerabilitiesSectionVisible: () => {
       update((settings) => {
-        settings.ui.isProductTreeVisible = false;
+        settings.ui.isVulnerabilitiesSectionVisible = true;
         return settings;
       });
     },
@@ -191,6 +203,30 @@ function createStore() {
         return settings;
       });
     },
+    setVulnerabilitiesOverviewVisible: () => {
+      update((settings) => {
+        settings.ui.isVulnerabilitiesOverviewVisible = true;
+        return settings;
+      });
+    },
+    setVulnerabilitiesOverviewInvisible: () => {
+      update((settings) => {
+        settings.ui.isVulnerabilitiesOverviewVisible = false;
+        return settings;
+      });
+    },
+    setProductTreeSectionVisible: () => {
+      update((settings) => {
+        settings.ui.isProductTreeVisible = true;
+        return settings;
+      });
+    },
+    setProductTreeSectionInVisible: () => {
+      update((settings) => {
+        settings.ui.isProductTreeVisible = false;
+        return settings;
+      });
+    },
     setUploadedFile: () => {
       update((settings) => {
         settings.ui.uploadedFile = true;