Skip to content

Commit

Permalink
Not show accordion if no results
Browse files Browse the repository at this point in the history
  • Loading branch information
@ravimeijerrig
ravimeijerrig committed Dec 2, 2024
1 parent 118334b commit cf02e97
Showing 1 changed file with 91 additions and 100 deletions.
191 changes: 91 additions & 100 deletions frontend/src/components/SubResult.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,112 +58,103 @@ const filteredLabels = computed<FilteredLabels>(() => {
return filtered
})
const hasLabels = computed(() => {
return Object.keys(filteredLabels.value).length > 0
})
</script>

<template>
<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 AI Verordening 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 filteredLabels' :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="hasLabels">
<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 AI Verordening 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 filteredLabels" :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>
</details>
</div>
</div>
<div v-else>
<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>
<span class="rvo-accordion-teaser">Bekijk hier het AI Verordening profiel dat voor jou van toepassing is</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 filteredLabels' :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-else>
<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>
<span class="rvo-accordion-teaser">Bekijk hier het AI Verordening profiel dat voor jou van toepassing is</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 filteredLabels" :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>
</details>
</div>
</div>
</div>
</template>

0 comments on commit cf02e97

Please sign in to comment.