@memberjunction/ng-record-changes 0.9.34 → 0.9.36

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

@@ -1,13 +1,14 @@
 import { EventEmitter, OnInit, Renderer2, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { SortDescriptor } from '@progress/kendo-data-query';
+import { BaseEntity } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 export declare class RecordChangesComponent implements OnInit, AfterViewInit, OnDestroy {
     private sanitizer;
     private renderer;
     showloader: boolean;
     dialogClosed: EventEmitter<any>;
-    record: any;
+    record: BaseEntity;
     wrapper: ElementRef;
     viewData: any;
     visibleColumns: any;
@@ -19,7 +20,13 @@ export declare class RecordChangesComponent implements OnInit, AfterViewInit, On
     LoadRecordChanges(recordId: number, appName: string, entityName: string): Promise<void>;
     prepareColumns(): void;
     closePropertiesDialog(): void;
-    FormatColumnValue(col: any, value: any, maxLength?: number, trailingChars?: string): any;
+    FormatColumnValue(col: any, value: any, dataItem: any, maxLength?: number, trailingChars?: string): any;
+    protected fieldMarkup(fieldName: string): string;
+    protected valueMarkup(changeInfo: {
+        field: string;
+        oldValue: any;
+        newValue: any;
+    }, isOldValue: boolean): string;
     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

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
-import { LogError, RunView } from '@memberjunction/core';
+import { EntityFieldTSType, LogError, RunView } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/platform-browser";
 import * as i2 from "@angular/common";
@@ -25,7 +25,7 @@ function RecordChangesComponent_div_5_kendo_grid_column_4_ng_template_1_Template
     const dataItem_r8 = ctx.$implicit;
     const item_r5 = i0.ɵɵnextContext().$implicit;
     const ctx_r7 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("innerHTML", ctx_r7.FormatColumnValue(item_r5, dataItem_r8[item_r5.field]), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", ctx_r7.FormatColumnValue(item_r5, dataItem_r8[item_r5.field], dataItem_r8), i0.ɵɵsanitizeHtml);
 } }
 const _c1 = function () { return { "font-weight": "bold", "background-color": "#a9c2af" }; };
 function RecordChangesComponent_div_5_kendo_grid_column_4_Template(rf, ctx) { if (rf & 1) {
@@ -55,7 +55,6 @@ export class RecordChangesComponent {
         this.renderer = renderer;
         this.showloader = false;
         this.dialogClosed = new EventEmitter();
-        this.record = {};
         this.viewData = [];
         this.visibleColumns = [];
         this.sortSettings = [
@@ -102,9 +101,9 @@ export class RecordChangesComponent {
     prepareColumns() {
         this.visibleColumns = [{
                 field: 'ChangedAt',
-                title: 'Changed At (UTC)',
+                title: 'Date',
                 type: 'datetime',
-                width: 110,
+                width: 175,
             },
             {
                 field: 'ChangesDescription',
@@ -115,37 +114,56 @@ export class RecordChangesComponent {
     closePropertiesDialog() {
         this.dialogClosed.emit();
     }
-    FormatColumnValue(col, value, maxLength = 0, trailingChars = "...") {
+    FormatColumnValue(col, value, dataItem, maxLength = 0, trailingChars = "...") {
         if (value === null)
             return null;
         try {
             switch (col.type.toLowerCase()) {
                 case 'datetime':
-                    let date = new Date(value);
+                    let utcDate = new Date(value); // UTC date
+                    // Calculate the local timezone offset and adjust the date
+                    const localDate = new Date(utcDate.getTime() - utcDate.getTimezoneOffset() * 60000);
                     return new Intl.DateTimeFormat('en-US', {
                         year: 'numeric',
                         month: 'short',
                         day: 'numeric',
                         hour: 'numeric',
                         minute: 'numeric',
-                        second: 'numeric',
                         hour12: true,
-                    }).format(date);
+                    }).format(localDate);
                 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;
+                    // while the database stores a description, it is easier to use the ChangesJSON field to get the structured data and then generate our HTML
+                    const json = JSON.parse(dataItem.ChangesJSON);
+                    if (!json)
+                        return value;
+                    else {
+                        const fields = Object.keys(json); // each field that was changed is a key in the JSON object
+                        let formattedDescription = '<div>';
+                        for (let i = 0; i < fields.length; i++) {
+                            const changeInfo = json[fields[i]];
+                            const field = this.record.EntityInfo.Fields.find((f) => { var _a; return f.Name.trim().toLowerCase() === ((_a = changeInfo.field) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase()); });
+                            let innerDescription = "";
+                            if (field) {
+                                // we have field metadata, so we can use that 
+                                if (field.TSType === EntityFieldTSType.Boolean) {
+                                    // for boolean fields, it is cleaner to just show new value, no need to show old value as it is always the opposite
+                                    innerDescription = `${this.fieldMarkup(field.DisplayNameOrName)} set to ${this.valueMarkup(changeInfo, false)}`;
+                                }
+                                else {
+                                    innerDescription = `${this.fieldMarkup(field.DisplayNameOrName)} changed from ${this.valueMarkup(changeInfo, true)} to ${this.valueMarkup(changeInfo, false)}`;
+                                }
+                            }
+                            else {
+                                // we don't have field metadata - this could happen if a field was removed or renamed after a record change was recorded in the database, so just use what we have
+                                innerDescription = `${this.fieldMarkup(changeInfo.field)} changed from ${this.valueMarkup(changeInfo, true)}} to ${this.valueMarkup(changeInfo, false)}`;
+                            }
+                            formattedDescription += `<div>${innerDescription}</div>`;
+                        }
+                        formattedDescription += '</div>';
+                        return this.sanitizer.bypassSecurityTrustHtml(formattedDescription);
                     }
-                    formattedDescription += '</ul>';
-                    return this.sanitizer.bypassSecurityTrustHtml(formattedDescription);
                 default:
                     return value;
             }
@@ -155,6 +173,12 @@ export class RecordChangesComponent {
             return value;
         }
     }
+    fieldMarkup(fieldName) {
+        return `<b>${fieldName}</b>`;
+    }
+    valueMarkup(changeInfo, isOldValue) {
+        return `<span style="color: ${isOldValue ? 'darkgray' : 'blue'};">${isOldValue ? changeInfo.oldValue : changeInfo.newValue}</span>`;
+    }
 }
 RecordChangesComponent.ɵfac = function RecordChangesComponent_Factory(t) { return new (t || RecordChangesComponent)(i0.ɵɵdirectiveInject(i1.DomSanitizer), i0.ɵɵdirectiveInject(i0.Renderer2)); };
 RecordChangesComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RecordChangesComponent, selectors: [["mj-record-changes"]], viewQuery: function RecordChangesComponent_Query(rf, ctx) { if (rf & 1) {
@@ -180,7 +204,7 @@ RecordChangesComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Reco
     } }, 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 #recordChangesWrapper>\r\n    <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    </kendo-window>\r\n</div>" }]
+        args: [{ selector: 'mj-record-changes', template: "<div #recordChangesWrapper>\r\n    <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], dataItem)\"></span>\r\n                        </ng-template>\r\n                    </kendo-grid-column>\r\n                </kendo-grid>\r\n            </div>\r\n        </div>\r\n    </kendo-window>\r\n</div>" }]
     }], function () { return [{ type: i1.DomSanitizer }, { type: i0.Renderer2 }]; }, { dialogClosed: [{
             type: Output
         }], record: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-record-changes",
-  "version": "0.9.34",
+  "version": "0.9.36",
   "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",
@@ -26,8 +26,8 @@
     "@progress/kendo-angular-grid": "^12.1.0"
   },
   "dependencies": {
-    "@memberjunction/core": "^0.9.96",
-    "@memberjunction/global": "^0.9.98",
+    "@memberjunction/core": "^0.9.99",
+    "@memberjunction/global": "^0.9.101",
     "@memberjunction/ng-compare-records": "^0.9.69",
     "@memberjunction/ng-container-directives": "^0.9.45",
     "tslib": "^2.3.0"