Sith/pedagogy/templates/pedagogy/guide.jinja

{% extends "core/base.jinja" %}

{% block title %}
{% trans %}UV Guide{% endtrans %}
{% endblock %}

{% block additional_js %}
    <script src="{{ static('core/js/alpinejs.min.js') }}" defer></script>
{% endblock %}

{% block head %}
    {{ super() }}
    <meta name="viewport" content="width=device-width, initial-scale=0.6, maximum-scale=2">
{% endblock head %}

{% block content %}
{% if can_create_uv %}
<div class="action-bar">
    <p>
        <a href="{{ url('pedagogy:uv_create') }}">{% trans %}Create UV{% endtrans %}</a>
    </p>
    <p>
        <a href="{{ url('pedagogy:moderation') }}">{% trans %}Moderate comments{% endtrans %}</a>
    </p>
</div>
<br/>
{% endif %}
<div class="pedagogy" x-data="uv_search" x-cloak>
	<form id="search_form">
		<div class="search-form-container">
			<div class="search-bar">
				<input
                    id="search_input"
                    class="search-bar-input"
                    type="text"
                    name="search"
                    x-model.debounce.500ms="search"
                />
			</div>
			<div class="radio-department">
				<div class="radio-guide">
					{% for (display_name, real_name) in [
					    ("EDIM", "EDIM"), ("ENERGIE", "EE"), ("IMSI", "IMSI"),
					    ("INFO", "GI"), ("GMC", "MC"), ("HUMA", "HUMA"), ("TC", "TC")
					] %}
						<input
                            type="checkbox"
                            name="department"
                            id="radio{{ real_name }}"
                            value="{{ real_name }}"
                            x-model="department"
                        />
                        <label for="radio{{ real_name }}">{% trans %}{{ display_name }}{% endtrans %}</label>
					{% endfor %}
				</div>
			</div>
			<div class="radio-credit-type">
				<div class="radio-guide">
					{% for credit_type in ["CS", "TM", "EC", "QC", "OM"] %}
						<input
                            type="checkbox"
                            name="credit_type"
                            id="radio{{ credit_type }}"
                            value="{{ credit_type }}"
                            x-model="credit_type"
                        />
                        <label for="radio{{ credit_type }}">{% trans %}{{ credit_type }}{% endtrans %}</label>
					{% endfor %}
				</div>
			</div>

			<div class="radio-semester">
				<div class="radio-guide">
					<input type="checkbox" name="semester" id="radioAUTUMN" value="AUTUMN" x-model="semester"/>
                    <label for="radioAUTUMN"><i class="fa fa-leaf"></i></label>
					<input type="checkbox" name="semester" id="radioSPRING" value="SPRING" x-model="semester"/>
                    <label for="radioSPRING"><i class="fa fa-sun-o"></i></label>
				</div>
			</div>
		</div>
	</form>
	<table id="dynamic_view">
		<thead>
			<tr>
				<td>{% trans %}UV{% endtrans %}</td>
				<td>{% trans %}Title{% endtrans %}</td>
				<td>{% trans %}Department{% endtrans %}</td>
				<td>{% trans %}Credit type{% endtrans %}</td>
				<td><i class="fa fa-leaf"></i></td>
				<td><i class="fa fa-sun-o"></i></td>
				{% if can_create_uv %}
                    <td>{% trans %}Edit{% endtrans %}</td>
                    <td>{% trans %}Delete{% endtrans %}</td>
				{% endif %}
			</tr>
		</thead>
		<tbody id="dynamic_view_content">
            <template x-for="uv in uvs.results" :key="uv.id">
                <tr @click="window.location.href = `/pedagogy/uv/${uv.id}`">
                    <td><a :href="`/pedagogy/uv/${uv.id}`" x-text="uv.code"></a></td>
                    <td x-text="uv.title"></td>
                    <td x-text="uv.department"></td>
                    <td x-text="uv.credit_type"></td>
                    <td><i :class="uv.semester.includes('AUTUMN') && 'fa fa-leaf'"></i></td>
                    <td><i :class="uv.semester.includes('SPRING') && 'fa fa-sun-o'"></i></td>
                    {% if can_create_uv -%}
                        <td><a :href="`/pedagogy/uv/${uv.id}/edit`">{% trans %}Edit{% endtrans %}</a></td>
                        <td><a :href="`/pedagogy/uv/${uv.id}/delete`">{% trans %}Delete{% endtrans %}</a></td>
                    {%- endif -%}
                </tr>
            </template>
		</tbody>
	</table>
    <nav id="pagination" class="hidden" :style="max_page() == 0 && 'display: none;'">
        <button @click="page--" :disabled="page == 1">{% trans %}Previous{% endtrans %}</button>
        <template x-for="i in max_page()">
            <button x-text="i" @click="page = i" :class="i == page && 'active'"></button>
        </template>
        <button @click="page++" :disabled="page == max_page()">{% trans %}Next{% endtrans %}</button>
    </nav>
</div>
<script>
    const initialUrlParams = new URLSearchParams(window.location.search);

    function update_query_string(key, value) {
        const url = new URL(window.location.href);
        if (!value) {
            url.searchParams.delete(key)
        } else if (Array.isArray(value)) {
            url.searchParams.delete(key)
            value.forEach((v) => url.searchParams.append(key, v))
        } else {
            url.searchParams.set(key, value);
        }
        history.pushState(null, document.title, url.toString());
    }

    {#
    How does this work :

    The page contains two main elements : the form and the results.
    The form contains multiple inputs, allowing the user to apply the filter of its choice.
    Each modification of those filters will modify the GET parameters of the URL,
    then fetch the corresponding data from the API.
    This data will then be displayed on the result part of the page.
    #}
    const page_default = 1;
    const page_size_default = 100;
    document.addEventListener("alpine:init", () => {
        Alpine.data("uv_search", () => ({
            uvs: [],
            page: initialUrlParams.get("page") || page_default,
            page_size: initialUrlParams.get("page_size") || page_size_default,
            search: initialUrlParams.get("search") || "",
            department: initialUrlParams.getAll("department"),
            credit_type: initialUrlParams.getAll("credit_type"),
            {# The semester is easier to use on the backend as an enum (spring/autumn/both/none)
            and easier to use on the frontend as an array ([spring, autumn]).
            Thus there is some conversion involved when both communicate together #}
            semester: initialUrlParams.has("semester") ?
                initialUrlParams.get("semester").split("_AND_") : [],

            async init() {
                let search_params = ["search", "department", "credit_type", "semester"];
                let pagination_params = ["semester", "page"];
                search_params.forEach((param) => {
                    this.$watch(param, async () => {
                        {# Reset pagination on search #}
                        this.page = page_default;
                        this.page_size = page_size_default;
                    });
                });
                search_params.concat(pagination_params).forEach((param) => {
                    this.$watch(param, async (value) => {
                        update_query_string(param, value);
                        await this.fetch_data();  {# reload data on form change #}
                    });
                });
                await this.fetch_data();  {# load initial data #}
            },

            async fetch_data() {
                const url = "{{ url("api:fetch_uvs") }}" + window.location.search;
                this.uvs = await (await fetch(url)).json();
            },

            max_page() {
                return Math.round(this.uvs.count / this.page_size);
            }
        }))
    })
</script>
{% endblock content %}