Alex/metadata error clarification

src/extensions/savetoLaserfiche/CommonDialogs.tsx

@@ -18,12 +18,12 @@ export default function LoadingDialog(): JSX.Element {
 const DOCUMENT_SUCCESSFULLY_UPLOADED_TO_LASERFICHE_WITH_NAME =
   'Document successfully uploaded to Laserfiche with name:';
 const METADATA_FAILED_TO_SAVE_INVALID_FIELD =
-  'All metadata failed to save due to at least one invalid field';
-const TEMPLATE_FIELDS_NOT_APPLIED =
-  'The Laserfiche template and fields were not applied to this document.';
+  'All metadata failed to save due to at least one invalid field.';
 const CLOSE = 'Close';
 const VIEW_FILE_IN_LASERFICHE = 'View file in Laserfiche';
 
+const WARNING = 'Warning: ';
+const ERROR_DETAILS = 'Error details';
 export function SavedToLaserficheSuccessDialogText(props: {
   successfulSave: SavedToLaserficheDocumentData;
 }): JSX.Element {
@@ -37,22 +37,61 @@ export function SavedToLaserficheSuccessDialogText(props: {
   }, []);
 
   const metadataFailedNotice: JSX.Element = (
-    <span>
-      {METADATA_FAILED_TO_SAVE_INVALID_FIELD}
-      <br /> <p style={{ color: 'red' }}>{TEMPLATE_FIELDS_NOT_APPLIED}</p>
-    </span>
+    <>
+      <div className={styles.paddingUnder}>
+        <b>{WARNING}</b>
+        {METADATA_FAILED_TO_SAVE_INVALID_FIELD}
+      </div>
+      <Collapsible title={ERROR_DETAILS}>
+        {props.successfulSave.failedMetadata}
+      </Collapsible>
+    </>
   );
 
   return (
     <>
-      <div>
-        {`${DOCUMENT_SUCCESSFULLY_UPLOADED_TO_LASERFICHE_WITH_NAME}  ${props.successfulSave.fileName}.`}
+      <div className={styles.successSaveToLaserfiche}>
+        <div className={styles.paddingUnder}>
+          {`${DOCUMENT_SUCCESSFULLY_UPLOADED_TO_LASERFICHE_WITH_NAME}  ${props.successfulSave.fileName}.`}
+        </div>
         {!props.successfulSave.metadataSaved && metadataFailedNotice}
       </div>
     </>
   );
 }
 
+export function Collapsible(props: {
+  open?: boolean;
+  children: JSX.Element;
+  title: string;
+}): JSX.Element {
+  const [isOpen, setIsOpen] = React.useState<boolean>(props.open ?? false);
+
+  const handleFilterOpening: () => void = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  return (
+    <>
+      <div className={styles.collapseBox}>
+        <button
+          className={styles.lfMaterialIconButton}
+          onClick={handleFilterOpening}
+        >
+          {!isOpen ? (
+            <span className='material-icons-outlined'> chevron_right </span>
+          ) : (
+            <span className='material-icons-outlined'> expand_less </span>
+          )}
+        </button>
+        <span>{props.title}</span>
+      </div>
+
+      {isOpen && props.children}
+    </>
+  );
+}
+
 export function SavedToLaserficheSuccessDialogButtons(props: {
   closeClick: () => Promise<void>;
   successfulSave: SavedToLaserficheDocumentData;

src/extensions/savetoLaserfiche/GetDocumentDataDialog.tsx

@@ -87,10 +87,10 @@ export class GetDocumentDataCustomDialog extends BaseDialog {
   }
 }
 
-const FOLLOWING_SP_FIELDS_BLANK_MAPPED_TO_REQUIRED_LF_FIELDS =
-  'The following SharePoint field values are blank and are mapped to required Laserfiche fields:';
-const PLEASE_FILL_OUT_REQUIRED_FIELDS_TRY_AGAIN =
-  'Please fill out these required fields and try again.';
+const FOLLOWING_SP_FIELDS_NO_VALUE_FOR_DOC_BUT_REQUIRED_IN_LASERFICHE_BASED_ON_MAPPINGS =
+  'The following SharePoint fields do not have a value for this document, but are required to save to Laserfiche, based on configured mappings:';
+const PLEASE_ENSURE_FIELDS_EXIST_FOR_DOCUMENT_AND_TRY_AGAIN =
+  'Please ensure these fields exist for this document and try again.';
 
 const CANCEL = 'Cancel';
 
@@ -111,15 +111,15 @@ function GetDocumentDialogData(props: {
 
   if (missingFields) {
     <span>
-      {FOLLOWING_SP_FIELDS_BLANK_MAPPED_TO_REQUIRED_LF_FIELDS}
+      {FOLLOWING_SP_FIELDS_NO_VALUE_FOR_DOC_BUT_REQUIRED_IN_LASERFICHE_BASED_ON_MAPPINGS}
       {missingFields}
-      {PLEASE_FILL_OUT_REQUIRED_FIELDS_TRY_AGAIN}
+      {PLEASE_ENSURE_FIELDS_EXIST_FOR_DOCUMENT_AND_TRY_AGAIN}
     </span>;
   }
 
-  const listFields = missingFields?.map((field) => (
-    <div key={field.Title}>- {field.Title}</div>
-  ));
+  const listFields = <ul>{missingFields?.map((field) => (
+    <li key={field.Title}>{field.Title}</li>
+  ))}</ul>;
 
   React.useEffect(() => {
     SPComponentLoader.loadCss(
@@ -367,8 +367,9 @@ function GetDocumentDialogData(props: {
     fields: { [key: string]: FieldToUpdate }
   ): void {
     for (const mapping of matchingLFConfig.mappedFields) {
-      const spFieldName = mapping.spField.Title;
-      let spDocFieldValue: string = allSpFieldValues[spFieldName];
+      const spFieldName = mapping.spField.InternalName;
+      // TODO which one to use?
+      let spDocFieldValue: string = allSpFieldValues[spFieldName] ?? allSpFieldValues[mapping.spField.Title];
 
       if (spDocFieldValue?.length > 0) {
         const lfField = mapping.lfField;
@@ -486,7 +487,7 @@ function GetDocumentDialogData(props: {
   );
 }
 
-function MissingFieldsDialog(props: { missingFields: JSX.Element[] }): JSX.Element {
+function MissingFieldsDialog(props: { missingFields: JSX.Element }): JSX.Element {
   const textInside = (
     <span>
       The following SharePoint field values are blank and are mapped to required

src/extensions/savetoLaserfiche/SaveDocumentToLaserfiche.ts → src/extensions/savetoLaserfiche/SaveDocumentToLaserfiche.tsx

@@ -7,6 +7,8 @@ import {
   ValueToUpdate,
   PutFieldValsRequest,
   Entry,
+  SetFields,
+  APIServerException,
 } from '@laserfiche/lf-repository-api-client';
 import { RepositoryClientExInternal } from '../../repository-client/repository-client';
 import { IRepositoryApiClientExInternal } from '../../repository-client/repository-client-types';
@@ -17,11 +19,14 @@ import { PathUtils } from '@laserfiche/lf-js-utils';
 import { NgElement, WithProperties } from '@angular/elements';
 import { LfLoginComponent } from '@laserfiche/types-lf-ui-components';
 import { SP_LOCAL_STORAGE_KEY } from '../../webparts/constants';
+import * as React from 'react';
+import styles from './SendToLaserFiche.module.scss';
 
 export interface SavedToLaserficheDocumentData {
   fileLink: string;
   pathBack: string;
   metadataSaved: boolean;
+  failedMetadata?: JSX.Element;
   fileName: string;
 }
 
@@ -215,9 +220,16 @@ export class SaveDocumentToLaserfiche {
       return fileInfo;
     } catch (error) {
       const conflict409 =
-        error.operations.setFields.exceptions[0].statusCode === 409;
+        error.problemDetails.extensions.createEntryResult.operations.setFields
+          .exceptions[0].statusCode === 409;
       if (conflict409) {
-        const entryId = error.operations.entryCreate.entryId;
+        const setFields: SetFields = error.problemDetails.extensions.createEntryResult.operations.setFields;
+        const errorMessages = setFields.exceptions.map((value: APIServerException, index: number) => {
+          return <li key={index}>{value.message}</li>;
+        });
+        const entryId =
+          error.problemDetails.extensions.createEntryResult.operations
+            .entryCreate.entryId;
 
         const fileLink = getEntryWebAccessUrl(
           entryId.toString(),
@@ -232,10 +244,12 @@ export class SaveDocumentToLaserfiche {
         );
         const path = window.location.origin + fileUrlWithoutDocName;
         window.localStorage.removeItem(SP_LOCAL_STORAGE_KEY);
+        const failedMetadata = <ul className={styles.noMargin}>{errorMessages}</ul>;
         const fileInfo: SavedToLaserficheDocumentData = {
           fileLink,
           pathBack: path,
           metadataSaved: false,
+          failedMetadata,
           fileName,
         };
 
@@ -249,7 +263,9 @@ export class SaveDocumentToLaserfiche {
     }
   }
 
-  getRequestMetadata(request: PostEntryWithEdocMetadataRequest): PostEntryWithEdocMetadataRequest {
+  getRequestMetadata(
+    request: PostEntryWithEdocMetadataRequest
+  ): PostEntryWithEdocMetadataRequest {
     const fileMetadata: IPostEntryWithEdocMetadataRequest =
       this.spFileMetadata.metadata;
     const fieldsAlone = fileMetadata.metadata.fields;
@@ -380,7 +396,9 @@ export class SaveDocumentToLaserfiche {
     }
   }
 
-  async deleteSPFileAndReplaceWithLinkAsync(docFilelink: string): Promise<void> {
+  async deleteSPFileAndReplaceWithLinkAsync(
+    docFilelink: string
+  ): Promise<void> {
     const filenameWithoutExt = PathUtils.removeFileExtension(
       this.spFileMetadata.fileName
     );
@@ -419,7 +437,11 @@ export class SaveDocumentToLaserfiche {
     if (resp.ok) {
       const data = await resp.json();
       const FormDigestValue = data.d.GetContextWebInformation.FormDigestValue;
-      await this.createLinkAsync(filenameWithoutExt, docFileLink, FormDigestValue);
+      await this.createLinkAsync(
+        filenameWithoutExt,
+        docFileLink,
+        FormDigestValue
+      );
     } else {
       window.localStorage.removeItem(SP_LOCAL_STORAGE_KEY);
       console.log('Failed');

src/extensions/savetoLaserfiche/SendToLaserFiche.module.scss

@@ -94,3 +94,38 @@
   align-items: center;
   justify-content: center;
 }
+
+.lfMaterialIconButton {
+  cursor: pointer;
+  display: flex;
+  height: 24px;
+  width: 24px;
+  align-items: center;
+  border: none;
+  background: inherit;
+  justify-content: center;
+  color: #646464;
+}
+
+.lfMaterialIconButton:hover {
+  color: #4d4b4b;
+}
+
+.collapseBox {
+  display: flex;
+  align-items: center;
+}
+
+.successSaveToLaserfiche {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+}
+
+.paddingUnder {
+  padding-bottom: 10px;
+}
+
+.noMargin {
+  margin: 0;
+}