From b9bed3e5fb2f3acd8af04a484ac6ce971171069d Mon Sep 17 00:00:00 2001
From: Yasss <yassine@heetch.com>
Date: Fri, 29 Mar 2019 17:39:09 +0100
Subject: [PATCH 1/4] Add latest ruleset page

---
 ui/app/src/components/Sidebar.vue             |   2 +-
 ui/app/src/router.js                          |   1 +
 .../src/views/LatestRuleset/LatestRuleset.vue | 134 +++++++++++++++++-
 ui/app/src/views/NewRuleset/Rules.vue         |  37 +++--
 ui/app/src/views/NewRuleset/ruleset.js        |   4 +-
 5 files changed, 159 insertions(+), 19 deletions(-)

diff --git a/ui/app/src/components/Sidebar.vue b/ui/app/src/components/Sidebar.vue
index 6b783c1..437d9bb 100644
--- a/ui/app/src/components/Sidebar.vue
+++ b/ui/app/src/components/Sidebar.vue
@@ -58,7 +58,7 @@ export default {
     },
 
     navigateToLatestRulesetPage(item) {
-      this.$router.push(`/rulesets/${item.path}/latest`);
+      this.$router.push({ name: 'latest-ruleset', params: { path: `${item.path}` }});
     },
   },
 };
