lgcosta/paperless-ngx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Loading indicator, filter modified events, stronger typing

Browse Source
This commit is contained in:
shamoon 2024-04-08 22:08:38 -07:00
parent e15b3ae9de
commit 2adf32c2d6
3 changed files with 68 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src-ui/src/app/components/audit-log/audit-log.component.html
View File

@ -1,50 +1,64 @@
<ul class="list-group list-group-"> @if (loading) {
@for (entry of entries; track entry.id) { <div class="d-flex">
<li class="list-group-item"> <div class="spinner-border spinner-border-sm fw-normal" role="status"></div>
<div class="d-flex justify-content-between align-items-center"> </div>
<div> } @else {
{{ entry.timestamp | customDate:'longDate' }} <ul class="list-group">
{{ entry.timestamp | date:'shortTime' }} @if (entries.length === 0) {
@if (entry.actor) { <li class="list-group-item">
<span class="ms-3 fst-italic">{{ entry.actor.username }}</span> <div class="d-flex justify-content-center">
} @else { <span class="fst-italic" i18n>No entries found.</span>
<span class="ms-3 fst-italic">System</span>
}
<span class="badge bg-secondary ms-3">{{ entry.action | titlecase }}</span>
</div> </div>
<button type="button" class="ml-auto btn btn-link" (click)="toggleEntry(entry)"> </li>
<i-bs class="me-2" name="info-circle"></i-bs> } @else {
<ng-container i18n>Details</ng-container> @for (entry of entries; track entry.id) {
</button> <li class="list-group-item">
</div> <div class="d-flex justify-content-between align-items-center">
<div #collapse="ngbCollapse" [ngbCollapse]="!openEntries.has(entry.id)"> <div>
<table class="table table-borderless m-0 ms-2"> {{ entry.timestamp | customDate:'longDate' }}
<thead> {{ entry.timestamp | date:'shortTime' }}
<tr> @if (entry.actor) {
<th i18n>Field</th> <span class="ms-3 fst-italic">{{ entry.actor.username }}</span>
<th i18n>Change</th> } @else {
</tr> <span class="ms-3 fst-italic">System</span>
<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 if (change.key !== 'modified') { <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>
</div>
<div #collapse="ngbCollapse" [ngbCollapse]="!openEntries.has(entry.id)">
<table class="table table-borderless m-0 ms-2">
<thead>
<tr> <tr>
<td>{{ change.key | titlecase }}:</td> <th i18n>Field</th>
<td>{{ change.value[1] }}</td> <th i18n>Change</th>
</tr> </tr>
} <tbody>
} @for (change of entry.changes | keyvalue; track change.key) {
</tbody> @if (change.value["type"] === 'm2m') {
</table> <tr>
</div> <td>{{ change.key | titlecase }}:</td>
</li> <td>
} {{ change.value["operation"] | titlecase }}
</ul> <span class="fst-italic">{{ change.value["objects"].join(', ') }}</span>
</td>
</tr>
}
@else {
<tr>
<td>{{ change.key | titlecase }}:</td>
<td>{{ change.value[1] }}</td>
</tr>
}
}
</tbody>
</table>
</div>
</li>
}
}
</ul>
}

5
src-ui/src/app/components/audit-log/audit-log.component.ts
View File

@ -28,6 +28,11 @@ export class AuditLogComponent implements OnInit {
.getAuditLog(this._documentId) .getAuditLog(this._documentId)
.subscribe((auditLogEntries) => { .subscribe((auditLogEntries) => {
this.entries = auditLogEntries this.entries = auditLogEntries
.map((entry) => {
delete entry.changes['modified']
return entry
})
.filter((entry) => Object.keys(entry.changes).length > 0)
this.loading = false this.loading = false
}) })
} }

4
src-ui/src/app/data/auditlog-entry.ts
View File

@ -10,7 +10,9 @@ export interface AuditLogEntry {
id: number id: number
timestamp: string timestamp: string
action: AuditLogAction action: AuditLogAction
changes: any changes: {
[key: string]: string[]
}
remote_addr: string remote_addr: string
actor?: User actor?: User
} }