Merge branch 'dev' into feature-frontend-task-queue

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html

@@ -16,13 +16,11 @@
   <div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="list-group list-group-flush">
       <div *ngIf="!editing && multiple" class="list-group-item d-flex">
-        <div class="btn-group btn-group-xs btn-group-toggle flex-fill" ngbRadioGroup [(ngModel)]="selectionModel.logicalOperator" (change)="selectionModel.toggleOperator()" [disabled]="!operatorToggleEnabled">
-          <label ngbButtonLabel class="btn btn-outline-primary">
-            <input ngbButton type="radio" class="btn-check" name="logicalOperator" value="and" i18n> All
-          </label>
-          <label ngbButtonLabel class="btn btn-outline-primary">
-            <input ngbButton type="radio" class="btn-check" name="logicalOperator" value="or" i18n> Any
-          </label>
+        <div class="btn-group btn-group-xs flex-fill">
+          <input [(ngModel)]="selectionModel.logicalOperator" [disabled]="!operatorToggleEnabled" (ngModelChange)="selectionModel.toggleOperator()" type="radio" class="btn-check" id="logicalOperatorAnd" value="and">
+          <label class="btn btn-outline-primary" for="logicalOperatorAnd" i18n>All</label>
+          <input [(ngModel)]="selectionModel.logicalOperator" [disabled]="!operatorToggleEnabled" (ngModelChange)="selectionModel.toggleOperator()" type="radio" class="btn-check" id="logicalOperatorOr" value="or">
+          <label class="btn btn-outline-primary" for="logicalOperatorOr" i18n>Any</label>
         </div>
       </div>
       <div class="list-group-item">

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html

@@ -66,23 +66,30 @@
   </div>
   <div class="col-auto ms-auto mb-2 mb-xl-0 d-flex">
     <div class="btn-group btn-group-sm me-2">
-      <button type="button" [disabled]="awaitingDownload" class="btn btn-outline-primary btn-sm" (click)="downloadSelected()">
-        <svg *ngIf="!awaitingDownload" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
-          <use xlink:href="assets/bootstrap-icons.svg#download" />
-        </svg>
-        <div *ngIf="awaitingDownload" class="spinner-border spinner-border-sm" role="status">
-          <span class="visually-hidden">Preparing download...</span>
-        </div>
-        &nbsp;
-        <ng-container i18n>Download</ng-container>
-      </button>
-      <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
-        <button [disabled]="awaitingDownload" class="btn btn-outline-primary btn-sm dropdown-toggle-split" ngbDropdownToggle></button>
-        <div class="dropdown-menu shadow" ngbDropdownMenu>
-          <button ngbDropdownItem i18n (click)="downloadSelected('originals')">Download originals</button>
+
+      <div ngbDropdown class="me-2 d-flex">
+        <button class="btn btn-sm btn-outline-primary" id="dropdownSelect" ngbDropdownToggle>
+          <svg class="toolbaricon" fill="currentColor">
+            <use xlink:href="assets/bootstrap-icons.svg#three-dots" />
+          </svg>
+          <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Actions</ng-container></div>
+        </button>
+        <div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
+          <button ngbDropdownItem [disabled]="awaitingDownload" (click)="downloadSelected()" i18n>
+            Download
+            <div *ngIf="awaitingDownload" class="spinner-border spinner-border-sm" role="status">
+              <span class="visually-hidden">Preparing download...</span>
+            </div>
+          </button>
+          <button ngbDropdownItem [disabled]="awaitingDownload" (click)="downloadSelected('originals')" i18n>
+            Download originals
+            <div *ngIf="awaitingDownload" class="spinner-border spinner-border-sm" role="status">
+              <span class="visually-hidden">Preparing download...</span>
+            </div>
+          </button>
+          <button ngbDropdownItem (click)="redoOcrSelected()" i18n>Redo OCR</button>
         </div>
       </div>
-    </div>
 
     <button type="button" class="btn btn-sm btn-outline-danger" (click)="applyDelete()">
       <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts

@@ -379,4 +379,19 @@ export class BulkEditorComponent {
         this.awaitingDownload = false
       })
   }
+
+  redoOcrSelected() {
+    let modal = this.modalService.open(ConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.title = $localize`Redo OCR confirm`
+    modal.componentInstance.messageBold = $localize`This operation will permanently redo OCR for ${this.list.selected.size} selected document(s).`
+    modal.componentInstance.message = $localize`This operation cannot be undone.`
+    modal.componentInstance.btnClass = 'btn-danger'
+    modal.componentInstance.btnCaption = $localize`Proceed`
+    modal.componentInstance.confirmClicked.subscribe(() => {
+      modal.componentInstance.buttonsEnabled = false
+      this.executeBulkOperation(modal, 'redo_ocr', {})
+    })
+  }
 }

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html

