paperless-ngx/src-ui/src/app/components/document-detail/document-detail.component.html

<pngx-page-header [(title)]="title">
  @if (archiveContentRenderType === ContentRenderType.PDF && !useNativePdfViewer) {
    @if (previewNumPages) {
      <div class="input-group input-group-sm d-none d-md-flex">
        <div class="input-group-text" i18n>Page</div>
          <input class="form-control flex-grow-0 w-auto" type="number" min="1" [max]="previewNumPages" [(ngModel)]="previewCurrentPage" />
        <div class="input-group-text" i18n>of {{previewNumPages}}</div>
      </div>
    }
    <div class="input-group input-group-sm me-md-5 d-none d-md-flex">
      <button class="btn btn-outline-secondary" (click)="decreaseZoom()" i18n>-</button>
      <select class="form-select" (change)="onZoomSelect($event)">
        @for (setting of zoomSettings; track setting) {
          <option [value]="setting" [selected]="previewZoomSetting === setting">
            {{ getZoomSettingTitle(setting) }}
          </option>
        }
      </select>
      <button class="btn btn-outline-secondary" (click)="increaseZoom()" i18n>+</button>
    </div>
  }

  <button type="button" class="btn btn-sm btn-outline-danger me-md-4" (click)="delete()" [disabled]="!userIsOwner" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }">
    <i-bs width="1.2em" height="1.2em" name="trash"></i-bs><span class="d-none d-lg-inline ps-1" i18n>Delete</span>
  </button>

  <div class="btn-group">
    <a [href]="downloadUrl" class="btn btn-sm btn-outline-primary">
      <i-bs width="1.2em" height="1.2em" name="download"></i-bs><span class="d-none d-lg-inline ps-1" i18n>Download</span>
    </a>

    @if (metadata?.has_archive_version) {
      <div class="btn-group" ngbDropdown role="group">
        <button class="btn btn-sm btn-outline-primary dropdown-toggle" ngbDropdownToggle></button>
        <div class="dropdown-menu shadow" ngbDropdownMenu>
          <a ngbDropdownItem [href]="downloadOriginalUrl" i18n>Download original</a>
        </div>
      </div>
    }
  </div>

  <div class="ms-auto" ngbDropdown>
    <button class="btn btn-sm btn-outline-primary" id="actionsDropdown" ngbDropdownToggle>
      <i-bs name="three-dots"></i-bs>
      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Actions</ng-container></div>
    </button>
    <div ngbDropdownMenu aria-labelledby="actionsDropdown" class="shadow">
      <button ngbDropdownItem (click)="redoOcr()" [disabled]="!userCanEdit">
        <i-bs width="1em" height="1em" name="arrow-counterclockwise"></i-bs>&nbsp;<span i18n>Redo OCR</span>
      </button>

      <button ngbDropdownItem (click)="moreLike()">
        <i-bs width="1em" height="1em" name="diagram-3"></i-bs>&nbsp;<span i18n>More like this</span>
      </button>

      <button ngbDropdownItem (click)="splitDocument()" [disabled]="archiveContentRenderType !== ContentRenderType.PDF || previewNumPages === 1">
        <i-bs width="1em" height="1em" name="scissors"></i-bs>&nbsp;<span i18n>Split</span>
      </button>

      <button ngbDropdownItem (click)="rotateDocument()" [disabled]="!userIsOwner || originalContentRenderType !== ContentRenderType.PDF">
        <i-bs name="arrow-clockwise"></i-bs>&nbsp;<ng-container i18n>Rotate</ng-container>
      </button>

      <button ngbDropdownItem (click)="deletePages()" [disabled]="!userIsOwner || originalContentRenderType !== ContentRenderType.PDF || previewNumPages === 1">
        <i-bs name="file-earmark-minus"></i-bs>&nbsp;<ng-container i18n>Delete page(s)</ng-container>
      </button>
    </div>
  </div>

  <pngx-custom-fields-dropdown
    *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.CustomField }"
    [documentId]="documentId"
    [disabled]="!userIsOwner"
    [existingFields]="document?.custom_fields"
    (created)="refreshCustomFields()"
    (added)="addField($event)">
  </pngx-custom-fields-dropdown>

  <pngx-share-links-dropdown [documentId]="documentId" [hasArchiveVersion]="!!document?.archived_file_name" [disabled]="!userIsOwner" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.ShareLink }"></pngx-share-links-dropdown>
</pngx-page-header>

