added paperless ui

2025-08-01 18:37:42 -05:00 · 2020-10-27 01:10:18 +01:00
parent e24baf5811
commit 8693bee4ac
173 changed files with 18693 additions and 0 deletions
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.css
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.css
@@ -0,0 +1,11 @@
+.result-content {
+  color: darkgray;
+}
+
+.doc-img {
+  object-fit: cover;
+  object-position: top;
+  height: 100%;
+  position: absolute;
+
+}
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
@@ -0,0 +1,38 @@
+<div class="card mb-3 bg-light">
+  <div class="row no-gutters">
+    <div class="col-md-2 d-none d-lg-block">
+      <img [src]="getThumbUrl()" class="card-img doc-img">
+    </div>
+    <div class="col">
+      <div class="card-body">
+
+        <h5 class="card-title">{{document.title}}<app-tag [tag]="t" *ngFor="let t of document.tags" class="ml-1"></app-tag></h5>
+        <p class="card-text">
+          <app-result-hightlight *ngIf="getDetailsAsHighlight()" class="result-content" [highlights]="getDetailHighlight()"></app-result-hightlight>
+          <span *ngIf="getDetailsAsString()" class="result-content">{{getDetailsString()}}</span>
+        </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>
+              Edit
+            </a>
+            <a type="button" class="btn btn-sm btn-outline-secondary" [href]="getDownloadUrl()">
+              <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>
+              Download
+            </a>
+          </div>
+          <small class="text-muted">{{document.created | date}}</small>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</div>
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DocumentCardLargeComponent } from './document-card-large.component';
+
+describe('DocumentCardLargeComponent', () => {
+  let component: DocumentCardLargeComponent;
+  let fixture: ComponentFixture<DocumentCardLargeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DocumentCardLargeComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DocumentCardLargeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
@@ -0,0 +1,46 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { PaperlessDocument } from 'src/app/data/paperless-document';
+import { PaperlessTag } from 'src/app/data/paperless-tag';
+import { DocumentService } from 'src/app/services/rest/document.service';
+import { SearchResultHighlightedText } from 'src/app/services/rest/search.service';
+
+@Component({
+  selector: 'app-document-card-large',
+  templateUrl: './document-card-large.component.html',
+  styleUrls: ['./document-card-large.component.css']
+})
+export class DocumentCardLargeComponent implements OnInit {
+
+  constructor(private documentService: DocumentService, private sanitizer: DomSanitizer) { }
+
+  @Input()
+  document: PaperlessDocument
+
+  @Input()
+  details: any
+
+  ngOnInit(): void {
+  }
+
+  getDetailsAsString() {
+    if (typeof this.details === 'string') {
+      return this.details.substring(0, 500)
+    }
+  }
+
+  getDetailsAsHighlight() {
+    //TODO: this is not an exact typecheck, can we do better
+    if (this.details instanceof Array) {
+      return this.details
+    }
+  }
+
+  getThumbUrl() {
+    return this.documentService.getThumbUrl(this.document.id)
+  }
+
+  getDownloadUrl() {
+    return this.documentService.getDownloadUrl(this.document.id)
+  }
+}