https://www.lachapelledumontduchat.fr/assets/controllers/signaleme…troller-65d5ce28f4cb841f2f1cd6a78481bd4d.js

1import {Controller} from '@hotwired/stimulus';
2
3import $ from 'jquery';
4import 'tableexport.jquery.plugin/tableExport.min.js'
5import 'tableexport.jquery.plugin/libs/jsPDF/jspdf.umd.min.js'
6import 'tableexport.jquery.plugin/libs/FileSaver/FileSaver.min.js';
7import 'bootstrap-table';
8import 'bootstrap-table/dist/locale/bootstrap-table-fr-FR.min.js';
9import 'bootstrap-table/dist/extensions/export/bootstrap-table-export.js'
10import 'bootstrap-table/dist/extensions/filter-control/bootstrap-table-filter-control.js';
11import { trans } from 'translator';
12
13export default class extends Controller {
14    legacySelector = '#signalements'
15
16    static values = {
17        stationSlug: String,
18        archive: Boolean
19    }
20
21    connect() {
22        $(this.legacySelector).bootstrapTable({
23            searchSelector: '#customSearch',
24            customSearch: this.customSearch,
25            buttons: this.buttonsFunction.bind(this),
26        });
27
28        // Ajouter un écouteur d'événement pour détecter les changements de sélection
29        $(document).on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', this.legacySelector, () => {
30            this.updateExportButtonState();
31        });
32    }
33
34    disconnect() {
35        $(this.legacySelector).bootstrapTable('destroy');
36    }
37
38    updateExportButtonState() {
39        const exportButton = this.element.querySelector('.export.btn-group button');
40        if (!exportButton) return;
41
42        const selections = $(this.legacySelector).bootstrapTable('getSelections');
43        exportButton.disabled = selections.length === 0;
44    }
45
46    customSearch(data, text) {
47        return data.filter(function (row) {
48            let cleanCommentaire = row.commentaire.replace(/<\/?[^>]+(>|$)/g, "").toLowerCase().trim();
49            let cleanReference = row.reference.replace(/<\/?[^>]+(>|$)/g, "").toLowerCase().trim();
50            let cleanAdresse = row.adresse.replace(/<\/?[^>]+(>|$)/g, "").toLowerCase().trim();
51            let cleanText = text.toLowerCase();
52
53            return cleanCommentaire.indexOf(cleanText) > -1 ||
54                cleanReference.indexOf(cleanText) > -1 ||
55                cleanAdresse.indexOf(cleanText) > -1;
56        });
57    }
58
59    buttonsFunction() {
60        return {
61            afficherCoche: {
62                html: `<button class='btn' type='button' name='afficherCoche' title='${trans('select')}'>
63                          <i class='glyphicon fa fa-check-square text-muted'></i>${trans('select')}
64                       </button>`,
65                event: () => {
66                    this.hideOrDisplayCheckboxes();
67                },
68            },
69            deleteButton: {
70                render: false,
71                html: `<button class='btn btn-danger' type='button' name='deleteButton' title='Supprimer les éléments sélectionnés'>
72                          <i class='glyphicon fa fa-trash'></i>${trans('supprimer')}
73                       </button>`,
74                event: () => {
75                    this.deleteOrAchiveSignalements('delete');
76                },
77            },
78            archiveButton: {
79                render: false,
80                html: `<button class='btn btn-warning' type='button' name='archiveButton' title='Archiver les éléments sélectionnés'>
81                          <i class='glyphicon fa fa-archive'></i>${trans('archiver')}
82                       </button>`,
83                event: () => {
84                    this.deleteOrAchiveSignalements('archive');
85                },
86            }
87        };
88    }
89
90    deleteOrAchiveSignalements(method) {
91        let selections = $(this.legacySelector).bootstrapTable('getSelections');
92        let ids = selections.map(function (row) {
93            return row.id;
94        });
95
96        const route = method === "delete" ? 'moncompte_signalement_ajax_delete' : 'moncompte_signalement_ajax_archive';
97        const url = Routing.generate(route, {'station_slug': this.stationSlugValue});
98
99        fetch(url, {
100            method: 'POST',
101            body: JSON.stringify(ids)
102        })
103            .then(response => {
104                if (response.ok) {
105                    Swal.fire({
106                        title: ids.length + ` ${ids.length > 1 ? 'Signalements' : 'Signalement'}` + ` ${method === 'delete' ? 'supprimé' : 'archivé'}` + `${ids.length > 1 ? 's' : ''}`,
107                        icon: 'success',
108                        confirmButtonColor: '#9FBA00',
109                    });
110                    $(this.legacySelector).bootstrapTable('remove', {
111                        field: 'id',
112                        values: ids
113                    });
114                    this.applyCheckboxesCss();
115                    this.updateExportButtonState();
116                } else {
117                    throw new Error((response.status).toString() + ' ' + response.statusText);
118                }
119            })
120            .catch(error => {
121                Swal.fire({
122                    title: 'Erreur',
123                    text: error.message,
124                    icon: 'error',
125                    confirmButtonColor: '#9FBA00',
126                });
127            });
128    }
129
130    hideOrDisplayCheckboxes() {
131        const boolNewStatusShowSelection = !(document.getElementById('signalements').dataset.showSelection === "true");
132        document.getElementById('signalements').dataset.showSelection = boolNewStatusShowSelection.toString();
133
134        var $signalements = $(this.legacySelector);
135        $signalements.bootstrapTable('refreshOptions', {
136            showDeleteButton: boolNewStatusShowSelection,
137            clickToSelect: boolNewStatusShowSelection,
138            showArchiveButton: !this.archiveValue && boolNewStatusShowSelection
139        });
140        $signalements.bootstrapTable('uncheckAll');
141
142        if (boolNewStatusShowSelection) {

143            document.querySelector('[name=afficherCoche] i').classList.replace("fa-check-square", "fa-square");
144            $signalements.bootstrapTable('showColumn', 'state');
145            this.applyCheckboxesCss();
146        } else {
147            document.querySelector('[name=afficherCoche] i').classList.replace("fa-square", "fa-check-square");
148            $signalements.bootstrapTable('hideColumn', 'state');
149        }
150        this.updateExportButtonState();
151    }
152
153    applyCheckboxesCss() {
154        document.querySelectorAll('.bs-checkbox input').forEach(input =>
155            input.classList.add('form-check-input'));
156    }
157}