From 6a7cac40a91f551d5b4f7fa9184ba83d7a9b4b84 Mon Sep 17 00:00:00 2001 From: y0rg1 Date: Sat, 27 Jul 2019 22:00:02 +0300 Subject: [PATCH 1/2] scroll to top on app submit; clear form on success; updated custom messages styling --- .../components/add-app/add-app.component.scss | 37 +++------------- .../components/add-app/add-app.component.ts | 42 ++++++++++++++++--- .../components/add-app/add-app.template.html | 16 ++++--- 3 files changed, 50 insertions(+), 45 deletions(-) diff --git a/src/app/pages/AddAppPage/components/add-app/add-app.component.scss b/src/app/pages/AddAppPage/components/add-app/add-app.component.scss index 33f3569..fac7230 100644 --- a/src/app/pages/AddAppPage/components/add-app/add-app.component.scss +++ b/src/app/pages/AddAppPage/components/add-app/add-app.component.scss @@ -2,34 +2,9 @@ -// .add-app { -// padding-top: 80px; -// .header { -// text-align: center; -// h2 { -// padding: 10px; -// margin: 20px 0; -// display: inline-block; -// } - - -// } -// .form-actions { -// .btn { -// background: $primary; -// color: $white; -// } -// } -// .ng-valid[required] { -// border-left: 5px solid #42A948; /* green */ -// } - -// .ng-invalid { -// border-left: 5px solid #a94442; /* red */ -// } -// .custom-messages { -// h3 { -// padding: 15px; -// } -// } -// } \ No newline at end of file +.add-app { + .custom-messages .alert { + padding-top: 10px; + padding-bottom: 10px; + } +} \ No newline at end of file diff --git a/src/app/pages/AddAppPage/components/add-app/add-app.component.ts b/src/app/pages/AddAppPage/components/add-app/add-app.component.ts index ecd34fe..d7852b9 100644 --- a/src/app/pages/AddAppPage/components/add-app/add-app.component.ts +++ b/src/app/pages/AddAppPage/components/add-app/add-app.component.ts @@ -1,6 +1,6 @@ import {CivicFile} from '../../../../shared/models/civic-file.model'; import {UploadService} from '../../../../services/upload.service'; -import {Component, OnInit, Input, OnChanges, SimpleChanges} from '@angular/core'; +import {Component, OnInit, Input, OnChanges, SimpleChanges, ViewChild, ElementRef} from '@angular/core'; import {AppService} from '../../../../services/app.service'; import {CategoriesService} from '../../../../services/category.service'; @@ -26,6 +26,7 @@ export class AddAppComponent implements OnInit, OnChanges { constructor(private appService: AppService, private tagsService: TagsService, private technologiesService: TechnologiesService, private categoriesService: CategoriesService, private uploadService: UploadService) { this.submitted = false; + this.successful = false; this.isAddingNewApp = true; } @@ -41,6 +42,7 @@ export class AddAppComponent implements OnInit, OnChanges { public selectedTechnologies: string[] = []; private newTag: string; private submitted: boolean; + private successful: boolean; private message; private error; private appLogo: CivicFile; @@ -53,6 +55,9 @@ export class AddAppComponent implements OnInit, OnChanges { private needsToUpdateNgoLogo: boolean; public phoneRegex = '\\+4\\d{10}'; + @ViewChild('appLogoInput') appLogoInputRef: ElementRef; + @ViewChild('ngoLogoInput') ngoLogoInputRef: ElementRef; + ngOnChanges(changes: SimpleChanges) { if (changes['app']) { this.submitted = false; @@ -177,7 +182,7 @@ export class AddAppComponent implements OnInit, OnChanges { this.isNgoLogoUploaded = false; } this.error = err.toString(); - } + } addApp(form) { if (this.isAddingNewApp) { @@ -237,12 +242,11 @@ export class AddAppComponent implements OnInit, OnChanges { if (this.message === 'success') { this.error = null; this.setDefaultsForLogoWhenEditingApp(); - } else { const errorRegex = /\(ERROR\)\:(.*)/; this.error = errorRegex.exec(this.message); } - + AddAppComponent.scrollToTop(); } } }); @@ -250,6 +254,7 @@ export class AddAppComponent implements OnInit, OnChanges { } private addNewApp(form) { + this.successful = false; this.submitted = true; if (this.isAppLogoValid && this.isNgoLogoValid) { @@ -273,22 +278,33 @@ export class AddAppComponent implements OnInit, OnChanges { this.message = response['result']; if (this.message === 'success') { + this.submitted = false; + this.successful = true; this.error = null; - this.setDefaultsForLogoRelated(); + form.reset(); + this.setFormDefaults(); } else { const errorRegex = /\(ERROR\):(.*)/; this.error = errorRegex.exec(this.message)[1]; } + AddAppComponent.scrollToTop(); } } }); } else { this.error = 'Logo-ul aplicației sau al organizației este invalid, poate sa fie doar .png sau .jpg, maxim 500px x 500px.'; + AddAppComponent.scrollToTop(); } } private setDefaultsForLogoRelated() { + if (this.appLogoInputRef) { + this.appLogoInputRef.nativeElement.value = null; + } + if (this.ngoLogoInputRef) { + this.ngoLogoInputRef.nativeElement.value = null; + } this.ngoLogo = null; this.appLogo = null; this.isAppLogoUploaded = false; @@ -306,4 +322,20 @@ export class AddAppComponent implements OnInit, OnChanges { this.needsToUpdateNgoLogo = false; } + + private setFormDefaults() { + this.setDefaultsForLogoRelated(); + this.selectedAppTags = []; + this.selectedTechnologies = []; + } + + private static scrollToTop() { + (function scrollSmoothly() { + const currentScroll = document.documentElement.scrollTop || document.body.scrollTop; + if (currentScroll > 0) { + window.requestAnimationFrame(scrollSmoothly); + window.scrollTo(0, currentScroll - (currentScroll / 8)); + } + })(); + } } diff --git a/src/app/pages/AddAppPage/components/add-app/add-app.template.html b/src/app/pages/AddAppPage/components/add-app/add-app.template.html index 13f030d..47c6822 100644 --- a/src/app/pages/AddAppPage/components/add-app/add-app.template.html +++ b/src/app/pages/AddAppPage/components/add-app/add-app.template.html @@ -13,18 +13,16 @@

