feat(workspace): make compose and sign views accept document, recipient, and field state via properties and emit field and routing change events
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { DeesElement, state, html, customElement, type TemplateResult, css } from '@design.estate/dees-element';
|
||||
import { actionButton, demoFields, demoRecipients, fakeDocument, icon, pill, topBar, workspaceBaseStyles, workspaceDemoFrame, type IFieldPlacement, type IRecipient, type TRecipientRole } from './sdig-workspace.shared.js';
|
||||
import { DeesElement, property, state, html, customElement, type TemplateResult, css } from '@design.estate/dees-element';
|
||||
import { actionButton, demoDocuments, demoFields, demoRecipients, fakeDocument, icon, pill, topBar, workspaceBaseStyles, workspaceDemoFrame, type IDocumentRow, type IFieldPlacement, type IRecipient, type TRecipientRole } from './sdig-workspace.shared.js';
|
||||
import '../sdig-contextmenu/index.js';
|
||||
import { type ISdigContextMenuAction, type ISdigContextMenuActionEventDetail } from '../sdig-contextmenu/index.js';
|
||||
|
||||
@@ -71,8 +71,9 @@ export class SdigWorkspaceCompose extends DeesElement {
|
||||
@state() private accessor step: number = 2;
|
||||
@state() private accessor activeRecipient: number = 0;
|
||||
@state() private accessor selectedFieldId: string | null = null;
|
||||
@state() private accessor recipients: IRecipient[] = [...demoRecipients];
|
||||
@state() private accessor fields: IFieldPlacement[] = [...demoFields];
|
||||
@property({ attribute: false }) public accessor document: IDocumentRow = demoDocuments[0];
|
||||
@property({ attribute: false }) public accessor recipients: IRecipient[] = [...demoRecipients];
|
||||
@property({ attribute: false }) public accessor fields: IFieldPlacement[] = [...demoFields];
|
||||
@state() private accessor signingOrderDrag: TSigningOrderDrag | null = null;
|
||||
@state() private accessor recipientContextMenu: TRecipientContextMenu | null = null;
|
||||
private draggedFieldDefinition: TFieldDefinition | null = null;
|
||||
@@ -169,8 +170,36 @@ export class SdigWorkspaceCompose extends DeesElement {
|
||||
return Math.max(min, Math.min(max, value));
|
||||
}
|
||||
|
||||
private emitFieldsChange() {
|
||||
this.dispatchEvent(new CustomEvent('fields-change', {
|
||||
detail: { fields: this.fields },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}
|
||||
|
||||
private emitRecipientsChange() {
|
||||
this.dispatchEvent(new CustomEvent('recipients-change', {
|
||||
detail: { recipients: this.recipients },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
this.dispatchEvent(new CustomEvent('routing-change', {
|
||||
detail: { recipients: this.recipients },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}
|
||||
|
||||
private updateField(fieldId: string, patch: Partial<IFieldPlacement>) {
|
||||
this.fields = this.fields.map((field) => field.id === fieldId ? { ...field, ...patch } : field);
|
||||
const field = this.fields.find((currentField) => currentField.id === fieldId);
|
||||
this.dispatchEvent(new CustomEvent('field-update', {
|
||||
detail: { fieldId, field, patch, fields: this.fields },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
this.emitFieldsChange();
|
||||
}
|
||||
|
||||
private updateSelectedField(patch: Partial<IFieldPlacement>) {
|
||||
@@ -192,8 +221,15 @@ export class SdigWorkspaceCompose extends DeesElement {
|
||||
|
||||
private removeSelectedField() {
|
||||
if (!this.selectedFieldId) return;
|
||||
const field = this.fields.find((currentField) => currentField.id === this.selectedFieldId);
|
||||
this.fields = this.fields.filter((field) => field.id !== this.selectedFieldId);
|
||||
this.dispatchEvent(new CustomEvent('field-delete', {
|
||||
detail: { fieldId: this.selectedFieldId, field, fields: this.fields },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
this.selectedFieldId = null;
|
||||
this.emitFieldsChange();
|
||||
}
|
||||
|
||||
private updateRecipientRole(recipientId: number, role: TRecipientRole) {
|
||||
@@ -220,6 +256,7 @@ export class SdigWorkspaceCompose extends DeesElement {
|
||||
targetMembers.splice(insertIndex, 0, { ...recipient, role: nextRole });
|
||||
nextByRole.set(nextRole, targetMembers);
|
||||
this.recipients = recipientRoleDefinitions.flatMap((roleDefinition) => nextByRole.get(roleDefinition.role) || []).map((currentRecipient, index) => ({ ...currentRecipient, order: index + 1 }));
|
||||
this.emitRecipientsChange();
|
||||
|
||||
const nextSigners = this.recipients.filter((currentRecipient) => currentRecipient.role === 'signer');
|
||||
const fallbackSigner = nextSigners[0];
|
||||
@@ -229,6 +266,7 @@ export class SdigWorkspaceCompose extends DeesElement {
|
||||
if (this.activeRecipient === recipientId) {
|
||||
this.activeRecipient = fallbackSigner.id;
|
||||
}
|
||||
this.emitFieldsChange();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -454,6 +492,12 @@ export class SdigWorkspaceCompose extends DeesElement {
|
||||
this.selectedFieldId = nextField.id;
|
||||
this.draggedFieldDefinition = null;
|
||||
this.draggedFieldGrabOffset = null;
|
||||
this.dispatchEvent(new CustomEvent('field-create', {
|
||||
detail: { field: nextField, fields: this.fields },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
this.emitFieldsChange();
|
||||
}
|
||||
|
||||
private startFieldToolDrag(event: DragEvent, fieldType: TFieldDefinition) {
|
||||
@@ -567,10 +611,11 @@ export class SdigWorkspaceCompose extends DeesElement {
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
const document = this.document || demoDocuments[0];
|
||||
const selectedField = this.fields.find((field) => field.id === this.selectedFieldId);
|
||||
|
||||
return html`
|
||||
${topBar({ breadcrumb: ['signature.digital', 'Inbox', 'Compose'], title: 'Master Services Agreement', subtitle: pill('Draft · auto-saved'), actions: html`${actionButton('Save draft', 'ghost')}${actionButton('Preview', 'outline', 'eye')}${actionButton('Send for signature', 'primary', 'send')}` })}
|
||||
${topBar({ breadcrumb: ['signature.digital', 'Inbox', 'Compose'], title: document.title, subtitle: pill('Draft · auto-saved'), actions: html`${actionButton('Save draft', 'ghost')}${actionButton('Preview', 'outline', 'eye')}${actionButton('Send for signature', 'primary', 'send')}` })}
|
||||
${this.renderStepper()}
|
||||
<div class="compose-workspace">
|
||||
${this.renderRecipientContextMenu()}
|
||||
@@ -585,9 +630,9 @@ export class SdigWorkspaceCompose extends DeesElement {
|
||||
<div class="document-page page-drop-target" @click=${this.handleDocumentClick} @dragover=${(event: DragEvent) => { event.preventDefault(); if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy'; (event.currentTarget as HTMLElement).classList.add('drag-over'); }} @dragleave=${(event: DragEvent) => (event.currentTarget as HTMLElement).classList.remove('drag-over')} @drop=${(event: DragEvent) => this.addFieldFromDrop(event)}>
|
||||
${fakeDocument()}
|
||||
${this.fields.map((field) => html`<div class="field-box ${this.selectedFieldId === field.id ? 'selected' : ''}" style="--x: ${field.x}px; --y: ${field.y}px; --w: ${field.w}px; --h: ${field.h}px; --field-color: ${this.recipientColor(field.recipient)};" @click=${() => this.selectedFieldId = field.id} @pointerdown=${(event: PointerEvent) => this.startFieldMove(event, field)}><div class="field-content">${icon(this.fieldIcon(field.type), 12)}<span>${field.label}</span></div>${this.selectedFieldId === field.id ? this.renderResizeHandles(field) : ''}</div>`)}
|
||||
<div class="mono" style="position: absolute; bottom: 12px; right: 16px; font-size: 9px; color: hsl(0 0% 60%);">Page 1 of 14</div>
|
||||
<div class="mono" style="position: absolute; bottom: 12px; right: 16px; font-size: 9px; color: hsl(0 0% 60%);">Page 1 of ${document.pages}</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-muted);">${actionButton('Prev', 'outline')}${html`<span class="mono">1 / 14</span>`}${actionButton('Next', 'outline')}</div>
|
||||
<div style="display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-muted);">${actionButton('Prev', 'outline')}${html`<span class="mono">1 / ${document.pages}</span>`}${actionButton('Next', 'outline')}</div>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<div class="label-upper">Routing order · drag to reorder</div>
|
||||
|
||||
Reference in New Issue
Block a user