Merge branch 'dev' into feature-bulk-editor

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss

@@ -1,5 +1,6 @@
 .result-content {
   color: darkgray;
+  overflow-wrap: anywhere;
 }
 
 .doc-img {

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

@@ -31,7 +31,7 @@
     </div>
     <div class="card-footer">
 
-      <div class="d-flex justify-content-between align-items-center ml-n2">
+      <div class="d-flex justify-content-between align-items-center mx-n2">
         <div class="btn-group">
           <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary" title="Edit">
             <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
@@ -51,7 +51,7 @@
             </svg>
           </a>
         </div>
-        <small class="text-muted">{{document.created | date}}</small>
+        <small class="text-muted pl-1">{{document.created | date}}</small>
       </div>
 
     </div>

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

@@ -77,7 +77,7 @@
 
 </app-page-header>
 
-<div class="w-100 mb-4">
+<div class="w-100 mb-2 mb-sm-4">
   <app-filter-editor [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
 </div>
 
@@ -135,7 +135,7 @@
       </td>
       <td>
         <a routerLink="/documents/{{d.id}}" title="Edit document" style="overflow-wrap: anywhere;">{{d.title | documentTitle}}</a>
-        <app-tag [tag]="t" *ngFor="let t of d.tags$ | async" class="ml-1" clickable="true" linkTitle="Filter by tag" (click)="clickTag(t)"></app-tag>
+        <app-tag [tag]="t" *ngFor="let t of d.tags$ | async" class="ml-1" clickable="true" linkTitle="Filter by tag" (click)="clickTag(t.id)"></app-tag>
       </td>
       <td class="d-none d-xl-table-cell">
         <ng-container *ngIf="d.document_type">
@@ -154,5 +154,5 @@
 
 
 <div class=" m-n2 row" *ngIf="displayMode == 'smallCards'">
-  <app-document-card-small [selected]="list.isSelected(d)" (selectedChange)="list.setSelected(d, $event)"  [document]="d" *ngFor="let d of list.documents" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)"></app-document-card-small>
+  <app-document-card-small [selected]="list.isSelected(d)" (selectedChange)="list.setSelected(d, $event)" [document]="d" *ngFor="let d of list.documents" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)"></app-document-card-small>
 </div>

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

@@ -2,4 +2,26 @@
 
 .table-row-selected {
   background-color: $primaryFaded;
-}
+}
+
+$paperless-card-breakpoints: (
+  0: 2, // xs
+  768px: 3, //md
+  992px: 4, //lg
+  1200px: 5, //xl
+  1400px: 6, // xxl
+  1600px: 7,
+  1800px: 8,
+  2000px: 9
+);
+
+.row-cols-paperless-cards {
+  @each $width, $n_cols in $paperless-card-breakpoints {
+    @media(min-width: $width) {
+      > * {
+        flex: 0 0 auto;
+        width: 100% / $n_cols;
+      }
+    }
+  }
+}

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

@@ -98,6 +98,7 @@ export class DocumentListComponent implements OnInit {
 
   saveViewConfigAs() {
     let modal = this.modalService.open(SaveViewConfigDialogComponent, {backdrop: 'static'})
+    modal.componentInstance.defaultName = this.filterEditor.generateFilterName()
     modal.componentInstance.saveClicked.subscribe(formValue => {
       let savedView = {
         name: formValue.name,

src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
@@ -14,6 +14,19 @@ export class SaveViewConfigDialogComponent implements OnInit {
   @Output()
   public saveClicked = new EventEmitter()
 
+  _defaultName = ""
+
+  get defaultName() {
+    return this._defaultName
+  }
+
+  @Input()
+  set defaultName(value: string) {
+    this._defaultName = value
+    this.saveViewConfigForm.patchValue({name: value})
+  }
+  
+
   saveViewConfigForm = new FormGroup({
     name: new FormControl(''),
     showInSideBar: new FormControl(false),