@memberjunction/ng-record-changes 0.9.1

package/dist/lib/ng-record-changes.component.d.ts

@@ -0,0 +1,21 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { SortDescriptor } from '@progress/kendo-data-query';
+import * as i0 from "@angular/core";
+export declare class RecordChangesComponent implements OnInit {
+    private sanitizer;
+    showloader: boolean;
+    dialogClosed: EventEmitter<any>;
+    record: any;
+    viewData: any;
+    visibleColumns: any;
+    sortSettings: SortDescriptor[];
+    constructor(sanitizer: DomSanitizer);
+    ngOnInit(): void;
+    LoadRecordChanges(recordId: number, appName: string, entityName: string): Promise<void>;
+    prepareColumns(): void;
+    closePropertiesDialog(): void;
+    FormatColumnValue(col: any, value: any, maxLength?: number, trailingChars?: string): any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RecordChangesComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RecordChangesComponent, "mj-record-changes", never, { "record": "record"; }, { "dialogClosed": "dialogClosed"; }, never, never, false, never>;
+}

package/dist/lib/ng-record-changes.component.js

@@ -0,0 +1,170 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { LogError, RunView } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/platform-browser";
+import * as i2 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-grid";
+import * as i4 from "@progress/kendo-angular-dialog";
+import * as i5 from "@progress/kendo-angular-indicators";
+function RecordChangesComponent_kendo_loader_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-loader", 4);
+} }
+function RecordChangesComponent_div_3_kendo_grid_column_4_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 12);
+} if (rf & 2) {
+    const dataItem_r7 = ctx.$implicit;
+    const item_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r6 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("innerHTML", ctx_r6.FormatColumnValue(item_r4, dataItem_r7[item_r4.field]), i0.ɵɵsanitizeHtml);
+} }
+const _c0 = function () { return { "font-weight": "bold", "background-color": "#a9c2af" }; };
+function RecordChangesComponent_div_3_kendo_grid_column_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-grid-column", 10);
+    i0.ɵɵtemplate(1, RecordChangesComponent_div_3_kendo_grid_column_4_ng_template_1_Template, 1, 1, "ng-template", 11);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r4 = ctx.$implicit;
+    i0.ɵɵpropertyInterpolate("field", item_r4.field);
+    i0.ɵɵpropertyInterpolate("title", item_r4.title);
+    i0.ɵɵproperty("width", item_r4.width)("headerStyle", i0.ɵɵpureFunction0(4, _c0));
+} }
+function RecordChangesComponent_div_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5, 6)(2, "div", 7)(3, "kendo-grid", 8);
+    i0.ɵɵtemplate(4, RecordChangesComponent_div_3_kendo_grid_column_4_Template, 2, 5, "kendo-grid-column", 9);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("kendoGridBinding", ctx_r1.viewData)("pageSize", 100)("sortable", true)("sort", ctx_r1.sortSettings)("loading", ctx_r1.showloader)("resizable", true)("navigable", true);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", ctx_r1.visibleColumns);
+} }
+export class RecordChangesComponent {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.showloader = false;
+        this.dialogClosed = new EventEmitter();
+        this.record = {};
+        this.viewData = [];
+        this.visibleColumns = [];
+        this.sortSettings = [
+            {
+                field: "ChangedAt",
+                dir: "desc",
+            },
+        ];
+    }
+    ngOnInit() {
+        if (this.record) {
+            this.showloader = true;
+            this.LoadRecordChanges(this.record.ID, '', this.record.EntityInfo.Name);
+            this.prepareColumns();
+        }
+    }
+    LoadRecordChanges(recordId, appName, entityName) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Perform any necessary actions with the ViewID, such as fetching data
+            if (recordId && entityName) {
+                const rv = new RunView();
+                const response = yield rv.RunView({ EntityName: "Record Changes", ExtraFilter: `Entity='${entityName}' AND RecordID=${recordId}` });
+                if (response.Success) {
+                    this.viewData = response.Results;
+                    this.showloader = false;
+                }
+                else {
+                    LogError(response.ErrorMessage);
+                    this.showloader = false;
+                }
+            }
+        });
+    }
+    prepareColumns() {
+        this.visibleColumns = [{
+                field: 'ChangedAt',
+                title: 'Changed At (UTC)',
+                type: 'datetime',
+                width: 110,
+            },
+            {
+                field: 'ChangesDescription',
+                title: 'Changes',
+                type: 'description',
+            }];
+    }
+    closePropertiesDialog() {
+        this.dialogClosed.emit();
+    }
+    FormatColumnValue(col, value, maxLength = 0, trailingChars = "...") {
+        if (value === null)
+            return null;
+        try {
+            switch (col.type.toLowerCase()) {
+                case 'datetime':
+                    let date = new Date(value);
+                    return new Intl.DateTimeFormat('en-US', {
+                        year: 'numeric',
+                        month: 'short',
+                        day: 'numeric',
+                        hour: 'numeric',
+                        minute: 'numeric',
+                        second: 'numeric',
+                        hour12: true,
+                    }).format(date);
+                case 'int':
+                    return new Intl.NumberFormat(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(value);
+                case 'description':
+                    const regex = /([^ ]+) changed from ([^]+?) to ([^]+?)(?=\n|$)/g;
+                    let formattedDescription = '<ul>';
+                    let match;
+                    while ((match = regex.exec(value)) !== null) {
+                        const fieldName = match[1];
+                        const oldValue = match[2];
+                        const newValue = match[3];
+                        const formattedFieldChange = `<li>${fieldName} changed from <span style="color: darkgray;">${oldValue}</span> to <span style="color: blue;">${newValue}</span></li>`;
+                        formattedDescription += formattedFieldChange;
+                    }
+                    formattedDescription += '</ul>';
+                    return this.sanitizer.bypassSecurityTrustHtml(formattedDescription);
+                default:
+                    return value;
+            }
+        }
+        catch (e) {
+            LogError(e);
+            return value;
+        }
+    }
+}
+RecordChangesComponent.ɵfac = function RecordChangesComponent_Factory(t) { return new (t || RecordChangesComponent)(i0.ɵɵdirectiveInject(i1.DomSanitizer)); };
+RecordChangesComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RecordChangesComponent, selectors: [["mj-record-changes"]], inputs: { record: "record" }, outputs: { dialogClosed: "dialogClosed" }, decls: 4, vars: 7, consts: [[1, "k-overlay"], ["title", "Record Changes", 1, "kendo-window-custom", 3, "width", "height", "minHeight", "minWidth", "resizable", "close"], ["type", "converging-spinner", 4, "ngIf"], ["class", "k-d-flex k-flex-col k-justify-content-between k-h-full", 4, "ngIf"], ["type", "converging-spinner"], [1, "k-d-flex", "k-flex-col", "k-justify-content-between", "k-h-full"], ["dialogContainer", ""], [1, "kendo-grid-container"], ["scrollable", "virtual", 3, "kendoGridBinding", "pageSize", "sortable", "sort", "loading", "resizable", "navigable"], [3, "field", "title", "width", "headerStyle", 4, "ngFor", "ngForOf"], [3, "field", "title", "width", "headerStyle"], ["kendoGridCellTemplate", ""], [3, "innerHTML"]], template: function RecordChangesComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelement(0, "div", 0);
+        i0.ɵɵelementStart(1, "kendo-window", 1);
+        i0.ɵɵlistener("close", function RecordChangesComponent_Template_kendo_window_close_1_listener() { return ctx.closePropertiesDialog(); });
+        i0.ɵɵtemplate(2, RecordChangesComponent_kendo_loader_2_Template, 1, 0, "kendo-loader", 2);
+        i0.ɵɵtemplate(3, RecordChangesComponent_div_3_Template, 5, 8, "div", 3);
+        i0.ɵɵelementEnd();
+    } if (rf & 2) {
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("width", 700)("height", 525)("minHeight", 300)("minWidth", 400)("resizable", true);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx.showloader);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", !ctx.showloader);
+    } }, dependencies: [i2.NgForOf, i2.NgIf, i3.GridComponent, i3.DataBindingDirective, i3.ColumnComponent, i3.CellTemplateDirective, i4.WindowComponent, i5.LoaderComponent] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RecordChangesComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-record-changes', template: "<div class=\"k-overlay\"></div>\r\n<kendo-window \r\n    class=\"kendo-window-custom\"\r\n    [width]=\"700\"\r\n    [height]=\"525\"\r\n    [minHeight]=\"300\"\r\n    [minWidth]=\"400\"\r\n    [resizable]=\"true\"\r\n    title=\"Record Changes\"\r\n    (close)=\"closePropertiesDialog()\"\r\n  >\r\n    <kendo-loader *ngIf=\"showloader\" type=\"converging-spinner\" ></kendo-loader>\r\n    <div class=\"k-d-flex k-flex-col k-justify-content-between k-h-full\" #dialogContainer *ngIf=\"!showloader\">\r\n        <div class=\"kendo-grid-container\">\r\n            <kendo-grid \r\n                [kendoGridBinding]=\"viewData\" \r\n                scrollable=\"virtual\" \r\n                [pageSize]=\"100\" \r\n                [sortable]=\"true\"\r\n                [sort]=\"sortSettings\" \r\n                [loading]=\"showloader\" \r\n                [resizable]=\"true\" \r\n                [navigable]=\"true\"\r\n            >\r\n                <kendo-grid-column \r\n                    *ngFor=\"let item of visibleColumns; let i = index\" \r\n                    field=\"{{item.field}}\"\r\n                    title=\"{{item.title}}\" \r\n                    [width]=\"item.width\"\r\n                    [headerStyle]=\"{ 'font-weight' : 'bold', 'background-color': '#a9c2af' }\"\r\n                >\r\n                    <ng-template kendoGridCellTemplate let-dataItem>\r\n                        <span [innerHTML]=\"FormatColumnValue(item, dataItem[item.field])\"></span>\r\n                    </ng-template>\r\n                </kendo-grid-column>\r\n            </kendo-grid>\r\n        </div>\r\n    </div>\r\n    \r\n</kendo-window>" }]
+    }], function () { return [{ type: i1.DomSanitizer }]; }, { dialogClosed: [{
+            type: Output
+        }], record: [{
+            type: Input
+        }] }); })();