<div class="row">
  <div class="col-md-6 col-xl-4 mb-4">

    <form [formGroup]='documentForm' (ngSubmit)="save()">

      <div class="btn-toolbar mb-1 border-bottom">
        <div class="btn-group pb-3">
          <button type="button" class="btn btn-sm btn-outline-secondary" i18n-title title="Close" (click)="close()">
            <i-bs width="1.2em" height="1.2em" name="x"></i-bs>
          </button>
          <button type="button" class="btn btn-sm btn-outline-secondary" i18n-title title="Previous" (click)="previousDoc()" [disabled]="!hasPrevious()">
            <i-bs width="1.2em" height="1.2em" name="arrow-left"></i-bs>
          </button>
          <button type="button" class="btn btn-sm btn-outline-secondary"  i18n-title title="Next" (click)="nextDoc()" [disabled]="!hasNext()">
            <i-bs width="1.2em" height="1.2em" name="arrow-right"></i-bs>
          </button>
        </div>

        <ng-container *ngTemplateOutlet="saveButtons"></ng-container>
      </div>

      <ul ngbNav #nav="ngbNav" class="nav-underline flex-nowrap flex-md-wrap overflow-auto" (navChange)="onNavChange($event)" [(activeId)]="activeNavID">
        <li [ngbNavItem]="DocumentDetailNavIDs.Details">
          <a ngbNavLink i18n>Details</a>
          <ng-template ngbNavContent>
            <div>
              <pngx-input-text #inputTitle i18n-title title="Title" formControlName="title" [horizontal]="true" (keyup)="titleKeyUp($event)" [error]="error?.title"></pngx-input-text>
              <pngx-input-number i18n-title title="Archive serial number" [error]="error?.archive_serial_number" [horizontal]="true" formControlName='archive_serial_number'></pngx-input-number>
              <pngx-input-date i18n-title title="Date created" formControlName="created_date" [suggestions]="suggestions?.dates" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event)"
              [error]="error?.created_date"></pngx-input-date>
              <pngx-input-select [items]="correspondents" i18n-title title="Correspondent" formControlName="correspondent" [allowNull]="true" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event, DataType.Correspondent)"
              (createNew)="createCorrespondent($event)" [suggestions]="suggestions?.correspondents" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }"></pngx-input-select>
              <pngx-input-select [items]="documentTypes" i18n-title title="Document type" formControlName="document_type" [allowNull]="true" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event, DataType.DocumentType)"
              (createNew)="createDocumentType($event)" [suggestions]="suggestions?.document_types" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }"></pngx-input-select>
              <pngx-input-select [items]="storagePaths" i18n-title title="Storage path" formControlName="storage_path" [allowNull]="true" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event, DataType.StoragePath)"
              (createNew)="createStoragePath($event)" [suggestions]="suggestions?.storage_paths" i18n-placeholder placeholder="Default" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }"></pngx-input-select>
              <pngx-input-tags formControlName="tags" [suggestions]="suggestions?.tags" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event, DataType.Tag)" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }"></pngx-input-tags>
              @for (fieldInstance of document?.custom_fields; track fieldInstance.field; let i = $index) {
                <div [formGroup]="customFieldFormFields.controls[i]">
                  @switch (getCustomFieldFromInstance(fieldInstance)?.data_type) {
                    @case (CustomFieldDataType.String) {
                      <pngx-input-text formControlName="value"
                      [title]="getCustomFieldFromInstance(fieldInstance)?.name"
                      [removable]="userIsOwner"
                      (removed)="removeField(fieldInstance)"
                      [horizontal]="true"
                      [error]="getCustomFieldError(i)"></pngx-input-text>
                    }
                    @case (CustomFieldDataType.Date) {
                      <pngx-input-date formControlName="value"
                      [title]="getCustomFieldFromInstance(fieldInstance)?.name"
                      [removable]="userIsOwner"
                      (removed)="removeField(fieldInstance)"
                      [horizontal]="true"
                      [error]="getCustomFieldError(i)"></pngx-input-date>
                    }
                    @case (CustomFieldDataType.Integer) {
                      <pngx-input-number formControlName="value"
                      [title]="getCustomFieldFromInstance(fieldInstance)?.name"
                      [removable]="userIsOwner"
                      (removed)="removeField(fieldInstance)"
                      [horizontal]="true"
                      [showAdd]="false"
                      [error]="getCustomFieldError(i)"></pngx-input-number>
                    }
                    @case (CustomFieldDataType.Float) {
                      <pngx-input-number formControlName="value"
                      [title]="getCustomFieldFromInstance(fieldInstance)?.name"
                      [removable]="userIsOwner"
                      (removed)="removeField(fieldInstance)"
                      [horizontal]="true"
                      [showAdd]="false"
                      [step]=".1"
                      [error]="getCustomFieldError(i)"></pngx-input-number>
                    }
                    @case (CustomFieldDataType.Monetary) {
                      <pngx-input-monetary formControlName="value"
                      [title]="getCustomFieldFromInstance(fieldInstance)?.name"
                      [removable]="userIsOwner"
                      (removed)="removeField(fieldInstance)"
                      [horizontal]="true"
                      [error]="getCustomFieldError(i)"></pngx-input-monetary>
                    }
                    @case (CustomFieldDataType.Boolean) {
                      <pngx-input-check formControlName="value"
                      [title]="getCustomFieldFromInstance(fieldInstance)?.name"
                      [removable]="userIsOwner"
                      (removed)="removeField(fieldInstance)"
                      [horizontal]="true"></pngx-input-check>
                    }
                    @case (CustomFieldDataType.Url) {
                      <pngx-input-url formControlName="value"
                      [title]="getCustomFieldFromInstance(fieldInstance)?.name"
                      [removable]="userIsOwner"
                      (removed)="removeField(fieldInstance)"
                      [horizontal]="true"
                      [error]="getCustomFieldError(i)"></pngx-input-url>
                    }
                    @case (CustomFieldDataType.DocumentLink) {
                      <pngx-input-document-link formControlName="value"
                      [title]="getCustomFieldFromInstance(fieldInstance)?.name"
                      [parentDocumentID]="documentId"
                      [removable]="userIsOwner"
                      (removed)="removeField(fieldInstance)"
                      [horizontal]="true"
                      [error]="getCustomFieldError(i)"></pngx-input-document-link>
                    }
                  }
                </div>
              }
            </div>

            <div class="d-flex border-top pt-3">
              <ng-container *ngTemplateOutlet="saveButtons"></ng-container>
            </div>
          </ng-template>
        </li>

        <li [ngbNavItem]="DocumentDetailNavIDs.Content">
          <a ngbNavLink i18n>Content</a>
          <ng-template ngbNavContent>
            <div>
              <textarea class="form-control" id="content" rows="20" formControlName='content' [class.rtl]="isRTL"></textarea>
            </div>
          </ng-template>
        </li>

        <li [ngbNavItem]="DocumentDetailNavIDs.Metadata">
          <a ngbNavLink i18n>Metadata</a>
          <ng-template ngbNavContent>

            @if (document) {
              <table class="table table-borderless">
                <tbody>
                  <tr>
                    <td i18n>Date modified</td>
                    <td>{{document.modified | customDate}}</td>
                  </tr>
                  <tr>
                    <td i18n>Date added</td>
                    <td>{{document.added | customDate}}</td>
                  </tr>
                  <tr>
                    <td i18n>Media filename</td>
                    <td>{{metadata?.media_filename}}</td>
                  </tr>
                  <tr>
                    <td i18n>Original filename</td>
                    <td>{{metadata?.original_filename}}</td>
                  </tr>
                  <tr>
                    <td i18n>Original MD5 checksum</td>
                    <td>{{metadata?.original_checksum}}</td>
                  </tr>
                  <tr>
                    <td i18n>Original file size</td>
                    <td>{{metadata?.original_size | fileSize}}</td>
                  </tr>
                  <tr>
                    <td i18n>Original mime type</td>
                    <td>{{metadata?.original_mime_type}}</td>
                  </tr>
                  @if (metadata?.has_archive_version) {
                    <tr>
                      <td i18n>Archive MD5 checksum</td>
                      <td>{{metadata?.archive_checksum}}</td>
                    </tr>
                  }
                  @if (metadata?.has_archive_version) {
                    <tr>
                      <td i18n>Archive file size</td>
                      <td>{{metadata?.archive_size | fileSize}}</td>
                    </tr>
                  }
                </tbody>
              </table>
            }

            @if (metadata?.original_metadata?.length > 0) {
              <pngx-metadata-collapse i18n-title title="Original document metadata" [metadata]="metadata.original_metadata"></pngx-metadata-collapse>
            }
            @if (metadata?.archive_metadata?.length > 0) {
              <pngx-metadata-collapse i18n-title title="Archived document metadata" [metadata]="metadata.archive_metadata"></pngx-metadata-collapse>
            }

          </ng-template>
        </li>

        <li [ngbNavItem]="DocumentDetailNavIDs.Preview" class="d-md-none">
          <a ngbNavLink i18n>Preview</a>
          @if (!pdfPreview.offsetParent) {
            <ng-template ngbNavContent>
              <div class="position-relative">
                <ng-container *ngTemplateOutlet="previewContent"></ng-container>
              </div>
            </ng-template>
          }
        </li>

        @if (notesEnabled) {
          <li [ngbNavItem]="DocumentDetailNavIDs.Notes">
            <a class="text-nowrap" ngbNavLink i18n>Notes @if (document?.notes.length) {
              <span class="badge text-bg-secondary ms-1">{{document.notes.length}}</span>
            }</a>
            <ng-template ngbNavContent>
              <pngx-document-notes [documentId]="documentId" [notes]="document?.notes" [addDisabled]="!userCanEdit" (updated)="notesUpdated($event)"></pngx-document-notes>
            </ng-template>
          </li>
        }

        @if (historyEnabled) {
          <li [ngbNavItem]="DocumentDetailNavIDs.History">
            <a ngbNavLink i18n>History</a>
            <ng-template ngbNavContent>
              <div class="mb-3">
                <pngx-document-history [documentId]="documentId"></pngx-document-history>
              </div>
            </ng-template>
          </li>
        }

        @if (showPermissions) {
          <li [ngbNavItem]="DocumentDetailNavIDs.Permissions">
            <a ngbNavLink i18n>Permissions</a>
            <ng-template ngbNavContent>
              <div class="mb-3">
                <pngx-permissions-form [users]="users" formControlName="permissions_form"></pngx-permissions-form>
              </div>
            </ng-template>
          </li>
        }
      </ul>

      <div [ngbNavOutlet]="nav" class="mt-3"></div>

    </form>
  </div>

  <div class="col-md-6 col-xl-8 mb-3 d-none d-md-block position-relative" #pdfPreview>
    <ng-container *ngTemplateOutlet="previewContent"></ng-container>
  </div>

