From 3ae4be960e26f04558b64db7ea3be45f9c7df391 Mon Sep 17 00:00:00 2001
From: Ravi Meijer <ravi.meijer@rijksoverheid.nl>
Date: Mon, 11 Nov 2024 11:49:57 +0100
Subject: [PATCH] Bug fix for feedback tussenresultaat

---
 frontend/src/components/SubResult.vue | 158 ++++++++++++++++----------
 1 file changed, 100 insertions(+), 58 deletions(-)

diff --git a/frontend/src/components/SubResult.vue b/frontend/src/components/SubResult.vue
index a697c6c..3513add 100644
--- a/frontend/src/components/SubResult.vue
+++ b/frontend/src/components/SubResult.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import BetaversionLabel from '@/components/betaversion-label.vue'
-import { computed } from 'vue'
 
 interface Props {
   category: string | undefined
@@ -9,27 +8,8 @@ interface Props {
   conclusion: string
 }
 
-  const props = defineProps<Props>()
+defineProps<Props>()
 
-
-// Function to check if there are any valid labels in a category
-function hasValidLabelsForCategory(assigned_labels: string[]) {
-  return assigned_labels.some(label => label !== 'nader te bepalen' )
-}
-
-// Filter categories that have valid labels (not 'nader te bepalen' or 'niet van toepassing')
-const filteredCategories = computed(() => {
-  if (!props.labels) return []
-
-  return Object.entries(props.labels).filter(([category, assigned_labels]) =>
-    hasValidLabelsForCategory(assigned_labels)
-  )
-})
-
-// Check if there are any valid labels to display the "Tussenresultaat" section
-const showTussenresultaat = computed(() => filteredCategories.value.length > 0)
-
-// Function to set the background color of the labels
 function get_background_color(label: string | undefined) {
   if (label === 'nader te bepalen' || label === 'niet van toepassing') {
     return 'background-color: var(--rvo-color-grijs-300)'
@@ -40,45 +20,107 @@ function get_background_color(label: string | undefined) {
 </script>
 
 <template>
-  <div v-if="showTussenresultaat">
-    <div class="rvo-accordion">
-      <details class="rvo-accordion__item">
-        <summary class="rvo-accordion__item-summary">
-          <h3 class="utrecht-heading-3 rvo-accordion__item-title rvo-heading--no-margins rvo-heading--mixed items-center">
-            <span class="utrecht-icon rvo-icon rvo-icon-delta-omlaag rvo-icon--md rvo-icon--hemelblauw rvo-accordion__item-icon--closed" role="img" aria-label="Delta omlaag"></span>
-            <span class="utrecht-icon rvo-icon rvo-icon-delta-omhoog rvo-icon--md rvo-icon--hemelblauw rvo-accordion__item-icon--open" role="img" aria-label="Delta omhoog"></span>
-            {{ title }}
-          </h3>
-          <span class="rvo-accordion-teaser">Bekijk hier je profiel tot nu toe</span>
-        </summary>
-        <div class="rvo-accordion__content">
-          <div class="rvo-table--responsive py-5">
-            <table class="rvo-table">
-              <thead class="rvo-table-head">
-                <tr class="rvo-table-row">
-                  <th scope="col" class="rvo-table-header">Categorie</th>
-                  <th scope="col" class="rvo-table-header">Resultaat</th>
-                </tr>
-              </thead>
-              <tbody class="rvo-table-body">
-                <!-- Display only categories with valid labels -->
-                <tr v-for="([category, assigned_labels]) in filteredCategories" :key="category" class="rvo-table-row">
-                  <td class="rvo-table-cell rvo-text--bold rvo-text--md">{{ category }}</td>
-                  <td class="flex rvo-table-cell gap-x-3">
-                    <div v-for="label in assigned_labels" :key="label" class="rvo-tag rvo-tag--default" :style="get_background_color(label)">
-                      {{ label }}
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
+  <div v-if="conclusion == ''">
+  <div class="rvo-accordion">
+    <details class="rvo-accordion__item">
+      <summary class="rvo-accordion__item-summary">
+        <h3
+          class="utrecht-heading-3 rvo-accordion__item-title rvo-heading--no-margins rvo-heading--mixed items-center"
+        >
+                  <span
+                    class="utrecht-icon rvo-icon rvo-icon-delta-omlaag rvo-icon--md rvo-icon--hemelblauw rvo-accordion__item-icon--closed"
+                    role="img"
+                    aria-label="Delta omlaag"
+                  ></span>
+          <span
+            class="utrecht-icon rvo-icon rvo-icon-delta-omhoog rvo-icon--md rvo-icon--hemelblauw rvo-accordion__item-icon--open"
+            role="img"
+            aria-label="Delta omhoog"
+          ></span>
+          {{ title }}
+        </h3>
+              <span class="rvo-accordion-teaser">Bekijk hier je profiel tot nu toe</span>
+      </summary>
+      <div class="rvo-accordion__content">
+        <div class="rvo-table--responsive py-5">
+          <table class="rvo-table">
+            <thead class="rvo-table-head">
+            <tr class="rvo-table-row">
+              <th scope="col" class="rvo-table-header">Categorie</th>
+              <th
+                scope="col"
+                class="rvo-table-header rvo-table-header"
+              >
+                Resultaat
+              </th>
+            </tr>
+            </thead>
+            <tbody class="rvo-table-body">
+            <tr v-for='(assigned_labels, category) in labels' :key="category" class="rvo-table-row">
+              <td class="rvo-table-cell rvo-text--bold rvo-text--md">{{ category }}</td>
+              <td class="flex rvo-table-cell gap-x-3">
+                <div v-for='(label) in assigned_labels' :key="label"
+                     class="rvo-tag rvo-tag--default" :style="get_background_color(label)">
+                  {{ label }}
+                </div>
+              </td>
+            </tr>
+            </tbody>
+          </table>
         </div>
-      </details>
-    </div>
+      </div>
+    </details>
   </div>
-
+    </div>
   <div v-else>
-    <!-- If no labels, show nothing -->
+    <div class="rvo-accordion">
+    <details class="rvo-accordion__item" open="true">
+      <summary class="rvo-accordion__item-summary">
+        <h3
+          class="utrecht-heading-3 rvo-accordion__item-title rvo-heading--no-margins rvo-heading--mixed items-center"
+        >
+                  <span
+                    class="utrecht-icon rvo-icon rvo-icon-delta-omlaag rvo-icon--md rvo-icon--hemelblauw rvo-accordion__item-icon--closed"
+                    role="img"
+                    aria-label="Delta omlaag"
+                  ></span>
+          <span
+            class="utrecht-icon rvo-icon rvo-icon-delta-omhoog rvo-icon--md rvo-icon--hemelblauw rvo-accordion__item-icon--open"
+            role="img"
+            aria-label="Delta omhoog"
+          ></span>
+          {{ title }}
+        </h3>
+      </summary>
+      <div class="rvo-accordion__content">
+        <div class="rvo-table--responsive py-5">
+          <table class="rvo-table">
+            <thead class="rvo-table-head">
+            <tr class="rvo-table-row">
+              <th scope="col" class="rvo-table-header">Categorie</th>
+              <th
+                scope="col"
+                class="rvo-table-header rvo-table-header"
+              >
+                Resultaat
+              </th>
+            </tr>
+            </thead>
+            <tbody class="rvo-table-body">
+            <tr v-for='(assigned_labels, category) in labels' :key="category" class="rvo-table-row">
+              <td class="rvo-table-cell rvo-text--bold rvo-text--md">{{ category }}</td>
+              <td class="flex rvo-table-cell gap-x-3">
+                <div v-for='(label) in assigned_labels' :key="label"
+                     class="rvo-tag rvo-tag--default" :style="get_background_color(label)">
+                  {{ label }}
+                </div>
+              </td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </details>
+  </div>
   </div>
 </template>