ngx-techlify-core 11.4.8 → 11.5.2

package/src/lib/audit-log/audit-log-list/audit-log-list.component.ts

@@ -0,0 +1,138 @@
+import { Component, OnInit, OnDestroy, Input, ViewChild } from '@angular/core';
+
+
+import { Router } from '@angular/router';
+import { MatSort } from '@angular/material/sort';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { PageEvent } from '../../data-table/data-table.model';
+import { DataManager } from '../../core/dataManager.service';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@UntilDestroy()
+@Component({
+  selector: 'app-audit-log-list',
+  templateUrl: './audit-log-list.component.html',
+  styleUrls: ['./audit-log-list.component.scss'],
+})
+export class AuditLogListComponent implements OnInit, OnDestroy {
+
+  auditLogList: any[] = [];
+  @Input() objectId: any;
+  @Input() objectType: any;
+  @Input() showFilter: boolean = true;
+  @Input() showExportButtons: boolean = true;
+  @Input() userId: any;
+
+  pageEvent: PageEvent = { page: 1, perPage: 25, lastPage: 1 };
+  filters: any = { sort_by: 'created_at|desc' };
+  displayedColumns: any[] = ['index', 'id', 'object_type', 'object_id', 'action', 'changes', 'created_at', 'user.email'];
+
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+  constructor(
+    private dataManager: DataManager,
+    private router: Router,
+    public sanitizer: DomSanitizer
+  ) { }
+
+  ngOnInit() {
+
+    this.initializeData();
+
+    if (this.sort) {
+      this.sort.sortChange.pipe(untilDestroyed(this))
+        .subscribe((value: any) => {
+          this.changeSort(value);
+        })
+    }
+
+  }
+
+  get excelData(): any[] {
+    if (this.auditLogList.length > 0) {
+      return this.auditLogList.map(item => {
+        return {
+          'Type': item?.object_type,
+          'Action': item?.action,
+          'Data': JSON.stringify(item?.data || {}),
+          'Object': JSON.stringify(item?.object || {}),
+          'Pre-Object': JSON.stringify(item?.pre_object || {}),
+          'Created At': new Date(item?.created_at).toDateString(),
+          'Created By': item?.user?.email
+        };
+      });
+    }
+    return [];
+  }
+
+  changeSort(event: any) {
+    if (event.direction) {
+      this.filters.sort_by = `${event.active}|${event.direction}`;
+      this.reload();
+    }
+  }
+
+  logClicked(log: any) {
+    this.router.navigate(['/system/audit-logs/log-view', log.id]);
+  }
+
+
+  async initializeData() {
+    if (this.objectType) {
+      this.filters = { ...this.filters, object_type: this.objectType }
+    }
+    if (this.objectId) {
+      this.filters = { ...this.filters, object_id: this.objectId }
+    }
+    if (this.userId) {
+      this.filters = { ...this.filters, user_id: this.userId }
+    }
+    const result = await this.dataManager.GET(`api/audit-logs`, { ...this.filters, ...this.pageEvent });
+    this.auditLogList = this.auditLogList.concat(result.data);
+    this.pageEvent.page = result.current_page;
+    this.pageEvent.lastPage = result.last_page;
+  }
+
+  filterChange(event: any) {
+    if (this.showFilter) {
+      this.filters = {
+        ...this.filters,
+        ...event,
+        object_type: this.objectType || event?.object_type || '',
+        object_id: this.objectId || '',
+      };
+      this.reload();
+    }
+  }
+
+  onScroll() {
+    if (this.pageEvent.lastPage > this.pageEvent.page) {
+      this.pageEvent.page += 1;
+      this.initializeData();
+    }
+  }
+
+  reload() {
+    this.auditLogList = [];
+    this.pageEvent = { page: 1, perPage: 25, lastPage: 1 };
+    this.initializeData();
+  }
+
+  getTransformedChanges(log: any) {
+    if (log?.data?.changes) {
+      const changes = Object.keys(log?.data?.changes) || [];
+      let value = '<div>';
+      changes.forEach((key: any) => {
+        const displayAttribute = (key as string).split('_').map(x => x.charAt(0).toUpperCase() + x.slice(1)).join(' ');
+        value = `${value} <div><b>${displayAttribute}:</b> <span id="old-value">${log?.pre_object[key] ?? ''}</span><span id="new-value">${log?.object[key] ?? ''}</span></div>`;
+      });
+      value = `${value} </div>`;
+      return value;
+    }
+    return '';
+  }
+
+  ngOnDestroy() {
+    // Needed for automatic unsubscribe with untilDestroyed
+  }
+}

