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,25 +21,31 @@
  }
 </script>
 
-<Container class="mt-2 mb-5">
+{#if $auth && $auth.is_manager}
-    <Alert color="dark" fade={false}>
+    <Container fluid class="d-flex flex-fill">
-        <h4>Utilisation de la plate-forme de QA</h4>
+        <TableOverview />
-        <p>
+    </Container>
-            Vous trouverez ci-dessous une liste d'étapes à tester.
+{:else}
-            Répartissez-vous le travail.
+    <Container class="mt-2 mb-5">
-            Dès que vous rencontrez une erreur ou quelque chose qui ne vous semble pas clair, remontez-le en ajoutant un commentaire à l'étape.<br>
+        <Alert color="dark" fade={false}>
-            Lorsque vous avez terminé une étape, notez-le en ajoutant un commentaire indiquant comment vous avez trouvé l'étape.
+            <h4>Utilisation de la plate-forme de QA</h4>
-        </p>
+            <p>
-        <p class="mb-0">
+                Vous trouverez ci-dessous une liste d'étapes à tester.
-            En parallèle, vous recevrez des commentaires des autres groupes. Suivez leurs requêtes et répondez à leurs attentes autant que possible.
+                Répartissez-vous le travail.
-        </p>
+                Dès que vous rencontrez une erreur ou quelque chose qui ne vous semble pas clair, remontez-le en ajoutant un commentaire à l'étape.<br>
-    </Alert>
+                Lorsque vous avez terminé une étape, notez-le en ajoutant un commentaire indiquant comment vous avez trouvé l'étape.
-    <Row>
+            </p>
-        <Col>
+            <p class="mb-0">
-        <MyTodo />
+                En parallèle, vous recevrez des commentaires des autres groupes. Suivez leurs requêtes et répondez à leurs attentes autant que possible.
-        </Col>
+            </p>
-        <Col>
+        </Alert>
-        <MyExercices />
+        <Row>
-        </Col>
+            <Col>
-    </Row>
+            <MyTodo />
-</Container>
+            </Col>
+            <Col>
+            <MyExercices />
+            </Col>
+        </Row>
+    </Container>
+{/if}