pending-archive works!
diff --git a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.scss b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts new file mode 100644 index 000000000..ba8d9fe00 --- /dev/null +++ b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PendingArchiveComponent } from './pending-archive.component'; + +describe('PendingArchiveComponent', () => { + let component: PendingArchiveComponent; + let fixture: ComponentFixtureLoading...
- Something went wrong.
+ Loading...
+
+ } @else {
+ Something went wrong.
+ }
@if (screen === 'finalize' && isGlam) {
();
@Output() progress = new EventEmitter();
@Output() chartPathClicked = new EventEmitter();
+ @Output() backToPendingArchivesOutput = new EventEmitter();
@Input() pendingArchives: ArchiveVO[] = [];
@Input() pendingArchive: ArchiveVO;
@@ -127,7 +128,11 @@ export class CreateNewArchiveComponent implements OnInit {
}
public setScreen(screen: NewArchiveScreen): void {
- if (this.pendingArchive && screen === 'create') {
+ if (
+ this.pendingArchive &&
+ (screen === 'create' || screen === 'name-archive')
+ ) {
+ console.log(screen);
this.goToInvitations();
}
const action = screen === 'reasons' ? 'submit_reasons' : 'submit_goals';
diff --git a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.html b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.html
index 97564e6f4..3f7485286 100644
--- a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.html
+++ b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.html
@@ -11,4 +11,42 @@
accepting an invitation, or by creating a new archive of your own.
+
+ @for (archive of pendingArchives; track archive.archiveId) {
+ ();
+ @Output() nextOutput = new EventEmitter();
+
public accountName: string = '';
+ public selectedArchive: ArchiveVO = null;
constructor(private account: AccountService) {
this.accountName = this.account.getAccount().fullName;
}
+
+ ngOnInit(): void {
+ console.log(this.pendingArchives);
+ }
+
+ createNewArchive(): void {
+ this.createNewArchiveOutput.emit();
+ }
+
+ next(): void {
+ this.nextOutput.emit(this.selectedArchive);
+ }
+
+ selectArchive(archive: ArchiveVO): void {
+ this.selectedArchive = archive;
+ }
}
diff --git a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.html b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.html
index 166459bfb..8e3bfdca3 100644
--- a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.html
+++ b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.html
@@ -1 +1,26 @@
-pending-archive works!
+
+
+
+
+ 
+
+
+
+ The {{ archive.fullName }} Archive
+
+ Invited as {{ roles[archive.accessRole] }}
+
+
+
+
diff --git a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.scss b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.scss
index e69de29bb..dc599759e 100644
--- a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.scss
+++ b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.scss
@@ -0,0 +1,43 @@
+/* @format */
+@import 'fonts';
+
+.pending-archive-container {
+ display: flex;
+ width: 50%;
+ justify-content: space-between;
+}
+
+.name {
+ color: white;
+ font-size: 14px;
+ font-family: 'UsualRegular', sans-serif;
+ margin-bottom: 0;
+}
+
+.role {
+ color: rgba(255, 255, 255, 0.5);
+ font-family: 'UsualRegular', sans-serif;
+ font-size: 14px;
+ margin-bottom: 0;
+}
+
+.pending-archive {
+ display: flex;
+ justify-content: space-between;
+}
+
+.accept-button {
+ display: flex;
+ align-items: center;
+}
+
+.archive-image-and-text {
+ display: flex;
+ gap: 16px;
+ align-items: center;
+}
+
+.archive-image > img {
+ width: 50px;
+ height: 50px;
+}
diff --git a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts
index ba8d9fe00..0e0506ec0 100644
--- a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts
+++ b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts
@@ -1,3 +1,4 @@
+/* @format */
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PendingArchiveComponent } from './pending-archive.component';
diff --git a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.ts b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.ts
index 4f2dd943e..4cb2de155 100644
--- a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.ts
+++ b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.ts
@@ -1,13 +1,31 @@
-import { Component, Input } from '@angular/core';
+/* @format */
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ArchiveVO } from '@models/index';
@Component({
selector: 'pr-pending-archive',
- standalone: true,
- imports: [],
templateUrl: './pending-archive.component.html',
styleUrl: './pending-archive.component.scss',
})
-export class PendingArchiveComponent {
- @Input() archiveName: string = '';
- @Input() role = '';
+export class PendingArchiveComponent implements OnInit {
+ readonly roles = {
+ 'access.role.viewer': 'Viewer',
+ 'access.role.editor': 'Editor',
+ 'access.role.contributor': 'Contributor',
+ 'access.role.curator': 'Curator',
+ 'access.role.manager': 'Manager',
+ };
+
+ @Input() archive: ArchiveVO;
+ @Input() isSelected: boolean = false;
+
+ @Output() acceptArchiveOutput = new EventEmitter();
+
+ constructor() {}
+
+ ngOnInit(): void {}
+
+ acceptArchive(archive: ArchiveVO): void {
+ this.acceptArchiveOutput.emit(archive);
+ }
}
diff --git a/src/app/onboarding/components/onboarding/onboarding.component.html b/src/app/onboarding/components/onboarding/onboarding.component.html
index afc4ad464..de3f5e682 100644
--- a/src/app/onboarding/components/onboarding/onboarding.component.html
+++ b/src/app/onboarding/components/onboarding/onboarding.component.html
@@ -24,19 +24,19 @@
- @if (OnboardingScreen.pendingArchives && !isGlam) {
+ @if (screen === OnboardingScreen.pendingArchives && !isGlam) {
diff --git a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.scss b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.scss
index 71aa5367b..5d86258da 100644
--- a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.scss
+++ b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.scss
@@ -1,3 +1,4 @@
+/* @format */
@import 'variables';
@import 'fonts';
diff --git a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.spec.ts b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.spec.ts
index 96c2686c7..40880c8b7 100644
--- a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.spec.ts
+++ b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.spec.ts
@@ -1,23 +1,82 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+/* @format */
+import { Shallow } from 'shallow-render';
import { GlamPendingArchivesComponent } from './glam-pending-archives.component';
+import { OnboardingModule } from '../../onboarding.module';
+import { AccountService } from '@shared/services/account/account.service';
+import { ArchiveVO } from '@models/index';
+
+const mockAccountService = {
+ getAccount: () => {
+ return {
+ fullName: 'John Doe',
+ };
+ },
+};
describe('GlamPendingArchivesComponent', () => {
- let component: GlamPendingArchivesComponent;
- let fixture: ComponentFixture;
+ let shallow: Shallow;
beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [GlamPendingArchivesComponent]
- })
- .compileComponents();
-
- fixture = TestBed.createComponent(GlamPendingArchivesComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
+ shallow = new Shallow(GlamPendingArchivesComponent, OnboardingModule).mock(
+ AccountService,
+ mockAccountService,
+ );
+ });
+
+ it('should create the component', async () => {
+ const { instance } = await shallow.render();
+
+ expect(instance).toBeTruthy();
+ });
+
+ it('should initialize accountName from AccountService', async () => {
+ const { instance } = await shallow.render();
+
+ expect(instance.accountName).toBe('John Doe');
+ });
+
+ it('should render the list of pending archives', async () => {
+ const pendingArchives: ArchiveVO[] = [
+ new ArchiveVO({ archiveId: 1, fullName: 'Archive 1' }),
+ new ArchiveVO({ archiveId: 2, fullName: 'Archive 2' }),
+ ];
+
+ const { find } = await shallow.render({
+ bind: { pendingArchives },
+ });
+
+ const archiveElements = find('pr-pending-archive');
+ expect(archiveElements.length).toBe(2);
+ });
+
+ it('should update selectedArchive when selectArchive is called', async () => {
+ const { instance } = await shallow.render();
+ const archive: ArchiveVO = new ArchiveVO({
+ archiveId: 1,
+ fullName: 'Test Archive',
+ });
+
+ instance.selectArchive(archive);
+ expect(instance.selectedArchive).toBe(archive);
});
- it('should create', () => {
- expect(component).toBeTruthy();
+ it('should emit createNewArchiveOutput when createNewArchive is called', async () => {
+ const { instance, outputs } = await shallow.render();
+ instance.createNewArchive();
+
+ expect(outputs.createNewArchiveOutput.emit).toHaveBeenCalled();
+ });
+
+ it('should emit nextOutput with selected archive when next is called', async () => {
+ const { instance, outputs } = await shallow.render();
+ const selectedArchive: ArchiveVO = new ArchiveVO({
+ archiveId: 1,
+ fullName: 'Test Archive',
+ });
+
+ instance.selectedArchive = selectedArchive;
+ instance.next();
+
+ expect(outputs.nextOutput.emit).toHaveBeenCalledWith(selectedArchive);
});
});
diff --git a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.ts b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.ts
index 84c0ff2de..9e0fc764b 100644
--- a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.ts
+++ b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.ts
@@ -1,4 +1,5 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+/* @format */
+import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ArchiveVO } from '@models/index';
import { AccountService } from '@shared/services/account/account.service';
@@ -7,7 +8,7 @@ import { AccountService } from '@shared/services/account/account.service';
templateUrl: './glam-pending-archives.component.html',
styleUrl: './glam-pending-archives.component.scss',
})
-export class GlamPendingArchivesComponent implements OnInit {
+export class GlamPendingArchivesComponent {
@Input() pendingArchives: ArchiveVO[] = [];
@Output() createNewArchiveOutput = new EventEmitter();
@@ -20,10 +21,6 @@ export class GlamPendingArchivesComponent implements OnInit {
this.accountName = this.account.getAccount().fullName;
}
- ngOnInit(): void {
- console.log(this.pendingArchives);
- }
-
createNewArchive(): void {
this.createNewArchiveOutput.emit();
}
diff --git a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.html b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.html
index 8e3bfdca3..493bcc3a5 100644
--- a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.html
+++ b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.html
@@ -6,7 +6,7 @@
- The {{ archive.fullName }} Archive
+ The {{ archive?.fullName }} Archive
Invited as {{ roles[archive.accessRole] }}
diff --git a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts
index 0e0506ec0..5a3b400fc 100644
--- a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts
+++ b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts
@@ -1,24 +1,98 @@
/* @format */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { Shallow } from 'shallow-render';
+import { OnboardingModule } from '@root/app/onboarding/onboarding.module';
import { PendingArchiveComponent } from './pending-archive.component';
+import { ArchiveVO } from '@models/index';
describe('PendingArchiveComponent', () => {
- let component: PendingArchiveComponent;
- let fixture: ComponentFixture;
+ let shallow: Shallow;
beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [PendingArchiveComponent]
- })
- .compileComponents();
-
- fixture = TestBed.createComponent(PendingArchiveComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
+ shallow = new Shallow(PendingArchiveComponent, OnboardingModule);
+ });
+
+ it('should create', async () => {
+ const { instance } = await shallow.render({
+ bind: {
+ archive: { fullName: 'John Doe' },
+ },
+ });
+
+ expect(instance).toBeTruthy();
+ });
+
+ it('should display the archive fullName', async () => {
+ const { find } = await shallow.render({
+ bind: {
+ archive: {
+ fullName: 'Test Archive',
+ id: 1,
+ role: 'access.role.viewer',
+ },
+ },
+ });
+
+ const fullNameElement = find('.name b');
+
+ expect(fullNameElement.nativeElement.textContent).toContain('Test Archive');
+ });
+
+ it('should handle undefined archive input gracefully', async () => {
+ const { find } = await shallow.render({
+ bind: {
+ archive: {},
+ },
+ });
+
+ const fullNameElement = find('.name b');
+
+ expect(fullNameElement.nativeElement.textContent).toBe('');
+ });
+
+ it('should emit acceptArchiveOutput event with the archive when acceptArchive is called', async () => {
+ const archiveData = new ArchiveVO({
+ fullName: 'Test Archive',
+ id: 1,
+ role: 'access.role.viewer',
+ });
+ const { instance, outputs } = await shallow.render({
+ bind: {
+ archive: archiveData,
+ },
+ });
+
+ instance.acceptArchive(archiveData);
+
+ expect(outputs.acceptArchiveOutput.emit).toHaveBeenCalledWith(archiveData);
});
- it('should create', () => {
- expect(component).toBeTruthy();
+ it('should display the correct role name based on the role input', async () => {
+ const { find } = await shallow.render({
+ bind: {
+ archive: {
+ fullName: 'Test Archive',
+ id: 1,
+ accessRole: 'access.role.editor',
+ },
+ },
+ });
+
+ const roleElement = find('.role');
+ expect(roleElement.nativeElement.textContent).toContain('Editor');
+ });
+
+ it('should map role key to role name correctly', async () => {
+ const { instance } = await shallow.render({
+ bind: {
+ archive: {
+ fullName: 'Test Archive',
+ id: 1,
+ role: 'access.role.editor',
+ },
+ },
+ });
+ const roleName = instance.roles['access.role.contributor'];
+
+ expect(roleName).toBe('Contributor');
});
});
diff --git a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.ts b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.ts
index 4cb2de155..09bae6439 100644
--- a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.ts
+++ b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.ts
@@ -1,5 +1,5 @@
/* @format */
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ArchiveVO } from '@models/index';
@Component({
@@ -7,7 +7,7 @@ import { ArchiveVO } from '@models/index';
templateUrl: './pending-archive.component.html',
styleUrl: './pending-archive.component.scss',
})
-export class PendingArchiveComponent implements OnInit {
+export class PendingArchiveComponent {
readonly roles = {
'access.role.viewer': 'Viewer',
'access.role.editor': 'Editor',
@@ -21,10 +21,6 @@ export class PendingArchiveComponent implements OnInit {
@Output() acceptArchiveOutput = new EventEmitter();
- constructor() {}
-
- ngOnInit(): void {}
-
acceptArchive(archive: ArchiveVO): void {
this.acceptArchiveOutput.emit(archive);
}
From 4da8b7eb55eb4ea4d524f35501bea02298506092 Mon Sep 17 00:00:00 2001
From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com>
Date: Mon, 29 Jul 2024 14:23:55 +0300
Subject: [PATCH 4/9] design changes
---
.../glam-pending-archives.component.scss | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.scss b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.scss
index 5d86258da..816813d56 100644
--- a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.scss
+++ b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.scss
@@ -23,7 +23,6 @@ p {
.pending-archives {
display: flex;
gap: 64px;
- margin-top: 64px;
@media screen and (max-width: 900px) {
flex-direction: column;
@@ -40,6 +39,10 @@ p {
@media screen and (max-width: 900px) {
height: 40vh;
}
+
+ @media screen and (max-width: 517px) {
+ width: auto;
+ }
}
.buttons {
From daf680268242902f57d6da238d995f3b9d1cd415 Mon Sep 17 00:00:00 2001
From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com>
Date: Mon, 29 Jul 2024 14:28:07 +0300
Subject: [PATCH 5/9] linting
---
.../create-new-archive/create-new-archive.component.ts | 1 -
.../glam-pending-archives.component.spec.ts | 4 ++--
.../glam/pending-archive/pending-archive.component.spec.ts | 2 +-
.../onboarding/components/onboarding/onboarding.component.ts | 1 -
4 files changed, 3 insertions(+), 5 deletions(-)
diff --git a/src/app/onboarding/components/create-new-archive/create-new-archive.component.ts b/src/app/onboarding/components/create-new-archive/create-new-archive.component.ts
index 046394b63..50afcf7d9 100644
--- a/src/app/onboarding/components/create-new-archive/create-new-archive.component.ts
+++ b/src/app/onboarding/components/create-new-archive/create-new-archive.component.ts
@@ -132,7 +132,6 @@ export class CreateNewArchiveComponent implements OnInit {
this.pendingArchive &&
(screen === 'create' || screen === 'name-archive')
) {
- console.log(screen);
this.goToInvitations();
}
const action = screen === 'reasons' ? 'submit_reasons' : 'submit_goals';
diff --git a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.spec.ts b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.spec.ts
index 40880c8b7..e80eb0502 100644
--- a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.spec.ts
+++ b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.spec.ts
@@ -1,9 +1,9 @@
/* @format */
import { Shallow } from 'shallow-render';
-import { GlamPendingArchivesComponent } from './glam-pending-archives.component';
-import { OnboardingModule } from '../../onboarding.module';
import { AccountService } from '@shared/services/account/account.service';
import { ArchiveVO } from '@models/index';
+import { GlamPendingArchivesComponent } from './glam-pending-archives.component';
+import { OnboardingModule } from '../../onboarding.module';
const mockAccountService = {
getAccount: () => {
diff --git a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts
index 5a3b400fc..6cee0e204 100644
--- a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts
+++ b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts
@@ -1,8 +1,8 @@
/* @format */
import { Shallow } from 'shallow-render';
import { OnboardingModule } from '@root/app/onboarding/onboarding.module';
-import { PendingArchiveComponent } from './pending-archive.component';
import { ArchiveVO } from '@models/index';
+import { PendingArchiveComponent } from './pending-archive.component';
describe('PendingArchiveComponent', () => {
let shallow: Shallow;
diff --git a/src/app/onboarding/components/onboarding/onboarding.component.ts b/src/app/onboarding/components/onboarding/onboarding.component.ts
index fc114dd8d..d42e2619b 100644
--- a/src/app/onboarding/components/onboarding/onboarding.component.ts
+++ b/src/app/onboarding/components/onboarding/onboarding.component.ts
@@ -83,7 +83,6 @@ export class OnboardingComponent implements OnInit {
}
public setScreen(screen: OnboardingScreen): void {
- console.log('setScreen', screen);
this.screen = screen;
if (this.selectedPendingArchive) {
this.selectedPendingArchive = null;
From 93eeb035dc539e0732b9c303818cccc754cccafa Mon Sep 17 00:00:00 2001
From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com>
Date: Mon, 29 Jul 2024 14:43:10 +0300
Subject: [PATCH 6/9] linting
---
.../glam-pending-archives.component.spec.ts | 4 +++-
.../glam/pending-archive/pending-archive.component.spec.ts | 1 +
2 files changed, 4 insertions(+), 1 deletion(-)
diff --git a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.spec.ts b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.spec.ts
index e80eb0502..b4d186bd6 100644
--- a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.spec.ts
+++ b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.spec.ts
@@ -2,8 +2,8 @@
import { Shallow } from 'shallow-render';
import { AccountService } from '@shared/services/account/account.service';
import { ArchiveVO } from '@models/index';
+import { OnboardingModule } from '../../onboarding.module';
import { GlamPendingArchivesComponent } from './glam-pending-archives.component';
-import { OnboardingModule } from '../../onboarding.module';
const mockAccountService = {
getAccount: () => {
@@ -46,6 +46,7 @@ describe('GlamPendingArchivesComponent', () => {
});
const archiveElements = find('pr-pending-archive');
+
expect(archiveElements.length).toBe(2);
});
@@ -57,6 +58,7 @@ describe('GlamPendingArchivesComponent', () => {
});
instance.selectArchive(archive);
+
expect(instance.selectedArchive).toBe(archive);
});
diff --git a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts
index 6cee0e204..b2bea4cce 100644
--- a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts
+++ b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts
@@ -78,6 +78,7 @@ describe('PendingArchiveComponent', () => {
});
const roleElement = find('.role');
+
expect(roleElement.nativeElement.textContent).toContain('Editor');
});
From c218a469bfe659341888405fb6c6bb711b2c44c3 Mon Sep 17 00:00:00 2001
From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com>
Date: Mon, 29 Jul 2024 15:19:26 +0300
Subject: [PATCH 7/9] prettier
---
.../glam-pending-archives.component.spec.ts | 2 +-
.../glam/pending-archive/pending-archive.component.spec.ts | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.spec.ts b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.spec.ts
index b4d186bd6..5cd786506 100644
--- a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.spec.ts
+++ b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.spec.ts
@@ -2,7 +2,7 @@
import { Shallow } from 'shallow-render';
import { AccountService } from '@shared/services/account/account.service';
import { ArchiveVO } from '@models/index';
-import { OnboardingModule } from '../../onboarding.module';
+import { OnboardingModule } from '../../onboarding.module';
import { GlamPendingArchivesComponent } from './glam-pending-archives.component';
const mockAccountService = {
diff --git a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts
index b2bea4cce..ca1d687f9 100644
--- a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts
+++ b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts
@@ -78,7 +78,7 @@ describe('PendingArchiveComponent', () => {
});
const roleElement = find('.role');
-
+
expect(roleElement.nativeElement.textContent).toContain('Editor');
});
From 60f9526518a52a65466ee9f09d03da224e12a53e Mon Sep 17 00:00:00 2001
From: Natalie Martin
Date: Mon, 5 Aug 2024 09:11:08 -0500
Subject: [PATCH 8/9] Update declarations for Onboarding Story
Add the new glam pending archive components to the testing module used
in the Onboarding Story so that the GLAM pending archive flow works
properly.
PER-9566: "Invited as archive member" GLAM onboarding flow
---
.../components/onboarding/onboarding.component.stories.ts | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/src/app/onboarding/components/onboarding/onboarding.component.stories.ts b/src/app/onboarding/components/onboarding/onboarding.component.stories.ts
index 2408325b4..1420facea 100644
--- a/src/app/onboarding/components/onboarding/onboarding.component.stories.ts
+++ b/src/app/onboarding/components/onboarding/onboarding.component.stories.ts
@@ -33,6 +33,8 @@ import { OnboardingHeaderComponent } from '../header/header.component';
import { GlamOnboardingHeaderComponent } from '../glam/glam-header/glam-header.component';
import { GlamArchiveTypeSelectComponent } from '../glam/archive-type-select/archive-type-select.component';
import { ArchiveTypeIconComponent } from '../glam/archive-type-icon/archive-type-icon.component';
+import { GlamPendingArchivesComponent } from '../glam-pending-archives/glam-pending-archives.component';
+import { PendingArchiveComponent } from '../glam/pending-archive/pending-archive.component';
import { OnboardingComponent } from './onboarding.component';
class MockAccountService {
@@ -155,6 +157,8 @@ export default {
GlamOnboardingHeaderComponent,
ArchiveSmallComponent,
BgImageSrcDirective,
+ GlamPendingArchivesComponent,
+ PendingArchiveComponent,
],
imports: [
CommonModule,
From ac35a35736544ae7c146b95fceae3c3911cc3012 Mon Sep 17 00:00:00 2001
From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com>
Date: Wed, 7 Aug 2024 16:54:35 +0300
Subject: [PATCH 9/9] Added the owner role
---
.../components/glam/pending-archive/pending-archive.component.ts | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.ts b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.ts
index 09bae6439..3f6206e1b 100644
--- a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.ts
+++ b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.ts
@@ -14,6 +14,7 @@ export class PendingArchiveComponent {
'access.role.contributor': 'Contributor',
'access.role.curator': 'Curator',
'access.role.manager': 'Manager',
+ 'access.role.owner': 'Owner',
};
@Input() archive: ArchiveVO;
+ @for (archive of pendingArchives; track archive.archiveId) {
+
diff --git a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.scss b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.scss
index cfb99637f..71aa5367b 100644
--- a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.scss
+++ b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.scss
@@ -16,9 +16,41 @@ p {
}
.text-container {
+ width: 50%;
}
.pending-archives {
display: flex;
gap: 64px;
+ margin-top: 64px;
+
+ @media screen and (max-width: 900px) {
+ flex-direction: column;
+ }
+}
+
+.pending-archives-container {
+ width: 500px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: 70vh;
+
+ @media screen and (max-width: 900px) {
+ height: 40vh;
+ }
+}
+
+.buttons {
+ display: flex;
+ justify-content: space-between;
+ gap: 32px;
+}
+
+.next-button {
+ width: 50%;
+}
+
+.create-button {
+ width: 50%;
}
diff --git a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.ts b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.ts
index 6a711697b..84c0ff2de 100644
--- a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.ts
+++ b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ArchiveVO } from '@models/index';
import { AccountService } from '@shared/services/account/account.service';
@@ -7,12 +7,32 @@ import { AccountService } from '@shared/services/account/account.service';
templateUrl: './glam-pending-archives.component.html',
styleUrl: './glam-pending-archives.component.scss',
})
-export class GlamPendingArchivesComponent {
+export class GlamPendingArchivesComponent implements OnInit {
@Input() pendingArchives: ArchiveVO[] = [];
+ @Output() createNewArchiveOutput = new EventEmitterpending-archive works!
+ +
+
diff --git a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.scss b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.scss
index e69de29bb..dc599759e 100644
--- a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.scss
+++ b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.scss
@@ -0,0 +1,43 @@
+/* @format */
+@import 'fonts';
+
+.pending-archive-container {
+ display: flex;
+ width: 50%;
+ justify-content: space-between;
+}
+
+.name {
+ color: white;
+ font-size: 14px;
+ font-family: 'UsualRegular', sans-serif;
+ margin-bottom: 0;
+}
+
+.role {
+ color: rgba(255, 255, 255, 0.5);
+ font-family: 'UsualRegular', sans-serif;
+ font-size: 14px;
+ margin-bottom: 0;
+}
+
+.pending-archive {
+ display: flex;
+ justify-content: space-between;
+}
+
+.accept-button {
+ display: flex;
+ align-items: center;
+}
+
+.archive-image-and-text {
+ display: flex;
+ gap: 16px;
+ align-items: center;
+}
+
+.archive-image > img {
+ width: 50px;
+ height: 50px;
+}
diff --git a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts
index ba8d9fe00..0e0506ec0 100644
--- a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts
+++ b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.spec.ts
@@ -1,3 +1,4 @@
+/* @format */
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PendingArchiveComponent } from './pending-archive.component';
diff --git a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.ts b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.ts
index 4f2dd943e..4cb2de155 100644
--- a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.ts
+++ b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.ts
@@ -1,13 +1,31 @@
-import { Component, Input } from '@angular/core';
+/* @format */
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ArchiveVO } from '@models/index';
@Component({
selector: 'pr-pending-archive',
- standalone: true,
- imports: [],
templateUrl: './pending-archive.component.html',
styleUrl: './pending-archive.component.scss',
})
-export class PendingArchiveComponent {
- @Input() archiveName: string = '';
- @Input() role = '';
+export class PendingArchiveComponent implements OnInit {
+ readonly roles = {
+ 'access.role.viewer': 'Viewer',
+ 'access.role.editor': 'Editor',
+ 'access.role.contributor': 'Contributor',
+ 'access.role.curator': 'Curator',
+ 'access.role.manager': 'Manager',
+ };
+
+ @Input() archive: ArchiveVO;
+ @Input() isSelected: boolean = false;
+
+ @Output() acceptArchiveOutput = new EventEmitter
+
+
+
+
+
+
+
+
+ + The {{ archive.fullName }} Archive +
+Invited as {{ roles[archive.accessRole] }}
+Loading...
-
} @else {
Something went wrong.
}
diff --git a/src/app/onboarding/components/onboarding/onboarding.component.ts b/src/app/onboarding/components/onboarding/onboarding.component.ts
index d42e2619b..fc114dd8d 100644
--- a/src/app/onboarding/components/onboarding/onboarding.component.ts
+++ b/src/app/onboarding/components/onboarding/onboarding.component.ts
@@ -83,6 +83,7 @@ export class OnboardingComponent implements OnInit {
}
public setScreen(screen: OnboardingScreen): void {
+ console.log('setScreen', screen);
this.screen = screen;
if (this.selectedPendingArchive) {
this.selectedPendingArchive = null;
diff --git a/src/app/onboarding/onboarding.module.ts b/src/app/onboarding/onboarding.module.ts
index 0cebab60c..c3974d6a7 100644
--- a/src/app/onboarding/onboarding.module.ts
+++ b/src/app/onboarding/onboarding.module.ts
@@ -29,6 +29,7 @@ import { GlamUserSurveySquareComponent } from './components/glam/glam-user-surve
import { OnboardingHeaderComponent } from './components/header/header.component';
import { GlamOnboardingHeaderComponent } from './components/glam/glam-header/glam-header.component';
import { GlamPendingArchivesComponent } from './components/glam-pending-archives/glam-pending-archives.component';
+import { PendingArchiveComponent } from './components/glam/pending-archive/pending-archive.component';
@NgModule({
declarations: [
@@ -47,6 +48,7 @@ import { GlamPendingArchivesComponent } from './components/glam-pending-archives
OnboardingHeaderComponent,
GlamOnboardingHeaderComponent,
GlamPendingArchivesComponent,
+ PendingArchiveComponent,
],
imports: [
CommonModule,
diff --git a/src/assets/svg/accept-green.svg b/src/assets/svg/accept-green.svg
new file mode 100644
index 000000000..008fd7ef2
--- /dev/null
+++ b/src/assets/svg/accept-green.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/svg/accept-white.svg b/src/assets/svg/accept-white.svg
new file mode 100644
index 000000000..e3e7cc652
--- /dev/null
+++ b/src/assets/svg/accept-white.svg
@@ -0,0 +1,3 @@
+
From 86b0a5aa903bafc9ea5a22468e95c04103707b50 Mon Sep 17 00:00:00 2001
From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com>
Date: Mon, 29 Jul 2024 14:18:12 +0300
Subject: [PATCH 3/9] added tests
---
.../glam-pending-archives.component.html | 1 +
.../glam-pending-archives.component.scss | 1 +
.../glam-pending-archives.component.spec.ts | 87 ++++++++++++---
.../glam-pending-archives.component.ts | 9 +-
.../pending-archive.component.html | 2 +-
.../pending-archive.component.spec.ts | 102 +++++++++++++++---
.../pending-archive.component.ts | 8 +-
7 files changed, 169 insertions(+), 41 deletions(-)
diff --git a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.html b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.html
index 3f7485286..16d59cdcc 100644
--- a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.html
+++ b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.html
@@ -1,3 +1,4 @@
+
diff --git a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.scss b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.scss
index 71aa5367b..5d86258da 100644
--- a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.scss
+++ b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.scss
@@ -1,3 +1,4 @@
+/* @format */
@import 'variables';
@import 'fonts';
diff --git a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.spec.ts b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.spec.ts
index 96c2686c7..40880c8b7 100644
--- a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.spec.ts
+++ b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.spec.ts
@@ -1,23 +1,82 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+/* @format */
+import { Shallow } from 'shallow-render';
import { GlamPendingArchivesComponent } from './glam-pending-archives.component';
+import { OnboardingModule } from '../../onboarding.module';
+import { AccountService } from '@shared/services/account/account.service';
+import { ArchiveVO } from '@models/index';
+
+const mockAccountService = {
+ getAccount: () => {
+ return {
+ fullName: 'John Doe',
+ };
+ },
+};
describe('GlamPendingArchivesComponent', () => {
- let component: GlamPendingArchivesComponent;
- let fixture: ComponentFixture
- The {{ archive.fullName }} Archive + The {{ archive?.fullName }} Archive
Invited as {{ roles[archive.accessRole] }}