package/src/lib/audit-log/audit-log-list/audit-log-list.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AuditLogListRoutingModule } from './audit-log-list-routing.module';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { AuditLogListComponent } from './audit-log-list.component';
+import { AuditLogListFilterModule } from '../audit-log-list-filter/audit-log-list-filter.module';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ReactiveFormsModule } from '@angular/forms';
+import { ExportExcelModule } from '../../export-excel/export-excel.module';
+import { MaterialModule } from '../../material.module';
+
+
+@NgModule({
+  declarations: [AuditLogListComponent],
+  imports: [
+    CommonModule,
+    AuditLogListRoutingModule,
+    ExportExcelModule,
+    FlexLayoutModule,
+    ReactiveFormsModule,
+    MaterialModule,
+    InfiniteScrollModule,
+    AuditLogListFilterModule
+  ],
+  exports: [AuditLogListComponent]
+})
+export class AuditLogListModule { }

package/src/lib/audit-log/audit-log-list-filter/audit-log-list-filter-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AuditLogListFilterRoutingModule { }

package/src/lib/audit-log/audit-log-list-filter/audit-log-list-filter.component.html

@@ -0,0 +1,49 @@
+<form [formGroup]="auditLogFilterForm" fxLayout="row wrap" fxLayoutGap="1rem" fxLayoutAlign="start center">
+    <mat-form-field *ngIf="showObjectFilter">
+        <mat-label>Model</mat-label>
+        <app-searchable-selector formControlName="object_type" apiUrl="api/audit-log-types" titleField="object_type"
+            valueField="object_type" [sort]="false" [enableSearch]="false">
+        </app-searchable-selector>
+        <button mat-button *ngIf="getFieldValue('object_type')" matSuffix mat-icon-button
+            (click)="resetFieldValue('object_type')">
+            <mat-icon>close</mat-icon>
+        </button>
+    </mat-form-field>
+
+    <mat-form-field>
+        <mat-label>Action</mat-label>
+        <mat-select formControlName="action">
+            <mat-option value="created">Created</mat-option>
+            <mat-option value="updated">Updated</mat-option>
+            <mat-option value="deleted">Deleted</mat-option>
+        </mat-select>
+        <button mat-button *ngIf="getFieldValue('action')" matSuffix mat-icon-button
+            (click)="resetFieldValue('action')">
+            <mat-icon>close</mat-icon>
+        </button>
+    </mat-form-field>
+
+    <mat-form-field>
+        <input matInput formControlName="date_from" [matDatepicker]="fromPicker" (click)="fromPicker.open()"
+            placeholder="From Date (MM/DD/YYYY)" />
+        <mat-datepicker-toggle matSuffix [for]="fromPicker"></mat-datepicker-toggle>
+        <mat-datepicker #fromPicker></mat-datepicker>
+        <button mat-button *ngIf="getFieldValue('date_from')" matSuffix mat-icon-button
+            (click)="resetFieldValue('date_from')">
+            <mat-icon>close</mat-icon>
+        </button>
+        <mat-error *ngIf="isFieldValid('date_from')">Invalid Date</mat-error>
+    </mat-form-field>
+
+    <mat-form-field>
+        <input matInput formControlName="date_to" [matDatepicker]="toPicker" (click)="toPicker.open()"
+            placeholder="To Date (MM/DD/YYYY)" />
+        <mat-datepicker-toggle matSuffix [for]=""></mat-datepicker-toggle>
+        <mat-datepicker #toPicker></mat-datepicker>
+        <button mat-button *ngIf="getFieldValue('date_to')" matSuffix mat-icon-button
+            (click)="resetFieldValue('date_to')">
+            <mat-icon>close</mat-icon>
+        </button>
+        <mat-error *ngIf="isFieldValid('date_to')">Invalid Date</mat-error>
+    </mat-form-field>
+</form>

