@genesislcap/pbc-reporting-ui 1.0.381 → 1.0.382

package/dist/dts/new/main/generated-reports/generated-reports.d.ts

@@ -10,7 +10,6 @@ export declare class GeneratedReports extends GenesisElement {
     getStatusRenderer: (value: any) => string;
     getColumnDefs(): ColDef<any>[];
     getGridOptions(): GridOptionsConfig;
-    private actionsCellRenderer;
     private downloadReport;
     private deleteReport;
 }

package/dist/dts/new/main/generated-reports/generated-reports.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generated-reports.d.ts","sourceRoot":"","sources":["../../../../../src/new/main/generated-reports/generated-reports.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA4C,MAAM,yBAAyB,CAAC;AAC3F,OAAO,EAAE,OAAO,EAAU,MAAM,+BAA+B,CAAC;AAEhE,OAAO,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAC1F,OAAO,EAAiB,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAQtE,qBAKa,gBAAiB,SAAQ,cAAc;IACzC,OAAO,EAAE,OAAO,CAAC;IAC1B,0BAA0B,EAAE,wBAAwB,CAAC;IACrD,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IAEjC,QAAQ,qGAYN;IAEF,iBAAiB,yBAEf;IAEF,aAAa;IAuDb,cAAc;IA6Bd,OAAO,CAAC,mBAAmB;YAab,cAAc;YAkCd,YAAY;CAmC3B"}
+{"version":3,"file":"generated-reports.d.ts","sourceRoot":"","sources":["../../../../../src/new/main/generated-reports/generated-reports.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA4C,MAAM,yBAAyB,CAAC;AAC3F,OAAO,EAAE,OAAO,EAAU,MAAM,+BAA+B,CAAC;AAEhE,OAAO,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAC1F,OAAO,EAAiB,cAAc,EAAQ,MAAM,uBAAuB,CAAC;AAQ5E,qBAKa,gBAAiB,SAAQ,cAAc;IACzC,OAAO,EAAE,OAAO,CAAC;IAC1B,0BAA0B,EAAE,wBAAwB,CAAC;IACrD,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IAEjC,QAAQ,qGAYN;IAEF,iBAAiB,yBAEf;IAEF,aAAa;IAkEb,cAAc;YA6BA,cAAc;YAkCd,YAAY;CAmC3B"}

package/dist/dts/new/utils/renderer.d.ts

@@ -1,3 +1,3 @@
-export declare const cellIconCreator: (icon: string, variant?: string, color?: string) => HTMLElement;
-export declare const actionsContainerCell: (justifyContent?: string) => HTMLDivElement;
+import { ColDef } from '@ag-grid-community/core';
+export declare const buttonCellRenderer: (title: any, clickHandler: any, contentTemplate: any) => ColDef;
 //# sourceMappingURL=renderer.d.ts.map

package/dist/dts/new/utils/renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../../../src/new/utils/renderer.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,SACpB,MAAM,kDAmBb,CAAC;AAEF,eAAO,MAAM,oBAAoB,oBAAoB,MAAM,mBAS1D,CAAC"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../../../src/new/utils/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,eAAO,MAAM,kBAAkB,2DAA2C,MA2BxE,CAAC"}

package/dist/esm/new/main/generated-reports/generated-reports.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
 import { Connect, logger } from '@genesislcap/foundation-comms';
 import { showNotificationToast } from '@genesislcap/foundation-notifications';
-import { customElement, GenesisElement } from '@genesislcap/web-core';
+import { customElement, GenesisElement, html } from '@genesislcap/web-core';
 import { getFilterParams } from '../../utils/date-filter-params';
 import { getEndpointUrl } from '../../utils/endpoint';
 import { getFormattedDateTime } from '../../utils/formatters';
