qa: Improve manager dashboard

This commit is contained in:
nemunaire 2025-01-13 19:23:59 +01:00
parent 28b4e7e529
commit 092d2256f7

View File

@ -11,66 +11,81 @@
let themesP = fetch('api/qa/export.json').then((res) => res.json()) let themesP = fetch('api/qa/export.json').then((res) => res.json())
function state2Color(state) { function state2Color(report) {
const subtle = report.closed ? "-subtle" : "";
const state = report.state;
if (state === "timer") { if (state === "timer") {
return "info"; return "info" + subtle;
} else if (state === "ok") { } else if (state === "ok") {
return "success"; return "success" + subtle;
} else if (state.startsWith("issue")) { } else if (state.startsWith("issue")) {
return "danger"; return "danger" + subtle;
} else { } else {
return "warning"; return "warning" + subtle;
} }
} }
</script> </script>
<div <div
class="d-flex flex-fill" class="d-flex flex-column flex-fill"
style="overflow-y: auto" style="overflow-y: auto"
> >
{#await themesP then themes} {#await themesP then themes}
{#if Object.keys(themes).length > 1} {#if Object.keys(themes).length > 1}
<Row
style={'min-width:'+15*Object.keys(themes).length + 'vw'}
>
{#each Object.keys(themes) as tname} {#each Object.keys(themes) as tname}
<Col style="border-right: 1px solid lightgray"> <div
<h3 class="d-flex gap-2 mb-2 align-items-start py-1"
class="text-center py-3 mb-3" style="border-bottom: 1px solid lightgray; min-height: 4rem"
style="border-bottom: 2px solid black"
> >
{tname} <h4
</h3> class="d-flex align-items-center pe-2 mb-0 h-100 text-truncate"
{#if themes[tname].exercices} style="border-right: 2px solid black; max-width: 150px"
{#each themes[tname].exercices as exercice} title={tname}
{#if exercice.reports} on:click={() => goto("/themes/" + themes[tname].theme.id)}
{#each exercice.reports as report} >
<Card {tname}
class="mb-3" </h4>
color={state2Color(report.report.state)} {#if themes[tname].exercices}
style="cursor: pointer" <div
on:click={() => goto(`exercices/${exercice.exercice.id}/${report.report.id}`)} class="flex-fill d-flex flex-column gap-1"
>
{#each themes[tname].exercices as exercice, eid}
{#if exercice.reports}
<div
class="flex-fill d-flex gap-2 align-items-center"
> >
<CardBody class="p-2"> <span
{report.report.subject} title={exercice.exercice.title}
{#if report.comments} on:click={() => goto("/themes/" + themes[tname].theme.id + "/" + exercice.exercice.id)}
<Badge >
class="float-end" {eid+1}.
> </span>
{report.comments.length} {#each exercice.reports as report}
</Badge> <Card
{/if} color={state2Color(report.report)}
</CardBody> style="cursor: pointer; min-width: 100px; max-width: 250px"
</Card> on:click={() => goto(`exercices/${exercice.exercice.id}/${report.report.id}`)}
{/each} >
<hr /> <CardBody class="p-2 text-truncate" title={report.report.subject}>
{/if} {#if report.comments}
{/each} <Badge
{/if} class="float-end"
</Col> >
{report.comments.length}
</Badge>
{/if}
{report.report.subject}
</CardBody>
</Card>
{/each}
</div>
{/if}
{/each}
</div>
{/if}
</div>
{/each} {/each}
</Row> {:else}
{:else}
{#each Object.keys(themes) as tname} {#each Object.keys(themes) as tname}
{#if themes[tname].exercices} {#if themes[tname].exercices}
{#each themes[tname].exercices as exercice} {#each themes[tname].exercices as exercice}
@ -112,6 +127,6 @@
{/each} {/each}
{/if} {/if}
{/each} {/each}
{/if} {/if}
{/await} {/await}
</div> </div>