</div>

<ng-template #saveButtons>
  <div class="btn-group pb-3 ms-auto">
    <ng-container *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
      <button type="submit" class="order-3 btn btn-sm btn-primary" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Save</button>
      @if (hasNext()) {
        <button type="button" class="order-1 btn btn-sm btn-outline-primary" (click)="saveEditNext()" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Save &amp; next</button>
      }
      @if (!hasNext()) {
        <button type="button" class="order-2 btn btn-sm btn-outline-primary" (click)="save(true)" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Save &amp; close</button>
      }
    </ng-container>
    <button type="button" class="order-0 btn btn-sm btn-outline-secondary" (click)="discard()" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Discard</button>
  </div>
</ng-template>

<ng-template #previewContent>
  @if (!metadata) {
    <div class="w-100 h-100 d-flex align-items-center justify-content-center">
      <div>
        <div class="spinner-border spinner-border-sm me-2" role="status"></div>
        <ng-container i18n>Loading...</ng-container>
      </div>
    </div>
  } @else {
    @switch (archiveContentRenderType) {
      @case (ContentRenderType.PDF) {
        @if (!useNativePdfViewer) {
          <div class="preview-sticky pdf-viewer-container">
            <pdf-viewer
              [src]="{ url: previewUrl, password: password }"
              [original-size]="false"
              [show-borders]="true"
              [show-all]="true"
              [(page)]="previewCurrentPage"
              [zoom-scale]="previewZoomScale"
              [zoom]="previewZoomSetting"
              (error)="onError($event)"
              (after-load-complete)="pdfPreviewLoaded($event)">
            </pdf-viewer>
          </div>
        } @else {
          <object [data]="previewUrl | safeUrl" class="preview-sticky" width="100%"></object>
        }
      }
      @case (ContentRenderType.Text) {
        <div class="preview-sticky bg-light p-3 overflow-auto" width="100%">{{previewText}}</div>
      }
      @case (ContentRenderType.Image) {
        <div class="preview-sticky">
          <img [src]="previewUrl | safeUrl" width="100%" height="100%" alt="{{title}}" />
        </div>
      }
      @case (ContentRenderType.Other) {
        <object [data]="previewUrl | safeUrl" class="preview-sticky" width="100%"></object>
      }
    }
    @if (requiresPassword) {
      <div class="password-prompt">
        <form>
          <input autocomplete="" autofocus="true" class="form-control" i18n-placeholder placeholder="Enter Password" type="password" (keyup)="onPasswordKeyUp($event)" />
        </form>
      </div>
    }
  }
</ng-template>