From 4519b07630136ea86312513ccd59925add4cc5e5 Mon Sep 17 00:00:00 2001 From: Severin Beauvais Date: Tue, 16 Oct 2018 10:57:34 -0700 Subject: [PATCH] PRC-753: deleted obsolete Add Comment component + updated custom File Upload component (from Public plus changes to look like orig Admin component) + moved stand-alone components to root + cleaned up modules + updated add-edit page to use custom File Upload component + removed references to old file upload + null deref check --- src/app/app-routing.module.ts | 1 - src/app/app.module.ts | 29 ++-- .../application-add-edit.component.html | 24 +--- .../application-add-edit.component.ts | 4 +- .../applications-routing.module.ts | 8 ++ src/app/applications/applications.module.ts | 23 +-- .../comment-detail.component.html | 0 .../comment-detail.component.scss | 0 .../comment-detail.component.spec.ts | 4 +- .../comment-detail.component.ts | 1 + .../review-comments.component.html | 0 .../review-comments.component.scss | 0 .../review-comments.component.spec.ts | 4 +- .../review-comments.component.ts | 26 ---- .../commenting/commenting-routing.module.ts | 22 --- src/app/commenting/commenting.module.ts | 50 ------- .../add-comment/add-comment.component.html | 108 -------------- .../add-comment/add-comment.component.scss | 22 --- .../add-comment/add-comment.component.spec.ts | 25 ---- .../add-comment/add-comment.component.ts | 49 ------- .../file-upload/file-upload.component.html | 10 +- .../file-upload/file-upload.component.scss | 133 ++++++++++-------- .../file-upload/file-upload.component.spec.ts | 5 +- src/app/file-upload/file-upload.component.ts | 20 ++- src/app/header/header.component.ts | 2 +- .../select-organization.component.html | 0 .../select-organization.component.scss | 0 .../select-organization.component.spec.ts | 4 +- .../select-organization.component.ts | 1 + src/assets/styles/components/file-upload.scss | 70 --------- src/styles.scss | 1 - 31 files changed, 146 insertions(+), 500 deletions(-) rename src/app/{commenting => applications}/review-comments/comment-detail/comment-detail.component.html (100%) rename src/app/{commenting => applications}/review-comments/comment-detail/comment-detail.component.scss (100%) rename src/app/{commenting => applications}/review-comments/comment-detail/comment-detail.component.spec.ts (89%) rename src/app/{commenting => applications}/review-comments/comment-detail/comment-detail.component.ts (99%) rename src/app/{commenting => applications}/review-comments/review-comments.component.html (100%) rename src/app/{commenting => applications}/review-comments/review-comments.component.scss (100%) rename src/app/{commenting => applications}/review-comments/review-comments.component.spec.ts (89%) rename src/app/{commenting => applications}/review-comments/review-comments.component.ts (92%) delete mode 100644 src/app/commenting/commenting-routing.module.ts delete mode 100644 src/app/commenting/commenting.module.ts delete mode 100644 src/app/commenting/review-comments/add-comment/add-comment.component.html delete mode 100644 src/app/commenting/review-comments/add-comment/add-comment.component.scss delete mode 100644 src/app/commenting/review-comments/add-comment/add-comment.component.spec.ts delete mode 100644 src/app/commenting/review-comments/add-comment/add-comment.component.ts rename src/app/{applications => }/select-organization/select-organization.component.html (100%) rename src/app/{applications => }/select-organization/select-organization.component.scss (100%) rename src/app/{applications => }/select-organization/select-organization.component.spec.ts (89%) rename src/app/{applications => }/select-organization/select-organization.component.ts (99%) delete mode 100644 src/assets/styles/components/file-upload.scss diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index b03b7f03..091773ec 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -5,7 +5,6 @@ import { LoginComponent } from './login/login.component'; import { SearchComponent } from './search/search.component'; import { AdministrationComponent } from './administration/administration.component'; import { UsersComponent } from './administration/users/users.component'; -import { HomeComponent } from './home/home.component'; import { CanDeactivateGuard } from 'app/services/can-deactivate-guard.service'; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6712a5a9..ecddf1ef 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,16 +1,19 @@ +// external imports import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgxPaginationModule } from 'ngx-pagination'; import { Ng2PageScrollModule } from 'ng2-page-scroll'; import { BootstrapModalModule } from 'ng2-bootstrap-modal'; import { CookieService } from 'ngx-cookie-service'; -import { AppRoutingModule } from 'app/app-routing.module'; +// modules import { SharedModule } from 'app/shared.module'; +import { ApplicationsModule } from 'app/applications/applications.module'; +import { AppRoutingModule } from 'app/app-routing.module'; // components import { AppComponent } from 'app/app.component'; @@ -18,6 +21,12 @@ import { HomeComponent } from 'app/home/home.component'; import { SearchComponent } from 'app/search/search.component'; import { LoginComponent } from 'app/login/login.component'; import { ConfirmComponent } from 'app/confirm/confirm.component'; +import { HeaderComponent } from 'app/header/header.component'; +import { FooterComponent } from 'app/footer/footer.component'; +import { AdministrationComponent } from 'app/administration/administration.component'; +import { UsersComponent } from 'app/administration/users/users.component'; +import { AddEditUserComponent } from 'app/administration/users/add-edit-user/add-edit-user.component'; +import { SelectOrganizationComponent } from 'app/select-organization/select-organization.component'; // services import { SearchService } from 'app/services/search.service'; @@ -33,16 +42,6 @@ import { UserService } from 'app/services/user.service'; import { CanDeactivateGuard } from 'app/services/can-deactivate-guard.service'; import { ConfigService } from 'app/services/config.service'; -// feature modules -import { ApplicationsModule } from 'app/applications/applications.module'; -import { CommentingModule } from 'app/commenting/commenting.module'; -import { HeaderComponent } from 'app/header/header.component'; -import { FooterComponent } from 'app/footer/footer.component'; -import { AdministrationComponent } from 'app/administration/administration.component'; -import { UsersComponent } from 'app/administration/users/users.component'; -import { AddEditUserComponent } from 'app/administration/users/add-edit-user/add-edit-user.component'; -import { SelectOrganizationComponent } from 'app/applications/select-organization/select-organization.component'; - @NgModule({ declarations: [ AppComponent, @@ -58,13 +57,12 @@ import { SelectOrganizationComponent } from 'app/applications/select-organizatio SelectOrganizationComponent ], imports: [ - BrowserAnimationsModule, BrowserModule, + BrowserAnimationsModule, FormsModule, HttpModule, SharedModule, ApplicationsModule, - CommentingModule, AppRoutingModule, // <-- module import order matters - https://angular.io/guide/router#module-import-order-matters NgbModule.forRoot(), NgxPaginationModule, @@ -88,7 +86,8 @@ import { SelectOrganizationComponent } from 'app/applications/select-organizatio ], entryComponents: [ ConfirmComponent, - AddEditUserComponent + AddEditUserComponent, + SelectOrganizationComponent ], bootstrap: [AppComponent] }) diff --git a/src/app/applications/application-add-edit/application-add-edit.component.html b/src/app/applications/application-add-edit/application-add-edit.component.html index ba8894f7..1422bb75 100644 --- a/src/app/applications/application-add-edit/application-add-edit.component.html +++ b/src/app/applications/application-add-edit/application-add-edit.component.html @@ -145,16 +145,8 @@

