@epistola.app/valtimo-plugin 0.0.1

package/src/lib/components/generate-document-configuration/generate-document-configuration.component.html

@@ -0,0 +1,182 @@
+<v-form
+    (valueChange)="formValueChange($event)"
+    *ngIf="{
+      disabled: disabled$ | async,
+      prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,
+      templateOptions: templateOptions$ | async,
+      templatesLoading: templatesLoading$ | async,
+      variantOptions: variantOptions$ | async,
+      variantsLoading: variantsLoading$ | async,
+      environmentOptions: environmentOptions$ | async,
+      environmentsLoading: environmentsLoading$ | async,
+      templateFieldsLoading: templateFieldsLoading$ | async,
+      selectedTemplateId: selectedTemplateId$ | async
+    } as obs"
+>
+  <v-select
+    name="templateId"
+    [title]="'templateId' | pluginTranslate: pluginId | async"
+    [tooltip]="'templateIdTooltip' | pluginTranslate: pluginId | async"
+    [margin]="true"
+    [items]="obs.templateOptions"
+    [defaultSelectionId]="obs.prefill?.templateId"
+    [disabled]="obs.disabled || obs.templatesLoading"
+    [required]="true"
+    [loading]="obs.templatesLoading"
+  >
+  </v-select>
+
+  <!-- Variant selection mode toggle -->
+  <div class="variant-mode-toggle" *ngIf="obs.selectedTemplateId">
+    <label class="variant-mode-label">{{ 'variantSelectionMode' | pluginTranslate: pluginId | async }}</label>
+    <div class="variant-mode-buttons">
+      <button
+        type="button"
+        class="variant-mode-btn"
+        [class.active]="variantSelectionMode === 'explicit'"
+        (click)="onVariantSelectionModeChange('explicit')"
+        [disabled]="obs.disabled"
+      >{{ 'selectByVariant' | pluginTranslate: pluginId | async }}</button>
+      <button
+        type="button"
+        class="variant-mode-btn"
+        [class.active]="variantSelectionMode === 'attributes'"
+        (click)="onVariantSelectionModeChange('attributes')"
+        [disabled]="obs.disabled"
+      >{{ 'selectByAttributes' | pluginTranslate: pluginId | async }}</button>
+    </div>
+  </div>
+
+  <!-- Explicit variant selection (dropdown) -->
+  <v-select
+    *ngIf="variantSelectionMode === 'explicit'"
+    name="variantId"
+    [title]="'variantId' | pluginTranslate: pluginId | async"
+    [tooltip]="'variantIdTooltip' | pluginTranslate: pluginId | async"
+    [margin]="true"
+    [items]="obs.variantOptions"
+    [defaultSelectionId]="obs.prefill?.variantId"
+    [disabled]="obs.disabled || obs.variantsLoading || !obs.selectedTemplateId"
+    [required]="false"
+    [loading]="obs.variantsLoading"
+  >
+  </v-select>
+
+  <!-- Attribute-based variant selection -->
+  <div *ngIf="variantSelectionMode === 'attributes' && obs.selectedTemplateId" class="variant-attributes-section">
+    <label class="variant-attributes-label">{{ 'variantAttributes' | pluginTranslate: pluginId | async }}</label>
+    <div class="variant-attributes-list">
+      <div *ngFor="let entry of variantAttributeEntries; let i = index" class="variant-attribute-row">
+        <input
+          type="text"
+          class="variant-attribute-input"
+          [placeholder]="'attributeKey' | pluginTranslate: pluginId | async"
+          [(ngModel)]="entry.key"
+          (ngModelChange)="onAttributeEntryChange()"
+          [disabled]="obs.disabled"
+        />
+        <input
+          type="text"
+          class="variant-attribute-input"
+          [placeholder]="'attributeValue' | pluginTranslate: pluginId | async"
+          [(ngModel)]="entry.value"
+          (ngModelChange)="onAttributeEntryChange()"
+          [disabled]="obs.disabled"
+        />
+        <button
+          type="button"
+          class="variant-attribute-remove-btn"
+          (click)="removeAttributeEntry(i)"
+          [disabled]="obs.disabled"
+          title="{{ 'removeAttribute' | pluginTranslate: pluginId | async }}"
+        >&times;</button>
+      </div>
+    </div>
+    <button
+      type="button"
+      class="variant-attribute-add-btn"
+      (click)="addAttributeEntry()"
+      [disabled]="obs.disabled"
+    >+ {{ 'addAttribute' | pluginTranslate: pluginId | async }}</button>
+  </div>
+
+  <v-select
+    name="environmentId"
+    [title]="'environmentId' | pluginTranslate: pluginId | async"
+    [tooltip]="'environmentIdTooltip' | pluginTranslate: pluginId | async"
+    [margin]="true"
+    [items]="obs.environmentOptions"
+    [defaultSelectionId]="obs.prefill?.environmentId"
+    [disabled]="obs.disabled || obs.environmentsLoading"
+    [required]="false"
+    [loading]="obs.environmentsLoading"
+  >
+  </v-select>
+
+  <v-select
+    name="outputFormat"
+    [title]="'outputFormat' | pluginTranslate: pluginId | async"
+    [tooltip]="'outputFormatTooltip' | pluginTranslate: pluginId | async"
+    [margin]="true"
+    [items]="outputFormatOptions"
+    [defaultSelectionId]="obs.prefill?.outputFormat || 'PDF'"
+    [disabled]="obs.disabled"
+    [required]="true"
+  >
+  </v-select>
+
+  <v-input
+    name="filename"
+    [title]="'filename' | pluginTranslate: pluginId | async"
+    [tooltip]="'filenameTooltip' | pluginTranslate: pluginId | async"
+    [margin]="true"
+    [defaultValue]="obs.prefill?.filename"
+    [disabled]="obs.disabled"
+    [required]="true"
+  >
+  </v-input>
+
+  <v-input
+    name="correlationId"
+    [title]="'correlationId' | pluginTranslate: pluginId | async"
+    [tooltip]="'correlationIdTooltip' | pluginTranslate: pluginId | async"
+    [margin]="true"
+    [defaultValue]="obs.prefill?.correlationId"
+    [disabled]="obs.disabled"
+    [required]="false"
+  >
+  </v-input>
+
+  <v-input
+    name="resultProcessVariable"
+    [title]="'resultProcessVariable' | pluginTranslate: pluginId | async"
+    [tooltip]="'resultProcessVariableTooltip' | pluginTranslate: pluginId | async"
+    [margin]="true"
+    [defaultValue]="obs.prefill?.resultProcessVariable"
+    [disabled]="obs.disabled"
+    [required]="true"
+  >
+  </v-input>
+</v-form>
+
+<epistola-data-mapping-tree
+  *ngIf="(selectedTemplateId$ | async)"
+  [pluginId]="pluginId"
+  [templateFields$]="templateFields$"
+  [disabled$]="disabled$"
+  [prefillMapping$]="prefillDataMapping$"
+  [caseDefinitionKey]="caseDefinitionKey"
+  [processVariables]="processVariables"
+  (mappingChange)="onDataMappingChange($event)"
+  (requiredFieldsStatus)="onRequiredFieldsStatusChange($event)"
+></epistola-data-mapping-tree>
+
+<div class="validation-summary" *ngIf="(selectedTemplateId$ | async) && requiredFieldsStatus.total > 0">
+  <span *ngIf="requiredFieldsStatus.mapped === requiredFieldsStatus.total" class="validation-complete">
+    {{ 'requiredFieldsComplete' | pluginTranslate: pluginId | async }}
+  </span>
+  <span *ngIf="requiredFieldsStatus.mapped < requiredFieldsStatus.total" class="validation-incomplete">
+    {{ requiredFieldsStatus.mapped }} / {{ requiredFieldsStatus.total }}
+    {{ 'validationSummary' | pluginTranslate: pluginId | async }}
+  </span>
+</div>

