From b0a77c964924a3f0ae2dc3b5ffd60c8d91ec3fd6 Mon Sep 17 00:00:00 2001 From: Alexandra Dumitru Date: Fri, 24 Jun 2022 22:04:54 +0300 Subject: [PATCH] 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 * Now ignores itself when checking for unique name Signed-off-by: Robert Gogete * automatic closing for the success notification * Improve styling and remove hardcoded values Co-authored-by: Stefan Nedelcu Co-authored-by: Stefan Nedelcu <60442811+StefanNedelcu@users.noreply.github.com> Co-authored-by: Robert Gogete --- src/Web/ClientApp/src/app/app.module.ts | 2 + .../list/list.component.html | 9 +--- .../list/list.component.ts | 10 ++-- .../helpers/success/success.component.css | 10 ++++ .../helpers/success/success.component.html | 9 ++++ .../helpers/success/success.component.spec.ts | 23 +++++++++ .../helpers/success/success.component.ts | 48 +++++++++++++++++++ 7 files changed, 98 insertions(+), 13 deletions(-) create mode 100644 src/Web/ClientApp/src/app/components/helpers/success/success.component.css create mode 100644 src/Web/ClientApp/src/app/components/helpers/success/success.component.html create mode 100644 src/Web/ClientApp/src/app/components/helpers/success/success.component.spec.ts create mode 100644 src/Web/ClientApp/src/app/components/helpers/success/success.component.ts diff --git a/src/Web/ClientApp/src/app/app.module.ts b/src/Web/ClientApp/src/app/app.module.ts index 10bf02758..0c7e28c09 100644 --- a/src/Web/ClientApp/src/app/app.module.ts +++ b/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, diff --git a/src/Web/ClientApp/src/app/components/environment-variable/list/list.component.html b/src/Web/ClientApp/src/app/components/environment-variable/list/list.component.html index 07d33dd0f..47295328b 100644 --- a/src/Web/ClientApp/src/app/components/environment-variable/list/list.component.html +++ b/src/Web/ClientApp/src/app/components/environment-variable/list/list.component.html @@ -1,11 +1,4 @@ -
-
-

Success

-
-
- Environment Variables Saved -
-
+
diff --git a/src/Web/ClientApp/src/app/components/environment-variable/list/list.component.ts b/src/Web/ClientApp/src/app/components/environment-variable/list/list.component.ts index c3f0d2122..e82b7587b 100644 --- a/src/Web/ClientApp/src/app/components/environment-variable/list/list.component.ts +++ b/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; } }); diff --git a/src/Web/ClientApp/src/app/components/helpers/success/success.component.css b/src/Web/ClientApp/src/app/components/helpers/success/success.component.css new file mode 100644 index 000000000..e6302599e --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/Web/ClientApp/src/app/components/helpers/success/success.component.html b/src/Web/ClientApp/src/app/components/helpers/success/success.component.html new file mode 100644 index 000000000..860bf19ea --- /dev/null +++ b/src/Web/ClientApp/src/app/components/helpers/success/success.component.html @@ -0,0 +1,9 @@ +
+
+

Success

+
+
+ Environment Variables Saved +
+ +
diff --git a/src/Web/ClientApp/src/app/components/helpers/success/success.component.spec.ts b/src/Web/ClientApp/src/app/components/helpers/success/success.component.spec.ts new file mode 100644 index 000000000..feb99b702 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SuccessComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SuccessComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/Web/ClientApp/src/app/components/helpers/success/success.component.ts b/src/Web/ClientApp/src/app/components/helpers/success/success.component.ts new file mode 100644 index 000000000..29245c55d --- /dev/null +++ b/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); + } +}