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
      <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">
36
        <img src="@/assets/images/loading.gif" alt="loading...">
Lucas Détré's avatar
Lucas Détré committed
37 38 39 40
      </div>
      <div class="row">
        <div class="col-md-12 mt-5">
          <div id="chart-container" class="text-center">
41
            <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
          <div v-else class="text-center loading-gif" style="padding-top:0;">
67
            <img src="@/assets/images/loading.gif" alt="loading...">
Lucas Détré's avatar
Lucas Détré committed
68
          </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>