New view to aggregate survey responses

ui/src/routes/surveys/[sid]/responses/index.svelte

@@ -1,4 +1,5 @@
 <script context="module">
+ import CorrectionPieChart from '$lib/components/CorrectionPieChart.svelte';
  import { getSurvey } from '$lib/surveys';
  import { getUsers } from '$lib/users';
 
@@ -27,6 +28,7 @@
      usersP = getUsers(s.promo, s.group);
  })
  let edit = false;
+ let exportview = false;
 </script>
 
 {#await surveyP then survey}
@@ -37,12 +39,19 @@
             class="ms-1 float-end"
             on:update={() => goto(`surveys/${survey.id}/admin`)}
         />
+        <button
+            class="btn ms-1 float-end"
+            class:btn-dark={exportview}
+            class:btn-outline-dark={!exportview}
+            title="Éditer"
+            on:click={() => { exportview = !exportview; } }
+        ><i class="bi bi-activity"></i></button>
     {/if}
     <div class="d-flex align-items-center">
         <h2>
             <a href="surveys/{survey.id}" class="text-muted" style="text-decoration: none">&lt;</a>
             {survey.title}
-            <small class="text-muted">Corrections</small>
+            <small class="text-muted">{#if exportview}Réponses{:else}Corrections{/if}</small>
         </h2>
         <SurveyBadge class="ms-2" {survey} />
     </div>
@@ -57,6 +66,7 @@
             <span>Chargement des questions &hellip;</span>
         </div>
     {:then questions}
+        {#if !exportview}
             <div class="card mt-3 mb-5">
                 <table class="table table-hover table-striped mb-0">
                     <thead>
@@ -101,5 +111,26 @@
                     </tbody>
                 </table>
             </div>
+        {:else}
+            {#each questions as question (question.id)}
+                <h3>{question.title}</h3>
+                {#if question.kind == "text"}
+                    {#await question.getResponses() then responses}
+                        {#each responses as response (response.id)}
+                            <div class="card mb-2">
+                                <div class="card-body">
+                                    <p class="card-text" style:white-space="pre-line">
+                                        {response.value}
+                                    </p>
+                                </div>
+                            </div>
+                        {/each}
+                    {/await}
+                {:else}
+                    <CorrectionPieChart {question} />
+                {/if}
+                <hr class="mb-3">
+            {/each}
+        {/if}
     {/await}
 {/await}