Commit 28783d79 authored by Lucas Détré's avatar Lucas Détré

displaying a 'breadcrumb' system for the user to navigate between the rules

parent b7157950
Pipeline #2172 passed with stage
in 1 minute and 21 seconds
......@@ -22,7 +22,7 @@
</div>
<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>
<Rule :data="this.currentRuleContent" :name="this.currentRuleName" :printRulePath="this.printRulePath" :rulePath="this.rulePath" :key="this.rerenderKey"></Rule>
</div>
<div v-else>
<h2>Sélectionnez une règle.</h2>
......@@ -66,8 +66,27 @@
if(this.windowLocationHash !== '') return this.rules[this.currentRuleName]['data'];
else return null;
},
currentRuleName: function() {
return this.windowLocationHash.split('#')[1]
currentRuleName: function () {
return this.windowLocationHash.split('#').pop();
},
printRulePath: function () {
var path = "";
var printpath = "(";
if(this.windowLocationHash.split('#').length -1 > 1) {
for(var i=1; i <= this.windowLocationHash.split('#').length -1; i++) {
path += "#"+ this.windowLocationHash.split('#')[i];
if (i == this.windowLocationHash.split('#').length - 1) printpath += "<a href='"+ path + "'>" + this.windowLocationHash.split('#')[i] + "</a>"
else printpath += "<a href='"+ path + "'>" + this.windowLocationHash.split('#')[i] + "</a> > ";
}
return printpath+")";
} else return "";
},
rulePath: function () {
var path = "";
for(var i=1; i <= this.windowLocationHash.split('#').length -1; i++) {
path += "#"+ this.windowLocationHash.split('#')[i];
}
return path;
},
},
mounted: function () {
......
<template>
<div id="Rule">
<div class="mb-5">
<div class="row">
<div class="row mb-3">
<div class="col-md-6 col-sm-12 col-xs-12">
<h4>
<span>{{ this.name }}</span>
</h4>
<h5>
<span style="vertical-align:-30%" >{{ this.name }}</span>
</h5>
</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"/>
<h4 v-if="isEditMode" class="pull-right"><em>Modification de la règle</em></h4>
<input v-else @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 v-show="!isEditMode" class="row">
<div class="col-md-12">
<span v-html="printRulePath"></span>
</div>
</div>
</div>
<div v-show="!isEditMode">
<!-- the demo root element -->
<ul id="demo">
<TreeItem class="item" :item="this.ruleTree"></TreeItem>
<ul>
<TreeItem class="item" :item="this.ruleTree" :rootElement="true" :rulePath="this.rulePath"></TreeItem>
</ul>
</div>
<div v-show="isEditMode">
<!-- rule-editor ref="editor" :rawRule="ruleToEdit"></rule-editor -->
<div class="container">
<div class="row mb-3">
<label for="comment" class="mb-2"><u>Résumé de la modification</u></label>
......@@ -58,7 +61,7 @@
components: {
TreeItem,
},
props: ['name', 'data'],
props: ['name', 'data', 'printRulePath', 'rulePath'],
data: function(){
return {
ruleData: this.data,
......@@ -106,7 +109,7 @@
});
},
toTree: function (lines) { // eslint-disable-line no-unused-vars
var root= new Node('Règle');
var root= new Node(this.name.split('.')[0]);
var currentIndent=-1;
var currentNode=root;
// we scan the rules line by line
......@@ -147,57 +150,4 @@
}
</script>
<style scoped>
pre strong {
font-family: 'mono';
font-weight: bold;
}
pre .comment {
font-family: 'mono';
font-style: italic;
color: #666;
}
pre .keyword {
font-family: 'mono';
font-weight: 600;
}
pre .constant {
font-family: 'mono';
font-weight: 600;
text-decoration: underline dotted;
cursor: help;
}
pre a,
pre .string,
pre .number {
font-family: 'mono';
font-weight: 600;
}
pre code {
display: block;
padding-left: 1em;
font-family: mono;
}
a.line {
display: none;
}
:scope.with-lines a.line {
display: inline-block;
background-color: #ddd;
cursor: pointer;
text-align: center;
vertical-align: middle;
}
:scope.with-lines a:target, :scope.with-lines a:target + code {
font-weight: bold;
background-color: #ccc;
}
:scope.with-lines pre {
display: grid;
grid-template-columns: 2em auto;
}
.tooltip .tooltip-content:after {
/* Why? */
bottom: -27px;
}
</style>
......@@ -2,18 +2,22 @@
<li>
<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 v-if="!rootElement">
<span>{{ item.name }}</span>
<span class="btn btn-outline-info pull-right" style="width:5%"><strong>{{ isOpen ? '-' : '+' }}</strong></span>
</div>
</div>
<span v-else v-html="transform(item.name)"></span>
<span v-else v-html="transform(item.name)" class="text-muted"></span>
</div>
<hr class="">
<ul v-show="isOpen" v-if="isFolder">
<hr v-show="!rootElement">