dattatable 2.11.97 → 2.11.99

package/build/dashboard/index.d.ts

@@ -96,7 +96,7 @@ export interface IDashboardProps {
         classNameCard?: string;
         classNameFooter?: string;
         classNameHeader?: string;
-        colSize?: number | string;
+        colSize?: number;
         filterFields?: string[];
         items: any[];
         onBodyRendered?: (el?: HTMLElement, item?: any) => void;
@@ -152,7 +152,6 @@ export declare class Dashboard {
     filter(idx: number, value?: string, exactMatchFl?: boolean): void;
     filterAccordion(values?: string | string[], useAndOperator?: boolean): void;
     filterMulti(idx: number, values?: string[], exactMatchFl?: boolean): void;
-    filterTiles(values?: string | string[], useAndOperator?: boolean): void;
     getFilter(key: string): Components.ICheckboxGroup;
     getSearchValue(): string;
     hideFilter(): void;

package/build/dashboard/index.js

@@ -118,17 +118,10 @@ var Dashboard = /** @class */ (function () {
             onClear: this._props.filters ? this._props.filters.onClear : null,
             onRendered: this._props.filters ? this._props.filters.onRendered : null,
             onShowFilter: this._props.filters ? this._props.filters.onShowFilter : null,
-            onFilter: this.IsAccordion || this.IsTiles ? function (value, item) {
+            onFilter: this.IsAccordion ? function (value, item) {
                 var values = typeof (value) === "string" ? [value] : value;
-                // See if this is an accordion
-                if (_this.IsAccordion) {
-                    // Filter the accordion
-                    _this._accordion.filter(values);
-                }
-                else {
-                    // Filter the tiles
-                    _this._tiles.filter(values);
-                }
+                // Filter the accordion
+                _this._accordion.filter(values);
             } : null
         });
         // Render the template
@@ -341,7 +334,7 @@ var Dashboard = /** @class */ (function () {
         // Else, see if we are rendering tiles
         else if (this.IsTiles) {
             // Filter the tiles
-            this._tiles.filter(value);
+            exactMatchFl && value ? this._tiles.filterExact(idx, value) : this._tiles.filter(idx, value);
         }
         else {
             // If no value is specified, then we don't want to filter by exact value
@@ -367,22 +360,13 @@ var Dashboard = /** @class */ (function () {
         // Else, see if we have tiles
         else if (this.IsTiles) {
             // Filter the tiles
-            this._tiles.filter(values);
+            exactMatchFl && values.length > 0 ? this._tiles.filterMultiExact(idx + 1, values) : this._tiles.filterMulti(idx + 1, values);
         }
         else {
             // Filter the table
             exactMatchFl && values.length > 0 ? this._dt.filterMultiExact(idx, values) : this._dt.filterMulti(idx, values);
         }
     };
-    // Filter the tiles
-    Dashboard.prototype.filterTiles = function (values, useAndOperator) {
-        if (useAndOperator === void 0) { useAndOperator = false; }
-        // See if we have tiles
-        if (this.IsTiles) {
-            // Filter the tiles
-            this._tiles.filter(typeof (values) === "string" ? [values] : values, useAndOperator);
-        }
-    };
     // Returns a filter checkbox group by its key
     Dashboard.prototype.getFilter = function (key) { return this._filters.getFilter(key); };
     // Returns the current search value

package/build/dashboard/tiles.d.ts

@@ -1,6 +1,10 @@
 import { Components } from "gd-sprest-bs";
+import "datatables.net-bs5";
 export interface ITiles {
-    filter?: (value: string | string[], useAndOperator?: boolean) => void;
+    filter: (idx: number, value?: string) => void;
+    filterExact: (idx: number, value?: string) => void;
+    filterMulti: (idx: number, values?: string[]) => void;
+    filterMultiExact: (idx: number, values?: string[]) => void;
     refresh?: (items: any[]) => void;
     search?: (value: string) => void;
 }
@@ -12,7 +16,7 @@ export interface ITilesProps {
     classNameCard?: string;
     classNameFooter?: string;
     classNameHeader?: string;
-    colSize?: number | string;
+    colSize?: number;
     el: HTMLElement;
     filterFields?: string[];
     items: any[];
@@ -21,18 +25,14 @@ export interface ITilesProps {
     onCardRendered?: (el?: HTMLElement, item?: any) => void;
     onCardRendering?: (cardProps?: Components.ICardProps, item?: any) => void;
     onClick?: (el?: HTMLElement, item?: Components.ICardBody) => void;
-    onColumnRendered?: (el?: HTMLElement, item?: any) => void;
     onFooterRendered?: (el?: HTMLElement, item?: any) => void;
     onHeaderRendered?: (el?: HTMLElement, item?: any) => void;
-    onPaginationClick?: (pageNumber?: number) => void;
-    onPaginationRendered?: (el?: HTMLElement) => void;
+    onRendering?: (dtProps: any) => any;
     onRendered?: (el?: HTMLElement) => void;
     onSubTitleRendered?: (el?: HTMLElement, item?: any) => void;
     onTitleRendered?: (el?: HTMLElement, item?: any) => void;
-    paginationLimit?: number;
     showFooter?: boolean;
     showHeader?: boolean;
-    showPagination?: boolean;
     subTitleFields?: string[];
     subTitleTemplate?: string;
     titleFields?: string[];
@@ -42,18 +42,16 @@ export interface ITilesProps {
  * Tiles
  */
 export declare class Tiles implements ITiles {
-    private _tiles;
-    private _activeFilterValue;
-    private _activeSearchValue;
-    private _pagination;
+    private _datatable;
     private _props;
-    private _useAndOperator;
     constructor(props: ITilesProps);
-    filter(values: string[], useAndOperator?: boolean): void;
+    filter(idx: number, value?: string): void;
+    filterExact(idx: number, value?: string): void;
+    filterMulti(idx: number, values?: string[]): void;
+    filterMultiExact(idx: number, values?: string[]): void;
     private generateCard;
+    private getDefaultProperties;
     refresh(items?: any[]): void;
     private render;
-    private renderTiles;
-    private updateTiles;
-    search(value: string): void;
+    search(value?: string): void;
 }

package/build/dashboard/tiles.js

@@ -1,41 +1,55 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tiles = void 0;
+var dtnet = require("datatables.net-dt");
 var gd_sprest_bs_1 = require("gd-sprest-bs");
+// DataTables.net
+require("datatables.net-bs5");
 /**
  * Tiles
  */
 var Tiles = /** @class */ (function () {
     // Constructor
     function Tiles(props) {
-        var _this = this;
-        this._tiles = null;
-        this._activeFilterValue = null;
-        this._activeSearchValue = null;
-        this._pagination = null;
-        this._useAndOperator = false;
+        this._datatable = null;
         // Save the properties
         this._props = props;
         // Render the tile
         this.render(this._props.items);
-        // Call the rendered event in a separate thread to ensure the dashboard object is created
-        setTimeout(function () {
-            _this._props.onRendered ? _this._props.onRendered(_this._props.el) : null;
-        }, 50);
     }
-    // Filters the tile
-    Tiles.prototype.filter = function (values, useAndOperator) {
-        if (useAndOperator === void 0) { useAndOperator = false; }
-        this._activeFilterValue = values ? values.join('|') : "";
-        this._useAndOperator = useAndOperator;
-        // Parse all tile
-        var tiles = this._props.el.querySelectorAll(".card");
-        for (var i = 0; i < tiles.length; i++) {
-            // Hide the tile
-            tiles[i].parentElement.classList.add("d-none");
+    // Filters the status
+    Tiles.prototype.filter = function (idx, value) {
+        if (value === void 0) { value = ""; }
+        // Set the filter
+        this._datatable.column(idx).search(value.replace(/[-[/\]{}()*+?.,\\^$#\s]/g, '\\$&'), true, false).draw();
+    };
+    // Filters the status
+    Tiles.prototype.filterExact = function (idx, value) {
+        if (value === void 0) { value = ""; }
+        // Set the filter
+        this._datatable.column(idx).search("^" + value.replace(/[-[/\]{}()*+?.,\\^$#\s]/g, '\\$&') + "$", true, false).draw();
+    };
+    // Filters multiple values against the status
+    Tiles.prototype.filterMulti = function (idx, values) {
+        if (values === void 0) { values = []; }
+        // Parse the values
+        for (var i = 0; i < values.length; i++) {
+            // Update the value
+            values[i] = values[i].replace(/\|/g, '\\$&');
+        }
+        // Filter the values
+        this.filter(idx, values.join('|'));
+    };
+    // Filters multiple values against the status
+    Tiles.prototype.filterMultiExact = function (idx, values) {
+        if (values === void 0) { values = []; }
+        // Parse the values
+        for (var i = 0; i < values.length; i++) {
+            // Update the value
+            values[i] = values[i].replace(/\|/g, '\\$&');
         }
-        // Update the tiles
-        this.updateTiles();
+        // Filter the values
+        this._datatable.column(idx).search("^(" + values.join('|') + ")$", true, false).draw();
     };
     // Generate the card properties
     Tiles.prototype.generateCard = function (item) {
@@ -173,9 +187,105 @@ var Tiles = /** @class */ (function () {
         // Return the card properties
         return cardProps;
     };
+    // Returns the default properties for the datatable
+    Tiles.prototype.getDefaultProperties = function (items) {
+        var _this = this;
+        // Get the column size
+        var colSize = this._props.colSize > 0 ? this._props.colSize : 4;
+        if (colSize > 4) {
+            colSize = 4;
+        }
+        // Determine the paging based on the column size
+        var lengthMenu = [];
+        switch (colSize) {
+            case 1:
+                lengthMenu = [4, 8, 16, 32];
+                break;
+            case 2:
+                lengthMenu = [8, 16, 32, 64];
+                break;
+            case 3:
+                lengthMenu = [12, 24, 48, 96];
+                break;
+            case 4:
+                lengthMenu = [16, 32, 64, 128];
+                break;
+        }
+        // Set the columns
+        var columns = [{
+                data: null,
+                render: function (data, type, row) {
+                    var cardProps = _this.generateCard(data);
+                    // Return the card element
+                    return gd_sprest_bs_1.Components.Card(cardProps).el;
+                }
+            }];
+        // Parse the filter columns
+        var filterFields = this._props.filterFields || [];
+        for (var i = 0; i < filterFields.length; i++) {
+            // Append the hidden column
+            columns.push({
+                data: filterFields[i],
+                visible: false
+            });
+        }
+        // Return the default properties
+        return {
+            columns: columns,
+            data: items,
+            lengthMenu: lengthMenu,
+            pageLength: lengthMenu[0],
+            language: {
+                lengthMenu: "_MENU_",
+                paginate: {
+                    first: "First",
+                    last: "Last",
+                    next: "Next",
+                    previous: "Previous"
+                }
+            },
+            layout: {
+                top: null,
+                topStart: null,
+                topEnd: null,
+                bottom: "info",
+                bottomStart: "pageLength",
+                bottomEnd: {
+                    paging: {
+                        type: "full_numbers"
+                    }
+                }
+            },
+            createdRow: function (row, data, rowIdx) {
+                // Append the class
+                row.classList.add("col");
+                switch (colSize) {
+                    case 1:
+                        row.classList.add("col-12");
+                        break;
+                    case 2:
+                        row.classList.add("col-6");
+                        break;
+                    case 3:
+                        row.classList.add("col-4");
+                        break;
+                    case 4:
+                        row.classList.add("col-3");
+                        break;
+                }
+            }
+        };
+    };
     // Method to reload the data
     Tiles.prototype.refresh = function (items) {
         if (items === void 0) { items = []; }
+        // See if the datatable exists
+        if (this._datatable != null) {
+            // Clear the datatable
+            this._datatable.clear();
+            this._datatable.destroy();
+            this._datatable = null;
+        }
         // Clear the datatable element
         while (this._props.el.firstChild) {
             this._props.el.removeChild(this._props.el.firstChild);
@@ -185,154 +295,33 @@ var Tiles = /** @class */ (function () {
     };
     // Renders the dashboard
     Tiles.prototype.render = function (items) {
-        // Render the tile
-        this.renderTiles(items);
-        // Update the tiles
-        this.updateTiles();
-    };
-    // Renders the tiles
-    Tiles.prototype.renderTiles = function (items) {
-        // Parse the items
-        var cards = [];
-        for (var i = 0; i < items.length; i++) {
-            var item = items[i];
-            // Add an tile
-            cards.push(this.generateCard(item));
-        }
-        // Render the tiles
-        this._tiles = gd_sprest_bs_1.Components.CardGroup({
-            el: this._props.el,
-            cards: cards,
-            className: this._props.className,
-            colSize: this._props.colSize || 4,
-            onColRender: this._props.onColumnRendered
-        });
-    };
-    // Updates the visibility of the tiles
-    Tiles.prototype.updateTiles = function () {
         var _this = this;
-        // Get the pagination element
-        var elPagination = this._props.el.querySelector(".tiles-pagination");
-        if (elPagination) {
-            // Clear the element
-            while (elPagination.firstChild) {
-                elPagination.removeChild(elPagination.firstChild);
-            }
-        }
-        else {
-            // Create the element
-            elPagination = document.createElement("div");
-            elPagination.classList.add("tiles-pagination");
-            this._props.el.appendChild(elPagination);
-        }
-        // Get the elements as an array
-        var elItems = Array.from(this._tiles.el.querySelectorAll(".card"));
-        // Parse the items
-        for (var i = elItems.length - 1; i >= 0; i--) {
-            var elItem = elItems[i];
-            // See if a filter value exists
-            if (this._activeFilterValue) {
-                var filterValues = (typeof (elItem.dataset.filter) != "undefined" ? elItem.dataset.filter : "").split('|');
-                // Parse the active filters
-                var activeFilters = this._activeFilterValue.split('|');
-                var showItem = false;
-                for (var j = 0; j < activeFilters.length; j++) {
-                    // See if the item contains the filter value
-                    if (filterValues.indexOf(activeFilters[j]) >= 0) {
-                        // Set the flag
-                        showItem = true;
-                        // Break from the loop if we aren't using the and operator
-                        if (!this._useAndOperator) {
-                            break;
-                        }
-                    }
-                    // Else, see if we are using the and operator
-                    else if (this._useAndOperator) {
-                        // Set the flag and break from the loop
-                        showItem = false;
-                        break;
-                    }
-                }
-                // See if we are hiding the item
-                if (!showItem) {
-                    // Hide the item
-                    elItem.parentElement.classList.add("d-none");
-                    // Exclude the item from the array
-                    elItems.splice(i, 1);
-                    // Continue the loop
-                    continue;
-                }
-            }
-            // See if a search value exists
-            if (this._activeSearchValue) {
-                // See if the item doesn't contains the search value
-                if (elItem.innerText.toLowerCase().indexOf(this._activeSearchValue.toLowerCase()) < 0) {
-                    // Hide the item
-                    elItem.parentElement.classList.add("d-none");
-                    // Exclude the item from the array
-                    elItems.splice(i, 1);
-                    // Continue the loop
-                    continue;
-                }
-            }
-        }
-        // Set the pagination limit
-        var showPagination = typeof (this._props.showPagination) === "boolean" ? this._props.showPagination : true;
-        var paginationLimit = showPagination ? this._props.paginationLimit || 10 : elItems.length;
-        // Parse the active items to show
-        for (var i = 0; i < paginationLimit; i++) {
-            var elItem = elItems[i];
-            // Ensure the item exists
-            if (elItem) {
-                // Show the item
-                elItem.parentElement.classList.remove("d-none");
-            }
-            else {
-                // Break from the loop
-                break;
-            }
-        }
-        // Ensure we are showing the pagination
-        if (showPagination) {
-            // Parse the active items to hide
-            for (var i = paginationLimit; i < elItems.length; i++) {
-                var elItem = elItems[i];
-                // Hide the item
-                elItem.parentElement.classList.add("d-none");
-            }
-            // Render the pagination
-            this._pagination = gd_sprest_bs_1.Components.Pagination({
-                el: elPagination,
-                className: "d-flex justify-content-end pt-2",
-                numberOfPages: Math.ceil(elItems.length / paginationLimit),
-                onClick: function (pageNumber) {
-                    // Parse the items
-                    for (var i = 0; i < elItems.length; i++) {
-                        var elItem = elItems[i];
-                        // Hide the item
-                        elItem.parentElement.classList.add("d-none");
-                    }
-                    // Parse the items to show
-                    var startIdx = (pageNumber - 1) * paginationLimit;
-                    for (var i = startIdx; i < startIdx + paginationLimit && i < elItems.length; i++) {
-                        var elItem = elItems[i];
-                        // Show the item
-                        elItem.parentElement.classList.remove("d-none");
-                    }
-                    // Call the event
-                    _this._props.onPaginationClick ? _this._props.onPaginationClick(pageNumber) : null;
-                }
-            });
-            // Call the event
-            this._props.onPaginationRendered ? this._props.onPaginationRendered(elPagination) : null;
-        }
+        var _a;
+        // Create the datatable element
+        var el = document.createElement("div");
+        el.classList.add("bs");
+        (_a = this._props) === null || _a === void 0 ? void 0 : _a.el.appendChild(el);
+        // Set the table element
+        var elTable = document.createElement("table");
+        elTable.innerHTML = "<thead><th></th></thead><tbody class=\"row\"></tbody>";
+        el.appendChild(elTable);
+        // Get the default properties
+        var dtProps = this.getDefaultProperties(items);
+        // Call the rendering event
+        dtProps = this._props.onRendering ? this._props.onRendering(dtProps) : dtProps;
+        // Render the table
+        var dtLib = dtnet["DataTable"] || dtnet;
+        this._datatable = new dtLib(elTable, dtProps);
+        // Call the rendered event in a separate thread to ensure the dashboard object is created
+        setTimeout(function () {
+            _this._props.onRendered ? _this._props.onRendered(_this._props.el) : null;
+        }, 50);
     };
     // Searches the tile
     Tiles.prototype.search = function (value) {
-        // Set the search value
-        this._activeSearchValue = typeof (value) != "undefined" ? value : "";
-        // Update the tiles
-        this.updateTiles();
+        if (value === void 0) { value = ""; }
+        // Search the table
+        this._datatable.search(value).draw();
     };
     return Tiles;
 }());