Crown land File: {{application['clFile']}}  &r -
- -
- - file_upload - Drop files to attach, or browse. - -
-
+ @@ -190,16 +182,8 @@

Crown land File: {{application['clFile']}}  &r -
- -
- - file_upload - Drop files to attach, or browse. - -
-
+ - - -
-
-
-

Personal Information

-
-
- - -
-
- - -
-
- -
-
-
- -
-
-
- -
-
- - -
- -
- - -
-
- -

Comment

-
-
- - -
-
- -

Attachments

-
-
- - - All attachments must be no larger than - 5MB. - - - -
-
-
-
- - - Drag & Drop or - Browse Files to upload. - - Total size is limited to 5MB. -
-
-
- - -
-
-
- -
-
- -
-
-
-
-
- -
- - -
- - \ No newline at end of file diff --git a/src/app/commenting/review-comments/add-comment/add-comment.component.scss b/src/app/commenting/review-comments/add-comment/add-comment.component.scss deleted file mode 100644 index f9f26996..00000000 --- a/src/app/commenting/review-comments/add-comment/add-comment.component.scss +++ /dev/null @@ -1,22 +0,0 @@ -.modal-dialog { - .modal-header { - button { - cursor: pointer; - } - } - .modal-body { - .form-group.required .control-label:after { - content: "*"; - color: red; - } - .fb-upload-container { - border: 1px #495057 solid; - padding: 1em; - } - } - .modal-footer { - button { - cursor: pointer; - } - } -} \ No newline at end of file diff --git a/src/app/commenting/review-comments/add-comment/add-comment.component.spec.ts b/src/app/commenting/review-comments/add-comment/add-comment.component.spec.ts deleted file mode 100644 index e9e3017b..00000000 --- a/src/app/commenting/review-comments/add-comment/add-comment.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { AddCommentComponent } from './add-comment.component'; - -describe('AddCommentComponent', () => { - let component: AddCommentComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ AddCommentComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(AddCommentComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/commenting/review-comments/add-comment/add-comment.component.ts b/src/app/commenting/review-comments/add-comment/add-comment.component.ts deleted file mode 100644 index 20d87930..00000000 --- a/src/app/commenting/review-comments/add-comment/add-comment.component.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap'; -import { DialogComponent, DialogService } from 'ng2-bootstrap-modal'; - -import { Comment } from 'app/models/comment'; -import { CommentService } from 'app/services/comment.service'; - -export interface DataModel { - title: string; // not used - message: string; // not used - periodId: string; -} - -@Component({ - templateUrl: './add-comment.component.html', - styleUrls: ['./add-comment.component.scss'] -}) - -// NOTE: dialog components must not implement OnDestroy -// otherwise they don't return a result -export class AddCommentComponent extends DialogComponent implements DataModel, OnInit { - public title: string; - public message: string; - public periodId: string; - - public comment: Comment; - public dateAdded: NgbDateStruct; - public showAlert: boolean; // for attachment error - - constructor( - public dialogService: DialogService, - private commentService: CommentService - ) { - super(dialogService); - this.showAlert = false; - } - - ngOnInit() { - console.log('period id=', this.periodId); - } - - save() { - // we set dialog result as true on click of save button - // then we can get dialog result from caller code - this.result = true; - alert('Save is not yet implemented'); - // this.close(); - } -} diff --git a/src/app/file-upload/file-upload.component.html b/src/app/file-upload/file-upload.component.html index b702c1f2..56ddf908 100644 --- a/src/app/file-upload/file-upload.component.html +++ b/src/app/file-upload/file-upload.component.html @@ -1,4 +1,4 @@ -
+
Maximum of {{maxFiles}} files, up to {{maxSize}}MB each.
Acceptable file types: {{fileExt}}
@@ -6,14 +6,16 @@ -
+
  • {{f.name}} diff --git a/src/app/file-upload/file-upload.component.scss b/src/app/file-upload/file-upload.component.scss index 036ebc16..0ddfe429 100644 --- a/src/app/file-upload/file-upload.component.scss +++ b/src/app/file-upload/file-upload.component.scss @@ -1,88 +1,99 @@ @import "~assets/styles/base/base.scss"; @function repeater($item, $count) { - $string: ""; - @for $i from 1 through $count { - $string: $string + $item; - } - @return "#{$string}"; + $string: ""; + @for $i from 1 through $count { + $string: $string + $item; + } + @return "#{$string}"; } .files-info { - font-size: small; - margin-top: -0.5rem; - margin-bottom: 0.5rem; + margin-top: -0.5rem; + margin-bottom: 0.5rem; + font-size: small; } .material-icons { - vertical-align: middle; + vertical-align: middle; +} + +.dragarea, +.droparea { + padding: 1rem; + border-style: dashed; + border-radius: 0.4rem; + border-width: 3px; + border-color: #ddd; + background-color: #fff; + color: #bbb; + font-size: 1rem; + a { + color: #007bff; + font-size: 0.875rem; + font-weight: 700; + } } .dragarea { - font-size: x-large; - border: 3px dashed $fc-border-color; - padding: 20px; - background-color: $white; - color: #bbb; + transition: all ease-out 0.2s; } .droparea { - font-size: x-large; - border: 3px dashed $fc-focus-border-color; - padding: 20px; - background-color: #eff; - color: #aaa; + border-color: $fc-focus-border-color; + background-color: #eff; } .files-list { - margin-top: 1rem; - ul { - list-style: decimal; - line-height: 1.7; - margin: 0; - overflow-x: hidden; - li:before { - float: left; - width: 0; - white-space: nowrap; - content: repeater(". ", 100); - } - li .name { - padding-right: 0.5rem; - background-color: $white; - } - li .value { - float: right; - clear: right; - padding-left: 0.5rem; - background-color: $white; - margin-top: -2px; - .btn i+span { - vertical-align: text-top; - } - } + margin-top: 1rem; + ul { + list-style: decimal; + line-height: 1.7; + margin: 0; + overflow-x: hidden; + li:before { + float: left; + width: 0; + white-space: nowrap; + content: repeater(". ", 120); } + li .name { + padding-right: 0.5rem; + background-color: $white; + } + li .value { + float: right; + clear: right; + padding-left: 0.5rem; + background-color: $white; + margin-top: -2px; + .btn i+span { + vertical-align: text-top; + } + } + } } .errors-list { - margin-top: 1rem; - ul { - list-style: none; - line-height: 1.7; - padding-left: 20px; - color: #f00; - li, - li span { - display: flex; - } + margin-top: 1rem; + margin-bottom: -1rem; + ul { + list-style: none; + line-height: 1.7; + padding-left: 20px; + color: #f00; + li, + li span { + display: flex; } + } } .btn-xs { - padding: 0 5px; - font-size: 0.83rem; - border-radius: 3px; - .material-icons { - font-size: large; - } + padding: 0 5px; + font-size: 0.83rem; + border-radius: 3px; + .material-icons { + font-size: large; + } } \ No newline at end of file diff --git a/src/app/file-upload/file-upload.component.spec.ts b/src/app/file-upload/file-upload.component.spec.ts index 0071ed86..aac432ca 100644 --- a/src/app/file-upload/file-upload.component.spec.ts +++ b/src/app/file-upload/file-upload.component.spec.ts @@ -1,5 +1,4 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - import { FileUploadComponent } from './file-upload.component'; describe('FileUploadComponent', () => { @@ -8,9 +7,9 @@ describe('FileUploadComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ FileUploadComponent ] + declarations: [FileUploadComponent] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { diff --git a/src/app/file-upload/file-upload.component.ts b/src/app/file-upload/file-upload.component.ts index 71f9d94f..ce6180a3 100644 --- a/src/app/file-upload/file-upload.component.ts +++ b/src/app/file-upload/file-upload.component.ts @@ -10,11 +10,13 @@ import { Component, Input, Output, EventEmitter, HostListener } from '@angular/c }) export class FileUploadComponent { - dragDropClass = 'dragarea'; + public dragDropClass = 'dragarea'; @Input() fileExt = 'jpg, jpeg, gif, png, bmp, doc, docx, xls, xlsx, ppt, pptx, pdf, txt'; @Input() maxFiles = 5; @Input() maxSize = 5; // in MB @Input() files: Array = []; + @Input() showInfo = true; + @Input() showList = true; @Output() filesChange = new EventEmitter(); public errors: Array = []; @@ -52,7 +54,7 @@ export class FileUploadComponent { this.addFiles(files); } - addFiles(files) { + addFiles(files: FileList) { this.errors = []; // clear previous errors if (this.isValidFiles(files)) { @@ -63,24 +65,30 @@ export class FileUploadComponent { } } - removeFile(file) { + removeFile(file: File) { this.errors = []; // clear previous errors const index = this.files.indexOf(file); if (index !== -1) { this.files.splice(index, 1); } + this.filesChange.emit(this.files); } private isValidFiles(files: FileList): boolean { + if (this.maxFiles > 0) { this.validateMaxFiles(files); } + if (this.fileExt.length > 0) { this.validateFileExtensions(files); } + if (this.maxSize > 0) { this.validateFileSizes(files); } + return (this.errors.length === 0); + } + + private validateMaxFiles(files: FileList): boolean { if ((files.length + this.files.length) > this.maxFiles) { this.errors.push('Too many files'); setTimeout(() => this.errors = [], 5000); return false; } - this.validateFileExtensions(files); - this.validateFileSizes(files); - return (this.errors.length === 0); + return true; } private validateFileExtensions(files: FileList): boolean { diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 5919936b..a66b792d 100644 --- a/src/app/header/header.component.ts +++ b/src/app/header/header.component.ts @@ -36,7 +36,7 @@ export class HeaderComponent { renderMenu(route: String) { // Sysadmin's get administration. if (route === 'administration') { - return (this.jwt && this.jwt.scopes.find(x => x === 'sysadmin') && this.jwt.username === 'admin'); + return (this.jwt && this.jwt.scopes && this.jwt.scopes.find(x => x === 'sysadmin') && this.jwt.username === 'admin'); } } } diff --git a/src/app/applications/select-organization/select-organization.component.html b/src/app/select-organization/select-organization.component.html similarity index 100% rename from src/app/applications/select-organization/select-organization.component.html rename to src/app/select-organization/select-organization.component.html diff --git a/src/app/applications/select-organization/select-organization.component.scss b/src/app/select-organization/select-organization.component.scss similarity index 100% rename from src/app/applications/select-organization/select-organization.component.scss rename to src/app/select-organization/select-organization.component.scss diff --git a/src/app/applications/select-organization/select-organization.component.spec.ts b/src/app/select-organization/select-organization.component.spec.ts similarity index 89% rename from src/app/applications/select-organization/select-organization.component.spec.ts rename to src/app/select-organization/select-organization.component.spec.ts index 8da6cfae..ccd69ba2 100644 --- a/src/app/applications/select-organization/select-organization.component.spec.ts +++ b/src/app/select-organization/select-organization.component.spec.ts @@ -8,9 +8,9 @@ describe('SelectOrganizationComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ SelectOrganizationComponent ] + declarations: [SelectOrganizationComponent] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { diff --git a/src/app/applications/select-organization/select-organization.component.ts b/src/app/select-organization/select-organization.component.ts similarity index 99% rename from src/app/applications/select-organization/select-organization.component.ts rename to src/app/select-organization/select-organization.component.ts index 9d758567..669ee00b 100644 --- a/src/app/applications/select-organization/select-organization.component.ts +++ b/src/app/select-organization/select-organization.component.ts @@ -90,4 +90,5 @@ export class SelectOrganizationComponent extends DialogComponent