Rule.vue 15.6 KB
Newer Older
1
<template>
David Foucher's avatar
David Foucher committed
2
  <div id="Rule">
3 4 5 6 7 8 9
    <div v-if="!isLoading">
      <div class="mb-5">
        <div class="row mb-3">
          <div  class="col-md-6 col-sm-12 col-xs-12">
            <h5>
              <span style="vertical-align:-30%" >{{ displayedName }}</span>
            </h5>
10
            <div v-if="this.modifiedHashFlag">
Lucas Détré's avatar
Lucas Détré committed
11
              <a :href="'#'+name" v-if="this.modification_count" @click="displayList()" id="modification_link">Voir la règle</a>
12 13 14 15
            </div>
            <div v-else>
              <a :href="'#'+name+'#modified'" v-if="this.modification_count" @click="displayModification()" id="modification_link">({{ this.modification_count }} modification<span v-if="this.modification_count > 1">s</span> en cours)</a>
            </div>
16 17 18
          </div>
          <div class="col-md-6 col-sm-12 col-xs-12">
            <h4 v-if="isEditMode" class="pull-right"><em>Modification de la règle</em></h4>
19
            <input v-else-if="this.modifiedHashFlag | this.newModification" v-b-modal.auth-modal type="button" class="main-button-primary btn pull-right" value="Soumettre une modification"/>
20 21
            <!-- TODO: show gitlab link of modification if exists -->
          </div>
22
        </div>
23 24 25 26
        <div v-show="!isEditMode" class="row">
          <div class="col-md-12">
            <span v-html="printRulePath"></span>
          </div>
27 28
        </div>
      </div>
29 30 31 32
      <div v-if="viewModification">
        <ul v-for="modification in modification_list" :key="modification.id">
          <Modification :modification="modification"/>
        </ul>
33
      </div>
34 35 36 37
      <div v-show="!isEditMode && !viewModification">
        <ul>
          <TreeItem class="item" :item="this.ruleTree" :rootElement="true" :rulePath="this.rulePath"></TreeItem>
        </ul>
38
      </div>
39
      <div v-show="isEditMode">
40
        <div v-if="content!=null">
41 42 43 44 45 46 47 48
          <div class="container">
            <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">
                <button v-b-modal.mail-modal class="btn main-button-primary pull-right">Enregistrer</button>
              </div>
49
            </div>
50 51
            <div class="row mb-3">
              <label for="content"><u>Contenu de la règle</u></label>
52
              <TextAreaAutosize id="content" v-model="content" class="rule-modification-text" :class="{editErrorClass: error_flags.notModified }" v-focus/>
53
              <span v-if="error_flags.notModified" class="text-danger font-weight-light">Aucune modification n'a été renseignée</span>
54
            </div>
55 56 57 58 59 60 61
            <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">
                <button v-b-modal.mail-modal class="btn main-button-primary pull-right">Enregistrer</button>
              </div>
62 63 64
            </div>
          </div>
        </div>
65 66 67
        <div v-else class="text-center loading-gif">
          <img src="./../assets/images/loading.gif" alt="loading...">
        </div>
68
        <b-modal id="auth-modal" title="Authentifiez-vous pour soumettre une modification">
69
          <label for="contributor_email" class="pb-2"><u>Votre email</u> *</label><br>
70 71
          <input id="contributor_email" v-model="auth.email" type="text" :class="{editErrorClass: (error_flags.badUser || error_flags.noUser)}" class="form-control" style="border: 1px solid #bfbfbf; border-radius: 2px;"/><br>
          <span v-if="error_flags.noUser" class="mt-0 text-danger font-weight-light">Ce champ est obligatoire</span><br>
72
          <label for="contributor_passwd" class="pb-2"><u>Votre mot de passe</u> *</label><br>
73 74 75 76
          <input id="contributor_passwd" v-model="auth.password" type="password" :class="{editErrorClass: (error_flags.badUser || error_flags.noPass)}" class="form-control" style="border: 1px solid #bfbfbf; border-radius: 2px;"/><br>
          <span v-if="error_flags.badUser" class="text-danger font-weight-light">Cet utilisateur n'est pas autorisé à soumettre des modifications<br></span>
          <span v-if="error_flags.noPass" class="text-danger font-weight-light">Ce champ est obligatoire<br></span>
          <span v-if="!error_flags.noUser && !error_flags.noPass" class="font-weight-light">* Champs obligatoires<br></span>
