feat(workspace): support configurable inbox documents and emit document-open events

ts_web/elements/sdig-workspace/sdig-workspace-inbox.ts

@@ -14,6 +14,7 @@ export class SdigWorkspaceInbox extends DeesElement {
   public static demoGroups = ['Signature Digital Workspace'];
 
   @property({ type: String }) public accessor density: TDensity = 'comfortable';
+  @property({ attribute: false }) public accessor documents: IDocumentRow[] = demoDocuments;
   @state() private accessor filter: string = 'all';
   @state() private accessor search: string = '';
 
@@ -45,7 +46,7 @@ export class SdigWorkspaceInbox extends DeesElement {
   `];
 
   private get filteredDocuments(): IDocumentRow[] {
-    return demoDocuments
+    return this.documents
       .filter((doc) => this.filter === 'all' || doc.status === this.filter)
       .filter((doc) => !this.search || doc.title.toLowerCase().includes(this.search.toLowerCase()));
   }
@@ -62,23 +63,30 @@ export class SdigWorkspaceInbox extends DeesElement {
   }
 
   private openDocument(doc: IDocumentRow) {
+    this.dispatchEvent(new CustomEvent('document-open', {
+      detail: { document: doc },
+      bubbles: true,
+      composed: true,
+    }));
     requestWorkspaceView(this, doc.status === 'signed' ? 'audit' : 'sign');
   }
 
   public render(): TemplateResult {
+    const documents = this.documents;
     const filters = [
-      { id: 'all', label: 'All', count: demoDocuments.length },
-      { id: 'awaiting', label: 'Awaiting', count: demoDocuments.filter((doc) => doc.status === 'awaiting').length },
-      { id: 'signed', label: 'Completed', count: demoDocuments.filter((doc) => doc.status === 'signed').length },
-      { id: 'draft', label: 'Drafts', count: demoDocuments.filter((doc) => doc.status === 'draft').length },
-      { id: 'declined', label: 'Declined', count: demoDocuments.filter((doc) => doc.status === 'declined').length },
+      { id: 'all', label: 'All', count: documents.length },
+      { id: 'awaiting', label: 'Awaiting', count: documents.filter((doc) => doc.status === 'awaiting').length },
+      { id: 'signed', label: 'Completed', count: documents.filter((doc) => doc.status === 'signed').length },
+      { id: 'draft', label: 'Drafts', count: documents.filter((doc) => doc.status === 'draft').length },
+      { id: 'declined', label: 'Declined', count: documents.filter((doc) => doc.status === 'declined').length },
     ];
+    const attentionCount = documents.filter((doc) => doc.status === 'awaiting').length;
 
     return html`
       ${topBar({
         breadcrumb: ['signature.digital', 'Lossless GmbH', 'Inbox'],
         title: 'Inbox',
-        subtitle: pill(`${demoDocuments.filter((doc) => doc.status === 'awaiting').length} need attention`, 'info'),
+        subtitle: pill(`${attentionCount} need attention`, 'info'),
         actions: html`${actionButton('Import', 'outline', 'upload')}${actionButton('New document', 'primary', 'plus', () => requestWorkspaceView(this, 'compose'))}`,
       })}
       <div class="filterbar">