From a64359b33f7c5e73efb2c3e602ebeb3ade8cc02e Mon Sep 17 00:00:00 2001 From: mdelez <60604010+mdelez@users.noreply.github.com> Date: Wed, 27 Jul 2022 14:49:46 +0200 Subject: [PATCH] feat(overview): add overview and project tile components (DEV-984) (#777) * feat(overview): add overview and project tile components * update css * feat(overview): add additional css and click events * feat(overview): add view for unknown user, add create new project button for sysadmins, add logic to redirect user to project dashboard if only member of one project * feat(project): add sidenav item to go to the projects overview * test(overview, project-tile): fix test for overview. fix and add tests for project-tile * test(overview): add tests for overview component * refactor(overview): simplify logic to use two arrays instead of three * fix(users-list): get shortcode from grandchild route in the case user is in the beta view * chore(project): adjust comment --- src/app/app-routing.module.ts | 5 + src/app/app.module.ts | 6 +- .../action/login-form/login-form.component.ts | 19 +- .../project-form/project-form.component.ts | 4 +- src/app/project/project.component.html | 19 +- src/app/project/project.component.ts | 7 + .../project-tile/project-tile.component.html | 34 +++ .../project-tile/project-tile.component.scss | 97 ++++++ .../project-tile.component.spec.ts | 166 ++++++++++ .../project-tile/project-tile.component.ts | 34 +++ .../system/projects/projects.component.html | 4 +- .../users-list/users-list.component.html | 13 +- .../users-list/users-list.component.spec.ts | 7 +- .../users/users-list/users-list.component.ts | 7 + src/app/user/overview/overview.component.html | 65 ++++ src/app/user/overview/overview.component.scss | 81 +++++ .../user/overview/overview.component.spec.ts | 287 ++++++++++++++++++ src/app/user/overview/overview.component.ts | 134 ++++++++ src/assets/style/_layout.scss | 7 +- src/assets/style/_responsive.scss | 12 +- 20 files changed, 981 insertions(+), 27 deletions(-) create mode 100644 src/app/system/project-tile/project-tile.component.html create mode 100644 src/app/system/project-tile/project-tile.component.scss create mode 100644 src/app/system/project-tile/project-tile.component.spec.ts create mode 100644 src/app/system/project-tile/project-tile.component.ts create mode 100644 src/app/user/overview/overview.component.html create mode 100644 src/app/user/overview/overview.component.scss create mode 100644 src/app/user/overview/overview.component.spec.ts create mode 100644 src/app/user/overview/overview.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index a6ca548982..102e6a46ee 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -24,6 +24,7 @@ import { SystemComponent } from './system/system.component'; import { UsersComponent } from './system/users/users.component'; // user import { DashboardComponent } from './user/dashboard/dashboard.component'; +import { OverviewComponent } from './user/overview/overview.component'; import { UserComponent } from './user/user.component'; // search results and resource viewer import { ResourceComponent } from './workspace/resource/resource.component'; @@ -42,6 +43,10 @@ const routes: Routes = [ path: 'login', component: LoginFormComponent }, + { + path: 'overview', + component: OverviewComponent + }, { path: 'dashboard', component: DashboardComponent, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index e8f68883b9..b2af2e7407 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -165,6 +165,8 @@ import { OntologyClassesComponent } from './project/beta/ontology-classes/ontolo import { OntologyClassItemComponent } from './project/beta/ontology-classes/ontology-class-item/ontology-class-item.component'; import { OntologyClassInstanceComponent } from './project/beta/ontology-classes/ontology-class-instance/ontology-class-instance.component'; import { SettingsComponent } from './project/beta/settings/settings.component'; +import { OverviewComponent } from './user/overview/overview.component'; +import { ProjectTileComponent } from './system/project-tile/project-tile.component'; // translate: AoT requires an exported function for factories export function httpLoaderFactory(httpClient: HttpClient) { @@ -316,7 +318,9 @@ export function httpLoaderFactory(httpClient: HttpClient) { OntologyClassesComponent, OntologyClassItemComponent, OntologyClassInstanceComponent, - SettingsComponent + SettingsComponent, + OverviewComponent, + ProjectTileComponent, ], imports: [ AngularSplitModule.forRoot(), diff --git a/src/app/main/action/login-form/login-form.component.ts b/src/app/main/action/login-form/login-form.component.ts index 679c83746f..d2c18f413b 100644 --- a/src/app/main/action/login-form/login-form.component.ts +++ b/src/app/main/action/login-form/login-form.component.ts @@ -1,7 +1,7 @@ import { AfterViewInit, Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { ActivatedRoute, Router } from '@angular/router'; -import { ApiResponseData, ApiResponseError, KnoraApiConnection, LoginResponse } from '@dasch-swiss/dsp-js'; +import { ApiResponseData, ApiResponseError, KnoraApiConnection, LoginResponse, UserResponse } from '@dasch-swiss/dsp-js'; import { DspApiConnectionToken } from '../../declarations/dsp-api-tokens'; import { ErrorHandlerService } from '../../services/error-handler.service'; import { AuthenticationService } from '../../services/authentication.service'; @@ -158,9 +158,26 @@ export class LoginFormComponent implements OnInit, AfterViewInit { this.session = this._session.getSession(); this._componentCommsService.emit(new EmitEvent(Events.loginSuccess, true)); + + // if user hit a page that requires to be logged in, they will have a returnUrl in the url this.returnUrl = this._route.snapshot.queryParams['returnUrl']; if (this.returnUrl) { this._router.navigate([this.returnUrl]); + } else if (this._route.snapshot.url.length && this._route.snapshot.url[0].path === 'login') { // if user is on /login + const username = this.session.user.name; + this._dspApiConnection.admin.usersEndpoint.getUserByUsername(username).subscribe( + (userResponse: ApiResponseData) => { + // if user is only a member of one project, redirect them to that projects dashboard + if(userResponse.body.user.projects.length === 1) { + this._router.navigateByUrl('/refresh', { skipLocationChange: true }).then( + () => this._router.navigate(['/beta/project/' + userResponse.body.user.projects[0].shortcode]) + ); + } else { // if user is a member of multiple projects, redirect them to the overview + this._router.navigateByUrl('/refresh', { skipLocationChange: true }).then( + () => this._router.navigate(['/overview']) + ); + } + }); } else { window.location.reload(); } diff --git a/src/app/project/project-form/project-form.component.ts b/src/app/project/project-form/project-form.component.ts index abe8a0d1f2..00a4e270e0 100644 --- a/src/app/project/project-form/project-form.component.ts +++ b/src/app/project/project-form/project-form.component.ts @@ -417,8 +417,8 @@ export class ProjectFormComponent implements OnInit { this.loading = false; this.closeDialog.emit(); // redirect to (new) project page - this._router.navigateByUrl('/project', { skipLocationChange: true }).then(() => - this._router.navigate(['/project/' + this.form.controls['shortcode'].value]) + this._router.navigateByUrl('/beta/project', { skipLocationChange: true }).then(() => + this._router.navigate(['/beta/project/' + this.form.controls['shortcode'].value]) ); }, (error: ApiResponseError) => { diff --git a/src/app/project/project.component.html b/src/app/project/project.component.html index 9b708ce64f..f072b95da2 100644 --- a/src/app/project/project.component.html +++ b/src/app/project/project.component.html @@ -31,7 +31,12 @@

- + + +

Go to projects overview

+ + + @@ -50,7 +55,8 @@

Data Models

- + {{onto.label}} @@ -69,7 +75,8 @@

Data Models

--> - + @@ -86,7 +93,7 @@

Data Models

Lists

- @@ -105,7 +112,7 @@

Members

-
+
settings @@ -129,4 +136,4 @@

Settings

- + \ No newline at end of file diff --git a/src/app/project/project.component.ts b/src/app/project/project.component.ts index 135c802196..fc6ffba4d2 100644 --- a/src/app/project/project.component.ts +++ b/src/app/project/project.component.ts @@ -222,6 +222,13 @@ export class ProjectComponent implements OnInit { } } + /** + * go to overview page + */ + goToOverview() { + this._router.navigate(['/overview'], { relativeTo: this._route }); + } + /** * checks if the shortcode is valid: hexadecimal and length = 4 * diff --git a/src/app/system/project-tile/project-tile.component.html b/src/app/system/project-tile/project-tile.component.html new file mode 100644 index 0000000000..15aca02f51 --- /dev/null +++ b/src/app/system/project-tile/project-tile.component.html @@ -0,0 +1,34 @@ +
+
+
+
+
+ Active +
+
+ Deactivated +
+
+
+ +
+
+ +
+ redeem +
+ +
+

{{project.longname}}

+
+ +
+ +
+
+
\ No newline at end of file diff --git a/src/app/system/project-tile/project-tile.component.scss b/src/app/system/project-tile/project-tile.component.scss new file mode 100644 index 0000000000..4dcbb16fc9 --- /dev/null +++ b/src/app/system/project-tile/project-tile.component.scss @@ -0,0 +1,97 @@ +.project-tile { + border: 1px solid #d1d5db; + border-radius: 6px; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + + .project-tile-content { + padding: 10px 5px 10px 10px; + + .top-bar { + display: flex; + justify-content: space-between; + align-items: center; + + .status, + .settings { + display: inline-block; + } + + .status { + + .status-badge { + border-radius: 10px; + padding: 2px 10px 4px 10px; + + span { + font-size: 12px; + } + } + + .status-badge.active { + background-color: #99F6E4; + + span { + color: #0F766E; + } + } + + .status-badge.deactivated { + background-color: #E5E7EB; + + span { + color: #6B7280; + } + } + + } + + .settings { + mat-icon-button { + width: 28px; + height: 28px; + line-height: 28px; + mat-icon { + height: 28px; + width: 28px; + font-size: 28px; + line-height: 28px; + } + } + + } + } + + .icon { + padding-top: 23px; + + mat-icon { + font-size: 40px; + } + } + + .title { + font-weight: 700; + font-size: 24px; + color: #3b4856; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + line-height: 28px; + padding: 0px 20px; + height: 80px; + } + + .dashboard-button-container { + margin: 14% 0%; + + button { + font-size: 16px; + line-height: 24px; + font-weight: 400; + padding: 13px 21px; + } + } + } + +} \ No newline at end of file diff --git a/src/app/system/project-tile/project-tile.component.spec.ts b/src/app/system/project-tile/project-tile.component.spec.ts new file mode 100644 index 0000000000..f81b5284cc --- /dev/null +++ b/src/app/system/project-tile/project-tile.component.spec.ts @@ -0,0 +1,166 @@ +import { HarnessLoader } from '@angular/cdk/testing'; +import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { MatButtonHarness } from '@angular/material/button/testing'; +import { By } from '@angular/platform-browser'; +import { RouterTestingModule } from '@angular/router/testing'; +import { StoredProject } from '@dasch-swiss/dsp-js'; + +import { ProjectTileComponent } from './project-tile.component'; + +/** + * test host component to simulate parent component. + */ +@Component({ + template: ` + ` +}) +class TestHostProjectTileComponent implements OnInit { + + @ViewChild('projectTile') projectTileComp: ProjectTileComponent; + + project = new StoredProject(); + sysAdmin = true; + + ngOnInit(){ + this.project.status = true; + this.project.longname = 'test project'; + this.project.shortcode = '0123'; + } + + deactivateProject() { + this.project.status = false; + } + + activateProject() { + this.project.status = true; + } + + revokeSysAdminRole() { + this.sysAdmin = false; + } + + grantSysAdminRole() { + this.sysAdmin = true; + } +} + +describe('ProjectTileComponent', () => { + let testHostComponent: TestHostProjectTileComponent; + let testHostFixture: ComponentFixture; + let rootLoader: HarnessLoader; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ + ProjectTileComponent, + TestHostProjectTileComponent + ], + imports: [ + RouterTestingModule + ] + }) + .compileComponents(); + }); + + beforeEach(() => { + testHostFixture = TestBed.createComponent(TestHostProjectTileComponent); + testHostComponent = testHostFixture.componentInstance; + rootLoader = TestbedHarnessEnvironment.documentRootLoader(testHostFixture); + testHostFixture.detectChanges(); + + // ensure host component was created + expect(testHostComponent).toBeTruthy(); + + // reset project status to true (active) + testHostComponent.activateProject(); + + // reset sysAdmin status to true + testHostComponent.grantSysAdminRole(); + + testHostFixture.detectChanges(); + }); + + it('should show correct project status', () => { + const hostCompDe = testHostFixture.debugElement; + + let activeStatus = hostCompDe.query(By.css('.status-badge.active')); + let deactivatedStatus = hostCompDe.query(By.css('.status-badge.deactivated')); + + // active status should be shown + expect(activeStatus).toBeTruthy(); + + // deactivated status should NOT be shown + expect(deactivatedStatus).toBeFalsy(); + + // deactivate project + testHostComponent.deactivateProject(); + + testHostFixture.detectChanges(); + + activeStatus = hostCompDe.query(By.css('.status-badge.active')); + deactivatedStatus = hostCompDe.query(By.css('.status-badge.deactivated')); + + // active status should NOT be shown + expect(activeStatus).toBeFalsy(); + + // deactivated status should be shown + expect(deactivatedStatus).toBeTruthy(); + }); + + it('should show the project long name', () => { + const hostCompDe = testHostFixture.debugElement; + + const projectName = hostCompDe.query(By.css('.title p')); + expect(projectName.nativeElement.innerText).toEqual('test project'); + }); + + it('should show settings button if user is a system admin', async () => { + // grab the 'settings' button + const settingsBtn = await rootLoader.getHarness(MatButtonHarness.with({ selector: '.settings-button' })); + + expect(settingsBtn).toBeTruthy(); + }); + + it('should hide settings button if user is NOT a system admin', async () => { + // set sysAdmin to false + testHostComponent.revokeSysAdminRole(); + + testHostFixture.detectChanges(); + + // attempt to grab the 'settings' button + const settingsBtn = await rootLoader.getAllHarnesses(MatButtonHarness.with({ selector: '.settings-button' })); + + // settings button should not be found by above method + expect(settingsBtn.length).toEqual(0); + }); + + it('should go to project dashboard when the "Go to dashboard" button is clicked', async () => { + // spy on navigateTo method + const navigateToSpy = spyOn(testHostComponent.projectTileComp, 'navigateTo'); + + // grab the 'go to dashboard' button + const goToProjectDashboardBtn = await rootLoader.getHarness(MatButtonHarness.with({ selector: '.dashboard-button' })); + + // click the button + await goToProjectDashboardBtn.click(); + + // ensure the correct arguments were passed to the navigateTo method + expect(navigateToSpy).toHaveBeenCalledWith('0123', 'dashboard'); + }); + + it('should go to project settings when the settings button is clicked', async () => { + // spy on navigateTo method + const navigateToSpy = spyOn(testHostComponent.projectTileComp, 'navigateTo'); + + // grab the 'settings' button + const settingsBtn = await rootLoader.getHarness(MatButtonHarness.with({ selector: '.settings-button' })); + + // click the button + await settingsBtn.click(); + + // ensure the correct arguments were passed to the navigateTo method + expect(navigateToSpy).toHaveBeenCalledWith('0123', 'settings'); + }); +}); diff --git a/src/app/system/project-tile/project-tile.component.ts b/src/app/system/project-tile/project-tile.component.ts new file mode 100644 index 0000000000..a05e150c5a --- /dev/null +++ b/src/app/system/project-tile/project-tile.component.ts @@ -0,0 +1,34 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { StoredProject } from '@dasch-swiss/dsp-js'; + +@Component({ + selector: 'app-project-tile', + templateUrl: './project-tile.component.html', + styleUrls: ['./project-tile.component.scss'] +}) +export class ProjectTileComponent implements OnInit { + + @Input() project: StoredProject; + @Input() sysAdmin: Boolean; // used to show settings button + + constructor(private _router: Router) { } + + ngOnInit(): void { + } + + navigateTo(shortCode: string, path: 'dashboard' | 'settings') { + switch (path) { + case 'dashboard': + this._router.navigate(['/beta/project/' + shortCode]); + break; + + case 'settings': + this._router.navigate(['/beta/project/' + shortCode + '/settings/collaboration']); + break; + + default: + break; + } + } +} diff --git a/src/app/system/projects/projects.component.html b/src/app/system/projects/projects.component.html index e23cc73f38..bc0a3cbed1 100644 --- a/src/app/system/projects/projects.component.html +++ b/src/app/system/projects/projects.component.html @@ -4,8 +4,6 @@ - -
- +
\ No newline at end of file diff --git a/src/app/system/users/users-list/users-list.component.html b/src/app/system/users/users-list/users-list.component.html index 91fd205725..76cf3f1654 100644 --- a/src/app/system/users/users-list/users-list.component.html +++ b/src/app/system/users/users-list/users-list.component.html @@ -14,11 +14,8 @@

- +

@@ -83,7 +80,7 @@

(click)="updateProjectAdminMembership(user.id, user.permissions)"> Add Remove -  as project admin + as project admin
+

\ No newline at end of file diff --git a/src/app/system/users/users-list/users-list.component.spec.ts b/src/app/system/users/users-list/users-list.component.spec.ts index 8b2e696193..8000e229d5 100644 --- a/src/app/system/users/users-list/users-list.component.spec.ts +++ b/src/app/system/users/users-list/users-list.component.spec.ts @@ -59,7 +59,12 @@ describe('UsersListComponent', () => { return TestConfig.ProjectCode; } } - }) + }), + parent: { + snapshot: { + url: [] + } + } } } }, diff --git a/src/app/system/users/users-list/users-list.component.ts b/src/app/system/users/users-list/users-list.component.ts index 3354885ae4..e756757f2e 100644 --- a/src/app/system/users/users-list/users-list.component.ts +++ b/src/app/system/users/users-list/users-list.component.ts @@ -109,6 +109,13 @@ export class UsersListComponent implements OnInit { this.projectCode = params.get('shortcode'); }); } + + // in case of new beta view, we are in a grand-child route + if (this._route.parent.parent.snapshot.url.length) { + this._route.parent.parent.paramMap.subscribe((params: Params) => { + this.projectCode = params.get('shortcode'); + }); + } } ngOnInit() { diff --git a/src/app/user/overview/overview.component.html b/src/app/user/overview/overview.component.html new file mode 100644 index 0000000000..0d2d8a235b --- /dev/null +++ b/src/app/user/overview/overview.component.html @@ -0,0 +1,65 @@ +
+ + +
+ + +
+ +
+
+

