Financements.vue 8.12 KB
Newer Older
1
<template>
David Foucher's avatar
David Foucher committed
2 3 4 5 6 7 8 9 10 11 12 13 14 15
  <div id="Financements">
    <div id="financement-main-div">
      <div v-if="!this.isLoading">
        <div id="financement-header-row">
          <div class="container">
            <div class="row mb-4">
              <div id="financement-count-financements" class="col-md-6 col-sm-12 col-xs-12">
                <span id="financement-count-financements-number" class="financement-results-count-number financement-count-financements-text">{{ this.countFinancements }}</span>
                <span class="financement-count-financements-text" v-if="this.countFinancements < 2">&nbsp;financement</span>
                <span class="financement-count-financements-text" v-else>&nbsp;financements</span>
              </div>
              <div id="financement-create-financement" class="col-md-6 col-sm-12 col-xs-12 my-auto">
                <div class="form-inline pull-right">
                  <div class="form-group mx-sm-3 mb-2">
16
                    <!--<input type="button" href="#" class="btn main-button form-control" value="Créer un financement"  disabled />-->
David Foucher's avatar
David Foucher committed
17 18 19 20
                  </div>
                </div>
              </div>
            </div>
21
            <!--
David Foucher's avatar
David Foucher committed
22 23 24 25 26
            <div class="row">
              <div id="financement-last-update" class="col-md-12">
                Dernière mise à jour le __ à __
              </div>
            </div>
27
            -->
David Foucher's avatar
David Foucher committed
28 29 30 31 32
          </div>
        </div>
        <hr class="financement-horizontal-separator">
        <div id="financement-filter-row" class="container">
          <label for="financement-filter-select">Filtrer par</label>
33
          <select id="financement-filter-select" class="form-control" name="financement-filter-select" v-model="searchSelect">
David Foucher's avatar
David Foucher committed
34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
            <option value="" selected>Tous les financements</option>
            <optgroup label="Champ d'action">
              <option value="national">Financements nationaux</option>
              <option value="région">Financements régionaux</option>
            </optgroup>
            <optgroup label="Public visé">
              <option value="DE">Demandeurs d'Emploi</option>
              <option value="salarié">Salariés</option>
              <option value="TH">Travailleurs Handicapés</option>
              <option value="jeune">Personnes Niv inférieur au Bac</option>
            </optgroup>
          </select>
        </div>
        <hr class="financement-horizontal-separator">
        <div id="financement-result-row" class="container">
          <div class="row">
            <div id="financement-search-financement" class="col-md-6 col-sm-12 col-xs-12 my-auto">
              <span v-if="this.countFinancements < 2" class="financement-results-count">
                Résultat (<span class="financement-results-count-number">{{ this.countResultats }}</span>)
              </span>
              <span v-else class="financement-results-count">
                Résultats (<span class="financement-results-count-number">{{ this.countResultats }}</span>)
              </span>
            </div>
            <div id="financement-search-financement" class="col-md-6 col-sm-12 col-xs-12 my-auto">
              <div class="form-inline pull-right">
                <div class="form-group mx-sm-3 mb-2">
61
                  <input class="form-control" id="financement-search-field" name="financement-search" placeholder="Rechercher" v-model="searchInput">
David Foucher's avatar
David Foucher committed
62 63 64 65 66 67 68 69
                </div>
              </div>
            </div>
          </div>
          <div id="financement-results-list">
            <ul id="ul-financement-results-list">
              <li v-for="financement in this.filteredFinancements" :key="financement.id" class="mt-4 row">
              <span class="col-md-3 col-sm-12">
David Foucher's avatar
David Foucher committed
70
                <a :href="'/0.8/explorer/referentiel#'+financement.racine">
David Foucher's avatar
David Foucher committed
71 72 73 74
                  <strong class="financement-fields">{{ financement.intitule }}</strong>
                </a>
              </span>
              <span class="col-md-8 col-sm-11">
75 76
                <span v-for="tag in financement.tags" v-on:click="setSearchTag(tag)" :key="tag.id" class="financement-results-tags" >
                  <span class="btn main-button" :class="{'main-button-primary': tag==search}">
David Foucher's avatar
David Foucher committed
77 78 79 80
                    {{ tag }}
                  </span>
                </span>
              </span>
81
              <!--
David Foucher's avatar
David Foucher committed
82
              <span class="col-md-1 col-sm-1 pull-right">
