beautifying rule and rule menu display

backoffice/src/components/Referentiel.vue

@@ -3,20 +3,24 @@
     <div id="referentiel-main-div">
       <div v-if="!this.isLoading">
         <div id="referentiel-main-row">
-          <div class="container">
+          <div class="container ml-5 mr-5">
             <div class="row">
-              <div class="col-md-4">
-                <h2 class="mb-5">MENU</h2>
-                <RulesMenu title="Règles régionales" namespace="région" class="rules-menu" @click="this.forceRerender()"></RulesMenu>
-                <RulesMenu title="Règles nationales" namespace="règles nationales" class="rules-menu"></RulesMenu>
-                <RulesMenu title="Règles des organismes paritaires" namespace="organisme paritaire" class="rules-menu"></RulesMenu>
-                <RulesMenu title="Règles de rémunérations" namespace="rémunération" class="rules-menu"></RulesMenu>
-                <RulesMenu title="Règles de normalisation" namespace="normalisation" class="rules-menu"></RulesMenu>
-              </div>
-              <div class="col-md-1">
-                <hr class="referentiel-vertical-separator">
+              <div class="col-md-4 col-sm-12 col-xs-12">
+                <div class="row">
+                  <div class="col-md-11 col-sm-11 col-xs-11">
+                    <h2 class="mb-5">MENU</h2>
+                    <RulesMenu title="Règles régionales" namespace="région" class="rules-menu" @click="this.forceRerender()"></RulesMenu>
+                    <RulesMenu title="Règles nationales" namespace="règles nationales" class="rules-menu"></RulesMenu>
+                    <RulesMenu title="Règles des organismes paritaires" namespace="organisme paritaire" class="rules-menu"></RulesMenu>
+                    <RulesMenu title="Règles de rémunérations" namespace="rémunération" class="rules-menu"></RulesMenu>
+                    <RulesMenu title="Règles de normalisation" namespace="normalisation" class="rules-menu"></RulesMenu>
+                  </div>
+                  <div class="col-md-1 col-sm-1 col-xs-1">
+                    <hr class="referentiel-vertical-separator">
+                  </div>
+                </div>
               </div>
-              <div class="col-md-7">
+              <div class="col-md-8 col-sm-12 col-xs-12">
                 <div v-if="this.show">
                   <Rule :data="this.currentRuleContent" :name="this.currentRuleName" :key="this.rerenderKey"></Rule>
                 </div>
@@ -58,6 +62,7 @@
         return (this.windowLocationHash !== '')
       },
       currentRuleContent: function() {
+        this.forceRerender();
         if(this.windowLocationHash !== '') return this.rules[this.currentRuleName]['data'];
         else return null;
       },

backoffice/src/components/Rule.vue

 <template>
   <div id="Rule">
-    <div class="container mb-5">
+    <div class="mb-5">
       <div class="row">
         <div  class="col-md-6 col-sm-12 col-xs-12">
-          <h4>{{ this.name }}</h4>
+          <h4>
+            <span>{{ this.name }}</span>
+          </h4>
         </div>
-        <div class="col-md-6 col-sm-12 col-xs-12 my-auto">
-          <div v-show="!isEditMode" class="form-inline pull-right">
-            <div class="form-group mx-sm-3">
-              <input @click="edit" type="button" class="btn btn-outline-success form-control" value="Soumettre une modification"/>
-              <!-- TODO: show gitlab link of modification if exists -->                            
-            </div>
-          </div>
+        <div class="col-md-6 col-sm-12 col-xs-12">
+          <h4 v-show="isEditMode" class="pull-right"><em>Édition de la règle</em></h4>
+          <input  v-show="!isEditMode" @click="edit" type="button" class="btn btn-outline-success pull-right" value="Soumettre une modification"/>
+          <!-- TODO: show gitlab link of modification if exists -->
         </div>
       </div>
     </div>
@@ -23,18 +22,22 @@
     </div>
     <div v-show="isEditMode">
       <!-- rule-editor ref="editor" :rawRule="ruleToEdit"></rule-editor -->
