+|
+
+ {{ displayValue(page) }}
+
+|
+
diff --git a/apps/red-ui/src/app/components/pagination/pagination.component.scss b/apps/red-ui/src/app/components/pagination/pagination.component.scss
new file mode 100644
index 000000000..e2061e12a
--- /dev/null
+++ b/apps/red-ui/src/app/components/pagination/pagination.component.scss
@@ -0,0 +1,28 @@
+@import '../../../assets/styles/red-variables';
+
+:host {
+ display: flex;
+
+ > *:not(:last-child) {
+ margin-right: 12px;
+ }
+
+ .disabled,
+ span {
+ opacity: 0.5;
+ }
+
+ .page {
+ cursor: pointer;
+
+ &.disabled,
+ &.dots {
+ cursor: default;
+ }
+
+ &.active {
+ color: $primary;
+ font-weight: bold;
+ }
+ }
+}
diff --git a/apps/red-ui/src/app/components/pagination/pagination.component.ts b/apps/red-ui/src/app/components/pagination/pagination.component.ts
new file mode 100644
index 000000000..e4472a8c0
--- /dev/null
+++ b/apps/red-ui/src/app/components/pagination/pagination.component.ts
@@ -0,0 +1,68 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+const DISPLAYED_ITEMS = 5;
+
+@Component({
+ selector: 'redaction-pagination',
+ templateUrl: './pagination.component.html',
+ styleUrls: ['./pagination.component.scss']
+})
+export class PaginationComponent implements OnInit {
+ private _currentPage: number;
+ private _totalPages: number;
+
+ public displayedPages: (number | string)[];
+
+ @Input()
+ public set settings(value: { currentPage: number; totalPages: number }) {
+ this._currentPage = value.currentPage;
+ this._totalPages = value.totalPages;
+ this._updatePagesArray();
+ }
+
+ public get currentPage() {
+ return this._currentPage;
+ }
+
+ public get totalPages() {
+ return this._totalPages;
+ }
+
+ @Output() pageChanged = new EventEmitter();
+
+ public displayed;
+
+ constructor() {}
+
+ ngOnInit(): void {}
+
+ private _updatePagesArray() {
+ this.displayedPages = [0];
+ if (Math.max(1, this.currentPage - 1) > 1) {
+ this.displayedPages.push('...');
+ }
+ for (let page = Math.max(1, this.currentPage - 1); page <= Math.min(this.currentPage + 1, this.totalPages - 1); ++page) {
+ this.displayedPages.push(page);
+ }
+ if (Math.min(this.currentPage + 1, this.totalPages - 1) !== this.totalPages - 1) {
+ if (this.currentPage + 1 < this.totalPages - 2) {
+ this.displayedPages.push('...');
+ }
+ this.displayedPages.push(this.totalPages - 1);
+ }
+ }
+
+ public get allDisplayed(): boolean {
+ return this.totalPages > DISPLAYED_ITEMS;
+ }
+
+ public selectPage(page: number | string) {
+ if (page !== '...') {
+ this.pageChanged.emit(page as number);
+ }
+ }
+
+ public displayValue(page: number | string) {
+ return page === '...' ? page : (page as number) + 1;
+ }
+}
diff --git a/apps/red-ui/src/app/screens/admin/audit-screen/audit-screen.component.html b/apps/red-ui/src/app/screens/admin/audit-screen/audit-screen.component.html
new file mode 100644
index 000000000..651646ca9
--- /dev/null
+++ b/apps/red-ui/src/app/screens/admin/audit-screen/audit-screen.component.html
@@ -0,0 +1,72 @@
+
+
+
+
+
+
+
+
+
+
+
+ {{ log.message }}
+
+
+ {{ log.recordDate }}
+
+
+ {{ log.userId }}
+
+
+ {{ log.category }}
+
+
+
+
+