@pongrass/utils 1.0.1-v20 → 1.0.3-v20

package/README.md

@@ -81,6 +81,36 @@ export class YourModule { }
 - **DecimalInputDirective** - Restricts input to decimal values
 - **MultiSelectStylerDirective** - Applies custom styling to multi-select components
 - **ShowTooltipIfTruncatedDirective** - Shows a tooltip when text is truncated
+- **BackgroundImageDirective** - Adds background images to elements with optional random selection
+
+### BackgroundImageDirective
+
+Adds background images to elements with support for random image selection from a list.
+
+#### Inputs
+
+- `backgroundImage` (string | string[]) - Path to a single background image or array of image paths
+- `random` (boolean) - Flag to enable random image selection from array (defaults to false)
+
+#### Usage
+
+```html
+<!-- Single background image -->
+<div appBackgroundImage [backgroundImage]="'assets/background1.jpg'"></div>
+
+<!-- Random background image from a list -->
+<div appBackgroundImage 
+     [random]="true" 
+     [backgroundImage]="['assets/background1.jpg', 'assets/background2.jpg', 'assets/background3.jpg']">
+</div>
+
+<!-- First image from a list (random=false) -->
+<div appBackgroundImage 
+     [backgroundImage]="['assets/background1.jpg', 'assets/background2.jpg', 'assets/background3.jpg']">
+</div>
+```
+
+Place your background images in your application's assets folder and reference them using the directive.
 
 ## Available Services
 

package/fesm2022/pongrass-utils.mjs

@@ -21,6 +21,7 @@ import { AgGridModule } from '@ag-grid-community/angular';
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
 import { ModuleRegistry, _EditCoreModule } from '@ag-grid-community/core';
 import { CsvExportModule } from '@ag-grid-community/csv-export';
