Addresses #99 entirely.

src-ui/src/app/app.module.ts

@@ -46,6 +46,7 @@ import { StatisticsWidgetComponent } from './components/dashboard/widgets/statis
 import { UploadFileWidgetComponent } from './components/dashboard/widgets/upload-file-widget/upload-file-widget.component';
 import { WidgetFrameComponent } from './components/dashboard/widgets/widget-frame/widget-frame.component';
 import { WelcomeWidgetComponent } from './components/dashboard/widgets/welcome-widget/welcome-widget.component';
+import { YesNoPipe } from './pipes/yes-no.pipe';
 
 @NgModule({
   declarations: [
@@ -84,7 +85,8 @@ import { WelcomeWidgetComponent } from './components/dashboard/widgets/welcome-w
     StatisticsWidgetComponent,
     UploadFileWidgetComponent,
     WidgetFrameComponent,
-    WelcomeWidgetComponent
+    WelcomeWidgetComponent,
+    YesNoPipe
   ],
   imports: [
     BrowserModule,

src-ui/src/app/components/common/input/date-time/date-time.component.html

@@ -3,11 +3,10 @@
       <label for="created_date">{{titleDate}}</label>
       <input type="date" class="form-control" id="created_date" [(ngModel)]="dateValue" (change)="dateOrTimeChanged()">
   </div>
-  <div class="form-group col">
+  <div class="form-group col" *ngIf="titleTime">
       <label for="created_time">{{titleTime}}</label>
       <input type="time" class="form-control" id="created_time" [(ngModel)]="timeValue" (change)="dateOrTimeChanged()">
   </div>
-
 </div>
 
 

src-ui/src/app/components/common/input/date-time/date-time.component.ts

@@ -40,7 +40,7 @@ export class DateTimeComponent implements OnInit,ControlValueAccessor  {
   titleDate: string = "Date"
 
   @Input()
-  titleTime: string = "Time"
+  titleTime: string
 
   @Input()
   disabled: boolean = false

src-ui/src/app/components/common/input/text/text.component.ts

@@ -1,6 +1,5 @@
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, forwardRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { v4 as uuidv4 } from 'uuid';
 import { AbstractInputComponent } from '../abstract-input';
 
 @Component({

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

@@ -14,15 +14,15 @@
             </svg>
             <span class="d-none d-lg-inline"> Download</span>
         </a>
-    
+
         <div class="btn-group" ngbDropdown role="group" *ngIf="metadata?.paperless__has_archive_version">
-          <button class="btn btn-sm btn-outline-primary dropdown-toggle-split" ngbDropdownToggle></button>
+            <button class="btn btn-sm btn-outline-primary dropdown-toggle-split" ngbDropdownToggle></button>
-          <div class="dropdown-menu" ngbDropdownMenu>
+            <div class="dropdown-menu" ngbDropdownMenu>
-            <a ngbDropdownItem [href]="downloadOriginalUrl">Download original</a>
+                <a ngbDropdownItem [href]="downloadOriginalUrl">Download original</a>
-          </div>
+            </div>
         </div>
-    
+
-      </div>
+    </div>
 
 
     <button type="button" class="btn btn-sm btn-outline-primary" (click)="close()">
@@ -36,28 +36,75 @@
 
 <div class="row">
     <div class="col-xl">
+
         <form [formGroup]='documentForm' (ngSubmit)="save()">
 
-            <app-input-text title="Title" formControlName="title"></app-input-text>
+            <ul ngbNav #nav="ngbNav" class="nav-tabs">
+                <li [ngbNavItem]="1">
+                    <a ngbNavLink>Details</a>
+                    <ng-template ngbNavContent>
 
-            <div class="form-group">
+                        <app-input-text title="Title" formControlName="title"></app-input-text>
-                <label for="archive_serial_number">Archive Serial Number</label>
+                        <div class="form-group">
-                <input type="number" class="form-control" id="archive_serial_number"
+                            <label for="archive_serial_number">Archive Serial Number</label>
-                    formControlName='archive_serial_number'>
+                            <input type="number" class="form-control" id="archive_serial_number"
-            </div>
+                                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>
 
-            <app-input-date-time title="Date created" titleTime="Time created" formControlName="created"></app-input-date-time>
+                    </ng-template>
+                </li>
 
-            <div class="form-group">
+                <li [ngbNavItem]="2">
-                <label for="content">Content</label>
+                    <a ngbNavLink>Content</a>
-                <textarea class="form-control" id="content" rows="5" formControlName='content'></textarea>
+                    <ng-template ngbNavContent>
-            </div>
+                        <div class="form-group">
+                            <textarea class="form-control" id="content" rows="20" formControlName='content'></textarea>
+                        </div>
+                    </ng-template>
+                </li>
 
-            <app-input-select [items]="correspondents" title="Correspondent" formControlName="correspondent" allowNull="true" (createNew)="createCorrespondent()"></app-input-select>
+                <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}}</td>
+                                </tr>
+                                <tr>
+                                    <td>Date added</td>
+                                    <td>{{document.added | date}}</td>
+                                </tr>
+                                <tr>
+                                    <td>MD5 Checksum</td>
+                                    <td>{{metadata?.paperless__checksum}}</td>
+                                </tr>
+                                <tr>
+                                    <td>Original mime type</td>
+                                    <td>{{metadata?.paperless__mime_type}}</td>
+                                </tr>
+                                <tr>
+                                    <td>Is archived?</td>
+                                    <td>{{metadata?.paperless__has_archive_version | yesno}}</td>
+                                </tr>
+                                <tr>
+                                    <td>Media filename</td>
+                                    <td>{{metadata?.paperless__filename}}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </ng-template>
+                </li>
+            </ul>
 
-            <app-input-select [items]="documentTypes" title="Document type" formControlName="document_type" allowNull="true" (createNew)="createDocumentType()"></app-input-select>
+            <div [ngbNavOutlet]="nav" class="mt-2"></div>
-
-            <app-input-tags formControlName="tags" title="Tags"></app-input-tags>
 
             <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;
@@ -65,11 +112,11 @@
         </form>
     </div>
 
-    <div class="col-xl">
+    <div class="col-xl d-none d-xl-block document-preview sticky-top">
         <object [data]="previewUrl | safe" type="application/pdf" width="100%" height="100%">
             <p>Your browser does not support PDFs.
                 <a href="previewUrl">Download the PDF</a>.</p>
         </object>
 
     </div>
-</div>
+</div>

src-ui/src/app/components/document-detail/document-detail.component.scss

@@ -0,0 +1,4 @@
+.document-preview {
+  height: calc(100vh - 180px);
+  top: 70px
+}

src-ui/src/app/components/manage/settings/settings.component.html

@@ -46,8 +46,8 @@
           <tbody>
             <tr *ngFor="let config of savedViewConfigService.getConfigs()">
               <td>{{ config.title }}</td>
-              <td>{{ config.showInDashboard }}</td>
+              <td>{{ config.showInDashboard | yesno }}</td>
-              <td>{{ config.showInSideBar }}</td>
+              <td>{{ config.showInSideBar | yesno }}</td>
               <td><button type="button" class="btn btn-sm btn-outline-danger" (click)="deleteViewConfig(config)">Delete</button></td>
             </tr>
           </tbody>

src-ui/src/app/pipes/yes-no.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { YesNoPipe } from './yes-no.pipe';
+
+describe('YesNoPipe', () => {
+  it('create an instance', () => {
+    const pipe = new YesNoPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src-ui/src/app/pipes/yes-no.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'yesno'
+})
+export class YesNoPipe implements PipeTransform {
+
+  transform(value: boolean): unknown {
+    return value ? "Yes" : "No"
+  }
+
+}