diff --git a/packages/angular/projects/spaces/package.json b/packages/angular/projects/spaces/package.json index 00268c7d..35cd54c1 100644 --- a/packages/angular/projects/spaces/package.json +++ b/packages/angular/projects/spaces/package.json @@ -1,6 +1,6 @@ { "name": "@flatfile/angular-sdk", - "version": "1.1.0", + "version": "1.3.0", "homepage": "https://flatfile.com/", "description": "Angular flatfile sdk", "license": "MIT", diff --git a/packages/angular/projects/spaces/src/lib/space/space-frame/spaceFrame.component.ts b/packages/angular/projects/spaces/src/lib/space/space-frame/spaceFrame.component.ts index ff31a095..e9ec8382 100644 --- a/packages/angular/projects/spaces/src/lib/space/space-frame/spaceFrame.component.ts +++ b/packages/angular/projects/spaces/src/lib/space/space-frame/spaceFrame.component.ts @@ -1,19 +1,19 @@ -import { Component, Input, OnInit } from "@angular/core"; -import { ISpace, SimpleOnboarding } from "@flatfile/embedded-utils"; -import { Browser, FlatfileEvent } from '@flatfile/listener'; - -import addSpaceInfo from '../../../utils/addSpaceInfo'; -import authenticate from "../../../utils/authenticate"; -import createSimpleListener from "../../../utils/createSimpleListener"; -import { SpaceCloseModalPropsType } from "../space-close-modal/spaceCloseModal.component"; -import { getContainerStyles, getIframeStyles } from "./embeddedStyles"; - -export type SpaceFramePropsType = ISpace & { - spaceId: string; - spaceUrl: string; - localAccessToken: string; - handleCloseInstance: () => void; - closeInstance: boolean; +import { Component, Input, OnInit } from '@angular/core' +import { ISpace, SimpleOnboarding } from '@flatfile/embedded-utils' +import { Browser, FlatfileEvent } from '@flatfile/listener' + +import addSpaceInfo from '../../../utils/addSpaceInfo' +import authenticate from '../../../utils/authenticate' +import createSimpleListener from '../../../utils/createSimpleListener' +import { SpaceCloseModalPropsType } from '../space-close-modal/spaceCloseModal.component' +import { getContainerStyles, getIframeStyles } from './embeddedStyles' + +export type SpaceFramePropsType = ISpace & { + spaceId: string + spaceUrl: string + localAccessToken: string + handleCloseInstance: () => void + closeInstance: boolean } @Component({ @@ -28,21 +28,28 @@ export class SpaceFrame implements OnInit { {} as SpaceCloseModalPropsType iframeWrapperStyle = {} iframeStyle = {} - handlePostMessageInstance: ((event: MessageEvent<{ flatfileEvent: FlatfileEvent }>) => void) = () => {} + handlePostMessageInstance: ( + event: MessageEvent<{ flatfileEvent: FlatfileEvent }> + ) => void = () => {} - @Input({required: true}) spaceFrameProps: SpaceFramePropsType = {} as SpaceFramePropsType - @Input({required: true}) loading: boolean = false + @Input({ required: true }) spaceFrameProps: SpaceFramePropsType = + {} as SpaceFramePropsType + @Input({ required: true }) loading: boolean = false async created() { - const { listener, apiUrl, closeSpace, workbook } = this.spaceFrameProps; + const { listener, apiUrl, closeSpace, workbook } = this.spaceFrameProps const accessToken = this.spaceFrameProps.localAccessToken const simpleListenerSlug = workbook?.sheets?.[0].slug || 'slug' - const listenerInstance = listener || createSimpleListener({ - onRecordHook: (this.spaceFrameProps as SimpleOnboarding).onRecordHook, - onSubmit: (this.spaceFrameProps as SimpleOnboarding).onSubmit, - slug: simpleListenerSlug, - }) + const listenerInstance = + listener || + createSimpleListener({ + onRecordHook: (this.spaceFrameProps as SimpleOnboarding).onRecordHook, + onSubmit: (this.spaceFrameProps as SimpleOnboarding).onSubmit, + submitSettings: (this.spaceFrameProps as SimpleOnboarding) + .submitSettings, + slug: simpleListenerSlug, + }) if (listenerInstance && typeof apiUrl === 'string') { listenerInstance.mount( @@ -63,7 +70,9 @@ export class SpaceFrame implements OnInit { return listenerInstance?.dispatchEvent(eventInstance) } - const handlePostMessage = (event: MessageEvent<{ flatfileEvent:FlatfileEvent }>) => { + const handlePostMessage = ( + event: MessageEvent<{ flatfileEvent: FlatfileEvent }> + ) => { const { flatfileEvent } = event.data if (!flatfileEvent) return if ( @@ -91,24 +100,27 @@ export class SpaceFrame implements OnInit { sidebarConfig, userInfo, spaceId, - apiUrl = "https://platform.flatfile.com/api" - } = this.spaceFrameProps; - - const accessToken = this.spaceFrameProps.localAccessToken; - - if(publishableKey) { - const fullAccessApi = authenticate(accessToken, apiUrl); - await addSpaceInfo({ - publishableKey, - workbook, - environmentId, - document, - themeConfig, - sidebarConfig, - userInfo - }, spaceId, fullAccessApi); + apiUrl = 'https://platform.flatfile.com/api', + } = this.spaceFrameProps + + const accessToken = this.spaceFrameProps.localAccessToken + + if (publishableKey) { + const fullAccessApi = authenticate(accessToken, apiUrl) + await addSpaceInfo( + { + publishableKey, + workbook, + environmentId, + document, + themeConfig, + sidebarConfig, + userInfo, + }, + spaceId, + fullAccessApi + ) } - } openCloseModalDialog() { 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 8de2e274..caa6ef31 100644 --- a/packages/angular/projects/spaces/src/lib/space/space.component.ts +++ b/packages/angular/projects/spaces/src/lib/space/space.component.ts @@ -5,7 +5,7 @@ import useInitializeSpace from '../../utils/useInitializeSpace'; import { SpaceFramePropsType } from './space-frame/spaceFrame.component'; import { SpaceService } from './space.service'; -type ReusedOrObording = ReusedSpaceWithAccessToken | SimpleOnboarding +type ReusedOrOnboarding = ReusedSpaceWithAccessToken | SimpleOnboarding @Component({ selector: 'flatfile-space', @@ -43,7 +43,7 @@ export class Space implements OnInit{ this.closeInstance = true; } - initSpace = async (spaceProps: ReusedOrObording) => { + initSpace = async (spaceProps: ReusedOrOnboarding) => { this.closeInstance = false const { space, initializeSpace } = useInitializeSpace(spaceProps as SimpleOnboarding); diff --git a/packages/angular/src/app/app.component.ts b/packages/angular/src/app/app.component.ts index 8bc30c35..11fc3510 100644 --- a/packages/angular/src/app/app.component.ts +++ b/packages/angular/src/app/app.component.ts @@ -24,8 +24,8 @@ export class AppComponent { spaceProps: ISpace = { name: 'Trste!', - environmentId: 'us_env_ZvaDGP3B', - publishableKey: 'pk_0d40167fccfc47e9a4ec0223e9787e63', + environmentId: 'us_env_1234', + publishableKey: 'sk_1234', workbook, listener, userInfo: { diff --git a/packages/angular/src/app/sheet.ts b/packages/angular/src/app/sheet.ts new file mode 100644 index 00000000..2ecee15d --- /dev/null +++ b/packages/angular/src/app/sheet.ts @@ -0,0 +1,23 @@ +import { Flatfile } from '@flatfile/api' + +export const sheet: Flatfile.SheetConfig = { + name: 'Contacts', + slug: 'contacts', + fields: [ + { + key: 'firstName', + type: 'string', + label: 'First Name', + }, + { + key: 'lastName', + type: 'string', + label: 'Last Name', + }, + { + key: 'email', + type: 'string', + label: 'Email', + }, + ], +} diff --git a/packages/angular/src/app/simplified.component.ts b/packages/angular/src/app/simplified.component.ts index 08ad33f6..39de35ad 100644 --- a/packages/angular/src/app/simplified.component.ts +++ b/packages/angular/src/app/simplified.component.ts @@ -1,30 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Flatfile } from '@flatfile/api' - -const sheet = { - name: 'Contacts', - slug: 'contacts', - fields: [ - { - key: 'firstName', - type: 'string', - label: 'First Name', - config: undefined, - } as Flatfile.Property.String, - { - key: 'lastName', - type: 'string', - label: 'Last Name', - config: undefined, - } as Flatfile.Property.String, - { - key: 'email', - type: 'string', - label: 'Email', - config: undefined, - } as Flatfile.Property.String, - ], -} +import { sheet } from './sheet'; @Component({ selector: 'app-root', diff --git a/packages/angular/src/app/workbook.ts b/packages/angular/src/app/workbook.ts index cfa1756c..b77374f4 100644 --- a/packages/angular/src/app/workbook.ts +++ b/packages/angular/src/app/workbook.ts @@ -1,34 +1,10 @@ import { Flatfile } from '@flatfile/api' +import { sheet } from './sheet' -export const workbook: Pick< - Flatfile.CreateWorkbookConfig, - 'name' | 'labels' | 'sheets' | 'actions' -> = { +export const workbook: Flatfile.CreateWorkbookConfig = { name: 'All Data', labels: ['pinned'], - sheets: [ - { - name: 'Contacts', - slug: 'contacts', - fields: [ - { - key: 'firstName', - type: 'string', - label: 'First Name', - }, - { - key: 'lastName', - type: 'string', - label: 'Last Name', - }, - { - key: 'email', - type: 'string', - label: 'Email', - }, - ], - }, - ], + sheets: [sheet], actions: [ { operation: 'submitActionFg',