Skip to content

Commit

Permalink
update login and saved to laserfiche dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
alexandria.gomez authored and alexandria.gomez committed Aug 1, 2023
1 parent e5ae990 commit c5e2cbd
Show file tree
Hide file tree
Showing 7 changed files with 412 additions and 189 deletions.
110 changes: 64 additions & 46 deletions src/extensions/savetoLaserfiche/CommonDialogs.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<>
<img
style={{ marginLeft: '28%' }}
src='/_layouts/15/images/progress.gif'
id='imgid'
/>
<div>
<p className={styles.text}>{SAVING_DOCUMENT_TO_LASERFICHE}</p>
</div>
<img src='/_layouts/15/images/progress.gif' />
<br />
<div>{SAVING_DOCUMENT_TO_LASERFICHE}</div>
</>
);
}

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<void>;
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 = (
<span>
{DOCUMENT_UPLOADED_METADATA_FAILED}
{`${DOCUMENT_UPLOADED} ${props.successfulSave.fileName}. ${DOCUMENT_UPLOADED_METADATA_FAILED}`}
<br /> <p style={{ color: 'red' }}>{TEMPLATE_FIELDS_NOT_APPLIED}</p>
</span>
);

return (
<>
<div>
<p>
{props.successfulSave.metadataSaved
? `${DOCUMENT_UPLOADED} ${props.successfulSave.fileName}.`
: metadataFailedNotice}
</p>
</div>
</>
);
}

export function SavedToLaserficheSuccessDialogButtons(props: {
closeClick: () => Promise<void>;
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);
}
Expand All @@ -57,35 +83,27 @@ export function SavedToLaserficheSuccessDialog(props: {

return (
<>
<div>
<p className={styles.text}>
{props.successfulSave.metadataSaved
? DOCUMENT_UPLOADED
: metadataFailedNotice}
</p>
</div>

<div className={styles.button}>
<button className={styles.button1} onClick={props.closeClick}>
{CLOSE}
{props.successfulSave.fileLink && (
<button
className={`lf-button primary-button ${styles.actionButton}`}
title={CLICK_HERE_VIEW_FILE_LASERFICHE}
onClick={viewFile}
>
{GO_TO_FILE}
</button>
{props.successfulSave.fileLink && (
<button
className={styles.button2}
title={CLICK_HERE_VIEW_FILE_LASERFICHE}
onClick={viewFile}
>
{GO_TO_FILE}
</button>
)}
)}
{props.hadToRouteToLogin && (
<button
className={styles.button2}
className={`lf-button primary-button ${styles.actionButton}`}
title={CLICK_HERE_GO_SHAREPOINT_LIBRARY}
onClick={redirect}
>
{GO_TO_LIBRARY}
</button>
</div>
)}
<button className='lf-button sec-button' onClick={props.closeClick}>
{CLOSE}
</button>
</>
);
}
54 changes: 44 additions & 10 deletions src/extensions/savetoLaserfiche/GetDocumentDataDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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(
Expand All @@ -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);
Expand All @@ -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<void>;
spFileInfo: {
fileName: string;
spContentType: string;
Expand All @@ -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);
Expand All @@ -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) => {
Expand Down Expand Up @@ -370,19 +385,38 @@ function GetDocumentDialogData(props: {
}

return (
<div className={styles.maindialog}>
<div id='overlay' className={styles.overlay} />
<div>
<img
src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/YAAAAAUVBMVEXSXyj////HYzL/+/T/+Or/9d+yaUa9ZT2yaUj/9OG7Zj3SXybRYCj/+/b///3LYS/OYCvEZDS2aEL/89jAZTnMYS3/8dO7Zzusa02+ZTn/78wyF0DsAAABnUlEQVR4nO3ci26CMABGYQcoLRS5OTf2/g86R+KSLYUm2vxcPB8RTYzxkADRajkcAAAAAAAAAADYgbJcusCvqdtLnhfeJR/a96X7vOriarNJ/cUtHeiTnI7p26TsY+XRZ190sXSfVyA6X7rP6xZdzeweREeTGDt3IBIdTeCUR3Q0wQOxLNf3CWSr0ZvcPYiWIFqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVV4zeok/379m9BL2HO1Ckymlky0jRQc3Kqoou4f6YHzdaLX56PRzak757/JjfDS0dbOK6HM6Paf8P3st6lVE/9mAwPOpNcnqokOIJppoookmmmiiiSaaaKKJ3k30OfTFdU3RXZ+lT6qq6rbO+k4VXQ9fvT2OrH30Zo+3u/5rUI17NO3QmdPImIduxoyrUze0khEm5w6uqZNIRKNi91Hl5661dH+tdow6wts5J//BaJPRwH6IT1NxbDJ6vVc+nrXJaAAAAADALn0DBosqnCStFi4AAAAASUVORK5CYII='
width='42'
height='42'
/>
<div className={styles.wrapper}>
<div className={styles.header}>
<div className={styles.logoHeader}>
<img
src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/YAAAAAUVBMVEXSXyj////HYzL/+/T/+Or/9d+yaUa9ZT2yaUj/9OG7Zj3SXybRYCj/+/b///3LYS/OYCvEZDS2aEL/89jAZTnMYS3/8dO7Zzusa02+ZTn/78wyF0DsAAABnUlEQVR4nO3ci26CMABGYQcoLRS5OTf2/g86R+KSLYUm2vxcPB8RTYzxkADRajkcAAAAAAAAAADYgbJcusCvqdtLnhfeJR/a96X7vOriarNJ/cUtHeiTnI7p26TsY+XRZ190sXSfVyA6X7rP6xZdzeweREeTGDt3IBIdTeCUR3Q0wQOxLNf3CWSr0ZvcPYiWIFqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVV4zeok/379m9BL2HO1Ckymlky0jRQc3Kqoou4f6YHzdaLX56PRzak757/JjfDS0dbOK6HM6Paf8P3st6lVE/9mAwPOpNcnqokOIJppoookmmmiiiSaaaKKJ3k30OfTFdU3RXZ+lT6qq6rbO+k4VXQ9fvT2OrH30Zo+3u/5rUI17NO3QmdPImIduxoyrUze0khEm5w6uqZNIRKNi91Hl5661dH+tdow6wts5J//BaJPRwH6IT1NxbDJ6vVc+nrXJaAAAAADALn0DBosqnCStFi4AAAAASUVORK5CYII='
width='30'
height='30'
/>
<p className={styles.dialogTitle}>Laserfiche</p>
</div>

<button
className={styles.lfCloseButton}
title='close'
onClick={props.closeDialog}
>
<span className='material-icons-outlined'> close </span>
</button>
</div>

<div className={styles.contentBox}>
{!(missingFields?.length > 0) && <LoadingDialog />}
{missingFields?.length > 0 && (
<MissingFieldsDialog missingFields={listFields} />
)}
</div>

<div className={styles.footer}>
<button onClick={props.closeDialog} className='lf-button sec-button'>
{CLOSE}
</button>
</div>
</div>
);
}
Expand All @@ -398,7 +432,7 @@ function MissingFieldsDialog(props: { missingFields: JSX.Element[] }) {

return (
<div>
<p className={styles.text}>{textInside}</p>
<p>{textInside}</p>
</div>
);
}
Loading

0 comments on commit c5e2cbd

Please sign in to comment.