From 86fd154444ae4ce7d3ca9ece4ceab83eed2e113e Mon Sep 17 00:00:00 2001 From: Sven Hansen Date: Fri, 1 Oct 2021 11:00:53 +0200 Subject: [PATCH 01/26] Created transfer project ownership (confirm) modals --- src/app/app.module.ts | 6 ++- ...ner-user-email-confirmation.component.html | 33 +++++++++++++ ...ner-user-email-confirmation.component.scss | 11 +++++ ...owner-user-email-confirmation.component.ts | 27 ++++++++++ ...ential-new-owner-user-email.component.html | 37 ++++++++++++++ ...ential-new-owner-user-email.component.scss | 11 +++++ ...otential-new-owner-user-email.component.ts | 26 ++++++++++ .../settings-dropdown.component.html | 3 ++ .../settings-dropdown.component.ts | 49 ++++++++++++++++++- .../modal-highlight-form.component.ts | 1 - src/app/services/project.service.ts | 9 +++- 11 files changed, 208 insertions(+), 5 deletions(-) create mode 100644 src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.html create mode 100644 src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.scss create mode 100644 src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.ts create mode 100644 src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component.html create mode 100644 src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component.scss create mode 100644 src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 19c6be9a..df7704a4 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -40,6 +40,8 @@ import { AlertModule } from 'ngx-bootstrap/alert'; import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; import { ModalModule } from 'ngx-bootstrap/modal'; import { QuillModule } from 'ngx-quill'; +import { ModalPotentialNewOwnerUserEmailComponent } from './components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component'; +import { ModalPotentialNewOwnerUserEmailConfirmationComponent } from './components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component'; @NgModule({ @@ -52,7 +54,9 @@ import { QuillModule } from 'ngx-quill'; PrivacyPolicyComponent, NotFoundComponent, ModalDeleteGenericComponent, - SearchComponent + SearchComponent, + ModalPotentialNewOwnerUserEmailComponent, + ModalPotentialNewOwnerUserEmailConfirmationComponent ], imports: [ BsDropdownModule.forRoot(), diff --git a/src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.html b/src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.html new file mode 100644 index 00000000..7a85f738 --- /dev/null +++ b/src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.html @@ -0,0 +1,33 @@ + + +
+ +
+
Are you sure you want to ask project transfership to {{email}}?
+
+
+ + +
+
+
+
diff --git a/src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.scss b/src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.scss new file mode 100644 index 00000000..5351576c --- /dev/null +++ b/src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.scss @@ -0,0 +1,11 @@ +.modal-body { + + h6 { + width: 90%; + margin-bottom: 10px; + } + + button { + margin-right: 10px; + } +} diff --git a/src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.ts b/src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.ts new file mode 100644 index 00000000..8f5b0548 --- /dev/null +++ b/src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.ts @@ -0,0 +1,27 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { BsModalRef } from 'ngx-bootstrap/modal'; + +@Component({ + selector: 'app-modal-potential-new-owner-user-email-confirmation', + templateUrl: './modal-potential-new-owner-user-email-confirmation.component.html', + styleUrls: ['./modal-potential-new-owner-user-email-confirmation.component.scss'] +}) +export class ModalPotentialNewOwnerUserEmailConfirmationComponent { + + @Input() email: string; + @Output() didConfirmEvent = new EventEmitter(); + + constructor( + public bsModalRef: BsModalRef, + ) { } + + /** + * Method which triggers when accept is clicked. + * Emits true via the output property and closes the modal. + */ + public onAcceptClicked(): void { + this.didConfirmEvent.emit(true); + this.bsModalRef.hide(); + } + +} diff --git a/src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component.html b/src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component.html new file mode 100644 index 00000000..17e40097 --- /dev/null +++ b/src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component.html @@ -0,0 +1,37 @@ + + +
+ +
+ +
+
+ + +
+
+
+
diff --git a/src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component.scss b/src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component.scss new file mode 100644 index 00000000..23f253ed --- /dev/null +++ b/src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component.scss @@ -0,0 +1,11 @@ +.modal-body { + + input { + width: 90%; + margin-bottom: 10px; + } + + button { + margin-right: 10px; + } +} diff --git a/src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component.ts b/src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component.ts new file mode 100644 index 00000000..5da6a747 --- /dev/null +++ b/src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component.ts @@ -0,0 +1,26 @@ +import { Component, EventEmitter, Output } from '@angular/core'; +import { BsModalRef } from 'ngx-bootstrap/modal'; + +@Component({ + selector: 'app-modal-potential-new-owner-user-email', + templateUrl: './modal-potential-new-owner-user-email.component.html', + styleUrls: ['./modal-potential-new-owner-user-email.component.scss'] +}) +export class ModalPotentialNewOwnerUserEmailComponent { + + public potentialNewOwnerUserEmail: string; + @Output() potentialNewOwnerUserEmailEvent = new EventEmitter(); + + constructor( + public bsModalRef: BsModalRef, + ) { } + + /** + * Method which triggers when continue is clicked. + * Emits true via the output property and closes the modal. + */ + public onClickContinue(): void { + this.bsModalRef.hide(); + this.potentialNewOwnerUserEmailEvent.emit(this.potentialNewOwnerUserEmail); + } +} diff --git a/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.html b/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.html index 0f69d77b..19bf5b8e 100644 --- a/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.html +++ b/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.html @@ -12,5 +12,8 @@ Delete project + + Transfer Ownership + diff --git a/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts b/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts index aa6574dc..3159fdec 100644 --- a/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts +++ b/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts @@ -10,7 +10,7 @@ import { HighlightFormResult, ModalHighlightFormComponent } from '../../../modal import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { Router } from '@angular/router'; import { BsModalService, ModalOptions } from 'ngx-bootstrap/modal'; -import { EMPTY } from 'rxjs'; +import { BehaviorSubject, EMPTY } from 'rxjs'; import { switchMap } from 'rxjs/operators'; import { ModalDeleteGenericComponent } from 'src/app/components/modals/modal-delete-generic/modal-delete-generic.component'; import { Project } from 'src/app/models/domain/project'; @@ -20,6 +20,8 @@ import { AuthService } from 'src/app/services/auth.service'; import { HighlightService } from 'src/app/services/highlight.service'; import { HighlightByProjectIdService } from 'src/app/services/highlightid.service'; import { ProjectService } from 'src/app/services/project.service'; +import { ModalPotentialNewOwnerUserEmailComponent } from 'src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component'; +import { ModalPotentialNewOwnerUserEmailConfirmationComponent } from 'src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component'; @Component({ selector: 'app-settings-dropdown', @@ -34,6 +36,11 @@ export class SettingsDropdownComponent implements OnInit { public displayEditButton = false; public displayDeleteProjectButton = false; public displayHighlightButton = false; + public displayTransferProjectOwnershipButton = false; + + public potentialNewOwnerUserEmail = ""; + private emailFilledIn = false; + private didConfirm = false; constructor(private projectService: ProjectService, private authService: AuthService, @@ -170,6 +177,44 @@ export class SettingsDropdownComponent implements OnInit { }); } + /** + * Method to initiate a transfer project ownership. + */ + public onClickTransferProjectOwnership(): void { + // Display modal + const modalRefEmail = this.modalService.show(ModalPotentialNewOwnerUserEmailComponent); + + // Wait for modal to emit true + modalRefEmail.content.potentialNewOwnerUserEmailEvent.subscribe((potentialNewOwnerUserEmail: string) => { + this.potentialNewOwnerUserEmail = potentialNewOwnerUserEmail + this.showConfirmModal(); + }); + } + + /** + * Method for asking user to confirm filled in potential new owner user email. + */ + private showConfirmModal() { + var email = this.potentialNewOwnerUserEmail; + + // Display modal + const modalRefEmailConfirm = this.modalService.show(ModalPotentialNewOwnerUserEmailConfirmationComponent, {initialState: {email}}); + + // Wait for modal to emit true + modalRefEmailConfirm.content.didConfirmEvent.subscribe(() => { + this.initiateTransferProjectOwnership(); + }); + } + + /** + * + */ + private initiateTransferProjectOwnership(): void { + // this.projectService.initiateTransferProjectOwnership(this.project.id).subscribe(text => { + // console.log(text); + // }); + } + /** * Method to display the edit project button based on the current user and the project user. * If the user either has the ProjectWrite scope or is the creator of the project @@ -178,12 +223,14 @@ export class SettingsDropdownComponent implements OnInit { if (this.currentUser == null || this.project == null || this.project.user == null) { this.displayEditButton = false; this.displayDeleteProjectButton = false; + this.displayTransferProjectOwnershipButton = false; return; } if (this.project.user.id === this.currentUser.id || this.authService.currentBackendUserHasScope(scopes.AdminProjectWrite)) { this.displayEditButton = true; this.displayDeleteProjectButton = true; + this.displayTransferProjectOwnershipButton = true; } } diff --git a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts index bf2c1d22..495c59d2 100644 --- a/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts +++ b/src/app/modules/project/modal-highlight-form/modal-highlight-form.component.ts @@ -52,7 +52,6 @@ export class ModalHighlightFormComponent implements OnInit, AfterViewInit { @ViewChild(FileUploaderComponent) fileUploader: FileUploaderComponent; - public highlightProjectForm: FormGroup; public dateFieldsEnabled = true; public validationErrorMessage: string = null; diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts index 8c5f19e0..c778913a 100644 --- a/src/app/services/project.service.ts +++ b/src/app/services/project.service.ts @@ -27,6 +27,7 @@ import { CallToActionIconsConfig } from 'src/app/config/call-to-action-icons-con import { Project } from 'src/app/models/domain/project'; import { ProjectAdd } from 'src/app/models/resources/project-add'; import { ProjectUpdate } from 'src/app/models/resources/project-update'; +import { ThisReceiver } from '@angular/compiler'; @Injectable({ providedIn: 'root', @@ -36,7 +37,7 @@ export class ProjectService extends HttpBaseService { + public get(id: number): Observable { return super.get(id) .pipe( map(project => { @@ -56,7 +57,11 @@ export class ProjectService extends HttpBaseService { + public initiateTransferProjectOwnership(projectId: number, potentialNewOwnerUserEmail: string, ): Observable { + return this.http.get(this.url + '/transfer/' + projectId, { params: { potentialNewOwnerUserEmail: potentialNewOwnerUserEmail }}); + } + + private addLikes(project: any): Promise { return this.authService.getBackendUser() .then(currentUser => { project.likeCount = project.likes?.length ? project.likes.length : 0; From 4e129cf80721b60c4fd722df8dd7ed7c6aa6ea0d Mon Sep 17 00:00:00 2001 From: Sven Hansen Date: Tue, 5 Oct 2021 13:19:33 +0200 Subject: [PATCH 02/26] Added Delete Transfer Request functionality, still 'errors' present. API calls being executed twice --- .vscode/launch.json | 4 +- src/app/app.module.ts | 5 +- ...ner-user-email-confirmation.component.html | 6 +- ...ner-user-email-confirmation.component.scss | 20 +++++- ...owner-user-email-confirmation.component.ts | 1 - ...ential-new-owner-user-email.component.html | 4 +- ...ential-new-owner-user-email.component.scss | 20 +++++- .../settings-dropdown.component.html | 2 +- .../settings-dropdown.component.ts | 65 ++++++++++++------- .../modules/project/project-routing.module.ts | 2 + .../transfer-ownership.component.html | 14 ++++ .../transfer-ownership.component.scss | 17 +++++ .../transfer-ownership.component.ts | 38 +++++++++++ src/app/services/project.service.ts | 25 +++++-- 14 files changed, 179 insertions(+), 44 deletions(-) create mode 100644 src/app/modules/project/transfer-ownership/transfer-ownership.component.html create mode 100644 src/app/modules/project/transfer-ownership/transfer-ownership.component.scss create mode 100644 src/app/modules/project/transfer-ownership/transfer-ownership.component.ts diff --git a/.vscode/launch.json b/.vscode/launch.json index 561adf4c..312cde9e 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -8,8 +8,8 @@ "type": "chrome", "request": "attach", "name": "Attach to Chrome localhost", - "port": 9222, + "port": 4200, "webRoot": "${workspaceFolder}" } ] -} \ No newline at end of file +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index df7704a4..8f92e561 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -42,7 +42,7 @@ import { ModalModule } from 'ngx-bootstrap/modal'; import { QuillModule } from 'ngx-quill'; import { ModalPotentialNewOwnerUserEmailComponent } from './components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component'; import { ModalPotentialNewOwnerUserEmailConfirmationComponent } from './components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component'; - +import { TransferOwnershipComponent } from './modules/project/transfer-ownership/transfer-ownership.component'; @NgModule({ declarations: [ @@ -56,7 +56,8 @@ import { ModalPotentialNewOwnerUserEmailConfirmationComponent } from './componen ModalDeleteGenericComponent, SearchComponent, ModalPotentialNewOwnerUserEmailComponent, - ModalPotentialNewOwnerUserEmailConfirmationComponent + ModalPotentialNewOwnerUserEmailConfirmationComponent, + TransferOwnershipComponent ], imports: [ BsDropdownModule.forRoot(), diff --git a/src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.html b/src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.html index 7a85f738..1d1c3682 100644 --- a/src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.html +++ b/src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.html @@ -16,11 +16,9 @@ If not, see https://www.gnu.org/licenses/lgpl-3.0.txt --> +
-
- +
Are you sure you want to ask project transfership to {{email}}?
diff --git a/src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.scss b/src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.scss index 5351576c..956e0620 100644 --- a/src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.scss +++ b/src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.scss @@ -1,4 +1,8 @@ -.modal-body { +.modal-potential-new-owner-user-email-confirmation-container { + padding: 10px; + z-index: 1151; + position: relative; + background-color: #fff; h6 { width: 90%; @@ -9,3 +13,17 @@ margin-right: 10px; } } + +#overlay { + position: fixed; + display: block; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-color: #000; + opacity: 0.5; + z-index: 1150; + cursor: pointer; + transition: opacity .5s ease-in; +} diff --git a/src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.ts b/src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.ts index 8f5b0548..d8e8fa52 100644 --- a/src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.ts +++ b/src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.ts @@ -23,5 +23,4 @@ export class ModalPotentialNewOwnerUserEmailConfirmationComponent { this.didConfirmEvent.emit(true); this.bsModalRef.hide(); } - } diff --git a/src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component.html b/src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component.html index 17e40097..430aac2a 100644 --- a/src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component.html +++ b/src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component.html @@ -16,11 +16,9 @@ If not, see https://www.gnu.org/licenses/lgpl-3.0.txt --> +
-
Delete project - Transfer Ownership + Transfer ownership diff --git a/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts b/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts index 3159fdec..664760ff 100644 --- a/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts +++ b/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts @@ -22,6 +22,8 @@ import { HighlightByProjectIdService } from 'src/app/services/highlightid.servic import { ProjectService } from 'src/app/services/project.service'; import { ModalPotentialNewOwnerUserEmailComponent } from 'src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component'; import { ModalPotentialNewOwnerUserEmailConfirmationComponent } from 'src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component'; +import { HttpClient } from '@angular/common/http'; +import { Observable } from 'rxjs'; @Component({ selector: 'app-settings-dropdown', @@ -39,8 +41,8 @@ export class SettingsDropdownComponent implements OnInit { public displayTransferProjectOwnershipButton = false; public potentialNewOwnerUserEmail = ""; - private emailFilledIn = false; - private didConfirm = false; + private transferGuid: string = null; + constructor(private projectService: ProjectService, private authService: AuthService, @@ -48,11 +50,17 @@ export class SettingsDropdownComponent implements OnInit { private modalService: BsModalService, private alertService: AlertService, private highlightByProjectIdService: HighlightByProjectIdService, - private router: Router) { } + private router: Router, + private http: HttpClient) { } ngOnInit(): void { this.determineDisplayEditAndDeleteProjectButton(); this.determineDisplayHighlightButton(); + this.projectService.checkProjectHasTransferRequest(this.project.id).subscribe(guid => { + this.transferGuid = guid; + }, error => { + console.log('xx: ' + error); + }) } /** @@ -178,43 +186,52 @@ export class SettingsDropdownComponent implements OnInit { } /** - * Method to initiate a transfer project ownership. + * */ - public onClickTransferProjectOwnership(): void { - // Display modal - const modalRefEmail = this.modalService.show(ModalPotentialNewOwnerUserEmailComponent); - - // Wait for modal to emit true - modalRefEmail.content.potentialNewOwnerUserEmailEvent.subscribe((potentialNewOwnerUserEmail: string) => { + public determineNextModal() { + if (this.transferGuid != null) { + const modalOptions: ModalOptions = { + initialState: { + titleText: 'Delete transfer request', + mainText: `Are you sure you want to delete the transfer request for this project, ${this.project.name}?`, + } + }; + const deleteRefModal = this.modalService.show(ModalDeleteGenericComponent, modalOptions); + deleteRefModal.content.remove.subscribe((clickedRemove: boolean) => { + if (clickedRemove) { + this.projectService.deleteTransferRequest(this.transferGuid).subscribe(() => console.log('deleted pik')); + } + }); + } else { + const modalRefEmail = this.modalService.show(ModalPotentialNewOwnerUserEmailComponent); + modalRefEmail.content.potentialNewOwnerUserEmailEvent.subscribe((potentialNewOwnerUserEmail: string) => { this.potentialNewOwnerUserEmail = potentialNewOwnerUserEmail this.showConfirmModal(); - }); + }); + } } /** * Method for asking user to confirm filled in potential new owner user email. */ private showConfirmModal() { + console.log('1'); var email = this.potentialNewOwnerUserEmail; - + console.log('2'); // Display modal const modalRefEmailConfirm = this.modalService.show(ModalPotentialNewOwnerUserEmailConfirmationComponent, {initialState: {email}}); - + console.log('3'); // Wait for modal to emit true - modalRefEmailConfirm.content.didConfirmEvent.subscribe(() => { - this.initiateTransferProjectOwnership(); + modalRefEmailConfirm.content.didConfirmEvent.subscribe((didClick: boolean) => { + console.log('4'); + if (didClick) { + console.log('5'); + this.projectService.initiateTransferProjectOwnership(this.project.id, this.potentialNewOwnerUserEmail); + } + console.log('10'); }); } - /** - * - */ - private initiateTransferProjectOwnership(): void { - // this.projectService.initiateTransferProjectOwnership(this.project.id).subscribe(text => { - // console.log(text); - // }); - } - /** * Method to display the edit project button based on the current user and the project user. * If the user either has the ProjectWrite scope or is the creator of the project diff --git a/src/app/modules/project/project-routing.module.ts b/src/app/modules/project/project-routing.module.ts index 70647bc4..2fa9560b 100644 --- a/src/app/modules/project/project-routing.module.ts +++ b/src/app/modules/project/project-routing.module.ts @@ -20,12 +20,14 @@ import { OverviewComponent } from './overview/overview.component'; import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { TransferOwnershipComponent } from './transfer-ownership/transfer-ownership.component'; const routes: Routes = [ {path: 'overview', component: OverviewComponent}, {path: 'details/:id', component: OverviewComponent}, {path: 'edit/:id', component: EditComponent}, {path: 'embed/:id', component: EmbedComponent}, + {path: 'transferownership/:transferGuid/:isOwnerMail/:acceptedRequest', component: TransferOwnershipComponent}, {path: 'add', loadChildren: () => import('./add/add.module').then((m) => m.AddModule)}, ]; diff --git a/src/app/modules/project/transfer-ownership/transfer-ownership.component.html b/src/app/modules/project/transfer-ownership/transfer-ownership.component.html new file mode 100644 index 00000000..34efa3db --- /dev/null +++ b/src/app/modules/project/transfer-ownership/transfer-ownership.component.html @@ -0,0 +1,14 @@ +
+
+
+

Loading...

+
+ +

Success

+

Error 400 Bad Request

+

Error 404 Not Found

+

{{reply}}

+ + +
+
diff --git a/src/app/modules/project/transfer-ownership/transfer-ownership.component.scss b/src/app/modules/project/transfer-ownership/transfer-ownership.component.scss new file mode 100644 index 00000000..b234efda --- /dev/null +++ b/src/app/modules/project/transfer-ownership/transfer-ownership.component.scss @@ -0,0 +1,17 @@ +@import "assets/styles/variables"; + +.container-transfer-ownership { + display: flex; + align-items: center; + flex-direction: column; + margin-top: 50px; + + button{ + margin-top: 30px; + width: 250px; + } + + a { + color: $accent-color-red-primary; + } +} diff --git a/src/app/modules/project/transfer-ownership/transfer-ownership.component.ts b/src/app/modules/project/transfer-ownership/transfer-ownership.component.ts new file mode 100644 index 00000000..8a52dd10 --- /dev/null +++ b/src/app/modules/project/transfer-ownership/transfer-ownership.component.ts @@ -0,0 +1,38 @@ +import { Component, OnInit } from '@angular/core'; +import { ProjectService } from 'src/app/services/project.service'; +import { ActivatedRoute } from '@angular/router'; +import { HttpErrorResponse } from '@angular/common/http'; +import { catchError } from 'rxjs/operators'; + +@Component({ + selector: 'app-transfer-ownership', + templateUrl: './transfer-ownership.component.html', + styleUrls: ['./transfer-ownership.component.scss'] +}) +export class TransferOwnershipComponent implements OnInit { + + private transferGuid; + private isOwnerMail; + private acceptedRequest; + + public reply = ""; + public replyStatus: number; + public isLoading = true; + + constructor( + private projectService: ProjectService, + private route: ActivatedRoute, + ) { + this.transferGuid = this.route.snapshot.url[1]; + this.isOwnerMail = this.route.snapshot.url[2]; + this.acceptedRequest = this.route.snapshot.url[3]; + } + + ngOnInit(): void { + this.projectService.processTransferProjectOwnership(this.transferGuid, this.isOwnerMail, this.acceptedRequest).subscribe(response => { + this.reply = response.body; + this.replyStatus = response.status; + this.isLoading = false; + }) + } +} diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts index c778913a..992d5b26 100644 --- a/src/app/services/project.service.ts +++ b/src/app/services/project.service.ts @@ -20,14 +20,15 @@ import { HttpBaseService } from './http-base.service'; import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; -import { from, Observable } from 'rxjs'; -import { map, mergeMap } from 'rxjs/operators'; +import { from, Observable, pipe, throwError } from 'rxjs'; +import { catchError, map, mergeMap } from 'rxjs/operators'; import { API_CONFIG } from 'src/app/config/api-config'; import { CallToActionIconsConfig } from 'src/app/config/call-to-action-icons-config'; import { Project } from 'src/app/models/domain/project'; import { ProjectAdd } from 'src/app/models/resources/project-add'; import { ProjectUpdate } from 'src/app/models/resources/project-update'; -import { ThisReceiver } from '@angular/compiler'; +import { HttpHeaders } from '@angular/common/http'; +import { share } from 'rxjs/operators'; @Injectable({ providedIn: 'root', @@ -57,8 +58,22 @@ export class ProjectService extends HttpBaseService { - return this.http.get(this.url + '/transfer/' + projectId, { params: { potentialNewOwnerUserEmail: potentialNewOwnerUserEmail }}); + + public initiateTransferProjectOwnership(projectId: number, potentialNewOwnerUserEmail: string): Observable { + console.log('6'); + return this.http.post(`${this.url}/transfer/${projectId}`, '', {headers: {'Content-Type':'text'}, params: {potentialNewOwnerUserEmail: potentialNewOwnerUserEmail}}) + } + + public processTransferProjectOwnership(transferGuid: string, isOwnerMail: boolean, acceptedRequest: boolean): Observable { + return this.http.get(`${this.url}/transfer/process/${transferGuid}/${isOwnerMail}/${acceptedRequest}`, {responseType: 'text', observe: 'response'}) + } + + public checkProjectHasTransferRequest(projectId: number): Observable { + return this.http.get(`${this.url}/transfer/check/${projectId}`); + } + + public deleteTransferRequest(transferGuid: string): Observable { + return this.http.delete(`${this.url}/transfer/${transferGuid}`).pipe(share()); } private addLikes(project: any): Promise { From b44530ffb447e6f889064023e58f02511cd7b0cc Mon Sep 17 00:00:00 2001 From: Sven Hansen Date: Tue, 5 Oct 2021 19:18:50 +0200 Subject: [PATCH 03/26] Removed expected errors display in alerts on screen --- src/app/interceptors/http.interceptor.ts | 3 + .../settings-dropdown.component.html | 2 +- .../settings-dropdown.component.ts | 104 ++++++++++-------- .../transfer-ownership.component.ts | 3 + src/app/services/project.service.ts | 13 +-- 5 files changed, 72 insertions(+), 53 deletions(-) diff --git a/src/app/interceptors/http.interceptor.ts b/src/app/interceptors/http.interceptor.ts index 5e877392..a254d616 100644 --- a/src/app/interceptors/http.interceptor.ts +++ b/src/app/interceptors/http.interceptor.ts @@ -61,6 +61,9 @@ export class HttpErrorInterceptor implements HttpInterceptor { {endpoint: 'highlight/project/', method: HttpMethods.GET}, {endpoint: 'wizard', method: HttpMethods.GET}, {endpoint: 'project/search/autocomplete', method: HttpMethods.GET}, + {endpoint: 'project/transfer', method: HttpMethods.POST}, + {endpoint: 'project/transfer', method: HttpMethods.GET}, + {endpoint: 'project/transfer', method: HttpMethods.DELETE} ]; private readonly ignoredStatusCodes: number[] = [ diff --git a/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.html b/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.html index 14c627df..2654fbd5 100644 --- a/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.html +++ b/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.html @@ -13,7 +13,7 @@ Delete project - Transfer ownership + Transfer ownership diff --git a/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts b/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts index 664760ff..64e4a4cf 100644 --- a/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts +++ b/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts @@ -10,7 +10,7 @@ import { HighlightFormResult, ModalHighlightFormComponent } from '../../../modal import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { Router } from '@angular/router'; import { BsModalService, ModalOptions } from 'ngx-bootstrap/modal'; -import { BehaviorSubject, EMPTY } from 'rxjs'; +import { EMPTY } from 'rxjs'; import { switchMap } from 'rxjs/operators'; import { ModalDeleteGenericComponent } from 'src/app/components/modals/modal-delete-generic/modal-delete-generic.component'; import { Project } from 'src/app/models/domain/project'; @@ -22,8 +22,6 @@ import { HighlightByProjectIdService } from 'src/app/services/highlightid.servic import { ProjectService } from 'src/app/services/project.service'; import { ModalPotentialNewOwnerUserEmailComponent } from 'src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component'; import { ModalPotentialNewOwnerUserEmailConfirmationComponent } from 'src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component'; -import { HttpClient } from '@angular/common/http'; -import { Observable } from 'rxjs'; @Component({ selector: 'app-settings-dropdown', @@ -50,17 +48,11 @@ export class SettingsDropdownComponent implements OnInit { private modalService: BsModalService, private alertService: AlertService, private highlightByProjectIdService: HighlightByProjectIdService, - private router: Router, - private http: HttpClient) { } + private router: Router) { } ngOnInit(): void { this.determineDisplayEditAndDeleteProjectButton(); this.determineDisplayHighlightButton(); - this.projectService.checkProjectHasTransferRequest(this.project.id).subscribe(guid => { - this.transferGuid = guid; - }, error => { - console.log('xx: ' + error); - }) } /** @@ -186,49 +178,73 @@ export class SettingsDropdownComponent implements OnInit { } /** - * + * Method triggered on transfer ownership button pressed. + * Opens modal depending on if the project has a existing transfer request. */ - public determineNextModal() { - if (this.transferGuid != null) { - const modalOptions: ModalOptions = { - initialState: { - titleText: 'Delete transfer request', - mainText: `Are you sure you want to delete the transfer request for this project, ${this.project.name}?`, - } - }; - const deleteRefModal = this.modalService.show(ModalDeleteGenericComponent, modalOptions); - deleteRefModal.content.remove.subscribe((clickedRemove: boolean) => { - if (clickedRemove) { - this.projectService.deleteTransferRequest(this.transferGuid).subscribe(() => console.log('deleted pik')); - } - }); - } else { - const modalRefEmail = this.modalService.show(ModalPotentialNewOwnerUserEmailComponent); - modalRefEmail.content.potentialNewOwnerUserEmailEvent.subscribe((potentialNewOwnerUserEmail: string) => { - this.potentialNewOwnerUserEmail = potentialNewOwnerUserEmail - this.showConfirmModal(); + public onClickTransferOwnership() { + this.projectService.checkProjectHasTransferRequest(this.project.id).subscribe(guid => { + this.transferGuid = guid; + this.showDeleteTransferRequestModal(); + }, () => { + this.showPotentialNewOwnerUserEmailModal(); + }); + } + + /** + * Method for showing the potential new owner user email modal. + */ + private showPotentialNewOwnerUserEmailModal() { + const modalRefEmail = this.modalService.show(ModalPotentialNewOwnerUserEmailComponent); + modalRefEmail.content.potentialNewOwnerUserEmailEvent.subscribe((potentialNewOwnerUserEmail: string) => { + this.potentialNewOwnerUserEmail = potentialNewOwnerUserEmail + this.showPotentialNewOwnerUserEmailConfirmationModal(); + }); + } + + /** + * Method for showing the potential new owner user email confirmation modal. + */ + private showDeleteTransferRequestModal() { + const modalOptions: ModalOptions = { + initialState: { + titleText: 'Delete transfer request', + mainText: `Are you sure you want to delete the transfer request for this project, ${this.project.name}?`, + } + }; + const deleteRefModal = this.modalService.show(ModalDeleteGenericComponent, modalOptions); + deleteRefModal.content.remove.subscribe(() => { + this.projectService.deleteTransferRequest(this.transferGuid).subscribe(() => { + const alertConfig: AlertConfig = { + type: AlertType.success, + preMessage: 'Transfer ownership request canceled', + mainMessage: 'Transfer ownership request canceled', + dismissible: true, + autoDismiss: true, + timeout: this.alertService.defaultTimeout + }; + this.alertService.pushAlert(alertConfig); }); - } + }); } /** * Method for asking user to confirm filled in potential new owner user email. */ - private showConfirmModal() { - console.log('1'); + private showPotentialNewOwnerUserEmailConfirmationModal() { var email = this.potentialNewOwnerUserEmail; - console.log('2'); - // Display modal const modalRefEmailConfirm = this.modalService.show(ModalPotentialNewOwnerUserEmailConfirmationComponent, {initialState: {email}}); - console.log('3'); - // Wait for modal to emit true - modalRefEmailConfirm.content.didConfirmEvent.subscribe((didClick: boolean) => { - console.log('4'); - if (didClick) { - console.log('5'); - this.projectService.initiateTransferProjectOwnership(this.project.id, this.potentialNewOwnerUserEmail); - } - console.log('10'); + modalRefEmailConfirm.content.didConfirmEvent.subscribe(() => { + this.projectService.initiateTransferProjectOwnership(this.project.id, this.potentialNewOwnerUserEmail).subscribe(() => { + const alertConfig: AlertConfig = { + type: AlertType.success, + preMessage: 'Transfer ownership requested', + mainMessage: `Transfer ownership requested from ${this.potentialNewOwnerUserEmail}`, + dismissible: true, + autoDismiss: true, + timeout: this.alertService.defaultTimeout + }; + this.alertService.pushAlert(alertConfig); + }); }); } diff --git a/src/app/modules/project/transfer-ownership/transfer-ownership.component.ts b/src/app/modules/project/transfer-ownership/transfer-ownership.component.ts index 8a52dd10..48782758 100644 --- a/src/app/modules/project/transfer-ownership/transfer-ownership.component.ts +++ b/src/app/modules/project/transfer-ownership/transfer-ownership.component.ts @@ -33,6 +33,9 @@ export class TransferOwnershipComponent implements OnInit { this.reply = response.body; this.replyStatus = response.status; this.isLoading = false; + }, (error: HttpErrorResponse) => { + this.reply = error.message; + this.replyStatus = error.status; }) } } diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts index 992d5b26..b4f0b659 100644 --- a/src/app/services/project.service.ts +++ b/src/app/services/project.service.ts @@ -20,15 +20,13 @@ import { HttpBaseService } from './http-base.service'; import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; -import { from, Observable, pipe, throwError } from 'rxjs'; -import { catchError, map, mergeMap } from 'rxjs/operators'; +import { from, Observable } from 'rxjs'; +import { map, mergeMap } from 'rxjs/operators'; import { API_CONFIG } from 'src/app/config/api-config'; import { CallToActionIconsConfig } from 'src/app/config/call-to-action-icons-config'; import { Project } from 'src/app/models/domain/project'; import { ProjectAdd } from 'src/app/models/resources/project-add'; import { ProjectUpdate } from 'src/app/models/resources/project-update'; -import { HttpHeaders } from '@angular/common/http'; -import { share } from 'rxjs/operators'; @Injectable({ providedIn: 'root', @@ -60,12 +58,11 @@ export class ProjectService extends HttpBaseService { - console.log('6'); - return this.http.post(`${this.url}/transfer/${projectId}`, '', {headers: {'Content-Type':'text'}, params: {potentialNewOwnerUserEmail: potentialNewOwnerUserEmail}}) + return this.http.post(`${this.url}/transfer/${projectId}`, '', {headers: {'Content-Type':'text'}, params: {potentialNewOwnerUserEmail: potentialNewOwnerUserEmail}}); } public processTransferProjectOwnership(transferGuid: string, isOwnerMail: boolean, acceptedRequest: boolean): Observable { - return this.http.get(`${this.url}/transfer/process/${transferGuid}/${isOwnerMail}/${acceptedRequest}`, {responseType: 'text', observe: 'response'}) + return this.http.get(`${this.url}/transfer/process/${transferGuid}/${isOwnerMail}/${acceptedRequest}`, {responseType: 'text', observe: 'response'}); } public checkProjectHasTransferRequest(projectId: number): Observable { @@ -73,7 +70,7 @@ export class ProjectService extends HttpBaseService { - return this.http.delete(`${this.url}/transfer/${transferGuid}`).pipe(share()); + return this.http.delete(`${this.url}/transfer/${transferGuid}`); } private addLikes(project: any): Promise { From 272e42543c71796045afd0f8bccb51b8a8df501e Mon Sep 17 00:00:00 2001 From: Sven Hansen Date: Wed, 6 Oct 2021 00:13:25 +0200 Subject: [PATCH 04/26] Fixed errors, created confirmation after initializing a transfer project ownership request, created modal in between the transfer ownership button and the cancel request modal --- src/app/app.module.ts | 4 +- .../modal-information-generic.component.html | 16 ++++++ .../modal-information-generic.component.scss | 55 +++++++++++++++++++ .../modal-information-generic.component.ts | 34 ++++++++++++ .../settings-dropdown.component.ts | 38 ++++++++++--- src/app/services/project.service.ts | 4 +- 6 files changed, 139 insertions(+), 12 deletions(-) create mode 100644 src/app/components/modals/modal-information-generic/modal-information-generic.component.html create mode 100644 src/app/components/modals/modal-information-generic/modal-information-generic.component.scss create mode 100644 src/app/components/modals/modal-information-generic/modal-information-generic.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8f92e561..715006b5 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -43,6 +43,7 @@ import { QuillModule } from 'ngx-quill'; import { ModalPotentialNewOwnerUserEmailComponent } from './components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component'; import { ModalPotentialNewOwnerUserEmailConfirmationComponent } from './components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component'; import { TransferOwnershipComponent } from './modules/project/transfer-ownership/transfer-ownership.component'; +import { ModalInformationGenericComponent } from './components/modals/modal-information-generic/modal-information-generic.component'; @NgModule({ declarations: [ @@ -57,7 +58,8 @@ import { TransferOwnershipComponent } from './modules/project/transfer-ownership SearchComponent, ModalPotentialNewOwnerUserEmailComponent, ModalPotentialNewOwnerUserEmailConfirmationComponent, - TransferOwnershipComponent + TransferOwnershipComponent, + ModalInformationGenericComponent ], imports: [ BsDropdownModule.forRoot(), diff --git a/src/app/components/modals/modal-information-generic/modal-information-generic.component.html b/src/app/components/modals/modal-information-generic/modal-information-generic.component.html new file mode 100644 index 00000000..ecc53824 --- /dev/null +++ b/src/app/components/modals/modal-information-generic/modal-information-generic.component.html @@ -0,0 +1,16 @@ +
+ +
+

{{titleText}}

+

+
+
+ + +
+
+ +
+
diff --git a/src/app/components/modals/modal-information-generic/modal-information-generic.component.scss b/src/app/components/modals/modal-information-generic/modal-information-generic.component.scss new file mode 100644 index 00000000..7d758eca --- /dev/null +++ b/src/app/components/modals/modal-information-generic/modal-information-generic.component.scss @@ -0,0 +1,55 @@ +/* + * + * Digital Excellence Copyright (C) 2020 Brend Smits + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Lesser General Public License as published + * by the Free Software Foundation version 3 of the License. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty + * of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. + * See the GNU Lesser General Public License for more details. + * + * You can find a copy of the GNU Lesser General Public License + * along with this program, in the LICENSE.md file in the root project directory. + * If not, see https://www.gnu.org/licenses/lgpl-3.0.txt + * + */ + @import "assets/styles/variables"; + + .modal-body { + position: unset; + } + + .modal-information-container { + background: #f8f8f8; + width: 100%; + max-width: 600px; + border-radius: 6px; + border: none; + outline: none; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); + padding: 15px; + + button.close { + border: none; + background: none; + display: flex; + float: right; + &:focus, + &:active { + border: none; + outline: none; + } + } + } + + .modal-buttons { + display: flex; + justify-content: flex-end; + + button:nth-child(1) { + margin-right: 15px; + } + } diff --git a/src/app/components/modals/modal-information-generic/modal-information-generic.component.ts b/src/app/components/modals/modal-information-generic/modal-information-generic.component.ts new file mode 100644 index 00000000..dc9f35ae --- /dev/null +++ b/src/app/components/modals/modal-information-generic/modal-information-generic.component.ts @@ -0,0 +1,34 @@ +import { Component, EventEmitter, Output } from '@angular/core'; +import { BsModalRef } from 'ngx-bootstrap/modal'; + +@Component({ + selector: 'app-modal-information-generic', + templateUrl: './modal-information-generic.component.html', + styleUrls: ['./modal-information-generic.component.scss'] +}) +export class ModalInformationGenericComponent { + + @Output() cta = new EventEmitter(true); + + public readonly titleText = ''; + public readonly mainText = ''; + public readonly ctaButtonText = ''; + public readonly secondaryButtonText = ''; + + constructor( + public bsModalRef: BsModalRef, + ) { } + + ngOnInit(): void { + } + + /** + * Method which triggers when remove is confirmed. + * Emits true via the output property and closes the modal. + */ + public onClickCta(): void { + this.cta.emit(true); + this.bsModalRef.hide(); + } + +} diff --git a/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts b/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts index 64e4a4cf..7fa50c44 100644 --- a/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts +++ b/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts @@ -22,6 +22,7 @@ import { HighlightByProjectIdService } from 'src/app/services/highlightid.servic import { ProjectService } from 'src/app/services/project.service'; import { ModalPotentialNewOwnerUserEmailComponent } from 'src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component'; import { ModalPotentialNewOwnerUserEmailConfirmationComponent } from 'src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component'; +import { ModalInformationGenericComponent } from 'src/app/components/modals/modal-information-generic/modal-information-generic.component'; @Component({ selector: 'app-settings-dropdown', @@ -184,7 +185,7 @@ export class SettingsDropdownComponent implements OnInit { public onClickTransferOwnership() { this.projectService.checkProjectHasTransferRequest(this.project.id).subscribe(guid => { this.transferGuid = guid; - this.showDeleteTransferRequestModal(); + this.showTransferRequestStatusModal(); }, () => { this.showPotentialNewOwnerUserEmailModal(); }); @@ -201,14 +202,33 @@ export class SettingsDropdownComponent implements OnInit { }); } + /** + * Method for showing the project ownership transfer request status with + * possibility to cancel this request. + */ + private showTransferRequestStatusModal() { + const modalOptions: ModalOptions = { + initialState: { + titleText: 'Transfer ownership request', + mainText: `Your transfer ownership request for this project is waiting for acceptence or denial.`, + ctaButtonText: 'Cancel request', + secondaryButtonText: 'Go back' + } + }; + const informationRefModal = this.modalService.show(ModalInformationGenericComponent, modalOptions); + informationRefModal.content.cta.subscribe(() => { + this.showDeleteTransferRequestModal(); + }); + } + /** * Method for showing the potential new owner user email confirmation modal. */ private showDeleteTransferRequestModal() { const modalOptions: ModalOptions = { initialState: { - titleText: 'Delete transfer request', - mainText: `Are you sure you want to delete the transfer request for this project, ${this.project.name}?`, + titleText: 'Cancel transfer request', + mainText: `Are you sure you want to cancel the transfer request for this project, ${this.project.name}?`, } }; const deleteRefModal = this.modalService.show(ModalDeleteGenericComponent, modalOptions); @@ -216,11 +236,11 @@ export class SettingsDropdownComponent implements OnInit { this.projectService.deleteTransferRequest(this.transferGuid).subscribe(() => { const alertConfig: AlertConfig = { type: AlertType.success, - preMessage: 'Transfer ownership request canceled', + preMessage: '', mainMessage: 'Transfer ownership request canceled', dismissible: true, autoDismiss: true, - timeout: this.alertService.defaultTimeout + timeout: 10000 }; this.alertService.pushAlert(alertConfig); }); @@ -234,14 +254,14 @@ export class SettingsDropdownComponent implements OnInit { var email = this.potentialNewOwnerUserEmail; const modalRefEmailConfirm = this.modalService.show(ModalPotentialNewOwnerUserEmailConfirmationComponent, {initialState: {email}}); modalRefEmailConfirm.content.didConfirmEvent.subscribe(() => { - this.projectService.initiateTransferProjectOwnership(this.project.id, this.potentialNewOwnerUserEmail).subscribe(() => { + this.projectService.initiateTransferProjectOwnership(this.project.id, this.potentialNewOwnerUserEmail).subscribe(response => { const alertConfig: AlertConfig = { type: AlertType.success, - preMessage: 'Transfer ownership requested', - mainMessage: `Transfer ownership requested from ${this.potentialNewOwnerUserEmail}`, + preMessage: '', + mainMessage: 'Transfer ownership request confirmation has been sent to your email inbox', dismissible: true, autoDismiss: true, - timeout: this.alertService.defaultTimeout + timeout: 10000 }; this.alertService.pushAlert(alertConfig); }); diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts index b4f0b659..66cf7a58 100644 --- a/src/app/services/project.service.ts +++ b/src/app/services/project.service.ts @@ -58,7 +58,7 @@ export class ProjectService extends HttpBaseService { - return this.http.post(`${this.url}/transfer/${projectId}`, '', {headers: {'Content-Type':'text'}, params: {potentialNewOwnerUserEmail: potentialNewOwnerUserEmail}}); + return this.http.post(`${this.url}/transfer/${projectId}`, '', {responseType: 'text', params: {potentialNewOwnerUserEmail: potentialNewOwnerUserEmail}}); } public processTransferProjectOwnership(transferGuid: string, isOwnerMail: boolean, acceptedRequest: boolean): Observable { @@ -70,7 +70,7 @@ export class ProjectService extends HttpBaseService { - return this.http.delete(`${this.url}/transfer/${transferGuid}`); + return this.http.delete(`${this.url}/transfer/${transferGuid}`, {responseType: 'text'}); } private addLikes(project: any): Promise { From b6aa5f645f0b6c4053209e4d7cb6fc2f72562510 Mon Sep 17 00:00:00 2001 From: Sven Hansen Date: Wed, 6 Oct 2021 00:56:27 +0200 Subject: [PATCH 05/26] Removed not-needed endpoint ignores --- src/app/interceptors/http.interceptor.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/app/interceptors/http.interceptor.ts b/src/app/interceptors/http.interceptor.ts index a254d616..6051a5b8 100644 --- a/src/app/interceptors/http.interceptor.ts +++ b/src/app/interceptors/http.interceptor.ts @@ -61,9 +61,7 @@ export class HttpErrorInterceptor implements HttpInterceptor { {endpoint: 'highlight/project/', method: HttpMethods.GET}, {endpoint: 'wizard', method: HttpMethods.GET}, {endpoint: 'project/search/autocomplete', method: HttpMethods.GET}, - {endpoint: 'project/transfer', method: HttpMethods.POST}, - {endpoint: 'project/transfer', method: HttpMethods.GET}, - {endpoint: 'project/transfer', method: HttpMethods.DELETE} + {endpoint: 'project/transfer', method: HttpMethods.GET} ]; private readonly ignoredStatusCodes: number[] = [ From 99f189035e63c24203b28c18d20850c9ad7d39dd Mon Sep 17 00:00:00 2001 From: Sven Hansen Date: Wed, 6 Oct 2021 11:58:26 +0200 Subject: [PATCH 06/26] Added modal when given email does not exist --- src/app/app.module.ts | 8 +++---- src/app/interceptors/http.interceptor.ts | 3 ++- .../settings-dropdown.component.ts | 24 +++++++++++++------ .../modules/project/project-routing.module.ts | 2 +- .../transfer-ownership.component.ts | 8 +++---- src/app/services/project.service.ts | 4 +++- 6 files changed, 31 insertions(+), 18 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 715006b5..096b05b3 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -21,6 +21,9 @@ import { AppLayoutComponent } from './components/app-layout/app-layout.component import { AuthCallbackComponent } from './components/auth-callback/auth-callback.component'; import { FooterComponent } from './components/footer/footer.component'; import { ModalDeleteGenericComponent } from './components/modals/modal-delete-generic/modal-delete-generic.component'; +import { ModalInformationGenericComponent } from './components/modals/modal-information-generic/modal-information-generic.component'; +import { ModalPotentialNewOwnerUserEmailConfirmationComponent } from './components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component'; +import { ModalPotentialNewOwnerUserEmailComponent } from './components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component'; import { NotFoundComponent } from './components/not-found/not-found.component'; import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component'; import { SearchComponent } from './components/search/search.component'; @@ -29,6 +32,7 @@ import { TokenInterceptor } from './interceptors/auth.interceptor'; import { HttpErrorInterceptor } from './interceptors/http.interceptor'; import { HomeModule } from './modules/home/home.module'; import { ProjectModule } from './modules/project/project.module'; +import { TransferOwnershipComponent } from './modules/project/transfer-ownership/transfer-ownership.component'; import { SharedModule } from './modules/shared/shared.module'; import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; @@ -40,10 +44,6 @@ import { AlertModule } from 'ngx-bootstrap/alert'; import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; import { ModalModule } from 'ngx-bootstrap/modal'; import { QuillModule } from 'ngx-quill'; -import { ModalPotentialNewOwnerUserEmailComponent } from './components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component'; -import { ModalPotentialNewOwnerUserEmailConfirmationComponent } from './components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component'; -import { TransferOwnershipComponent } from './modules/project/transfer-ownership/transfer-ownership.component'; -import { ModalInformationGenericComponent } from './components/modals/modal-information-generic/modal-information-generic.component'; @NgModule({ declarations: [ diff --git a/src/app/interceptors/http.interceptor.ts b/src/app/interceptors/http.interceptor.ts index 6051a5b8..aa99ff08 100644 --- a/src/app/interceptors/http.interceptor.ts +++ b/src/app/interceptors/http.interceptor.ts @@ -61,7 +61,8 @@ export class HttpErrorInterceptor implements HttpInterceptor { {endpoint: 'highlight/project/', method: HttpMethods.GET}, {endpoint: 'wizard', method: HttpMethods.GET}, {endpoint: 'project/search/autocomplete', method: HttpMethods.GET}, - {endpoint: 'project/transfer', method: HttpMethods.GET} + {endpoint: 'project/transfer', method: HttpMethods.GET}, + {endpoint: 'project/transfer', method: HttpMethods.POST} ]; private readonly ignoredStatusCodes: number[] = [ diff --git a/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts b/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts index 7fa50c44..4ae15bd5 100644 --- a/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts +++ b/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts @@ -13,6 +13,9 @@ import { BsModalService, ModalOptions } from 'ngx-bootstrap/modal'; import { EMPTY } from 'rxjs'; import { switchMap } from 'rxjs/operators'; import { ModalDeleteGenericComponent } from 'src/app/components/modals/modal-delete-generic/modal-delete-generic.component'; +import { ModalInformationGenericComponent } from 'src/app/components/modals/modal-information-generic/modal-information-generic.component'; +import { ModalPotentialNewOwnerUserEmailConfirmationComponent } from 'src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component'; +import { ModalPotentialNewOwnerUserEmailComponent } from 'src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component'; import { Project } from 'src/app/models/domain/project'; import { AlertType } from 'src/app/models/internal/alert-type'; import { AlertService } from 'src/app/services/alert.service'; @@ -20,9 +23,6 @@ import { AuthService } from 'src/app/services/auth.service'; import { HighlightService } from 'src/app/services/highlight.service'; import { HighlightByProjectIdService } from 'src/app/services/highlightid.service'; import { ProjectService } from 'src/app/services/project.service'; -import { ModalPotentialNewOwnerUserEmailComponent } from 'src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component'; -import { ModalPotentialNewOwnerUserEmailConfirmationComponent } from 'src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component'; -import { ModalInformationGenericComponent } from 'src/app/components/modals/modal-information-generic/modal-information-generic.component'; @Component({ selector: 'app-settings-dropdown', @@ -39,7 +39,7 @@ export class SettingsDropdownComponent implements OnInit { public displayHighlightButton = false; public displayTransferProjectOwnershipButton = false; - public potentialNewOwnerUserEmail = ""; + public potentialNewOwnerUserEmail = ''; private transferGuid: string = null; @@ -197,7 +197,7 @@ export class SettingsDropdownComponent implements OnInit { private showPotentialNewOwnerUserEmailModal() { const modalRefEmail = this.modalService.show(ModalPotentialNewOwnerUserEmailComponent); modalRefEmail.content.potentialNewOwnerUserEmailEvent.subscribe((potentialNewOwnerUserEmail: string) => { - this.potentialNewOwnerUserEmail = potentialNewOwnerUserEmail + this.potentialNewOwnerUserEmail = potentialNewOwnerUserEmail; this.showPotentialNewOwnerUserEmailConfirmationModal(); }); } @@ -251,10 +251,10 @@ export class SettingsDropdownComponent implements OnInit { * Method for asking user to confirm filled in potential new owner user email. */ private showPotentialNewOwnerUserEmailConfirmationModal() { - var email = this.potentialNewOwnerUserEmail; + const email = this.potentialNewOwnerUserEmail; const modalRefEmailConfirm = this.modalService.show(ModalPotentialNewOwnerUserEmailConfirmationComponent, {initialState: {email}}); modalRefEmailConfirm.content.didConfirmEvent.subscribe(() => { - this.projectService.initiateTransferProjectOwnership(this.project.id, this.potentialNewOwnerUserEmail).subscribe(response => { + this.projectService.initiateTransferProjectOwnership(this.project.id, this.potentialNewOwnerUserEmail).subscribe(() => { const alertConfig: AlertConfig = { type: AlertType.success, preMessage: '', @@ -264,6 +264,16 @@ export class SettingsDropdownComponent implements OnInit { timeout: 10000 }; this.alertService.pushAlert(alertConfig); + }, () => { + const alertConfig: AlertConfig = { + type: AlertType.danger, + preMessage: '', + mainMessage: 'Email not sent, make sure you fill in the right email', + dismissible: true, + autoDismiss: true, + timeout: 10000 + }; + this.alertService.pushAlert(alertConfig); }); }); } diff --git a/src/app/modules/project/project-routing.module.ts b/src/app/modules/project/project-routing.module.ts index 2fa9560b..9e63bb31 100644 --- a/src/app/modules/project/project-routing.module.ts +++ b/src/app/modules/project/project-routing.module.ts @@ -17,10 +17,10 @@ import { EditComponent } from './edit/edit.component'; import { EmbedComponent } from './embed/embed.component'; import { OverviewComponent } from './overview/overview.component'; +import { TransferOwnershipComponent } from './transfer-ownership/transfer-ownership.component'; import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { TransferOwnershipComponent } from './transfer-ownership/transfer-ownership.component'; const routes: Routes = [ {path: 'overview', component: OverviewComponent}, diff --git a/src/app/modules/project/transfer-ownership/transfer-ownership.component.ts b/src/app/modules/project/transfer-ownership/transfer-ownership.component.ts index 48782758..9c95b5d1 100644 --- a/src/app/modules/project/transfer-ownership/transfer-ownership.component.ts +++ b/src/app/modules/project/transfer-ownership/transfer-ownership.component.ts @@ -1,8 +1,8 @@ +import { HttpErrorResponse } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; -import { ProjectService } from 'src/app/services/project.service'; import { ActivatedRoute } from '@angular/router'; -import { HttpErrorResponse } from '@angular/common/http'; import { catchError } from 'rxjs/operators'; +import { ProjectService } from 'src/app/services/project.service'; @Component({ selector: 'app-transfer-ownership', @@ -15,7 +15,7 @@ export class TransferOwnershipComponent implements OnInit { private isOwnerMail; private acceptedRequest; - public reply = ""; + public reply = ''; public replyStatus: number; public isLoading = true; @@ -36,6 +36,6 @@ export class TransferOwnershipComponent implements OnInit { }, (error: HttpErrorResponse) => { this.reply = error.message; this.replyStatus = error.status; - }) + }); } } diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts index 66cf7a58..aa78f687 100644 --- a/src/app/services/project.service.ts +++ b/src/app/services/project.service.ts @@ -58,7 +58,9 @@ export class ProjectService extends HttpBaseService { - return this.http.post(`${this.url}/transfer/${projectId}`, '', {responseType: 'text', params: {potentialNewOwnerUserEmail: potentialNewOwnerUserEmail}}); + return this.http.post(`${this.url}/transfer/${projectId}`, '', + {responseType: 'text', params: {potentialNewOwnerUserEmail: potentialNewOwnerUserEmail}} + ); } public processTransferProjectOwnership(transferGuid: string, isOwnerMail: boolean, acceptedRequest: boolean): Observable { From df106f4dff2835deb81237e8021cc6d08c43427a Mon Sep 17 00:00:00 2001 From: Sven Hansen Date: Wed, 6 Oct 2021 12:07:41 +0200 Subject: [PATCH 07/26] Added accidentally deleted eventEmitter --- .../settings-dropdown/settings-dropdown.component.ts | 3 --- src/app/services/project.service.ts | 2 ++ 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts b/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts index cd728014..cb24b3a1 100644 --- a/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts +++ b/src/app/modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.ts @@ -4,13 +4,10 @@ import { BsModalService, ModalOptions } from 'ngx-bootstrap/modal'; import { EMPTY } from 'rxjs'; import { switchMap } from 'rxjs/operators'; import { ModalDeleteGenericComponent } from 'src/app/components/modals/modal-delete-generic/modal-delete-generic.component'; -<<<<<<< HEAD import { ModalInformationGenericComponent } from 'src/app/components/modals/modal-information-generic/modal-information-generic.component'; import { ModalPotentialNewOwnerUserEmailConfirmationComponent } from 'src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component'; import { ModalPotentialNewOwnerUserEmailComponent } from 'src/app/components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component'; -======= import { Highlight } from 'src/app/models/domain/highlight'; ->>>>>>> 1165fb4c17cc499591b330d3099ed33601e9eb4c import { Project } from 'src/app/models/domain/project'; import { scopes } from 'src/app/models/domain/scopes'; import { User } from 'src/app/models/domain/user'; diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts index f9bc1817..fca5ff3e 100644 --- a/src/app/services/project.service.ts +++ b/src/app/services/project.service.ts @@ -36,6 +36,8 @@ export class ProjectService extends HttpBaseService = new EventEmitter(); + public get(id: number): Observable { return super.get(id) .pipe( From 4345a2b60eaf583d5419bd1c96a165f8b7a910ed Mon Sep 17 00:00:00 2001 From: Sven Hansen <76601644+1SvenHansen@users.noreply.github.com> Date: Wed, 6 Oct 2021 15:13:06 +0200 Subject: [PATCH 08/26] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6b557e6a..797ac403 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ### Added - Added pagination to own projects page. [#526](https://github.com/DigitalExcellence/dex-frontend/issues/526) - Back button to add project wizard - [#563](https://github.com/DigitalExcellence/dex-frontend/issues/563) +- Frontend implementation of transfer project ownership - [#581](https://github.com/DigitalExcellence/dex-frontend/issues/581) ### Changed - Projects overview not sorting on Likes High > Low [#557](https://github.com/DigitalExcellence/dex-frontend/issues/557) From 721ac62dee9f324fd47523cc40acd310da66acaa Mon Sep 17 00:00:00 2001 From: Julia <71012148+juliaslaats@users.noreply.github.com> Date: Thu, 7 Oct 2021 10:28:06 +0200 Subject: [PATCH 09/26] added mobile styling to overlay --- .../project/details/edit/edit.component.html | 2 +- .../project/details/edit/edit.component.scss | 20 +++++++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/app/modules/project/details/edit/edit.component.html b/src/app/modules/project/details/edit/edit.component.html index dea76bb2..632ee87e 100644 --- a/src/app/modules/project/details/edit/edit.component.html +++ b/src/app/modules/project/details/edit/edit.component.html @@ -149,7 +149,7 @@

Collaborator role

-
diff --git a/src/app/modules/project/details/edit/edit.component.scss b/src/app/modules/project/details/edit/edit.component.scss index fe15e04d..463d1b0c 100644 --- a/src/app/modules/project/details/edit/edit.component.scss +++ b/src/app/modules/project/details/edit/edit.component.scss @@ -72,6 +72,15 @@ opacity: 1; } } + + @media only screen and (max-width: 600px) { + .overlay{ + opacity: 1; + em { + opacity: .8; + } + } + } } .icon-remove-btn { grid-column: 2; @@ -339,6 +348,17 @@ opacity: 1; } } + + @media only screen and (max-width: 600px) { + .overlay { + &.trash{ + opacity: 1; + em { + opacity: .8; + } + } + } + } } img { From 936049880c495322a6bd2776b6aaf82d9df2d595 Mon Sep 17 00:00:00 2001 From: Neal Geilen <44571222+NealGeilen@users.noreply.github.com> Date: Mon, 11 Oct 2021 10:29:50 +0200 Subject: [PATCH 10/26] bugfix: fixed bug so content is loaded on the correct page for projects overview --- CHANGELOG.md | 15 +++++++++++++++ .../overview/filter-menu/filter-menu.component.ts | 4 ++-- .../project/overview/overview.component.ts | 3 +-- 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6b557e6a..f2f8a1c8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,21 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## Release v.1.8.0-beta - [] + +### Added + +### Changed + +### Deprecated + +### Removed + +### Fixed +- Fixed pagination project overview - [#564](https://github.com/DigitalExcellence/dex-frontend/issues/564) + +### Security + ## Release v.1.7.0-beta - 8-10-2021 ### Added diff --git a/src/app/modules/project/overview/filter-menu/filter-menu.component.ts b/src/app/modules/project/overview/filter-menu/filter-menu.component.ts index d8ba1b8c..0cab65c9 100644 --- a/src/app/modules/project/overview/filter-menu/filter-menu.component.ts +++ b/src/app/modules/project/overview/filter-menu/filter-menu.component.ts @@ -165,11 +165,12 @@ export class FilterMenuComponent implements OnInit { * Method that retrieves the value that has changed from the pagination dropdown in the accordion, * and based on that value retrieves the paginated projects with the right parameters. */ - public onPaginationChange() { + public onPaginationChange(page:number = this.currentPage) { this.amountOfProjectsOnSinglePage = this.paginationOptionControl.value.amountOnPage; if (this.amountOfProjectsOnSinglePage === this.paginationResponse.totalCount) { this.currentPage = 1; } + this.currentPage = page; this.updateQueryParams(); this.onInternalQueryChange(); } @@ -202,7 +203,6 @@ export class FilterMenuComponent implements OnInit { .filter(value => value) }; - if (internalSearchQuery.query == null) { // No search query provided use projectService. this.paginationService diff --git a/src/app/modules/project/overview/overview.component.ts b/src/app/modules/project/overview/overview.component.ts index 9f18710d..bd0de382 100644 --- a/src/app/modules/project/overview/overview.component.ts +++ b/src/app/modules/project/overview/overview.component.ts @@ -119,8 +119,7 @@ export class OverviewComponent implements OnInit, AfterViewInit { */ public pageChanged(page: number): void { this.currentPage = page; - - this.filterMenu.onPaginationChange(); + this.filterMenu.onPaginationChange(page); } public filteredProjectsChanged(result): void { From ad4d5a5d95759c7c200a0fc3b2be9db24d7cd32b Mon Sep 17 00:00:00 2001 From: Neal Geilen <44571222+NealGeilen@users.noreply.github.com> Date: Tue, 12 Oct 2021 12:15:00 +0200 Subject: [PATCH 11/26] bugfix: white space fix --- .../project/overview/filter-menu/filter-menu.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/modules/project/overview/filter-menu/filter-menu.component.ts b/src/app/modules/project/overview/filter-menu/filter-menu.component.ts index 0cab65c9..aac26522 100644 --- a/src/app/modules/project/overview/filter-menu/filter-menu.component.ts +++ b/src/app/modules/project/overview/filter-menu/filter-menu.component.ts @@ -165,7 +165,7 @@ export class FilterMenuComponent implements OnInit { * Method that retrieves the value that has changed from the pagination dropdown in the accordion, * and based on that value retrieves the paginated projects with the right parameters. */ - public onPaginationChange(page:number = this.currentPage) { + public onPaginationChange(page: number = this.currentPage) { this.amountOfProjectsOnSinglePage = this.paginationOptionControl.value.amountOnPage; if (this.amountOfProjectsOnSinglePage === this.paginationResponse.totalCount) { this.currentPage = 1; From 8f6e7e010c82908279039ff875f6b3f8e74598ed Mon Sep 17 00:00:00 2001 From: JR Strayhorn Date: Fri, 15 Oct 2021 10:32:55 -0400 Subject: [PATCH 12/26] adding maxlength validator and error message --- .../default/project-name/project-name.component.html | 3 +++ .../default/project-name/project-name.component.ts | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/app/modules/project/add/main/wizard/wizardPages/default/project-name/project-name.component.html b/src/app/modules/project/add/main/wizard/wizardPages/default/project-name/project-name.component.html index 8c813395..7b692f88 100644 --- a/src/app/modules/project/add/main/wizard/wizardPages/default/project-name/project-name.component.html +++ b/src/app/modules/project/add/main/wizard/wizardPages/default/project-name/project-name.component.html @@ -30,6 +30,9 @@

{{step.name}}

+
+ Project Name should be less than {{ projectName.errors.maxlength.requiredLength }} characters +
name svg
diff --git a/src/app/modules/project/add/main/wizard/wizardPages/default/project-name/project-name.component.ts b/src/app/modules/project/add/main/wizard/wizardPages/default/project-name/project-name.component.ts index 4ebb2456..66d3cc71 100644 --- a/src/app/modules/project/add/main/wizard/wizardPages/default/project-name/project-name.component.ts +++ b/src/app/modules/project/add/main/wizard/wizardPages/default/project-name/project-name.component.ts @@ -15,7 +15,7 @@ * If not, see https://www.gnu.org/licenses/lgpl-3.0.txt */ import { Component, OnInit } from '@angular/core'; -import { FormControl } from '@angular/forms'; +import { FormControl, Validators } from '@angular/forms'; import { ProjectAdd } from 'src/app/models/resources/project-add'; import { WizardStepBaseComponent } from 'src/app/modules/project/add/main/wizard/wizardPages/wizard-step-base/wizard-step-base.component'; import { WizardService } from 'src/app/services/wizard.service'; @@ -30,7 +30,7 @@ export class ProjectNameComponent extends WizardStepBaseComponent implements OnI /** * Form fields */ - public projectName = new FormControl(''); + public projectName = new FormControl('', Validators.maxLength(75)); /** * Remembers if project-name is the first step in the current wizard */ From 535712316096d1721d8e7d0bb69cdb82c4f278d0 Mon Sep 17 00:00:00 2001 From: Bart van Eijkelenburg <73314842+BartvanEijkelenburg@users.noreply.github.com> Date: Tue, 19 Oct 2021 13:16:28 +0200 Subject: [PATCH 13/26] Fixed Silent Refresh upon 401 Error --- src/app/interceptors/http.interceptor.ts | 47 ++++++++++++++---------- src/app/services/auth.service.ts | 29 ++++++++++++++- 2 files changed, 55 insertions(+), 21 deletions(-) diff --git a/src/app/interceptors/http.interceptor.ts b/src/app/interceptors/http.interceptor.ts index 5e877392..bec75cfb 100644 --- a/src/app/interceptors/http.interceptor.ts +++ b/src/app/interceptors/http.interceptor.ts @@ -24,6 +24,7 @@ import { AlertConfig } from 'src/app/models/internal/alert-config'; import { AlertType } from 'src/app/models/internal/alert-type'; import { DeXHttpErrorResponse } from 'src/app/models/internal/dex-http-error-response'; import { AlertService } from 'src/app/services/alert.service'; +import { AuthService } from 'src/app/services/auth.service'; import { environment } from 'src/environments/environment'; /** @@ -68,7 +69,8 @@ export class HttpErrorInterceptor implements HttpInterceptor { ]; constructor( - private alertService: AlertService + private alertService: AlertService, + private authService: AuthService ) { } /** @@ -110,10 +112,17 @@ export class HttpErrorInterceptor implements HttpInterceptor { 'Please check your internet connection')); } else { // API Could be reached but returned error - // tslint:disable-next-line: max-line-length - this.alertService.pushAlert(this.createErrorAlertConfig(httpErrorResponse.error.title, httpErrorResponse.error.detail)); + this.alertService.pushAlert(this.createErrorAlertConfig(httpErrorResponse.error.title, + httpErrorResponse.error.detail)); + } + // Api returned unauthorized. + if (httpErrorResponse.status === 401) { + if (this.authService.isUserExpired()) { + this.authService.silentLogin(); + return EMPTY; + } + return EMPTY; } - // Return if the status codes are ignored. if (this.ignoredStatusCodes.includes(httpErrorResponse.status)) { return EMPTY; @@ -132,20 +141,20 @@ export class HttpErrorInterceptor implements HttpInterceptor { ); } - /** - * Method to return the default error AlertConfig for HttpInterceptor - * @param preMessage the alert message prefix. - * @param mainMessage the alert message main content. - */ + /** + * Method to return the default error AlertConfig for HttpInterceptor + * @param preMessage the alert message prefix. + * @param mainMessage the alert message main content. + */ private createErrorAlertConfig(preMessage: string, mainMessage: string): AlertConfig { - const alertConfig: AlertConfig = { - type: AlertType.danger, - preMessage: preMessage, - mainMessage: mainMessage, - dismissible: true, - autoDismiss: true, - timeout: this.alertService.defaultTimeout - }; - return alertConfig; - } + const alertConfig: AlertConfig = { + type: AlertType.danger, + preMessage: preMessage, + mainMessage: mainMessage, + dismissible: true, + autoDismiss: true, + timeout: this.alertService.defaultTimeout + }; + return alertConfig; + } } diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts index bbcc3396..1ccec69b 100644 --- a/src/app/services/auth.service.ts +++ b/src/app/services/auth.service.ts @@ -44,7 +44,7 @@ export class AuthService { private backenduser: BackendUser | null; constructor( - private userService: UserService + private userService: UserService ) { this.manager = new UserManager(getClientSettings()); @@ -69,7 +69,7 @@ export class AuthService { */ public login(providerSchema?: string): Promise { if (providerSchema != null) { - this.manager.settings.extraQueryParams = { 'provider': providerSchema }; + this.manager.settings.extraQueryParams = {'provider': providerSchema}; } return this.manager.signinRedirect(); } @@ -130,6 +130,31 @@ export class AuthService { return this.user != null && !this.user.expired; } + /** + * Checks if the users token is expired. + * @returns true if expired. + */ + public isUserExpired(): boolean { + return this.user.expired; + } + + /** + * Silent login, for use of the refresh token + */ + public silentLogin(): void { + this.manager.signinSilent().then(() => { + this.manager.getUser().then((user) => { + this.user = user; + if (this.isAuthenticated()) { + this.getBackendUser().then((backendUser) => { + this.backenduser = backendUser; + this.$user.next(backendUser); + }); + } + }).catch(err => console.log(err)); + }); + } + /** * Gets the authorization header value. */ From 0655dd8114a58081a2cee4b09164429d8760751e Mon Sep 17 00:00:00 2001 From: Bart van Eijkelenburg <73314842+BartvanEijkelenburg@users.noreply.github.com> Date: Tue, 19 Oct 2021 13:22:19 +0200 Subject: [PATCH 14/26] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 42ceba09..b8042d3b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ### Fixed - Fixed pagination project overview - [#564](https://github.com/DigitalExcellence/dex-frontend/issues/564) +- Fixed Session TimeOut input lost - [#559](https://github.com/DigitalExcellence/dex-frontend/issues/559) ### Security From 7c80a0d4d09293b83bc2fdb97fd9868953646593 Mon Sep 17 00:00:00 2001 From: Bart van Eijkelenburg <73314842+BartvanEijkelenburg@users.noreply.github.com> Date: Tue, 19 Oct 2021 13:58:00 +0200 Subject: [PATCH 15/26] Update project-name.component.html --- .../default/project-name/project-name.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/modules/project/add/main/wizard/wizardPages/default/project-name/project-name.component.html b/src/app/modules/project/add/main/wizard/wizardPages/default/project-name/project-name.component.html index 7b692f88..a00384f3 100644 --- a/src/app/modules/project/add/main/wizard/wizardPages/default/project-name/project-name.component.html +++ b/src/app/modules/project/add/main/wizard/wizardPages/default/project-name/project-name.component.html @@ -31,7 +31,7 @@

{{step.name}}

- Project Name should be less than {{ projectName.errors.maxlength.requiredLength }} characters + Project name should be less than {{ projectName.errors.maxlength.requiredLength }} characters
name svg From 894138f8f8ec20a60d0024be7330dfd6b02e6d3a Mon Sep 17 00:00:00 2001 From: Bart van Eijkelenburg Date: Wed, 20 Oct 2021 13:44:36 +0200 Subject: [PATCH 16/26] updated loading animation --- src/styles.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles.scss b/src/styles.scss index 6d66d152..178abe1e 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -68,7 +68,8 @@ body { display: flex; align-items: center; justify-content: center; - + animation-timing-function: ease-in-out; + -webkit-animation-timing-function: ease-in-out; h2 { font-size: 3em; color: $accent-color-red-primary !important; From 2d624bec6b5729b88dd6f048b0e690b347ea3f99 Mon Sep 17 00:00:00 2001 From: Bart van Eijkelenburg <73314842+BartvanEijkelenburg@users.noreply.github.com> Date: Wed, 20 Oct 2021 14:13:17 +0200 Subject: [PATCH 17/26] Fixed the navbar --- .../app-layout/app-layout.component.scss | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/app/components/app-layout/app-layout.component.scss b/src/app/components/app-layout/app-layout.component.scss index 46c6cf72..062ee9fc 100644 --- a/src/app/components/app-layout/app-layout.component.scss +++ b/src/app/components/app-layout/app-layout.component.scss @@ -35,6 +35,7 @@ .right { display: flex; } + .header-nav { display: flex; @@ -52,14 +53,12 @@ } .content { + grid-template-columns: auto 1fr auto; @include media-breakpoint-down(sm) { .search-bar { display: none; } } - @include media-breakpoint-down(md) { - grid-template-columns: auto 1fr auto !important; - } @include media-breakpoint-up(md) { display: grid !important; gap: 10px; @@ -109,6 +108,7 @@ width: 90px; } } + .navbar-toggler { border: none; } @@ -160,8 +160,9 @@ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ - user-select: none; /* Non-prefixed version, currently - supported by Chrome, Edge, Opera and Firefox */ + user-select: none; + /* Non-prefixed version, currently + supported by Chrome, Edge, Opera and Firefox */ } .account { @@ -339,6 +340,10 @@ a { cursor: pointer; + + &:active { + background-color: $light-mode-grey-secondary; + } } @include media-breakpoint-down(sm) { From 9f0ec5c0fb80e947a091305796bf3e84644c626e Mon Sep 17 00:00:00 2001 From: Bart van Eijkelenburg <73314842+BartvanEijkelenburg@users.noreply.github.com> Date: Wed, 20 Oct 2021 14:15:20 +0200 Subject: [PATCH 18/26] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5c590426..90a958b0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,7 +17,7 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ### Fixed - Fixed pagination project overview - [#564](https://github.com/DigitalExcellence/dex-frontend/issues/564) - +- Fixed the navbar layout + smooth loading animation - [#593](https://github.com/DigitalExcellence/dex-frontend/issues/593) ### Security ## Release v.1.7.0-beta - 8-10-2021 From 99acc8871aefbcb7bb9be75f0ea083012b8787f9 Mon Sep 17 00:00:00 2001 From: JR Strayhorn Date: Wed, 20 Oct 2021 18:18:38 -0400 Subject: [PATCH 19/26] Ignore Background Click, Add Close Button --- src/app/modules/project/add/main/main.component.ts | 9 +++++++-- .../project/add/main/wizard/wizard.component.html | 7 ++++++- .../modules/project/add/main/wizard/wizard.component.ts | 4 +++- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/app/modules/project/add/main/main.component.ts b/src/app/modules/project/add/main/main.component.ts index 022347fa..cc290cfd 100644 --- a/src/app/modules/project/add/main/main.component.ts +++ b/src/app/modules/project/add/main/main.component.ts @@ -20,7 +20,7 @@ import { WizardComponent } from './wizard/wizard.component'; import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { SafeUrl } from '@angular/platform-browser'; import { Router } from '@angular/router'; -import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; +import { BsModalRef, BsModalService, ModalOptions } from 'ngx-bootstrap/modal'; import { ExternalSource } from 'src/app/models/domain/external-source'; import { AlertConfig } from 'src/app/models/internal/alert-config'; import { AlertType } from 'src/app/models/internal/alert-type'; @@ -143,7 +143,12 @@ export class MainComponent implements OnInit { * Methods which creates the wizard modal */ private createWizardModal() { - this.modalRef = this.modalService.show(WizardComponent, {animated: true}); + const modalConfig: ModalOptions = { + animated: true, + ignoreBackdropClick: true, + keyboard: false + }; + this.modalRef = this.modalService.show(WizardComponent, modalConfig); this.modalRef.setClass('wizard-modal'); } diff --git a/src/app/modules/project/add/main/wizard/wizard.component.html b/src/app/modules/project/add/main/wizard/wizard.component.html index edceee1d..cdcfdf54 100644 --- a/src/app/modules/project/add/main/wizard/wizard.component.html +++ b/src/app/modules/project/add/main/wizard/wizard.component.html @@ -16,7 +16,12 @@ If not, see https://www.gnu.org/licenses/lgpl-3.0.txt --> -
+
+ +
+
diff --git a/src/app/modules/project/add/main/wizard/wizard.component.ts b/src/app/modules/project/add/main/wizard/wizard.component.ts index f75e82c4..7b658792 100644 --- a/src/app/modules/project/add/main/wizard/wizard.component.ts +++ b/src/app/modules/project/add/main/wizard/wizard.component.ts @@ -17,6 +17,7 @@ import { LocationStrategy } from '@angular/common'; import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; +import { BsModalRef } from 'ngx-bootstrap/modal'; import { Observable } from 'rxjs'; import { WizardPage } from 'src/app/models/domain/wizard-page'; import { AlertConfig } from 'src/app/models/internal/alert-config'; @@ -46,7 +47,8 @@ export class WizardComponent implements OnInit { private projectService: ProjectService, private alertService: AlertService, private location: LocationStrategy, - private authService: AuthService) { + private authService: AuthService, + public bsModalRef: BsModalRef) { // check if back or forward button is pressed and prevent it. this.registerNavigationListener(); } From e12f1474112fd611615c4281cb1426538ec82693 Mon Sep 17 00:00:00 2001 From: Bart van Eijkelenburg Date: Thu, 21 Oct 2021 11:19:41 +0200 Subject: [PATCH 20/26] Adjusted the navbar to respond with long names --- .idea/codeStyles/Project.xml | 3 --- CHANGELOG.md | 2 +- .../components/app-layout/app-layout.component.html | 13 +++++++------ .../components/app-layout/app-layout.component.scss | 12 +++++++++++- 4 files changed, 19 insertions(+), 11 deletions(-) diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml index 4e8acd1e..f8f76e00 100644 --- a/.idea/codeStyles/Project.xml +++ b/.idea/codeStyles/Project.xml @@ -426,9 +426,6 @@