package/src/lib/audit-log/audit-log-list-filter/audit-log-list-filter.component.spec.ts

@@ -0,0 +1,26 @@
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { AuditLogListFilterComponent } from './audit-log-list-filter.component';
+
+
+describe('AuditLogListFilterComponent', () => {
+  let component: AuditLogListFilterComponent;
+  let fixture: ComponentFixture<AuditLogListFilterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [AuditLogListFilterComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AuditLogListFilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/audit-log/audit-log-list-filter/audit-log-list-filter.component.ts

@@ -0,0 +1,74 @@
+import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { FormValidatorService } from '../../core/form-validator.service';
+import { DateValidator } from '../../date-validator';
+
+@UntilDestroy()
+@Component({
+  selector: 'app-audit-log-list-filter',
+  templateUrl: './audit-log-list-filter.component.html',
+  styleUrls: ['./audit-log-list-filter.component.scss']
+})
+export class AuditLogListFilterComponent implements OnInit {
+
+  auditLogFilterForm: FormGroup;
+
+  @Input() objectId: any;
+  @Input() objectType: any;
+
+  @Output() valueChange = new EventEmitter();
+
+  constructor(private fb: FormBuilder, private formValidatorService: FormValidatorService) {
+    this.createForm();
+  }
+
+  get showObjectFilter() {
+    return !(this.objectId || this.objectType);
+  }
+
+  private createForm() {
+
+    //TODO: Finialize and add more validations.
+    this.auditLogFilterForm = this.fb.group({
+      object_type: [''],
+      action: [''],
+      data: [''],
+      date_to: ['', DateValidator()],
+      date_from: ['', DateValidator()]
+    });
+  }
+
+  ngOnInit(): void {
+
+    this.auditLogFilterForm.valueChanges.pipe(
+      debounceTime(500),
+      distinctUntilChanged(),
+      untilDestroyed(this)
+    ).subscribe((value: any) => {
+      value.date_from = value.date_from ? (value.date_from as Date).toISOString() : '';
+      value.date_to = value.date_to ? (value.date_to as Date).toISOString() : '';
+      this.valueChange.emit(value);
+    })
+  }
+
+
+  resetFieldValue(field: string) {
+    this.auditLogFilterForm.get(field).setValue('');
+  }
+
+  getFieldValue(field: string) {
+    return this.auditLogFilterForm.get(field).value;
+  }
+
+  isFieldValid(field: string) {
+    return this.formValidatorService.isFieldValid(field, this.auditLogFilterForm, true);
+  }
+
+
+  ngOnDestroy() {
+
+  }
+
+}

package/src/lib/audit-log/audit-log-list-filter/audit-log-list-filter.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AuditLogListFilterRoutingModule } from './audit-log-list-filter-routing.module';
+import { AuditLogListFilterComponent } from './audit-log-list-filter.component';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MaterialModule } from '../../material.module';
+import { SearchableSelectorModule } from '../../searchable-selector/searchable-selector.module';
+
+
+@NgModule({
+  declarations: [AuditLogListFilterComponent],
+  imports: [
+    CommonModule,
+    AuditLogListFilterRoutingModule,
+    FlexLayoutModule,
+    ReactiveFormsModule,
+    MaterialModule,
+    SearchableSelectorModule,
+  ],
+  exports: [AuditLogListFilterComponent]
+})
+export class AuditLogListFilterModule { }

package/src/lib/audit-log/audit-log-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AuthenticationGuard } from '../core/authentication.guard';
+import { AuditLogListComponent } from './audit-log-list/audit-log-list.component';
+import { AuditLogViewComponent } from './audit-log-view/audit-log-view.component';
+
+
+const routes: Routes = [
+  { path: 'log-list', component: AuditLogListComponent, canActivate: [AuthenticationGuard] },
+  { path: 'log-view/:id', component: AuditLogViewComponent, canActivate: [AuthenticationGuard] },
+  { path: '**', redirectTo: 'log-list', pathMatch: 'full' }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AuditLogRoutingModule { }

package/src/lib/audit-log/audit-log-view/audit-log-view-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AuditLogViewRoutingModule { }

package/src/lib/audit-log/audit-log-view/audit-log-view.component.html

@@ -0,0 +1,46 @@
+<div fxLayout="column" class="m-4" fxLayoutGap="1.5rem">
+    <h3 class="text-center">Audit Log</h3>
+    <div fxLayout="column" fxLayoutGap="0.5rem" *ngIf="logInfo">
+        <div>Object Type: {{logInfo?.object_type}}</div>
+        <div>Object Id: {{logInfo?.object_id}}</div>
+        <div>Action: {{logInfo?.action}}</div>
+        <div>Created At: {{logInfo?.created_at | date:'medium'}}</div>
+        <div>Created By: {{logInfo?.user?.email}}</div>
+    </div>
+
+
+    <div fxLayout="column" *ngIf="logInfo?.action !== 'deleted'">
+        <div>
+            <button mat-raised-button color="primary" (click)="showDeltaChanges = !showDeltaChanges">
+                {{showDeltaChanges?'Hide JSON Changes': 'Show JSON Changes'}}
+            </button>
+        </div>
+        <div [hidden]="!showDeltaChanges">
+            <h4 class="font-weight-bold" *ngIf="logInfo">Changes in JSON</h4>
+            <div id="jsondiff"></div>
+        </div>
+    </div>
+
+    <div class="container" *ngIf="changeList.length > 0">
+        <h4 class="font-weight-bold"> Changes in Attributes</h4>
+        <table class="table table-striped table-sm border">
+            <thead>
+                <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">Attribute</th>
+                    <th scope="col">Old Value</th>
+                    <th scope="col">New Value</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let change of changeList; let i= index;">
+                    <th scope="row">{{i+1}}</th>
+                    <td>{{change?.displayAttribute}}</td>
+                    <td>{{change?.oldValue}}</td>
+                    <td>{{change?.newValue}}</td>
+                </tr>
+            </tbody>
+        </table>
+
+    </div>
+</div>

package/src/lib/audit-log/audit-log-view/audit-log-view.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AuditLogViewComponent } from './audit-log-view.component';
+
+describe('AuditLogViewComponent', () => {
+  let component: AuditLogViewComponent;
+  let fixture: ComponentFixture<AuditLogViewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AuditLogViewComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AuditLogViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/audit-log/audit-log-view/audit-log-view.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+import * as jsondiffpatch from "jsondiffpatch"
+import { DataManager } from '../../core/dataManager.service';
+
+@Component({
+  selector: 'app-audit-log-view',
+  templateUrl: './audit-log-view.component.html',
+  styleUrls: ['./audit-log-view.component.scss']
+})
+export class AuditLogViewComponent implements OnInit {
+
+  logInfo: any;
+  showDeltaChanges: boolean = false;
+  changeList: any[] = [];
+
+  constructor(
+    private dataManager: DataManager,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit(): void {
+    this.route.paramMap.subscribe(params => {
+      if (params.get('id')) {
+        this.fetchLogDetail(params.get('id'));
+      } else {
+        this.location.back();
+      }
+    });
+  }
+
+  getTransformedChanges() {
+    const changes = ((this.logInfo?.action === 'deleted') ? Object.keys(this.logInfo?.object) : Object.keys(this.logInfo?.data?.changes)) || [];
+    changes.forEach((key: any) => {
+      const displayAttribute = (key as string).split('_').map(x => x.charAt(0).toUpperCase() + x.slice(1)).join(' ');
+      this.changeList.push({ displayAttribute: displayAttribute, attribute: key, newValue: (this.logInfo?.action === 'deleted') ? '' : (this.logInfo?.object[key] ?? ''), oldValue: this.logInfo?.pre_object[key] ?? '' });
+    });
+  }
+
+  async fetchLogDetail(logId: any) {
+    const result = await this.dataManager.GET(`api/audit-logs/${logId}`);
+    this.logInfo = result.item;
+    this.getTransformedChanges();
+    this.patchDelta();
+  }
+
+  patchDelta() {
+    const delta = jsondiffpatch.diff(this.logInfo?.pre_object, this.logInfo?.object);
+    document.getElementById('jsondiff').innerHTML = jsondiffpatch.formatters.html.format(delta, this.logInfo?.pre_object);
+  }
+
+}

package/src/lib/audit-log/audit-log-view/audit-log-view.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AuditLogViewRoutingModule } from './audit-log-view-routing.module';
+import { AuditLogViewComponent } from './audit-log-view.component';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MaterialModule } from '../../material.module';
+
+
+@NgModule({
+  declarations: [AuditLogViewComponent],
+  imports: [
+    CommonModule,
+    AuditLogViewRoutingModule,
+    FlexLayoutModule,
+    MaterialModule
+  ],
+  exports: [AuditLogViewComponent]
+})
+export class AuditLogViewModule { }

package/src/lib/audit-log/audit-log-view-model/audit-log-view-model-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AuditLogViewModelRoutingModule { }

package/src/lib/audit-log/audit-log-view-model/audit-log-view-model.component.html

@@ -0,0 +1,38 @@
+<div fxLayout="column" class="m-4" fxLayoutGap="1.5rem">
+    <h3 class="text-center">Audit Log</h3>
+    <div fxLayout="column" fxLayoutGap="0.5rem" *ngIf="logInfo">
+        <div>Object Type: {{logInfo?.object_type}}</div>
+        <div>Object Id: {{logInfo?.object_id}}</div>
+        <div>Action: {{logInfo?.action}}</div>
+        <div>Created At: {{logInfo?.created_at | date:'medium'}}</div>
+        <div>Created By: {{logInfo?.user?.email}}</div>
+    </div>
+
+
+    <div class="container" *ngIf="changeList.length > 0">
+        <h4 class="font-weight-bold"> Changes in Attributes</h4>
+        <table class="table table-striped table-sm border">
+            <thead>
+                <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">Attribute</th>
+                    <th scope="col">Old Value</th>
+                    <th scope="col">New Value</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let change of changeList; let i= index;">
+                    <th scope="row">{{i+1}}</th>
+                    <td>{{change?.displayAttribute}}</td>
+                    <td>{{change?.oldValue}}</td>
+                    <td>{{change?.newValue}}</td>
+                </tr>
+            </tbody>
+        </table>
+
+    </div>
+
+    <div>
+        <button mat-raised-button (click)="close()">Close</button>
+    </div>
+</div>

package/src/lib/audit-log/audit-log-view-model/audit-log-view-model.component.scss

@@ -0,0 +1,4 @@
+.scroll-container{
+    max-height: 400px;
+    overflow: auto;
+}

package/src/lib/audit-log/audit-log-view-model/audit-log-view-model.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AuditLogViewModelComponent } from './audit-log-view-model.component';
+
+describe('AuditLogViewComponent', () => {
+  let component: AuditLogViewModelComponent;
+  let fixture: ComponentFixture<AuditLogViewModelComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [AuditLogViewModelComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AuditLogViewModelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});