dattatable 2.9.45 → 2.9.47

package/build/common/list.d.ts

@@ -55,13 +55,14 @@ export declare class List<T = Types.SP.ListItem> {
     constructor(props: IListProps<T>);
     private clear;
     createItem(values: any): PromiseLike<T>;
-    newForm(props: IItemFormCreateProps): void;
     editForm(props: IItemFormEditProps): void;
+    getField(name: string): Types.SP.Field;
     private init;
     private loadItem;
     private loadItems;
     private loadItemsByQuery;
     private loadItemsByView;
+    newForm(props: IItemFormCreateProps): void;
     refresh(query?: Types.IODataQuery): PromiseLike<T[]>;
     private refreshContextInfo;
     refreshItem(itemId: number, query?: Types.IODataQuery): PromiseLike<T>;

package/build/common/list.js

@@ -192,13 +192,6 @@ var List = /** @class */ (function () {
             _this.ListInfo.Items().add(values).execute(resolve, reject);
         });
     };
-    // Displays the new form
-    List.prototype.newForm = function (props) {
-        // Clear the modal/canvas
-        this.clear();
-        // Display the form
-        _1.ItemForm.create(props).then(null, this._onLoadFormError);
-    };
     // Displays the edit form
     List.prototype.editForm = function (props) {
         // Clear the modal/canvas
@@ -206,6 +199,20 @@ var List = /** @class */ (function () {
         // Display the form
         _1.ItemForm.edit(props).then(null, this._onLoadFormError);
     };
+    // Gets a list field by internal or title
+    List.prototype.getField = function (name) {
+        // Parse the fields
+        for (var i = 0; i < this.ListFields.length; i++) {
+            var field = this.ListFields[i];
+            // See if this is the target field
+            if (field.InternalName == name || field.Title == name) {
+                // Return the field
+                return field;
+            }
+        }
+        // Not found
+        return null;
+    };
     // Initializes the list component
     List.prototype.init = function () {
         var _this = this;
@@ -373,6 +380,13 @@ var List = /** @class */ (function () {
             }, true);
         });
     };
