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

<app-page-header [(title)]="title">
    <button type="button" class="btn btn-sm btn-outline-danger mr-2" (click)="delete()">
        <svg class="buttonicon" fill="currentColor">
            <use xlink:href="assets/bootstrap-icons.svg#trash" />
        </svg>
        <span class="d-none d-lg-inline"> Delete</span>
    </button>

    <div class="btn-group mr-2">

        <a [href]="downloadUrl" class="btn btn-sm btn-outline-primary">
            <svg class="buttonicon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#download" />
            </svg>
            <span class="d-none d-lg-inline"> Download</span>
        </a>

        <div class="btn-group" ngbDropdown role="group" *ngIf="metadata?.has_archive_version">
            <button class="btn btn-sm btn-outline-primary dropdown-toggle-split" ngbDropdownToggle></button>
            <div class="dropdown-menu shadow" ngbDropdownMenu>
                <a ngbDropdownItem [href]="downloadOriginalUrl">Download original</a>
            </div>
        </div>

    </div>


    <button type="button" class="btn btn-sm btn-outline-primary" (click)="close()">
        <svg class="buttonicon" fill="currentColor">
            <use xlink:href="assets/bootstrap-icons.svg#x" />
        </svg>
        <span class="d-none d-lg-inline"> Close</span>
    </button>
</app-page-header>


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

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

            <ul ngbNav #nav="ngbNav" class="nav-tabs">
                <li [ngbNavItem]="1">
                    <a ngbNavLink>Details</a>
                    <ng-template ngbNavContent>

                        <app-input-text title="Title" formControlName="title"></app-input-text>
                        <div class="form-group">
                            <label for="archive_serial_number">Archive Serial Number</label>
                            <input type="number" class="form-control" id="archive_serial_number"
                                formControlName='archive_serial_number'>
                        </div>
                        <app-input-date-time titleDate="Date created" formControlName="created"></app-input-date-time>
                        <app-input-select [items]="correspondents" title="Correspondent" formControlName="correspondent"
                            allowNull="true" (createNew)="createCorrespondent()"></app-input-select>
                        <app-input-select [items]="documentTypes" title="Document type" formControlName="document_type"
                            allowNull="true" (createNew)="createDocumentType()"></app-input-select>
                        <app-input-tags formControlName="tags" title="Tags"></app-input-tags>

                    </ng-template>
                </li>

                <li [ngbNavItem]="2">
                    <a ngbNavLink>Content</a>
                    <ng-template ngbNavContent>
                        <div class="form-group">
                            <textarea class="form-control" id="content" rows="20" formControlName='content'></textarea>
                        </div>
                    </ng-template>
                </li>

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

                        <table class="table table-borderless">
                            <tbody>
                                <tr>
                                    <td>Date modified</td>
                                    <td>{{document.modified | date:'medium'}}</td>
                                </tr>
                                <tr>
                                    <td>Date added</td>
                                    <td>{{document.added | date:'medium'}}</td>
                                </tr>
                                <tr>
                                    <td>Media filename</td>
                                    <td>{{metadata?.media_filename}}</td>
                                </tr>
                                <tr>
                                    <td>Original MD5 Checksum</td>
                                    <td>{{metadata?.original_checksum}}</td>
                                </tr>
                                <tr>
                                    <td>Original file size</td>
                                    <td>{{metadata?.original_size | fileSize}}</td>
                                </tr>
                                <tr>
                                    <td>Original mime type</td>
                                    <td>{{metadata?.original_mime_type}}</td>
                                </tr>
                                <tr *ngIf="metadata?.has_archive_version">
                                    <td>Archive MD5 Checksum</td>
                                    <td>{{metadata?.archive_checksum}}</td>
                                </tr>
                                <tr *ngIf="metadata?.has_archive_version">
                                    <td>Archive file size</td>
                                    <td>{{metadata?.archive_size | fileSize}}</td>
                                </tr>
                            </tbody>
                        </table>

                        <h6 *ngIf="metadata?.original_metadata.length > 0">
                            <button type="button" class="btn btn-outline-secondary btn-sm mr-2"
                                (click)="expandOriginalMetadata = !expandOriginalMetadata" aria-controls="collapseExample">
                                <svg class="buttonicon" fill="currentColor" *ngIf="!expandOriginalMetadata">
                                    <use xlink:href="assets/bootstrap-icons.svg#caret-down" />
                                </svg>
                                <svg class="buttonicon" fill="currentColor" *ngIf="expandOriginalMetadata">
                                    <use xlink:href="assets/bootstrap-icons.svg#caret-up" />
                                </svg>
                            </button>
                            Original document metadata
                        </h6>

                        <div #collapse="ngbCollapse" [(ngbCollapse)]="!expandOriginalMetadata">
                            <table class="table table-borderless">
                                <tbody>
                                    <tr *ngFor="let m of metadata?.original_metadata">
                                        <td>{{m.prefix}}:{{m.key}}</td>
                                        <td>{{m.value}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <h6 *ngIf="metadata?.has_archive_version && metadata?.archive_metadata.length > 0">
                            <button type="button" class="btn btn-outline-secondary btn-sm mr-2"
                                (click)="expandArchivedMetadata = !expandArchivedMetadata" aria-controls="collapseExample">
                                <svg class="buttonicon" fill="currentColor" *ngIf="!expandArchivedMetadata">
                                    <use xlink:href="assets/bootstrap-icons.svg#caret-down" />
                                </svg>
                                <svg class="buttonicon" fill="currentColor" *ngIf="expandArchivedMetadata">
                                    <use xlink:href="assets/bootstrap-icons.svg#caret-up" />
                                </svg>
                            </button>
                            Archived document metadata
                        </h6>

                        <div #collapse="ngbCollapse" [(ngbCollapse)]="!expandArchivedMetadata">
                            <table class="table table-borderless">
                                <tbody>
                                    <tr *ngFor="let m of metadata?.archive_metadata">
                                        <td>{{m.prefix}}:{{m.key}}</td>
                                        <td>{{m.value}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                    </ng-template>
                </li>
            </ul>

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

            <button type="button" class="btn btn-outline-secondary" (click)="discard()">Discard</button>&nbsp;
            <button type="button" class="btn btn-outline-primary" (click)="saveEditNext()" *ngIf="hasNext()">Save & edit
                next</button>&nbsp;
            <button type="submit" class="btn btn-primary">Save</button>&nbsp;
        </form>
    </div>

    <div class="col-md-6 col-xl-8 mb-3">
      <div class="pdf-viewer-container">
        <pdf-viewer [src]="previewUrl" [original-size]="false" [show-borders]="false"></pdf-viewer>
      </div>
    </div>
</div>