@@ -11,7 +11,7 @@
       </div>
 
       <div class="tags d-flex flex-column text-end position-absolute me-1 fs-6">
-        <app-tag *ngFor="let t of getTagsLimited$() | async" [tag]="t" (click)="clickTag.emit(t.id);$event.stopPropagation()" [clickable]="true" linkTitle="Filter by tag" i18n-linkTitle></app-tag>
+        <app-tag *ngFor="let t of getTagsLimited$() | async" [tag]="t" (click)="clickTag.emit(t.id);$event.stopPropagation()" [clickable]="true" linkTitle="Toggle tag filter" i18n-linkTitle></app-tag>
         <div *ngIf="moreTags">
           <span class="badge badge-secondary">+ {{moreTags}}</span>
         </div>
@@ -21,21 +21,21 @@
     <div class="card-body p-2">
       <p class="card-text">
         <ng-container *ngIf="document.correspondent">
-          <a title="Filter by correspondent" i18n-title (click)="clickCorrespondent.emit(document.correspondent);$event.stopPropagation()" class="fw-bold btn-link">{{(document.correspondent$ | async)?.name}}</a>:
+          <a title="Toggle correspondent filter" i18n-title (click)="clickCorrespondent.emit(document.correspondent);$event.stopPropagation()" class="fw-bold btn-link">{{(document.correspondent$ | async)?.name}}</a>:
         </ng-container>
         {{document.title | documentTitle}}
       </p>
     </div>
     <div class="card-footer pt-0 pb-2 px-2">
       <div class="list-group list-group-flush border-0 pt-1 pb-2 card-info">
-        <button *ngIf="document.document_type" type="button" class="list-group-item list-group-item-action bg-transparent ps-0 p-1 border-0" title="Filter by document type" i18n-title
+        <button *ngIf="document.document_type" type="button" class="list-group-item list-group-item-action bg-transparent ps-0 p-1 border-0" title="Toggle document type filter" i18n-title
          (click)="clickDocumentType.emit(document.document_type);$event.stopPropagation()">
           <svg class="metadata-icon me-2 text-muted bi bi-file-earmark" viewBox="0 0 16 16" fill="currentColor">
             <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
           </svg>
           <small>{{(document.document_type$ | async)?.name}}</small>
         </button>
-        <button *ngIf="document.storage_path" type="button" class="list-group-item list-group-item-action bg-transparent ps-0 p-1 border-0" title="Filter by storage path" i18n-title
+        <button *ngIf="document.storage_path" type="button" class="list-group-item list-group-item-action bg-transparent ps-0 p-1 border-0" title="Toggle storage path filter" i18n-title
          (click)="clickStoragePath.emit(document.storage_path);$event.stopPropagation()">
           <svg class="metadata-icon me-2 text-muted bi bi-folder" viewBox="0 0 16 16" fill="currentColor">
             <path d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>

src-ui/src/app/components/document-list/document-list.component.html

@@ -13,23 +13,21 @@
       <button ngbDropdownItem (click)="list.selectAll()" i18n>Select all</button>
     </div>
   </div>
-
-  <div class="btn-group btn-group-toggle flex-fill" ngbRadioGroup [(ngModel)]="displayMode"
-    (ngModelChange)="saveDisplayMode()">
-    <label ngbButtonLabel class="btn-outline-primary btn-sm">
-      <input ngbButton type="radio" class="btn-check btn-sm" value="details">
+  <div class="btn-group flex-fill" role="group">
+    <input type="radio" class="btn-check" [(ngModel)]="displayMode" value="details" (ngModelChange)="saveDisplayMode()" id="displayModeDetails">
+    <label for="displayModeDetails" class="btn btn-outline-primary btn-sm">
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#list-ul" />
       </svg>
     </label>
-    <label ngbButtonLabel class="btn-outline-primary btn-sm">
-      <input ngbButton type="radio" class="btn-check btn-sm" value="smallCards">
+    <input type="radio" class="btn-check" [(ngModel)]="displayMode" value="smallCards" (ngModelChange)="saveDisplayMode()" id="displayModeSmall">
+    <label for="displayModeSmall" class="btn btn-outline-primary btn-sm">
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#grid" />
       </svg>
     </label>
-    <label ngbButtonLabel class="btn-outline-primary btn-sm">
-      <input ngbButton type="radio" class="btn-check btn-sm" value="largeCards">
+    <input type="radio" class="btn-check" [(ngModel)]="displayMode" value="largeCards" (ngModelChange)="saveDisplayMode()" id="displayModeLarge">
+    <label for="displayModeLarge" class="btn btn-outline-primary btn-sm">
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#hdd-stack" />
       </svg>