diff --git a/ui/app/src/router.js b/ui/app/src/router.js
index 448297b..ca20c7b 100644
--- a/ui/app/src/router.js
+++ b/ui/app/src/router.js
@@ -25,6 +25,7 @@ export default new Router({
     {
       path: '/rulesets/:path/latest',
       name: 'latest-ruleset',
+      props: true,
       // route level code-splitting
       // this generates a separate chunk (latestRuleset.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
diff --git a/ui/app/src/views/LatestRuleset/LatestRuleset.vue b/ui/app/src/views/LatestRuleset/LatestRuleset.vue
index f1db407..786d02f 100644
--- a/ui/app/src/views/LatestRuleset/LatestRuleset.vue
+++ b/ui/app/src/views/LatestRuleset/LatestRuleset.vue
@@ -1,4 +1,134 @@
 <template>
-  <div>
-  </div>
+  <v-container id="consult">
+    <h1>{{path}}</h1>
+
+    <v-layout>
+      <v-flex md2 mt-5>
+        <v-toolbar color="grey" dark>
+          <v-toolbar-title>Parameters</v-toolbar-title>
+        </v-toolbar>
+        <v-card class="height-card scroll">
+          <v-card-text v-for="param in ruleset.signature.params" :key="param.name">{{param.name}}: {{param.type}}</v-card-text>
+        </v-card>
+      </v-flex>
+
+      <v-flex md2 ma-5>
+        <v-toolbar color="grey" dark>
+          <v-toolbar-title>Return type</v-toolbar-title>
+        </v-toolbar>
+        <v-card class="height-card">
+          <v-card-text>{{ruleset.signature.returnType}}</v-card-text>
+        </v-card>
+      </v-flex>
+
+      <v-flex md2 ma-5>
+        <v-toolbar color="grey" dark>
+          <v-toolbar-title>Versions</v-toolbar-title>
+        </v-toolbar>
+        <v-card class="height-card scroll">
+          <v-card-text v-for="version in ruleset.versions" :key="version">{{version}}</v-card-text>
+        </v-card>
+      </v-flex>
+
+      <v-flex md3></v-flex>
+
+      <v-flex md3 mt-5>
+        <!-- change the link to edit page -->
+        <router-link to="/rulesets/new">
+          <v-btn
+            dark
+            color="primary"
+          >
+            Edit
+          </v-btn>
+        </router-link>
+      </v-flex>
+
+    </v-layout>
+
+    <!-- delegate rules to Rules component -->
+    <Rules v-model="ruleset" :editMode="false" />
+  </v-container>
 </template>
+
+<script>
+import axios from 'axios';
+import { Ruleset, Rule, Signature, Param } from '../NewRuleset/ruleset';
+import Rules from '../NewRuleset/Rules.vue';
+
+export default {
+  components: {
+    Rules,
+  },
+
+  props: {
+    path: {
+      type: String,
+    }
+  },
+
+  data() {
+    return {
+      ruleset: new Ruleset({}),
+    }
+  },
+
+  mounted() {
+    this.fetchRuleset();
+  },
+
+  methods: {
+    fetchRuleset() {
+      axios
+        .get('/ui/i/rulesets/'+this.path)
+        .then(({ data = {} }) => {
+          this.ruleset = new Ruleset({
+            path: this.path,
+            signature: new Signature(
+              "string",
+              [
+                new Param("foo", "string"),
+                new Param("bar", "int64"),
+                new Param("baz", "float64"),
+                new Param("baz1", "float64"),
+                new Param("baz2", "float64"),
+                new Param("baz3", "float64"),
+                new Param("baz4", "float64"),
+              ]
+            ),
+            rules: [
+              new Rule(`(and
+                (eq 1 1)
+                (eq 2 2)
+              )`, "wesh"),
+              new Rule("#true", "bien"),
+            ],
+            version: 'abc123',
+            versions: [
+              'def123',
+              'ghi123',
+              'xyz123',
+            ]
+          })
+        })
+        .catch(console.error);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#consult {
+  .height-card {
+    height: 200px;
+  }
+
+  .scroll {
+      overflow-y: auto;
+  }
+
+  .rounded-card {
+    border-radius:50px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/ui/app/src/views/NewRuleset/Rules.vue b/ui/app/src/views/NewRuleset/Rules.vue
index 369525a..f515d40 100644
--- a/ui/app/src/views/NewRuleset/Rules.vue
+++ b/ui/app/src/views/NewRuleset/Rules.vue
@@ -62,7 +62,7 @@
             class="text-sm-center"
           >
             <v-btn
-              v-if="index == 0"
+              v-if="index == 0 && editMode"
               small
               fab
               color="error"
@@ -71,7 +71,7 @@
               <v-icon dark>mdi-minus</v-icon>
             </v-btn>
             <v-btn
-              v-if="index > 0"
+              v-if="index > 0 && editMode"
               small
               fab
               color="error"
@@ -108,21 +108,28 @@ export default {
 
   props: {
     value: Ruleset,
+    editMode: {
+      type: Boolean,
+      default: true,
+    },
   },
 
-  data: () => ({
-    // validation rules for S-Expressions. Only check if they're not empty.
-    codeRules: [v => !!v || 'Code is required'],
-    // validation rules for return values. Only check if thery're not empty.
-    resultsRules: [v => !!v || 'Result is required'],
-    // editor customization
-    editorOptions: {
-      showGutter: false,
-      showLineNumbers: false,
-      highlightActiveLine: false,
-      fontSize: '1.5em',
-    },
-  }),
+  data() {
+    return {
+      // validation rules for S-Expressions. Only check if they're not empty.
+      codeRules: [v => !!v || 'Code is required'],
+      // validation rules for return values. Only check if thery're not empty.
+      resultsRules: [v => !!v || 'Result is required'],
+      // editor customization
+      editorOptions: {
+        readOnly: !this.editMode, // true: disable the edit when used from the LatestRuleset component
+        showGutter: false,
+        showLineNumbers: false,
+        highlightActiveLine: false,
+        fontSize: '1.5em',
+      },
+    }
+  },
 
   computed: {
     // select the right input type based on the selected ruleset return type. JSON is handled separately in the component html.
diff --git a/ui/app/src/views/NewRuleset/ruleset.js b/ui/app/src/views/NewRuleset/ruleset.js
index 13561d1..d011830 100644
--- a/ui/app/src/views/NewRuleset/ruleset.js
+++ b/ui/app/src/views/NewRuleset/ruleset.js
@@ -26,10 +26,12 @@ class Signature {
 
 // Describes the ruleset payload sent to the server when creating a ruleset.
 class Ruleset {
-  constructor({ path = '', signature = new Signature(), rules = [] }) {
+  constructor({ path = '', signature = new Signature(), rules = [], version = '', versions = [] }) {
     this.path = path;
     this.signature = signature;
     this.rules = rules;
+    this.version = version;
+    this.versions = versions;
   }
 }
 

From 1c852156ccbeab048acbf5cfc85748278381637c Mon Sep 17 00:00:00 2001
From: Yasss <yassine@heetch.com>
Date: Mon, 1 Apr 2019 12:35:02 +0200
Subject: [PATCH 2/4] Fix minor things

---
 .../src/views/LatestRuleset/LatestRuleset.vue | 28 +++----------------
 1 file changed, 4 insertions(+), 24 deletions(-)

diff --git a/ui/app/src/views/LatestRuleset/LatestRuleset.vue b/ui/app/src/views/LatestRuleset/LatestRuleset.vue
index 786d02f..a8f3ad0 100644
--- a/ui/app/src/views/LatestRuleset/LatestRuleset.vue
+++ b/ui/app/src/views/LatestRuleset/LatestRuleset.vue
@@ -35,12 +35,7 @@
       <v-flex md3 mt-5>
         <!-- change the link to edit page -->
         <router-link to="/rulesets/new">
-          <v-btn
-            dark
-            color="primary"
-          >
-            Edit
-          </v-btn>
+          <v-btn dark color="primary">Edit</v-btn>
         </router-link>
       </v-flex>
 
@@ -69,20 +64,7 @@ export default {
 
   data() {
     return {
-      ruleset: new Ruleset({}),
-    }
-  },
-
-  mounted() {
-    this.fetchRuleset();
-  },
-
-  methods: {
-    fetchRuleset() {
-      axios
-        .get('/ui/i/rulesets/'+this.path)
-        .then(({ data = {} }) => {
-          this.ruleset = new Ruleset({
+      ruleset: new Ruleset({
             path: this.path,
             signature: new Signature(
               "string",
@@ -109,11 +91,9 @@ export default {
               'ghi123',
               'xyz123',
             ]
-          })
-        })
-        .catch(console.error);
+          }),
     }
-  }
+  },
 }
 </script>
 

From badddef3ade9c9fb503a76b46e0de41a0fab57c4 Mon Sep 17 00:00:00 2001
From: Yasss <yassine@heetch.com>
Date: Mon, 1 Apr 2019 14:43:22 +0200
Subject: [PATCH 3/4] Disable ruleset return value textarea when consulting

---
 ui/app/src/views/NewRuleset/Rules.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ui/app/src/views/NewRuleset/Rules.vue b/ui/app/src/views/NewRuleset/Rules.vue
index f515d40..72745b9 100644
--- a/ui/app/src/views/NewRuleset/Rules.vue
+++ b/ui/app/src/views/NewRuleset/Rules.vue
@@ -46,6 +46,7 @@
               label="Result"
               required
               v-model="rule.returnValue"
+              :disabled="editorOptions.readOnly"
             ></v-text-field>
             <v-textarea
               box
@@ -54,6 +55,7 @@
               label="Result"
               required
               v-model="rule.returnValue"
+              :disabled="editorOptions.readOnly"
             ></v-textarea>
           </v-flex>
           <v-flex

From 159e7c2e8f8316954996326aad88339860335933 Mon Sep 17 00:00:00 2001
From: Yasss <yassine@heetch.com>
Date: Tue, 9 Apr 2019 10:23:01 +0200
Subject: [PATCH 4/4] Fix eslint errors

---
 ui/app/src/components/Sidebar.vue             | 20 ++----
 .../src/views/LatestRuleset/LatestRuleset.vue | 69 +++++++++----------
 ui/app/src/views/NewRuleset/Rules.vue         | 63 ++++-------------
 ui/app/src/views/NewRuleset/ruleset.js        |  4 +-
 4 files changed, 55 insertions(+), 101 deletions(-)

diff --git a/ui/app/src/components/Sidebar.vue b/ui/app/src/components/Sidebar.vue
index 437d9bb..751f2ad 100644
--- a/ui/app/src/components/Sidebar.vue
+++ b/ui/app/src/components/Sidebar.vue
@@ -1,15 +1,7 @@
 <template>
   <div id="sidebar">
-    <v-treeview
-      v-model="tree"
-      :items="items"
-      item-key="name"
-      open-on-click
-    >
-      <template
-        slot="label"
-        slot-scope="{ item }"
-      >
+    <v-treeview v-model="tree" :items="items" item-key="name" open-on-click>
+      <template slot="label" slot-scope="{ item }">
         <div
           class="v-treeview-node__label"
           @click="item.path && navigateToLatestRulesetPage(item)"
@@ -18,11 +10,7 @@
     </v-treeview>
     <div class="new-ruleset mt-5">
       <router-link to="/rulesets/new">
-        <v-btn
-          fab
-          dark
-          color="primary"
-        >
+        <v-btn fab dark color="primary">
           <v-icon dark>mdi-plus</v-icon>
         </v-btn>
       </router-link>
@@ -58,7 +46,7 @@ export default {
     },
 
     navigateToLatestRulesetPage(item) {
-      this.$router.push({ name: 'latest-ruleset', params: { path: `${item.path}` }});
+      this.$router.push({ name: 'latest-ruleset', params: { path: `${item.path}` } });
     },
   },
 };
diff --git a/ui/app/src/views/LatestRuleset/LatestRuleset.vue b/ui/app/src/views/LatestRuleset/LatestRuleset.vue
index a8f3ad0..1f13112 100644
--- a/ui/app/src/views/LatestRuleset/LatestRuleset.vue
+++ b/ui/app/src/views/LatestRuleset/LatestRuleset.vue
@@ -8,7 +8,10 @@
           <v-toolbar-title>Parameters</v-toolbar-title>
         </v-toolbar>
         <v-card class="height-card scroll">
-          <v-card-text v-for="param in ruleset.signature.params" :key="param.name">{{param.name}}: {{param.type}}</v-card-text>
+          <v-card-text
+            v-for="param in ruleset.signature.params"
+            :key="param.name"
+          >{{param.name}}: {{param.type}}</v-card-text>
         </v-card>
       </v-flex>
 
@@ -38,16 +41,15 @@
           <v-btn dark color="primary">Edit</v-btn>
         </router-link>
       </v-flex>
-
     </v-layout>
 
     <!-- delegate rules to Rules component -->
-    <Rules v-model="ruleset" :editMode="false" />
+    <Rules v-model="ruleset" :editMode="false"/>
   </v-container>
 </template>
 
 <script>
-import axios from 'axios';
+// import axios from 'axios';
 import { Ruleset, Rule, Signature, Param } from '../NewRuleset/ruleset';
 import Rules from '../NewRuleset/Rules.vue';
 
@@ -59,42 +61,39 @@ export default {
   props: {
     path: {
       type: String,
-    }
+    },
   },
 
   data() {
     return {
       ruleset: new Ruleset({
-            path: this.path,
-            signature: new Signature(
-              "string",
-              [
-                new Param("foo", "string"),
-                new Param("bar", "int64"),
-                new Param("baz", "float64"),
-                new Param("baz1", "float64"),
-                new Param("baz2", "float64"),
-                new Param("baz3", "float64"),
-                new Param("baz4", "float64"),
-              ]
-            ),
-            rules: [
-              new Rule(`(and
+        path: this.path,
+        signature: new Signature('string', [
+          new Param('foo', 'string'),
+          new Param('bar', 'int64'),
+          new Param('baz', 'float64'),
+          new Param('baz1', 'float64'),
+          new Param('baz2', 'float64'),
+          new Param('baz3', 'float64'),
+          new Param('baz4', 'float64'),
+        ]),
+
+        rules: [
+          new Rule(
+            `(and
                 (eq 1 1)
                 (eq 2 2)
-              )`, "wesh"),
-              new Rule("#true", "bien"),
-            ],
-            version: 'abc123',
-            versions: [
-              'def123',
-              'ghi123',
-              'xyz123',
-            ]
-          }),
-    }
+              )`,
+            'wesh',
+          ),
+          new Rule('#true', 'bien'),
+        ],
+        version: 'abc123',
+        versions: ['def123', 'ghi123', 'xyz123'],
+      }),
+    };
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -104,11 +103,11 @@ export default {
   }
 
   .scroll {
-      overflow-y: auto;
+    overflow-y: auto;
   }
 
   .rounded-card {
-    border-radius:50px;
+    border-radius: 50px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/app/src/views/NewRuleset/Rules.vue b/ui/app/src/views/NewRuleset/Rules.vue
index 72745b9..347ad28 100644
--- a/ui/app/src/views/NewRuleset/Rules.vue
+++ b/ui/app/src/views/NewRuleset/Rules.vue
@@ -9,20 +9,10 @@
 
     <v-card-text>
       <!-- rules  -->
-      <div
-        v-for="(rule, index) in value.rules"
-        :key="index"
-      >
+      <div v-for="(rule, index) in value.rules" :key="index">
         <h3 class="subheading mb-3">Rule {{index + 1}}</h3>
-        <v-layout
-          row
-          wrap
-        >
-          <v-flex
-            xs12
-            sm7
-            class="pr-2"
-          >
+        <v-layout row wrap>
+          <v-flex xs12 sm7 class="pr-2">
             <editor
               v-model="rule.sExpr"
               lang="lisp"
@@ -30,14 +20,9 @@
               width="100%"
               height="100"
               :options="editorOptions"
-            >
-            </editor>
+            ></editor>
           </v-flex>
-          <v-flex
-            xs12
-            sm4
-            class="pr-2"
-          >
+          <v-flex xs12 sm4 class="pr-2">
             <v-text-field
               box
               v-if="value.signature.returnType !== 'JSON'"
@@ -58,39 +43,17 @@
               :disabled="editorOptions.readOnly"
             ></v-textarea>
           </v-flex>
-          <v-flex
-            xs12
-            sm1
-            class="text-sm-center"
-          >
-            <v-btn
-              v-if="index == 0 && editMode"
-              small
-              fab
-              color="error"
-              disabled
-            >
+          <v-flex xs12 sm1 class="text-sm-center">
+            <v-btn v-if="index == 0 && editMode" small fab color="error" disabled>
               <v-icon dark>mdi-minus</v-icon>
             </v-btn>
-            <v-btn
-              v-if="index > 0 && editMode"
-              small
-              fab
-              color="error"
-              @click="removeRule(index)"
-            >
+            <v-btn v-if="index > 0 && editMode" small fab color="error" @click="removeRule(index)">
               <v-icon dark>mdi-minus</v-icon>
             </v-btn>
           </v-flex>
         </v-layout>
       </div>
-      <v-btn
-        small
-        fab
-        color="secondary"
-        class="ma-0 mt-2"
-        @click="addRule"
-      >
+      <v-btn small fab color="secondary" class="ma-0 mt-2" @click="addRule">
         <v-icon dark>mdi-plus</v-icon>
       </v-btn>
     </v-card-text>
@@ -124,17 +87,19 @@ export default {
       resultsRules: [v => !!v || 'Result is required'],
       // editor customization
       editorOptions: {
-        readOnly: !this.editMode, // true: disable the edit when used from the LatestRuleset component
+        // true: disable the edit when used from the LatestRuleset component
+        readOnly: !this.editMode,
         showGutter: false,
         showLineNumbers: false,
         highlightActiveLine: false,
         fontSize: '1.5em',
       },
-    }
+    };
   },
 
   computed: {
-    // select the right input type based on the selected ruleset return type. JSON is handled separately in the component html.
+    // select the right input type based on the selected ruleset return type.
+    // JSON is handled separately in the component html.
     returnTypeInputType() {
       switch (this.value.signature.returnType) {
         case 'Int64':
diff --git a/ui/app/src/views/NewRuleset/ruleset.js b/ui/app/src/views/NewRuleset/ruleset.js
index d011830..b05d155 100644
--- a/ui/app/src/views/NewRuleset/ruleset.js
+++ b/ui/app/src/views/NewRuleset/ruleset.js
@@ -26,7 +26,9 @@ class Signature {
 
 // Describes the ruleset payload sent to the server when creating a ruleset.
 class Ruleset {
-  constructor({ path = '', signature = new Signature(), rules = [], version = '', versions = [] }) {
+  constructor({
+    path = '', signature = new Signature(), rules = [], version = '', versions = [],
+  }) {
     this.path = path;
     this.signature = signature;
     this.rules = rules;