Merge pull request #2028 from paperless-ngx/feature-truncate-content

Feature: speed up frontend by truncating content
2025-04-02 13:45:10 -05:00 · 2022-12-09 09:20:06 -08:00 · 2022-12-09 09:20:06 -08:00 · 5e15ede849
commit 5e15ede849
parent 48ef8eca80 2c1333a75f
13 changed files with 37 additions and 37 deletions
--- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
@ -11,9 +11,9 @@
      </tr>
    </thead>
    <tbody>
-      <tr *ngFor="let doc of documents" (click)="openDocumentsService.openDocument(doc)">
-        <td>{{doc.created_date | customDate}}</td>
-        <td>{{doc.title | documentTitle}}<app-tag [tag]="t" *ngFor="let t of doc.tags$ | async" class="ms-1" (click)="clickTag(t); $event.stopPropagation();"></app-tag></td>
+      <tr *ngFor="let doc of documents">
+        <td><a routerLink="/documents/{{doc.id}}" class="d-block text-dark text-decoration-none">{{doc.created_date | customDate}}</a></td>
+        <td><a routerLink="/documents/{{doc.id}}" class="d-block text-dark text-decoration-none">{{doc.title | documentTitle}}<app-tag [tag]="t" *ngFor="let t of doc.tags$ | async" class="ms-1" (click)="clickTag(t, $event)"></app-tag></a></td>
      </tr>
    </tbody>
  </table>
--- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.scss
+++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.scss
@ -7,6 +7,6 @@ th:first-child {
  width: 25%;
 }

-tbody tr {
+tbody app-tag {
  cursor: pointer;
 }
--- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts
+++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts
@ -72,7 +72,9 @@ export class SavedViewWidgetComponent implements OnInit, OnDestroy {
    }
  }

-  clickTag(tag: PaperlessTag) {
+  clickTag(tag: PaperlessTag, event: MouseEvent) {
+    event.preventDefault()
+
    this.list.quickFilter([
      { rule_type: FILTER_HAS_TAGS_ALL, value: tag.id.toString() },
    ])
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@ -184,7 +184,7 @@ export class DocumentDetailComponent
              this.openDocumentService.getOpenDocument(this.documentId)
            )
          } else {
-            this.openDocumentService.openDocument(doc, false)
+            this.openDocumentService.openDocument(doc)
            this.updateComponent(doc)
          }

--- 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
@ -37,7 +37,7 @@
                <use xlink:href="assets/bootstrap-icons.svg#diagram-3"/>
              </svg>&nbsp;<span class="d-none d-md-inline" i18n>More like this</span>
            </a>
-            <a (click)="openDocumentsService.openDocument(document)" class="btn btn-sm btn-outline-secondary">
+            <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary">
              <svg class="sidebaricon" fill="currentColor" class="sidebaricon">
                <use xlink:href="assets/bootstrap-icons.svg#pencil"/>
              </svg>&nbsp;<span class="d-none d-md-inline" i18n>Edit</span>
--- 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
@ -10,9 +10,6 @@ import { PaperlessDocument } from 'src/app/data/paperless-document'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
-import { OpenDocumentsService } from 'src/app/services/open-documents.service'
-import { DocumentListViewService } from 'src/app/services/document-list-view.service'
-import { FILTER_FULLTEXT_MORELIKE } from 'src/app/data/filter-rule-type'
 import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'

