ProjetRIOT/components/search.riot

<search>
    <div class="box p-1 m-2">
	    <div class="columns m-1">
            <input onkeydown={filterSearch} onfocusout={filterSearch} class="input" type="input" placeholder={state.placeholder}>
            <button class="button ml-1" disabled={!state.currentStep} 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" onclick={()=>cruiseForward(item.name)}>
                        <span style="font-size: .75em;"><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'

        function cruiseBack() {

        }

        function cruiseForward() {

        }

        function filterSearch() {

        }

        export default {
            onBeforeMount(props, state) {
                //Initial state
                this.state = {
                    placeholder: "Formation",
                    currentStep: 0,
                    allItems: null,
                    filter: null,
                    items: null
                }

                PAPI.fetchFilieres().then((response) => {
                    this.state.allItems = response

                    this.update({
                        items: filterSearch(this.state.allItems)
                    })
                })
            }
        }


        /*const searchURL = `https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&timezone=Europe%2FBerlin`

        async function fetchFiliere(state) {
            if (state.sousfili){
                return PAPI.fetchSpecialites(state.sousfili)
            } else if (state.fili && !state.sousfili){
                return PAPI.fetchFiliere(state.fili)
            } else if (!state.fili && !state.sousfili){
                return PAPI.fetchFilieres()
            }
        }
        

        export default function search(){
            return {
                onBeforeMount(props, state) {
                    // initial state
                    this.state = {
                        placeholder: "Formation",
                        items: null,
                        allitems: null,
                        fili: null,
                        sousfili: null
                    }
                    fetchFiliere(this.state).then((response) => {
			            this.update({
                            items: response,
                            allitems: response
					    })
		            })
                },
                searchF(e){
                    let responseFiltered=[]
			        this.state.allitems.forEach(formation => {
                        if (formation.name.toUpperCase().includes(e.target.value.toUpperCase())) {
                            responseFiltered.push(formation)
                        }
                    });
                    this.update({
                        items: responseFiltered
				    })
                },
                filter(fili){
                    console.log("filter! "+fili)
                    if (this.state.placeholder==="Filière de formation"){
                        this.update({
                            placeholder: "Filière de formation détaillée",
                            sousfili: fili,
                        })
                    } else if (this.state.placeholder="Formation"){
                        this.update({
                            placeholder: "Filière de formation",
                            fili: fili
                        })
                    }
                    fetchFiliere(this.state).then((response) => {
                        this.update({
                            allitems: response,
                            items: response
                        })
                        console.log(this.state.items)
                    })
                },
                back(){
                    console.log("back")
                    if (this.state.placeholder==="Filière de formation"){
                        this.update({
                            placeholder: "Formation",
                            fili: null,
                        })
                    } else if (this.state.placeholder="Filière de formation détaillée"){
                        this.update({
                            placeholder: "Filière de formation",
                            sousfili: null
                        })
                    }
                    fetchFiliere(this.state).then((response) => {
                        this.update({
                            allitems: response,
                            items: response
                        })
                    })
                }
            }
        }*/
    </script>
</search>