@epistola.app/valtimo-plugin 0.0.1 → 0.2.0

package/src/lib/components/epistola-download/epistola-download.component.ts

@@ -1,79 +0,0 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {HttpClient} from '@angular/common/http';
-import {FormioCustomComponent} from '@valtimo/components';
-
-export interface DownloadData {
-  documentId: string;
-  tenantId: string;
-}
-
-@Component({
-  standalone: true,
-  imports: [CommonModule],
-  selector: 'epistola-download-component',
-  template: `
-    <button
-      type="button"
-      class="btn btn-outline-primary"
-      [disabled]="disabled || downloading || !hasRequiredData()"
-      (click)="download()"
-    >
-      <i class="mdi mdi-download mr-1"></i>
-      {{ downloading ? 'Downloading...' : buttonLabel }}
-    </button>
-    <span *ngIf="error" class="text-danger ml-2">{{ error }}</span>
-  `,
-})
-export class EpistolaDownloadComponent implements FormioCustomComponent<DownloadData> {
-  @Input() value: DownloadData;
-  @Output() valueChange = new EventEmitter<DownloadData>();
-
-  @Input() disabled = false;
-  @Input() filename = 'document.pdf';
-  @Input() label = 'Download PDF';
-
-  downloading = false;
-  error: string | null = null;
-
-  get buttonLabel(): string {
-    return this.label || 'Download PDF';
-  }
-
-  constructor(private readonly http: HttpClient) {}
-
-  hasRequiredData(): boolean {
-    return !!(this.value?.documentId && this.value?.tenantId);
-  }
-
-  download(): void {
-    if (!this.hasRequiredData() || this.downloading) {
-      return;
-    }
-
-    this.downloading = true;
-    this.error = null;
-
-    const {documentId, tenantId} = this.value;
-    const url = `/api/v1/plugin/epistola/documents/${encodeURIComponent(documentId)}/download`
-      + `?tenantId=${encodeURIComponent(tenantId)}`
-      + `&filename=${encodeURIComponent(this.filename)}`;
-
-    this.http.get(url, {responseType: 'blob'}).subscribe({
-      next: (blob) => {
-        const objectUrl = URL.createObjectURL(blob);
-        const anchor = document.createElement('a');
-        anchor.href = objectUrl;
-        anchor.download = this.filename;
-        anchor.click();
-        URL.revokeObjectURL(objectUrl);
-        this.downloading = false;
-      },
-      error: (err) => {
-        console.error('Download failed', err);
-        this.error = 'Download mislukt. Probeer opnieuw.';
-        this.downloading = false;
-      },
-    });
-  }
-}

package/src/lib/components/epistola-download/epistola-download.formio.ts

@@ -1,19 +0,0 @@
-import {Injector} from '@angular/core';
-import {FormioCustomComponentInfo, registerCustomFormioComponent} from '@valtimo/components';
-import {EpistolaDownloadComponent} from './epistola-download.component';
-
-export const EPISTOLA_DOWNLOAD_OPTIONS: FormioCustomComponentInfo = {
-  type: 'epistola-download',
-  selector: 'epistola-download-button',
-  title: 'Epistola Download',
-  group: 'basic',
-  icon: 'download',
-  emptyValue: null,
-  fieldOptions: ['filename', 'label'],
-};
-
-export function registerEpistolaDownloadComponent(injector: Injector): void {
-  if (!customElements.get(EPISTOLA_DOWNLOAD_OPTIONS.selector)) {
-    registerCustomFormioComponent(EPISTOLA_DOWNLOAD_OPTIONS, EpistolaDownloadComponent, injector);
-  }
-}

package/src/lib/components/field-tree/field-tree.component.html

