Accueil.vue 5.46 KB
Newer Older
1
<template>
2 3 4
  <div id="Accueil">
    <div class="container">
      <div class="row">
Lucas Détré's avatar
Lucas Détré committed
5
        <div class="col-md-5 mt-5">
6
          <h2>Bienvenue sur l'outil Trèfle</h2>
Lucas Détré's avatar
Lucas Détré committed
7
        </div>
Lucas Détré's avatar
Lucas Détré committed
8
        <div class="col-md-7 mt-5">
9
          <p>
Lucas Détré's avatar
Lucas Détré committed
10 11 12 13
            Trèfle est un outil dédié aux dispositifs de financement des formations.<br>
            Il recense région par région tous les dispositifs applicables.<br>
            Trèfle vous permet de consulter ou de modifier un dispositif de financement existant.<br>
            Les règles enregistrées dans Trèfle alimentent le simulateur de financement de formation disponible sur <a  class="link_class" href="https://labonneformation.pole-emploi.fr/" target="_blank">La Bonne Formation</a> et <a  class="link_class" href="https://candidat.pole-emploi.fr/formations/accueil" target="_blank">Pole Emploi.fr</a>
14
          </p>
Lucas Détré's avatar
Lucas Détré committed
15
        </div>
16
      </div>
Lucas Détré's avatar
Lucas Détré committed
17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
      <div v-if="!isLoading">
        <div class="row">
          <div class="col-md-6">
            <h4>
              <strong>
                {{ Object.keys(modification_list).length }}
              </strong>
              modifications en cours de validation
            </h4>
            <span style="color:#384EAA">
              Cliquez sur le graphique pour afficher les modifications par région
            </span>
          </div>
          <div class="col-md-6">
            <!--<a href="referentiel" class="main-button-primary btn float-right">Accédez au référentiel de règles</a>-->
          </div>
        </div>
      </div>
      <div v-else class="text-center loading-gif">
        <img src="./../assets/images/loading.gif" alt="loading...">
      </div>
      <div class="row">
        <div class="col-md-12 mt-5">
          <div id="chart-container" class="text-center">
            <ModificationChart width="1200" height="200" @on-receive="update" :values="modification_chart_datas.datasets" :labels="modification_chart_datas.labels"></ModificationChart>
Lucas Détré's avatar
Lucas Détré committed
42
          </div>
43
        </div>
Lucas Détré's avatar
Lucas Détré committed
44 45
        <div class="col-md-12">
          <div v-if="!isUpdateLoading">
46 47
            <div id="modification_list">
              <div v-if="selected_rule">
Lucas Détré's avatar
Lucas Détré committed
48 49 50 51 52 53 54 55 56 57
                <h5>
                  <strong>
                    {{ Object.keys(selected_modification_list).length }}
                  </strong>
                    Modification(s) de la règle
                  <strong>
                    {{ selected_rule }}
                  </strong>
                  en cours de validation
                </h5>
58 59
                <ul v-for="modification in selected_modification_list" :key="modification.id" class="dash">
                  <li>
Lucas Détré's avatar
Lucas Détré committed
60
                    <a :href="'referentiel#'+selected_rule+'.rules#modified'" class="link_class"> {{ modification.title }} </a>
61 62
                  </li>
                </ul>
Lucas Détré's avatar
Lucas Détré committed
63 64 65
              </div>
            </div>
          </div>
Lucas Détré's avatar
Lucas Détré committed
66 67 68
          <div v-else class="text-center loading-gif" style="padding-top:0;">
            <img src="./../assets/images/loading.gif" alt="loading...">
          </div>
Lucas Détré's avatar
Lucas Détré committed
69 70 71
        </div>
      </div>
    </div>
72
  </div>
73 74
</template>
<script>
Lucas Détré's avatar
Lucas Détré committed
75 76 77

  import ModificationChart from './ModificationChart.vue';

David Foucher's avatar
David Foucher committed
78
  export default {
Lucas Détré's avatar
Lucas Détré committed
79 80 81 82 83 84 85 86 87 88
    name: 'Accueil',
    components: {
      ModificationChart,
    },
    data : function () {
      return {
        modification_list: {},
        selected_modification_list: {},
        selected_rule: '',
        test:0,
89
        isLoading: true,
Lucas Détré's avatar
Lucas Détré committed
90
        isUpdateLoading: false,
Lucas Détré's avatar
Lucas Détré committed
91 92
      }
    },
93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123
    computed : {
      modification_chart_datas: function () {
        var modifications = [];
        var keys = []
        for (let [key, value] of Object.entries(this.modification_list)) {
          keys.push(key);
          modifications.push(value.file.split('/').pop());
        }

        keys = Object.keys(modifications.reduce(function (acc, curr) {
          if (typeof acc[curr] == 'undefined') acc[curr] = 1;
          else acc[curr] += 1;
          return acc;
        }, {}));

        modifications = Object.values(modifications.reduce(function (acc, curr) {
          if (typeof acc[curr] == 'undefined') acc[curr] = 1;
          else acc[curr] += 1;
          return acc;
        }, {}))

        return {
          labels: keys,
          datasets: [
            {
              data: modifications
            }
          ]
        }
      }
    },
Lucas Détré's avatar
Lucas Détré committed
124 125 126
    beforeMount: function() {
      this.loadInProgressModification();
    },
127
    methods: {
Lucas Détré's avatar
Lucas Détré committed
128 129 130 131 132
      loadInProgressModification: function () {
        this.$http
          .get('/source/modified')
          .then(response => {
            this.modification_list = response.body;
133
            this.isLoading = false;
Lucas Détré's avatar
Lucas Détré committed
134 135 136
            return true;
          }, response => {
            if(response.status == 500) this.modification_list = {};
137
            this.isLoading = false;
Lucas Détré's avatar
Lucas Détré committed
138 139 140 141 142
            return false;
          })
      },
      update (data) {
        this.selected_rule = data.value
Lucas Détré's avatar
Lucas Détré committed
143
        this.isUpdateLoading=true;
Lucas Détré's avatar
Lucas Détré committed
144 145 146 147
        this.$http
          .get('/source/modified?branch='+encodeURIComponent(this.selected_rule))
          .then(response => {
            this.selected_modification_list = response.body;
Lucas Détré's avatar
Lucas Détré committed
148
            this.isUpdateLoading=false;
Lucas Détré's avatar
Lucas Détré committed
149 150 151
            return true;
          }, response => {
            if(response.status == 500) this.selected_modification_list = {};
Lucas Détré's avatar
Lucas Détré committed
152
            this.isUpdateLoading=false;
Lucas Détré's avatar
Lucas Détré committed
153 154 155 156
            return false;
          })
      }
    },
David Foucher's avatar
David Foucher committed
157 158
  }
</script>
Lucas Détré's avatar
Lucas Détré committed
159 160 161

<style>
  #chart-container {
Lucas Détré's avatar
Lucas Détré committed
162
    width: 40rem;
Lucas Détré's avatar
Lucas Détré committed
163 164
    height: 20rem;
  }
Lucas Détré's avatar
Lucas Détré committed
165 166 167 168
  .link_class {
    cursor:pointer;
    color:#384EAA;
  }
Lucas Détré's avatar
Lucas Détré committed
169
</style>