+import * as ExcelJS from 'exceljs';
 
 class ConfigurationServiceLib {
     currentTablePreference;
@@ -1246,7 +1247,6 @@ class MultiFormComponent {
     ngOnInit() {
         this.buildFormControls();
         this.saveInitialFormValues();
-        console.log('config ->>>', this.configurationService);
     }
     ngOnChanges(changes) {
         if (changes['config'] && !changes['config'].isFirstChange()) {
@@ -2127,6 +2127,385 @@ class ITableGridPagination {
     paginationPageSizeSelector = this.configurationService.allConfigValues()?.tableGridConfig.defaultPageSizeSelector || false;
 }
 
+class BackgroundImageDirective {
+    el = inject(ElementRef);
+    /**
+     * Flag to enable random background selection
+     * Defaults to false
+     */
+    random = false;
+    /**
+     * Path to the background image (string) or images (string[])
+     */
+    backgroundImage = '';
+    ngOnInit() {
+        this.setBackgroundImage();
+    }
+    setBackgroundImage() {
+        let imageUrl = '';
+        if (typeof this.backgroundImage === 'string') {
+            // Single image path
+            imageUrl = this.backgroundImage;
+        }
+        else if (Array.isArray(this.backgroundImage) && this.backgroundImage.length > 0) {
+            // Array of image paths
+            if (this.random) {
+                // Select a random image from the array
+                const randomIndex = Math.floor(Math.random() * this.backgroundImage.length);
+                imageUrl = this.backgroundImage[randomIndex];
+            }
+            else {
+                // Use the first image in the array
+                imageUrl = this.backgroundImage[0];
+            }
+        }
+        if (imageUrl) {
+            this.el.nativeElement.style.backgroundImage = `url('${imageUrl}')`;
+            this.el.nativeElement.style.backgroundSize = 'cover';
+            this.el.nativeElement.style.backgroundPosition = 'center';
+            this.el.nativeElement.style.backgroundRepeat = 'no-repeat';
+            this.el.nativeElement.style.minHeight = '100vh';
+            this.el.nativeElement.style.width = '100%';
+            this.el.nativeElement.style.margin = '0';
+            this.el.nativeElement.style.display = 'block';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: BackgroundImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: BackgroundImageDirective, isStandalone: true, selector: "[appBackgroundImage]", inputs: { random: "random", backgroundImage: "backgroundImage" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: BackgroundImageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appBackgroundImage]',
+                    standalone: true
+                }]
+        }], propDecorators: { random: [{
+                type: Input
+            }], backgroundImage: [{
+                type: Input
+            }] } });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// Output: "2024-10-02 15:43:58"
+function convertToISOnString(date) {
+    if (!date)
+        return '';
+    const dateString = date instanceof Date ? date.toISOString() : date;
+    if (dateString.includes('T')) {
+        return dateString.replace('T', ' ').split('.')[0];
+    }
+    return dateString;
+}
+// defaultDateFormat = 'DD/MM/YYYY';
+// Output: "02/10/2024"
+function regionalDateFormat(date) {
+    if (!date)
+        return '';
+    const config = window.config;
+    const month = ('0' + (date.getMonth() + 1)).slice(-2);
+    const day = ('0' + date.getDate()).slice(-2);
+    const year = date.getFullYear();
+    switch (config.defaultDateFormat) {
+        case 'MM/DD/YYYY':
+            return `${month}/${day}/${year}`;
+        case 'DD/MM/YYYY':
+            return `${day}/${month}/${year}`;
+        case 'YYYY/MM/DD':
+            return `${year}/${month}/${day}`;
+        default:
+            return `${month}/${day}/${year}`;
+    }
+}
+// convertIsoToFormat(date, 'YYYY/MM/DD');
+// Output: "2024/10/02"
+function convertIsoToFormat(date, dateFormat) {
+    if (!date)
+        return '';
+    const config = window.config;
+    let format;
+    if (dateFormat)
+        format = dateFormat;
+    else
+        format = config.defaultDateFormat;
+    const dateObj = new Date(date);
+    const year = dateObj.getFullYear();
+    const month = String(dateObj.getMonth() + 1).padStart(2, '0');
+    const day = String(dateObj.getDate()).padStart(2, '0');
+    return format.replace('YYYY', String(year)).replace('MM', month).replace('DD', day);
+}
+// Output: 'Oct 2, 2024, 3:43:58 PM'
+function convertDateShort(dateString) {
+    if (!dateString) {
+        return '';
+    }
+    const date = new Date(dateString);
+    return date.toLocaleString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: true
+    });
+}
+
+var ExportToExcelNames;
+(function (ExportToExcelNames) {
+    ExportToExcelNames["ProdStatusReport"] = "Prod_Status_Report";
+    ExportToExcelNames["NationalROPReport"] = "National ROP Report";
+    ExportToExcelNames["NationalInserts"] = "National Inserts";
+    ExportToExcelNames["ApprovedAdList"] = "Approved Ad List";
+    ExportToExcelNames["PageStatusReport"] = "Page Status Report";
+})(ExportToExcelNames || (ExportToExcelNames = {}));
+var ExcelType;
+(function (ExcelType) {
+    ExcelType["excelBlobType"] = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+    ExcelType["xlsxBookType"] = "xlsx";
+})(ExcelType || (ExcelType = {}));
+
+class UtilsService {
+    configurationServiceLib = inject(ConfigurationServiceLib);
+    toastrService = inject(ToastrService);
+    allConfigValues = this.configurationServiceLib.allConfigValues() || {};
+    constructor() { }
+    formatToTwoDecimalPlaces(value, decimalPlaces) {
+        if (value !== undefined && value !== null) {
+            const numValue = Number(value);
+            if (!isNaN(numValue)) {
+                return numValue.toFixed(decimalPlaces || 2);
+            }
+        }
+        return value?.toString() || '';
+    }
+    // Truncate values to precision
+    truncateFloat(value, precision) {
+        const num = Number(value);
+        if (isNaN(num))
+            return '';
+        const factor = Math.pow(10, precision);
+        const truncated = Math.trunc(num * factor) / factor;
+        return truncated.toFixed(precision);
+    }
+    /**
+     *
+     * @param excelData Table data to export
+     * @param columns Array of Column keys and label '{ keys: '_key', label: '_label' }'
+     * @param excelFileName Name of the excel file 'Example FileName_export_1740978888354'
+     * @param headers (Optional) Adds Extra headings on top of the columns
+     * @param showTotalValueCols (Optional) Calculates and shows the total of all the values of that column
+     * @param columnAlignment (Optional) Aligns the cell value (currently only to right side)
+     */
+    async exportAsExcelFile(excelData, columns, excelFileName, headers, showTotalValueCols, columnAlignment) {
+        // this.loaderService.show();
+        const workbook = new ExcelJS.Workbook();
+        const worksheet = workbook.addWorksheet(excelFileName);
+        // const currentRow = 1;
+        // if (headers) {
+        //   headers.forEach((header: IExcelHeaders) => {
+        //     worksheet.mergeCells(`A${currentRow}:K${currentRow}`);
+        //     worksheet.getCell(`A${currentRow}`).value = header.heading;
+        //     worksheet.getCell(`A${currentRow}`).alignment = { horizontal: header.alignment, wrapText: true };
+        //     worksheet.getCell(`A${currentRow}`).font = { bold: header.bold, size: header.fontSize || 14 };
+        //     currentRow++;
+        //   });
+        //   worksheet.addRow({});
+        // }
+        const columnLabels = columns.map(col => col.label);
+        const columnKeys = columns.map(col => col.key);
+        const headerRow = worksheet.addRow(columnLabels);
+        headerRow.eachCell(cell => {
+            cell.font = { bold: true, size: 12 };
+        });
+        // Prepare worksheet data and add it to the worksheet
+        const worksheetData = this.prepareWorksheetData(excelData, columns);
+        worksheetData.forEach(dataRow => {
+            const rowInstance = worksheet.addRow(Object.values(dataRow));
+            // Align specific columns based on columnAlignment parameter
+            if (columnAlignment?.align === 'end' && columnAlignment.headers.length > 0) {
+                rowInstance.eachCell((cell, colNumber) => {
+                    const columnKey = columnKeys[colNumber - 1]; // Match index with headers
+                    if (columnAlignment.headers.includes(columnKey)) {
+                        cell.alignment = { horizontal: 'right' };
+                    }
+                });
+            }
+        });
+        // Calculate total for specified columns
+        if (showTotalValueCols && showTotalValueCols.length > 0) {
+            const totalRow = {};
+            columns.forEach(col => {
+                if (showTotalValueCols.includes(col.key)) {
+                    totalRow[col.label] = excelData.reduce((sum, row) => sum + (Number(row[col.key]) || 0), 0);
+                }
+                else {
+                    totalRow[col.label] = ''; // Empty for non-total columns
+                }
+            });
+            const totalRowInstance = worksheet.addRow(Object.values(totalRow));
+            totalRowInstance.eachCell((cell, colNumber) => {
+                cell.font = { bold: true, color: { argb: '000' }, size: 12 };
+                cell.alignment = { horizontal: 'left' };
+                cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFFF00' } };
+                cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };
+                // Apply right alignment for specified total columns
+                const columnKey = columnKeys[colNumber - 1];
+                if (columnAlignment?.headers.includes(columnKey)) {
+                    cell.alignment = { horizontal: 'right' };
+                }
+            });
+        }
+        // Set column widths
+        columns.forEach((col, index) => {
+            worksheet.getColumn(index + 1).width = 15;
+        });
+        // Generate Excel file and save
+        const buffer = await workbook.xlsx.writeBuffer();
+        this.saveAsExcelFile(buffer, excelFileName);
+    }
+    /** Prepare Data for Excel Export*/
+    prepareWorksheetData(data, columns) {
+        const rows = data.map(row => {
+            const formattedRow = {};
+            columns.forEach(col => {
+                formattedRow[col.label] = row[col.key];
+            });
+            return formattedRow;
+        });
+        return [...rows];
+    }
+    /** Save Buffer File */
+    saveAsExcelFile(buffer, fileName) {
+        const data = new Blob([buffer], { type: ExcelType.excelBlobType });
+        const url = window.URL.createObjectURL(data);
+        const link = document.createElement('a');
+        link.href = url;
+        const unique = Math.random().toString(36).substring(2, 8).toUpperCase();
+        link.download = `${fileName}_${convertIsoToFormat(new Date())}_${unique}.${ExcelType.xlsxBookType}`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+        setTimeout(() => {
+            // this.loaderService.hide();
+            this.toastrService.success(`${link.download} file downloaded successfully`, 'Success');
+        }, 500);
+    }
+    /** Print Page Status Report */
+    printHTMLTable(columns, data, headers, showTotalValueCols) {
+        let headersAndHeadings = '';
+        if (headers) {
+            headersAndHeadings = this.generateHeaderHTML(headers);
+        }
+        const headerHTML = `<tr>${columns
+            .map(col => `<th style="border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2;">${col.label}</th>`)
+            .join('')}</tr>`;
+        const bodyHTML = data
+            .map((row, index) => {
+            const rowStyle = index % 2 === 0 ? 'background-color: #f9f9f9;' : 'background-color: #e9ecef;';
+            const rowHTML = columns
+                .map(col => {
+                const cellBackground = col.key === 'page_status_name' ? `background-color: ${row?.html_color || ''};` : '';
+                return `<td style="border: 1px solid #ddd; padding: 8px; ${cellBackground}}">${row[col.key] !== null ? row[col.key] : ''}</td>`;
+            })
+                .join('');
+            return `<tr style="${rowStyle}">${rowHTML}</tr>`;
+        })
+            .join('');
+        // Generate Footer Row with Totals
+        let footerHTML = '';
+        if (showTotalValueCols && showTotalValueCols.length > 0) {
+            const totalRow = columns
+                .map(col => {
+                if (showTotalValueCols.includes(col.key)) {
+                    const total = data.reduce((sum, row) => sum + (Number(row[col.key]) || 0), 0);
+                    return `<td style="border: 1px solid #ddd; padding: 8px; background-color: yellow; font-weight: bold;">${this.formatToTwoDecimalPlaces(total)}</td>`;
+                }
+                return `<td style="border: 1px solid #ddd; padding: 8px; background-color: yellow;"></td>`; // Empty but styled
+            })
+                .join('');
+            footerHTML = `<tr>${totalRow}</tr>`;
+        }
+        const tableHTML = `
+      <table style="width: 100%; border-collapse: collapse;">
+        <thead>${headerHTML}</thead>
+        <tbody>${bodyHTML}</tbody>
+        <tfoot>${footerHTML}</tfoot>
+      </table>
+    `;
+        // Create a new window for printing
+        const printWindow = window.open('', '', 'width=800, height=600');
+        if (printWindow) {
+            printWindow.document.write(`
+        <html>
+          <head>
+            <style>
+              @media print {
+                @page {
+                  size: landscape; 
+                }
+                body {
+                  -webkit-print-color-adjust: exact; 
+                  print-color-adjust: exact; 
+                }
+                table { width: 100%; border-collapse: collapse; }
+                th, td { border: 1px solid black; padding: 10px; }
+                th { background-color: #f2f2f2; }
+                p { margin: 0; padding: 0; }
+              }
+            </style>
+          </head>
+          <body>
+            <title>Report</title>
+            ${headersAndHeadings} 
+            ${tableHTML}
+            <script type="text/javascript">
+              window.onload = function() {
+                window.print();
+                window.onafterprint = window.close();
+              };
+            </script>
+          </body>
+        </html>
+      `);
+            printWindow.document.close();
+            printWindow.focus();
+        }
+    }
+    // Function to generate header HTML from headers array
+    generateHeaderHTML(headers) {
+        return headers
+            .map(header => {
+            let style = '';
+            if (header.alignment) {
+                style += `text-align: ${header.alignment};`;
+            }
+            if (header.bold) {
+                style += 'font-weight: bold;';
+            }
+            if (header.fontSize) {
+                style += `font-size: ${header.fontSize}px;`;
+            }
+            if (header.marginBottom) {
+                style += `margin-bottom: ${header.marginBottom}px;`;
+            }
+            if (header.marginTop) {
+                style += `margin-bottom: ${header.marginTop}px;`;
+            }
+            return `<p style="${style}">${header.heading}</p>`;
+        })
+            .join('');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: UtilsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: UtilsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 /*
  * Public API Surface of utils
  */
@@ -2135,5 +2514,5 @@ class ITableGridPagination {
  * Generated bundle index. Do not edit.
  */
 
-export { CheckboxCellRendererComponent, CircularFocusDirective, ColorCellRendererComponent, CommentsButtonCellRendererComponent, ConfigurationServiceLib, CustomSelectFilterComponent, DecimalInputDirective, EditionListGroupedComponent, FormFieldType, GenericFilterModelComponent, ITableGridConfiguration, ITableGridPagination, IndustryUpdateListboxCellRendererComponent, MultiFormComponent, MultiFormModule, MultiSelectStylerDirective, PageStatusCellRendererComponent, ShowTooltipIfTruncatedDirective, StatusSelectCellRendererComponent, TableGridComponent, TableGridModule };
+export { BackgroundImageDirective, CheckboxCellRendererComponent, CircularFocusDirective, ColorCellRendererComponent, CommentsButtonCellRendererComponent, ConfigurationServiceLib, CustomSelectFilterComponent, DecimalInputDirective, EditionListGroupedComponent, ExcelType, ExportToExcelNames, FormFieldType, GenericFilterModelComponent, ITableGridConfiguration, ITableGridPagination, IndustryUpdateListboxCellRendererComponent, MultiFormComponent, MultiFormModule, MultiSelectStylerDirective, PageStatusCellRendererComponent, ShowTooltipIfTruncatedDirective, StatusSelectCellRendererComponent, TableGridComponent, TableGridModule, UtilsService, convertDateShort, convertIsoToFormat, convertToISOnString, regionalDateFormat };
 //# sourceMappingURL=pongrass-utils.mjs.map