Referentiel.vue 5.88 KB
Newer Older
1
<template>
David Foucher's avatar
David Foucher committed
2
  <div id="Referentiel">
3
    <div id="referentiel-main-div">
David Foucher's avatar
David Foucher committed
4
      <div v-if="!this.isLoading">
5
        <div id="referentiel-main-row">
Lucas Détré's avatar
Lucas Détré committed
6
          <div class="container ml-5 mr-2">
David Foucher's avatar
David Foucher committed
7
            <div class="row">
8
              <div v-if="!isEditMode" :class="classCollapsedMenu">
9 10 11 12 13 14 15 16 17 18 19 20 21 22
                <div class="mb-3 pull-right">
                  <button @click="collapsed = !collapsed" type="button" class="btn main-button mb-5">
                    <span v-show="collapsed"><span class="chevron-toggle">&#8594;</span>  Ouvrir le panneau</span>
                    <span v-show="!collapsed"><span class="chevron-toggle">&#8592;</span>  Fermer le panneau</span>
                  </button>
                </div>
                <div v-show="!collapsed">
                  <h2 class="mb-5">Dispositifs de financement</h2>
                  <RulesMenu title="Régionaux" namespace="région" class="rules-menu" @click="this.forceRerender()"></RulesMenu>
                  <RulesMenu title="Nationaux" namespace="règles nationales" class="rules-menu"></RulesMenu>
                  <RulesMenu title="Organismes paritaires" namespace="organisme paritaire" class="rules-menu"></RulesMenu>
                  <RulesMenu title="Rémunérations" namespace="rémunération" class="rules-menu"></RulesMenu>
                  <RulesMenu title="Normalisations" namespace="normalisation" class="rules-menu"></RulesMenu>
                </div>
23
              </div>
Lucas Détré's avatar
Lucas Détré committed
24 25 26 27
              <div v-show="!collapsed" :class="classCollapsedSeparator">
                <hr class="referentiel-vertical-separator">
              </div>
              <div :class="classCollapsedContent">
David Foucher's avatar
David Foucher committed
28
                <div v-if="this.show">
29
                  <Rule :data="this.currentRuleContent" :name="this.currentRuleName" :path="this.currentRuleFilePath" :printRulePath="this.printRulePath" :rulePath="this.rulePath" :key="this.rerenderKey"></Rule>
David Foucher's avatar
David Foucher committed
30 31
                </div>
                <div v-else>
32
                  <h2>Sélectionnez une règle.</h2>
David Foucher's avatar
David Foucher committed
33 34 35 36 37 38
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
39
      <div v-else class="text-center loading-gif">
40 41 42
        <div v-if="modificationInProgress" class="mt-5">
          <h2>Modification en cours...</h2>
        </div>
43
        <img src="@/assets/images/loading.gif" alt="loading...">
David Foucher's avatar
David Foucher committed
44 45 46
      </div>
    </div>
  </div>
47
</template>
48

49
<script>
50 51
  import RulesMenu from './RulesMenu.vue';
  import Rule from './Rule.vue';
52

David Foucher's avatar
David Foucher committed
53 54 55
  export default {
    name: 'Referentiel',
    components: {
56
      RulesMenu,
57
      Rule,
58 59 60 61 62 63
    },
    data: function(){
      return {
        rules: [],
        isLoading: true,
        windowLocationHash: decodeURI(window.location.hash),
64
        modificationInProgress: false,
Lucas Détré's avatar
Lucas Détré committed
65 66
        rerenderKey: 0,
        collapsed: false,
67
        currentRuleName: decodeURI(window.location.hash).split('#').pop() == "modified" ? decodeURI(window.location.hash).split('#')[1]:decodeURI(window.location.hash).split('#').pop(),
68
        inProgressModification : false,
69
        isEditMode: false,
70 71 72 73
      }
    },
    computed: {
      show: function () {
74
        return (this.currentRuleName !== '')
75
      },
76
      currentRuleContent: function() {
77
        this.forceRerender();
78
        if(this.currentRuleName !== '') return this.rules[this.currentRuleName]['data'];
79
        else return null;
80
      },
81
      currentRuleFilePath: function () {
82
        if(this.currentRuleName !== '') return this.rules[this.currentRuleName]['path'];
83 84
        else return null;
      },
85 86
      printRulePath: function () {
        var path = "";
87
        var printpath = "";
88 89
        if(this.windowLocationHash.split('#').length -1 > 1) {
          for(var i=1; i <= this.windowLocationHash.split('#').length -1; i++) {
90
            if (this.windowLocationHash.split('#').pop() == 'modified') return "";
91
            path += "#"+ this.windowLocationHash.split('#')[i];
92 93 94
            if (i == this.windowLocationHash.split('#').length - 1) printpath += "<a class='btn main-button' href='"+ path + "'>" + this.windowLocationHash.split('#')[i] + "</a>"
            else printpath += "<a class='btn main-button' href='"+ path + "'>" + this.windowLocationHash.split('#')[i] + "</a> <b>></b> ";
          } return printpath;
95 96 97 98 99 100 101 102
        } else return "";
      },
      rulePath: function () {
        var path = "";
        for(var i=1; i <= this.windowLocationHash.split('#').length -1; i++) {
          path += "#"+ this.windowLocationHash.split('#')[i];
        }
        return path;
103
      },
Lucas Détré's avatar
Lucas Détré committed
104 105 106 107 108 109 110 111 112 113 114 115
      classCollapsedContent: function () {
        if(this.collapsed) return "col-md-12 col-sm-12 col-xs-12";
        return "col-md-8 col-sm-12 col-xs-12";
      },
      classCollapsedMenu: function () {
        if(this.collapsed) return "col-md-0 col-sm-0 col-xs-0";
        return "col-md-3 col-sm-12 col-xs-12";
      },
      classCollapsedSeparator: function () {
        if(this.collapsed) return "col-md-0 col-sm-0 col-xs-0";
        return "col-md-1 col-sm-0 col-xs-0";
      }
116
    },
Lucas Détré's avatar
Lucas Détré committed
117
    created: function () {
118
      this.loadRules();
119 120
      window.addEventListener('popstate', () => {
        this.windowLocationHash = decodeURI(window.location.hash);
121
        this.currentRuleName = decodeURI(window.location.hash).split('#').pop() == "modified" ? decodeURI(window.location.hash).split('#')[1]:decodeURI(window.location.hash).split('#').pop();
122
      })
David Foucher's avatar
David Foucher committed
123 124
    },
    methods: {
125
      loadRules: function () {
126 127 128 129 130 131 132
        this.$http
          .get('/explore/rules')
          .then(response => {
            this.rules = response.body;
            this.isLoading = false;
          })
          .created;
133
      },
134 135 136
      forceRerender: function () {
        this.rerenderKey +=1;
      }
David Foucher's avatar
David Foucher committed
137 138
    },
  }
139

140
</script>
141

142
<style>
143 144 145 146 147 148
  #referentiel-main-row {
    padding-top: 3rem;
  }
  .referentiel-vertical-separator {
    border:         none;
    border-left:    1px solid #bfbfbf;
149
    height:         95%;
150 151
    width:          1px;
  }
Lucas Détré's avatar
Lucas Détré committed
152 153 154
  .chevron-toggle {
    font-weight: bold;
  }
David Foucher's avatar
David Foucher committed
155
</style>