dattatable 2.9.42 → 2.9.44

package/build/dashboard/accordion.d.ts

@@ -0,0 +1,31 @@
+export interface IAccordion {
+    filter?: (string: any) => void;
+    search?: (value: string) => void;
+}
+export interface IAccordionProps {
+    bodyField?: string;
+    el: HTMLElement;
+    filterField?: string;
+    items: any[];
+    onItemClick?: (el?: HTMLElement, item?: any) => void;
+    onItemRender?: (el?: HTMLElement, item?: any) => void;
+    paginationLimit?: number;
+    titleField?: string;
+}
+/**
+ * Accordion
+ */
+export declare class Accordion implements IAccordion {
+    private _accordion;
+    private _activeFilterClass;
+    private _activeSearchFilter;
+    private _pagination;
+    private _props;
+    constructor(props: IAccordionProps);
+    private clearItem;
+    filter(value: string): void;
+    private render;
+    private renderAccordion;
+    private renderItems;
+    search(value: string): void;
+}

package/build/dashboard/accordion.js

@@ -0,0 +1,227 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = void 0;
+var gd_sprest_bs_1 = require("gd-sprest-bs");
+/**
+ * Accordion
+ */
+var Accordion = /** @class */ (function () {
+    // Constructor
+    function Accordion(props) {
+        this._accordion = null;
+        this._activeFilterClass = null;
+        this._activeSearchFilter = null;
+        this._pagination = null;
+        // Save the properties
+        this._props = props;
+        // Render the accordion
+        this.render();
+    }
+    // Clears an item
+    Accordion.prototype.clearItem = function (elItem) {
+        // Hide the item
+        elItem.classList.add("d-none");
+        // Remove the first/last item classes
+        elItem.classList.remove("first-item");
+        elItem.classList.remove("last-item");
+    };
+    // Filters the accordion
+    Accordion.prototype.filter = function (value) {
+        var className = value ? value.toLowerCase().replace(/ /g, "-") : null;
+        this._activeFilterClass = className;
+        // Parse all accordion items
+        var items = this._props.el.querySelectorAll(".accordion-item");
+        for (var i = 0; i < items.length; i++) {
+            var elItem = items[i];
+            // Show the item
+            elItem.classList.remove("d-none");
+            // Remove the first/last item classes
+            elItem.classList.remove("first-item");
+            elItem.classList.remove("last-item");
+            // See if a class name exists
+            if (className) {
+                // See if this item doesn't matches
+                if (!elItem.classList.contains(className)) {
+                    // Hide the item
+                    elItem.classList.add("d-none");
+                }
+            }
+        }
+        // Render the items
+        this.renderItems();
+    };
+    // Renders the dashboard
+    Accordion.prototype.render = function () {
+        // Render the accordion
+        this.renderAccordion();
+        // Render the items
+        this.renderItems();
+    };
+    // Renders the accordion
+    Accordion.prototype.renderAccordion = function () {
+        // Parse the items
+        var accordionItems = [];
+        for (var i = 0; i < this._props.items.length; i++) {
+            var item = this._props.items[i];
+            var itemClassNames = [];
+            // See if the filter field is specified
+            if (this._props.filterField) {
+                // Parse the selected filters
+                var filters = item[this._props.filterField] || [];
+                filters = filters["results"] || filters;
+                for (var j = 0; j < filters.length; j++) {
+                    var filter = filters[j].toLowerCase().replace(/ /g, '-');
+                    // Add the filter as a class name
+                    if (filter) {
+                        itemClassNames.push(filter);
+                    }
+                }
+            }
+            // Add an accordion item
+            accordionItems.push({
+                className: itemClassNames.join(" "),
+                content: (this._props.bodyField ? item[this._props.bodyField || "Description"] : null) || "",
+                header: item[this._props.titleField || "Title"] || "",
+                onClick: this._props.onItemClick,
+                onRender: this._props.onItemRender,
+                showFl: i == 0,
+            });
+        }
+        // Render the accordion
+        this._accordion = gd_sprest_bs_1.Components.Accordion({
+            el: this._props.el,
+            id: "accordion-list",
+            items: accordionItems
+        });
+    };
+    // Renders the items
+    Accordion.prototype.renderItems = function () {
+        var _this = this;
+        var paginationLimit = this._props.paginationLimit || 10;
+        // Get the pagination element
+        var elPagination = this._props.el.querySelector(".accordion-pagination");
+        if (elPagination) {
+            // Clear the element
+            while (elPagination.firstChild) {
+                elPagination.removeChild(elPagination.firstChild);
+            }
+        }
+        else {
+            // Create the element
+            elPagination = document.createElement("div");
+            elPagination.classList.add("accordion-pagination");
+            this._props.el.appendChild(elPagination);
+        }
+        // Get the elements as an array
+        var elItems = Array.from(this._accordion.el.querySelectorAll(this._activeFilterClass ? "." + this._activeFilterClass : ".accordion-item"));
+        // See if a search value exists
+        if (this._activeSearchFilter) {
+            // Parse the items
+            for (var i = elItems.length - 1; i >= 0; i--) {
+                var elItem = elItems[i];
+                var elContent = elItem.querySelector(".accordion-body");
+                // See if this item is expanded
+                if (elItem.querySelector(".accordion-collapse.show")) {
+                    // Collapse the item
+                    var btn = elItem.querySelector(".accordion-button");
+                    btn === null || btn === void 0 ? void 0 : btn.click();
+                }
+                // See if the item doesn't contains the search value
+                if (elItem.innerText.toLowerCase().indexOf(this._activeSearchFilter) < 0 &&
+                    elContent.innerText.toLowerCase().indexOf(this._activeSearchFilter) < 0) {
+                    // Clear the item
+                    this.clearItem(elItem);
+                    // Exclude the item from the array
+                    elItems.splice(i, 1);
+                }
+            }
+        }
+        // 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.classList.remove("d-none");
+                // See if this is the first item
+                if (i == 0) {
+                    elItem.classList.add("first-item");
+                }
+            }
+            else {
+                // Set the class for the last item
+                if (elItems[i - 1]) {
+                    elItems[i - 1].classList.add("last-item");
+                }
+                // Break from the loop
+                break;
+            }
+        }
+        // Parse the active items to hide
+        for (var i = paginationLimit; i < elItems.length; i++) {
+            // Clear the item
+            this.clearItem(elItems[i]);
+        }
+        // Ensure items exist
+        if (elItems.length > 0) {
+            // Ensure the first item is expanded
+            if (elItems[0].querySelector(".accordion-collapse.show") == null) {
+                // Hide the button
+                var btn = elItems[0].querySelector(".accordion-button");
+                btn === null || btn === void 0 ? void 0 : btn.click();
+            }
+            // Set the first item class
+            elItems[0].classList.add("first-item");
+            // Set the last item class
+            var lastIdx = paginationLimit - 1;
+            elItems[lastIdx < elItems.length ? lastIdx : elItems.length - 1].classList.add("last-item");
+        }
+        // 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];
+                    // See if this item is expanded
+                    if (elItem.querySelector(".accordion-collapse.show")) {
+                        // Hide the button
+                        var btn = elItem.querySelector(".accordion-button");
+                        btn === null || btn === void 0 ? void 0 : btn.click();
+                    }
+                    // Clear the item
+                    _this.clearItem(elItem);
+                }
+                // 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.classList.remove("d-none");
+                    // See if this is the first item
+                    if (i == startIdx) {
+                        // Set the first item class
+                        elItem.classList.add("first-item");
+                        // Expand the item
+                        var btn = elItem.querySelector(".accordion-button");
+                        btn === null || btn === void 0 ? void 0 : btn.click();
+                    }
+                }
+                // Set the last item class
+                var lastIdx = startIdx + paginationLimit - 1;
+                elItems[lastIdx < elItems.length ? lastIdx : elItems.length - 1].classList.add("last-item");
+            }
+        });
+    };
+    // Searches the accordion
+    Accordion.prototype.search = function (value) {
+        // Set the search value
+        this._activeSearchFilter = (value || "").toLowerCase();
+        // Render the items
+        this.renderItems();
+    };
+    return Accordion;
+}());
+exports.Accordion = Accordion;

