git.ipfire.org Git - thirdparty/paperless-ngx.git/blob

   1 <div class="btn-group w-100" role="group" ngbDropdown #dropdown="ngbDropdown" (openChange)="onOpenChange($event)" [popperOptions]="popperOptions">
   2   <button class="btn btn-sm btn-outline-primary" id="dropdown_toggle" ngbDropdownToggle [disabled]="disabled">
   3     <i-bs name="{{icon}}"></i-bs>
   4     <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
   5     @if (isActive) {
   6       <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge>
   7     }
   8   </button>
   9   <div class="px-3 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}">
  10     <div class="list-group list-group-flush">
  11       @for (element of selectionModel.queries; track element.id; let i = $index) {
  12         <div class="list-group-item px-0 d-flex flex-nowrap">
  13           @switch (element.type) {
  14             @case (CustomFieldQueryComponentType.Atom) {
  15               <ng-container *ngTemplateOutlet="queryAtom; context: { atom: element }"></ng-container>
  16             }
  17             @case (CustomFieldQueryComponentType.Expression) {
  18               <ng-container *ngTemplateOutlet="queryExpression; context: { expression: element }"></ng-container>
  19             }
  20           }
  21         </div>
  22       }
  23     </div>
  24   </div>
  25 </div>
  26
  27 <ng-template #comparisonValueTemplate let-atom="atom">
  28   @if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Date) {
  29     <input class="form-control" placeholder="yyyy-mm-dd"
  30       [(ngModel)]="atom.value"
  31       ngbDatepicker
  32       #d="ngbDatepicker" />
  33     <button class="btn btn-sm btn-outline-secondary rounded-end" (click)="d.toggle()" type="button">
  34       <i-bs name="calendar-event"></i-bs>
  35     </button>
  36   } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Float || getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Integer) {
  37     <input class="w-25 form-control rounded-end" type="number" [(ngModel)]="atom.value" [disabled]="disabled">
  38   } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Boolean) {
  39     <select class="w-25 form-select rounded-end" [(ngModel)]="atom.value" [disabled]="disabled">
  40       <option value="true" i18n>True</option>
  41       <option value="false" i18n>False</option>
  42     </select>
  43   } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Select) {
  44     <ng-select #fieldSelects
  45       class="paperless-input-select rounded-end"
  46       [items]="getSelectOptionsForField(atom.field)"
  47       bindLabel="label"
  48       bindValue="id"
  49       [(ngModel)]="atom.value"
  50       [disabled]="disabled"
  51       (mousedown)="$event.stopImmediatePropagation()"
  52     ></ng-select>
  53   } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.DocumentLink) {
  54     <pngx-input-document-link [(ngModel)]="atom.value" class="w-25 form-select doc-link-select p-0" placeholder="Search docs..." i18n-placeholder [minimal]="true"></pngx-input-document-link>
  55   } @else {
  56     <input class="w-25 form-control rounded-end" type="text" [(ngModel)]="atom.value" [disabled]="disabled">
  57   }
  58 </ng-template>
  59
  60 <ng-template #queryAtom let-atom="atom">
  61   <div class="input-group input-group-sm">
  62     <ng-select
  63       class="paperless-input-select"
  64       [items]="customFields"
  65       [(ngModel)]="atom.field"
  66       [disabled]="disabled"
  67       bindLabel="name"
  68       bindValue="id"
  69       (mousedown)="$event.stopImmediatePropagation()"
  70     ></ng-select>
  71     <select class="w-25 form-select" [(ngModel)]="atom.operator" [disabled]="disabled">
  72       @for (operator of getOperatorsForField(atom.field); track operator.label) {
  73         <option [ngValue]="operator.value">{{operator.label}}</option>
  74       }
  75     </select>
  76     @switch (atom.operator) {
  77       @case (CustomFieldQueryOperator.Exists) {
  78         <select class="w-25 form-select rounded-end" [(ngModel)]="atom.value" [disabled]="disabled">
  79           <option value="true" i18n>True</option>
  80           <option value="false" i18n>False</option>
  81         </select>
  82       }
  83       @case (CustomFieldQueryOperator.IsNull) {
  84         <select class="w-25 form-select rounded-end" [(ngModel)]="atom.value" [disabled]="disabled">
  85           <option value="true" i18n>True</option>
  86           <option value="false" i18n>False</option>
  87         </select>
  88       }
  89       @case (CustomFieldQueryOperator.GreaterThanOrEqual) {
  90         <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
  91       }
  92       @case (CustomFieldQueryOperator.LessThanOrEqual) {
  93         <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
  94       }
  95       @case (CustomFieldQueryOperator.GreaterThan) {
  96         <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
  97       }
  98       @case (CustomFieldQueryOperator.LessThan) {
  99         <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
 100       }
 101       @case (CustomFieldQueryOperator.Contains) {
 102         <pngx-input-document-link [(ngModel)]="atom.value" class="w-25 form-select doc-link-select p-0" placeholder="Search docs..." i18n-placeholder [minimal]="true"></pngx-input-document-link>
 103       }
 104       @case (CustomFieldQueryOperator.In) {
 105         <ng-select
 106           class="paperless-input-select rounded-end"
 107           [items]="getSelectOptionsForField(atom.field)"
 108           bindLabel="label"
 109           bindValue="id"
 110           [(ngModel)]="atom.value"
 111           [disabled]="disabled"
 112           [multiple]="true"
 113           (mousedown)="$event.stopImmediatePropagation()"
 114         ></ng-select>
 115       }
 116       @case (CustomFieldQueryOperator.Exact) {
 117         <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
 118       }
 119       @default {
 120         <input class="w-25 form-control rounded-end" type="text" [(ngModel)]="atom.value" [disabled]="disabled">
 121       }
 122     }
 123     <button class="btn btn-link btn-sm text-danger pe-0" type="button" (click)="removeElement(atom)" [disabled]="disabled">
 124       <i-bs name="x-circle"></i-bs>
 125     </button>
 126   </div>
 127 </ng-template>
 128
 129 <ng-template #queryExpression let-expression="expression">
 130   <div class="d-flex w-100">
 131     <div class="d-flex flex-grow-1 flex-column">
 132       <div class="btn-group btn-group-xs" role="group">
 133         <input [(ngModel)]="expression.operator" type="radio" class="btn-check" id="logicalOperatorOr_{{expression.id}}" name="logicalOperatorOr_{{expression.id}}" value="OR" [disabled]="expression.depth > 0 && expression.value.length < 2">
 134         <label class="btn btn-outline-primary" for="logicalOperatorOr_{{expression.id}}" i18n>Any</label>
 135         <input [(ngModel)]="expression.operator" type="radio" class="btn-check" id="logicalOperatorAnd_{{expression.id}}" name="logicalOperatorAnd_{{expression.id}}" value="AND" [disabled]="expression.depth > 0 && expression.value.length < 2">
 136         <label class="btn btn-outline-primary" for="logicalOperatorAnd_{{expression.id}}" i18n>All</label>
 137         @if (expression.negatable)  {
 138           <input [(ngModel)]="expression.operator" type="radio" class="btn-check" id="logicalOperatorNot_{{expression.id}}" name="logicalOperatorNot_{{expression.id}}" value="NOT">
 139           <label class="btn btn-outline-secondary" for="logicalOperatorNot_{{expression.id}}" i18n>Not</label>
 140         }
 141       </div>
 142       <div class="list-group list-group-flush mb-n2">
 143         @for (element of expression.value; track element.id; let i = $index) {
 144           <div class="list-group-item px-0 d-flex flex-nowrap">
 145             @switch (element.type) {
 146               @case (CustomFieldQueryComponentType.Atom) {
 147                 <ng-container *ngTemplateOutlet="queryAtom; context: { atom: element }"></ng-container>
 148               }
 149               @case (CustomFieldQueryComponentType.Expression) {
 150                 <ng-container *ngTemplateOutlet="queryExpression; context: { expression: element }"></ng-container>
 151               }
 152             }
 153           </div>
 154         }
 155       </div>
 156     </div>
 157     <div class="btn-group-vertical ms-2 ps-2 border-start" role="group" aria-label="Vertical button group">
 158       <button type="button" class="btn btn-sm btn-outline-secondary text-primary" title="Add query" i18n-title (click)="addAtom(expression)" [disabled]="disabled || expression.value.length === CUSTOM_FIELD_QUERY_MAX_ATOMS">
 159         <i-bs name="node-plus"></i-bs>
 160       </button>
 161       <button type="button" class="btn btn-sm btn-outline-secondary text-primary" title="Add expression" i18n-title (click)="addExpression(expression)" [disabled]="disabled || expression.depth === CUSTOM_FIELD_QUERY_MAX_DEPTH">
 162         <i-bs name="braces"></i-bs>
 163       </button>
 164       @if (expression.depth > 0) {
 165         <button type="button" class="btn btn-sm btn-outline-secondary text-danger" (click)="removeElement(expression)" [disabled]="disabled">
 166           <i-bs name="x-circle"></i-bs>
 167         </button>
 168       }
 169     </div>
 170   </div>
 171 </ng-template>