script.js

(function ($, STUDIP) {
    'use strict';

    var searchTimeout = null;
    var lastRequestController = null;

    $(document).ready(function () {
        if (document.getElementById('trac-migrate') !== null) {
            let source = null;
            STUDIP.loadChunk('vue').then(function ({createApp}) {
                createApp({
                    data: function () {
                        return {
                            needle: '',
                            results: false,
                            selectedTicket: false,
                        };
                    },
                    mounted () {
                        source = this.$el.dataset.source;
                    },
                    methods: {
                        searchTickets (event) {
                            const needle = this.needle.trim();
                            if (needle.trim().length < 3) {
                                return;
                            }

                            if (lastRequestController) {
                                lastRequestController.abort();
                            }

                            lastRequestController = new AbortController();
                            const { signal } = lastRequestController;

                            clearTimeout(searchTimeout);
                            searchTimeout = setTimeout(function () {
                                const url = STUDIP.URLHelper.getURL(source, {term: needle});
                                fetch(url, { signal }).then(response => this.results = response.json());
                            }.bind(this), 300);
                        }
                    },
                    computed: {
                        orderedResults () {
                            const needle = this.needle.trim();
                            return Object.values(this.results).sort(function (a, b) {
                                if (a[0] === needle) {
                                    return 1;
                                }
                                if (b[0] === needle) {
                                    return -1;
                                }
                                return b[0] - a[0];
                            });
                        }
                    }
                }).$mount('#trac-migrate');
            });
        } else if (document.getElementById('dashboard') !== null) {
            const dashboard = document.getElementById('dashboard');
            const issues = JSON.parse(dashboard.dataset.issues);
            const qmLabels = JSON.parse(dashboard.dataset.qmLabels);
            const filters = JSON.parse(dashboard.dataset.filters) || {};
            const filterStoreUrl = dashboard.dataset.filterStoreUrl;

            Object.values(qmLabels).forEach(abbr => {
                if (filters[abbr] === undefined) {
                    filters[abbr] = null;
                }
            });

            STUDIP.loadChunk('vue').then(({createApp}) => {
                createApp({
                    data () {
                        return {
                            issues,
                            qmLabels,
                            filters
                        };
                    },
                    methods: {
                        getStateForIssueAndQmLabel(issue, qm) {
                            return issue.qm_states[qm];
                        }
                    },
                    computed: {
                        colspan() {
                            return 8 + Object.values(qmLabels).length;
                        },
                        filteredIssues() {
                            return this.issues.filter(issue => {
                                for (const [key, value] of Object.entries(this.filters)) {
                                    if (value === null) {
                                        continue;
                                    }
                                    if (issue.qm_states[key] !== value) {
                                        return false;
                                    }
                                }
                                return true;
                            });
                        }
                    },
                    watch: {
                        filters: {
                            handler(current) {
                                const data = new URLSearchParams();

                                for (const [label, value] of Object.entries(current)) {
                                    if (value !== null) {
                                        data.append(`filters[${label}]`, value);
                                    }
                                }

                                fetch(filterStoreUrl, {
                                    method: 'POST',
                                    body: data
                                });
                            },
                            deep: true
                        }
                    }
                }).$mount('#dashboard');
            });
        }
    });
}(jQuery, STUDIP));