Feature: document history (audit log UI) (#6388)

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

@@ -119,6 +119,7 @@ import { NgxFilesizeModule } from 'ngx-filesize'
 import { RotateConfirmDialogComponent } from './components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component'
 import { MergeConfirmDialogComponent } from './components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component'
 import { SplitConfirmDialogComponent } from './components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component'
+import { DocumentHistoryComponent } from './components/document-history/document-history.component'
 import {
   airplane,
   archive,
@@ -472,6 +473,7 @@ function initializeApp(settings: SettingsService) {
     RotateConfirmDialogComponent,
     MergeConfirmDialogComponent,
     SplitConfirmDialogComponent,
+    DocumentHistoryComponent,
   ],
   imports: [
     BrowserModule,

src-ui/src/app/components/common/permissions-select/permissions-select.component.html

@@ -9,17 +9,17 @@
       <div class="col" i18n>Delete</div>
       <div class="col" i18n>View</div>
     </li>
-    @for (type of PermissionType | keyvalue; track type) {
-      <li class="list-group-item d-flex" [formGroupName]="type.key">
-        <div class="col-3">{{type.key}}:</div>
-        <div class="col form-check form-check-inline form-switch" [ngbPopover]="inheritedWarning" [disablePopover]="!isInherited(type.key)" placement="left" triggers="mouseenter:mouseleave">
-          <input type="checkbox" class="form-check-input" id="{{type.key}}_all" (change)="toggleAll($event, type.key)" [checked]="typesWithAllActions.has(type.key) || isInherited(type.key)" [attr.disabled]="disabled || isInherited(type.key) ? true : null">
-          <label class="form-check-label visually-hidden" for="{{type.key}}_all" i18n>All</label>
+    @for (type of allowedTypes; track type) {
+      <li class="list-group-item d-flex" [formGroupName]="type">
+        <div class="col-3">{{type}}:</div>
+        <div class="col form-check form-check-inline form-switch" [ngbPopover]="inheritedWarning" [disablePopover]="!isInherited(type)" placement="left" triggers="mouseenter:mouseleave">
+          <input type="checkbox" class="form-check-input" id="{{type}}_all" (change)="toggleAll($event, type)" [checked]="typesWithAllActions.has(type) || isInherited(type)" [attr.disabled]="disabled || isInherited(type) ? true : null">
+          <label class="form-check-label visually-hidden" for="{{type}}_all" i18n>All</label>
         </div>
         @for (action of PermissionAction | keyvalue; track action) {
-          <div class="col form-check form-check-inline" [ngbPopover]="inheritedWarning" [disablePopover]="!isInherited(type.key, action.key)" placement="left" triggers="mouseenter:mouseleave">
-            <input type="checkbox" class="form-check-input" id="{{type.key}}_{{action.key}}" formControlName="{{action.key}}">
-            <label class="form-check-label visually-hidden" for="{{type.key}}_{{action.key}}" i18n>{{action.key}}</label>
+          <div class="col form-check form-check-inline" [ngbPopover]="inheritedWarning" [disablePopover]="!isInherited(type, action.key)" placement="left" triggers="mouseenter:mouseleave">
+            <input type="checkbox" class="form-check-input" id="{{type}}_{{action.key}}" formControlName="{{action.key}}">
+            <label class="form-check-label visually-hidden" for="{{type}}_{{action.key}}" i18n>{{action.key}}</label>
           </div>
         }
       </li>

src-ui/src/app/components/common/permissions-select/permissions-select.component.spec.ts

@@ -12,6 +12,9 @@ import {
 } from 'src/app/services/permissions.service'
 import { By } from '@angular/platform-browser'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { SettingsService } from 'src/app/services/settings.service'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
 
 const permissions = [
   'add_document',
@@ -28,6 +31,7 @@ describe('PermissionsSelectComponent', () => {
   let component: PermissionsSelectComponent
   let fixture: ComponentFixture<PermissionsSelectComponent>
   let permissionsChangeResult: Permissions
+  let settingsService: SettingsService
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
@@ -38,9 +42,11 @@ describe('PermissionsSelectComponent', () => {
         ReactiveFormsModule,
         NgbModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        HttpClientTestingModule,
       ],
     }).compileComponents()
 
+    settingsService = TestBed.inject(SettingsService)
     fixture = TestBed.createComponent(PermissionsSelectComponent)
     fixture.debugElement.injector.get(NG_VALUE_ACCESSOR)
     component = fixture.componentInstance
@@ -99,4 +105,11 @@ describe('PermissionsSelectComponent', () => {
     const input2 = fixture.debugElement.query(By.css('input#Tag_Change'))
     expect(input2.nativeElement.disabled).toBeTruthy()
   })
+
+  it('should exclude history permissions if disabled', () => {
+    settingsService.set(SETTINGS_KEYS.AUDITLOG_ENABLED, false)
+    fixture = TestBed.createComponent(PermissionsSelectComponent)
+    component = fixture.componentInstance
+    expect(component.allowedTypes).not.toContain('History')
+  })
 })

src-ui/src/app/components/common/permissions-select/permissions-select.component.ts

@@ -12,6 +12,8 @@ import {
   PermissionType,
 } from 'src/app/services/permissions.service'
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
+import { SettingsService } from 'src/app/services/settings.service'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 
 @Component({
   providers: [
@@ -60,15 +62,23 @@ export class PermissionsSelectComponent
 
   inheritedWarning: string = $localize`Inherited from group`
 
-  constructor(private readonly permissionsService: PermissionsService) {
+  public allowedTypes = Object.keys(PermissionType)
+
+  constructor(
+    private readonly permissionsService: PermissionsService,
+    private readonly settingsService: SettingsService
+  ) {
     super()
-    for (const type in PermissionType) {
+    if (!this.settingsService.get(SETTINGS_KEYS.AUDITLOG_ENABLED)) {
+      this.allowedTypes.splice(this.allowedTypes.indexOf('History'), 1)
+    }
+    this.allowedTypes.forEach((type) => {
       const control = new FormGroup({})
       for (const action in PermissionAction) {
         control.addControl(action, new FormControl(null))
       }
       this.form.addControl(type, control)
-    }
+    })
   }
 
   writeValue(permissions: string[]): void {
@@ -92,7 +102,7 @@ export class PermissionsSelectComponent
         }
       }
     })
-    Object.keys(PermissionType).forEach((type) => {
+    this.allowedTypes.forEach((type) => {
       if (
         Object.values(this.form.get(type).value).every((val) => val == true)
       ) {
@@ -191,7 +201,7 @@ export class PermissionsSelectComponent
   }
 
   updateDisabledStates() {
-    for (const type in PermissionType) {
+    this.allowedTypes.forEach((type) => {
       const control = this.form.get(type)
       let actionControl: AbstractControl
       for (const action in PermissionAction) {
@@ -200,6 +210,6 @@ export class PermissionsSelectComponent
           ? actionControl.disable()
           : actionControl.enable()
       }
-    }
+    })
   }
 }

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

@@ -285,6 +285,17 @@
           </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>

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

@@ -77,6 +77,7 @@ enum DocumentDetailNavIDs {
   Preview = 4,
   Notes = 5,
   Permissions = 6,
+  History = 7,
 }
 
 enum ContentRenderType {
@@ -902,6 +903,17 @@ export class DocumentDetailComponent
     )
   }
 
+  get historyEnabled(): boolean {
+    return (
+      this.settings.get(SETTINGS_KEYS.AUDITLOG_ENABLED) &&
+      this.userIsOwner &&
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.History
+      )
+    )
+  }
+
   notesUpdated(notes: DocumentNote[]) {
     this.document.notes = notes
     this.openDocumentService.refreshDocument(this.documentId)

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

@@ -0,0 +1,59 @@
+@if (loading) {
+    <div class="d-flex">
+        <div class="spinner-border spinner-border-sm fw-normal" role="status"></div>
+    </div>
+} @else {
+    <ul class="list-group">
+        @if (entries.length === 0) {
+            <li class="list-group-item">
+                <div class="d-flex justify-content-center">
+                    <span class="fst-italic" i18n>No entries found.</span>
+                </div>
+            </li>
+        } @else {
+            @for (entry of entries; track entry.id) {
+                <li class="list-group-item">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <ng-template #timestamp>
+                            <div class="text-light">
+                                {{ entry.timestamp | customDate:'longDate' }} {{ entry.timestamp | date:'shortTime' }}
+                            </div>
+                        </ng-template>
+                        <span class="text-muted" [ngbTooltip]="timestamp">{{ entry.timestamp | customDate:'relative' }}</span>
+                        @if (entry.actor) {
+                            <span class="ms-3 fst-italic">{{ entry.actor.username }}</span>
+                        } @else {
+                            <span class="ms-3 fst-italic">System</span>
+                        }
+                        <span class="badge bg-secondary ms-auto" [class.bg-primary]="entry.action === AuditLogAction.Create">{{ entry.action | titlecase }}</span>
+                    </div>
+                    @if (entry.action === AuditLogAction.Update) {
+                        <ul class="mt-2">
+                            @for (change of entry.changes | keyvalue; track change.key) {
+                                @if (change.value["type"] === 'm2m') {
+                                    <li>
+                                        <span class="fst-italic" i18n>{{ change.value["operation"] | titlecase }}</span>&nbsp;
+                                        <span class="text-light">{{ change.key | titlecase }}</span>:&nbsp;
+                                        <code class="text-primary">{{ change.value["objects"].join(', ') }}</code>
+                                    </li>
+                                }
+                                @else if (change.value["type"] === 'custom_field') {
+                                    <li>
+                                        <span class="text-light">{{ change.value["field"] }}</span>:&nbsp;
+                                        <code class="text-primary">{{ change.value["value"] }}</code>
+                                    </li>
+                                }
+                                @else {
+                                    <li>
+                                        <span class="text-light">{{ change.key | titlecase }}</span>:&nbsp;
+                                        <code class="text-primary">{{ change.value[1] }}</code>
+                                    </li>
+                                }
+                            }
+                        </ul>
+                    }
+                </li>
+            }
+        }
+    </ul>
+}

src-ui/src/app/components/document-history/document-history.component.spec.ts

@@ -0,0 +1,57 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { DocumentHistoryComponent } from './document-history.component'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { of } from 'rxjs'
+import { AuditLogAction } from 'src/app/data/auditlog-entry'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
+import { DatePipe } from '@angular/common'
+import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+
+describe('DocumentHistoryComponent', () => {
+  let component: DocumentHistoryComponent
+  let fixture: ComponentFixture<DocumentHistoryComponent>
+  let documentService: DocumentService
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DocumentHistoryComponent, CustomDatePipe],
+      providers: [DatePipe],
+      imports: [
+        HttpClientTestingModule,
+        NgbCollapseModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(DocumentHistoryComponent)
+    documentService = TestBed.inject(DocumentService)
+    component = fixture.componentInstance
+  })
+
+  it('should get audit log entries on init', () => {
+    const getHistorySpy = jest.spyOn(documentService, 'getHistory')
+    getHistorySpy.mockReturnValue(
+      of([
+        {
+          id: 1,
+          actor: {
+            id: 1,
+            username: 'user1',
+          },
+          action: AuditLogAction.Create,
+          timestamp: '2021-01-01T00:00:00Z',
+          remote_addr: '1.2.3.4',
+          changes: {
+            title: ['old title', 'new title'],
+          },
+        },
+      ])
+    )
+    component.documentId = 1
+    fixture.detectChanges()
+    expect(getHistorySpy).toHaveBeenCalledWith(1)
+  })
+})

src-ui/src/app/components/document-history/document-history.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { AuditLogAction, AuditLogEntry } from 'src/app/data/auditlog-entry'
+import { DocumentService } from 'src/app/services/rest/document.service'
+
+@Component({
+  selector: 'pngx-document-history',
+  templateUrl: './document-history.component.html',
+  styleUrl: './document-history.component.scss',
+})
+export class DocumentHistoryComponent implements OnInit {
+  public AuditLogAction = AuditLogAction
+
+  private _documentId: number
+  @Input()
+  set documentId(id: number) {
+    this._documentId = id
+    this.ngOnInit()
+  }
+
+  public loading: boolean = true
+  public entries: AuditLogEntry[] = []
+
+  constructor(private documentService: DocumentService) {}
+
+  ngOnInit(): void {
+    if (this._documentId) {
+      this.loading = true
+      this.documentService
+        .getHistory(this._documentId)
+        .subscribe((auditLogEntries) => {
+          this.entries = auditLogEntries
+          this.loading = false
+        })
+    }
+  }
+}

src-ui/src/app/data/auditlog-entry.ts

@@ -0,0 +1,18 @@
+import { User } from './user'
+
+export enum AuditLogAction {
+  Create = 'create',
+  Update = 'update',
+  Delete = 'delete',
+}
+
+export interface AuditLogEntry {
+  id: number
+  timestamp: string
+  action: AuditLogAction
+  changes: {
+    [key: string]: string[]
+  }
+  remote_addr: string
+  actor?: User
+}

src-ui/src/app/data/ui-settings.ts

@@ -37,6 +37,7 @@ export const SETTINGS_KEYS = {
   NOTIFICATIONS_CONSUMER_SUPPRESS_ON_DASHBOARD:
     'general-settings:notifications:consumer-suppress-on-dashboard',
   NOTES_ENABLED: 'general-settings:notes-enabled',
+  AUDITLOG_ENABLED: 'general-settings:auditlog-enabled',
   SLIM_SIDEBAR: 'general-settings:slim-sidebar',
   UPDATE_CHECKING_ENABLED: 'general-settings:update-checking:enabled',
   UPDATE_CHECKING_BACKEND_SETTING:
@@ -143,6 +144,11 @@ export const SETTINGS: UiSetting[] = [
     type: 'boolean',
     default: true,
   },
+  {
+    key: SETTINGS_KEYS.AUDITLOG_ENABLED,
+    type: 'boolean',
+    default: true,
+  },
   {
     key: SETTINGS_KEYS.UPDATE_CHECKING_ENABLED,
     type: 'boolean',

src-ui/src/app/pipes/custom-date.pipe.spec.ts

@@ -30,4 +30,14 @@ describe('CustomDatePipe', () => {
       )
     ).toEqual('2023-05-04')
   })
+
+  it('should support relative date formatting', () => {
+    const now = new Date()
+    const notNow = new Date(now)
+    notNow.setDate(now.getDate() - 1)
+    expect(datePipe.transform(notNow, 'relative')).toEqual('1 day ago')
+    notNow.setDate(now.getDate() - 2)
+    expect(datePipe.transform(notNow, 'relative')).toEqual('2 days ago')
+    expect(datePipe.transform(now, 'relative')).toEqual('Just now')
+  })
 })

src-ui/src/app/pipes/custom-date.pipe.ts

@@ -34,6 +34,51 @@ export class CustomDatePipe implements PipeTransform {
       this.settings.get(SETTINGS_KEYS.DATE_LOCALE) ||
       this.defaultLocale
     let f = format || this.settings.get(SETTINGS_KEYS.DATE_FORMAT)
+    if (format === 'relative') {
+      const seconds = Math.floor((+new Date() - +new Date(value)) / 1000)
+      if (seconds < 60) return $localize`Just now`
+      const intervals = {
+        year: {
+          label: $localize`year ago`,
+          labelPlural: $localize`years ago`,
+          interval: 31536000,
+        },
+        month: {
+          label: $localize`month ago`,
+          labelPlural: $localize`months ago`,
+          interval: 2592000,
+        },
+        week: {
+          label: $localize`week ago`,
+          labelPlural: $localize`weeks ago`,
+          interval: 604800,
+        },
+        day: {
+          label: $localize`day ago`,
+          labelPlural: $localize`days ago`,
+          interval: 86400,
+        },
+        hour: {
+          label: $localize`hour ago`,
+          labelPlural: $localize`hours ago`,
+          interval: 3600,
+        },
+        minute: {
+          label: $localize`minute ago`,
+          labelPlural: $localize`minutes ago`,
+          interval: 60,
+        },
+      }
+      let counter
+      for (const i in intervals) {
+        counter = Math.floor(seconds / intervals[i].interval)
+        if (counter > 0) {
+          const label =
+            counter > 1 ? intervals[i].labelPlural : intervals[i].label
+          return `${counter} ${label}`
+        }
+      }
+    }
     if (l == 'iso-8601') {
       return this.datePipe.transform(value, FORMAT_TO_ISO_FORMAT[f], timezone)
     } else {

src-ui/src/app/services/permissions.service.ts

@@ -19,6 +19,7 @@ export enum PermissionType {
   PaperlessTask = '%s_paperlesstask',
   AppConfig = '%s_applicationconfiguration',
   UISettings = '%s_uisettings',
+  History = '%s_logentry',
   Note = '%s_note',
   MailAccount = '%s_mailaccount',
   MailRule = '%s_mailrule',

src-ui/src/app/services/rest/document.service.spec.ts

@@ -266,6 +266,13 @@ describe(`DocumentService`, () => {
     )
     expect(req.request.body.remove_inbox_tags).toEqual(true)
   })
+
+  it('should call appropriate api endpoint for getting audit log', () => {
+    subscription = service.getHistory(documents[0].id).subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/history/`
+    )
+  })
 })
 
 afterEach(() => {

src-ui/src/app/services/rest/document.service.ts

@@ -19,7 +19,8 @@ import {
   PermissionsService,
 } from '../permissions.service'
 import { SettingsService } from '../settings.service'
-import { SETTINGS, SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { AuditLogEntry } from 'src/app/data/auditlog-entry'
 
 export const DOCUMENT_SORT_FIELDS = [
   { field: 'archive_serial_number', name: $localize`ASN` },
@@ -222,6 +223,10 @@ export class DocumentService extends AbstractPaperlessService<Document> {
     )
   }
 
+  getHistory(id: number): Observable<AuditLogEntry[]> {
+    return this.http.get<AuditLogEntry[]>(this.getResourceUrl(id, 'history'))
+  }
+
   bulkDownload(
     ids: number[],
     content = 'both',

src-ui/src/app/services/settings.service.spec.ts

@@ -47,6 +47,7 @@ describe('SettingsService', () => {
       update_checking: { enabled: false, backend_setting: 'default' },
       saved_views: { warn_on_unsaved_change: true },
       notes_enabled: true,
+      auditlog_enabled: true,
       tour_complete: false,
       permissions: {
         default_owner: null,