From a680c6e385137344c606a19aae7a6d602f6fac5c Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 9 Apr 2024 23:03:42 -0700
Subject: [PATCH] That's better, make it a simple list

---
 .../audit-log/audit-log.component.html        | 75 ++++++++-----------
 .../audit-log/audit-log.component.ts          |  6 +-
 2 files changed, 34 insertions(+), 47 deletions(-)

diff --git a/src-ui/src/app/components/audit-log/audit-log.component.html b/src-ui/src/app/components/audit-log/audit-log.component.html
index e6789efc5..497049aa4 100644
--- a/src-ui/src/app/components/audit-log/audit-log.component.html
+++ b/src-ui/src/app/components/audit-log/audit-log.component.html
@@ -14,53 +14,38 @@
             @for (entry of entries; track entry.id) {
                 <li class="list-group-item">
                     <div class="d-flex justify-content-between align-items-center">
-                        <div>
-                            <ng-template #timestamp>
-                                <div class="text-light">
-                                    {{ entry.timestamp | customDate:'longDate' }} {{ entry.timestamp | date:'shortTime' }}
-                                </div>
-                            </ng-template>
-                            <span [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-3">{{ entry.action | titlecase }}</span>
-                        </div>
-                        <button type="button" class="ml-auto btn btn-link" (click)="toggleEntry(entry)">
-                            <i-bs class="me-2" name="info-circle"></i-bs>
-                            <ng-container i18n>Details</ng-container>
-                        </button>
+                        <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>
-                    <div #collapse="ngbCollapse" [ngbCollapse]="!openEntries.has(entry.id)">
-                        <table class="table table-borderless m-0 ms-2">
-                            <thead>
-                                <tr>
-                                    <th i18n>Field</th>
-                                    <th i18n>Change</th>
-                                </tr>
-                            <tbody>
-                                @for (change of entry.changes | keyvalue; track change.key) {
-                                    @if (change.value["type"] === 'm2m') {
-                                        <tr>
-                                            <td>{{ change.key | titlecase }}:</td>
-                                            <td>
-                                                {{ change.value["operation"] | titlecase }}
-                                                <span class="fst-italic">{{ change.value["objects"].join(', ') }}</span>
-                                            </td>
-                                        </tr>
-                                    }
-                                    @else {
-                                        <tr>
-                                            <td>{{ change.key | titlecase }}:</td>
-                                            <td>{{ change.value[1] }}</td>
-                                        </tr>
-                                    }
+                    @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>
                                 }
-                            </tbody>
-                        </table>
-                    </div>
+                                @else {
+                                    <li>
+                                        <span class="text-light">{{ change.key | titlecase }}</span>:&nbsp;
+                                        <code class="text-primary">{{ change.value[1] }}</code>
+                                    </li>
+                                }
+                            }
+                        </ul>
+                    }
                 </li>
             }
         }
diff --git a/src-ui/src/app/components/audit-log/audit-log.component.ts b/src-ui/src/app/components/audit-log/audit-log.component.ts
index ebe7a4db5..023b17322 100644
--- a/src-ui/src/app/components/audit-log/audit-log.component.ts
+++ b/src-ui/src/app/components/audit-log/audit-log.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core'
-import { AuditLogEntry } from 'src/app/data/auditlog-entry'
+import { AuditLogAction, AuditLogEntry } from 'src/app/data/auditlog-entry'
 import { DocumentService } from 'src/app/services/rest/document.service'
 
 @Component({
@@ -8,7 +8,9 @@ import { DocumentService } from 'src/app/services/rest/document.service'
   styleUrl: './audit-log.component.scss',
 })
 export class AuditLogComponent implements OnInit {
-  _documentId: number
+  public AuditLogAction = AuditLogAction
+
+  private _documentId: number
   @Input()
   set documentId(id: number) {
     this._documentId = id