From c5e2cbd91ce80f50295cd216e5414f5c074dd795 Mon Sep 17 00:00:00 2001 From: "alexandria.gomez" Date: Tue, 1 Aug 2023 17:41:55 -0400 Subject: [PATCH] update login and saved to laserfiche dialog --- .../savetoLaserfiche/CommonDialogs.tsx | 110 ++++++++------ .../GetDocumentDataDialog.tsx | 54 +++++-- .../SaveDocumentToLaserfiche.ts | 77 +++++++++- .../SaveToLaserficheDialog.tsx | 102 +++++++++---- .../SendToLaserFiche.module.scss | 141 ++++++++++++------ ...SendToLaserficheLoginComponent.module.scss | 7 +- .../SendToLaserficheLoginComponent.tsx | 110 ++++++++------ 7 files changed, 412 insertions(+), 189 deletions(-) diff --git a/src/extensions/savetoLaserfiche/CommonDialogs.tsx b/src/extensions/savetoLaserfiche/CommonDialogs.tsx index a735ff8..f6bbb62 100644 --- a/src/extensions/savetoLaserfiche/CommonDialogs.tsx +++ b/src/extensions/savetoLaserfiche/CommonDialogs.tsx @@ -1,52 +1,78 @@ import * as React from 'react'; import { Navigation } from 'spfx-navigation'; import styles from './SendToLaserFiche.module.scss'; +import { SPComponentLoader } from '@microsoft/sp-loader'; +import { SavedToLaserficheDocumentData } from './SaveDocumentToLaserfiche'; const SAVING_DOCUMENT_TO_LASERFICHE = 'Saving your document to Laserfiche'; export default function LoadingDialog() { return ( <> - -
-

{SAVING_DOCUMENT_TO_LASERFICHE}

-
+ +
+
{SAVING_DOCUMENT_TO_LASERFICHE}
); } -const DOCUMENT_UPLOADED = 'Document uploaded'; +const DOCUMENT_UPLOADED = + 'Document successfully uploaded to Laserfiche with name:'; const DOCUMENT_UPLOADED_METADATA_FAILED = - 'Document uploaded to repository, updating metadata failed due to constraint mismatch'; + 'All metadata failed to save due to an invalid field'; const TEMPLATE_FIELDS_NOT_APPLIED = 'The Laserfiche template and fields were not applied to this document.'; const CLOSE = 'Close'; -const GO_TO_FILE = 'Go to File'; -const GO_TO_LIBRARY = 'Go to Library'; -const CLICK_HERE_VIEW_FILE_LASERFICHE = - 'Click here to view the file in Laserfiche'; -const CLICK_HERE_GO_SHAREPOINT_LIBRARY = - 'Click here to go back to your SharePoint library'; +const GO_TO_FILE = 'View file in Laserfiche'; +const GO_TO_LIBRARY = 'Return to SharePoint library'; +const CLICK_HERE_VIEW_FILE_LASERFICHE = 'View the file in Laserfiche'; +const CLICK_HERE_GO_SHAREPOINT_LIBRARY = 'Return to your SharePoint library'; -export function SavedToLaserficheSuccessDialog(props: { - closeClick: () => Promise; - successfulSave: { - fileLink: string; - pathBack: string; - metadataSaved: boolean; - }; +export function SavedToLaserficheSuccessDialogText(props: { + successfulSave: SavedToLaserficheDocumentData; }) { + React.useEffect(() => { + SPComponentLoader.loadCss( + 'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/indigo-pink.css' + ); + SPComponentLoader.loadCss( + 'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/lf-ms-office-lite.css' + ); + }); const metadataFailedNotice: JSX.Element = ( - {DOCUMENT_UPLOADED_METADATA_FAILED} + {`${DOCUMENT_UPLOADED} ${props.successfulSave.fileName}. ${DOCUMENT_UPLOADED_METADATA_FAILED}`}

{TEMPLATE_FIELDS_NOT_APPLIED}

 ); + return ( + <> +
+

+ {props.successfulSave.metadataSaved + ? `${DOCUMENT_UPLOADED} ${props.successfulSave.fileName}.` + : metadataFailedNotice} +

+
+ + ); +} + +export function SavedToLaserficheSuccessDialogButtons(props: { + closeClick: () => Promise; + successfulSave: SavedToLaserficheDocumentData; + hadToRouteToLogin: boolean; +}) { + React.useEffect(() => { + SPComponentLoader.loadCss( + 'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/indigo-pink.css' + ); + SPComponentLoader.loadCss( + 'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/lf-ms-office-lite.css' + ); + }); + function viewFile() { window.open(props.successfulSave.fileLink); } @@ -57,35 +83,27 @@ export function SavedToLaserficheSuccessDialog(props: { return ( <> -
-

- {props.successfulSave.metadataSaved - ? DOCUMENT_UPLOADED - : metadataFailedNotice} -

-
- -
- - {props.successfulSave.fileLink && ( - - )} + )} + {props.hadToRouteToLogin && ( -
+ )} + ); } diff --git a/src/extensions/savetoLaserfiche/GetDocumentDataDialog.tsx b/src/extensions/savetoLaserfiche/GetDocumentDataDialog.tsx index 24b6c0b..91f1fc6 100644 --- a/src/extensions/savetoLaserfiche/GetDocumentDataDialog.tsx +++ b/src/extensions/savetoLaserfiche/GetDocumentDataDialog.tsx @@ -31,6 +31,7 @@ import { getSPListURL } from '../../Utils/Funcs'; import SaveToLaserficheCustomDialog from './SaveToLaserficheDialog'; import { BaseComponentContext } from '@microsoft/sp-component-base'; import LoadingDialog from './CommonDialogs'; +import { SPComponentLoader } from '@microsoft/sp-loader'; interface ProfileMappingConfiguration { id: string; @@ -57,7 +58,9 @@ export class GetDocumentDataCustomDialog extends BaseDialog { } showNextDialog = (data: ISPDocumentData) => { - const saveToLfDialog = new SaveToLaserficheCustomDialog(data, () => this.close()); + const saveToLfDialog = new SaveToLaserficheCustomDialog(data, false, () => + this.close() + ); this.secondaryDialogProvider.show(saveToLfDialog).then(() => { if (!saveToLfDialog.successful) { Navigation.navigate( @@ -74,6 +77,7 @@ export class GetDocumentDataCustomDialog extends BaseDialog { spFileInfo={this.fileInfo} context={this.context} showSaveToDialog={this.showNextDialog} + closeDialog={this.close} /> ); ReactDOM.render(element, this.domElement); @@ -90,8 +94,11 @@ const FOLLOWING_SP_FIELDS_BLANK_MAPPED_TO_REQUIRED_LF_FIELDS = const PLEASE_FILL_OUT_REQUIRED_FIELDS_TRY_AGAIN = 'Please fill out these required fields and try again.'; +const CLOSE = 'Close'; + function GetDocumentDialogData(props: { showSaveToDialog: (fileData: ISPDocumentData) => void; + closeDialog: () => Promise; spFileInfo: { fileName: string; spContentType: string; @@ -100,6 +107,7 @@ function GetDocumentDialogData(props: { }; context: BaseComponentContext; }) { + // TODO how to cancel calls if close dialog const [missingFields, setMissingFields] = React.useState< undefined | SPProfileConfigurationData[] >(undefined); @@ -117,6 +125,13 @@ function GetDocumentDialogData(props: { )); React.useEffect(() => { + SPComponentLoader.loadCss( + 'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/indigo-pink.css' + ); + SPComponentLoader.loadCss( + 'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/lf-ms-office-lite.css' + ); + const libraryUrl = props.context.pageContext.list.title; GetAllFieldsValues(libraryUrl, props.spFileInfo.fileId).then( (allSpFieldValues: object) => { @@ -370,19 +385,38 @@ function GetDocumentDialogData(props: { } return ( -
-
-
- +
+
+
+ +

Laserfiche

+
+ + +
+ +
{!(missingFields?.length > 0) && } {missingFields?.length > 0 && ( )}
+ +
+ +
); } @@ -398,7 +432,7 @@ function MissingFieldsDialog(props: { missingFields: JSX.Element[] }) { return (
-

{textInside}

+

{textInside}

); } diff --git a/src/extensions/savetoLaserfiche/SaveDocumentToLaserfiche.ts b/src/extensions/savetoLaserfiche/SaveDocumentToLaserfiche.ts index c62040a..a8d9efa 100644 --- a/src/extensions/savetoLaserfiche/SaveDocumentToLaserfiche.ts +++ b/src/extensions/savetoLaserfiche/SaveDocumentToLaserfiche.ts @@ -6,6 +6,7 @@ import { FieldToUpdate, ValueToUpdate, PutFieldValsRequest, + Entry, } from '@laserfiche/lf-repository-api-client'; import { RepositoryClientExInternal } from '../../repository-client/repository-client'; import { IRepositoryApiClientExInternal } from '../../repository-client/repository-client-types'; @@ -21,6 +22,7 @@ export interface SavedToLaserficheDocumentData { fileLink: string; pathBack: string; metadataSaved: boolean; + fileName: string; } export class SaveDocumentToLaserfiche { @@ -68,7 +70,10 @@ export class SaveDocumentToLaserfiche { const spFileUrl = this.spFileMetadata.fileUrl; const fileNameWithExt = this.spFileMetadata.fileName; const encodedFileName = encodeURIComponent(fileNameWithExt); - const encodedSpFileUrl = spFileUrl?.replace(fileNameWithExt, encodedFileName); + const encodedSpFileUrl = spFileUrl?.replace( + fileNameWithExt, + encodedFileName + ); const fullSPDataUrl = window.location.origin + encodedSpFileUrl; try { const res = await fetch(fullSPDataUrl, { @@ -153,7 +158,8 @@ export class SaveDocumentToLaserfiche { filenameWithoutExt ); fileName = docNameReplacedWithFileName; - fileNameInEdoc = docNameReplacedWithFileName + `.${fileExtensionWithPeriod}`; + fileNameInEdoc = + docNameReplacedWithFileName + `.${fileExtensionWithPeriod}`; extension = fileExtensionWithPeriod; } const electronicDocument: FileParameter = { @@ -193,8 +199,26 @@ export class SaveDocumentToLaserfiche { } else { // TODO what should happen? } + try { + const entryInfo: Entry = await repoClient.entriesClient.getEntry({ + repoId, + entryId: entryCreateResult.operations.entryCreate.entryId, + }); - return { fileLink, pathBack: path, metadataSaved: true }; + return { + fileLink, + pathBack: path, + metadataSaved: false, + fileName: entryInfo.name, + }; + } catch { + return { + fileLink, + pathBack: path, + metadataSaved: false, + fileName, + }; + } } catch (error) { const conflict409 = error.operations.setFields.exceptions[0].statusCode === 409; @@ -214,7 +238,26 @@ export class SaveDocumentToLaserfiche { ); const path = window.location.origin + fileUrlWithoutDocName; window.localStorage.removeItem(SP_LOCAL_STORAGE_KEY); - return { fileLink, pathBack: path, metadataSaved: false }; + try { + const entryInfo: Entry = await repoClient.entriesClient.getEntry({ + repoId, + entryId: error.operations.entryCreate.entryId, + }); + + return { + fileLink, + pathBack: path, + metadataSaved: false, + fileName: entryInfo.name, + }; + } catch { + return { + fileLink, + pathBack: path, + metadataSaved: false, + fileName, + }; + } } else { window.alert(`Error uploading file: ${JSON.stringify(error)}`); window.localStorage.removeItem(SP_LOCAL_STORAGE_KEY); @@ -292,7 +335,26 @@ export class SaveDocumentToLaserfiche { const path = window.location.origin + fileUrlWithoutDocName; window.localStorage.removeItem(SP_LOCAL_STORAGE_KEY); - return { fileLink, pathBack: path, metadataSaved: true }; + try { + const entryInfo: Entry = await repoClient.entriesClient.getEntry({ + repoId, + entryId: entryCreateResult.operations.entryCreate.entryId, + }); + + return { + fileLink, + pathBack: path, + metadataSaved: false, + fileName: entryInfo.name, + }; + } catch { + return { + fileLink, + pathBack: path, + metadataSaved: false, + fileName: fileNameWithExt, + }; + } } catch (error) { window.alert(`Error uploading file: ${JSON.stringify(error)}`); window.localStorage.removeItem(SP_LOCAL_STORAGE_KEY); @@ -349,7 +411,10 @@ export class SaveDocumentToLaserfiche { } } - async replaceFileWithLinkAsync(filenameWithoutExt: string, docFileLink: string) { + async replaceFileWithLinkAsync( + filenameWithoutExt: string, + docFileLink: string + ) { const resp = await fetch( this.spFileMetadata.contextPageAbsoluteUrl + '/_api/contextinfo', { diff --git a/src/extensions/savetoLaserfiche/SaveToLaserficheDialog.tsx b/src/extensions/savetoLaserfiche/SaveToLaserficheDialog.tsx index ae3c2a0..b760626 100644 --- a/src/extensions/savetoLaserfiche/SaveToLaserficheDialog.tsx +++ b/src/extensions/savetoLaserfiche/SaveToLaserficheDialog.tsx @@ -3,8 +3,14 @@ import { LfLoginComponent } from '@laserfiche/types-lf-ui-components'; import * as React from 'react'; import { ISPDocumentData } from '../../Utils/Types'; import { clientId } from '../../webparts/constants'; -import LoadingDialog, { SavedToLaserficheSuccessDialog } from './CommonDialogs'; -import { SaveDocumentToLaserfiche } from './SaveDocumentToLaserfiche'; +import LoadingDialog, { + SavedToLaserficheSuccessDialogButtons, + SavedToLaserficheSuccessDialogText, +} from './CommonDialogs'; +import { + SaveDocumentToLaserfiche, + SavedToLaserficheDocumentData, +} from './SaveDocumentToLaserfiche'; import styles from './SendToLaserFiche.module.scss'; import { SPComponentLoader } from '@microsoft/sp-loader'; import * as ReactDOM from 'react-dom'; @@ -17,15 +23,19 @@ export default class SaveToLaserficheCustomDialog extends BaseDialog { handleSuccessSave = (successful: boolean) => { this.successful = successful; }; - + closeClick = async () => { await this.close(); - if(this.closeParent) { + if (this.closeParent) { await this.closeParent(); } - } + }; - constructor(private spFileData: ISPDocumentData, private closeParent?: () => Promise) { + constructor( + private spFileData: ISPDocumentData, + private hadToRouteToLogin: boolean, + private closeParent?: () => Promise + ) { super(); } @@ -35,6 +45,7 @@ export default class SaveToLaserficheCustomDialog extends BaseDialog { spFileMetadata={this.spFileData} successSave={this.handleSuccessSave} closeClick={this.closeClick} + hadToRouteToLogin={this.hadToRouteToLogin} /> ); ReactDOM.render(element, this.domElement); @@ -49,10 +60,12 @@ export default class SaveToLaserficheCustomDialog extends BaseDialog { } } +const CLOSE = 'Close'; function SaveToLaserficheDialog(props: { successSave: (success: boolean) => void; closeClick: () => Promise; spFileMetadata: ISPDocumentData; + hadToRouteToLogin: boolean; }) { const loginComponent = React.createRef< NgElement & WithProperties @@ -60,7 +73,7 @@ function SaveToLaserficheDialog(props: { const region = getRegion(); const [success, setSuccess] = React.useState< - { fileLink: string; pathBack: string; metadataSaved: boolean } | undefined + SavedToLaserficheDocumentData | undefined >(); const saveToDialogCloseClick = async () => { @@ -95,31 +108,58 @@ function SaveToLaserficheDialog(props: { }, []); return ( -
-