ProjetRIOT/components/search.riot

<search>
    <div class="box p-1 m-2">
	    <div class="columns m-1">
            <input onkeyup={filterSearch} class="input" type="input" placeholder={state.placeholder}>
            <button class="button ml-1" disabled={!state.currentStep || state.updating} onclick={cruiseBack}>&lt;</button>
        </div>
		<div id="list-formations">
            <ul>
	            <li class="m-1" each={item in this.state.items}>
		            <button class="button is-fullwidth p-2" disabled={state.updating} onclick={()=>cruiseForward(item.name)}>
                        <span style="font-size: .75em; max-size: 90%"><strong>{item.name}</strong></span>
                        <div  style="margin-left: auto;"></div>
                        <span class="tag is-primary">{item.count}</span>
                    </button>
	            </li>
            </ul>
		</div>
    </div>
    <script>
        import PAPI from '../javascript/parcoursup-link.js'

        const PLACEHOLDERS = [
            "Formation",
            "Filière",
            "Spécialité"
        ]

        export default {

            updateList() {
                let promise

                switch (this.state.currentStep) {
                    case 0:
                        promise = PAPI.fetchFilieres()
                        break
                    case 1:
                        promise = PAPI.fetchFiliere(this.state.course.fili)
                        break
                    case 2:
                        promise = PAPI.fetchSpecialites(this.state.course.sousfili)
                        break

                    default:
                        return
                }

                this.update({
                    updating: true
                })

                promise.then((response) => {
                    this.state.allItems = response
                    this.filterSearch()
                    this.update({
                        updating: false
                    })
                }, () => {
                    if (!this.state.currentStep) {
                        this.cruiseBack()
                    }

                    this.update({
                        updating: false
                    })
                })
            },

            clearSearch() {
                this.$("input").value = ""
            },

            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.allItems.filter((item) => {
                        return item.name.toLowerCase().includes(input.value.toLowerCase())
                    })
                } else {
                    finalArray = this.state.allItems
                }
                
                this.update({
                    items: finalArray
                })
            },

            cruiseForward(selection) {
                switch (this.state.currentStep) {
                    case 0:
                        this.state.course.fili = selection
                        break

                    case 1:
                        this.state.course.sousfili = selection
                        break

                    case 2:
                        this.state.course.soussousfili = selection
                        this.props.updateCourse(this.state.course)
                        return

                    default:
                        return
                }
                this.state.currentStep++

                this.updateList()
                this.clearSearch()
                this.update({
                    placeholder: PLACEHOLDERS[this.state.currentStep]
                })
            },

            cruiseBack() {
                if (!this.state.currentStep) return
                this.state.currentStep--

                this.updateList()
                this.clearSearch()
                this.update({
                    placeholder: PLACEHOLDERS[this.state.currentStep]
                })
            },

            onBeforeMount(props, state) {
                //Initial state
                this.state = {
                    placeholder: PLACEHOLDERS[0],
                    currentStep: 0,
                    allItems: null,
                    items: null,
                    course: {},
                    updating: false,
                }
            },

            onMounted(props, state) {
                this.updateList()
            }
        }
    </script>
</search>