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 {
  54     <input class="w-25 form-control rounded-end" type="text" [(ngModel)]="atom.value" [disabled]="disabled">
  55   }
  56 </ng-template>
  57
  58 <ng-template #queryAtom let-atom="atom">
  59   <div class="input-group input-group-sm">
  60     <ng-select
  61       class="paperless-input-select"
  62       [items]="customFields"
  63       [(ngModel)]="atom.field"
  64       [disabled]="disabled"
  65       bindLabel="name"
  66       bindValue="id"
  67       (mousedown)="$event.stopImmediatePropagation()"
  68     ></ng-select>
  69     <select class="w-25 form-select" [(ngModel)]="atom.operator" [disabled]="disabled">
  70       @for (operator of getOperatorsForField(atom.field); track operator.label) {
  71         <option [ngValue]="operator.value">{{operator.label}}</option>
  72       }
  73     </select>
  74     @switch (atom.operator) {
  75       @case (CustomFieldQueryOperator.Exists) {
  76         <select class="w-25 form-select rounded-end" [(ngModel)]="atom.value" [disabled]="disabled">
  77           <option value="true" i18n>True</option>
  78           <option value="false" i18n>False</option>
  79         </select>
  80       }
  81       @case (CustomFieldQueryOperator.IsNull) {
  82         <select class="w-25 form-select rounded-end" [(ngModel)]="atom.value" [disabled]="disabled">
  83           <option value="true" i18n>True</option>
  84           <option value="false" i18n>False</option>
  85         </select>
  86       }
  87       @case (CustomFieldQueryOperator.GreaterThanOrEqual) {
  88         <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
  89       }
  90       @case (CustomFieldQueryOperator.LessThanOrEqual) {
  91         <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
  92       }
  93       @case (CustomFieldQueryOperator.GreaterThan) {
  94         <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
  95       }
  96       @case (CustomFieldQueryOperator.LessThan) {
  97         <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
  98       }
  99       @case (CustomFieldQueryOperator.Contains) {
 100         <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>
 101       }
 102       @case (CustomFieldQueryOperator.In) {
 103         <ng-select
 104           class="paperless-input-select rounded-end"
 105           [items]="getSelectOptionsForField(atom.field)"
 106           bindLabel="label"
 107           bindValue="id"
 108           [(ngModel)]="atom.value"
 109           [disabled]="disabled"
 110           [multiple]="true"
 111           (mousedown)="$event.stopImmediatePropagation()"
 112         ></ng-select>
 113       }
 114       @case (CustomFieldQueryOperator.Exact) {
 115         <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
 116       }
 117       @default {
 118         <input class="w-25 form-control rounded-end" type="text" [(ngModel)]="atom.value" [disabled]="disabled">
 119       }
 120     }
 121     <button class="btn btn-link btn-sm text-danger pe-0" type="button" (click)="removeElement(atom)" [disabled]="disabled">
 122       <i-bs name="x-circle"></i-bs>
 123     </button>
 124   </div>
 125 </ng-template>
 126
 127 <ng-template #queryExpression let-expression="expression">
 128   <div class="d-flex w-100">
 129     <div class="d-flex flex-grow-1 flex-column">
 130       <div class="btn-group btn-group-xs" role="group">
 131         <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">
 132         <label class="btn btn-outline-primary" for="logicalOperatorOr_{{expression.id}}" i18n>Any</label>
 133         <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">
 134         <label class="btn btn-outline-primary" for="logicalOperatorAnd_{{expression.id}}" i18n>All</label>
 135         @if (expression.negatable)  {
 136           <input [(ngModel)]="expression.operator" type="radio" class="btn-check" id="logicalOperatorNot_{{expression.id}}" name="logicalOperatorNot_{{expression.id}}" value="NOT">
 137           <label class="btn btn-outline-secondary" for="logicalOperatorNot_{{expression.id}}" i18n>Not</label>
 138         }
 139       </div>
 140       <div class="list-group list-group-flush mb-n2">
 141         @for (element of expression.value; track element.id; let i = $index) {
 142           <div class="list-group-item px-0 d-flex flex-nowrap">
 143             @switch (element.type) {
 144               @case (CustomFieldQueryComponentType.Atom) {
 145                 <ng-container *ngTemplateOutlet="queryAtom; context: { atom: element }"></ng-container>
 146               }
 147               @case (CustomFieldQueryComponentType.Expression) {
 148                 <ng-container *ngTemplateOutlet="queryExpression; context: { expression: element }"></ng-container>
 149               }
 150             }
 151           </div>
 152         }
 153       </div>
 154     </div>
 155     <div class="btn-group-vertical ms-2 ps-2 border-start" role="group" aria-label="Vertical button group">
 156       <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">
 157         <i-bs name="node-plus"></i-bs>
 158       </button>
 159       <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">
 160         <i-bs name="braces"></i-bs>
 161       </button>
 162       @if (expression.depth > 0) {
 163         <button type="button" class="btn btn-sm btn-outline-secondary text-danger" (click)="removeElement(expression)" [disabled]="disabled">
 164           <i-bs name="x-circle"></i-bs>
 165         </button>
 166       }
 167     </div>
 168   </div>
 169 </ng-template>