ngx-techlify-core 11.5.0 → 11.5.2

package/README.md

@@ -1,24 +1,24 @@
-# NgxTechlifyCore
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.1.1.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project ngx-techlify-core` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-techlify-core`.
-> Note: Don't forget to add `--project ngx-techlify-core` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build ngx-techlify-core` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build ngx-techlify-core`, go to the dist folder `cd dist/ngx-techlify-core` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test ngx-techlify-core` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+# NgxTechlifyCore
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.1.1.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ngx-techlify-core` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-techlify-core`.
+> Note: Don't forget to add `--project ngx-techlify-core` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ngx-techlify-core` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ngx-techlify-core`, go to the dist folder `cd dist/ngx-techlify-core` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ngx-techlify-core` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ngx-techlify-core'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx-techlify-core",
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "umdModuleIds": {
+      "ngx-doc-viewer": "ngx-doc-viewer",
+      "ngx-infinite-scroll": "ngx-infinite-scroll",
+      "@ngneat/until-destroy": "@ngneat/until-destroy",
+      "xlsx": "xlsx",
+      "jsondiffpatch": "jsondiffpatch",
+      "ngx-editor": "ngx-editor",
+      "moment": "moment"
+    }
+  },
+  "whitelistedNonPeerDependencies": [
+    "tslib",
+    "material-design-icons-iconfont",
+    "ngx-doc-viewer",
+    "ngx-infinite-scroll",
+    "@ngneat/until-destroy",
+    "jsondiffpatch",
+    "xlsx",
+    "ngx-editor",
+    "moment"
+  ]
+}

package/package.json

@@ -1,37 +1,29 @@
-{
-  "name": "ngx-techlify-core",
-  "version": "11.5.0",
-  "peerDependencies": {
-    "@angular/common": ">=11",
-    "@angular/core": ">=11",
-    "@angular/animations": ">=11",
-    "@angular/compiler": ">=11",
-    "@angular/forms": ">=11",
-    "@angular/platform-browser": ">=11",
-    "@angular/platform-browser-dynamic": ">=11",
-    "@angular/router": ">=11",
-    "@angular/material": ">=11",
-    "@angular/cdk": ">=11",
-    "rxjs": ">=6.6.0",
-    "zone.js": ">=0.11"
-  },
-  "dependencies": {
-    "tslib": "^2.0.0",
-    "material-design-icons-iconfont": "^6.1.0",
-    "ngx-doc-viewer": "^1.4.1",
-    "ngx-infinite-scroll": "^10.0.1",
-    "@ngneat/until-destroy": "^8.0.3",
-    "jsondiffpatch": "^0.4.1",
-    "xlsx": "^0.18.5",
-    "ngx-editor": "^9.0.1",
-    "moment": "^2.29.1"
-  },
-  "main": "bundles/ngx-techlify-core.umd.js",
-  "module": "fesm2015/ngx-techlify-core.js",
-  "es2015": "fesm2015/ngx-techlify-core.js",
-  "esm2015": "esm2015/ngx-techlify-core.js",
-  "fesm2015": "fesm2015/ngx-techlify-core.js",
-  "typings": "ngx-techlify-core.d.ts",
-  "metadata": "ngx-techlify-core.metadata.json",
-  "sideEffects": false
-}
+{
+  "name": "ngx-techlify-core",
+  "version": "11.5.2",
+  "peerDependencies": {
+    "@angular/common": ">=11",
+    "@angular/core": ">=11",
+    "@angular/animations": ">=11",
+    "@angular/compiler": ">=11",
+    "@angular/forms": ">=11",
+    "@angular/platform-browser": ">=11",
+    "@angular/platform-browser-dynamic": ">=11",
+    "@angular/router": ">=11",
+    "@angular/material": ">=11",
+    "@angular/cdk": ">=11",
+    "rxjs": ">=6.6.0",
+    "zone.js": ">=0.11"
+  },
+  "dependencies": {
+    "tslib": "^2.0.0",
+    "material-design-icons-iconfont": "^6.1.0",
+    "ngx-doc-viewer": "^1.4.1",
+    "ngx-infinite-scroll": "^10.0.1",
+    "@ngneat/until-destroy": "^8.0.3",
+    "jsondiffpatch": "^0.4.1",
+    "xlsx": "^0.18.5",
+    "ngx-editor": "^9.0.1",
+    "moment": "^2.29.1"
+  }
+}

package/src/lib/action-popup/action-popup.component.html