@@ -39,15 +37,15 @@
   <div ngbDropdown class="btn-group ms-2 flex-fill">
     <button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle i18n>Sort</button>
     <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="shadow dropdown-menu-right">
-      <div class="w-100 d-flex btn-group-toggle pb-2 mb-1 border-bottom" ngbRadioGroup [(ngModel)]="listSort">
-        <label ngbButtonLabel class="btn-outline-primary btn-sm mx-2 flex-fill">
-          <input ngbButton type="radio" class="btn btn-check btn-sm" [value]="false">
+      <div class="w-100 d-flex pb-2 mb-1 border-bottom">
+        <input type="radio" class="btn-check" [value]="false" [(ngModel)]="listSortReverse" id="listSortReverseFalse">
+        <label class="btn btn-outline-primary btn-sm mx-2 flex-fill" for="listSortReverseFalse">
           <svg class="toolbaricon" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#sort-alpha-down" />
           </svg>
         </label>
-        <label ngbButtonLabel class="btn-outline-primary btn-sm me-2 flex-fill">
-          <input ngbButton type="radio" class="btn btn-check btn-sm" [value]="true">
+        <input type="radio" class="btn-check" [value]="true" [(ngModel)]="listSortReverse" id="listSortReverseTrue">
+        <label class="btn btn-outline-primary btn-sm me-2 flex-fill" for="listSortReverseTrue">
           <svg class="toolbaricon" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#sort-alpha-up-alt" />
           </svg>

src-ui/src/app/components/document-list/document-list.component.ts

@@ -71,11 +71,11 @@ export class DocumentListComponent implements OnInit, OnDestroy {
       : DOCUMENT_SORT_FIELDS
   }
 
-  set listSort(reverse: boolean) {
+  set listSortReverse(reverse: boolean) {
     this.list.sortReverse = reverse
   }
 
-  get listSort(): boolean {
+  get listSortReverse(): boolean {
     return this.list.sortReverse
   }
 
@@ -229,22 +229,22 @@ export class DocumentListComponent implements OnInit, OnDestroy {
 
   clickTag(tagID: number) {
     this.list.selectNone()
-    this.filterEditor.addTag(tagID)
+    this.filterEditor.toggleTag(tagID)
   }
 
   clickCorrespondent(correspondentID: number) {
     this.list.selectNone()
-    this.filterEditor.addCorrespondent(correspondentID)
+    this.filterEditor.toggleCorrespondent(correspondentID)
   }
 
   clickDocumentType(documentTypeID: number) {
     this.list.selectNone()
-    this.filterEditor.addDocumentType(documentTypeID)
+    this.filterEditor.toggleDocumentType(documentTypeID)
   }
 
   clickStoragePath(storagePathID: number) {
     this.list.selectNone()
-    this.filterEditor.addStoragePath(storagePathID)
+    this.filterEditor.toggleStoragePath(storagePathID)
   }
 
   clickMoreLike(documentID: number) {

src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts

@@ -550,29 +550,20 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
     this.updateRules()
   }
 
-  addTag(tagId: number) {
-    this.tagSelectionModel.set(tagId, ToggleableItemState.Selected)
+  toggleTag(tagId: number) {
+    this.tagSelectionModel.toggle(tagId)
   }
 
-  addCorrespondent(correspondentId: number) {
-    this.correspondentSelectionModel.set(
-      correspondentId,
-      ToggleableItemState.Selected
-    )
+  toggleCorrespondent(correspondentId: number) {
+    this.correspondentSelectionModel.toggle(correspondentId)
   }
 
-  addDocumentType(documentTypeId: number) {
-    this.documentTypeSelectionModel.set(
-      documentTypeId,
-      ToggleableItemState.Selected
-    )
+  toggleDocumentType(documentTypeId: number) {
+    this.documentTypeSelectionModel.toggle(documentTypeId)
   }
 
-  addStoragePath(storagePathID: number) {
-    this.storagePathSelectionModel.set(
-      storagePathID,
-      ToggleableItemState.Selected
-    )
+  toggleStoragePath(storagePathID: number) {
+    this.storagePathSelectionModel.toggle(storagePathID)
   }
 
   onTagsDropdownOpen() {

src-ui/src/styles.scss

@@ -121,6 +121,15 @@ svg.logo {
   box-shadow: 0 0 0 0.25rem hsla(var(--pngx-primary), var(--pngx-primary-lightness), var(--pngx-focus-alpha));
 }
 
+.btn-check:checked + .btn-outline-primary,
+.btn-check:active + .btn-outline-primary,
+.btn-outline-primary:active,
+.btn-outline-primary.active,
+.btn-outline-primary.dropdown-toggle.show {
+  background-color: var(--bs-primary);
+  color: var(--pngx-primary-text-contrast) !important;
+}
+
 .form-switch .form-check-input:focus {
   background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#bbb'/></svg>"));
 }