feat: implement document preview runtime

bpmn-io · Dec 12, 2024 · 0aa4d03 · 0aa4d03
1 parent 3f43b4d
commit 0aa4d03
Show file tree

Hide file tree

Showing 10 changed files with 697 additions and 10 deletions.
diff --git a/packages/form-js-editor/src/render/components/editor-form-fields/EditorDocumentPreview.js b/packages/form-js-editor/src/render/components/editor-form-fields/EditorDocumentPreview.js
@@ -0,0 +1,25 @@
+import { iconsByType, DocumentPreview, Label } from '@bpmn-io/form-js-viewer';
+
+import { editorFormFieldClasses } from '../Util';
+
+export function EditorDocumentPreview(props) {
+  const { field, domId } = props;
+
+  const { label } = field;
+
+  const Icon = iconsByType(field.type);
+
+  return (
+    <div class={editorFormFieldClasses(field.type)}>
+      <Label id={domId} label={label} />
+      <div class="fjs-documentPreview-placeholder" id={domId}>
+        <p class="fjs-documentPreview-placeholder-text">
+          <Icon width="32" height="24" viewBox="0 0 56 56" />
+          Document preview
+        </p>
+      </div>
+    </div>
+  );
+}
+
+EditorDocumentPreview.config = DocumentPreview.config;
diff --git a/packages/form-js-editor/src/render/components/editor-form-fields/index.js b/packages/form-js-editor/src/render/components/editor-form-fields/index.js
@@ -3,5 +3,13 @@ import { EditorText } from './EditorText';
 import { EditorHtml } from './EditorHtml';
 import { EditorTable } from './EditorTable';
 import { EditorExpressionField } from './EditorExpressionField';
+import { EditorDocumentPreview } from './EditorDocumentPreview';
 
-export const editorFormFields = [EditorIFrame, EditorText, EditorHtml, EditorTable, EditorExpressionField];
+export const editorFormFields = [
+  EditorIFrame,
+  EditorText,
+  EditorHtml,
+  EditorTable,
+  EditorExpressionField,
+  EditorDocumentPreview,
+];
diff --git a/packages/form-js-editor/test/spec/form.json b/packages/form-js-editor/test/spec/form.json
@@ -247,7 +247,7 @@
       "accept": ".jpg,.png"
     },
     {
-      "title": "My documents",
+      "label": "My documents",
       "type": "documentPreview",
       "id": "myDocuments",
       "dataSource": "=myDocuments",

diff --git a/packages/form-js-playground/test/spec/Playground.spec.js b/packages/form-js-playground/test/spec/Playground.spec.js
@@ -9,6 +9,7 @@ import { domify, query as domQuery, queryAll as domQueryAll } from 'min-dom';
 import { Playground } from '../../src';
 
 import schema from './form.json';
+// import schema from './temp.json';
 import otherSchema from './other-form.json';
 import rowsSchema from './rows-form.json';
 import customSchema from './custom.json';
@@ -82,6 +83,30 @@ describe('playground', function () {
       tags: ['tag1', 'tag2', 'tag3'],
       conversation: '2010-06-06T12:00Z',
       language: 'english',
+      documents: [
+        {
+          documentId: 'document0',
+          metadata: {
+            filename: 'My document.pdf',
+            mimeType: 'application/pdf',
+          },
+        },
+        {
+          documentId: 'document1',
+          metadata: {
+            filename: 'My document.png',
+            mimeType: 'image/png',
+          },
+        },
+        {
+          documentId: 'document2',
+          metadata: {
+            filename: 'My document.zip',
+            mimeType: 'application/zip',
+          },
+        },
+      ],
+      defaultDocumentsEndpointKey: 'https://pub-280be5f41fe1419e8d236b586696129e.r2.dev/{documentId}',
     };
 
     // when

diff --git a/packages/form-js-playground/test/spec/form.json b/packages/form-js-playground/test/spec/form.json
@@ -259,6 +259,12 @@
       "alt": "The bpmn.io logo",
       "type": "image"
     },
+    {
+      "label": "Document preview",
+      "type": "documentPreview",
+      "dataSource": "=documents",
+      "id": "Field_1w82te0"
+    },
     {
       "label": "Submit",
       "type": "button"

diff --git a/packages/form-js-viewer/assets/form-js-base.css b/packages/form-js-viewer/assets/form-js-base.css
@@ -63,6 +63,7 @@
   --color-borders: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-55)));
   --color-borders-group: var(--cds-border-subtle, var(--color-grey-225-10-85));
   --color-borders-table: var(--color-borders-group);