@@ -0,0 +1,21 @@
+<div fxLayout="column">
+    <div mat-dialog-title class="text-center">
+        <div>{{data.title}}</div>
+    </div>
+    <div mat-dialog-content fxLayout="column">
+        <div fxLayout="row wrap">
+            <div fxFlex="100%">{{data.message}}</div>
+
+            <div fxFlex="100%" fxLayout="row" fxLayoutGap="1.5rem" fxLayoutAlign="end" class="my-4">
+                <button mat-raised-button (click)="closeDialog()">
+                    Cancel
+                </button>
+                <button mat-raised-button color="primary" (click)="confirm()">
+                    Proceed
+                </button>
+            </div>
+        </div>
+
+    </div>
+
+</div>

package/src/lib/action-popup/action-popup.component.spec.ts

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

package/src/lib/action-popup/action-popup.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ActionPopup } from './action-popup.model';
+
+@Component({
+  selector: 'app-action-popup',
+  templateUrl: './action-popup.component.html',
+  styleUrls: ['./action-popup.component.scss']
+})
+export class ActionPopupComponent implements OnInit {
+
+  constructor(
+    public dialogRef: MatDialogRef<ActionPopupComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: ActionPopup,
+  ) { }
+
+  ngOnInit() {
+  }
+
+  /**Method to close dialog box */
+  closeDialog() {
+    this.dialogRef.close();
+  }
+
+  /**Method to close dialog box with the data given from parent component
+   */
+  confirm() {
+    this.dialogRef.close(this.data);
+  }
+
+}

package/{lib/action-popup/action-popup.model.d.ts → src/lib/action-popup/action-popup.model.ts}

@@ -1,5 +1,5 @@
-export declare class ActionPopup {
-    name: string;
-    title: string;
-    message: string;
-}
+export class ActionPopup {
+    name: string;
+    title: string;
+    message: string;
+}

package/src/lib/action-popup/action-popup.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ActionPopupComponent } from './action-popup.component';
+import { MaterialModule } from '../material.module';
+
+@NgModule({
+  imports: [
+    FlexLayoutModule,
+    CommonModule,
+    MaterialModule
+  ],
+  declarations: [
+    ActionPopupComponent
+  ],
+  exports: [
+    ActionPopupComponent
+  ],
+  entryComponents: [
+    ActionPopupComponent
+  ]
+})
+export class ActionPopupModule { }

package/{lib/action-popup/index.d.ts → src/lib/action-popup/index.ts}

@@ -1,2 +1,2 @@
-export * from './action-popup.component';
-export * from './action-popup.model';
+export * from './action-popup.component';
+export * from './action-popup.model';

package/src/lib/audit-log/audit-log-for-model/audit-log-for-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 AuditLogForModelRoutingModule { }

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

@@ -0,0 +1,9 @@
+<button type="button" *ngIf="logView==='recent'" mat-icon-button matTooltip="Recent Audit Log"
+    (click)="$event.stopPropagation();getLogView()">
+    <mat-icon>history</mat-icon>
+</button>
+
+<button type="button" *ngIf="logView==='all'" mat-icon-button matTooltip="All Audit Logs"
+    (click)="$event.stopPropagation();getLogsView()">
+    <mat-icon>history</mat-icon>
+</button>

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

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

package/src/lib/audit-log/audit-log-for-model/audit-log-for-model.component.ts

@@ -0,0 +1,49 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { AuditLogViewModelComponent } from '../audit-log-view-model/audit-log-view-model.component';
+import { AuditLogsViewModelComponent } from '../audit-logs-view-model/audit-logs-view-model.component';
+
+
+@Component({
+  selector: 'app-audit-log-for-model',
+  templateUrl: './audit-log-for-model.component.html',
+  styleUrls: ['./audit-log-for-model.component.scss']
+})
+export class AuditLogForModelComponent implements OnInit {
+
+  @Input() modelType: string;
+  @Input() modelId: any;
+  @Input() logView: 'recent' | 'all' = 'recent';
+
+  constructor(
+    private dialog: MatDialog,
+  ) { }
+
+  ngOnInit(): void {
+
+  }
+
+  getLogView() {
+    const dialogRef = this.dialog.open(AuditLogViewModelComponent, {
+      width: '800px',
+      autoFocus: false,
+      data: {
+        modelType: this.modelType,
+        modelId: this.modelId
+      } // Any data passed here will be injected into the model
+    });
+  }
+
+  getLogsView() {
+    const dialogRef = this.dialog.open(AuditLogsViewModelComponent, {
+      width: '95%',
+      maxWidth: 'unset',
+      autoFocus: false,
+      data: {
+        modelType: this.modelType,
+        modelId: this.modelId
+      } // Any data passed here will be injected into the model
+    });
+  }
+
+}

