Lots of cleanup, looking good. Simplify

2025-10-08 02:06:16 -05:00 · 2025-10-07 10:29:42 -07:00
parent 0fe5ca9b60
commit b323c180be
5 changed files with 132 additions and 129 deletions
--- a/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html
@@ -188,50 +188,45 @@
                <i-bs name="plus-circle"></i-bs>&nbsp;<span i18n>Add condition</span>
              </button>
            </div>
-            <div class="mt-2" formArrayName="conditions">
+            <div class="mt-2 conditions" formArrayName="conditions">
              @if (getConditionsFormArray(formGroup).length === 0) {
                <p class="text-muted small" i18n>No conditions added. Add one to define document filters.</p>
              }
              @for (condition of getConditionsFormArray(formGroup).controls; track condition; let conditionIndex = $index) {
                <div [formGroupName]="conditionIndex" class="border rounded p-3 mb-2">
-                  <div class="d-flex align-items-start gap-2 mb-2">
-                    <div class="flex-grow-1">
+                  <div class="d-flex align-items-center gap-2">
+                    <div class="w-25">
                      <pngx-input-select
                        i18n-title
-                        title="Condition type"
                        [items]="getConditionTypeOptions(formGroup, conditionIndex)"
                        formControlName="type"
                        [allowNull]="false"
-                        horizontal="true"
                      ></pngx-input-select>
                    </div>
+                    <div class="flex-grow-1">
+                      @if (isTagsCondition(condition.get('type').value)) {
+                        <pngx-input-tags
+                          [allowCreate]="false"
+                          [title]="null"
+                          formControlName="values"
+                        ></pngx-input-tags>
+                      } @else {
+                        <pngx-input-select
+                          [items]="getConditionSelectItems(condition.get('type').value)"
+                          [allowNull]="true"
+                          [multiple]="isSelectMultiple(condition.get('type').value)"
+                          formControlName="values"
+                        ></pngx-input-select>
+                      }
+                    </div>
                    <button
                      type="button"
-                      class="btn btn-link text-danger p-0 ms-1"
+                      class="btn btn-link text-danger p-0"
                      (click)="removeCondition(formGroup, conditionIndex)"
                    >
                      <i-bs name="trash"></i-bs><span class="ms-1" i18n>Delete</span>
                    </button>
                  </div>
-                  @if (isTagsCondition(condition.get('type').value)) {
-                    <pngx-input-tags
-                      [allowCreate]="false"
-                      [title]="getConditionValueLabel(condition.get('type').value)"
-                      [hint]="getConditionHint(formGroup, conditionIndex)"
-                      formControlName="values"
-                      horizontal="true"
-                    ></pngx-input-tags>
-                  } @else {
-                    <pngx-input-select
-                      [title]="getConditionValueLabel(condition.get('type').value)"
-                      [items]="getConditionSelectItems(condition.get('type').value)"
-                      [hint]="getConditionHint(formGroup, conditionIndex)"
-                      [allowNull]="true"
-                      [multiple]="isSelectMultiple(condition.get('type').value)"
-                      formControlName="values"
-                      horizontal="true"
-                    ></pngx-input-select>
-                  }
                </div>
              }
            </div>
--- a/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.scss
+++ b/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.scss
@@ -7,3 +7,7 @@
 .accordion-button {
    font-size: 1rem;
 }
