Skip to content
This repository has been archived by the owner on Oct 17, 2024. It is now read-only.

Add latest ruleset page #98

Merged
merged 4 commits into from
Apr 9, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 4 additions & 16 deletions ui/app/src/components/Sidebar.vue
Original file line number Diff line number Diff line change
@@ -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)"
Expand All @@ -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>
Expand Down Expand Up @@ -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}` } });
},
},
};
Expand Down
1 change: 1 addition & 0 deletions ui/app/src/router.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
113 changes: 111 additions & 2 deletions ui/app/src/views/LatestRuleset/LatestRuleset.vue
Original file line number Diff line number Diff line change
@@ -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 {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because JS, and particularly Vue, is not our "normal" work, I think we should try to be especially diligent about adding comments / docstrings to methods. What seems obvious today, might be obscure in a months time.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree but for this one I think that it's not necessary to add comment.
The data property is the main important things to know in Vue, it's for that reason that I didn't add comment, for example, it's like adding comment on top of the main function in a Go program.

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>
94 changes: 34 additions & 60 deletions ui/app/src/views/NewRuleset/Rules.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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'"
Expand All @@ -46,6 +31,7 @@
label="Result"
required
v-model="rule.returnValue"
:disabled="editorOptions.readOnly"
></v-text-field>
<v-textarea
box
Expand All @@ -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>
Expand All @@ -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':
Expand Down
6 changes: 5 additions & 1 deletion ui/app/src/views/NewRuleset/ruleset.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down