added paperless ui

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

@@ -0,0 +1,5 @@
+.doc-img {
+  object-fit: cover;
+  object-position: top;
+
+}

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

@@ -0,0 +1,26 @@
+<div class="col-auto mb-3">
+  <div class="card h-100 bg-light" style="width: 14rem">
+    <div style="height: 10rem; overflow: hidden;">
+      <img [src]="getThumbUrl()" class="card-img doc-img"/>
+    </div>
+    <div class="card-body">
+      <p class="card-title">{{document.correspondent ? document.correspondent.name + ': ' : ''}}{{document.title}} <app-tag [tag]="t" *ngFor="let t of document.tags" class="ml-1"></app-tag></p>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="btn-group">
+          <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary">
+            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+            </svg>
+          </a>
+          <a [href]="getDownloadUrl()" class="btn btn-sm btn-outline-secondary">
+            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-download" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
+              <path fill-rule="evenodd" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
+            </svg>
+          </a>
+        </div>
+        <small class="text-muted">{{document.created | date}}</small>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DocumentCardSmallComponent } from './document-card-small.component';
+
+describe('DocumentCardSmallComponent', () => {
+  let component: DocumentCardSmallComponent;
+  let fixture: ComponentFixture<DocumentCardSmallComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DocumentCardSmallComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DocumentCardSmallComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,27 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { PaperlessDocument } from 'src/app/data/paperless-document';
+import { DocumentService } from 'src/app/services/rest/document.service';
+
+@Component({
+  selector: 'app-document-card-small',
+  templateUrl: './document-card-small.component.html',
+  styleUrls: ['./document-card-small.component.css']
+})
+export class DocumentCardSmallComponent implements OnInit {
+
+  constructor(private documentService: DocumentService) { }
+
+  @Input()
+  document: PaperlessDocument
+
+  ngOnInit(): void {
+  }
+
+  getThumbUrl() {
+    return this.documentService.getThumbUrl(this.document.id)
+  }
+
+  getDownloadUrl() {
+    return this.documentService.getDownloadUrl(this.document.id)
+  }
+}