UI for matching api

src-ui/src/app/components/manage/correspondent-list/correspondent-edit-dialog/correspondent-edit-dialog.component.html

@@ -6,15 +6,12 @@
     </button>
   </div>
   <div class="modal-body">
-    <div class="form-group">
-      <label for="name">Name</label>
-      <input id="name" class="form-control" formControlName="name" required ngbAutofocus>
-    </div>
-    <div class="form-group form-check">
-      <input type="checkbox" class="form-check-input" id="automatic_classification"
-        formControlName="automatic_classification">
-      <label class="form-check-label" for="automatic_classification">Automatic Classification</label>
-    </div>
+    
+    <app-input-text title="Name" formControlName="name"></app-input-text>
+    <app-input-text title="Match" formControlName="match"></app-input-text>
+    <app-input-select title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></app-input-select>
+    <app-input-check title="Case insensitive" formControlName="is_insensitive"></app-input-check>
+
   </div>
   <div class="modal-footer">
     <button type="button" class="btn btn-outline-dark" (click)="cancel()">Cancel</button>

src-ui/src/app/components/manage/correspondent-list/correspondent-edit-dialog/correspondent-edit-dialog.component.ts

@@ -20,7 +20,9 @@ export class CorrespondentEditDialogComponent extends EditDialogComponent<Paperl
   getForm(): FormGroup {
     return new FormGroup({
       name: new FormControl(''),
-      automatic_classification: new FormControl(true)
+      matching_algorithm: new FormControl(1),
+      match: new FormControl(""),
+      is_insensitive: new FormControl(true)
     })
   }  
 

src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.html

@@ -10,7 +10,7 @@
     <thead>
     <tr>
       <th scope="col">Name</th>
-      <th scope="col">Automatic Classification</th>
+      <th scope="col">Matching</th>
       <th scope="col">Document count</th>
       <th scope="col">Last correspondence</th>
       <th scope="col">Actions</th>
@@ -19,7 +19,7 @@
     <tbody>
     <tr *ngFor="let correspondent of data">
       <td scope="row">{{ correspondent.name }}</td>
-      <td scope="row">{{ correspondent.automatic_classification }}</td>
+      <td scope="row">{{ getMatching(correspondent) }}</td>
       <td scope="row">{{ correspondent.document_count }}</td>
       <td scope="row">{{ correspondent.last_correspondence | date }}</td>
         <td scope="row">

src-ui/src/app/components/manage/document-type-list/document-type-edit-dialog/document-type-edit-dialog.component.html

@@ -6,15 +6,12 @@
       </button>
     </div>
     <div class="modal-body">
-      <div class="form-group">
-        <label for="name">Name</label>
-        <input id="name" class="form-control" formControlName="name" required ngbAutofocus>
-      </div>
-      <div class="form-group form-check">
-        <input type="checkbox" class="form-check-input" id="automatic_classification"
-          formControlName="automatic_classification">
-        <label class="form-check-label" for="automatic_classification">Automatic Classification</label>
-      </div>
+      
+      <app-input-text title="Name" formControlName="name"></app-input-text>
+      <app-input-text title="Match" formControlName="match"></app-input-text>
+      <app-input-select title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></app-input-select>
+      <app-input-check title="Case insensitive" formControlName="is_insensitive"></app-input-check>
+
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-outline-dark" (click)="cancel()">Cancel</button>

src-ui/src/app/components/manage/document-type-list/document-type-edit-dialog/document-type-edit-dialog.component.ts

@@ -20,7 +20,9 @@ export class DocumentTypeEditDialogComponent extends EditDialogComponent<Paperle
   getForm(): FormGroup {
     return new FormGroup({
       name: new FormControl(''),
-      automatic_classification: new FormControl(true)
+      matching_algorithm: new FormControl(1),
+      match: new FormControl(""),
+      is_insensitive: new FormControl(true)
     })
   }
 

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

@@ -11,20 +11,20 @@
   <thead>
     <tr>
       <th scope="col">Name</th>
-      <th scope="col">Automatic Classification</th>
+      <th scope="col">Matching</th>
       <th scope="col">Document count</th>
       <th scope="col">Actions</th>
     </tr>
   </thead>
   <tbody>
-    <tr *ngFor="let correspondent of data">
-      <td scope="row">{{ correspondent.name }}</td>
-      <td scope="row">{{ correspondent.automatic_classification }}</td>
-      <td scope="row">{{ correspondent.document_count }}</td>
+    <tr *ngFor="let document_type of data">
+      <td scope="row">{{ document_type.name }}</td>
+      <td scope="row">{{ getMatching(document_type) }}</td>
+      <td scope="row">{{ document_type.document_count }}</td>
       <td scope="row">
         <div class="btn-group">
