dattatable 0.9.3 → 0.9.7

package/build/common/documents.js

@@ -0,0 +1,922 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Documents = void 0;
+var gd_sprest_bs_1 = require("gd-sprest-bs");
+var jQuery = require("jquery");
+var moment = require("moment");
+var table_1 = require("../dashboard/table");
+var itemForm_1 = require("../itemForm");
+var loadingDialog_1 = require("./loadingDialog");
+var methods_1 = require("./methods");
+/** Icons  */
+var bookmarkPlus_1 = require("gd-sprest-bs/build/icons/svgs/bookmarkPlus");
+var fileEarmark_1 = require("gd-sprest-bs/build/icons/svgs/fileEarmark");
+var fileEarmarkArrowDown_1 = require("gd-sprest-bs/build/icons/svgs/fileEarmarkArrowDown");
+var fileEarmarkArrowUp_1 = require("gd-sprest-bs/build/icons/svgs/fileEarmarkArrowUp");
+var fileEarmarkBarGraph_1 = require("gd-sprest-bs/build/icons/svgs/fileEarmarkBarGraph");
+var fileEarmarkBinary_1 = require("gd-sprest-bs/build/icons/svgs/fileEarmarkBinary");
+var fileEarmarkCode_1 = require("gd-sprest-bs/build/icons/svgs/fileEarmarkCode");
+var fileEarmarkExcel_1 = require("gd-sprest-bs/build/icons/svgs/fileEarmarkExcel");
+var fileEarmarkImage_1 = require("gd-sprest-bs/build/icons/svgs/fileEarmarkImage");
+var fileEarmarkMusic_1 = require("gd-sprest-bs/build/icons/svgs/fileEarmarkMusic");
+var fileEarmarkPdf_1 = require("gd-sprest-bs/build/icons/svgs/fileEarmarkPdf");
+var fileEarmarkPpt_1 = require("gd-sprest-bs/build/icons/svgs/fileEarmarkPpt");
+var fileEarmarkPlay_1 = require("gd-sprest-bs/build/icons/svgs/fileEarmarkPlay");
+var fileEarmarkRichtext_1 = require("gd-sprest-bs/build/icons/svgs/fileEarmarkRichtext");
+var fileEarmarkSpreadsheet_1 = require("gd-sprest-bs/build/icons/svgs/fileEarmarkSpreadsheet");
+var fileEarmarkText_1 = require("gd-sprest-bs/build/icons/svgs/fileEarmarkText");
+var fileEarmarkWord_1 = require("gd-sprest-bs/build/icons/svgs/fileEarmarkWord");
+var fileEarmarkZip_1 = require("gd-sprest-bs/build/icons/svgs/fileEarmarkZip");
+var front_1 = require("gd-sprest-bs/build/icons/svgs/front");
+var inputCursorText_1 = require("gd-sprest-bs/build/icons/svgs/inputCursorText");
+var layoutTextSidebar_1 = require("gd-sprest-bs/build/icons/svgs/layoutTextSidebar");
+var x_1 = require("gd-sprest-bs/build/icons/svgs/x");
+/**
+ * Documents
+ * Renders a data table containing the contents of a document library.
+ */
+var Documents = /** @class */ (function () {
+    function Documents() {
+    }
+    Object.defineProperty(Documents, "DataTable", {
+        get: function () { return this._dt; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Documents, "DocSetId", {
+        get: function () { return this._docSetId; },
+        set: function (value) { this._docSetId = value; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Documents, "ListName", {
+        get: function () { return this._listName; },
+        set: function (value) { this._listName = value; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Documents, "CanDelete", {
+        get: function () { return this._canDelete; },
+        set: function (value) { this._canDelete = value; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Documents, "CanEdit", {
+        get: function () { return this._canEdit; },
+        set: function (value) { this._canEdit = value; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Documents, "CanView", {
+        get: function () { return this._canView; },
+        set: function (value) { this._canView = value; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Documents, "RootFolder", {
+        get: function () { return this._rootFolder; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Documents, "TableElement", {
+        get: function () { return this._elTable; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Documents, "TemplateFiles", {
+        get: function () { return this._templatesFiles; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Documents, "TemplateFolders", {
+        get: function () { return this._templateFolders; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Documents, "TemplatesUrl", {
+        get: function () { return this._templatesUrl; },
+        set: function (value) { this._templatesUrl = value; },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Copies a file to a folder to the library
+     * @param item The dropdown item containing the file/folder to copy.
+     */
+    Documents.copyFile = function (item) {
+        var _this = this;
+        // Show a loading dialog
+        loadingDialog_1.LoadingDialog.setHeader("Initializing the Transfer");
+        loadingDialog_1.LoadingDialog.setBody("Copying the file(s) to the workspace...");
+        loadingDialog_1.LoadingDialog.show();
+        // See if this is a folder
+        if (item.data.Files) {
+            // Parse the files
+            var folder = item.data;
+            gd_sprest_bs_1.Helper.Executor(folder.Files.results, function (file) {
+                // Return a promise
+                return new Promise(function (resolve) {
+                    // Get the file contents
+                    (0, gd_sprest_bs_1.Web)().getFileByServerRelativeUrl(file.ServerRelativeUrl).content().execute(function (data) {
+                        // Copy the file
+                        (0, gd_sprest_bs_1.List)(_this.ListName).RootFolder().Files().add(file.Name, true, data).execute(resolve, resolve);
+                    });
+                });
+            }).then(function () {
+                // Close the dialog
+                loadingDialog_1.LoadingDialog.hide();
+                // Refresh the page
+                _this.refresh();
+            });
+        }
+        else {
+            // Copy the file
+            var file_1 = item.data;
+            file_1.content().execute(function (data) {
+                // Copy the file
+                (0, gd_sprest_bs_1.List)(_this.ListName).RootFolder().Files().add(file_1.Name, true, data).execute(function () {
+                    // Close the dialog
+                    loadingDialog_1.LoadingDialog.hide();
+                    // Refresh the page
+                    _this.refresh();
+                });
+            });
+        }
+    };
+    // Generates the template files/folders dropdown items
+    Documents.generateItems = function () {
+        var _this = this;
+        var items = [];
+        // Parse the template folders
+        for (var i = 0; i < this.TemplateFolders.length; i++) {
+            var folder = this.TemplateFolders[i];
+            // Skip the internal forms folder
+            if (folder.Name == "Forms") {
+                continue;
+            }
+            // Add a dropdown item
+            items.push({
+                text: folder.Name,
+                data: folder,
+                value: folder.ServerRelativeUrl,
+                onClick: function (item) { _this.copyFile(item); }
+            });
+        }
+        // Parse the template files
+        for (var i = 0; i < this.TemplateFiles.length; i++) {
+            var file = this.TemplateFiles[i];
+            // Add a dropdown item
+            items.push({
+                text: file.Name,
+                data: file,
+                value: file.ServerRelativeUrl,
+                onClick: function (item) { _this.copyFile(item); }
+            });
+        }
+        // Return the dropdown items
+        return items;
+    };
+    // Returns the extension of a file name
+    Documents.getFileExt = function (fileName) {
+        var extension = fileName.split('.');
+        return extension[extension.length - 1].toLowerCase();
+    };
+    // Determines if the document can be viewed in office online servers
+    Documents.isWopi = function (file) {
+        switch (this.getFileExt(file.Name)) {
+            // Excel
+            case "csv":
+            case "doc":
+            case "docx":
+            case "dot":
+            case "dotx":
+            case "pot":
+            case "potx":
+            case "pps":
+            case "ppsx":
+            case "ppt":
+            case "pptx":
+            case "xls":
+            case "xlsx":
+            case "xlt":
+            case "xltx":
+                return true;
+            // Default
+            default: {
+                return false;
+            }
+        }
+    };
+    // Loads the data
+    Documents.load = function () {
+        var _this = this;
+        // Return a promise
+        return new Promise(function (resolve, reject) {
+            var web = (0, gd_sprest_bs_1.Web)();
+            // See if the templates library was set
+            if (_this.TemplatesUrl) {
+                // Load the files and folders
+                web.getFolderByServerRelativeUrl(_this.TemplatesUrl).query({
+                    Expand: ["Folders/Files", "Files"]
+                }).execute(function (folder) {
+                    // Set the template files
+                    _this._templatesFiles = folder.Files.results;
+                    // Set the template folders
+                    _this._templateFolders = folder.Folders.results;
+                }, reject);
+            }
+            // See if we are targeting a document set folder
+            if (_this.DocSetId) {
+                web.Lists(_this.ListName).Items(_this.DocSetId).Folder().query({
+                    Expand: [
+                        "Folders/Files", "Folders/Files/Author",
+                        "Folders/Files/ListItemAllFields", "Folders/Files/ModifiedBy",
+                        "Files", "Files/Author", "Files/ListItemAllFields", "Files/ModifiedBy"
+                    ]
+                }).execute(function (folder) {
+                    // Set the root folder
+                    _this._rootFolder = folder;
+                }, reject);
+            }
+            else {
+                // Load library information
+                web.Lists(_this.ListName).RootFolder().query({
+                    Expand: [
+                        "Folders/Files", "Folders/Files/Author",
+                        "Folders/Files/ListItemAllFields", "Folders/Files/ModifiedBy",
+                        "Files", "Files/Author", "Files/ListItemAllFields", "Files/ModifiedBy"
+                    ]
+                }).execute(function (folder) {
+                    // Set the root folder
+                    _this._rootFolder = folder;
+                }, reject);
+            }
+            // Wait for the requests to complete
+            web.done(function () {
+                // Resolve the request
+                resolve();
+            });
+        });
+    };
+    // Renders the file actions
+    Documents.renderActionButtons = function (el, file) {
+        var _this = this;
+        var isWopi = this.isWopi(file);
+        // Create a span to wrap the icons in
+        var span = document.createElement("span");
+        span.className = "bg-white d-inline-flex ms-2 rounded";
+        var spanEdit = span.cloneNode();
+        var spanProps = span.cloneNode();
+        var spanDownload = span.cloneNode();
+        var spanDel = span.cloneNode();
+        spanDel.classList.add("me-1");
+        // Add the icons
+        el.appendChild(span);
+        el.appendChild(spanEdit);
+        el.appendChild(spanProps);
+        el.appendChild(spanDownload);
+        el.appendChild(spanDel);
+        // Render a View tooltip
+        gd_sprest_bs_1.Components.Tooltip({
+            el: span,
+            content: "View",
+            btnProps: {
+                // Render the icon button
+                className: "img-flip-x p-1",
+                iconType: front_1.front,
+                iconSize: 24,
+                isDisabled: !this.CanView,
+                type: gd_sprest_bs_1.Components.ButtonTypes.OutlineSecondary,
+                onClick: function () {
+                    if (_this.CanView) {
+                        // Open the file in a new tab
+                        window.open(isWopi ? gd_sprest_bs_1.ContextInfo.webServerRelativeUrl + "/_layouts/15/WopiFrame.aspx?sourcedoc=" + file.ServerRelativeUrl + "&action=view" : file.ServerRelativeUrl, "_blank");
+                    }
+                }
+            },
+        });
+        // Render an Edit tooltip
+        gd_sprest_bs_1.Components.Tooltip({
+            el: spanEdit,
+            content: "Edit",
+            btnProps: {
+                // Render the icon button
+                className: "p-1",
+                iconType: inputCursorText_1.inputCursorText,
+                iconSize: 24,
+                isDisabled: (!isWopi || !this.CanEdit),
+                type: gd_sprest_bs_1.Components.ButtonTypes.OutlineSecondary,
+                onClick: function () {
+                    if (isWopi && _this.CanEdit) {
+                        // Open the file in a new tab
+                        window.open(gd_sprest_bs_1.ContextInfo.webServerRelativeUrl + "/_layouts/15/WopiFrame.aspx?sourcedoc=" + file.ServerRelativeUrl + "&action=edit");
+                    }
+                }
+            },
+        });
+        // Render a Properties tooltip
+        gd_sprest_bs_1.Components.Tooltip({
+            el: spanProps,
+            content: "Properties",
+            btnProps: {
+                // Render the icon button
+                className: "p-1",
+                iconType: layoutTextSidebar_1.layoutTextSidebar,
+                iconSize: 24,
+                isDisabled: !this.CanEdit,
+                type: gd_sprest_bs_1.Components.ButtonTypes.OutlineSecondary,
+                onClick: function () {
+                    if (_this.CanEdit) {
+                        // Set the item form properties
+                        itemForm_1.ItemForm.ListName = _this.ListName;
+                        itemForm_1.ItemForm.UseModal = false;
+                        // Show the edit form
+                        itemForm_1.ItemForm.edit({
+                            itemId: file.ListItemAllFields["Id"],
+                            onCreateEditForm: function (props) {
+                                // Set the fields to display
+                                props.includeFields = ["FileLeafRef", "Title"];
+                                // Set the rendering event
+                                props.onControlRendering = function (ctrl, field) {
+                                    if (field.InternalName == "FileLeafRef") {
+                                        // Validate the name of the file
+                                        ctrl.onValidate = function (ctrl, results) {
+                                            var _a;
+                                            // Ensure the value is less than 128 characters
+                                            if (((_a = results.value) === null || _a === void 0 ? void 0 : _a.length) > 128) {
+                                                // Return an error message
+                                                results.invalidMessage = "The file name must be less than 128 characters.";
+                                                results.isValid = false;
+                                            }
+                                            // Return the results
+                                            return results;
+                                        };
+                                    }
+                                    // See if this is the title field
+                                    else if (field.InternalName == "Title") {
+                                        // Update the label
+                                        ctrl.label = "Description";
+                                        // Validate the length of the description
+                                        ctrl.onValidate = function (ctrl, result) {
+                                            var _a;
+                                            // Ensure the value is less than 255 characters
+                                            if (((_a = result.value) === null || _a === void 0 ? void 0 : _a.length) > 255) {
+                                                // Return an error message
+                                                result.invalidMessage = "The description must be less than 255 characters.";
+                                                result.isValid = false;
+                                            }
+                                            // Valid
+                                            else
+                                                result.isValid = true;
+                                            return result;
+                                        };
+                                    }
+                                };
+                                // Return the properties
+                                return props;
+                            },
+                            onSetFooter: function (el) {
+                                var updateBtn = el.querySelector('[role="group"]').firstChild;
+                                updateBtn.classList.remove("btn-outline-primary");
+                                updateBtn.classList.add("btn-primary");
+                            },
+                            onSetHeader: function (el) {
+                                // Update the header
+                                el.querySelector("h5").innerHTML = "Properties";
+                            },
+                            onUpdate: function () {
+                                _this.refresh();
+                            }
+                        });
+                    }
+                }
+            },
+        });
+        // Render a Download tooltip
+        gd_sprest_bs_1.Components.Tooltip({
+            el: spanDownload,
+            content: "Download",
+            btnProps: {
+                // Render the icon button
+                className: "p-1",
+                iconType: fileEarmarkArrowDown_1.fileEarmarkArrowDown,
+                iconSize: 24,
+                isDisabled: !this.CanView,
+                type: gd_sprest_bs_1.Components.ButtonTypes.OutlineSecondary,
+                onClick: function () {
+                    if (_this.CanView) {
+                        window.open(gd_sprest_bs_1.ContextInfo.webServerRelativeUrl + "/_layouts/15/download.aspx?SourceUrl=" + file.ServerRelativeUrl, "_blank");
+                    }
+                }
+            },
+        });
+        // Render a Delete tooltip
+        gd_sprest_bs_1.Components.Tooltip({
+            el: spanDel,
+            content: "Delete",
+            btnProps: {
+                // Render the icon button
+                className: "p-1",
+                iconType: x_1.x,
+                iconSize: 24,
+                isDisabled: !this.CanDelete,
+                type: gd_sprest_bs_1.Components.ButtonTypes.OutlineSecondary,
+                onClick: function () {
+                    if (_this.CanDelete) {
+                        // Confirm we want to delete the item
+                        if (confirm("Are you sure you want to delete this document?")) {
+                            // Display a loading dialog
+                            loadingDialog_1.LoadingDialog.setHeader("Deleting Document");
+                            loadingDialog_1.LoadingDialog.setBody("Deleting Document: " + file.Name + ". This will close afterwards.");
+                            loadingDialog_1.LoadingDialog.show();
+                            // Delete the document
+                            (0, gd_sprest_bs_1.Web)().getFileByServerRelativeUrl(file.ServerRelativeUrl).delete().execute(
+                            // Success
+                            function () {
+                                // close dialog
+                                loadingDialog_1.LoadingDialog.hide();
+                                // Refresh the page                         
+                                _this.refresh();
+                            }, 
+                            // Error
+                            function (err) {
+                                // TODO
+                            });
+                        }
+                    }
+                }
+            },
+        });
+    };
+    // Renders the file icon
+    Documents.renderFileIcon = function (el, file) {
+        // Render the icon wrapper
+        var span = document.createElement("span");
+        span.className = "text-muted";
+        el.appendChild(span);
+        // Render the icon
+        var size = 28;
+        switch (this.getFileExt(file.Name)) {
+            // Power BI
+            case "pbix":
+                span.appendChild((0, fileEarmarkBarGraph_1.fileEarmarkBarGraph)(size));
+                span.title = "Power BI Report";
+                break;
+            // Binary
+            case "bin":
+            case "blg":
+            case "dat":
+            case "dmg":
+            case "dmp":
+            case "log":
+            case "pbi":
+                span.appendChild((0, fileEarmarkBinary_1.fileEarmarkBinary)(size));
+                span.title = "Binary File";
+                break;
+            // Code
+            case "asp":
+            case "aspx":
+            case "css":
+            case "hta":
+            case "htm":
+            case "html":
+            case "js":
+            case "json":
+            case "mht":
+            case "mhtml":
+            case "scss":
+            case "xml":
+            case "yaml":
+                span.appendChild((0, fileEarmarkCode_1.fileEarmarkCode)(size));
+                span.title = "Code";
+                break;
+            // Excel
+            case "csv":
+            case "ods":
+            case "xls":
+            case "xlsx":
+            case "xlt":
+            case "xltx":
+                span.appendChild((0, fileEarmarkExcel_1.fileEarmarkExcel)(size));
+                span.title = "Excel Spreadsheet";
+                break;
+            // Image
+            case "ai":
+            case "bmp":
+            case "eps":
+            case "gif":
+            case "heic":
+            case "heif":
+            case "jpe":
+            case "jpeg":
+            case "jpg":
+            case "png":
+            case "psd":
+            case "svg":
+            case "tif":
+            case "tiff":
+            case "webp":
+                span.appendChild((0, fileEarmarkImage_1.fileEarmarkImage)(size));
+                span.title = "Image";
+                break;
+            // Audio
+            case "aac":
+            case "aiff":
+            case "alac":
+            case "flac":
+            case "m4a":
+            case "m4p":
+            case "mka":
+            case "mp3":
+            case "mp4a":
+            case "wav":
+            case "wma":
+                span.appendChild((0, fileEarmarkMusic_1.fileEarmarkMusic)(size));
+                span.title = "Audio File";
+                break;
+            // PDF
+            case "pdf":
+                span.appendChild((0, fileEarmarkPdf_1.fileEarmarkPdf)(size));
+                span.title = "Adobe PDF";
+                break;
+            // PowerPoint
+            case "odp":
+            case "pot":
+            case "potx":
+            case "pps":
+            case "ppsx":
+            case "ppt":
+            case "pptx":
+                span.appendChild((0, fileEarmarkPpt_1.fileEarmarkPpt)(size));
+                span.title = "PowerPoint Presentation";
+                break;
+            // Media
+            case "avi":
+            case "flv":
+            case "m2ts":
+            case "mkv":
+            case "mov":
+            case "m4p":
+            case "m4v":
+            case "mp4":
+            case "mpe":
+            case "mpeg":
+            case "mpg":
+            case "mpv":
+            case "qt":
+            case "ts":
+            case "vob":
+            case "webm":
+            case "wmv":
+                span.appendChild((0, fileEarmarkPlay_1.fileEarmarkPlay)(size));
+                span.title = "Media File";
+                break;
+            // Rich Text
+            case "rtf":
+                span.appendChild((0, fileEarmarkRichtext_1.fileEarmarkRichtext)(size));
+                span.title = "Rich Text";
+                break;
+            // Database
+            case "ldf":
+            case "mdb":
+            case "mdf":
+                span.appendChild((0, fileEarmarkSpreadsheet_1.fileEarmarkSpreadsheet)(size));
+                span.title = "Database";
+                break;
+            // Text
+            case "md":
+            case "text":
+            case "txt":
+                span.appendChild((0, fileEarmarkText_1.fileEarmarkText)(size));
+                span.title = "Text";
+                break;
+            // Word
+            case "doc":
+            case "docx":
+            case "dot":
+            case "dotx":
+            case "odt":
+            case "wpd":
+                span.appendChild((0, fileEarmarkWord_1.fileEarmarkWord)(size));
+                span.title = "Word Document";
+                break;
+            // Compressed
+            case "7z":
+            case "cab":
+            case "gz":
+            case "iso":
+            case "rar":
+            case "tgz":
+            case "zip":
+                span.appendChild((0, fileEarmarkZip_1.fileEarmarkZip)(size));
+                span.title = "Compressed Folder";
+                break;
+            // Default
+            default: {
+                span.appendChild((0, fileEarmark_1.fileEarmark)(size));
+                span.title = "File";
+            }
+        }
+    };
+    // Renders the navigation
+    Documents.renderNavigation = function (el) {
+        var _this = this;
+        var nav = gd_sprest_bs_1.Components.Navbar({
+            el: el,
+            brand: "Documents View",
+            itemsEnd: [
+                {
+                    text: "Templates",
+                    className: "btn btn-sm btn-outline-secondary",
+                    iconSize: 20,
+                    iconType: bookmarkPlus_1.bookmarkPlus,
+                    isButton: true,
+                    items: this.generateItems(),
+                    onRender: function (el) {
+                        el.classList.add("bg-white");
+                        el.querySelector("svg").style.margin = "0 0.25rem 0.1rem -0.25rem";
+                    },
+                    onMenuRendering: function (props) {
+                        // Update the placement
+                        props.options.offset = [7, 0];
+                        // Return the properties
+                        return props;
+                    }
+                },
+                {
+                    text: "Upload",
+                    onRender: function (el, item) {
+                        // Clear the existing button
+                        el.innerHTML = "";
+                        // Create a span to wrap the icon in
+                        var span = document.createElement("span");
+                        span.className = "bg-white d-inline-flex ms-2 rounded";
+                        el.appendChild(span);
+                        // Render a tooltip
+                        gd_sprest_bs_1.Components.Tooltip({
+                            el: span,
+                            content: item.text,
+                            btnProps: {
+                                // Render the icon button
+                                className: "p-1",
+                                iconType: fileEarmarkArrowUp_1.fileEarmarkArrowUp,
+                                iconSize: 24,
+                                type: gd_sprest_bs_1.Components.ButtonTypes.OutlineSecondary,
+                                onClick: function () {
+                                    // Show the file upload dialog
+                                    gd_sprest_bs_1.Helper.ListForm.showFileDialog().then(function (fileInfo) {
+                                        // Show a loading dialog
+                                        loadingDialog_1.LoadingDialog.setHeader("Uploading File");
+                                        loadingDialog_1.LoadingDialog.setBody("Saving the file you selected. Please wait...");
+                                        loadingDialog_1.LoadingDialog.show();
+                                        // Upload the file to the objective folder
+                                        (0, gd_sprest_bs_1.List)(_this.ListName).RootFolder().Files().add(fileInfo.name, true, fileInfo.data).execute(
+                                        // Success
+                                        function (file) {
+                                            // Hide the dialog
+                                            loadingDialog_1.LoadingDialog.hide();
+                                            // Refresh the page
+                                            _this.refresh();
+                                        }, 
+                                        // Error
+                                        function (err) {
+                                            // Hide the dialog
+                                            loadingDialog_1.LoadingDialog.hide();
+                                        });
+                                    });
+                                }
+                            },
+                        });
+                    }
+                }
+            ]
+        });
+        /* Fix the padding on the left & right of the nav */
+        nav.el.querySelector("div.container-fluid").classList.add("ps-75");
+        nav.el.querySelector("div.container-fluid").classList.add("pe-2");
+    };
+    // Renders the datatable with the file information
+    Documents.renderTable = function () {
+        var _this = this;
+        // Clear the table element
+        while (this._elTable.firstChild) {
+            this._elTable.removeChild(this._elTable.firstChild);
+        }
+        // Create an array containing the file information
+        var files = this.RootFolder.Files.results;
+        // Parse the folders
+        for (var i = 0; i < this.RootFolder.Folders.results.length; i++) {
+            var folder = this.RootFolder.Folders.results[i];
+            // Append files
+            files = files.concat(folder.Files.results);
+        }
+        // Render the table
+        this._dt = new table_1.DataTable({
+            el: this._elTable,
+            rows: files,
+            dtProps: {
+                dom: 'rt<"row"<"col-sm-4"l><"col-sm-4"i><"col-sm-4"p>>',
+                columnDefs: [
+                    { targets: 0, searchable: false },
+                    {
+                        targets: 2, render: function (data, type, row) {
+                            // Limit the length of the Description column to 50 chars
+                            var esc = function (t) {
+                                return t
+                                    .replace(/&/g, '&amp;')
+                                    .replace(/</g, '&lt;')
+                                    .replace(/>/g, '&gt;')
+                                    .replace(/"/g, '&quot;');
+                            };
+                            // Order, search and type get the original data
+                            if (type !== 'display') {
+                                return data;
+                            }
+                            if (typeof data !== 'number' && typeof data !== 'string') {
+                                return data;
+                            }
+                            data = data.toString(); // cast numbers
+                            if (data.length < 50) {
+                                return data;
+                            }
+                            // Find the last white space character in the string
+                            var trunc = esc(data.substr(0, 50).replace(/\s([^\s]*)$/, ''));
+                            return '<span title="' + esc(data) + '">' + trunc + '&#8230;</span>';
+                        }
+                    },
+                    {
+                        targets: 8,
+                        orderable: false,
+                        searchable: false
+                    }
+                ],
+                createdRow: function (row, data, index) {
+                    jQuery('td', row).addClass('align-middle');
+                },
+                // Add some classes to the dataTable elements
+                drawCallback: function (settings) {
+                    var api = new jQuery.fn.dataTable.Api(settings);
+                    jQuery(api.context[0].nTable).removeClass('no-footer');
+                    jQuery(api.context[0].nTable).addClass('tbl-footer');
+                    jQuery(api.context[0].nTable).addClass('table-striped');
+                    jQuery(api.context[0].nTableWrapper).find('.dataTables_info').addClass('text-center');
+                    jQuery(api.context[0].nTableWrapper).find('.dataTables_length').addClass('pt-2');
+                    jQuery(api.context[0].nTableWrapper).find('.dataTables_paginate').addClass('pt-03');
+                },
+                headerCallback: function (thead, data, start, end, display) {
+                    jQuery('th', thead).addClass('align-middle');
+                },
+                // Order by the 1st column by default; ascending
+                order: [[1, "asc"]]
+            },
+            columns: [
+                {
+                    name: "",
+                    title: "Type",
+                    onRenderCell: function (el, col, file) {
+                        // Render the file
+                        _this.renderFileIcon(el, file);
+                        // Set the sort value
+                        el.setAttribute("data-sort", _this.getFileExt(file.Name));
+                    }
+                },
+                {
+                    name: "",
+                    title: "Name",
+                    onRenderCell: function (el, col, file) {
+                        // Render the file name
+                        el.innerHTML = file.Name;
+                    }
+                },
+                {
+                    name: "",
+                    title: "Description",
+                    onRenderCell: function (el, col, file) {
+                        // Render the file description
+                        el.innerHTML = file.Title;
+                    }
+                },
+                {
+                    name: "",
+                    title: "File Size",
+                    onRenderCell: function (el, col, file) {
+                        // Render the file size value
+                        el.innerHTML = (0, methods_1.formatBytes)(file.Length);
+                        // Set the sort value
+                        el.setAttribute("data-sort", file.Length.toString());
+                    }
+                },
+                {
+                    name: "",
+                    title: "Created",
+                    onRenderCell: function (el, col, file) {
+                        // Render the date/time value
+                        el.innerHTML = (0, methods_1.formatTimeValue)(file.TimeCreated);
+                        // Set the date/time filter/sort values
+                        el.setAttribute("data-filter", moment(file.TimeCreated).format("dddd MMMM DD YYYY"));
+                        el.setAttribute("data-sort", file.TimeCreated);
+                    }
+                },
+                {
+                    name: "",
+                    title: "Created By",
+                    onRenderCell: function (el, col, file) {
+                        // Render the Person field Title
+                        el.innerHTML = file.Author["Title"];
+                    }
+                },
+                {
+                    name: "",
+                    title: "Modified",
+                    onRenderCell: function (el, col, file) {
+                        // Render the date/time value
+                        el.innerHTML = (0, methods_1.formatTimeValue)(file.TimeLastModified);
+                        // Set the date/time filter/sort values
+                        el.setAttribute("data-filter", moment(file.TimeLastModified).format("dddd MMMM DD YYYY"));
+                        el.setAttribute("data-sort", file.TimeLastModified);
+                    }
+                },
+                {
+                    name: "",
+                    title: "Modified By",
+                    onRenderCell: function (el, col, file) {
+                        // Render the Person field Title
+                        el.innerHTML = file.ModifiedBy["Title"];
+                    }
+                },
+                {
+                    className: "text-end text-nowrap",
+                    name: "",
+                    title: "",
+                    onRenderCell: function (el, col, file) {
+                        // Render the action buttons
+                        _this.renderActionButtons(el, file);
+                    }
+                }
+            ]
+        });
+    };
+    /** Public Methods */
+    // Refreshes the documents
+    Documents.refresh = function () {
+        var _this = this;
+        // Show a loading dialog
+        loadingDialog_1.LoadingDialog.setHeader("Reloading Workspace");
+        loadingDialog_1.LoadingDialog.setBody("Reloading the workspace data. This will close afterwards.");
+        loadingDialog_1.LoadingDialog.show();
+        // Clear the element
+        this._elTable.parentElement.removeChild(this._elTable);
+        this._elTable = null;
+        // Load the workspace item
+        this.load().then(function () {
+            // Render the component
+            _this.render(_this._elTable.parentElement);
+            // Hide the dialog
+            loadingDialog_1.LoadingDialog.hide();
+        });
+    };
+    // Renders the component
+    Documents.render = function (el) {
+        var _this = this;
+        // Load the data
+        this.load().then(function () {
+            // Render the navigation
+            _this.renderNavigation(el);
+            // Create the element to render the table to
+            _this._elTable = document.createElement("div");
+            el.appendChild(_this._elTable);
+            // Render the table
+            _this.renderTable();
+        });
+    };
+    // Searches the data table
+    Documents.search = function (value) {
+        // Search the table data
+        this._dt.search(value);
+    };
+    Documents._props = null;
+    /** The data table. */
+    Documents._dt = null;
+    /** The document set item id. */
+    Documents._docSetId = null;
+    /** The library name. */
+    Documents._listName = null;
+    // Can delete documents
+    Documents._canDelete = true;
+    // Can edit documents
+    Documents._canEdit = true;
+    // Can view documents
+    Documents._canView = true;
+    // The root folder of the library
+    Documents._rootFolder = null;
+    // The table element
+    Documents._elTable = null;
+    // The template files
+    Documents._templatesFiles = null;
+    // The template folders
+    Documents._templateFolders = null;
+    /** Templates Library (Optional) */
+    Documents._templatesUrl = null;
+    return Documents;
+}());
+exports.Documents = Documents;