-import { actionsContainerCell, cellIconCreator } from '../../utils/renderer';
+import { buttonCellRenderer } from '../../utils/renderer';
 import { GeneratedReportsStyles as styles } from './generated-reports.styles';
 import { GeneratedReportsTemplate as template } from './generated-reports.template';
 let GeneratedReports = class GeneratedReports extends GenesisElement {
@@ -64,21 +64,24 @@ let GeneratedReports = class GeneratedReports extends GenesisElement {
                 headerName: 'Created Date',
                 minWidth: 150,
                 flex: 1,
+                sortable: true,
+                sort: 'desc',
                 cellStyle: { display: 'flex' },
                 filter: 'agDateColumnFilter',
                 filterParams: getFilterParams(),
                 valueFormatter: (rowData) => getFormattedDateTime(rowData.data.LAST_UPDATED_AT),
             },
-            {
-                field: 'Actions',
-                filter: false,
-                pinned: 'right',
-                minWidth: 110,
-                maxWidth: 110,
-                flex: 1,
-                cellStyle: { display: 'flex', alignItems: 'center' },
-                cellRenderer: (params) => this.actionsCellRenderer(params),
-            },
+            buttonCellRenderer('Delete', (e) => this.deleteReport(e.GENERATED_REPORT_ID), html `
+          <rapid-icon
+            style="opacity: 0.5"
+            variant="regular"
+            name="trash-alt"
+            size="lg"
+          ></rapid-icon>
+        `),
+            buttonCellRenderer('Download', (e) => this.downloadReport(e.REPORT_FILE_STORAGE_ID), html `
+          <rapid-icon style="opacity: 0.5" variant="solid" name="download" size="lg"></rapid-icon>
+        `),
         ];
         return columnDefs;
     }
@@ -88,7 +91,6 @@ let GeneratedReports = class GeneratedReports extends GenesisElement {
                 filter: true,
                 floatingFilter: false,
                 sortable: false,
-                sort: 'asc',
                 suppressMenu: false,
                 resizable: false,
             },
@@ -110,15 +112,6 @@ let GeneratedReports = class GeneratedReports extends GenesisElement {
         };
         return gridOptions;
     }
-    actionsCellRenderer(params) {
-        const deleteIcon = cellIconCreator('trash-alt');
-        const downloadIcon = cellIconCreator('download', 'solid');
-        downloadIcon.addEventListener('click', () => this.downloadReport(params.data.REPORT_FILE_STORAGE_ID));
-        deleteIcon.addEventListener('click', () => this.deleteReport(params.data.GENERATED_REPORT_ID));
-        const container = actionsContainerCell();
-        container.append(deleteIcon, downloadIcon);
-        return container;
-    }
     async downloadReport(fileStorageId) {
         const headers = new Headers();
         headers.append('SESSION_AUTH_TOKEN', sessionStorage.getItem('authToken') || '');

package/dist/esm/new/utils/renderer.js

@@ -1,25 +1,26 @@
-export const cellIconCreator = (icon, variant = 'regular', color = `var(--neutral-foreground-hint)`) => {
-    const cellIcon = document.createElement('rapid-icon');
-    cellIcon.setAttribute('name', icon);
-    cellIcon.setAttribute('size', '1x');
-    cellIcon.setAttribute('variant', variant);
-    cellIcon.style.display = 'flex';
-    cellIcon.style.alignItems = 'center';
-    cellIcon.style.justifyContent = 'center';
-    cellIcon.style.background = `var(--neutral-layer-2)`;
-    cellIcon.style.color = color;
-    cellIcon.style.borderRadius = '2px';
-    cellIcon.style.cursor = 'pointer';
-    cellIcon.style.width = '24px';
-    cellIcon.style.height = '24px';
-    return cellIcon;
-};
-export const actionsContainerCell = (justifyContent = 'center') => {
-    const container = document.createElement('div');
-    container.style.display = 'flex';
-    container.style.height = '100%';
-    container.style.gap = '10px';
-    container.style.justifyContent = justifyContent;
-    container.style.alignItems = 'center';
-    return container;
-};
+export const buttonCellRenderer = (title, clickHandler, contentTemplate) => ({
+    colId: `action-${title}`,
+    width: 50,
+    pinned: 'right',
+    enableCellChangeFlash: false,
+    cellStyle: { padding: '0', lineHeight: '25px' },
+    filter: false,
+    suppressFiltersToolPanel: true,
+    suppressColumnsToolPanel: true,
+    headerName: '',
+    minWidth: 35,
+    maxWidth: 35,
+    resizable: false,
+    cellRendererSelector: (params) => params.node.group
+        ? undefined
+        : {
+            component: 'action',
+            params: {
+                actionClick: clickHandler,
+                actionName: title,
+                contentTemplate,
+                appearance: 'neutral',
+                actionButtonStyle: 'width: 24px; height: 24px; min-width: 24px; border: none; background: var(--neutral-layer-2);',
+            },
+        },
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/pbc-reporting-ui",
   "description": "Genesis PBC Reporting UI",
-  "version": "1.0.381",
+  "version": "1.0.382",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/dts/index.d.ts",