[frontend] Add trigger and badword functionality

kibicara-frontend/src/app/auth/login/login.component.ts

@@ -37,7 +37,7 @@ export class LoginComponent implements OnInit {
       this.route.snapshot.queryParams['returnUrl'] || '/dashboard';
 
     if (this.route.snapshot.queryParams['registered'] === true) {
-      this.info = 'Registration infoful';
+      this.info = 'Registration successful';
     }
   }
 

kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.html

@@ -1,11 +1,23 @@
 <mat-card>
   <mat-card-title>Badwords</mat-card-title>
   <mat-card-subtitle
-    >Discards an incoming message that matches the pattern (spam-protection, insult-filtering)</mat-card-subtitle
+    >Discards an incoming message that matches the pattern (spam-protection,
+    insult-filtering)</mat-card-subtitle
   >
   <mat-card-content>
+    <form class="input" [formGroup]="regexForm" (ngSubmit)="onSubmit()">
+      <mat-form-field>
+        <mat-label>Add badword</mat-label>
+        <input formControlName="regex" matInput />
+        <mat-error *ngIf="regexForm.invalid">Invalid regex</mat-error>
+      </mat-form-field>
+      <button mat-icon-button color="primary" aria-label="Add" class="button">
+        <mat-icon>add</mat-icon>
+      </button>
+    </form>
     <ng-container *ngIf="badwords$ | async as badwords">
       <mat-list *ngIf="badwords.length !== 0; else empty">
+        <mat-divider></mat-divider>
         <mat-list-item *ngFor="let badword of badwords">
           <div class="entry">
             <div class="regex">
@@ -16,6 +28,7 @@
               color="primary"
               aria-label="Edit"
               class="button"
+              (click)="onEdit(badword.id)"
             >
               <mat-icon>edit</mat-icon>
             </button>
@@ -24,6 +37,7 @@
               color="warn"
               aria-label="Delete"
               class="button"
+              (click)="onDelete(badword.id)"
             >
               <mat-icon>delete</mat-icon>
             </button>

kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.scss

@@ -1,20 +1,31 @@
 .entry {
-    display: grid;
+  display: grid;
-    grid-template-columns: 4fr 50px 50px;
+  grid-template-columns: 4fr 50px 50px;
-    width: 100%;
+  width: 100%;
+}
+
+.input {
+  display: grid;
+  grid-template-columns: 4fr 50px;
+  width: 100%;
+  margin: 10px;
+}
+
+.mat-form-field {
+  width: 100%;
 }
 
 .regex {
-    margin: 5px;
+  margin: 5px;
-    margin-top: 10px;
+  margin-top: 10px;
-    font-size: medium;
+  font-size: medium;
 }
 
 .button {
-    align-self: stretch;
+  align-self: stretch;
 }
 
 .error-msg {
-    display: flex;
+  display: flex;
-    font-style: italic;
+  font-style: italic;
-}
+}

kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { BadwordsService, BodyBadWord } from 'src/app/core/api';
 import { Observable } from 'rxjs';
+import { FormGroup, Validators, FormBuilder } from '@angular/forms';
+import { first } from 'rxjs/operators';
 
 @Component({
   selector: 'app-badwords',
@@ -10,10 +12,51 @@ import { Observable } from 'rxjs';
 export class BadwordsComponent implements OnInit {
   @Input() hoodId;
   badwords$: Observable<Array<any>>;
+  regexForm: FormGroup;
 
-  constructor(private badwordService: BadwordsService) {}
+  constructor(
+    private badwordService: BadwordsService,
+    private formBuilder: FormBuilder
+  ) {}
 
   ngOnInit(): void {
+    this.reload();
+    this.regexForm = this.formBuilder.group({
+      regex: ['', Validators.required],
+    });
+  }
+
+  private reload() {
     this.badwords$ = this.badwordService.getBadwords(this.hoodId);
   }
+
+  onEdit(triggerId) {}
+
+  onDelete(triggerId) {
+    this.badwordService.deleteBadword(triggerId, this.hoodId).subscribe(() => {
+      this.reload();
+    });
+  }
+
+  onSubmit() {
+    if (this.regexForm.invalid) {
+      return;
+    }
+
+    this.badwordService
+      .createBadword(this.hoodId, {
+        pattern: this.regexForm.controls.regex.value,
+      })
+      .pipe(first())
+      .subscribe(
+        (data) => {
+          this.regexForm.reset();
+          this.reload();
+        },
+        (error) => {
+          console.log(error);
+          this.regexForm.controls['regex'].setErrors({ incorrect: true });
+        }
+      );
+  }
 }

kibicara-frontend/src/app/dashboard/board/hoodsettings/hoodsettings.component.scss

@@ -14,6 +14,6 @@
 }
 
 .explanation {
-  margin-top: 10px;
+  margin-top: 20px;
-  margin-bottom: 10px;
+  margin-bottom: 20px;
 }

kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.html

@@ -1,12 +1,23 @@
 <mat-card>
   <mat-card-title>Triggers</mat-card-title>
   <mat-card-subtitle
-    >Only shares an incoming message if it matches a pattern (topic-setting). <br />
+    >Only shares an incoming message if it matches a pattern (topic-setting).
     <strong>Add at least one trigger!</strong></mat-card-subtitle
   >
   <mat-card-content>
+    <form class="input" [formGroup]="regexForm" (ngSubmit)="onSubmit()">
+      <mat-form-field>
+        <mat-label>Add trigger</mat-label>
+        <input formControlName="regex" matInput />
+        <mat-error *ngIf="regexForm.invalid">Invalid regex</mat-error>
+      </mat-form-field>
+      <button mat-icon-button color="primary" aria-label="Add" class="button">
+        <mat-icon>add</mat-icon>
+      </button>
+    </form>
     <ng-container *ngIf="triggers$ | async as triggers">
       <mat-list *ngIf="triggers.length !== 0; else empty">
+        <mat-divider></mat-divider>
         <mat-list-item *ngFor="let trigger of triggers">
           <div class="entry">
             <div class="regex">
@@ -17,6 +28,7 @@
               color="primary"
               aria-label="Edit"
               class="button"
+              (click)="onEdit(trigger.id)"
             >
               <mat-icon>edit</mat-icon>
             </button>
@@ -25,6 +37,7 @@
               color="warn"
               aria-label="Delete"
               class="button"
+              (click)="onDelete(trigger.id)"
             >
               <mat-icon>delete</mat-icon>
             </button>

kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.scss

@@ -1,20 +1,31 @@
 .entry {
-    display: grid;
+  display: grid;
-    grid-template-columns: 4fr 50px 50px;
+  grid-template-columns: 4fr 50px 50px;
-    width: 100%;
+  width: 100%;
+}
+
+.input {
+  display: grid;
+  grid-template-columns: 4fr 50px;
+  width: 100%;
+  margin: 10px;
+}
+
+.mat-form-field {
+  width: 100%;
 }
 
 .regex {
-    margin: 5px;
+  margin: 5px;
-    margin-top: 10px;
+  margin-top: 10px;
-    font-size: medium;
+  font-size: medium;
 }
 
 .button {
-    align-self: stretch;
+  align-self: stretch;
 }
 
 .error-msg {
-    display: flex;
+  display: flex;
-    font-style: italic;
+  font-style: italic;
-}
+}

kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.ts

@@ -1,6 +1,10 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { TriggersService, BodyTrigger } from 'src/app/core/api';
 import { Observable } from 'rxjs';
+import { ResourceLoader } from '@angular/compiler';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { first } from 'rxjs/operators';
+import { invalid } from '@angular/compiler/src/render3/view/util';
 
 @Component({
   selector: 'app-trigger',
@@ -10,10 +14,51 @@ import { Observable } from 'rxjs';
 export class TriggerComponent implements OnInit {
   @Input() hoodId: number;
   triggers$: Observable<Array<any>>;
+  regexForm: FormGroup;
 
-  constructor(private triggersService: TriggersService) {}
+  constructor(
+    private triggersService: TriggersService,
+    private formBuilder: FormBuilder
+  ) {}
 
   ngOnInit(): void {
+    this.reload();
+    this.regexForm = this.formBuilder.group({
+      regex: ['', Validators.required],
+    });
+  }
+
+  private reload() {
     this.triggers$ = this.triggersService.getTriggers(this.hoodId);
   }
+
+  onEdit(triggerId) {}
+
+  onDelete(triggerId) {
+    this.triggersService.deleteTrigger(triggerId, this.hoodId).subscribe(() => {
+      this.reload();
+    });
+  }
+
+  onSubmit() {
+    if (this.regexForm.invalid) {
+      return;
+    }
+
+    this.triggersService
+      .createTrigger(this.hoodId, {
+        pattern: this.regexForm.controls.regex.value,
+      })
+      .pipe(first())
+      .subscribe(
+        (data) => {
+          this.regexForm.reset();
+          this.reload();
+        },
+        (error) => {
+          console.log(error);
+          this.regexForm.controls['regex'].setErrors({ incorrect: true });
+        }
+      );
+  }
 }

kibicara-frontend/src/app/shared/material/material.module.ts

@@ -7,6 +7,7 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { MatCardModule } from '@angular/material/card';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatListModule } from '@angular/material/list';
+import { MatInputModule } from '@angular/material/input';
 
 @NgModule({
   declarations: [],
@@ -19,6 +20,7 @@ import { MatListModule } from '@angular/material/list';
     MatCardModule,
     MatExpansionModule,
     MatListModule,
+    MatInputModule,
   ],
   exports: [
     MatButtonModule,
@@ -29,6 +31,7 @@ import { MatListModule } from '@angular/material/list';
     MatCardModule,
     MatExpansionModule,
     MatListModule,
+    MatInputModule,
   ],
 })
 export class MaterialModule {}

kibicara-frontend/src/app/shared/shared.module.ts

@@ -2,10 +2,16 @@ import { NgModule } from '@angular/core';
 import { ToolbarComponent } from './toolbar/toolbar.component';
 import { MaterialModule } from './material/material.module';
 import { NotFoundComponent } from './not-found/not-found.component';
+import { ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [ToolbarComponent, NotFoundComponent],
-  imports: [MaterialModule],
+  imports: [MaterialModule, ReactiveFormsModule],
-  exports: [ToolbarComponent, NotFoundComponent, MaterialModule],
+  exports: [
+    ToolbarComponent,
+    NotFoundComponent,
+    MaterialModule,
+    ReactiveFormsModule,
+  ],
 })
 export class SharedModule {}