qa: New overview screen for managers

qa/ui/src/lib/components/TableOverview.svelte

@@ -0,0 +1,73 @@
+<script>
+ import { goto } from '$app/navigation';
+
+ import {
+     Badge,
+     Card,
+     CardBody,
+     Col,
+     Row,
+ } from 'sveltestrap';
+
+ let themesP = fetch('api/qa/export.json').then((res) => res.json())
+
+ function state2Color(state) {
+     if (state === "timer") {
+         return "info";
+     } else if (state === "ok") {
+         return "success";
+     } else if (state.startsWith("issue")) {
+         return "danger";
+     } else {
+         return "warning";
+     }
+ }
+</script>
+
+<div
+    class="d-flex flex-fill"
+    style="overflow-y: auto"
+>
+    {#await themesP then themes}
+    <Row
+        style={'min-width:'+15*Object.keys(themes).length + 'vw'}
+    >
+        {#each Object.keys(themes) as tname}
+            <Col style="border-right: 1px solid lightgray">
+            <h3
+                class="text-center py-3 mb-3"
+                style="border-bottom: 2px solid black"
+            >
+                {tname}
+            </h3>
+            {#if themes[tname].exercices}
+                {#each themes[tname].exercices as exercice}
+                    {#if exercice.reports}
+                        {#each exercice.reports as report}
+                            <Card
+                                class="mb-3"
+                                color={state2Color(report.report.state)}
+                                style="cursor: pointer"
+                                on:click={() => goto(`exercices/${exercice.exercice.id}/${report.report.id}`)}
+                            >
+                                <CardBody class="p-2">
+                                    {report.report.subject}
+                                    {#if report.comments}
+                                        <Badge
+                                            class="float-end"
+                                        >
+                                            {report.comments.length}
+                                        </Badge>
+                                    {/if}
+                                </CardBody>
+                            </Card>
+                        {/each}
+                        <hr />
+                    {/if}
+                {/each}
+            {/if}
+            </Col>
+        {/each}
+    </Row>
+    {/await}
+</div>

qa/ui/src/routes/+page.svelte

@@ -8,6 +8,8 @@
 
  import MyExercices from '$lib/components/MyExercices.svelte';
  import MyTodo from '$lib/components/MyTodo.svelte';
+ import TableOverview from '$lib/components/TableOverview.svelte';
+ import { auth } from '$lib/stores/auth';
  import { exercices } from '$lib/stores/exercices';
  import { themes } from '$lib/stores/themes';
 
@@ -19,6 +21,11 @@
  }
 </script>
 
+{#if $auth && $auth.is_manager}
+    <Container fluid class="d-flex flex-fill">
+        <TableOverview />
+    </Container>
+{:else}
     <Container class="mt-2 mb-5">
         <Alert color="dark" fade={false}>
             <h4>Utilisation de la plate-forme de QA</h4>
@@ -41,3 +48,4 @@
             </Col>
         </Row>
     </Container>
+{/if}