Add automatic closing for the success notification (#937)

* Channel overview component - frontend

* Switch to the current api endpoint

* Fixed right panel scroll off screen

Signed-off-by: Robert Gogete <gogeterobert@yahoo.com>

* Now ignores itself when checking for unique name

Signed-off-by: Robert Gogete <gogeterobert@yahoo.com>

* automatic closing for the success notification

* Improve styling and remove hardcoded values

Co-authored-by: Stefan Nedelcu <nedelcu.stefan17@yahoo.com>
Co-authored-by: Stefan Nedelcu <60442811+StefanNedelcu@users.noreply.github.com>
Co-authored-by: Robert Gogete <gogeterobert@yahoo.com>

src/Web/ClientApp/src/app/app.module.ts

@@ -26,6 +26,7 @@ import { OverviewComponent } from './components/channel/overview/overview.compon
 import { NgxJdenticonModule, JDENTICON_CONFIG } from 'ngx-jdenticon';
 import { AppConfigService } from './_services/app-config.service';
 import { WarningComponent } from './components/helpers/warning/warning.component';
+import { SuccessComponent } from './components/helpers/success/success.component';
 
 export function apiConfigFactory(): Configuration {
 	const params: ConfigurationParameters = {
@@ -52,6 +53,7 @@ export function apiConfigFactory(): Configuration {
   		LogsComponent,
     	OverviewComponent,
      	WarningComponent,
+      	SuccessComponent,
 	],
 	imports: [
 		BrowserModule,

src/Web/ClientApp/src/app/components/environment-variable/list/list.component.html

@@ -1,11 +1,4 @@
-<article *ngIf="submitted" class="message is-success">
-    <div class="message-header">
-        <p>Success</p>
-    </div>
-    <div class="message-body">
-        Environment Variables Saved
-    </div>
-</article>
+<app-success></app-success>
 <app-warning [error]="error"></app-warning>
 <div *ngIf="!loading" class="box columns is-multiline has-background-light">
     <ng-template [ngIf]="envvars.length <= 0">

src/Web/ClientApp/src/app/components/environment-variable/list/list.component.ts

@@ -1,6 +1,7 @@
-import { Component, Input, OnChanges } from '@angular/core';
+import { Component, Input, OnChanges, ViewChild } from '@angular/core';
 import { faBackward, faTrash, faSave } from '@fortawesome/free-solid-svg-icons';
 import { ChannelService, EnvironmentVariableService } from 'src/app/core/api/v1';
+import { SuccessComponent } from '../../helpers/success/success.component';
 
 @Component({
 	selector: 'app-environment-variable-list',
@@ -9,13 +10,13 @@ import { ChannelService, EnvironmentVariableService } from 'src/app/core/api/v1'
 })
 export class ListComponent implements OnChanges {
 	@Input() channelId = '';
+	@ViewChild(SuccessComponent) success: SuccessComponent = new SuccessComponent;
 
 	envvars: any = [];
 	originalEnvVars: any = [];
 
 	error: any = null;
 	loading: boolean = false;
-	submitted = false;
 	faBackward = faBackward;
 	faTrash = faTrash;
 	faSave = faSave;
@@ -24,6 +25,7 @@ export class ListComponent implements OnChanges {
 
 	ngOnChanges(): void {
 		this.refreshData();
+		this.success.hide();
 	}
 
 	addNewVariable() {
@@ -71,13 +73,12 @@ export class ListComponent implements OnChanges {
 		}).subscribe({
 			next: () => {
 				this.refreshData();
-				this.submitted = true;
+				this.success.show();
 				this.error = null;
 			},
 			error: (err) => {
 				console.log(err.error.errors);
 				this.error = err;
-				this.submitted = false;
 			}
 		});
 	}
@@ -121,7 +122,6 @@ export class ListComponent implements OnChanges {
 				error: (err) => {
 					console.log(err.error.errors);
 					this.error = err;
-					this.submitted = false;
 					this.loading = false;
 				}
 			});

src/Web/ClientApp/src/app/components/helpers/success/success.component.css

@@ -0,0 +1,10 @@
+.success-margins {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+    margin-top: -0.75rem;
+    margin-bottom: 1rem;
+}
+
+.is-x-small {
+    height: 0.25rem;
+}

src/Web/ClientApp/src/app/components/helpers/success/success.component.html

@@ -0,0 +1,9 @@
+<article *ngIf="visible" class="message is-success success-margins">
+    <div class="message-header">
+        <p>Success</p>
+    </div>
+    <div class="message-body">
+        Environment Variables Saved
+    </div>
+    <progress *ngIf="counter" class="progress is-x-small is-success" [attr.value]="counter" [attr.max]="intervalResetTime"></progress>
+</article>

src/Web/ClientApp/src/app/components/helpers/success/success.component.spec.ts

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

src/Web/ClientApp/src/app/components/helpers/success/success.component.ts

@@ -0,0 +1,48 @@
+import {
+    Component,
+    Injectable,
+} from '@angular/core';
+
+@Injectable({
+    providedIn: 'root',
+})
+@Component({
+    selector: 'app-success',
+    templateUrl: './success.component.html',
+    styleUrls: ['./success.component.css']
+})
+export class SuccessComponent {
+    visible: boolean = false;
+    counter: number = 0;
+    interval: any = null;
+    intervalResetTime: number = 3000;
+    incrementInterval: number = 10;
+
+    constructor() {}
+
+    show(): void {
+        clearInterval(this.interval);
+        this.visible = true;
+        this.startTimer();
+    }
+
+    hide(): void {
+        clearInterval(this.interval);
+        this.visible = false;
+        this.counter = 0;
+    }
+
+    startTimer(): void {
+        this.counter = 0;
+
+        this.interval = setInterval(() => {
+            if (this.counter === this.intervalResetTime) {
+                clearInterval(this.interval);
+                this.visible = false;
+                this.counter = 0;
+            } else {
+                this.counter += this.incrementInterval ;
+            }
+        }, this.incrementInterval);
+    }
+}