[frontend] Add telegram wiring (add, delete)

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

@@ -6,6 +6,10 @@ import { TwitterSettingsComponent } from './twitter/twitter-settings/twitter-set
 import { EmailSettingsComponent } from './email/email-settings/email-settings.component';
 import { EmailDialogComponent } from './email/email-dialog/email-dialog.component';
 import { EmailInfoDialogComponent } from './email/email-info-dialog/email-info-dialog.component';
+import { TelegramInfoDialogComponent } from './telegram/telegram-info-dialog/telegram-info-dialog.component';
+import { TelegramDialogComponent } from './telegram/telegram-dialog/telegram-dialog.component';
+import { TwitterDialogComponent } from './twitter/twitter-dialog/twitter-dialog.component';
+import { TwitterInfoDialogComponent } from './twitter/twitter-info-dialog/twitter-info-dialog.component';
 
 @NgModule({
   declarations: [
@@ -14,6 +18,10 @@ import { EmailInfoDialogComponent } from './email/email-info-dialog/email-info-d
     EmailSettingsComponent,
     EmailDialogComponent,
     EmailInfoDialogComponent,
+    TelegramInfoDialogComponent,
+    TelegramDialogComponent,
+    TwitterDialogComponent,
+    TwitterInfoDialogComponent,
   ],
   imports: [CommonModule, SharedModule],
   exports: [

kibicara-frontend/src/app/platforms/telegram/telegram-dialog/telegram-dialog.component.html

@@ -0,0 +1,28 @@
+<h2 mat-dialog-title>Create new inbox</h2>
+
+<mat-dialog-content class="mat-typography">
+  <form class="input" [formGroup]="form">
+    <mat-form-field>
+      <mat-label>Telegram API Token</mat-label>
+      <input matInput formControlName="api_token" />
+      <mat-error
+        *ngIf="
+          form.controls.api_token.errors &&
+          form.controls.api_token.errors.required
+        "
+        >API Token is required</mat-error
+      >
+    </mat-form-field>
+    <mat-form-field>
+      <mat-label>Welcome message</mat-label>
+      <textarea matInput formControlName="welcome_message"></textarea>
+    </mat-form-field>
+  </form>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-button (click)="onCancel()">Cancel</button>
+  <button mat-button (click)="onSubmit()" cdkFocusInitial>
+    Add telegram bot
+  </button>
+</mat-dialog-actions>

kibicara-frontend/src/app/platforms/telegram/telegram-dialog/telegram-dialog.component.scss

@@ -0,0 +1,5 @@
+.input {
+  display: grid;
+  grid-template-rows: 1fr 3fr;
+  width: 100%;
+}

kibicara-frontend/src/app/platforms/telegram/telegram-dialog/telegram-dialog.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TelegramDialogComponent } from './telegram-dialog.component';
+
+describe('TelegramDialogComponent', () => {
+  let component: TelegramDialogComponent;
+  let fixture: ComponentFixture<TelegramDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TelegramDialogComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TelegramDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

kibicara-frontend/src/app/platforms/telegram/telegram-dialog/telegram-dialog.component.ts

@@ -0,0 +1,56 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { Validators, FormBuilder, FormGroup } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { TelegramService } from 'src/app/core/api';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { first } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-telegram-dialog',
+  templateUrl: './telegram-dialog.component.html',
+  styleUrls: ['./telegram-dialog.component.scss'],
+})
+export class TelegramDialogComponent implements OnInit {
+  form: FormGroup;
+
+  constructor(
+    public dialogRef: MatDialogRef<TelegramDialogComponent>,
+    private formBuilder: FormBuilder,
+    private telegramService: TelegramService,
+    private snackBar: MatSnackBar,
+    @Inject(MAT_DIALOG_DATA) public data
+  ) {}
+
+  ngOnInit(): void {
+    this.form = this.formBuilder.group({
+      api_token: ['', Validators.required],
+      welcome_message: '',
+    });
+  }
+
+  onCancel() {
+    this.dialogRef.close();
+  }
+
+  onSubmit() {
+    if (this.form.invalid) {
+      return;
+    }
+    this.telegramService
+      .createTelegram(this.data.hoodId, {
+        api_token: this.form.controls.api_token.value,
+        welcome_message: this.form.controls.welcome_message.value,
+      })
+      .pipe(first())
+      .subscribe(
+        (data) => {
+          this.dialogRef.close();
+        },
+        (error) => {
+          this.snackBar.open('Invalid API Key. Try again!', 'Close', {
+            duration: 2000,
+          });
+        }
+      );
+  }
+}

kibicara-frontend/src/app/platforms/telegram/telegram-info-dialog/telegram-info-dialog.component.html

@@ -0,0 +1,42 @@
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus arcu at
+  magna euismod sollicitudin. Vestibulum ut auctor libero. Etiam volutpat, nisl
+  sed efficitur hendrerit, nunc risus hendrerit nulla, sollicitudin malesuada
+  neque sem sed tortor. Vestibulum laoreet elementum nibh ultrices ullamcorper.
+  Sed porta gravida lectus, suscipit dictum ligula pharetra posuere. Vivamus
+  pellentesque ex eget lacus consectetur, at pulvinar est pellentesque.
+  Phasellus a elit tempor, tristique tortor auctor, maximus eros. Duis magna
+  sapien, accumsan nec massa nec, porta auctor leo. Nam nibh nisl, hendrerit nec
+  convallis in, porttitor nec sapien. Morbi in lacus convallis, elementum turpis
+  in, venenatis mi. Vestibulum bibendum rhoncus pulvinar. Sed hendrerit ipsum
+  eget varius venenatis. Maecenas consectetur felis libero, fringilla fringilla
+  justo pellentesque non. Quisque congue dictum arcu ut fermentum. Aliquam
+  egestas, lectus at mollis pulvinar, diam libero sagittis eros, a lobortis
+  neque ligula eget odio. Praesent a tortor consequat, viverra odio id, feugiat
+  sem. Mauris orci velit, molestie sit amet urna laoreet, aliquet consectetur
+  risus. Cras tristique odio nec placerat viverra. Suspendisse id pretium risus,
+  sit amet consectetur turpis. Nunc mattis, felis a iaculis varius, est nulla
+  aliquam massa, aliquet dictum ipsum est nec erat. Integer tristique tellus
+  felis, ut porttitor nisi blandit nec. Pellentesque habitant morbi tristique
+  senectus et netus et malesuada fames ac turpis egestas. Integer sagittis justo
+  ut elit gravida, vitae dignissim urna vehicula. Ut in ante non neque dignissim
+  scelerisque non id nisi. Sed sit amet posuere felis. Integer eget eros auctor,
+  ultrices arcu vel, feugiat erat. Curabitur rhoncus porta erat ut ullamcorper.
+  Duis in dictum tortor. Nam rutrum volutpat libero id interdum. Vestibulum vel
+  ante eget risus elementum iaculis eget ut mauris. Vestibulum ultrices nunc
+  quis leo venenatis, id tristique purus tempus. Fusce nec tellus dui. Nulla
+  bibendum nisi ut posuere pellentesque. Vivamus malesuada mollis dui a posuere.
+  Curabitur et lacus at augue posuere facilisis. Ut posuere orci mauris, at
+  hendrerit elit dignissim vel. Quisque vitae ipsum sed sem mattis hendrerit.
+  Pellentesque consectetur convallis consectetur. Praesent sit amet augue in dui
+  congue efficitur ac gravida metus. Sed nibh urna, facilisis at urna vitae,
+  tristique vestibulum velit. Maecenas et aliquet purus, non rutrum eros. Donec
+  maximus orci vel tortor maximus, finibus porttitor mauris convallis. Maecenas
+  eget quam vel nulla dapibus hendrerit. Vivamus malesuada neque ut elit
+  commodo, non viverra magna facilisis. Maecenas finibus ante non dui posuere,
+  sed varius leo elementum. Nullam eget vestibulum mauris. Maecenas in ipsum
+  lectus. Sed tempus at dolor sed posuere. Proin eget nulla dignissim, finibus
+  arcu eu, fringilla tellus. Nullam bibendum felis sed nulla lobortis sodales.
+  Nunc in elementum felis, quis aliquam velit. Morbi sodales sollicitudin
+  mollis.
+</p>

kibicara-frontend/src/app/platforms/telegram/telegram-info-dialog/telegram-info-dialog.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TelegramInfoDialogComponent } from './telegram-info-dialog.component';
+
+describe('TelegramInfoDialogComponent', () => {
+  let component: TelegramInfoDialogComponent;
+  let fixture: ComponentFixture<TelegramInfoDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TelegramInfoDialogComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TelegramInfoDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

kibicara-frontend/src/app/platforms/telegram/telegram-info-dialog/telegram-info-dialog.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-telegram-info-dialog',
+  templateUrl: './telegram-info-dialog.component.html',
+  styleUrls: ['./telegram-info-dialog.component.scss'],
+})
+export class TelegramInfoDialogComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.html

@@ -5,14 +5,19 @@
         Telegram
       </div>
       <button mat-icon-button aria-label="How to use">
-        <mat-icon matTooltip="How to use" class="info-button">info</mat-icon>
+        <mat-icon
+          matTooltip="How to add an telegram bot to your hood"
+          class="info-button"
+          (click)="onInfoClick()"
+          >info</mat-icon
+        >
       </button>
     </mat-card-title>
   </mat-card-header>
   <mat-card-content>
     <mat-list *ngIf="telegrams$ | async as telegrams">
       <mat-list-item *ngIf="telegrams.length === 0">
-        <button mat-menu-item>
+        <button mat-menu-item (click)="onCreate()">
           <mat-icon>add</mat-icon>
           <span> Add a platform connection!</span>
         </button>
@@ -20,7 +25,7 @@
       </mat-list-item>
       <mat-list-item *ngFor="let telegram of telegrams">
         <div class="entry">
-          Telegramdummy
+          @{{ telegram.username }}
           <mat-slide-toggle></mat-slide-toggle>
           <button
             mat-icon-button
@@ -31,21 +36,21 @@
           </button>
         </div>
         <mat-divider></mat-divider>
-      </mat-list-item>
-    </mat-list>
         <mat-menu #menu="matMenu">
-      <button mat-menu-item>
+          <button mat-menu-item (click)="onEdit(telegram.id)">
             <mat-icon>edit</mat-icon>
             <span>Edit</span>
           </button>
-      <button mat-menu-item>
+          <button mat-menu-item (click)="onDelete(telegram.id)">
             <mat-icon>delete</mat-icon>
             <span>Delete</span>
           </button>
-      <button mat-menu-item>
+          <button mat-menu-item (click)="onCreate()">
             <mat-icon>add</mat-icon>
             <span>Add another</span>
           </button>
         </mat-menu>
+      </mat-list-item>
+    </mat-list>
   </mat-card-content>
 </mat-card>

kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.ts

@@ -1,6 +1,9 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { TelegramService } from 'src/app/core/api';
 import { Observer, Observable } from 'rxjs';
+import { TelegramInfoDialogComponent } from '../telegram-info-dialog/telegram-info-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
+import { TelegramDialogComponent } from '../telegram-dialog/telegram-dialog.component';
 
 @Component({
   selector: 'app-telegram-settings',
@@ -11,9 +14,48 @@ export class TelegramSettingsComponent implements OnInit {
   @Input() hoodId;
   telegrams$: Observable<Array<any>>;
 
-  constructor(private telegramService: TelegramService) {}
+  constructor(
+    private telegramService: TelegramService,
+    public dialog: MatDialog
+  ) {}
 
   ngOnInit(): void {
+    this.reload();
+  }
+
+  private reload() {
     this.telegrams$ = this.telegramService.getTelegrams(this.hoodId);
   }
+
+  onInfoClick() {
+    this.dialog.open(TelegramInfoDialogComponent);
+  }
+
+  onDelete(telegramId) {
+    this.telegramService
+      .deleteTelegram(telegramId, this.hoodId)
+      .subscribe(() => {
+        this.reload();
+      });
+  }
+
+  onCreate() {
+    const dialogRef = this.dialog.open(TelegramDialogComponent, {
+      data: { hoodId: this.hoodId },
+    });
+
+    dialogRef.afterClosed().subscribe(() => {
+      this.reload();
+    });
+  }
+
+  onEdit(telegramId) {
+    const dialogRef = this.dialog.open(TelegramDialogComponent, {
+      data: { hoodId: this.hoodId, telegramId: telegramId },
+    });
+
+    dialogRef.afterClosed().subscribe(() => {
+      this.reload();
+    });
+  }
 }