@@ -1,192 +0,0 @@
-<!-- SCALAR field: label row + input with 3-mode selector -->
-<div *ngIf="field.fieldType === 'SCALAR'" class="field-row" [class.field-required-unmapped]="field.required && !getStringValue()">
-  <div class="field-label">
-    <span class="field-name">{{ field.name }}</span>
-    <span class="field-meta">({{ field.type }}{{ field.required ? ', required' : '' }})</span>
-  </div>
-  <div class="field-input">
-    <div class="input-mode-group">
-      <button type="button" class="mode-btn" [class.mode-active]="inputMode === 'browse'" [disabled]="disabled" (click)="setInputMode('browse')" [title]="'browseMode' | pluginTranslate: pluginId | async">⊞</button>
-      <button type="button" class="mode-btn" [class.mode-active]="inputMode === 'pv'" [disabled]="disabled" (click)="setInputMode('pv')" [title]="'pvMode' | pluginTranslate: pluginId | async">pv</button>
-      <button type="button" class="mode-btn" [class.mode-active]="inputMode === 'expression'" [disabled]="disabled" (click)="setInputMode('expression')" [title]="'expressionMode' | pluginTranslate: pluginId | async">fx</button>
-    </div>
-
-    <!-- Browse mode: ValuePathSelector -->
-    <div class="field-input-control" *ngIf="inputMode === 'browse'">
-      <valtimo-value-path-selector
-        [name]="'field_' + field.path"
-        [caseDefinitionKey]="caseDefinitionKey"
-        [prefixes]="[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]"
-        [notation]="'dots'"
-        [disabled]="disabled"
-        [defaultValue]="getStringValue()"
-        [showCaseDefinitionSelector]="!caseDefinitionKey"
-        (valueChangeEvent)="onBrowseValueChange($event)"
-      ></valtimo-value-path-selector>
-    </div>
-
-    <!-- PV mode: dropdown (when available) or text fallback -->
-    <div class="field-input-control" *ngIf="inputMode === 'pv'">
-      <select
-        *ngIf="processVariables.length > 0; else pvFallback"
-        class="pv-select"
-        [disabled]="disabled"
-        (change)="onPvChange($any($event.target).value)"
-      >
-        <option value="">{{ 'pvPlaceholder' | pluginTranslate: pluginId | async }}</option>
-        <option *ngFor="let pv of processVariables" [value]="pv" [selected]="pv === getPvName()">{{ pv }}</option>
-      </select>
-      <ng-template #pvFallback>
-        <v-input
-          [name]="'pvfb_' + field.path"
-          [defaultValue]="getPvName()"
-          [disabled]="disabled"
-          [placeholder]="'pvPlaceholder' | pluginTranslate: pluginId | async"
-          (valueChange)="onPvChange($event)"
-        ></v-input>
-      </ng-template>
-    </div>
-
-    <!-- Expression mode: text input -->
-    <div class="field-input-control" *ngIf="inputMode === 'expression'">
-      <v-input
-        [name]="'fx_' + field.path"
-        [defaultValue]="getStringValue()"
-        [disabled]="disabled"
-        [placeholder]="'e.g. pv:variableName or doc:path.to.field'"
-        (valueChange)="onExpressionValueChange($event)"
-      ></v-input>
-    </div>
-  </div>
-</div>
-
-<!-- OBJECT field: collapsible section with children -->
-<div *ngIf="field.fieldType === 'OBJECT'" class="field-object">
-  <div class="field-object-header" (click)="toggleExpanded()" [class.field-required-unmapped]="totalRequired > 0 && mappedCount < totalRequired">
-    <span class="expand-icon">{{ expanded ? '▼' : '▶' }}</span>
-    <span class="field-name">{{ field.name }}</span>
-    <span class="field-meta">(object{{ field.required ? ', required' : '' }})</span>
-    <span class="completeness-badge" *ngIf="totalRequired > 0 && !expanded">
-      {{ mappedCount }}/{{ totalRequired }}
-    </span>
-  </div>
-  <div class="field-object-children" *ngIf="expanded">
-    <epistola-field-tree
-      *ngFor="let child of field.children"
-      [field]="child"
-      [value]="getChildValue(child.name)"
-      [pluginId]="pluginId"
-      [caseDefinitionKey]="caseDefinitionKey"
-      [processVariables]="processVariables"
-      [disabled]="disabled"
-      (valueChange)="onChildChange(child.name, $event)"
-    ></epistola-field-tree>
-  </div>
-</div>
-
-<!-- ARRAY field: collapsible section with source collection + optional per-item mapping -->
-<div *ngIf="field.fieldType === 'ARRAY'" class="field-array">
-  <div class="field-array-header" (click)="toggleExpanded()" [class.field-required-unmapped]="field.required && !getSourceValue()">
-    <span class="expand-icon">{{ expanded ? '▼' : '▶' }}</span>
-    <span class="field-name">{{ field.name }}</span>
-    <span class="field-meta">(array{{ field.required ? ', required' : '' }})</span>
-    <span class="completeness-badge" *ngIf="totalRequired > 0 && !expanded">
-      {{ mappedCount }}/{{ totalRequired }}
-    </span>
-    <span class="mapped-indicator" *ngIf="totalRequired === 0 && getSourceValue() && !expanded">✓</span>
-  </div>
-  <div class="field-array-content" *ngIf="expanded">
-    <!-- Source collection input -->
-    <div class="field-row">
-      <div class="field-label">
-        <span class="field-name">{{ 'mapCollectionTo' | pluginTranslate: pluginId | async }}</span>
-      </div>
-      <div class="field-input">
-        <div class="input-mode-group">
-          <button type="button" class="mode-btn" [class.mode-active]="inputMode === 'browse'" [disabled]="disabled" (click)="setInputMode('browse')" [title]="'browseMode' | pluginTranslate: pluginId | async">⊞</button>
-          <button type="button" class="mode-btn" [class.mode-active]="inputMode === 'pv'" [disabled]="disabled" (click)="setInputMode('pv')" [title]="'pvMode' | pluginTranslate: pluginId | async">pv</button>
-          <button type="button" class="mode-btn" [class.mode-active]="inputMode === 'expression'" [disabled]="disabled" (click)="setInputMode('expression')" [title]="'expressionMode' | pluginTranslate: pluginId | async">fx</button>
-        </div>
-
-        <div class="field-input-control" *ngIf="inputMode === 'browse'">
-          <valtimo-value-path-selector
-            [name]="'field_' + field.path"
-            [caseDefinitionKey]="caseDefinitionKey"
-            [prefixes]="[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]"
-            [notation]="'dots'"
-            [disabled]="disabled"
-            [defaultValue]="getSourceValue()"
-            [showCaseDefinitionSelector]="!caseDefinitionKey"
-            (valueChangeEvent)="onSourceBrowseChange($event)"
-          ></valtimo-value-path-selector>
-        </div>
-
-        <div class="field-input-control" *ngIf="inputMode === 'pv'">
-          <select
-            *ngIf="processVariables.length > 0; else pvSourceFallback"
-            class="pv-select"
-            [disabled]="disabled"
-            (change)="onSourcePvChange($any($event.target).value)"
-          >
-            <option value="">{{ 'pvPlaceholder' | pluginTranslate: pluginId | async }}</option>
-            <option *ngFor="let pv of processVariables" [value]="pv" [selected]="pv === getSourcePvName()">{{ pv }}</option>
-          </select>
-          <ng-template #pvSourceFallback>
-            <v-input
-              [name]="'pvfb_' + field.path"
-              [defaultValue]="getSourcePvName()"
-              [disabled]="disabled"
-              [placeholder]="'pvPlaceholder' | pluginTranslate: pluginId | async"
-              (valueChange)="onSourcePvChange($event)"
-            ></v-input>
-          </ng-template>
-        </div>
-
-        <div class="field-input-control" *ngIf="inputMode === 'expression'">
-          <v-input
-            [name]="'fx_' + field.path"
-            [defaultValue]="getSourceValue()"
-            [disabled]="disabled"
-            [placeholder]="'e.g. pv:variableName or doc:path.to.field'"
-            (valueChange)="onSourceExpressionChange($event)"
-          ></v-input>
-        </div>
-      </div>
-    </div>
-
-    <!-- Per-item field mapping toggle (only shown when array has children) -->
-    <div class="array-per-field-toggle" *ngIf="hasArrayChildren()">
-      <label class="toggle-label">
-        <input
-          type="checkbox"
-          [checked]="arrayPerFieldMode"
-          [disabled]="disabled"
-          (change)="toggleArrayPerFieldMode()"
-        />
-        <span>{{ 'itemFieldMapping' | pluginTranslate: pluginId | async }}</span>
-      </label>
-    </div>
-
-    <!-- Per-item field mappings -->
-    <div class="array-item-fields" *ngIf="arrayPerFieldMode && hasArrayChildren()">
-      <div class="item-fields-header">
-        <span class="item-fields-title">{{ 'itemFieldMappingTitle' | pluginTranslate: pluginId | async }}</span>
-      </div>
-      <div class="item-field-row" *ngFor="let child of field.children">
-        <div class="item-field-label">
-          <span class="field-name">{{ child.name }}</span>
-          <span class="field-meta">({{ child.type }}{{ child.required ? ', required' : '' }})</span>
-        </div>
-        <div class="item-field-input">
-          <v-input
-            [name]="'itemField_' + child.path"
-            [defaultValue]="getItemFieldValue(child.name)"
-            [disabled]="disabled"
-            [placeholder]="'sourceFieldPlaceholder' | pluginTranslate: pluginId | async"
-            (valueChange)="onItemFieldChange(child.name, $event)"
-          ></v-input>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