Browse Research Projects

+
+
+ +
+
+
+
+ +
+
+
+ + +
+
+
+

Your Projects

+
+
+
+
+ +
+
+
+
+

Browse Other Research Projects

+
+
+
+
+ +
+
+
+ + +
+ +
+
+

Browse Research Projects

+
+
+
+
+ +
+
+
+
+
\ No newline at end of file diff --git a/src/app/user/overview/overview.component.scss b/src/app/user/overview/overview.component.scss new file mode 100644 index 0000000000..c668177de6 --- /dev/null +++ b/src/app/user/overview/overview.component.scss @@ -0,0 +1,81 @@ +.overview { + + .title-bar { + .title { + font-weight: 700; + font-size: 24px; + line-height: 28px; + } + } + + .title-bar.admin { + display: flex; + justify-content: space-between; + align-items: center; + + .title, + .create-project-button { + display: inline-block; + } + + .create-project-button { + + button { + font-size: 16px; + line-height: 24px; + font-weight: 400; + padding: 13px 21px; + } + } + } + + + .project-tiles { + display: grid; + grid-template-columns: 30% 30% 30%; + gap: 5%; + padding-bottom: 2%; + } + + .project-tile-container { + text-align: center; + } +} + +@media (max-width: 820px) { + .overview { + .title-bar.other-projects { + padding-top: 5%; + } + + .project-tiles { + grid-template-columns: 45% 45%; + } + } + +} + +@media (max-width: 640px) { + .overview { + .title-bar.admin { + display: block; + padding-bottom: 5%; + + .title, + .create-project-button { + display: block; + } + + } + + .title-bar.other-projects { + padding-top: 5%; + } + + .project-tiles { + grid-template-columns: 90%; + gap: 1% + } + } + +} \ No newline at end of file diff --git a/src/app/user/overview/overview.component.spec.ts b/src/app/user/overview/overview.component.spec.ts new file mode 100644 index 0000000000..88210da9a6 --- /dev/null +++ b/src/app/user/overview/overview.component.spec.ts @@ -0,0 +1,287 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { MatButtonModule } from '@angular/material/button'; +import { MatChipsModule } from '@angular/material/chips'; +import { MatDialogModule } from '@angular/material/dialog'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatSnackBarModule } from '@angular/material/snack-bar'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { RouterTestingModule } from '@angular/router/testing'; +import { MockProjects, MockUsers, ProjectsEndpointAdmin, StoredProject, UsersEndpointAdmin } from '@dasch-swiss/dsp-js'; +import { AppInitService } from 'src/app/app-init.service'; +import { CacheService } from 'src/app/main/cache/cache.service'; +import { DspApiConfigToken, DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens'; +import { TestConfig } from 'test.config'; +import { of } from 'rxjs'; +import { OverviewComponent } from './overview.component'; +import { Component, Input, ViewChild } from '@angular/core'; +import { ProjectTileComponent } from 'src/app/system/project-tile/project-tile.component'; +import { HarnessLoader } from '@angular/cdk/testing'; +import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; +import { MatButtonHarness } from '@angular/material/button/testing'; +import { MatDialogHarness } from '@angular/material/dialog/testing'; +import { OverlayContainer } from '@angular/cdk/overlay'; + +/** + * test host component to simulate parent component as a logged in user. + */ +@Component({ + template: ` + ` +}) +class TestHostOverviewComponent { + + @ViewChild('overview') overviewComp: OverviewComponent; +} + +/** + * test component to simulate project tile component. + */ +@Component({ + selector: 'app-project-tile', + template: '' +}) +class TestProjectTileComponent { + + @ViewChild('projectTile') projectTileComp: ProjectTileComponent; + + @Input() project: StoredProject; + @Input() sysAdmin: Boolean; +} + +describe('OverviewComponent', () => { + + beforeEach(async () => { + const dspConnSpy = { + admin: { + usersEndpoint: jasmine.createSpyObj('usersEndpoint', ['getUserByUsername']), + projectsEndpoint: jasmine.createSpyObj('projectsEndpoint', ['getProjects']) + } + }; + const cacheServiceSpy = jasmine.createSpyObj('CacheService', ['get', 'set']); + + await TestBed.configureTestingModule({ + declarations: [ + OverviewComponent, + TestHostOverviewComponent, + TestProjectTileComponent + ], + imports: [ + BrowserAnimationsModule, + MatButtonModule, + MatChipsModule, + MatDialogModule, + MatIconModule, + MatMenuModule, + MatSnackBarModule, + RouterTestingModule + ], + providers: [ + AppInitService, + { + provide: DspApiConfigToken, + useValue: TestConfig.ApiConfig + }, + { + provide: DspApiConnectionToken, + useValue: dspConnSpy + }, + { + provide: CacheService, + useValue: cacheServiceSpy + } + ] + }) + .compileComponents(); + }); + + // mock localStorage + beforeEach(() => { + let store = {}; + + spyOn(localStorage, 'getItem').and.callFake( + (key: string): string => store[key] || null + ); + spyOn(localStorage, 'removeItem').and.callFake( + (key: string): void => { + delete store[key]; + } + ); + spyOn(localStorage, 'setItem').and.callFake( + (key: string, value: string): string => (store[key] = value) + ); + spyOn(localStorage, 'clear').and.callFake(() => { + store = {}; + }); + }); + + describe('Logged in user', () => { + let testHostComponent: TestHostOverviewComponent; + let testHostFixture: ComponentFixture; + + beforeEach(() => { + localStorage.removeItem('session'); + + // mock getProjects response + const dspConnSpy = TestBed.inject(DspApiConnectionToken); + + (dspConnSpy.admin.projectsEndpoint as jasmine.SpyObj).getProjects.and.callFake( + () => { + const projects = MockProjects.mockProjects(); + return of(projects); + } + ); + + (dspConnSpy.admin.usersEndpoint as jasmine.SpyObj).getUserByUsername.and.callFake( + () => { + const loggedInUser = MockUsers.mockUser(); + + // recreate anything project + const anythingProj = new StoredProject(); + anythingProj.id = 'http://rdfh.ch/projects/0001'; + anythingProj.longname = 'Anything Project'; + anythingProj.shortcode = '0001'; + anythingProj.keywords = ['arbitrary test data', 'things']; + anythingProj.shortname = 'anything'; + + // add project to list of users projects + loggedInUser.body.user.projects = [anythingProj]; + return of(loggedInUser); + } + ); + + const session = TestConfig.CurrentSession; + session.user.sysAdmin = false; + + localStorage.setItem('session', JSON.stringify(session)); + + expect(localStorage.getItem('session')).toBe( + JSON.stringify(TestConfig.CurrentSession) + ); + + testHostFixture = TestBed.createComponent(TestHostOverviewComponent); + testHostComponent = testHostFixture.componentInstance; + testHostFixture.detectChanges(); + + expect(testHostComponent).toBeTruthy(); + }); + + it('should populate project lists correctly', () => { + + expect(testHostComponent.overviewComp.userProjects.length).toEqual(1); + expect(testHostComponent.overviewComp.otherProjects.length).toEqual(7); + }); + }); + + describe('Admin', () => { + let testHostComponent: TestHostOverviewComponent; + let testHostFixture: ComponentFixture; + let rootLoader: HarnessLoader; + let overlayContainer: OverlayContainer; + + beforeEach(() => { + localStorage.removeItem('session'); + + // mock getProjects response + const dspConnSpy = TestBed.inject(DspApiConnectionToken); + + (dspConnSpy.admin.projectsEndpoint as jasmine.SpyObj).getProjects.and.callFake( + () => { + const projects = MockProjects.mockProjects(); + return of(projects); + } + ); + + const session = TestConfig.CurrentSession; + session.user.sysAdmin = true; + + localStorage.setItem('session', JSON.stringify(session)); + + expect(localStorage.getItem('session')).toBe( + JSON.stringify(session) + ); + + testHostFixture = TestBed.createComponent(TestHostOverviewComponent); + testHostComponent = testHostFixture.componentInstance; + overlayContainer = TestBed.inject(OverlayContainer); + rootLoader = TestbedHarnessEnvironment.documentRootLoader(testHostFixture); + testHostFixture.detectChanges(); + + expect(testHostComponent).toBeTruthy(); + }); + + afterEach(async () => { + const dialogs = await rootLoader.getAllHarnesses(MatDialogHarness); + await Promise.all(dialogs.map(async d => await d.close())); + + // angular won't call this for us so we need to do it ourselves to avoid leaks. + overlayContainer.ngOnDestroy(); + }); + + it('should populate project lists correctly', () => { + expect(testHostComponent.overviewComp.userProjects.length).toEqual(0); + expect(testHostComponent.overviewComp.otherProjects.length).toEqual(8); + }); + + it('should show the "Create new project" button', async () => { + // grab the 'Create new project' button + const createNewProjBtn = await rootLoader.getAllHarnesses(MatButtonHarness.with({ selector: '.create-project-button button' })); + + // 'Create new project' button should be found by above method + expect(createNewProjBtn.length).toEqual(1); + }); + + it('should open the "Create new project" popup', async () => { + // grab the 'Create new project' button + const createNewProjBtn = await rootLoader.getHarness(MatButtonHarness.with({ selector: '.create-project-button button' })); + + await createNewProjBtn.click(); + + // get dialog harness + const dialogHarnesses = await rootLoader.getAllHarnesses(MatDialogHarness); + + expect(dialogHarnesses.length).toEqual(1); + }); + }); + + describe('Unknown user (logged out)', () => { + let testHostComponent: TestHostOverviewComponent; + let testHostFixture: ComponentFixture; + let rootLoader: HarnessLoader; + + beforeEach(() => { + localStorage.removeItem('session'); + + // mock getProjects response + const dspConnSpy = TestBed.inject(DspApiConnectionToken); + + (dspConnSpy.admin.projectsEndpoint as jasmine.SpyObj).getProjects.and.callFake( + () => { + const projects = MockProjects.mockProjects(); + return of(projects); + } + ); + + testHostFixture = TestBed.createComponent(TestHostOverviewComponent); + testHostComponent = testHostFixture.componentInstance; + rootLoader = TestbedHarnessEnvironment.documentRootLoader(testHostFixture); + testHostFixture.detectChanges(); + + expect(testHostComponent).toBeTruthy(); + }); + + it('should populate project lists correctly', () => { + expect(testHostComponent.overviewComp.userProjects.length).toEqual(0); + expect(testHostComponent.overviewComp.otherProjects.length).toEqual(8); + }); + + it('should NOT show the "Create new project" button', async () => { + // attempt to grab the 'Create new project' button + const createNewProjBtn = await rootLoader.getAllHarnesses(MatButtonHarness.with({ selector: '.create-project-button button' })); + + // 'Create new project' button should NOT be found by above method + expect(createNewProjBtn.length).toEqual(0); + }); + }); + +}); diff --git a/src/app/user/overview/overview.component.ts b/src/app/user/overview/overview.component.ts new file mode 100644 index 0000000000..1f933b5695 --- /dev/null +++ b/src/app/user/overview/overview.component.ts @@ -0,0 +1,134 @@ +import { Component, Inject, OnInit } from '@angular/core'; +import { MatDialog, MatDialogConfig } from '@angular/material/dialog'; +import { Title } from '@angular/platform-browser'; +import { KnoraApiConnection, ApiResponseData, UserResponse, ApiResponseError, StoredProject, ProjectsResponse } from '@dasch-swiss/dsp-js'; +import { CacheService } from 'src/app/main/cache/cache.service'; +import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens'; +import { DialogComponent } from 'src/app/main/dialog/dialog.component'; +import { ErrorHandlerService } from 'src/app/main/services/error-handler.service'; +import { Session, SessionService } from 'src/app/main/services/session.service'; + +@Component({ + selector: 'app-overview', + templateUrl: './overview.component.html', + styleUrls: ['./overview.component.scss'] +}) +export class OverviewComponent implements OnInit { + + loading = true; + + session: Session; + username: string; + sysAdmin = false; + + // list of projects a user is a member of + userProjects: StoredProject[] = []; + + // list of projects a user is NOT a member of + otherProjects: StoredProject[] = []; + + constructor( + @Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection, + private _cache: CacheService, + private _errorHandler: ErrorHandlerService, + private _session: SessionService, + private _dialog: MatDialog, + private _titleService: Title + ) { + // get username + this.session = this._session.getSession(); + + // if session is null, user is not logged in + if(this.session) { + this.username = this.session.user.name; + this.sysAdmin = this.session.user.sysAdmin; + } + + // set the page title + this._titleService.setTitle('Projects Overview'); + + } + + ngOnInit() { + this.loading = true; + + if (this.username) { + // set the cache + this._cache.get(this.username, this._dspApiConnection.admin.usersEndpoint.getUserByUsername(this.username)); + } + + // if user is a system admin or not logged in, get all the projects + // system admin can create new projects and edit projects + // users not logged in can only view projects + if (this.sysAdmin || !this.session) { + this._dspApiConnection.admin.projectsEndpoint.getProjects().subscribe( + (response: ApiResponseData) => { + + // reset the lists: + this.userProjects = []; + this.otherProjects = []; + + for (const project of response.body.projects) { + this.otherProjects.push(project); + } + + this.loading = false; + }, + (error: ApiResponseError) => { + this._errorHandler.showMessage(error); + } + ); + } else { + // logged-in user is NOT a system admin: get all projects the user is a member of + this._dspApiConnection.admin.usersEndpoint.getUserByUsername(this.username).subscribe( + (userResponse: ApiResponseData) => { + + // reset the lists: + this.userProjects = []; + this.otherProjects = []; + + // get list of all projects the user is a member of + for (const project of userResponse.body.user.projects) { + this.userProjects.push(project); + } + + this._dspApiConnection.admin.projectsEndpoint.getProjects().subscribe( + (projectsResponse: ApiResponseData) => { + + // get list of all projects the user is NOT a member of + for (const project of projectsResponse.body.projects) { + if(this.userProjects.findIndex(userProj => userProj.id === project.id) === -1){ + this.otherProjects.push(project); + } + } + + this.loading = false; + }, + (error: ApiResponseError) => { + this._errorHandler.showMessage(error); + } + ); + + this.loading = false; + }, + (error: ApiResponseError) => { + this._errorHandler.showMessage(error); + } + ); + } + } + + openDialog(mode: string, name?: string, id?: string): void { + const dialogConfig: MatDialogConfig = { + width: '560px', + maxHeight: '80vh', + position: { + top: '112px' + }, + data: { name: name, mode: mode, project: id } + }; + + this._dialog.open(DialogComponent, dialogConfig); + + } +} diff --git a/src/assets/style/_layout.scss b/src/assets/style/_layout.scss index 54f11f28e6..342c1336f8 100644 --- a/src/assets/style/_layout.scss +++ b/src/assets/style/_layout.scss @@ -29,7 +29,8 @@ &.small, &.medium, - &.large { + &.large, + &.extra-large { padding: 36px 48px; } @@ -44,6 +45,10 @@ &.large { max-width: 940px; } + + &.extra-large { + max-width: 1440px; + } } // -------------------------------------- diff --git a/src/assets/style/_responsive.scss b/src/assets/style/_responsive.scss index 75b73749c3..3c0b0b69b7 100644 --- a/src/assets/style/_responsive.scss +++ b/src/assets/style/_responsive.scss @@ -52,7 +52,8 @@ $grid-breakpoints: ( .content { &.small, &.medium, - &.large { + &.large, + &.extra-large { padding: 0; } @@ -61,7 +62,8 @@ $grid-breakpoints: ( } &.medium, - &.large { + &.large, + &.extra-large { max-width: 100%; } } @@ -88,7 +90,8 @@ $grid-breakpoints: ( .content { &.small, &.medium, - &.large { + &.large, + &.extra-large { padding: 0 !important; } @@ -97,7 +100,8 @@ $grid-breakpoints: ( } &.medium, - &.large { + &.large, + &.extra-large { max-width: calc(100% - 36px) !important; } }