Merge branch 'dev' into feature-websockets-status

src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html

@@ -9,7 +9,7 @@
       <p *ngIf="message">{{message}}</p>
     </div>
     <div class="modal-footer">
-      <button type="button" class="btn btn-outline-dark" (click)="cancelClicked()" [disabled]="!buttonsEnabled">Cancel</button>
+      <button type="button" class="btn btn-outline-dark" (click)="cancelClicked()" [disabled]="!buttonsEnabled" i18n>Cancel</button>
       <button type="button" class="btn" [class]="btnClass" (click)="confirmClicked.emit()" [disabled]="!confirmButtonEnabled || !buttonsEnabled">
         {{btnCaption}}
         <span *ngIf="!confirmButtonEnabled"> ({{seconds}})</span>

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

@@ -1,4 +1,4 @@
-  <div class="btn-group" ngbDropdown role="group">
+  <div class="btn-group w-100" ngbDropdown role="group">
   <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="dateBefore || dateAfter ? 'btn-primary' : 'btn-outline-primary'">
     {{title}}
   </button>

src-ui/src/app/components/common/edit-dialog/edit-dialog.component.ts

@@ -27,6 +27,8 @@ export abstract class EditDialogComponent<T extends ObjectWithId> implements OnI
 
   networkActive = false
 
+  closeEnabled = false
+
   error = null
 
   abstract getForm(): FormGroup
@@ -37,6 +39,11 @@ export abstract class EditDialogComponent<T extends ObjectWithId> implements OnI
     if (this.object != null) {
       this.objectForm.patchValue(this.object)
     }
+
+    // wait to enable close button so it doesnt steal focus from input since its the first clickable element in the DOM
+    setTimeout(() => {
+      this.closeEnabled = true
+    });
   }
 
   getCreateTitle() {
@@ -86,7 +93,6 @@ export abstract class EditDialogComponent<T extends ObjectWithId> implements OnI
     serverResponse.subscribe(result => {
       this.activeModal.close()
       this.success.emit(result)
-      this.networkActive = false
     }, error => {
       this.error = error.error
       this.networkActive = false

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

@@ -1,11 +1,9 @@
-<div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown">
+<div class="btn-group w-100" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown">
   <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'">
-    <div class="d-none d-md-inline">{{title}}</div>
-    <div class="d-inline-block d-md-none">
-      <svg class="toolbaricon" fill="currentColor">
-        <use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" />
-      </svg>
-    </div>
+    <svg class="toolbaricon" fill="currentColor">
+      <use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" />
+    </svg>
+    <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
     <ng-container *ngIf="!editing && selectionModel.selectionSize() > 0">
       <div class="badge bg-secondary text-light rounded-pill badge-corner">
         {{selectionModel.selectionSize()}}
@@ -20,7 +18,7 @@
         </div>
       </div>
       <div *ngIf="selectionModel.items" class="items">
-        <ng-container *ngFor="let item of (editing ? selectionModel.itemsSorted : selectionModel.items) | filter: filterText">
+        <ng-container *ngFor="let item of selectionModel.itemsSorted | filter: filterText">
           <app-toggleable-dropdown-button *ngIf="allowSelectNone || item.id" [item]="item" [state]="selectionModel.get(item.id)" (toggle)="selectionModel.toggle(item.id)"></app-toggleable-dropdown-button>
         </ng-container>
       </div>

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

@@ -19,8 +19,13 @@ export class FilterableDropdownSelectionModel {
   items: MatchingModel[] = []
 
   get itemsSorted(): MatchingModel[] {
+    // TODO: this is getting called very often
     return this.items.sort((a,b) => {
-      if (this.getNonTemporary(a.id) == ToggleableItemState.NotSelected && this.getNonTemporary(b.id) != ToggleableItemState.NotSelected) {
+      if (a.id == null && b.id != null) {
+        return -1
+      } else if (a.id != null && b.id == null) {
+        return 1
+      } else if (this.getNonTemporary(a.id) == ToggleableItemState.NotSelected && this.getNonTemporary(b.id) != ToggleableItemState.NotSelected) {
         return 1
       } else if (this.getNonTemporary(a.id) != ToggleableItemState.NotSelected && this.getNonTemporary(b.id) == ToggleableItemState.NotSelected) {
         return -1

src-ui/src/app/components/common/input/abstract-input.ts

@@ -1,10 +1,13 @@
-import { Directive, Input, OnInit } from '@angular/core';
+import { Directive, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { v4 as uuidv4 } from 'uuid';
 
 @Directive()
 export class AbstractInputComponent<T> implements OnInit, ControlValueAccessor {
 
+  @ViewChild("inputField")
+  inputField: ElementRef
+
   constructor() { }
 
   onChange = (newValue: T) => {};
@@ -24,6 +27,12 @@ export class AbstractInputComponent<T> implements OnInit, ControlValueAccessor {
     this.disabled = isDisabled;
   }
 
+  focus() {
+    if (this.inputField && this.inputField.nativeElement) {
+      this.inputField.nativeElement.focus()
+    }
+  }
+
   @Input()
   title: string
 

src-ui/src/app/components/common/input/number/number.component.ts

@@ -29,7 +29,7 @@ export class NumberComponent extends AbstractInputComponent<number> {
         if (results.count > 0) {
           this.value = results.results[0].archive_serial_number + 1
         } else {
-          this.value + 1
+          this.value = 1
         }
         this.onChange(this.value)
       }

src-ui/src/app/components/common/input/select/select.component.html

@@ -6,9 +6,11 @@
       [style.color]="textColor"
       [style.background]="backgroundColor"
       [clearable]="allowNull"
+      [items]="items"
+      bindLabel="name"
+      bindValue="id"
       (change)="onChange(value)"
       (blur)="onTouched()">
-      <ng-option *ngFor="let i of items" [value]="i.id">{{i.name}}</ng-option>
     </ng-select>
 
     <div *ngIf="showPlusButton()" class="input-group-append">

src-ui/src/app/components/common/input/tags/tags.component.html

@@ -1,5 +1,5 @@
 <div class="form-group paperless-input-select paperless-input-tags">
-  <label for="tags">Tags</label>
+  <label for="tags" i18n>Tags</label>
 
   <div class="input-group flex-nowrap">
     <ng-select name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="displayValue"

src-ui/src/app/components/common/input/text/text.component.html

@@ -1,6 +1,6 @@
 <div class="form-group">
   <label [for]="inputId">{{title}}</label>
-  <input type="text" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)">
+  <input #inputField type="text" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)">
   <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
   <div class="invalid-feedback">
     {{error}}

src-ui/src/app/components/common/page-header/page-header.component.html

@@ -1,9 +1,9 @@
-<div class="row pt-3 pb-1 mb-3 border-bottom align-items-center" >
+<div class="row pt-3 pb-3 pb-md-1 mb-3 border-bottom align-items-center">
   <div class="col-md text-truncate">
     <p class="h2 text-truncate" style="line-height: 1.4">{{title}}</p>
     <p *ngIf="subTitle" class="h5 text-truncate" style="line-height: 1.4">{{subTitle}}</p>
   </div>
-  <div class="btn-toolbar col-auto">
+  <div class="btn-toolbar col col-md-auto">
     <ng-content></ng-content>
   </div>
 </div>