@Component({
@ -26,8 +23,7 @@ import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
 export class DocumentCardLargeComponent implements OnInit {
  constructor(
    private documentService: DocumentService,
-    private settingsService: SettingsService,
-    public openDocumentsService: OpenDocumentsService
+    private settingsService: SettingsService
  ) {}

  @Input()
@ -119,6 +115,9 @@ export class DocumentCardLargeComponent implements OnInit {
  }

  get contentTrimmed() {
-    return this.document.content.substr(0, 500)
+    return (
+      this.document.content.substr(0, 500) +
+      (this.document.content.length > 500 ? '...' : '')
+    )
  }
 }
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@ -67,7 +67,7 @@
      </div>
      <div class="d-flex justify-content-between align-items-center">
        <div class="btn-group w-100">
-          <a (click)="openDocumentsService.openDocument(document)" class="btn btn-sm btn-outline-secondary" title="Edit" i18n-title>
+          <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary" title="Edit" i18n-title>
            <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/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
@ -11,7 +11,6 @@ import { PaperlessDocument } from 'src/app/data/paperless-document'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
-import { OpenDocumentsService } from 'src/app/services/open-documents.service'
 import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'

@Component({
@ -25,8 +24,7 @@ import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
 export class DocumentCardSmallComponent implements OnInit {
  constructor(
    private documentService: DocumentService,
-    private settingsService: SettingsService,
-    public openDocumentsService: OpenDocumentsService
+    private settingsService: SettingsService
  ) {}

  @Input()
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@ -179,7 +179,7 @@
          </ng-container>
        </td>
        <td>
-          <a (click)="openDocumentsService.openDocument(d)" title="Edit document" i18n-title style="overflow-wrap: anywhere;">{{d.title | documentTitle}}</a>
+          <a routerLink="/documents/{{d.id}}" title="Edit document" i18n-title style="overflow-wrap: anywhere;">{{d.title | documentTitle}}</a>
          <app-tag [tag]="t" *ngFor="let t of d.tags$ | async" class="ms-1" clickable="true" linkTitle="Filter by tag" i18n-linkTitle (click)="clickTag(t.id);$event.stopPropagation()"></app-tag>
        </td>
        <td class="d-none d-xl-table-cell">
--- a/src-ui/src/app/services/document-list-view.service.ts
+++ b/src-ui/src/app/services/document-list-view.service.ts
@ -213,7 +213,8 @@ export class DocumentListViewService {
        this.currentPageSize,
        activeListViewState.sortField,
        activeListViewState.sortReverse,
-        activeListViewState.filterRules
+        activeListViewState.filterRules,
+        { truncate_content: true }
      )
      .subscribe({
        next: (result) => {
--- a/src-ui/src/app/services/open-documents.service.ts
+++ b/src-ui/src/app/services/open-documents.service.ts
@ -6,7 +6,6 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { ConfirmDialogComponent } from 'src/app/components/common/confirm-dialog/confirm-dialog.component'
 import { Observable, Subject, of } from 'rxjs'
 import { first } from 'rxjs/operators'
-import { Router } from '@angular/router'

@Injectable({
  providedIn: 'root',
@ -16,8 +15,7 @@ export class OpenDocumentsService {

  constructor(
    private documentService: DocumentService,
-    private modalService: NgbModal,
-    private router: Router
+    private modalService: NgbModal
  ) {
    if (sessionStorage.getItem(OPEN_DOCUMENT_SERVICE.DOCUMENTS)) {
      try {
@ -57,39 +55,28 @@ export class OpenDocumentsService {
    return this.openDocuments.find((d) => d.id == id)
  }

-  openDocument(
-    doc: PaperlessDocument,
-    navigate: boolean = true
-  ): Observable<boolean> {
+  openDocument(doc: PaperlessDocument): Observable<boolean> {
    if (this.openDocuments.find((d) => d.id == doc.id) == null) {
      if (this.openDocuments.length == this.MAX_OPEN_DOCUMENTS) {
        // at max, ensure changes arent lost
        const docToRemove = this.openDocuments[this.MAX_OPEN_DOCUMENTS - 1]
        const closeObservable = this.closeDocument(docToRemove)
        closeObservable.pipe(first()).subscribe((closed) => {
-          if (closed) this.finishOpenDocument(doc, navigate)
+          if (closed) this.finishOpenDocument(doc)
        })
        return closeObservable
      } else {
        // not at max
-        this.finishOpenDocument(doc, navigate)
-      }
-    } else {
-      // doc is open, just maybe navigate
-      if (navigate) {
-        this.router.navigate(['documents', doc.id])
+        this.finishOpenDocument(doc)
      }
    }
    return of(true)
  }

-  private finishOpenDocument(doc: PaperlessDocument, navigate: boolean) {
+  private finishOpenDocument(doc: PaperlessDocument) {
    this.openDocuments.unshift(doc)
    this.dirtyDocuments.delete(doc.id)
    this.save()
-    if (navigate) {
-      this.router.navigate(['documents', doc.id])
-    }
  }

  setDirty(doc: PaperlessDocument, dirty: boolean) {
--- a/src/documents/serialisers.py
+++ b/src/documents/serialisers.py
@ -234,6 +234,12 @@ class DocumentSerializer(DynamicFieldsModelSerializer):
        else:
            return None

+    def to_representation(self, instance):
+        doc = super().to_representation(instance)
+        if self.truncate_content:
+            doc["content"] = doc.get("content")[0:550]
+        return doc
+
    def update(self, instance, validated_data):
        if "created_date" in validated_data and "created" not in validated_data:
            new_datetime = datetime.datetime.combine(
@ -247,6 +253,11 @@ class DocumentSerializer(DynamicFieldsModelSerializer):
        super().update(instance, validated_data)
        return instance

+    def __init__(self, *args, **kwargs):
+        self.truncate_content = kwargs.pop("truncate_content", False)
+
+        super().__init__(*args, **kwargs)
+
    class Meta:
        model = Document
        depth = 1
--- a/src/documents/views.py
+++ b/src/documents/views.py
@ -226,9 +226,11 @@ class DocumentViewSet(
            fields = fields_param.split(",")
        else:
            fields = None
+        truncate_content = self.request.query_params.get("truncate_content", "False")
        serializer_class = self.get_serializer_class()
        kwargs.setdefault("context", self.get_serializer_context())
        kwargs.setdefault("fields", fields)
+        kwargs.setdefault("truncate_content", truncate_content.lower() in ["true", "1"])
        return serializer_class(*args, **kwargs)

    def update(self, request, *args, **kwargs):