package/build/dashboard/filter.d.ts

@@ -14,6 +14,7 @@ export interface IFilterItem {
 export interface IFilterProps {
     filters: IFilterItem[];
     onClear?: () => void;
+    onFilter?: (value: string | string[]) => void;
     onRendered?: (el: HTMLElement) => void;
 }
 /**
@@ -25,6 +26,7 @@ export declare class FilterSlideout {
     private _filters;
     private _items;
     private _onClear;
+    private _onFilter;
     constructor(props: IFilterProps);
     private generateFilters;
     private generateItem;

package/build/dashboard/filter.js

@@ -16,6 +16,7 @@ var FilterSlideout = /** @class */ (function () {
         // Save the properties
         this._filters = props.filters || [];
         this._onClear = props.onClear;
+        this._onFilter = props.onFilter;
         // Initialize the variables
         this._cbs = [];
         this._items = [];
@@ -93,11 +94,13 @@ var FilterSlideout = /** @class */ (function () {
                             }
                             // Execute the event
                             filter.onFilter ? filter.onFilter(values) : null;
+                            _this._onFilter ? _this._onFilter(values) : null;
                         }
                         else {
                             var item_1 = value;
                             // Execute the event
                             filter.onFilter ? filter.onFilter(item_1 ? item_1.label : "") : null;
+                            _this._onFilter ? _this._onFilter(item_1 ? item_1.label : "") : null;
                         }
                     }
                 }));