package/src/lib/audit-log/audit-log-for-model/audit-log-for-model.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AuditLogForModelRoutingModule } from './audit-log-for-model-routing.module';
+import { AuditLogForModelComponent } from './audit-log-for-model.component';
+import { AuditLogViewModelModule } from '../audit-log-view-model/audit-log-view-model.module';
+import { AuditLogsViewModelModule } from '../audit-logs-view-model/audit-logs-view-model.module';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MaterialModule } from '../../material.module';
+
+
+@NgModule({
+  declarations: [AuditLogForModelComponent],
+  imports: [
+    AuditLogViewModelModule,
+    AuditLogsViewModelModule,
+    CommonModule,
+    AuditLogForModelRoutingModule,
+    FlexLayoutModule,
+    MaterialModule,
+  ],
+  exports: [AuditLogForModelComponent]
+})
+export class AuditLogForModelModule { }

package/src/lib/audit-log/audit-log-list/audit-log-list-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 AuditLogListRoutingModule { }

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

@@ -0,0 +1,92 @@
+<div fxLayout="column" fxLayoutAlign="start" class="mat-typography">
+
+    <div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="1.5rem" class="p-3">
+        <h2 class="font-weight-bold">
+            Audit Logs
+        </h2>
+
+        <div fxLayout="row wrap" fxLayoutAlign="start center">
+            <app-audit-log-list-filter *ngIf="showFilter" (valueChange)="filterChange($event)" [objectType]="objectType"
+                [objectId]="objectId"></app-audit-log-list-filter>
+            <span fxFlex></span>
+
+            <ng-container *ngIf="showExportButtons">
+                <div class="ml-4">
+                    <app-export-excel-button elementId="audit-logs-table" name="AuditLogs" [data]="excelData">
+                    </app-export-excel-button>
+                </div>
+            </ng-container>
+        </div>
+    </div>
+
+    <section class="scroll-container" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50"
+        (scrolled)="onScroll()" [scrollWindow]="false">
+        <table mat-table [dataSource]="auditLogList" matSort class="w-100" multiTemplateDataRows id="audit-logs-table">
+
+            <!-- Index Column -->
+            <ng-container matColumnDef="index">
+                <th mat-header-cell *matHeaderCellDef> # </th>
+                <td mat-cell *matCellDef="let auditLog; let i = dataIndex"> {{ i+1 }} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="id">
+                <th mat-header-cell *matHeaderCellDef> Log # </th>
+                <td mat-cell *matCellDef="let auditLog">
+                    {{auditLog?.id}}
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="object_type">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> Model </th>
+                <td mat-cell *matCellDef="let auditLog;"> {{ auditLog.object_type }} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="object_id">
+                <th mat-header-cell *matHeaderCellDef> Model # </th>
+                <td mat-cell *matCellDef="let auditLog">
+                    {{auditLog?.object_id}}
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="action">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>
+                <td mat-cell *matCellDef="let auditLog;"> {{ auditLog?.action }} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="created_at">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> Created At </th>
+                <td mat-cell *matCellDef="let auditLog">
+                    {{auditLog?.created_at | date:'medium'}}
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="user.email">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> Created By </th>
+                <td mat-cell *matCellDef="let auditLog">
+                    {{auditLog?.user?.email}}
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="changes">
+                <th mat-header-cell *matHeaderCellDef> Changes</th>
+                <td mat-cell *matCellDef="let auditLog">
+                    <div class="px-3" [innerHtml]="sanitizer.bypassSecurityTrustHtml(getTransformedChanges(auditLog))">
+
+                    </div>
+                </td>
+            </ng-container>
+
+            <!-- Actions Column -->
+            <ng-container matColumnDef="actions">
+                <th mat-header-cell *matHeaderCellDef> Actions </th>
+                <td mat-cell *matCellDef="let auditLog">
+                </td>
+            </ng-container>
+            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;"
+                (click)="logClicked(row);$event.stopPropagation();" class="hoverable row-hover"></tr>
+        </table>
+    </section>
+
+
+</div>

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

@@ -0,0 +1,21 @@
+
+
+tr.row-hover:hover{
+    background-color: gainsboro;
+}
+
+.scroll-container{
+    height: 800px;
+    overflow-y: auto;
+}
+
+:host ::ng-deep{
+    #old-value{
+        margin-right: 5px;
+        background-color: lightcoral;
+    }
+
+    #new-value{
+        background-color: palegreen;
+    }
+}

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

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