Adaugă-ți aplicația in Centru Civic

-
-

Aplicația ta a fost adaugată cu succes!

-

Te vom contacta când aceasta este publicată pe site. Mulțumim!

+
+ Aplicația ta a fost adaugată cu succes! Te vom contacta când aceasta este publicată pe site. Mulțumim!
-
-

Aplicația a fost modificată cu succes!

- +
+ Aplicația a fost modificată cu succes!
- {{error}} + {{error}}
@@ -116,7 +114,7 @@

Aplicația a fost modificată cu succes!

- Logo-ul aplicației poate să fie doar .png sau .jpg, maxim 500px x 500px.
@@ -242,7 +240,7 @@

Aplicația a fost modificată cu succes!

- Logo-ul tău poate să fie doar .png sau .jpg, maxim 500px x 500px.
From 63600f971a6d362dc3dc8ce96f1b10ab08a3c8b5 Mon Sep 17 00:00:00 2001 From: Antoniu Ienciu Date: Mon, 14 Oct 2019 16:57:35 +0300 Subject: [PATCH 2/2] add scroll util function + refactor code --- .../components/add-app/add-app.component.ts | 19 ++++++------------- .../components/add-app/add-app.template.html | 2 +- .../approve-app/approve-app.component.ts | 7 ++----- src/app/util/scroll.util.ts | 5 +++++ 4 files changed, 14 insertions(+), 19 deletions(-) create mode 100644 src/app/util/scroll.util.ts diff --git a/src/app/pages/AddAppPage/components/add-app/add-app.component.ts b/src/app/pages/AddAppPage/components/add-app/add-app.component.ts index d7852b9..0ad4b39 100644 --- a/src/app/pages/AddAppPage/components/add-app/add-app.component.ts +++ b/src/app/pages/AddAppPage/components/add-app/add-app.component.ts @@ -10,6 +10,7 @@ import {concat, Observable, of, Subject} from "rxjs"; import {catchError, debounceTime, distinctUntilChanged, switchMap, tap} from "rxjs/operators"; import {AppTag} from "../../../../shared/models/app-tag.model"; import {TechnologiesService} from "../../../../services/technology.service"; +import {scrollToElementRef} from '../../../../util/scroll.util'; @@ -57,6 +58,8 @@ export class AddAppComponent implements OnInit, OnChanges { @ViewChild('appLogoInput') appLogoInputRef: ElementRef; @ViewChild('ngoLogoInput') ngoLogoInputRef: ElementRef; + @ViewChild('addAppContainer', {read: ElementRef}) + addAppComponentRef: ElementRef; ngOnChanges(changes: SimpleChanges) { if (changes['app']) { @@ -246,7 +249,7 @@ export class AddAppComponent implements OnInit, OnChanges { const errorRegex = /\(ERROR\)\:(.*)/; this.error = errorRegex.exec(this.message); } - AddAppComponent.scrollToTop(); + scrollToElementRef(this.addAppComponentRef); } } }); @@ -287,14 +290,14 @@ export class AddAppComponent implements OnInit, OnChanges { const errorRegex = /\(ERROR\):(.*)/; this.error = errorRegex.exec(this.message)[1]; } - AddAppComponent.scrollToTop(); + scrollToElementRef(this.addAppComponentRef); } } }); } else { this.error = 'Logo-ul aplicației sau al organizației este invalid, poate sa fie doar .png sau .jpg, maxim 500px x 500px.'; - AddAppComponent.scrollToTop(); + scrollToElementRef(this.addAppComponentRef); } } @@ -328,14 +331,4 @@ export class AddAppComponent implements OnInit, OnChanges { this.selectedAppTags = []; this.selectedTechnologies = []; } - - private static scrollToTop() { - (function scrollSmoothly() { - const currentScroll = document.documentElement.scrollTop || document.body.scrollTop; - if (currentScroll > 0) { - window.requestAnimationFrame(scrollSmoothly); - window.scrollTo(0, currentScroll - (currentScroll / 8)); - } - })(); - } } diff --git a/src/app/pages/AddAppPage/components/add-app/add-app.template.html b/src/app/pages/AddAppPage/components/add-app/add-app.template.html index 47c6822..7cba1f9 100644 --- a/src/app/pages/AddAppPage/components/add-app/add-app.template.html +++ b/src/app/pages/AddAppPage/components/add-app/add-app.template.html @@ -1,7 +1,7 @@

