Switched feel-editor.vue to v-model

materna-se · Apr 24, 2020 · f21c4e6 · f21c4e6
1 parent 1a199c3
commit f21c4e6
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 57 deletions.
diff --git a/client/src/components/dmn/feel-editor.vue b/client/src/components/dmn/feel-editor.vue
@@ -21,12 +21,17 @@
 		},
 		data() {
 			return {
-				editor: null
+				editor: null,
+				previousValue: null
 			}
 		},
 		watch: {
 			value: {
 				handler: function (value) {
+					if (value === this.previousValue) {
+						return;
+					}
+
 					this.editor.setValue(value);
 				},
 				deep: true
@@ -61,58 +66,58 @@
 						Function: [
 							// String
 							["substring(string, start position, length?)", "substring($1, $2, $3)"],
-								["string length(string)", "string length($1)"],
-								["upper case(string)", "upper case($1)"],
-								["lower case(string)", "lower case($1)"],
-								["substring before(string, match)", "substring before($1, $2)"],
-								["substring after(string, match)", "substring after($1, $2)"],
-								["replace(input, pattern, replacement, flags?)", "replace($1, $2, $3, $4)"],
-								["contains(string, match)", "contains($1, $2)"],
-								["starts with(string, match)", "starts with($1, $2)"],
-								["ends with(string, match)", "ends with($1, $2)"],
-								["matches(input, pattern, flags?)", "matches($1, $2, $3)"],
-								["split(string, delimiter)", "split($1, $2)"],
-
-								// List
-								["list contains(list, element)", "list contains($1, $2)"],
-								["count(list)", "count($1)"],
-								["min(list)", "min($1)"],
-								["max(list)", "max($1)"],
-								["sum(list)", "sum($1)"],
-								["mean(list)", "mean($1)"],
-								["and(list)", "and($1)"],
-								["or(list)", "or($1)"],
-								["sublist(list, start position, length?)", "sublist($1, $2, $3)"],
-								["append(list, item...)", "append($1, $2)"],
-								["concatenate(list...)", "concatenate($1)"],
-								["insert before(list, position, newItem)", "insert before($1, $2, $3)"],
-								["remove(list, position)", "remove($1, $2)"],
-								["reverse(list)", "remove($1)"],
-								["index of(list, match)", "index of($1, $2)"],
-								["union(list...)", "union($1)"],
-								["distinct values(list)", "distinct values($1)"],
-								["flatten(list)", "flatten($1)"],
-								["product(list)", "product($1)"],
-								["median(list)", "median($1)"],
-								["stddev(list)", "stddev($1)"],
-								["mode(list)", "mode($1)"],
-
-								// Number
-								["decimal(n, scale)", "decimal($1, $2)"],
-								["floor(n)", "floor($1)"],
-								["ceiling(n)", "ceiling($1)"],
-								["abs(n)", "abs($1)"],
-								["modulo(dividend, divisor)", "modulo($1, $2)"],
-								["sqrt(number)", "sqrt($1)"],
-								["log(number)", "log($1)"],
-								["exp(number)", "exp($1)"],
-								["odd(number)", "odd($1)"],
-								["even(number)", "even($1)"],
-
-								// Boolean
-								["not(negand)", "not($1)"],
-							]
-						};
+							["string length(string)", "string length($1)"],
+							["upper case(string)", "upper case($1)"],
+							["lower case(string)", "lower case($1)"],
+							["substring before(string, match)", "substring before($1, $2)"],
+							["substring after(string, match)", "substring after($1, $2)"],
+							["replace(input, pattern, replacement, flags?)", "replace($1, $2, $3, $4)"],
+							["contains(string, match)", "contains($1, $2)"],
+							["starts with(string, match)", "starts with($1, $2)"],
+							["ends with(string, match)", "ends with($1, $2)"],
+							["matches(input, pattern, flags?)", "matches($1, $2, $3)"],
+							["split(string, delimiter)", "split($1, $2)"],
+
+							// List
+							["list contains(list, element)", "list contains($1, $2)"],
+							["count(list)", "count($1)"],
+							["min(list)", "min($1)"],
+							["max(list)", "max($1)"],
+							["sum(list)", "sum($1)"],
+							["mean(list)", "mean($1)"],
+							["and(list)", "and($1)"],
+							["or(list)", "or($1)"],
+							["sublist(list, start position, length?)", "sublist($1, $2, $3)"],
+							["append(list, item...)", "append($1, $2)"],
+							["concatenate(list...)", "concatenate($1)"],
+							["insert before(list, position, newItem)", "insert before($1, $2, $3)"],
+							["remove(list, position)", "remove($1, $2)"],
+							["reverse(list)", "remove($1)"],
+							["index of(list, match)", "index of($1, $2)"],
+							["union(list...)", "union($1)"],
+							["distinct values(list)", "distinct values($1)"],
+							["flatten(list)", "flatten($1)"],
+							["product(list)", "product($1)"],
+							["median(list)", "median($1)"],
+							["stddev(list)", "stddev($1)"],
+							["mode(list)", "mode($1)"],
+
+							// Number
+							["decimal(n, scale)", "decimal($1, $2)"],
+							["floor(n)", "floor($1)"],
+							["ceiling(n)", "ceiling($1)"],
+							["abs(n)", "abs($1)"],
+							["modulo(dividend, divisor)", "modulo($1, $2)"],
+							["sqrt(number)", "sqrt($1)"],
+							["log(number)", "log($1)"],
+							["exp(number)", "exp($1)"],
+							["odd(number)", "odd($1)"],
+							["even(number)", "even($1)"],
+
+							// Boolean
+							["not(negand)", "not($1)"],
+						]
+					};
 					for (const key in suggestionTypes) {
 						for (const suggestion of suggestionTypes[key]) {
 							suggestions.push({
@@ -170,7 +175,9 @@
 			this.editor = editor;
 
 			editor.onKeyUp(function () {
-				vue.$emit('update:value', editor.getValue());
+				const value = editor.getValue();
+				vue.previousValue = value;
+				vue.$emit('input', value);
 			});
 		}
 	}

diff --git a/client/src/views/challenges.vue b/client/src/views/challenges.vue
@@ -22,7 +22,7 @@
 
 						<div class="card">
 							<div class="card-body">
-								<feel-editor v-on:update:value="expression = $event; executeRaw();"/>
+								<feel-editor v-model="expression" v-on:input="executeRaw"/>
 							</div>
 						</div>
 					</div>

diff --git a/client/src/views/discoverer.vue b/client/src/views/discoverer.vue
@@ -16,7 +16,7 @@
 				<h5 class="mb-2">Values</h5>
 				<div class="card mb-4">
 					<div class="card-body">
-						<feel-editor v-bind:value="options.expression" v-on:update:value="options.expression = $event; startDebouncedDiscovery()"/>
+						<feel-editor v-model="options.expression" v-on:input="startDebouncedDiscovery"/>
 					</div>
 				</div>
 

diff --git a/client/src/views/playground.vue b/client/src/views/playground.vue
@@ -48,7 +48,7 @@
 				<h3 class="mb-2">Expression</h3>
 				<div class="card">
 					<div class="card-body">
-						<feel-editor v-bind:value="playground.expression" v-on:update:value="playground.expression = $event; executeRaw();"/>
+						<feel-editor v-model="playground.expression" v-on:input="executeRaw"/>
 					</div>
 				</div>
 			</div>