Referentiel.vue 6.11 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-fluid pl-5 pr-5">
David Foucher's avatar
David Foucher committed
7
            <div class="row">
8
              <div v-if="!isEditMode" :class="classCollapsedMenu">
Lucas Détré's avatar
Lucas Détré committed
9
                <div class="pb-3 pull-right">
10 11 12 13 14
                  <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>
Lucas Détré's avatar
Lucas Détré committed
15
                <br>
16
                <div v-show="!collapsed">
Lucas Détré's avatar
Lucas Détré committed
17
                  <h2 class="pt-5 mb-5">Dispositifs de financement</h2>
18 19 20 21 22 23
                  <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>
24
              </div>
Lucas Détré's avatar
Lucas Détré committed
25 26 27 28
              <div v-show="!collapsed" :class="classCollapsedSeparator">
                <hr class="referentiel-vertical-separator">
              </div>
              <div :class="classCollapsedContent">
David Foucher's avatar
David Foucher committed
29
                <div v-if="this.show">
30
                  <Rule :data="this.currentRuleContent" :name="this.currentRuleName" :path="this.currentRuleFilePath" :printRulePath="this.printRulePath" :rulePath="this.rulePath" :key="this.rerenderKey" :ruleComment="this.currentRuleComment"></Rule>
David Foucher's avatar
David Foucher committed
31 32
                </div>
                <div v-else>
33
                  <h2>Sélectionnez une règle.</h2>
David Foucher's avatar
David Foucher committed
34 35 36 37 38 39
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
40
      <div v-else class="text-center loading-gif">
41 42 43
        <div v-if="modificationInProgress" class="mt-5">
          <h2>Modification en cours...</h2>
        </div>
44
        <img src="@/assets/images/loading.gif" alt="loading...">
David Foucher's avatar
David Foucher committed
45 46 47
      </div>
    </div>
  </div>
48
</template>
49

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

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

145
</script>
146

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