Edit App

-
+

Adaugă-ți aplicația in Centru Civic

diff --git a/src/app/pages/ApproveApp/components/approve-app/approve-app.component.ts b/src/app/pages/ApproveApp/components/approve-app/approve-app.component.ts index 70a92f7..19e7eed 100644 --- a/src/app/pages/ApproveApp/components/approve-app/approve-app.component.ts +++ b/src/app/pages/ApproveApp/components/approve-app/approve-app.component.ts @@ -4,6 +4,7 @@ import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; import { AppService } from '../../../../services/app.service'; import { AddAppModel } from '../../../AddAppPage/services/add-app.model'; +import {scrollToElementRef} from '../../../../util/scroll.util'; @Component({ selector: 'approve-app', @@ -60,7 +61,7 @@ export class ApproveAppComponent implements OnInit { this.selectedApp.ngophone = app.ngodetail.phone; this.selectedApp.ngotwitter = app.ngodetail.twitter; this.selectedApp.ngoid = app.ngodetail.id; - this.scrollToEditApp(); + scrollToElementRef(this.addAppComponentRef); } private getDateAsString(theDateAsString): string{ @@ -81,10 +82,6 @@ export class ApproveAppComponent implements OnInit { return str; } - scrollToEditApp() { - this.addAppComponentRef.nativeElement.scrollIntoView({behavior: "smooth", block:"start"}); - } - stopClickPropagation($event: MouseEvent) { event.stopPropagation(); } diff --git a/src/app/util/scroll.util.ts b/src/app/util/scroll.util.ts new file mode 100644 index 0000000..31d6b12 --- /dev/null +++ b/src/app/util/scroll.util.ts @@ -0,0 +1,5 @@ +import {ElementRef} from '@angular/core'; + +export function scrollToElementRef(elem: ElementRef) { + elem.nativeElement.scrollIntoView({behavior: "smooth", block:"start"}); +}