S4WEB/riot/choixformation.riot

<choixformation>
<suiviformation formation={state.filiere} type={state.type} detail={state.detail} resetToDetail={resetToDetail} resetToFili={resetToFili} resetToType={resetToType}></suiviformation>

    <search-list start="start" label="Formation">
      <div class="control has-icons-left">
        <input class="input" type="search" placeholder="Formation" id="input" oninput={search} if={!state.filiere}>
        <input class="input" type="search" placeholder="Formation" id="input" oninput={search} if={state.filiere && !state.type}>
        <input class="input" type="search" placeholder="Formation" id="input" oninput={search} if={state.filiere && state.type}>
        <span class="icon is-small is-left"><i class="fas fa-search"></i></span>
      </div>
      <my-list start="start" label="Formation">
        <div class="box m-3 scrollable">
          <div class="columns is-mobile is-vcentered">
            <div class="column p-1">
              <p class="menu-label is-unselectable" if={!state.filiere}>Filière</p>
              <p class="menu-label is-unselectable" if={state.filiere && !state.type}>Type de filière</p>
              <p class="menu-label is-unselectable" if={state.filiere && state.type}>choix de la formation</p>
            </div>
            <div class="column p-1"></div>
          </div>
          <ul class="menu-list">
          
            <!--
              liste des filières:
            -->
          <div if={!state.filiere}>
            <li class="columns is-vcentered" each={item in state.find}>
         
            <a if={item.name.includes(state.recherche)} class="column is-unselectable " style="transform: translateX(0px); opacity: 1;" onclick={changeFiliere} id={item.name}>
                {item.name}
                <span class="tag has-background-primary is-pulled-right has-text-white">
                {item.count}
                </span>
            </a>
            </li>
          </div>

          <!--
              liste des type filières:
              -->
          <div if={state.filiere && !state.type}>
            <li class="columns is-vcentered" each={tipe in state.find}>
            <a if={tipe.name.includes(state.recherche)} class="column is-unselectable " style="transform: translateX(0px); opacity: 1;" onclick={changeType} id={tipe.name}>
                {tipe.name}
                <span class="tag has-background-primary is-pulled-right has-text-white">
                {tipe.count}
                </span>
            </a>
            </li>
          </div>


           <!--
              liste du choix de la filière:
              -->
          <div if={state.filiere && state.type}>
            <li class="columns is-vcentered" each={item in state.find}>
            <a if={item.name.includes(state.recherche)} class="column is-unselectable " style="transform: translateX(0px); opacity: 1;" onclick={changeDetail} id={item.name}>
                {item.name}
                <span class="tag has-background-primary is-pulled-right has-text-white">
                {item.count}
                </span>
            </a>
            </li>
          </div>
          

          </ul>
        </div>
      </my-list>
    </search-list>
  <script>
  export default function todos() {
    return {
      onBeforeMount(props, state) {
        // initial state
        this.state = {
          filiere: '',
          type: '',
          detail: '',
          find: '',
          recherche: ''
        };
        this.getFili();
      },


      async getFili() {
        if(!localStorage.getItem(`filiere`)){
          try {
            let rep = await fetch(`https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=fili&timezone=Europe%2FBerlin`);
            rep = await rep.json();
            localStorage.setItem(`filiere`, JSON.stringify(rep["facet_groups"][0]["facets"]))
            this.update({
              find: rep["facet_groups"][0]["facets"] 
            });
          } catch (error) {
          }
        }else{
          this.update({
              find: JSON.parse(localStorage.getItem(`filiere`))
            });
        }
      },


      async getType() {
        if(!localStorage.getItem(`${this.state.filiere}`)){
          try {

            let rep = await fetch(`https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=form_lib_voe_acc&refine.fili=${encodeURIComponent(this.state.filiere)}&timezone=Europe%2FBerlin`);
            rep = await rep.json();
            localStorage.setItem(`${this.state.filiere}`, JSON.stringify(rep["facet_groups"][0]["facets"]))
              this.update({
            find:  rep["facet_groups"][0]["facets"]
          });
            
          } catch (error) {
          }
        }else{
            this.update({
              find: JSON.parse(localStorage.getItem(`${this.state.filiere}`))
            });
        }
      },

      async getDetails() {
        if(!localStorage.getItem(`${this.state.type}`)){
          try {
          

            let rep = await fetch(`https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=fil_lib_voe_acc&refine.form_lib_voe_acc=${encodeURIComponent(this.state.type)}&timezone=Europe%2FBerlin`);
            rep = await rep.json();
            localStorage.setItem(`${this.state.type}`, JSON.stringify(rep["facet_groups"][0]["facets"]))
              this.update({
            find:  rep["facet_groups"][0]["facets"]
          });
            
          } catch (error) {
          }
        }else{
          this.update({
              find: JSON.parse(localStorage.getItem(`${this.state.type}`))
            });
        }
        
      },

      changeFiliere(e) {
        this.update({
          filiere: e.target.id,
          recherche: '',
          find: ''
        })
        this.getType();
      },


      changeType(e) {
        this.update({
          type: e.target.id,
          recherche: '',
          find: ''
        })
        this.getDetails()
      },

      changeDetail(e){
        this.update({
          detail: e.target.id
        })
        this.props.isSelected(this.state.detail, this.state.type)
      },

      search(e){
        this.update({
          recherche: e.target.value
        })
      },

      resetToFili(){
        this.update({
          recherche: '',
          filiere: '',
          type: '',
          detail: ''
        })
        this.getFili();
      },

      resetToType(){
        this.update({
          recherche: '',
          detail: '',
          type: ''
        })
        this.getType()
      },

      resetToDetail(){
        this.update({
          recherche: '',
          detail: ''
        })
      }

    };
  }
</script>
</choixformation>