-          <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(correspondent)">Edit</button>
-          <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(correspondent)">Delete</button>
+          <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(document_type)">Edit</button>
+          <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(document_type)">Delete</button>
         </div>
       </td>
     </tr>

src-ui/src/app/components/manage/generic-list/generic-list.component.ts

@@ -1,5 +1,6 @@
 import { Directive, OnInit } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { MatchingModel } from 'src/app/data/matching-model';
 import { ObjectWithId } from 'src/app/data/object-with-id';
 import { AbstractPaperlessService } from 'src/app/services/rest/abstract-paperless-service';
 import { DeleteDialogComponent } from '../../common/delete-dialog/delete-dialog.component';
@@ -19,6 +20,16 @@ export abstract class GenericListComponent<T extends ObjectWithId> implements On
 
   public collectionSize = 0
 
+  getMatching(o: MatchingModel) {
+    if (o.matching_algorithm == MatchingModel.MATCH_AUTO) {
+      return "Automatic"
+    } else if (o.match && o.match.length > 0) {
+      return `${o.match} (${MatchingModel.MATCHING_ALGORITHMS.find(a => a.id == o.matching_algorithm).name})`
+    } else {
+      return "-"
+    }
+  }
+
   ngOnInit(): void {
     this.reloadData()
   }

src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.html

@@ -6,26 +6,12 @@
       </button>
     </div>
     <div class="modal-body">
-      <div class="form-group">
-        <label for="name">Name</label>
-        <input id="name" class="form-control" formControlName="name" required ngbAutofocus>
-      </div>
-      <div class="form-group">
-        <label for="colour">Colour</label>
-        <select id="colour" class="form-control" required formControlName="colour" [style.color]="getColor(objectForm.value.colour).textColor" [style.background]="getColor(objectForm.value.colour).value">
-          <option *ngFor="let colour of getColours()" [ngValue]="colour.id" class="form-control">{{colour.name}}</option>
-        </select>
-      </div>
-      <div class="form-group form-check">
-        <input type="checkbox" class="form-check-input" id="is_inbox_tag"
-          formControlName="is_inbox_tag">
-        <label class="form-check-label" for="is_inbox_tag">Inbox Tag</label>
-      </div>
-      <div class="form-group form-check">
-        <input type="checkbox" class="form-check-input" id="automatic_classification"
-          formControlName="automatic_classification">
-        <label class="form-check-label" for="automatic_classification">Automatic Classification</label>
-      </div>
+      <app-input-text title="Name" formControlName="name"></app-input-text>
+      <app-input-select title="Colour" [items]="getColours()" formControlName="colour" [textColor]="getColor(objectForm.value.colour).textColor" [backgroundColor]="getColor(objectForm.value.colour).value"></app-input-select>
+      <app-input-check title="Inbox tag" formControlName="is_inbox_tag" hint="Inbox tags are automatically assigned to all consumed documents."></app-input-check>
+      <app-input-text title="Match" formControlName="match"></app-input-text>
+      <app-input-select title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></app-input-select>
+      <app-input-check title="Case insensitive" formControlName="is_insensitive"></app-input-check>
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-outline-dark" (click)="cancel()">Cancel</button>

src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.ts

@@ -22,7 +22,9 @@ export class TagEditDialogComponent extends EditDialogComponent<PaperlessTag> {
       name: new FormControl(''),
       colour: new FormControl(1),
       is_inbox_tag: new FormControl(false),
-      automatic_classification: new FormControl(true)
+      matching_algorithm: new FormControl(1),
+      match: new FormControl(""),
+      is_insensitive: new FormControl(true)
     })
   }
 

src-ui/src/app/components/manage/tag-list/tag-list.component.html

@@ -11,7 +11,7 @@
       <tr>
         <th scope="col">Name</th>
         <th scope="col">Colour</th>
-        <th scope="col">Automatic Classification</th>
+        <th scope="col">Matching</th>
         <th scope="col">Document count</th>
         <th scope="col">Actions</th>
       </tr>
@@ -20,7 +20,7 @@
       <tr *ngFor="let tag of data">
           <td scope="row">{{ tag.name }}</td>
           <td scope="row"><span class="badge" [style.color]="getColor(tag.colour).textColor" [style.background-color]="getColor(tag.colour).value">{{ getColor(tag.colour).name }}</span></td>
-          <td scope="row">{{ tag.automatic_classification }}</td>
+          <td scope="row">{{ getMatching(tag) }}</td>
           <td scope="row">{{ tag.document_count }}</td>
           <td scope="row">
             <div class="btn-group">