From ed20a1169f6388e55eee13b3949bc023e77df503 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathieu=20The=CC=81riault?= Date: Mon, 28 Oct 2024 10:36:56 -0400 Subject: [PATCH 1/8] Enable Loading component overrride on Angular --- .../spaces/src/lib/space/space.component.html | 22 ++++-- .../spaces/src/lib/space/space.component.ts | 73 ++++++++++++------- 2 files changed, 62 insertions(+), 33 deletions(-) diff --git a/packages/angular/projects/spaces/src/lib/space/space.component.html b/packages/angular/projects/spaces/src/lib/space/space.component.html index 4baea54e..c327d311 100644 --- a/packages/angular/projects/spaces/src/lib/space/space.component.html +++ b/packages/angular/projects/spaces/src/lib/space/space.component.html @@ -1,15 +1,23 @@ -
- +
+ + -
- +
+
-
+

Something Went Wrong

- {{this.error?.message}} + {{ error?.message }}

-
\ No newline at end of file +
diff --git a/packages/angular/projects/spaces/src/lib/space/space.component.ts b/packages/angular/projects/spaces/src/lib/space/space.component.ts index caa6ef31..4fd5822e 100644 --- a/packages/angular/projects/spaces/src/lib/space/space.component.ts +++ b/packages/angular/projects/spaces/src/lib/space/space.component.ts @@ -1,56 +1,79 @@ -import { Component, Input, OnInit } from '@angular/core'; -import type { ISpace, ReusedSpaceWithAccessToken, SimpleOnboarding } from '@flatfile/embedded-utils'; -import getSpace from '../../utils/getSpace'; -import useInitializeSpace from '../../utils/useInitializeSpace'; -import { SpaceFramePropsType } from './space-frame/spaceFrame.component'; -import { SpaceService } from './space.service'; +import { + ChangeDetectionStrategy, + Component, + Input, + OnInit, + TemplateRef, +} from '@angular/core' +import type { + ISpace, + ReusedSpaceWithAccessToken, + SimpleOnboarding, +} from '@flatfile/embedded-utils' +import getSpace from '../../utils/getSpace' +import useInitializeSpace from '../../utils/useInitializeSpace' +import { SpaceFramePropsType } from './space-frame/spaceFrame.component' +import { SpaceService } from './space.service' type ReusedOrOnboarding = ReusedSpaceWithAccessToken | SimpleOnboarding - @Component({ selector: 'flatfile-space', templateUrl: './space.component.html', styleUrls: ['./space.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, }) -export class Space implements OnInit{ +export class Space implements OnInit { @Input({ required: true }) spaceProps: ISpace = {} as ISpace @Input() openDirectly: boolean = false + /** + * Override the default loading component. + * + * Accepts a template ref. + * Replaces the loading property on the ISpace interface. + */ + @Input() loadingTemplate: TemplateRef | undefined - title = 'Space'; + title = 'Space' localSpaceData: Record | undefined spaceFrameProps: SpaceFramePropsType | undefined error: { message: string } | undefined - loading: boolean = false; - closeInstance: boolean = false; - + loading: boolean = false + closeInstance: boolean = false + constructor(private appService: SpaceService) {} async ngOnInit() { - if(!this.spaceProps) throw new Error("Please define the space props"); - + console.log(this.spaceProps) + + if (!this.spaceProps) throw new Error('Please define the space props') + if (this.openDirectly) { await this.initSpace(this.spaceProps) } else { - this.appService.signal.subscribe(async event => { + this.appService.signal.subscribe(async (event) => { if (event) { await this.initSpace(this.spaceProps) } - }); + }) } } - handleCloseInstance = () => { - this.closeInstance = true; + handleCloseInstance = () => { + this.closeInstance = true } initSpace = async (spaceProps: ReusedOrOnboarding) => { this.closeInstance = false - const { space, initializeSpace } = useInitializeSpace(spaceProps as SimpleOnboarding); + const { space, initializeSpace } = useInitializeSpace( + spaceProps as SimpleOnboarding + ) - try{ + try { this.loading = true - const { space, workbook } = this.spaceProps.publishableKey ? await initializeSpace() : await getSpace(spaceProps); - const { id: spaceId, accessToken, guestLink } = space.data; + const { space, workbook } = this.spaceProps.publishableKey + ? await initializeSpace() + : await getSpace(spaceProps) + const { id: spaceId, accessToken, guestLink } = space.data if (!spaceId || typeof spaceId !== 'string') { throw new Error('Missing spaceId from space response') @@ -76,10 +99,8 @@ export class Space implements OnInit{ ...this.localSpaceData, apiUrl: spaceProps.apiUrl || 'https://platform.flatfile.com/api', workbook, - handleCloseInstance: this.handleCloseInstance - } as SpaceFramePropsType; - - + handleCloseInstance: this.handleCloseInstance, + } as SpaceFramePropsType } catch (error) { this.loading = false this.error = error as Error From 6c6b01fc6f6bf9a17ff788f827a6ffc38f6139ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathieu=20The=CC=81riault?= Date: Tue, 29 Oct 2024 13:37:42 -0400 Subject: [PATCH 2/8] Enable overriding default lodaing indicator with custom one --- .../spaces/src/lib/space/space.component.html | 6 ++-- .../spaces/src/lib/space/space.component.ts | 36 ++++++++++++------- 2 files changed, 27 insertions(+), 15 deletions(-) diff --git a/packages/angular/projects/spaces/src/lib/space/space.component.html b/packages/angular/projects/spaces/src/lib/space/space.component.html index c327d311..3eaf0f03 100644 --- a/packages/angular/projects/spaces/src/lib/space/space.component.html +++ b/packages/angular/projects/spaces/src/lib/space/space.component.html @@ -2,7 +2,7 @@ + />
@@ -15,8 +15,8 @@

Something Went Wrong

-

- {{ error?.message }} +

+ {{ error.message }}

diff --git a/packages/angular/projects/spaces/src/lib/space/space.component.ts b/packages/angular/projects/spaces/src/lib/space/space.component.ts index 4fd5822e..c4bb91de 100644 --- a/packages/angular/projects/spaces/src/lib/space/space.component.ts +++ b/packages/angular/projects/spaces/src/lib/space/space.component.ts @@ -1,8 +1,11 @@ import { ChangeDetectionStrategy, + ChangeDetectorRef, Component, Input, + OnChanges, OnInit, + SimpleChanges, TemplateRef, } from '@angular/core' import type { @@ -22,29 +25,24 @@ type ReusedOrOnboarding = ReusedSpaceWithAccessToken | SimpleOnboarding styleUrls: ['./space.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class Space implements OnInit { +export class Space implements OnInit, OnChanges { @Input({ required: true }) spaceProps: ISpace = {} as ISpace @Input() openDirectly: boolean = false - /** - * Override the default loading component. - * - * Accepts a template ref. - * Replaces the loading property on the ISpace interface. - */ - @Input() loadingTemplate: TemplateRef | undefined title = 'Space' localSpaceData: Record | undefined spaceFrameProps: SpaceFramePropsType | undefined error: { message: string } | undefined loading: boolean = false + loadingTemplate: TemplateRef | undefined closeInstance: boolean = false - constructor(private appService: SpaceService) {} + constructor( + private appService: SpaceService, + private changeDetectorRef: ChangeDetectorRef + ) {} async ngOnInit() { - console.log(this.spaceProps) - if (!this.spaceProps) throw new Error('Please define the space props') if (this.openDirectly) { @@ -58,13 +56,24 @@ export class Space implements OnInit { } } + ngOnChanges(changes: SimpleChanges): void { + if ( + 'spaceProps' in changes && + !changes['spaceProps'].firstChange && + changes['spaceProps'].currentValue.loading + ) { + this.loadingTemplate = changes['spaceProps'].currentValue.loading + } + } + handleCloseInstance = () => { this.closeInstance = true } initSpace = async (spaceProps: ReusedOrOnboarding) => { + this.changeDetectorRef.markForCheck() this.closeInstance = false - const { space, initializeSpace } = useInitializeSpace( + const { initializeSpace } = useInitializeSpace( spaceProps as SimpleOnboarding ) @@ -102,9 +111,12 @@ export class Space implements OnInit { handleCloseInstance: this.handleCloseInstance, } as SpaceFramePropsType } catch (error) { + console.log('error', error) this.loading = false this.error = error as Error throw new Error(`An error has occurred: ${error}`) + } finally { + this.changeDetectorRef.markForCheck() } } } From 78a3c6cf6afac091b7341907f52a6a46d4ffc2c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathieu=20The=CC=81riault?= Date: Tue, 29 Oct 2024 13:42:57 -0400 Subject: [PATCH 3/8] Enable overriding default loading component in Angular --- .changeset/proud-books-rush.md | 5 +++++ .../spaces/src/lib/space/space.component.html | 6 +++--- .../spaces/src/lib/space/space.component.ts | 13 +++++-------- 3 files changed, 13 insertions(+), 11 deletions(-) create mode 100644 .changeset/proud-books-rush.md diff --git a/.changeset/proud-books-rush.md b/.changeset/proud-books-rush.md new file mode 100644 index 00000000..9b9683a6 --- /dev/null +++ b/.changeset/proud-books-rush.md @@ -0,0 +1,5 @@ +--- +'angular': minor +--- + +Allow overriding the default loading component in Angular through the loadingTemplate input. diff --git a/packages/angular/projects/spaces/src/lib/space/space.component.html b/packages/angular/projects/spaces/src/lib/space/space.component.html index 3eaf0f03..3163ba45 100644 --- a/packages/angular/projects/spaces/src/lib/space/space.component.html +++ b/packages/angular/projects/spaces/src/lib/space/space.component.html @@ -1,9 +1,9 @@
- +
| undefined closeInstance: boolean = false constructor( @@ -57,12 +55,11 @@ export class Space implements OnInit, OnChanges { } ngOnChanges(changes: SimpleChanges): void { - if ( - 'spaceProps' in changes && - !changes['spaceProps'].firstChange && - changes['spaceProps'].currentValue.loading - ) { - this.loadingTemplate = changes['spaceProps'].currentValue.loading + if ('spaceProps' in changes && !changes['spaceProps'].firstChange) { + this.spaceProps = { + ...this.spaceProps, + ...changes['spaceProps'].currentValue, + } } } From 678a44038193ac541c5e5a763bfb3749932abd5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathieu=20The=CC=81riault?= Date: Wed, 30 Oct 2024 08:27:38 -0400 Subject: [PATCH 4/8] Add markForCheck when changing spaceProps --- .../angular/projects/spaces/src/lib/space/space.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/angular/projects/spaces/src/lib/space/space.component.ts b/packages/angular/projects/spaces/src/lib/space/space.component.ts index a2a65c75..cdf2e743 100644 --- a/packages/angular/projects/spaces/src/lib/space/space.component.ts +++ b/packages/angular/projects/spaces/src/lib/space/space.component.ts @@ -60,6 +60,7 @@ export class Space implements OnInit, OnChanges { ...this.spaceProps, ...changes['spaceProps'].currentValue, } + this.changeDetectorRef.markForCheck() } } From 1bf3bb360b3840fd79941c77322dee0b1162a536 Mon Sep 17 00:00:00 2001 From: Mathieu Theriault Date: Wed, 30 Oct 2024 10:14:34 -0400 Subject: [PATCH 5/8] Remove console.error --- .changeset/proud-books-rush.md | 2 +- .../angular/projects/spaces/src/lib/space/space.component.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/.changeset/proud-books-rush.md b/.changeset/proud-books-rush.md index 9b9683a6..a4c535f2 100644 --- a/.changeset/proud-books-rush.md +++ b/.changeset/proud-books-rush.md @@ -2,4 +2,4 @@ 'angular': minor --- -Allow overriding the default loading component in Angular through the loadingTemplate input. +Allow overriding the default loading component in Angular through the loading property. diff --git a/packages/angular/projects/spaces/src/lib/space/space.component.ts b/packages/angular/projects/spaces/src/lib/space/space.component.ts index cdf2e743..dd90e156 100644 --- a/packages/angular/projects/spaces/src/lib/space/space.component.ts +++ b/packages/angular/projects/spaces/src/lib/space/space.component.ts @@ -109,7 +109,6 @@ export class Space implements OnInit, OnChanges { handleCloseInstance: this.handleCloseInstance, } as SpaceFramePropsType } catch (error) { - console.log('error', error) this.loading = false this.error = error as Error throw new Error(`An error has occurred: ${error}`) From 970e9a619b8b17bc0917e80bd795471952cd80d0 Mon Sep 17 00:00:00 2001 From: Mathieu Theriault Date: Wed, 30 Oct 2024 10:31:54 -0400 Subject: [PATCH 6/8] remove old component --- .../spaces/src/lib/space/space.component.ts | 119 ------------------ 1 file changed, 119 deletions(-) delete mode 100644 packages/angular/projects/spaces/src/lib/space/space.component.ts diff --git a/packages/angular/projects/spaces/src/lib/space/space.component.ts b/packages/angular/projects/spaces/src/lib/space/space.component.ts deleted file mode 100644 index dd90e156..00000000 --- a/packages/angular/projects/spaces/src/lib/space/space.component.ts +++ /dev/null @@ -1,119 +0,0 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - Input, - OnChanges, - OnInit, - SimpleChanges, -} from '@angular/core' -import type { - ISpace, - ReusedSpaceWithAccessToken, - SimpleOnboarding, -} from '@flatfile/embedded-utils' -import getSpace from '../../utils/getSpace' -import useInitializeSpace from '../../utils/useInitializeSpace' -import { SpaceFramePropsType } from './space-frame/spaceFrame.component' -import { SpaceService } from './space.service' - -type ReusedOrOnboarding = ReusedSpaceWithAccessToken | SimpleOnboarding -@Component({ - selector: 'flatfile-space', - templateUrl: './space.component.html', - styleUrls: ['./space.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class Space implements OnInit, OnChanges { - @Input({ required: true }) spaceProps: ISpace = {} as ISpace - @Input() openDirectly: boolean = false - - title = 'Space' - localSpaceData: Record | undefined - spaceFrameProps: SpaceFramePropsType | undefined - error: { message: string } | undefined - loading: boolean = false - closeInstance: boolean = false - - constructor( - private appService: SpaceService, - private changeDetectorRef: ChangeDetectorRef - ) {} - - async ngOnInit() { - if (!this.spaceProps) throw new Error('Please define the space props') - - if (this.openDirectly) { - await this.initSpace(this.spaceProps) - } else { - this.appService.signal.subscribe(async (event) => { - if (event) { - await this.initSpace(this.spaceProps) - } - }) - } - } - - ngOnChanges(changes: SimpleChanges): void { - if ('spaceProps' in changes && !changes['spaceProps'].firstChange) { - this.spaceProps = { - ...this.spaceProps, - ...changes['spaceProps'].currentValue, - } - this.changeDetectorRef.markForCheck() - } - } - - handleCloseInstance = () => { - this.closeInstance = true - } - - initSpace = async (spaceProps: ReusedOrOnboarding) => { - this.changeDetectorRef.markForCheck() - this.closeInstance = false - const { initializeSpace } = useInitializeSpace( - spaceProps as SimpleOnboarding - ) - - try { - this.loading = true - const { space, workbook } = this.spaceProps.publishableKey - ? await initializeSpace() - : await getSpace(spaceProps) - const { id: spaceId, accessToken, guestLink } = space.data - - if (!spaceId || typeof spaceId !== 'string') { - throw new Error('Missing spaceId from space response') - } - - if (!guestLink || typeof guestLink !== 'string') { - throw new Error('Missing guest link from space response') - } - - if (!accessToken || typeof accessToken !== 'string') { - throw new Error('Missing access token from space response') - } - - this.localSpaceData = { - spaceId, - spaceUrl: guestLink, - localAccessToken: accessToken, - } - - this.loading = false - this.spaceFrameProps = { - ...this.spaceProps, - ...this.localSpaceData, - apiUrl: spaceProps.apiUrl || 'https://platform.flatfile.com/api', - workbook, - handleCloseInstance: this.handleCloseInstance, - } as SpaceFramePropsType - } catch (error) { - this.loading = false - this.error = error as Error - throw new Error(`An error has occurred: ${error}`) - } finally { - this.changeDetectorRef.markForCheck() - } - } -} From 45bdcd90a2ebcba1e6252580d8b40acf6acf5d3d Mon Sep 17 00:00:00 2001 From: mattheri <41492712+mattheri@users.noreply.github.com> Date: Tue, 5 Nov 2024 15:48:53 -0500 Subject: [PATCH 7/8] Update proud-books-rush.md --- .changeset/proud-books-rush.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/proud-books-rush.md b/.changeset/proud-books-rush.md index a4c535f2..b0f8efe4 100644 --- a/.changeset/proud-books-rush.md +++ b/.changeset/proud-books-rush.md @@ -1,5 +1,5 @@ --- -'angular': minor +'@flatfile/angular-sdk': minor --- Allow overriding the default loading component in Angular through the loading property. From 6518009dcdccfb6100b38e3bf6384d48aea4e0bb Mon Sep 17 00:00:00 2001 From: mattheri <41492712+mattheri@users.noreply.github.com> Date: Tue, 5 Nov 2024 15:49:29 -0500 Subject: [PATCH 8/8] Update proud-books-rush.md --- .changeset/proud-books-rush.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/proud-books-rush.md b/.changeset/proud-books-rush.md index b0f8efe4..1a7127f9 100644 --- a/.changeset/proud-books-rush.md +++ b/.changeset/proud-books-rush.md @@ -2,4 +2,4 @@ '@flatfile/angular-sdk': minor --- -Allow overriding the default loading component in Angular through the loading property. +Allow overriding the default loading component in Angular by assigning a custom TemplateRef to the ISpace['loading'] property. This enables users to replace the default loading spinner with their own loading template.