+
+:host ::ng-deep .conditions .paperless-input-select.mb-3 {
+    margin-bottom: 0 !important;
+}
--- a/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts
@@ -150,20 +150,17 @@ export enum TriggerConditionType {
 interface TriggerConditionDefinition {
  id: TriggerConditionType
  name: string
-  hint?: string
-  valueLabel: string
  inputType: 'tags' | 'select'
  allowMultipleEntries: boolean
  allowMultipleValues: boolean
  selectItems?: 'correspondents' | 'documentTypes' | 'storagePaths'
+  disabled?: boolean
 }

 const TRIGGER_CONDITION_DEFINITIONS: TriggerConditionDefinition[] = [
  {
    id: TriggerConditionType.TagsAny,
    name: $localize`Has any of these tags`,
-    hint: $localize`Trigger matches when the document has at least one of the selected tags.`,
-    valueLabel: $localize`Tags`,
    inputType: 'tags',
    allowMultipleEntries: false,
    allowMultipleValues: true,
@@ -171,8 +168,6 @@ const TRIGGER_CONDITION_DEFINITIONS: TriggerConditionDefinition[] = [
  {
    id: TriggerConditionType.TagsAll,
    name: $localize`Has all of these tags`,
-    hint: $localize`Trigger matches only when every selected tag is present.`,
-    valueLabel: $localize`Tags`,
    inputType: 'tags',
    allowMultipleEntries: false,
    allowMultipleValues: true,
@@ -180,8 +175,6 @@ const TRIGGER_CONDITION_DEFINITIONS: TriggerConditionDefinition[] = [
  {
    id: TriggerConditionType.TagsNone,
    name: $localize`Does not have these tags`,
-    hint: $localize`Trigger matches only when none of the selected tags are present.`,
-    valueLabel: $localize`Tags`,
    inputType: 'tags',
    allowMultipleEntries: false,
    allowMultipleValues: true,
@@ -189,8 +182,6 @@ const TRIGGER_CONDITION_DEFINITIONS: TriggerConditionDefinition[] = [
  {
    id: TriggerConditionType.CorrespondentIs,
    name: $localize`Has correspondent`,
-    hint: $localize`Trigger matches when the document has the selected correspondent.`,
-    valueLabel: $localize`Correspondent`,
    inputType: 'select',
    allowMultipleEntries: false,
    allowMultipleValues: false,
@@ -199,8 +190,6 @@ const TRIGGER_CONDITION_DEFINITIONS: TriggerConditionDefinition[] = [
  {
    id: TriggerConditionType.CorrespondentNot,
    name: $localize`Does not have correspondents`,
-    hint: $localize`Trigger matches when the document does not have any of the selected correspondents.`,
-    valueLabel: $localize`Correspondents`,
    inputType: 'select',
    allowMultipleEntries: false,
    allowMultipleValues: true,
@@ -209,8 +198,6 @@ const TRIGGER_CONDITION_DEFINITIONS: TriggerConditionDefinition[] = [
  {
    id: TriggerConditionType.DocumentTypeIs,
    name: $localize`Has document type`,
-    hint: $localize`Trigger matches when the document has the selected document type.`,
-    valueLabel: $localize`Document type`,
    inputType: 'select',
    allowMultipleEntries: false,
    allowMultipleValues: false,
@@ -219,8 +206,6 @@ const TRIGGER_CONDITION_DEFINITIONS: TriggerConditionDefinition[] = [
  {
    id: TriggerConditionType.DocumentTypeNot,
    name: $localize`Does not have document types`,
-    hint: $localize`Trigger matches when the document does not have any of the selected document types.`,
-    valueLabel: $localize`Document types`,
    inputType: 'select',
    allowMultipleEntries: false,
    allowMultipleValues: true,
@@ -229,8 +214,6 @@ const TRIGGER_CONDITION_DEFINITIONS: TriggerConditionDefinition[] = [
  {
    id: TriggerConditionType.StoragePathIs,
    name: $localize`Has storage path`,
-    hint: $localize`Trigger matches when the document has the selected storage path.`,
-    valueLabel: $localize`Storage path`,
    inputType: 'select',
    allowMultipleEntries: false,
    allowMultipleValues: false,
@@ -239,8 +222,6 @@ const TRIGGER_CONDITION_DEFINITIONS: TriggerConditionDefinition[] = [
  {
    id: TriggerConditionType.StoragePathNot,
    name: $localize`Does not have storage paths`,
-    hint: $localize`Trigger matches when the document does not have any of the selected storage paths.`,
-    valueLabel: $localize`Storage paths`,
    inputType: 'select',
    allowMultipleEntries: false,
    allowMultipleValues: true,
@@ -304,6 +285,11 @@ export class WorkflowEditDialogComponent

  private allowedActionTypes = []

+  private conditionTypeOptionCache = new WeakMap<
+    FormArray,
+    TriggerConditionDefinition[]
+  >()
+
  constructor() {
    super()
    this.service = inject(WorkflowService)
@@ -723,19 +709,30 @@ export class WorkflowEditDialogComponent

  getConditionTypeOptions(formGroup: FormGroup, conditionIndex: number) {
    const conditions = this.getConditionsFormArray(formGroup)
+    const options = this.getConditionTypeOptionsForArray(conditions)
+    const currentType = conditions.at(conditionIndex).get('type')
+      .value as TriggerConditionType
+    const usedTypes = conditions.controls.map(
+      (control) => control.get('type').value as TriggerConditionType
+    )

-    return this.conditionDefinitions.map((definition) => ({
-      id: definition.id,
-      name: definition.name,
-      disabled:
-        !definition.allowMultipleEntries &&
-        conditions.controls.some((control, idx) => {
-          if (idx === conditionIndex) {
-            return false
-          }
-          return control.get('type').value === definition.id
-        }),
-    }))
+    options.forEach((option) => {
+      if (option.allowMultipleEntries) {
+        option.disabled = false
+        return
+      }
+
+      const usedElsewhere = usedTypes.some((type, idx) => {
+        if (idx === conditionIndex) {
+          return false
+        }
+        return type === option.id
+      })
+
+      option.disabled = usedElsewhere && option.id !== currentType
+    })
+
+    return options
  }

  canAddCondition(formGroup: FormGroup): boolean {
@@ -802,17 +799,6 @@ export class WorkflowEditDialogComponent
    return this.getConditionDefinition(type)?.name ?? ''
  }

-  getConditionHint(formGroup: FormGroup, conditionIndex: number): string {
-    const conditions = this.getConditionsFormArray(formGroup)
-    const type = conditions.at(conditionIndex).get('type')
-      .value as TriggerConditionType
-    return this.getConditionDefinition(type)?.hint ?? ''
-  }
-
-  getConditionValueLabel(type: TriggerConditionType): string {
-    return this.getConditionDefinition(type)?.valueLabel ?? ''
-  }
-
  isTagsCondition(type: TriggerConditionType): boolean {
    return this.getConditionDefinition(type)?.inputType === 'tags'
  }
@@ -876,6 +862,20 @@ export class WorkflowEditDialogComponent
    return value
  }

+  private getConditionTypeOptionsForArray(
+    conditions: FormArray
+  ): TriggerConditionDefinition[] {
+    let cached = this.conditionTypeOptionCache.get(conditions)
+    if (!cached) {
+      cached = this.conditionDefinitions.map((definition) => ({
+        ...definition,
+        disabled: false,
+      }))
+      this.conditionTypeOptionCache.set(conditions, cached)
+    }
+    return cached
+  }
+
  private createTriggerField(
    trigger: WorkflowTrigger,
    emitEvent: boolean = false
--- a/src-ui/src/app/components/common/input/select/select.component.html
+++ b/src-ui/src/app/components/common/input/select/select.component.html
@@ -1,66 +1,68 @@
 <div class="mb-3 paperless-input-select" [class.disabled]="disabled">
  <div class="row">
-    <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
-      @if (title) {
-        <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
-      }
-      @if (removable) {
-        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <i-bs  name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+    @if (title || removable) {
+      <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
+        @if (title) {
+          <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
+        }
+        @if (removable) {
+          <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
+            <i-bs  name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+            </button>
+        }
+      </div>
+    }
+    <div [class.col-md-9]="horizontal">
+      <div [class.input-group]="allowCreateNew || showFilter" [class.is-invalid]="error">
+        <ng-select name="inputId" [(ngModel)]="value"
+          [disabled]="disabled"
+          [style.color]="textColor"
+          [style.background]="backgroundColor"
+          [class.private]="isPrivate"
+          [clearable]="allowNull"
+          [items]="items"
+          [addTag]="allowCreateNew && addItemRef"
+          addTagText="Add item"
+          i18n-addTagText="Used for both types, correspondents, storage paths"
+          [placeholder]="placeholder"
+          [notFoundText]="notFoundText"
+          [multiple]="multiple"
+          [bindLabel]="bindLabel"
+          bindValue="id"
+          (change)="onChange(value)"
+          (search)="onSearch($event)"
+          (focus)="clearLastSearchTerm()"
+          (clear)="clearLastSearchTerm()"
+          (blur)="onBlur()">
+          <ng-template ng-option-tmp let-item="item">
+              <span [title]="item[bindLabel]">{{item[bindLabel]}}</span>
+          </ng-template>
+        </ng-select>
+        @if (allowCreateNew && !hideAddButton) {
+          <button class="btn btn-outline-secondary" type="button" (click)="addItem()" [disabled]="disabled">
+            <i-bs width="1.2em" height="1.2em" name="plus"></i-bs>
+          </button>
+        }
+        @if (showFilter) {
+          <button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="isPrivate || this.value === null" title="{{ filterButtonTitle }}">
+            <i-bs width="1.2em" height="1.2em" name="filter"></i-bs>
          </button>
        }
      </div>
-      <div [class.col-md-9]="horizontal">
-        <div [class.input-group]="allowCreateNew || showFilter" [class.is-invalid]="error">
-          <ng-select name="inputId" [(ngModel)]="value"
-            [disabled]="disabled"
-            [style.color]="textColor"
-            [style.background]="backgroundColor"
-            [class.private]="isPrivate"
-            [clearable]="allowNull"
-            [items]="items"
-            [addTag]="allowCreateNew && addItemRef"
-            addTagText="Add item"
-            i18n-addTagText="Used for both types, correspondents, storage paths"
-            [placeholder]="placeholder"
-            [notFoundText]="notFoundText"
-            [multiple]="multiple"
-            [bindLabel]="bindLabel"
-            bindValue="id"
-            (change)="onChange(value)"
-            (search)="onSearch($event)"
-            (focus)="clearLastSearchTerm()"
-            (clear)="clearLastSearchTerm()"
-            (blur)="onBlur()">
-            <ng-template ng-option-tmp let-item="item">
-                <span [title]="item[bindLabel]">{{item[bindLabel]}}</span>
-            </ng-template>
-          </ng-select>
-          @if (allowCreateNew && !hideAddButton) {
-            <button class="btn btn-outline-secondary" type="button" (click)="addItem()" [disabled]="disabled">
-              <i-bs width="1.2em" height="1.2em" name="plus"></i-bs>
-            </button>
-          }
-          @if (showFilter) {
-            <button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="isPrivate || this.value === null" title="{{ filterButtonTitle }}">
-              <i-bs width="1.2em" height="1.2em" name="filter"></i-bs>
-            </button>
-          }
-        </div>
-        <div class="invalid-feedback">
-          {{error}}
-        </div>
-        @if (hint) {
-          <small class="form-text text-muted">{{hint}}</small>
-        }
-        @if (getSuggestions().length > 0) {
-          <small>
-            <span i18n>Suggestions:</span>&nbsp;
-            @for (s of getSuggestions(); track s) {
-              <a (click)="value = s.id; onChange(value)" [routerLink]="[]">{{s.name}}</a>&nbsp;
-            }
-          </small>
-        }
+      <div class="invalid-feedback">
+        {{error}}
      </div>
+      @if (hint) {
+        <small class="form-text text-muted">{{hint}}</small>
+      }
+      @if (getSuggestions().length > 0) {
+        <small>
+          <span i18n>Suggestions:</span>&nbsp;
+          @for (s of getSuggestions(); track s) {
+            <a (click)="value = s.id; onChange(value)" [routerLink]="[]">{{s.name}}</a>&nbsp;
+          }
+        </small>
+      }
    </div>
  </div>
+</div>
--- a/src-ui/src/app/components/common/input/tags/tags.component.html
+++ b/src-ui/src/app/components/common/input/tags/tags.component.html
@@ -1,8 +1,10 @@
 <div class="mb-3 paperless-input-select paperless-input-tags" [class.disabled]="disabled" [class.pb-3]="getSuggestions().length > 0">
  <div class="row">
-    <div class="d-flex align-items-center" [class.col-md-3]="horizontal">
-      <label class="form-label" [class.mb-md-0]="horizontal" for="tags">{{title}}</label>
-    </div>
+    @if (title) {
+      <div class="d-flex align-items-center" [class.col-md-3]="horizontal">
+        <label class="form-label" [class.mb-md-0]="horizontal" for="tags">{{title}}</label>
+      </div>
+    }
    <div class="position-relative" [class.col-md-9]="horizontal">
      <div class="input-group flex-nowrap">
        <ng-select #tagSelect name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="value"