package/src/lib/components/generate-document-configuration/generate-document-configuration.component.scss

@@ -0,0 +1,150 @@
+.validation-summary {
+  margin-top: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 4px;
+  font-size: 0.875rem;
+
+  .validation-complete {
+    color: #198754;
+  }
+
+  .validation-incomplete {
+    color: #dc3545;
+    font-weight: 500;
+  }
+}
+
+.variant-mode-toggle {
+  margin-bottom: 1rem;
+  padding: 0 0.75rem;
+}
+
+.variant-mode-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-bottom: 0.375rem;
+}
+
+.variant-mode-buttons {
+  display: flex;
+  gap: 0;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  overflow: hidden;
+  width: fit-content;
+}
+
+.variant-mode-btn {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.8125rem;
+  background: #fff;
+  border: none;
+  border-right: 1px solid #d1d5db;
+  cursor: pointer;
+  color: #374151;
+  transition: background-color 0.15s, color 0.15s;
+
+  &:last-child {
+    border-right: none;
+  }
+
+  &:hover:not([disabled]) {
+    background: #f3f4f6;
+  }
+
+  &.active {
+    background: #2563eb;
+    color: #fff;
+  }
+
+  &[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.variant-attributes-section {
+  margin-bottom: 1rem;
+  padding: 0 0.75rem;
+}
+
+.variant-attributes-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-bottom: 0.375rem;
+}
+
+.variant-attributes-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.variant-attribute-row {
+  display: flex;
+  gap: 0.375rem;
+  align-items: center;
+}
+
+.variant-attribute-input {
+  flex: 1;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.8125rem;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  outline: none;
+
+  &:focus {
+    border-color: #2563eb;
+    box-shadow: 0 0 0 1px #2563eb;
+  }
+
+  &[disabled] {
+    opacity: 0.5;
+    background: #f9fafb;
+  }
+}
+
+.variant-attribute-remove-btn {
+  padding: 0.25rem 0.5rem;
+  font-size: 1rem;
+  line-height: 1;
+  background: none;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #6b7280;
+
+  &:hover:not([disabled]) {
+    color: #dc3545;
+    border-color: #dc3545;
+  }
+
+  &[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.variant-attribute-add-btn {
+  margin-top: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.8125rem;
+  background: none;
+  border: 1px dashed #d1d5db;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #6b7280;
+
+  &:hover:not([disabled]) {
+    color: #2563eb;
+    border-color: #2563eb;
+  }
+
+  &[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}