Merge pull request #98 from heetch/ui/consult-latest-page

Add latest ruleset page
heetch · Apr 9, 2019 · 4420555 · 4420555
2 parents b79b8ed + 159e7c2
commit 4420555
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 79 deletions.
diff --git 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(`/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
@@ -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
@@ -1,4 +1,113 @@
 <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({
+        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'],
+      }),
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+#consult {
+  .height-card {
+    height: 200px;
+  }
+
+  .scroll {
+    overflow-y: auto;
+  }
+
+  .rounded-card {
+    border-radius: 50px;
+  }
+}
+</style>
diff --git a/ui/app/src/views/NewRuleset/Rules.vue b/ui/app/src/views/NewRuleset/Rules.vue
@@ -9,35 +9,20 @@
 
     <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"
               theme="tomorrow"
               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'"
@@ -46,6 +31,7 @@
               label="Result"
               required
               v-model="rule.returnValue"
+              :disabled="editorOptions.readOnly"
             ></v-text-field>
             <v-textarea
               box
@@ -54,41 +40,20 @@
               label="Result"
               required
               v-model="rule.returnValue"
+              :disabled="editorOptions.readOnly"
             ></v-textarea>
           </v-flex>
-          <v-flex
-            xs12
-            sm1
-            class="text-sm-center"
-          >
-            <v-btn
-              v-if="index == 0"
-              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"
-              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>
@@ -108,24 +73,33 @@ 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: {
+        // 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
@@ -26,10 +26,14 @@ 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;
   }
 }