package/dist/lib/ng-record-changes.module.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./ng-record-changes.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@angular/router";
+import * as i5 from "@progress/kendo-angular-grid";
+import * as i6 from "@progress/kendo-angular-dialog";
+import * as i7 from "@progress/kendo-angular-excel-export";
+import * as i8 from "@progress/kendo-angular-buttons";
+import * as i9 from "@memberjunction/ng-compare-records";
+import * as i10 from "@memberjunction/ng-container-directives";
+import * as i11 from "@progress/kendo-angular-indicators";
+export declare class UserViewGridModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<UserViewGridModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UserViewGridModule, [typeof i1.RecordChangesComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i3.ReactiveFormsModule, typeof i4.RouterModule, typeof i5.GridModule, typeof i6.DialogsModule, typeof i7.ExcelExportModule, typeof i8.ButtonsModule, typeof i9.CompareRecordsModule, typeof i10.ContainerDirectivesModule, typeof i11.IndicatorsModule], [typeof i1.RecordChangesComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<UserViewGridModule>;
+}

package/dist/lib/ng-record-changes.module.js

@@ -0,0 +1,64 @@
+import { NgModule } from '@angular/core';
+import { RecordChangesComponent } from './ng-record-changes.component';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+// Kendo UI Angular imports
+import { GridModule } from '@progress/kendo-angular-grid';
+import { ExcelExportModule } from '@progress/kendo-angular-excel-export';
+import { DialogsModule } from "@progress/kendo-angular-dialog";
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { IndicatorsModule } from '@progress/kendo-angular-indicators';
+import { CompareRecordsModule } from '@memberjunction/ng-compare-records';
+import { ContainerDirectivesModule } from '@memberjunction/ng-container-directives';
+import * as i0 from "@angular/core";
+export class UserViewGridModule {
+}
+UserViewGridModule.ɵfac = function UserViewGridModule_Factory(t) { return new (t || UserViewGridModule)(); };
+UserViewGridModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: UserViewGridModule });
+UserViewGridModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        RouterModule,
+        GridModule,
+        DialogsModule,
+        ExcelExportModule,
+        ButtonsModule,
+        CompareRecordsModule,
+        ContainerDirectivesModule,
+        IndicatorsModule] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserViewGridModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [
+                    RecordChangesComponent
+                ],
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    ReactiveFormsModule,
+                    RouterModule,
+                    GridModule,
+                    DialogsModule,
+                    ExcelExportModule,
+                    ButtonsModule,
+                    CompareRecordsModule,
+                    ContainerDirectivesModule,
+                    IndicatorsModule
+                ],
+                exports: [
+                    RecordChangesComponent
+                ]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(UserViewGridModule, { declarations: [RecordChangesComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        RouterModule,
+        GridModule,
+        DialogsModule,
+        ExcelExportModule,
+        ButtonsModule,
+        CompareRecordsModule,
+        ContainerDirectivesModule,
+        IndicatorsModule], exports: [RecordChangesComponent] }); })();

package/dist/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/ng-record-changes.component';
+export * from './lib/ng-record-changes.module';

package/dist/public-api.js

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of ng-user-view-grid
+ */
+export * from './lib/ng-record-changes.component';
+export * from './lib/ng-record-changes.module';

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@memberjunction/ng-record-changes",
+  "version": "0.9.1",
+  "description": "MemberJunction: Angular pop-up window and grid to show changes made to a specific individual record",
+  "main": "./dist/public-api.js",
+  "typings": "./dist/public-api.d.ts",
+  "files": [
+    "/dist"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "ngc"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@angular/compiler": "^15.2.0",
+    "@angular/compiler-cli": "^15.2.0"
+  },
+  "peerDependencies": {
+    "@angular/common": "^15.2.0",
+    "@angular/core": "^15.2.0",
+    "@angular/forms": "^15.2.0",
+    "@angular/router": "^15.2.0",
+    "@progress/kendo-angular-grid": "^12.1.0"
+  },
+  "dependencies": {
+    "@memberjunction/global": "^0.9.62",
+    "@memberjunction/core": "^0.9.59",
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}