package/src/lib/components/field-tree/field-tree.component.scss

@@ -1,255 +0,0 @@
-// -- Scalar field row --
-.field-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-  padding: 0.5rem 0;
-  border-left: 3px solid transparent;
-
-  &.field-required-unmapped {
-    border-left-color: #dc3545;
-    background-color: #fff5f5;
-    padding-left: 0.5rem;
-  }
-}
-
-.field-label {
-  flex: 0 0 200px;
-  min-width: 140px;
-  padding-top: 0.5rem;
-  word-break: break-word;
-
-  .field-name {
-    font-weight: 500;
-  }
-
-  .field-meta {
-    font-size: 0.8125rem;
-    color: #6c757d;
-    margin-left: 0.25rem;
-  }
-}
-
-.field-input {
-  flex: 1;
-  display: flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-  min-width: 0;
-}
-
-.field-input-control {
-  flex: 1;
-  min-width: 0;
-}
-
-// -- 3-button input mode group --
-.input-mode-group {
-  flex: 0 0 auto;
-  display: flex;
-  margin-top: 0.25rem;
-  border: 1px solid #c6c6c6;
-  border-radius: 4px;
-  overflow: hidden;
-
-  .mode-btn {
-    width: 32px;
-    height: 32px;
-    padding: 0;
-    border: none;
-    border-right: 1px solid #c6c6c6;
-    background: #f4f4f4;
-    color: #525252;
-    font-size: 0.75rem;
-    font-weight: 600;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color 0.15s;
-
-    &:last-child {
-      border-right: none;
-    }
-
-    &:hover:not(:disabled) {
-      background: #e0e0e0;
-    }
-
-    &.mode-active {
-      background: #0f62fe;
-      color: #fff;
-
-      &:hover:not(:disabled) {
-        background: #0353e9;
-      }
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-}
-
-// -- PV select dropdown --
-.pv-select {
-  width: 100%;
-  height: 2.5rem;
-  padding: 0 0.75rem;
-  border: 1px solid #c6c6c6;
-  border-radius: 4px;
-  background: #fff;
-  color: #161616;
-  font-size: 0.875rem;
-  cursor: pointer;
-
-  &:focus {
-    outline: 2px solid #0f62fe;
-    outline-offset: -2px;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    background: #f4f4f4;
-  }
-}
-
-// -- Object section --
-.field-object {
-  margin: 0.25rem 0;
-}
-
-.field-object-header,
-.field-array-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.25rem;
-  cursor: pointer;
-  user-select: none;
-  border-left: 3px solid transparent;
-  border-radius: 2px;
-
-  &:hover {
-    background: #f4f4f4;
-  }
-
-  &.field-required-unmapped {
-    border-left-color: #dc3545;
-    background-color: #fff5f5;
-  }
-
-  .expand-icon {
-    flex: 0 0 1rem;
-    font-size: 0.75rem;
-    color: #525252;
-  }
-
-  .field-name {
-    font-weight: 500;
-  }
-
-  .field-meta {
-    font-size: 0.8125rem;
-    color: #6c757d;
-  }
-
-  .completeness-badge {
-    margin-left: auto;
-    font-size: 0.75rem;
-    padding: 0.125rem 0.5rem;
-    border-radius: 10px;
-    background: #e0e0e0;
-    color: #525252;
-    font-weight: 500;
-  }
-
-  .mapped-indicator {
-    margin-left: auto;
-    color: #198754;
-    font-weight: 600;
-  }
-}
-
-.field-object-children {
-  padding-left: 1.25rem;
-  border-left: 1px solid #e0e0e0;
-  margin-left: 0.5rem;
-}
-
-// -- Array section --
-.field-array {
-  margin: 0.25rem 0;
-}
-
-.field-array-content {
-  padding-left: 1.25rem;
-  border-left: 1px solid #e0e0e0;
-  margin-left: 0.5rem;
-}
-
-// -- Array per-item field mapping --
-.array-per-field-toggle {
-  padding: 0.5rem 0;
-
-  .toggle-label {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    cursor: pointer;
-    font-size: 0.875rem;
-    color: #525252;
-
-    input[type="checkbox"] {
-      cursor: pointer;
-    }
-  }
-}
-
-.array-item-fields {
-  padding: 0.25rem 0 0.5rem;
-  margin-left: 0.5rem;
-  border-left: 1px dashed #c6c6c6;
-  padding-left: 1rem;
-}
-
-.item-fields-header {
-  padding-bottom: 0.25rem;
-
-  .item-fields-title {
-    font-size: 0.8125rem;
-    font-weight: 500;
-    color: #6c757d;
-  }
-}
-
-.item-field-row {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.25rem 0;
-}
-
-.item-field-label {
-  flex: 0 0 180px;
-  min-width: 120px;
-  word-break: break-word;
-
-  .field-name {
-    font-weight: 500;
-    font-size: 0.875rem;
-  }
-
-  .field-meta {
-    font-size: 0.75rem;
-    color: #6c757d;
-    margin-left: 0.25rem;
-  }
-}
-
-.item-field-input {
-  flex: 1;
-  min-width: 0;
-}