MarietjeDjango/marietje/songs/templates/songs/manage.html

{% extends 'marietje/base.html' %}
{% load static %}

{% block title %}Manage{% endblock %}

{% block content %}
    <div class="container-lg">
        <div class="table-responsive mt-5">
            <table id="request-table" class="table table-striped">
                <thead>
                    <tr>
                        <th>Artist</th>
                        <th>Title</th>
                    </tr>
                    <tr>
                        <th colspan="2"><input id="search-all" class="search-input" type="text" v-model="search_input"/></th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th colspan="2" class="ts-pager form-horizontal">
                            <button v-if="page_number === 1" type="button" class="btn first disabled"><i class="fa-solid fa-backward-fast"></i></button>
                            <button v-else v-on:click="update_page(1);" type="button" class="btn first"><i class="fa-solid fa-backward-fast"></i></button>

                            <button v-if="page_number === 1" type="button" class="btn prev disabled"><i class="fa-solid fa-backward"></i></button>
                            <button v-else v-on:click="update_page(page_number - 1);" type="button" class="btn prev"><i class="fa-solid fa-backward"></i></button>

                            <button v-if="page_number === number_of_pages" type="button" class="btn next disabled"><i class="fa-solid fa-forward"></i></button>
                            <button v-else v-on:click="update_page(page_number + 1);" type="button" class="btn next"><i class="fa-solid fa-forward"></i></button>

                            <button v-if="page_number === number_of_pages" type="button" class="btn last disabled"><i class="fa-solid fa-forward-fast"></i></button>
                            <button v-else v-on:click="update_page(number_of_pages);" type="button" class="btn last"><i class="fa-solid fa-forward-fast"></i></button>

                            <select class="pagesize input-mini" title="Select page size" v-model="page_size">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                                <option value="500">500</option>
                                <option value="1000">1000</option>
                            </select>
                            <select class="pagenum input-mini" title="Select page number" v-model="page_number">
                                <template v-for="(i, index) in number_of_pages">
                                    <option :value="i">${ i }$</option>
                                </template>
                            </select>
                        </th>
                        <th colspan="2"></th>
                    </tr>
                </tfoot>
                <tbody>
                    <template v-for="(song, index) in songs">
                        <tr>
                            <td>
                                ${ song.artist }$
                            </td>
                            <td>
                                <a :href="'/songs/edit/' + song.id + '/'" v-on:click="request_song(song.id);">${ song.title }$</a>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>
    <script>
        let manage_vue = createApp({
            delimiters: ['${', '}$'],
            data() {
                return {
                    songs: [],
                    total_songs: 0,
                    search_input: "",
                    typing_timer: null,
                    page_size: 10,
                    page_number: 1,
                    user_data: null,
                }
            },
            watch: {
                search_input: {
                    handler(val, oldVal) {
                        clearTimeout(this.typing_timer);
                        if (this.search !== "") {
                            this.typing_timer = setTimeout(this.search, 200);
                        }
                    }
                },
                page_number: {
                    handler(val, oldVal) {
                        if (this.page_number <= 0) {
                            this.page_number = 1;
                        }
                        if (this.page_number > this.number_of_pages) {
                            this.page_number = this.number_of_pages;
                        }
                        this.refresh();
                    }
                },
                page_size: {
                    handler(val, oldVal) {
                        if (this.page_size <= 0) {
                            this.page_size = 10;
                        }
                        this.page_number = 1;
                        setCookie("MANAGE_PAGE_SIZE", this.page_size, 14);
                        this.refresh();
                    }
                }
            },
            computed: {
                number_of_pages: function() {
                    return Math.ceil(this.total_songs / this.page_size);
                }
            },
            created() {
                fetch('/api/v1/users/me/').then(response => {
                    if (response.status === 200) {
                        return response.json();
                    } else {
                        throw response;
                    }
                }).then(data => {
                    this.user_data = data;
                }).then(() => {
                    this.refresh();
                }).catch(() => {
                    tata.error('', 'User details failed to fetch, please reload this page to try again.');
                });
                const stored_page_size = parseInt(getCookie("MANAGE_PAGE_SIZE"));
                if (stored_page_size !== Number.NaN && stored_page_size > 0) {
                    this.page_size = stored_page_size;
                }
            },
            methods: {
                search() {
                    this.page_number = 1;
                    this.refresh();
                },
                refresh() {
                    fetch(
                        `/api/v1/songs/?ordering=artist,title&user__username=${this.user_data.username}&limit=${this.page_size}&offset=${this.page_size * (this.page_number - 1)}&search=${this.search_input}`,
                        {
                            headers: {
                                "X-CSRFToken": CSRF_TOKEN,
                            }
                        }
                    ).then(response => {
                        if (response.status === 200) {
                            return response.json();
                        } else {
                            throw response;
                        }
                    }).then(data => {
                        this.songs = data.results;
                        this.total_songs = data.count;
                    }).catch((e) => {
                        if (e instanceof Response) {
                            e.json().then(data => {
                                tata.error("", data.errorMessage);
                            });
                        } else {
                            tata.error("", "An unknown error occurred, please try again.")
                        }
                    });
                },
                update_page(page_number) {
                    this.page_number = page_number;
                }
            }
        }).mount('#request-table');
    </script>
{% endblock %}