+    // Displays the new form
+    List.prototype.newForm = function (props) {
+        // Clear the modal/canvas
+        this.clear();
+        // Display the form
+        _1.ItemForm.create(props).then(null, this._onLoadFormError);
+    };
     // Refresh the data
     List.prototype.refresh = function (query) {
         var _this = this;

package/build/dashboard/accordion.js

@@ -33,19 +33,10 @@ var Accordion = /** @class */ (function () {
         var items = this._props.el.querySelectorAll(".accordion-item");
         for (var i = 0; i < items.length; i++) {
             var elItem = items[i];
+            // Clear the item
+            this.clearItem(elItem);
             // 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();

package/build/dashboard/index.d.ts

@@ -8,6 +8,7 @@ export * from "./footer";
 export * from "./header";
 export * from "./navigation";
 export * from "./table";
+export * from "./tiles";
 export interface IDashboardProps {
     accordion?: {
         bodyField?: string;
@@ -70,6 +71,15 @@ export interface IDashboardProps {
         onRendered?: (el?: HTMLElement, dt?: any) => void;
         rows?: any[];
     };
+    tiles?: {
+        bodyField?: string;
+        filterField?: string;
+        items: any[];
+        onCardRender?: (el?: HTMLElement, item?: any) => void;
+        paginationLimit?: number;
+        subTitleField?: string;
+        titleField?: string;
+    };
     onRendered?: (el?: HTMLElement) => void;
     useModal?: boolean;
 }
@@ -82,7 +92,9 @@ export declare class Dashboard {
     private _filters;
     private _navigation;
     private _props;
+    private _tiles;
     private IsAccordion;
+    private IsTiles;
     constructor(props: IDashboardProps);
     private applyFilters;
     private render;
@@ -100,6 +112,8 @@ export declare class Dashboard {
     filterAccordion(value?: string): void;
     filterAccordionMulti(value?: string[]): void;
     filterMulti(idx: number, values?: string[]): void;
+    filterTiles(value?: string): void;
+    filterTilesMulti(value?: string[]): void;
     getFilter(key: string): Components.ICheckboxGroup;
     getSearchValue(): string;
     hideFilter(): void;

package/build/dashboard/index.js

@@ -34,6 +34,7 @@ var footer_1 = require("./footer");
 var header_1 = require("./header");
 var navigation_1 = require("./navigation");
 var table_1 = require("./table");
+var tiles_1 = require("./tiles");
 // Export the components
 __exportStar(require("./accordion"), exports);
 __exportStar(require("./filter"), exports);
@@ -41,6 +42,7 @@ __exportStar(require("./footer"), exports);
 __exportStar(require("./header"), exports);
 __exportStar(require("./navigation"), exports);
 __exportStar(require("./table"), exports);
+__exportStar(require("./tiles"), exports);
 /**
  * Dashboard
  */
@@ -53,6 +55,7 @@ var Dashboard = /** @class */ (function () {
         this._filters = null;
         this._navigation = null;
         this._props = null;
+        this._tiles = null;
         // Set the properties
         this._props = props;
         // Set the flag
@@ -67,7 +70,10 @@ var Dashboard = /** @class */ (function () {
             props.onRendered ? props.onRendered(_this._props.el) : null;
         }, 10);
     }
+    // Determines if we are rendering an accordion
     Dashboard.prototype.IsAccordion = function () { return this._props.accordion ? true : false; };
+    // Determines if we are rendering tiles
+    Dashboard.prototype.IsTiles = function () { return this._props.tiles ? true : false; };
     // Applies the default active filters
     Dashboard.prototype.applyFilters = function () {
         var _a;
@@ -105,14 +111,16 @@ var Dashboard = /** @class */ (function () {
             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,
-            onFilter: !this.IsAccordion ? null : function (value) {
+            onFilter: this.IsAccordion ? function (value) {
                 _this._accordion.filter(value);
-            }
+            } : (this.IsTiles ? function (value) {
+                _this._tiles.filter(value);
+            } : null)
         });
         // 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=\"".concat(this.IsAccordion ? "accordion" : "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" : (this.IsTiles ? "tiles" : "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;
@@ -149,6 +157,11 @@ var Dashboard = /** @class */ (function () {
                         // Search the accordion
                         _this._accordion.search(value);
                     }
+                    // Else, see if we are rendering tiles
+                    else if (_this.IsTiles) {
+                        // Search the tiles
+                        _this._tiles.search(value);
+                    }
                     else {
                         // Search the data table
                         _this._dt.search(value);
@@ -225,6 +238,11 @@ var Dashboard = /** @class */ (function () {
                         // Search the accordion
                         _this._accordion.search(value);
                     }
+                    // Else, see if we are rendering tiles
+                    else if (_this.IsTiles) {
+                        // Search the tiles
+                        _this._tiles.search(value);
+                    }
                     else {
                         // Search the data table
                         _this._dt.search(value);
@@ -241,6 +259,11 @@ var Dashboard = /** @class */ (function () {
             // Render the accordion
             this._accordion = new accordion_1.Accordion(__assign({ el: this._props.el.querySelector("#accordion") }, this._props.accordion));
         }
+        // Else, see if we are rendering tiles
+        else if (this.IsTiles) {
+            // Render the tiles
+            this._tiles = new tiles_1.Tiles(__assign({ el: this._props.el.querySelector("#tiles") }, this._props.tiles));
+        }
         else {
             // Render the data table
             this._dt = new table_1.DataTable({
@@ -301,7 +324,11 @@ var Dashboard = /** @class */ (function () {
             // Filter the accordion
             this._accordion.filter(value);
         }
-        // Else, filter the table
+        // Else, see if we are rendering tiles
+        else if (this.IsTiles) {
+            // Search the tiles
+            this._tiles.search(value);
+        }
         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);
@@ -330,11 +357,32 @@ var Dashboard = /** @class */ (function () {
             // Filter the accordion
             //this._accordion.filterMulti(value);
         }
+        // Else, see if we have tiles
+        else if (this.IsTiles) {
+            // Filter the tiles
+            //this._tiles.filterMulti(value);
+        }
         else {
             // Filter the table
             this._dt.filterMulti(idx, values);
         }
     };
+    // Filter the tiles
+    Dashboard.prototype.filterTiles = function (value) {
+        // See if we have tiles
+        if (this.IsTiles) {
+            // Filter the tiles
+            this._tiles.filter(value);
+        }
+    };
+    // Filter the tiles
+    Dashboard.prototype.filterTilesMulti = function (value) {
+        // See if we have tiles
+        if (this.IsTiles) {
+            // Filter the tiles
+            //this._tiles.filterMulti(value);
+        }
+    };
     // Returns a filter checkbox group by its key
     Dashboard.prototype.getFilter = function (key) { return this._filters.getFilter(key); };
     // Returns the current search value
@@ -359,6 +407,11 @@ var Dashboard = /** @class */ (function () {
             // Search the accordion
             this._accordion.search(value);
         }
+        // Else, see if we have tiles
+        else if (this.IsTiles) {
+            // Search the tiles
+            this._tiles.search(value);
+        }
         else {
             // Search the table
             this._dt.search(value);

package/build/dashboard/tiles.d.ts

@@ -0,0 +1,30 @@
+export interface ITiles {
+    filter?: (string: any) => void;
+    search?: (value: string) => void;
+}
+export interface ITilesProps {
+    bodyField?: string;
+    el: HTMLElement;
+    filterField?: string;
+    items: any[];
+    onCardRender?: (el?: HTMLElement, item?: any) => void;
+    paginationLimit?: number;
+    subTitleField?: string;
+    titleField?: string;
+}
+/**
+ * Tiles
+ */
+export declare class Tiles implements ITiles {
+    private _tiles;
+    private _activeFilterClass;
+    private _activeSearchFilter;
+    private _pagination;
+    private _props;
+    constructor(props: ITilesProps);
+    filter(value: string): void;
+    private render;
+    private renderTiles;
+    private updateTiles;
+    search(value: string): void;
+}

package/build/dashboard/tiles.js

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tiles = void 0;
+var gd_sprest_bs_1 = require("gd-sprest-bs");
+/**
+ * Tiles
+ */
+var Tiles = /** @class */ (function () {
+    // Constructor
+    function Tiles(props) {
+        this._tiles = null;
+        this._activeFilterClass = null;
+        this._activeSearchFilter = null;
+        this._pagination = null;
+        // Save the properties
+        this._props = props;
+        // Render the tile
+        this.render();
+    }
+    // Filters the tile
+    Tiles.prototype.filter = function (value) {
+        var className = value ? value.toLowerCase().replace(/ /g, "-") : null;
+        this._activeFilterClass = className;
+        // Parse all tile items
+        var items = this._props.el.querySelectorAll(".card");
+        for (var i = 0; i < items.length; i++) {
+            var elItem = items[i];
+            // Show the item
+            elItem.classList.remove("d-none");
+        }
+        // Update the tiles
+        this.updateTiles();
+    };
+    // Renders the dashboard
+    Tiles.prototype.render = function () {
+        // Render the tile
+        this.renderTiles();
+        // Update the tiles
+        this.updateTiles();
+    };
+    // Renders the tiles
+    Tiles.prototype.renderTiles = function () {
+        // Parse the items
+        var cards = [];
+        for (var i = 0; i < this._props.items.length; i++) {
+            var item = this._props.items[i];
+            var itemClassNames = [];
+            // Get the filters
+            var filters = item[this._props.filterField] || [];
+            filters = filters["results"] || filters;
+            // See if the filter field is specified
+            if (this._props.filterField) {
+                // Parse the selected 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 tile
+            cards.push({
+                className: itemClassNames.join(" "),
+                body: [{
+                        content: (this._props.bodyField ? item[this._props.bodyField || "Description"] : null) || "",
+                        data: filters,
+                        subTitle: item[this._props.subTitleField] || "",
+                        title: item[this._props.titleField || "Title"] || "",
+                        onRender: this._props.onCardRender
+                    }]
+            });
+        }
+        // Render the tiles
+        this._tiles = gd_sprest_bs_1.Components.CardGroup({
+            el: this._props.el,
+            cards: cards
+        });
+    };
+    // Updates the visibility of the tiles
+    Tiles.prototype.updateTiles = function () {
+        var paginationLimit = this._props.paginationLimit || 10;
+        // 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(this._activeFilterClass ? "." + this._activeFilterClass : ".card"));
+        // 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];
+                // See if the item doesn't contains the search value
+                if (elItem.innerText.toLowerCase().indexOf(this._activeSearchFilter) < 0) {
+                    // Hide the item
+                    elItem.classList.add("d-none");
+                    // 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");
+            }
+            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++) {
+            var elItem = elItems[i];
+            // Hide the item
+            elItem.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.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.classList.remove("d-none");
+                }
+            }
+        });
+    };
+    // Searches the tile
+    Tiles.prototype.search = function (value) {
+        // Set the search value
+        this._activeSearchFilter = (value || "").toLowerCase();
+        // Update the tiles
+        this.updateTiles();
+    };
+    return Tiles;
+}());
+exports.Tiles = Tiles;

package/build/lib.d.ts

@@ -12,6 +12,7 @@ export declare const DattaTable: {
     Header: typeof Dashboard.Header;
     Navigation: typeof Dashboard.Navigation;
     DataTable: typeof Dashboard.DataTable;
+    Tiles: typeof Dashboard.Tiles;
     AuditLog: typeof AuditLog.AuditLog;
     CanvasForm: typeof Common.CanvasForm;
     Comments: typeof Common.Comments;