package/build/dashboard/index.d.ts

@@ -2,12 +2,22 @@ import { Components } from "gd-sprest-bs";
 import { FilterSlideout, IFilterItem } from "./filter";
 import { Navigation } from "./navigation";
 import { IDataTable } from "./table";
+export * from "./accordion";
 export * from "./filter";
 export * from "./footer";
 export * from "./header";
 export * from "./navigation";
 export * from "./table";
 export interface IDashboardProps {
+    accordion?: {
+        bodyField?: string;
+        filterField?: string;
+        items: any[];
+        onItemClick?: (el?: HTMLElement, item?: any) => void;
+        onItemRender?: (el?: HTMLElement, item?: any) => void;
+        paginationLimit?: number;
+        titleField?: string;
+    };
     el: HTMLElement;
     footer?: {
         items?: Components.INavbarItem[];
@@ -67,10 +77,12 @@ export interface IDashboardProps {
  * Dashboard
  */
 export declare class Dashboard {
+    private _accordion;
     private _dt;
     private _filters;
     private _navigation;
     private _props;
+    private IsAccordion;
     constructor(props: IDashboardProps);
     private applyFilters;
     private render;
@@ -85,6 +97,8 @@ export declare class Dashboard {
      */
     clearFilter(): void;
     filter(idx: number, value?: string, exactMatchFl?: boolean): void;
+    filterAccordion(value?: string): void;
+    filterAccordionMulti(value?: string[]): void;
     filterMulti(idx: number, values?: string[]): void;
     getFilter(key: string): Components.ICheckboxGroup;
     getSearchValue(): string;

package/build/dashboard/index.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -17,12 +28,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dashboard = void 0;
 var gd_sprest_bs_1 = require("gd-sprest-bs");
 var common_1 = require("../common");
+var accordion_1 = require("./accordion");
 var filter_1 = require("./filter");
 var footer_1 = require("./footer");
 var header_1 = require("./header");
 var navigation_1 = require("./navigation");
 var table_1 = require("./table");
 // Export the components
+__exportStar(require("./accordion"), exports);
 __exportStar(require("./filter"), exports);
 __exportStar(require("./footer"), exports);
 __exportStar(require("./header"), exports);
@@ -35,6 +48,7 @@ var Dashboard = /** @class */ (function () {
     // Constructor
     function Dashboard(props) {
         var _this = this;
+        this._accordion = null;
         this._dt = null;
         this._filters = null;
         this._navigation = null;
@@ -53,6 +67,7 @@ var Dashboard = /** @class */ (function () {
             props.onRendered ? props.onRendered(_this._props.el) : null;
         }, 10);
     }
+    Dashboard.prototype.IsAccordion = function () { return this._props.accordion ? true : false; };
     // Applies the default active filters
     Dashboard.prototype.applyFilters = function () {
         var _a;
@@ -89,12 +104,15 @@ var Dashboard = /** @class */ (function () {
         this._filters = new filter_1.FilterSlideout({
             filters: this._props.filters ? this._props.filters.items : [],
             onClear: this._props.filters ? this._props.filters.onClear : null,
-            onRendered: this._props.filters ? this._props.filters.onRendered : null
+            onRendered: this._props.filters ? this._props.filters.onRendered : null,
+            onFilter: !this.IsAccordion ? null : function (value) {
+                _this._accordion.filter(value);
+            }
         });
         // Render the template
         var elTemplate = document.createElement("div");
         elTemplate.classList.add("dashboard");
-        elTemplate.innerHTML = "\n        <div class=\"row\">\n            <div id=\"navigation\" class=\"col\"></div>\n        </div>\n        <div class=\"row\">\n            <div id=\"header\" class=\"col mx-75\"></div>\n        </div>\n        <div class=\"row\">\n            <div id=\"sub-navigation\" class=\"col\"></div>\n        </div>\n        <div class=\"row\">\n            <div id=\"datatable\" class=\"col\"></div>\n        </div>\n        <div class=\"row\">\n            <div id=\"footer\" class=\"col\"></div>\n        </div>".trim();
+        elTemplate.innerHTML = "\n        <div class=\"row\">\n            <div id=\"navigation\" class=\"col\"></div>\n        </div>\n        <div class=\"row\">\n            <div id=\"header\" class=\"col mx-75\"></div>\n        </div>\n        <div class=\"row\">\n            <div id=\"sub-navigation\" class=\"col\"></div>\n        </div>\n        <div class=\"row\">\n            <div id=\"".concat(this.IsAccordion ? "accordion" : "datatable", "\" class=\"col\"></div>\n        </div>\n        <div class=\"row\">\n            <div id=\"footer\" class=\"col\"></div>\n        </div>").trim();
         this._props.el.appendChild(elTemplate);
         // Set/Default the visibility flags
         var headerIsVisible = (this._props.hideHeader == null || this._props.hideHeader == true) && this._props.header == null ? false : true;
@@ -126,8 +144,15 @@ var Dashboard = /** @class */ (function () {
                 },
                 onRendered: navProps_1.onRendered,
                 onSearch: function (value) {
-                    // Search the data table
-                    _this._dt.search(value);
+                    // See if we are rendering an accordion
+                    if (_this.IsAccordion) {
+                        // Search the accordion
+                        _this._accordion.search(value);
+                    }
+                    else {
+                        // Search the data table
+                        _this._dt.search(value);
+                    }
                 },
                 onSearchRendered: navProps_1.onSearchRendered,
                 onShowFilter: function () {
@@ -195,8 +220,15 @@ var Dashboard = /** @class */ (function () {
                 },
                 onRendered: navProps_2.onRendered,
                 onSearch: function (value) {
-                    // Search the data table
-                    _this._dt.search(value);
+                    // See if we are rendering an accordion
+                    if (_this.IsAccordion) {
+                        // Search the accordion
+                        _this._accordion.search(value);
+                    }
+                    else {
+                        // Search the data table
+                        _this._dt.search(value);
+                    }
                 },
                 onShowFilter: function () {
                     // Show the filter
@@ -204,14 +236,21 @@ var Dashboard = /** @class */ (function () {
                 },
             });
         }
-        // Render the data table
-        this._dt = new table_1.DataTable({
-            columns: this._props.table ? this._props.table.columns : null,
-            dtProps: this._props.table ? this._props.table.dtProps : null,
-            el: this._props.el.querySelector("#datatable"),
-            onRendered: this._props.table ? this._props.table.onRendered : null,
-            rows: this._props.table ? this._props.table.rows : null
-        });
+        // See if we are rendering an accordion
+        if (this.IsAccordion) {
+            // Render the accordion
+            this._accordion = new accordion_1.Accordion(__assign({ el: this._props.el.querySelector("#accordion") }, this._props.accordion));
+        }
+        else {
+            // Render the data table
+            this._dt = new table_1.DataTable({
+                columns: this._props.table ? this._props.table.columns : null,
+                dtProps: this._props.table ? this._props.table.dtProps : null,
+                el: this._props.el.querySelector("#datatable"),
+                onRendered: this._props.table ? this._props.table.onRendered : null,
+                rows: this._props.table ? this._props.table.rows : null
+            });
+        }
         // See if we are hiding the footer
         if (this._props.hideFooter) {
             // Hide the element
@@ -257,14 +296,44 @@ var Dashboard = /** @class */ (function () {
     };
     // Filter the table
     Dashboard.prototype.filter = function (idx, value, exactMatchFl) {
-        // Filter the table
-        // If no value is specified, then we don't want to filter by exact value
-        exactMatchFl && value ? this._dt.filterExact(idx, value) : this._dt.filter(idx, value);
+        // See if we have an accordion
+        if (this.IsAccordion) {
+            // Filter the accordion
+            this._accordion.filter(value);
+        }
+        // Else, filter the table
+        else {
+            // If no value is specified, then we don't want to filter by exact value
+            exactMatchFl && value ? this._dt.filterExact(idx, value) : this._dt.filter(idx, value);
+        }
+    };
+    // Filter the accordion
+    Dashboard.prototype.filterAccordion = function (value) {
+        // See if we have an accordion
+        if (this.IsAccordion) {
+            // Filter the accordion
+            this._accordion.filter(value);
+        }
+    };
+    // Filter the accordion
+    Dashboard.prototype.filterAccordionMulti = function (value) {
+        // See if we have an accordion
+        if (this.IsAccordion) {
+            // Filter the accordion
+            //this._accordion.filter(value);
+        }
     };
     // Filter the table by multiple values
     Dashboard.prototype.filterMulti = function (idx, values) {
-        // Filter the table
-        this._dt.filterMulti(idx, values);
+        // See if we have an accordion
+        if (this.IsAccordion) {
+            // Filter the accordion
+            //this._accordion.filterMulti(value);
+        }
+        else {
+            // Filter the table
+            this._dt.filterMulti(idx, values);
+        }
     };
     // Returns a filter checkbox group by its key
     Dashboard.prototype.getFilter = function (key) { return this._filters.getFilter(key); };
@@ -285,8 +354,15 @@ var Dashboard = /** @class */ (function () {
     };
     // Search the table
     Dashboard.prototype.search = function (value) {
-        // Search the table
-        this._dt.search(value);
+        // See if we have an accordion
+        if (this.IsAccordion) {
+            // Search the accordion
+            this._accordion.search(value);
+        }
+        else {
+            // Search the table
+            this._dt.search(value);
+        }
     };
     // Sets a filter checkbox group value
     Dashboard.prototype.setFilterValue = function (key, value) { return this._filters.setFilterValue(key, value); };

package/build/lib.d.ts

@@ -6,6 +6,7 @@ import * as AuditLog from "./auditLog";
 import * as Dashboard from "./dashboard";
 export declare const DattaTable: {
     Dashboard: typeof Dashboard.Dashboard;
+    Accordion: typeof Dashboard.Accordion;
     FilterSlideout: typeof Dashboard.FilterSlideout;
     Footer: typeof Dashboard.Footer;
     Header: typeof Dashboard.Header;