ProjetRIOT/components/school.riot

<school>
    <div if={props.shouldShowInfos} class="box p-2 m-2" disabled="true">
        <div id="map" width="100%" style="border-radius: 5px"></div>
        <div class="mt-2 mb-2 control has-icons-left is-inline-block is-pulled-right">
            <input class="input" onkeyup={filterSearch} type="search" placeholder="Établissement">
            <span class="icon is-small is-left">
                <i class="fas fa-search"></i>
            </span>
        </div>
		<table class="table is-fullwidth is-hoverable is-narrow">
			<thead>
				<tr>
					<th each={sortField in sortFields}>
                        {sortField.name}
                        <a id={sortField.id} onclick={() => sortList(sortField.id, true)}>
                            <span class="icon"><i class="fas fa-sort"></i></span>
                        </a>
                    </th>
				</tr>
			</thead>
            <tbody>
                <tr each={school in state.filteredSchoolList}>
                    <td><a onclick={() => props.popup(school)}>{school.fields.g_ea_lib_vx}</a></td>
                    <td>{school.fields.ville_etab}</td>
                    <td>{school.fields.dep}</td>
                    <td>{school.fields.moyenne}</td>
                    <td><title-progress value={school.fields.taux_acces_ens} max="100" style="margin: auto"></title-progress></td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>

        const SORT_TABLE = [
            {name: "Nom", id: "g_ea_lib_vx"},
            {name: "Ville", id: "ville_etab"},
            {name: "Dept.", id: "dep"},
            {name: "Moyenne", id: "moyenne"},
            {name: "Sélectivité", id: "taux_acces_ens"}
        ]

        export default {
            filterSearch() {
                let input = this.$("input")
                if (!input) return

                let finalArray = []
                
                //On évite de trier avant d'avoir plus de 1 lettres.
                if (input.value.length > 1) { 
                    finalArray = this.state.schoolList.filter((item) => {
                        return item.fields.g_ea_lib_vx.toLowerCase().includes(input.value.toLowerCase())
                    })
                } else {
                    finalArray = this.state.schoolList
                }

                this.update({
                    filteredSchoolList: finalArray
                })
            },

            sortList(sortBy, shouldUpdate) {
                //Si la liste est déjà triée par la bonne catégorie, on l'inverse
                if (sortBy == this.state.sortBy) {
                    this.state.filteredSchoolList.reverse()
                }
                
                //Sinon on l'ordonne par la nouvelle catégorie (ascendant par défaut)
                else { 
                    this.state.sortBy = sortBy

                    switch (sortBy) {
                        case SORT_TABLE[3].id:
                        case SORT_TABLE[4].id: {
                            this.state.filteredSchoolList.sort((a, b) => {
                                if (a.fields[sortBy] > b.fields[sortBy]) return 1
                                else return -1
                            })
                            break
                        }

                        default: {
                            this.state.filteredSchoolList.sort((a, b) => {
                                return (a.fields[sortBy]).localeCompare(b.fields[sortBy])
                            })
                            break
                        }
                    }
                }

                this.update()
            },

            onBeforeUpdate(props, state) {
                if (props.schoolListUpdating) {
                    state.schoolList = [...props.schoolList]
                    state.filteredSchoolList = [...state.schoolList]
                    if (this.$("input")) this.$("input").value = ""
                }
            },

            onUpdated(props, state) {
                if (!state.map && props.shouldShowInfos) {

                    state.map = L.map("map").setView([47, 2.5], 5)
                    state.markers = L.markerClusterGroup()
                    
                    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        maxZoom: 19,
                        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                    }).addTo(state.map);
                } else (state.map) {
                    state.markers.clearLayers()
                    for (let school of state.filteredSchoolList) {
                        let fields = school.fields
                        let pos = fields.g_olocalisation_des_formations

                        let popupHTML = document.createElement("div")
                        
                        let title = document.createElement("span")
                        title.textContent = fields.g_ea_lib_vx
                        title.class = "is-primary"                  

                        let linkToForma = document.createElement("a")
                        linkToForma.onclick = () => props.popup(school)
                        linkToForma.textContent = "Voir les infos de l'établissement"
                        
                        popupHTML.appendChild(title)
                        popupHTML.appendChild(document.createElement("br"))
                        popupHTML.appendChild(linkToForma)

                        let marker = L.marker(pos)
                        marker.bindPopup(popupHTML)
                        state.markers.addLayer(marker)
                    }
                    state.map.addLayer(state.markers)
                }
            },

            onBeforeMount(props, state) {
                this.state = {
                    sortBy: null,
                    schoolList: [],
                    filteredSchoolList: []
                }
            },

            sortFields: SORT_TABLE
        }
    </script>
</school>