77
          <template v-slot:modal-footer>
78
            <input @click="auth_to_edit" type="button" class="btn main-button-primary pull-right" value="Suivant"/>
79 80 81 82 83
          </template>
        </b-modal>

        <b-modal id="mail-modal" title="Soumettre votre modification">
          <label for="comment" class="mb-2"><u>Résumé de la modification</u> * </label>
84 85 86
          <textarea id="comment" v-model="comment" :class="{editErrorClass: error_flags.noResume}" rows="3"></textarea>
          <span v-if="error_flags.noResume" class="text-danger font-weight-light">Ce champ est obligatoire</span>
          <span v-if="!error_flags.noUser && !error_flags.noResume" class="font-weight-light">* Champ obligatoire</span>
87
          <template v-slot:modal-footer>
88
            <input @click="save" type="button" class="btn main-button-primary pull-right" value="Enregistrer"/>
89 90 91
          </template>
        </b-modal>

92 93
      </div>
    </div>
94 95
    <div v-else class="text-center loading-gif">
      <img src="./../assets/images/loading.gif" alt="loading...">
96
    </div>
97
  </div>
98 99
</template>
<script>
100
  import TreeItem from './TreeItem.vue';
101
  import Modification from './Modification.vue';
102
  import TextAreaAutosize from "./TextAreaAutosize.vue";
103 104 105 106 107 108 109

  function Node(name) {
    this.name = name;
    this.parent = null;
    this.children = [];
  }

David Foucher's avatar
David Foucher committed
110
  export default {
111
    name: 'Rule',
112 113
    components: {
      TreeItem,
114 115
      Modification,
      TextAreaAutosize
116
    },
117
    props: ['name', 'data', 'path', 'printRulePath', 'rulePath'],
118 119
    data: function(){
      return {
120 121
        windowLocationHash: '',
        modifiedHashFlag: decodeURI(window.location.hash).split('#').pop() == "modified",
122
        isLoading: true,
123
        ruleData: this.data,
124 125
        modification_list: {},
        commit_id: '',
126
        content: null,
127
        comment: '',
128
        filename: 'trefle/config/rules/' + this.path,
129
        isEditMode: '',
130
        viewModification: false,
131 132 133
        auth: {
          email: '',
          password: '',
134
          file: this.path
135 136 137 138 139 140 141 142
        },
        error_flags: {
          badUser: false,
          notModified: false,
          noUser: false,
          noPass: false,
          noResume: false,
        },
143 144
      }
    },
145 146 147 148
    watch: {
      isEditMode: function () {
        this.$parent.isEditMode=this.isEditMode;
      }
149
    },
150
    computed: {
151 152 153 154
      displayedName: function () {
        return this.name.split('.')[0];
      },
      modification_count: function () {
155
        return Object.keys(this.modification_list).length;
156
      },
157 158 159 160 161 162
      ruleTree: function() {
        return this.toTree(this.ruleData.split('\n'));
      },
      ruleToEdit: function() {
        return this.ruleData;
      },
163 164 165
      newModification: function() {
        return Boolean(!this.modification_count)
      }
166
    },
167 168 169 170 171
    directives: {
      focus: {
        inserted: function (el) {
          el.focus();
        },
172 173
      }
    },
174 175 176 177 178 179 180
    created: function() {
      this.loadInProgressModification();
      this.updateLayout();
      window.addEventListener('popstate', () => {
        this.updateLayout();
      })
    },
181
    methods: {
182 183 184
      preventScrolling: function (e) {
        e.preventDefault();
      },
185 186 187 188 189 190 191 192 193
      updateLayout: function() {
        this.windowLocationHash = decodeURI(window.location.hash);
        this.modifiedHashFlag = decodeURI(window.location.hash).split('#').pop() == "modified";
        if (this.modifiedHashFlag) {
          this.currentRuleName = decodeURI(window.location.hash).split('#')[1];
          this.displayModification();
        } else {
          this.currentRuleName = decodeURI(window.location.hash).split('#').pop();
          this.viewModification = false;
194
        }
195
      },
196 197
      loadInProgressModification: function () {
        this.$http
198
          .get('/source/modified?branch='+encodeURIComponent(this.displayedName))
199
          .then(response => {
200
            this.modification_list = response.body;
201
            if(Object.keys(this.modification_list).length) this.commit_id = this.modification_list[Object.keys(this.modification_list)[0]].id;
202
            this.isLoading = false;