+  --color-borders-documentPreview: var(--cds-border-subtle, var(--color-grey-225-10-85));
   --color-borders-disabled: var(--cds-border-disabled, var(--color-grey-225-10-75));
   --color-borders-adornment: var(--cds-border-subtle, var(--cds-border-subtle-01, var(--color-grey-225-10-85)));
   --color-borders-readonly: var(--cds-border-subtle, var(--color-grey-225-10-75));
@@ -1023,7 +1024,8 @@
 }
 
 .fjs-container .fjs-image-placeholder,
-.fjs-container .fjs-iframe-placeholder {
+.fjs-container .fjs-iframe-placeholder,
+.fjs-container .fjs-documentPreview-placeholder {
   margin: 4px 0;
   width: 100%;
   height: 90px;
@@ -1033,20 +1035,23 @@
   color: var(--color-text-light);
 }
 
-.fjs-container .fjs-iframe-placeholder {
+.fjs-container .fjs-iframe-placeholder,
+.fjs-container .fjs-documentPreview-placeholder {
   border: 1px solid var(--color-borders-readonly);
 }
 
 .fjs-container .fjs-image-placeholder .fjs-image-placeholder-inner,
-.fjs-container .fjs-iframe-placeholder .fjs-iframe-placeholder-text {
+.fjs-container .fjs-iframe-placeholder .fjs-iframe-placeholder-text,
+.fjs-container .fjs-documentPreview-placeholder .fjs-documentPreview-placeholder-text {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   overflow: hidden;
 }
 
-.fjs-container .fjs-iframe-placeholder .fjs-iframe-placeholder-text {
+.fjs-container .fjs-iframe-placeholder .fjs-iframe-placeholder-text,
+.fjs-container .fjs-documentPreview-placeholder .fjs-documentPreview-placeholder-text {
   font-size: var(--font-size-label);
 }
 
@@ -1153,6 +1158,73 @@
   width: 16px;
 }
 
+.fjs-container .fjs-documentPreview-document-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.fjs-container .fjs-documentPreview-single-document-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--color-borders-documentPreview);
+  border-radius: 3px;
+
+  .fjs-form-field-error {
+    align-self: flex-start;
+  }
+}
+
+.fjs-container .fjs-documentPreview-non-preview-item {
+  flex-direction: row;
+}
+
+.fjs-container .fjs-documentPreview-single-document-container:not(.fjs-documentPreview-non-preview-item) {
+  position: relative;
+  overflow-y: auto;
+}
+
+.fjs-container
+  .fjs-documentPreview-single-document-container:not(.fjs-documentPreview-non-preview-item)
+  .fjs-documentPreview-download-button {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  z-index: 1;
+}
+
+.fjs-container .fjs-documentPreview-iframe {
+  all: unset;
+  width: 100%;
+  overflow: auto;
+  min-height: 400px;
+}
+
+.fjs-container .fjs-documentPreview-download-button {
+  width: 24px;
+  height: 24px;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3px;
+  border: 1px solid var(--color-borders-documentPreview);
+  background: var(--color-layer);
+  padding: 0;
+}
+
+.fjs-container .fjs-documentPreview-non-preview-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  color: var(--color-text-light);
+}
+
 .fjs-container .fjs-repeat-row-container {
   display: flex;
   flex-direction: row;

diff --git a/packages/form-js-viewer/src/render/components/Errors.js b/packages/form-js-viewer/src/render/components/Errors.js
@@ -1,3 +1,11 @@
+/**
+ * @typedef Props
+ * @property {string} id
+ * @property {string[]} errors
+ *
+ * @param {Props} props
+ * @returns {import("preact").JSX.Element}
+ */
 export function Errors(props) {
   const { errors, id } = props;