Pattern editing

src/App.vue

@@ -143,6 +143,7 @@
 							break;
 						}
 						case 'FINISH_LOOKBACK': {
+							console.debug('Lookback completed');
 							this.$bvToast.toast(`Lookback completed`, {
 								title: 'Notification',
 								variant: 'success',

src/components/PatternsDropdown.vue

@@ -30,6 +30,12 @@
 			<template v-else>of service {{ getServiceName(pattern.serviceId) }} #{{ pattern.serviceId }}</template>
 
 			<div class="float-right" style="margin-left: 2em;">
+				<button type="button" class="btn btn-outline-info btn-sm mr-1"
+								@click.stop.prevent="showEditPattern(pattern)"
+								title="Edit pattern">
+					<i class="fas fa-edit"></i>
+				</button>
+
 				<button v-if="pattern.actionType === 'FIND'" type="button" class="btn btn-outline-warning btn-sm mr-1"
 								@click.stop.prevent="showLookBack(pattern)"
 								title="Apply pattern to older streams">
@@ -55,7 +61,7 @@
 			</div>
 		</b-dropdown-item-button>
 
-		<AddPattern :creating="patternModalIsCreating" :initial-pattern="patternModalEditingPattern" />
+		<PatternModal :creating="patternModalIsCreating" :initial-pattern="patternModalEditingPattern" />
 	</b-dropdown>
 </template>
 <!--suppress JSUnresolvedReference -->
@@ -64,7 +70,7 @@
 
 	export default {
 		name: 'PatternsDropdown',
-		components: {AddPattern: PatternModal, },
+		components: {PatternModal: PatternModal, },
 		data() {
 			return {
 				patternModalIsCreating: true,
@@ -99,7 +105,16 @@
 				this.patternModalIsCreating = true;
 				this.patternModalEditingPattern = {};
 				this.$bvModal.show('patternModal');
-				console.debug('Showing patternModal...');
+				console.debug('Showing patternModal (create)');
+			},
+			showEditPattern(pattern) {
+				this.patternModalIsCreating = false;
+				this.patternModalEditingPattern = {};
+				this.$nextTick(() => {
+					this.patternModalEditingPattern = pattern;
+					this.$bvModal.show('patternModal');
+					console.debug('Showing patternModal (edit)');
+				});
 			},
 			showLookBack(pattern) {
 				// Не знаю, как сделать это без костылей

src/views/PatternModal.vue

@@ -14,6 +14,7 @@
 			</b-form-group>
 
 			<b-form-group
+					v-if="creating"
 					label-cols-sm="4"
 					label-cols-lg="3"
 					label="Pattern"
@@ -25,6 +26,7 @@
 			</b-form-group>
 
       <b-form-group
+					v-if="creating"
           label-cols-sm="4"
           label-cols-lg="3"
           label="Search action"
@@ -46,6 +48,7 @@
 			</b-form-group>
 
 			<b-form-group
+					v-if="creating"
 					label-cols-sm="4"
 					label-cols-lg="3"
 					label="Search method"
@@ -59,6 +62,7 @@
 			</b-form-group>
 
 			<b-form-group
+					v-if="creating"
 					label-cols-sm="4"
 					label-cols-lg="3"
 					label="Search type"
@@ -72,6 +76,7 @@
 			</b-form-group>
 
 			<b-form-group
+					v-if="creating"
 					label-cols-sm="4"
 					label-cols-lg="3"
 					label="Service"
@@ -98,7 +103,7 @@ const defaultPattern = {
 };
 
 	export default {
-		name: 'AddPattern',
+		name: 'PatternModal',
 		props: {
 			creating: Boolean,
 
@@ -158,14 +163,7 @@ const defaultPattern = {
 			},
 
 			reset() {
-				this.newPattern = {
-					name: '',
-					value: '',
-					color: '#FF7474',
-					searchType: 'SUBSTRING',
-					directionType: 'BOTH',
-          actionType: 'FIND',
-				};
+				this.newPattern = {...defaultPattern,};
 			},
 
 			addPattern(ev) {
@@ -174,16 +172,23 @@ const defaultPattern = {
 					console.debug('Form is invalid');
 					return;
 				}
-				console.debug('Adding pattern...', this.newPattern);
+				console.debug('Adding/editing pattern...', this.newPattern);
 
 				if (this.newPattern.searchType === 'SUBBYTES') {
 					this.newPattern.value = this.newPattern.value.replace(/\s+/g, '').toLowerCase();
 				}
 
-				this.$http.post('pattern/', this.newPattern)
+				let url;
+				if (this.creating) {
+					url = 'pattern/'
+				} else {
+					url = 'pattern/' + this.newPattern.id
+				}
+
+				this.$http.post(url, this.newPattern)
 					.then(response => {
 						const data = response.data;
-						console.debug('Done adding pattern', data);
+						console.debug('Done adding/editing pattern', data);
 						this.$emit('patternAddComplete');
 						this.reset();
 						this.$bvModal.hide('patternModal');