83
                <button href="https://git.beta.pole-emploi.fr/open-source/trefle/edit/master/trefle/config/financements.yml" target="_blank" class="text-dark btn btn-outline-light" disabled>
David Foucher's avatar
David Foucher committed
84 85 86
                  <i class="icon" style="vertical-align: baseline;">edit</i>
                </button>
              </span>
87
              -->
David Foucher's avatar
David Foucher committed
88 89 90 91 92
              </li>
            </ul>
          </div>
        </div>
      </div>
93
      <div v-else class="text-center loading-gif">
94
        <img src="@/assets/images/loading.gif" alt="loading...">
95
      </div>
David Foucher's avatar
David Foucher committed
96 97
    </div>
  </div>
98 99
</template>
<script>
David Foucher's avatar
David Foucher committed
100 101 102 103 104
  export default {
    name: 'Financements',
    data: function(){
      return {
        financements:[],
105
        filteredFinancements:[],
David Foucher's avatar
David Foucher committed
106
        search: "",
107 108
        searchInput: "",
        searchSelect: "",
David Foucher's avatar
David Foucher committed
109 110 111
        isLoading: true,
      }
    },
112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129
    watch: {
      searchInput: function () {
        this.search = this.searchInput;
        this.filteredFinancements = this.filterFinancements(this.search,"input", false);
      },
      searchSelect: function() {
        this.search = this.searchSelect;
        this.filteredFinancements = this.filterFinancements(this.search,"select", true);
      },
    },
    computed: {
      countResultats() {
        return this.filteredFinancements.length;
      },
      countFinancements() {
        return this.financements.length;
      }
    },
David Foucher's avatar
David Foucher committed
130 131 132
    created: function () {
      this.load();
    },
133 134
    methods: {
      load: function () {
135 136 137 138 139 140 141 142
        this.$http
          .get('/explore/financements')
          .then(response => {
            this.financements = response.body;
            this.filteredFinancements = response.body;
            this.isLoading = false;
          })
          .created;
143 144 145 146 147 148
      },
      setSearchTag: function (tag) {
        this.search = tag;
        this.filteredFinancements = this.filterFinancements(this.search,"tag", true);
      },
      filterFinancements: function (search, searchType, isCaseSensitive) {
David Foucher's avatar
David Foucher committed
149
        return this.financements.filter(financement => {
150
          if (search != "") {
David Foucher's avatar
David Foucher committed
151
            //replace all accents characters in the search string by their non-accented equivalent
152
            var searchWithoutAccents = search.normalize('NFD').replace(/[\u0300-\u036f]/g, "")
David Foucher's avatar
David Foucher committed
153
            //create a RegExp for the search string to be case-insensitive
154 155 156
            var searchRegExp;
            isCaseSensitive ? searchRegExp = new RegExp(searchWithoutAccents,"g") : searchRegExp = new RegExp(searchWithoutAccents,'ig')
            return searchType != "input" ? this.filterable("", financement.tags).match(searchRegExp) : this.filterable(financement.intitule, financement.tags).match(searchRegExp)
David Foucher's avatar
David Foucher committed
157 158 159 160
          }
          return true
        })
      },
161 162 163
      filterable: function (intitule,tags) {
        //replace all accents characters in the search string by their non-accented equivalent
        return intitule.concat(tags.join(",")).normalize('NFD').replace(/[\u0300-\u036f]/g, "");
David Foucher's avatar
David Foucher committed
164 165 166
      },
    },
  }
167 168
</script>
<style>
David Foucher's avatar
David Foucher committed
169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208
  .currentTagFilter{
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
  }
  #financement-header-row {
    padding-top: 3rem;
  }
  .financement-count-financements-text {
    font-size: 1.5em;
  }
  #financement-count-financements-number {
    font-size: 2.5em;
    font-style: bolder;
  }
  #financement-last-update {
    font-size: 0.9em;
    color: #000; /* Fallback for older browsers */
    color: rgba(0, 0, 0, 0.5);
  }
  .financement-results-count {
    color: #000; /* Fallback for older browsers */
    color: rgba(0, 0, 0, 0.5);
  }
  #financement-results-list {
    padding-top: 0.5rem;
  }
  .financement-results-tags {
    margin-right: 5px;
  }
  .financement-horizontal-separator {
    border: none;
    border-top: 1px solid #bfbfbf;
    height: 1px;
    width: 90%;
    position:relative;
  }
  #financement-filter-select {
    width : auto;
  }
David Foucher's avatar
David Foucher committed
209
</style>