Add categories to sort/filter works/surveys
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
nemunaire 2022-11-20 15:28:27 +01:00
commit 4c76dd9728
17 changed files with 586 additions and 25 deletions

View file

@ -0,0 +1,92 @@
<script>
import { createEventDispatcher } from 'svelte';
import { goto } from '$app/navigation';
import DateTimeInput from './DateTimeInput.svelte';
import { ToastsStore } from '$lib/stores/toasts';
const dispatch = createEventDispatcher();
export let category = null;
function saveCategory() {
category.save().then((response) => {
dispatch('saved', response);
}, (error) => {
ToastsStore.addErrorToast({
msg: error,
});
})
}
function deleteCategory() {
category.delete().then((response) => {
goto(`categories`);
}, (error) => {
ToastsStore.addErrorToast({
msg: error,
});
})
}
function duplicateCategory() {
category.duplicate().then((response) => {
goto(`categories/${response.id}`);
}).catch((error) => {
ToastsStore.addErrorToast({
msg: error,
});
})
}
</script>
<form on:submit|preventDefault={saveCategory}>
{#if category.id}
<div class="row">
<div class="col-sm-3 text-sm-end">
<label for="cid" class="col-form-label col-form-label-sm">Identifiant de la catégorie</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext form-control-sm" id="cid" value={category.id}>
</div>
</div>
{/if}
<div class="row">
<div class="col-sm-3 text-sm-end">
<label for="title" class="col-form-label col-form-label-sm">Titre de la catégorie</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control form-control-sm" id="title" bind:value={category.label}>
</div>
</div>
<div class="row">
<div class="col-sm-3 text-sm-end">
<label for="promo" class="col-form-label col-form-label-sm">Promo</label>
</div>
<div class="col-sm-8 col-md-4 col-lg-2">
<input type="number" step="1" min="0" max="2068" class="form-control form-control-sm" id="promo" bind:value={category.promo}>
</div>
</div>
<div class="row row-cols-3 mx-1 my-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="expand" bind:checked={category.expand}>
<label class="form-check-label" for="expand">
Étendre par défaut
</label>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Enregistrer</button>
{#if category.id}
<button type="button" class="btn btn-danger" on:click={deleteCategory}>Supprimer</button>
{/if}
</div>
</div>
</form>

View file

@ -2,6 +2,7 @@
import { createEventDispatcher } from 'svelte';
import { goto } from '$app/navigation';
import { getCategories } from '$lib/categories';
import { getQuestions } from '$lib/questions';
import DateTimeInput from './DateTimeInput.svelte';
import { ToastsStore } from '$lib/stores/toasts';
@ -67,6 +68,21 @@
</div>
</div>
<div class="row">
<div class="col-sm-3 text-sm-end">
<label for="category" class="col-form-label col-form-label-sm">Catégorie</label>
</div>
<div class="col-sm-8 col-md-4 col-lg-2">
{#await getCategories() then categories}
<select id="category" class="form-select form-select-sm" bind:value={survey.id_category}>
{#each categories as category (category.id)}
<option value={category.id}>{category.label} {category.promo}</option>
{/each}
</select>
{/await}
</div>
</div>
<div class="row">
<div class="col-sm-3 text-sm-end">
<label for="promo" class="col-form-label col-form-label-sm">Promo</label>

View file

@ -5,6 +5,7 @@
import DateFormat from '$lib/components/DateFormat.svelte';
import SurveyBadge from '$lib/components/SurveyBadge.svelte';
import SubmissionStatus from '$lib/components/SubmissionStatus.svelte';
import { getCategories } from '$lib/categories';
import { getSurveys } from '$lib/surveys';
import { getScore } from '$lib/users';
@ -21,6 +22,13 @@
}
});
let categories = {};
getCategories().then((cs) => {
for (const c of cs) {
categories[c.id] = c;
}
});
function gotoSurvey(survey) {
if (survey.kind === "w") {
goto(`works/${survey.id}`);
@ -60,12 +68,30 @@
{#each surveys as survey, sid (survey.kind + survey.id)}
{#if (survey.shown || survey.direct == null || ($user && $user.is_admin)) && (!$user || (!$user.was_admin || $user.promo == survey.promo) || $user.is_admin)}
{#if $user && $user.is_admin && (sid == 0 || surveys[sid-1].promo != survey.promo)}
<tr class="bg-info text-light">
<tr class="bg-warning text-light">
<th colspan="5" class="fw-bold">
{survey.promo}
</th>
</tr>
{/if}
{#if $user && (sid == 0 || surveys[sid-1].id_category != survey.id_category) && categories[survey.id_category]}
<tr class="bg-primary text-light">
<th colspan="5" class="fw-bold" on:click={() => categories[survey.id_category].expand = !categories[survey.id_category].expand}>
{#if categories[survey.id_category].expand}
<i class="bi bi-chevron-down"></i>
{:else}
<i class="bi bi-chevron-right"></i>
{/if}
{categories[survey.id_category].label}
{#if $user && $user.is_admin}
<a href="categories/{survey.id_category}" class="float-end btn btn-sm btn-light" style="margin: -6px;">
<i class="bi bi-pencil" on:click={() => categories[survey.id_category].expand = !categories[survey.id_category].expand}></i>
</a>
{/if}
</th>
</tr>
{/if}
{#if categories[survey.id_category] && categories[survey.id_category].expand}
<tr on:click={e => gotoSurvey(survey)}>
<td>
{#if !survey.shown}<i class="bi bi-eye-slash-fill" title="Ce questionnaire n'est pas affiché aux étudiants"></i>{/if}
@ -127,6 +153,7 @@
{/if}
{/if}
</tr>
{/if}
{/if}
{/each}
</tbody>

View file

@ -2,6 +2,7 @@
import { createEventDispatcher } from 'svelte';
import { goto } from '$app/navigation';
import { getCategories } from '$lib/categories';
import DateTimeInput from './DateTimeInput.svelte';
import { ToastsStore } from '$lib/stores/toasts';
@ -62,6 +63,21 @@
</div>
</div>
<div class="row">
<div class="col-sm-3 text-sm-end">
<label for="category" class="col-form-label col-form-label-sm">Catégorie</label>
</div>
<div class="col-sm-8 col-md-4 col-lg-2">
{#await getCategories() then categories}
<select id="category" class="form-select form-select-sm" bind:value={work.id_category}>
{#each categories as category (category.id)}
<option value={category.id}>{category.label} {category.promo}</option>
{/each}
</select>
{/await}
</div>
</div>
<div class="row">
<div class="col-sm-3 text-sm-end">
<label for="promo" class="col-form-label col-form-label-sm">Promo</label>