-      <label for="comment" class="mb-2"><u>Résumé de la modification</u></label>
-      <textarea v-model="comment"></textarea>
-      <label for="content"><u>Contenu de la règle</u></label>
-      <textarea v-model="content" class="mb-2"></textarea>
-      <div class="form-inline pull-left">
-        <div class="form-group mx-sm-3 mb-2">
-          <input @click="closeEdit" type="button" class="btn btn-outline-danger form-control" value="Annuler"/>
+      <div class="container">
+        <div class="row mb-3">
+          <label for="comment" class="mb-2"><u>Résumé de la modification</u></label>
+          <textarea v-model="comment"></textarea>
         </div>
-      </div>
-      <div class="form-inline pull-right">
-        <div class="form-group mx-sm-3 mb-2">
-          <input @click="save" type="button" class="btn btn-outline-success form-control" value="Enregistrer"/>
+        <div class="row mb-3">
+          <label for="content"><u>Contenu de la règle</u></label>
+          <textarea v-model="content" class="mb-3"></textarea>
+        </div>
+        <div class="row mb-3">
+          <div class="col-md-6 pl-0">
+            <input @click="closeEdit" type="button" class="btn btn-outline-danger pull-left" value="Annuler"/>
+          </div>
+          <div class="col-md-6 pr-0">
+            <input @click="save" type="button" class="btn btn-outline-success pull-right" value="Enregistrer"/>
+          </div>
         </div>
       </div>
     </div>

backoffice/src/components/TreeItem.vue

 <template>
   <li>
-    <div
-      :class="{bold: isFolder}"
-      @dblclick="makeFolder">
-      {{ item.name }}
-      <span v-if="isFolder" @click="toggle">[{{ isOpen ? '-' : '+' }}]</span>
+    <div :class="{bold: isFolder}"  @dblclick="makeFolder">
+      <div v-if="isFolder" @click="toggle">
+        <span>{{ item.name }}</span>
+        <span class="btn btn-outline-info pull-right" style="width:5%"><strong>{{ isOpen ? '-' : '+' }}</strong></span>
+      </div>
+      <span v-else v-html="transform(item.name)"></span>
     </div>
     <hr class="">
     <ul v-show="isOpen" v-if="isFolder">
-      <tree-item
+      <TreeItem
         class="item"
         v-for="(child, index) in item.children"
         :key="index"
         :item="child"
         @make-folder="$emit('make-folder', $event)"
         @add-item="$emit('add-item', $event)"
-      ></tree-item>
+      ></TreeItem>
       <!-- li class="add" @click="$emit('add-item', item)">+</li -->
     </ul>
   </li>
@@ -42,7 +43,22 @@ export default {
         this.$emit('make-folder', this.item)
         this.isOpen = true
       }
-    }
+    },
+    transform: function(data) {
+      return data.replace(/Si /g, '<span class="text-muted font-weight-light">Si </span>')
+        .replace(/Soit /g, '<span class="text-muted font-weight-light">Soit </span>')
+        .replace(/Quand /g, '<span class="text-muted font-weight-light">Quand </span>')
+        .replace(/Scénario: /g, '<span class="text-muted font-weight-light">Scénario: </span>')
+        .replace(/Ou /g, '<span class="text-muted font-weight-light">Ou </span>')
+        .replace(/, ou /g, '<span class="text-muted font-weight-light">, ou </span>')
+        .replace(/Et /g, '<span class="text-muted font-weight-light">Et </span>')
+        .replace(/, et /g, '<span class="text-muted font-weight-light">, et </span>')
+        .replace(/Alors /g, '<span class="text-muted font-weight-light">Alors </span>')
+        .replace(/(#.+)/g, "<em class=\"comment\">$1</em>")
+        .replace(/appliquer les règles «([^»]+?)(.rules)?»/g, 'appliquer les règles « <a href="#$1.rules" class="btn btn-outline-info" title="Ouvrir les règles" style="display:inline-block">$1</a> »')
+        .replace(/(«.+»)/g, "<span class=\"string\">$1</span>")
+        .replace(/,([^ ])/g, ", $1");
+    },
   },
   computed: {
     isFolder: function() {