\");\r\n };\r\n })(Serenity.ColumnPickerDialog.prototype['createLI']);\r\n\r\n Serenity.ColumnPickerDialog.prototype['getTemplate'] = (function (old) {\r\n return function () {\r\n var template = old.call(this);\r\n return template.replace('fa-list', 'fa-eye-slash');\r\n };\r\n })(Serenity.ColumnPickerDialog.prototype['getTemplate']);\r\n\r\n Serenity.DataGrid.defaultRowHeight = 27;\n Serenity.DataGrid.defaultHeaderHeight = 27;\r\n }\r\n}","\r\nnamespace Serenity {\r\n\r\n /**\r\n * A dialog/panel base class that easily generates a wizard UI from tabs in a form definition (e.g. Form.cs)\r\n */\r\n export abstract class WizardDialog extends Serenity.TemplatedDialog {\r\n\r\n private wizardGrid: Serenity.PropertyGrid;\r\n\r\n /**\r\n * Creates a new wizard dialog\r\n * @param opt options, might be used by derived classes\r\n */\r\n constructor(opt?: TOptions) {\r\n super(opt);\r\n\r\n this.element.children().addClass(\"wizard-horz\");\r\n\r\n this.wizardGrid = new PropertyGrid(this.byId(\"WizardGrid\"),\r\n this.getPropertyGridOptions());\r\n\r\n this.wizardGrid.element.children(\".property-tabs\").children('li').each((i, li) => {\r\n var $li = $(li);\r\n var h = $li.children('a').html();\r\n $li.html('').attr('data-step', i + 1);\r\n $('').text(i + 1).appendTo($li);\r\n $('').html(h).appendTo($li);\r\n $('').appendTo($li);\r\n });\r\n\r\n this.byId(\"CancelButton\").click((e) => this.confirmCancel(e));\r\n\r\n this.byId(\"BackButton\").click(() => {\n this.moveToStep(this.step - 1);\n });\n\n this.byId(\"NextButton\").click(() => {\n if (!this.validateForm())\n return false;\n\n this.moveToStep(this.step + 1);\n });\n\n this.wizardGrid.element.children(\".property-tabs\")\n .on(\"click\", \"li\", e => {\n var step = $(e.currentTarget).data('step');\n\n if (step > this.step)\n return;\n\n this.moveToStep(step);\n });\r\n\r\n this.wizardGrid.load(this.getInitialEntity());\r\n\r\n this.element.on('dialogbeforeclose panelbeforeclose', e => {\r\n if (!Serenity.WX.hasOriginalEvent(e))\r\n return;\r\n\r\n this.confirmCancel(e);\r\n });\r\n }\r\n\r\n /**\r\n * gets property grid options\r\n */\r\n protected getPropertyGridOptions(): PropertyGridOptions {\r\n return {\r\n idPrefix: this.idPrefix,\r\n mode: PropertyGridMode.insert,\r\n items: this.getPropertyItems(),\r\n localTextPrefix: this.getLocalTextPrefix(),\r\n useCategories: true\r\n };\r\n }\r\n\r\n /**\r\n * gets form key to use to load property items / tabs\r\n */\r\n protected getFormKey(): string {\r\n return null;\r\n }\r\n\r\n /**\r\n * gets local text prefix for labels\r\n */\r\n protected getLocalTextPrefix(): string {\r\n return \"\";\r\n }\r\n\r\n /**\r\n * gets list of property items to shown on form, uses form key to load items by default\r\n */\r\n protected getPropertyItems(): Serenity.PropertyItem[] {\r\n var formKey = this.getFormKey();\r\n if (formKey)\r\n return Q.getForm(formKey);\r\n\r\n return [];\r\n }\r\n\r\n /**\r\n * gets initial entity to load onto form, override these to customize initial form values\r\n */\r\n protected getInitialEntity(): TEntity {\r\n return {} as TEntity;\r\n }\r\n\r\n // gets maximum number of steps from\r\n protected get maxSteps() {\r\n return this.wizardGrid.element\r\n .children(\".property-tabs\")\r\n .children(\"li\")\r\n .length;\r\n }\r\n\r\n /**\r\n * moves to a step, by calling one of next, back or finish methods based on target step\r\n * @param toStep the target step to move to\r\n */\r\n protected moveToStep(toStep: number) {\r\n if (toStep == this.step || toStep < 1 || toStep > this.maxSteps + 1)\r\n return;\r\n\r\n if (toStep >= this.maxSteps + 1) {\r\n this.finish();\r\n return;\r\n }\r\n\r\n (toStep < this.step ? this.back : this.next).call(this, toStep);\r\n }\r\n\r\n private _step: number = 1;\r\n\r\n // gets current step\r\n protected get step(): number {\r\n return this._step;\r\n }\r\n\r\n // sets current step directly, skipping any validation\r\n protected set step(value: number) {\r\n this.getStepLink(this._step).removeClass(\"in active\");\r\n this.getStepPanel(this._step).removeClass(\"in active\");\r\n this.getStepLink(value).addClass(\"in active\");\r\n this.getStepPanel(value).addClass(\"in active\")\r\n .find(\".require-layout\").triggerHandler(\"layout\");\r\n var s: number;\r\n for (s = value; s <= this._step; s++)\r\n this.getStepLink(s).removeClass(\"complete\").find(\"span.badge\").removeClass(\"badge-success\");\r\n for (s = this._step; s < value; s++)\r\n this.getStepLink(s).addClass(\"complete\").find(\"span.badge\").addClass(\"badge-success\");\r\n\r\n this._step = value;\r\n\r\n this.byId(\"BackButton\").toggleClass('disabled', this._step <= 1);\r\n this.byId(\"NextButton\").children('.txt').text(Q.text(\"Site.WizardDialog.\" +\r\n (this._step == this.maxSteps ? \"Finish\" : \"Next\") + \"Button\"));\r\n }\r\n\r\n /**\r\n * called to reset the form, and go back to first step\r\n */\r\n protected reset() {\r\n this.step = 1;\r\n this.wizardGrid.load(this.getInitialEntity());\r\n }\r\n\r\n /**\r\n * is called when user clicks the Finish button (next button on last step)\r\n */\r\n protected finish() {\r\n this.dialogClose();\r\n }\r\n\r\n /**\r\n * next method is called when user tries to go forward\r\n * @param toStep the step user is trying to move to, usually one step ahead\r\n */\r\n protected next(toStep: number) {\r\n this.step = toStep;\r\n }\r\n\r\n /**\r\n * back method is called when user tries to go backward\r\n * @param toStep the step user is trying to move to, usually one step back but can also be multiple\r\n */\r\n protected back(toStep: number) {\r\n this.step = toStep;\r\n }\r\n\r\n private getStepLink(step: number) {\r\n return this.wizardGrid.element\r\n .children(\".property-tabs\")\r\n .children(\"li\").eq(step - 1);\r\n }\r\n\r\n private getStepPanel(step: number) {\r\n return this.wizardGrid.element\r\n .children(\".property-panes\")\r\n .children().eq(step - 1)\r\n }\r\n\r\n /**\r\n * make sure derived classes use WizardDialog template,\r\n * if they don't define one of their own\r\n */\r\n protected getFallbackTemplate() {\r\n return `\r\n
\r\n \r\n
`;\r\n }\r\n\r\n /**\r\n * gets cancel confirmation message, return null to disable confirmation\r\n */\r\n protected getCancelMessage() {\r\n return Q.text(\"Site.WizardDialog.CancelMessage\");\r\n }\r\n\r\n /**\r\n * confirms when user tries to cancel or close the wizard\r\n * @param e\r\n */\r\n protected confirmCancel(e: JQueryEventObject) {\r\n var cancelMessage = this.getCancelMessage();\r\n if (!cancelMessage) {\r\n e.preventDefault();\r\n this.dialogClose();\r\n return;\r\n }\r\n\r\n e.preventDefault();\r\n Q.confirm(cancelMessage,\r\n () => {\r\n this.dialogClose();\r\n });\r\n }\r\n\r\n /** gets save entity from form, optionally from a limited list of steps (tabs)\r\n * @param steps the list of steps to read data from, pass null to get all\r\n */\r\n protected getSaveEntity(steps?: number[]): TEntity {\r\n var entity = {} as TEntity;\r\n this.wizardGrid.save(entity);\r\n\r\n if (steps != null) {\r\n var maxSteps = this.maxSteps;\r\n for (var i = 1; i <= maxSteps; i++) {\r\n if (steps.indexOf(i) >= 0)\r\n continue;\r\n\r\n var panel = this.getStepPanel(i);\r\n panel.find('.field').each((z, el) => {\r\n var field = $(el).attr('class').split(' ')[1];\r\n if (field)\r\n delete entity[field];\r\n });\r\n }\r\n }\r\n\r\n return entity;\r\n }\r\n\r\n // gets value of compact steps option\r\n protected get compactSteps() {\r\n return this.element.children().hasClass(\"compact-steps\");\r\n }\r\n\r\n // sets value of compact steps option, when it is on, inactive step titles only show\r\n // numbers and gets visible on hover. this is better there are many steps to fit\r\n protected set compactSteps(value: boolean) {\r\n this.element.children().toggleClass(\"compact-steps\", value);\r\n }\r\n }\r\n}\r\n","\r\nnamespace Serenity {\r\n\r\n export interface AutoColumnWidthMixinOptions {\r\n grid: Serenity.DataGrid;\r\n /** Disable auto size on load behavior, default is false, user can stil auto size by double click */\r\n disabled?: boolean;\r\n /** True to just auto size once on load, not on every load, like after changing pages, sorting etc, default is false */\r\n autoSizeAllJustOnce?: boolean;\r\n /** Disable auto size on load behavior if user manually resizes a column, default is true */\r\n disableIfUserResize?: boolean;\r\n /** If column has an explicit width set in Form.cs, use that width on auto size, \r\n * doesn't effect manually triggered auto size by double click, default is false */\r\n useExplicitWidths?: boolean;\r\n /** Set to true if headers shouldn't affect auto width, default is false.\r\n * If passed a number, header are considered for auto width but only up to that \r\n * number, e.g. if you pass 200, and header width is 300, 200 will be used */\r\n ignoreHeaders?: boolean | number;\r\n /** Maximum rows to scan in data source, default is infinite */\r\n maxRows?: number;\r\n /** Maximum auto column width, default value is 400 */\r\n maxWidth?: number;\r\n /** Minimum auto column width, default value is 30 */\r\n minWidth?: number;\r\n }\r\n\r\n /**\r\n * A mixin that can be applied to a DataGrid for auto size column width functionality\r\n */\r\n export class AutoColumnWidthMixin extends Serenity.Widget {\r\n\r\n private slickGrid: Slick.Grid;\r\n private $container: JQuery;\r\n private _disabled: boolean;\r\n private autoSizing: number = 0;\r\n private markupReadyOnce: boolean;\r\n private oldMarkupReady: () => void;\r\n private oldPersistSettings: (flags?: Serenity.GridPersistanceFlags) => void;\r\n private oldGetCurrentSettings: (flags?: Serenity.GridPersistanceFlags) => Serenity.PersistedGridSettings;\r\n private oldRestoreSettings: (settings?: Serenity.PersistedGridSettings, flags?: Serenity.GridPersistanceFlags) => void;\r\n public disabled: boolean;\r\n\r\n private columnResizeHandler = () => {\r\n if (!this.autoSizing && Q.coalesce(this.options.disableIfUserResize, true))\n this.disabled = true;\n }\r\n\r\n constructor(options: AutoColumnWidthMixinOptions) {\r\n super(options.grid.element, options);\r\n\r\n if (options.disabled != null)\r\n this.disabled = !!options.disabled;\r\n\r\n this.slickGrid = options.grid.slickGrid;\r\n this.$container = $((this.slickGrid as any).getContainerNode());\r\n this.$container.on('dblclick.' + this.uniqueName, '.slick-resizable-handle', (e) => this.resizeHandleClick(e));\r\n this.slickGrid.onColumnsResized.subscribe(this.columnResizeHandler);\n var self = this;\n\n this.oldMarkupReady = options.grid['markupReady'];\n options.grid['markupReady'] = function () {\n self.oldMarkupReady && self.oldMarkupReady.call(this);\n if (!self.disabled && (!self.markupReadyOnce || !self.options.autoSizeAllJustOnce))\n self.autoSizeAll(self.disabled != null ? false : null);\n self.markupReadyOnce = true;\n };\n\n this.oldPersistSettings = options.grid['persistSettings'];\n options.grid['persistSettings'] = function (flags?: Serenity.GridPersistanceFlags) {\n if (self.autoSizing)\n return;\n self.oldPersistSettings.call(this, flags);\n };\n\n this.oldGetCurrentSettings = options.grid['getCurrentSettings'];\n options.grid['getCurrentSettings'] = function (flags?: Serenity.GridPersistanceFlags): Serenity.PersistedGridSettings {\n flags = flags || this.gridPersistanceFlags();\n flags.columnWidths = Q.coalesce(flags.columnWidths, !!this.disabled);\n return self.oldGetCurrentSettings.call(this, flags);\n }\n\n this.oldRestoreSettings = options.grid['restoreSettings'];\n options.grid['restoreSettings'] = function (settings?: Serenity.PersistedGridSettings, flags?: Serenity.GridPersistanceFlags) {\n if (settings == null)\n settings = this.getPersistedSettings();\n\n flags = flags || this.gridPersistanceFlags();\n\n if (settings != null &&\n settings.columns &&\n (flags.columnWidths || Q.any(settings.columns, x => x.width != null)))\n self.disabled = true;\n\n self.oldRestoreSettings.call(this, settings, flags);\n }\n\n if (!this.disabled)\n this.autoSizeAll();\n }\n\r\n destroy() {\r\n if (this.options && this.options.grid) {\r\n this.options.grid.element.off('.' + this.uniqueName);\r\n this.options.grid['markupReady'] = this.oldMarkupReady;\r\n }\r\n\r\n this.slickGrid && this.slickGrid.onColumnsResized.unsubscribe(this.columnResizeHandler);\r\n\r\n this.options = null;\r\n this.slickGrid = null;\r\n this.$container = null;\r\n super.destroy();\r\n }\r\n\r\n\r\n private resizeHandleClick(e: JQueryEventObject) {\r\n if (e.ctrlKey) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.autoSizeAll(false);\r\n this.disabled = false;\r\n return;\r\n }\r\n\r\n var $header = $(e.currentTarget).closest('.slick-header-column');\r\n var columnDef = $header.data('column') as Slick.Column;\r\n\r\n if (!columnDef || !columnDef.resizable)\r\n return;\r\n\r\n e.preventDefault();\r\n e.stopPropagation();\r\n\r\n this.autoSizeColumn($header, columnDef);\r\n }\r\n\r\n private getAutoColumnWidth($header: JQuery, columnDef: Slick.Column) {\r\n var colIndex = this.slickGrid.getColumnIndex(columnDef.id);\r\n\r\n var autoWidth = this.getMaxColumnWidth(columnDef, colIndex);\r\n\r\n if (typeof this.options.ignoreHeaders == \"number\") {\r\n autoWidth = Math.max(Math.min(this.options.ignoreHeaders, getElementWidth($header[0])), autoWidth);\r\n }\r\n else if (!this.options.ignoreHeaders) {\r\n autoWidth = Math.max(getElementWidth($header[0]), autoWidth);\r\n }\r\n\r\n autoWidth = (autoWidth || 0) + 1;\r\n\r\n if (columnDef.maxWidth > 0)\r\n autoWidth = Math.min(autoWidth, columnDef.maxWidth);\r\n else\r\n autoWidth = Math.min(autoWidth, this.options.maxWidth || 400);\r\n\r\n if (columnDef.minWidth > 0)\r\n autoWidth = Math.max(autoWidth, columnDef.minWidth);\r\n else\r\n autoWidth = Math.max(autoWidth, this.options.minWidth || 30);\r\n\r\n return autoWidth;\r\n }\r\n\r\n private autoSizeColumn($header: JQuery, columnDef: Slick.Column) {\r\n var autoWidth = this.getAutoColumnWidth($header, columnDef);\r\n\r\n if (autoWidth !== columnDef.width) {\r\n this.autoSizing++;\r\n try {\r\n columnDef.width = autoWidth;\r\n this.slickGrid.setColumns(this.slickGrid.getColumns());\r\n this.slickGrid.onColumnsResized.notify();\r\n }\r\n finally {\r\n this.autoSizing--;\r\n }\r\n }\r\n }\r\n\r\n private queueAutoSize: number = 0;\r\n\r\n public autoSizeAll(useExplicitWidths?: boolean) {\r\n if (!this.$container.is(':visible')) {\r\n\r\n if (this.queueAutoSize <= 0) {\r\n this.queueAutoSize++;\r\n LazyLoadHelper.executeOnceWhenShown(this.$container, () => this.autoSizeAll(useExplicitWidths));\r\n }\r\n\r\n return;\r\n }\r\n\r\n if (this.queueAutoSize > 0) {\r\n this.queueAutoSize--;\r\n }\r\n\r\n this.autoSizing++;\r\n try {\r\n\r\n var $headers = this.$container.find(\".slick-header-column\");\r\n useExplicitWidths = Q.coalesce(useExplicitWidths, this.options.useExplicitWidths);\r\n $headers.each((index, el) => {\r\n var columnDef = $(el).data('column') as Slick.Column;\r\n if (!columnDef)\r\n return;\r\n var autoWidth = (useExplicitWidths && columnDef.sourceItem && columnDef.sourceItem.width > 0 && columnDef.sourceItem.widthSet) ?\r\n columnDef.sourceItem.width : this.getAutoColumnWidth($(el), columnDef);\r\n columnDef.width = autoWidth;\r\n });\r\n\r\n this.slickGrid.setColumns(this.slickGrid.getColumns());\r\n this.slickGrid.onColumnsResized.notify();\r\n }\r\n finally {\r\n this.autoSizing--;\r\n }\r\n }\r\n\r\n private createRow(columnDef: Slick.Column) {\r\n var rowEl = $('
');\r\n var gridCanvas = this.slickGrid.getCanvasNode();\r\n $(gridCanvas).append(rowEl);\r\n return rowEl;\r\n }\r\n\r\n private getMaxColumnWidth(columnDef: Slick.Column, colIndex: number) {\r\n var rowEl = this.createRow(columnDef);\r\n var maxAllowedWidth = columnDef.maxWidth > 0 ? columnDef.maxWidth : this.options.maxWidth;\r\n try {\r\n var cell = rowEl.children()[0];\r\n\r\n var length = this.slickGrid.getDataLength();\r\n if (this.options.maxRows != null &&\r\n this.options.maxRows < length)\r\n length = this.options.maxRows;\r\n\r\n var maxWidth = 0;\r\n var offset = 0;\r\n for (var i = 0; i < length; i++) {\r\n var item = this.slickGrid.getDataItem(i);\r\n\r\n if (columnDef.formatter) {\r\n try {\r\n var html = columnDef.formatter(-1, colIndex, item[columnDef.field], columnDef, item);\r\n cell.innerHTML = html;\r\n }\r\n catch {\r\n cell.innerText = Q.coalesce(item[columnDef.field], '');\r\n }\r\n\r\n var child = cell.childNodes[0] as HTMLElement;\r\n if (child && child.tagName == \"INPUT\" &&\r\n (child as HTMLInputElement).type != \"checkbox\") {\r\n var cs = getComputedStyle(child);\r\n offset = (parseFloat(cs.borderLeftWidth) || 0) +\r\n (parseFloat(cs.borderRightWidth) || 0) +\r\n (parseFloat(cs.paddingLeft) || 0) +\r\n (parseFloat(cs.paddingRight) || 0);\r\n cell.innerText = (child as HTMLInputElement).value;\r\n }\r\n }\r\n else\r\n cell.innerText = Q.coalesce(item[columnDef.field], '');\r\n\r\n var width = cell.offsetWidth + offset;\r\n if (width > maxWidth)\r\n maxWidth = width;\r\n\r\n if (maxAllowedWidth > 0 && width >= maxAllowedWidth)\r\n break;\r\n }\r\n\r\n return maxWidth || 0;\r\n }\r\n finally {\r\n rowEl.remove();\r\n }\r\n }\r\n }\r\n\r\n function getElementWidth(element: HTMLElement) {\r\n var width, clone = element.cloneNode(true) as HTMLElement;\r\n clone.style.cssText = 'position: absolute; visibility: hidden; right: auto; text-overflow: initial; white-space: nowrap;';\r\n element.parentNode.insertBefore(clone, element);\r\n width = clone.offsetWidth;\r\n clone.parentNode.removeChild(clone);\r\n return width;\r\n }\r\n\r\n\r\n}","\r\nnamespace Serenity {\r\n\r\n export interface CardViewItemsProps {\r\n items: TItem[];\r\n renderItem: (item: TItem, index: number) => React.ReactNode;\r\n }\r\n\r\n export class CardViewItems extends React.Component> {\r\n render(): React.ReactNode {\r\n return (\r\n
\r\n {this.props.items.map((item, index) =>\r\n
\r\n {this.props.renderItem(item, index)}\r\n
\r\n )}\r\n
\r\n );\r\n }\r\n }\r\n}","\r\n// thanks a lot to Brainweber Inc. for sponsoring this feature and letting us share it with community\r\n\r\nnamespace Serenity {\r\n\r\n export type CardViewType = \"card\" | \"grid\";\r\n\r\n /**\r\n * A mixin that can be applied to a DataGrid for card view functionality\r\n */\r\n export class CardViewMixin {\r\n\r\n private dataGrid: DataGrid;\r\n private getId: (item: TItem) => any;\r\n private cardContainer: JQuery;\r\n\r\n constructor(private options: CardViewMixinOptions) {\r\n var dg = this.dataGrid = options.grid;\r\n var idProperty = (dg as any).getIdProperty();\r\n var getId = this.getId = (item: TItem) => (item as any)[idProperty];\r\n\r\n var btnGroup = $(`\r\n
\r\n \r\n \r\n
`)\r\n .prependTo(dg.element.find('.grid-title'));\r\n\r\n this.cardContainer = $('')\r\n .insertAfter(dg.element.children('.grid-container'));\r\n\r\n btnGroup.find('input').change((e) => this.switchView($(e.target).val()));\r\n\r\n this.resizeCardView();\r\n\r\n dg.element.bind('layout', () => this.resizeCardView());\r\n\r\n (dg.view as any).onDataChanged.subscribe(() => {\r\n this.updateCardItems();\r\n });\r\n\r\n var oldCurrentSettings = (dg as any).getCurrentSettings;\r\n (dg as any).getCurrentSettings = function (flag: GridPersistanceFlags) {\r\n var settings = oldCurrentSettings.apply(dg, [flag]);\r\n settings['viewType'] = btnGroup.find('input:checked').val();\r\n return settings;\r\n };\r\n\r\n var oldRestoreSettings = (dg as any).restoreSettings;\r\n (dg as any).restoreSettings = function (settings?: PersistedGridSettings, flags?: GridPersistanceFlags) {\r\n oldRestoreSettings.apply(dg, [settings, flags]);\r\n\r\n if (settings == null) {\r\n var storage = this.getPersistanceStorage();\r\n if (storage == null)\r\n return;\r\n\r\n var json = Q.trimToNull(storage.getItem(this.getPersistanceKey()));\r\n if (!json)\r\n return;\r\n\r\n settings = JSON.parse(json);\r\n }\r\n var viewType = (settings as any).viewType || 'list';\r\n var currentViewType = btnGroup.find('input:checked').val() || 'list';\r\n if (viewType != currentViewType) {\r\n btnGroup.find('input').eq(viewType == 'card' ? 1 : 0).click();\r\n }\r\n };\r\n }\r\n\r\n private switchView(viewType: CardViewType) {\r\n this.resizeCardView();\r\n var card = viewType == 'card';\r\n this.dataGrid.element.children('.card-container').toggle(card);\r\n this.dataGrid.element.children('.grid-container').toggle(!card);\r\n\r\n if (card)\r\n this.updateCardItems();\r\n\r\n (this.dataGrid as any).persistSettings();\r\n }\r\n\r\n private updateCardItems() {\r\n ReactDOM.render(React.createElement(CardViewItems, {\r\n items: this.dataGrid.getItems(),\r\n renderItem: this.options.renderItem\r\n }), this.cardContainer[0]);\r\n }\r\n\r\n private resizeCardView() {\r\n var gc = this.dataGrid.element.children('.grid-container');\r\n var width = this.dataGrid.element.width();\r\n var height = gc.height();\r\n this.dataGrid.element.children('.card-container').css({\r\n width: width + 'px',\r\n height: height + 'px'\r\n });\r\n }\r\n }\r\n\r\n export interface CardViewMixinOptions {\r\n grid: Serenity.DataGrid;\r\n renderItem: (item: TItem, index: number) => React.ReactNode;\r\n }\r\n\r\n Q.initFullHeightGridPage = function (gridDiv) {\r\n $('body').addClass('full-height-page');\r\n gridDiv.addClass('responsive-height');\r\n var layout = function () {\r\n var inPageContent = gridDiv.parent().hasClass('page-content') ||\r\n gridDiv.parent().is('section.content');\r\n if (inPageContent) {\r\n gridDiv.css('height', '1px').css('overflow', 'hidden');\r\n }\r\n var cc = gridDiv.children('.card-container');\r\n if (cc.length && cc.is(':visible')) {\r\n cc.hide();\r\n gridDiv.children('.grid-container').show();\r\n try {\r\n Q.layoutFillHeight(gridDiv);\r\n gridDiv.triggerHandler('layout');\r\n }\r\n finally {\r\n gridDiv.children('.grid-container').hide();\r\n cc.show();\r\n }\r\n }\r\n else {\r\n Q.layoutFillHeight(gridDiv);\r\n if (inPageContent) {\r\n gridDiv.css('overflow', '');\r\n }\r\n gridDiv.triggerHandler('layout');\r\n }\r\n };\r\n if ($('body').hasClass('has-layout-event')) {\r\n $('body').bind('layout', layout);\r\n }\r\n else if ((window as any).Metronic) {\r\n (window as any).Metronic.addResizeHandler(layout);\r\n }\r\n else {\r\n $(window).resize(layout);\r\n }\r\n layout();\r\n Q.Router.resolve();\r\n }\r\n}","\r\n// thanks a lot to Brainweber Inc. for sponsoring this feature and letting us share it with community\r\n\r\nnamespace Serenity {\r\n\r\n /**\r\n * A mixin that can be applied to a DataGrid for favorite views functionality\r\n */\r\n export class FavoriteViewsMixin {\r\n\r\n private dataGrid: DataGrid;\r\n private getId: (item: TItem) => any;\r\n private ul: JQuery;\r\n\r\n constructor(private options: FavoriteViewsMixinOptions) {\r\n var dg = this.dataGrid = options.grid;\r\n var idProperty = (dg as any).getIdProperty();\r\n var getId = this.getId = (item: TItem) => (item as any)[idProperty];\r\n\r\n var dropdown = $(`\r\n
\r\n \r\n
\r\n
\r\n
${Q.text(\"Site.FavoriteViewsMixin.SaveView\")}
\r\n \r\n \r\n
\r\n
\r\n
\r\n`)\r\n .prependTo(dg.element.find(\".grid-title\"));\r\n\r\n dropdown.on('shown.bs.dropdown', e => {\r\n dropdown.find('input[type=text]').focus();\r\n });\r\n\r\n var viewName = dropdown.find('li.save input[type=text]');\r\n\r\n dropdown.find('button.save-button').click(() => {\r\n var name = Q.trimToNull(viewName.val());\r\n if (!name) {\r\n Q.notifyWarning(Q.text(\"Site.FavoriteViewsMixin.EmptyNameError\"));\r\n return;\r\n }\r\n\r\n var favorites = this.getFavorites();\r\n favorites[name] = (dg as any).getCurrentSettings();\r\n this.saveFavorites(favorites);\r\n Q.notifySuccess(Q.format(Q.text(\"Site.FavoriteViewsMixin.SaveSuccessMessage\"), name));\r\n viewName.val('');\r\n this.populateFavorites();\r\n });\r\n\r\n this.ul = dropdown.children(\"ul\");\r\n this.ul.on('click', 'i.fa-trash-o', e => {\r\n var name = $(e.target).closest('li').children('a').text();\r\n var favorites = this.getFavorites();\r\n delete favorites[name];\r\n this.saveFavorites(favorites);\r\n this.populateFavorites();\r\n Q.notifyWarning(Q.format(Q.text(\"Site.FavoriteViewsMixin.DeleteSuccessMessage\"), name));\r\n });\r\n\r\n this.ul.on('click', 'a', e => {\r\n var name = $(e.target).text();\r\n var favorites = this.getFavorites();\r\n var settings = favorites[name];\r\n if (settings) {\r\n (dg as any).restoreSettings(settings);\r\n dg.refresh();\r\n Q.notifySuccess(Q.format(Q.text(\"Site.FavoriteViewsMixin.LoadedViewMessage\"), name));\r\n }\r\n });\r\n\r\n this.populateFavorites();\r\n }\r\n\r\n private populateFavorites() {\r\n var favorites = this.getFavorites();\r\n\r\n var saveLI = this.ul.children('.save');\r\n this.ul.children().not(saveLI).remove();\r\n\r\n var keys = Object.keys(favorites).sort();\r\n if (keys.length) {\r\n for (var k of keys) {\r\n var li = $('
')\r\n .insertBefore(saveLI)\r\n .children('a')\r\n .text(k)\r\n .end();\r\n\r\n $('')\r\n .attr('title', Q.text(\"Site.FavoriteViewsMixin.DeleteButtonHint\"))\r\n .appendTo(li);\r\n }\r\n\r\n $('').insertBefore(saveLI);\r\n }\r\n }\r\n\r\n private saveFavorites(favorites: object) {\r\n var storage = (this.dataGrid as any).getPersistanceStorage() as Serenity.SettingStorage;\r\n var key = \"Views:\" + (this.dataGrid as any).getPersistanceKey();\r\n storage.setItem(key, JSON.stringify(favorites));\r\n }\r\n\r\n private getFavorites() {\r\n var storage = (this.dataGrid as any).getPersistanceStorage() as Serenity.SettingStorage;\r\n var key = \"Views:\" + (this.dataGrid as any).getPersistanceKey();\r\n return JSON.parse(storage.getItem(key) || \"{}\") || {};\r\n }\r\n }\r\n\r\n export interface FavoriteViewsMixinOptions {\r\n // data grid object\r\n grid: Serenity.DataGrid;\r\n }\r\n}","namespace Slick {\r\n export interface Column {\r\n summaryType?: Serenity.SummaryType;\r\n }\r\n}\r\n\r\nnamespace Serenity {\r\n export interface CustomSummaryMixinOptions {\r\n grid: Serenity.DataGrid;\r\n }\r\n\r\n function toAggregator(summaryType: SummaryType): any {\r\n switch (summaryType) {\r\n case SummaryType.Sum: return Slick.Aggregators.Sum;\r\n case SummaryType.Avg: return Slick.Aggregators.Avg;\r\n case SummaryType.Max: return Slick.Aggregators.Max;\r\n case SummaryType.Min: return Slick.Aggregators.Min;\r\n }\r\n\r\n return null;\r\n }\r\n\r\n export class CustomSummaryMixin {\r\n \r\n constructor(options: CustomSummaryMixinOptions) {\r\n var dg = options.grid;\r\n\r\n var getDefaultAggregators = () => {\r\n var columns = dg['allColumns'];\r\n var aggregators: any[] = [];\r\n for (var x of columns) {\r\n \r\n if (x.sourceItem == null)\r\n continue;\r\n \r\n if (x.sourceItem.summaryType != null &&\r\n x.sourceItem.summaryType != SummaryType.Disabled) {\r\n \r\n var aggregator = toAggregator(x.sourceItem.summaryType);\r\n if (aggregator == null)\r\n continue;\r\n\r\n x.summaryType = x.sourceItem.summaryType;\r\n aggregators.push(new aggregator(x.field));\r\n }\r\n }\r\n\r\n return aggregators;\r\n };\r\n\r\n\r\n dg.view.setSummaryOptions({\r\n aggregators: getDefaultAggregators()\r\n });\r\n\r\n var aggregatesPopup = $(`
\r\n
Sum
\r\n
Average
\r\n
Min
\r\n
Max
\r\n
`).appendTo(document.body)\r\n .click(e => {\r\n if (!$(e.target).is(\"li\"))\r\n return;\r\n\r\n var col = aggregatesPopup.data(\"column\") as Slick.Column;\r\n if (col == null || !col.id)\r\n return;\r\n\r\n var column = Q.tryFirst(dg['allColumns'] as Slick.Column[], x => x.id == col.id);\r\n if (!column)\r\n return;\r\n\r\n if (column.sourceItem == null ||\r\n column.sourceItem.summaryType == null ||\r\n column.sourceItem.summaryType == SummaryType.Disabled)\r\n return;\r\n\r\n var agg = Q.toId($(e.target).data('agg'));\r\n if (agg === column.summaryType)\r\n return;\r\n\r\n column.summaryType = agg;\r\n\r\n var aggregators = dg['allColumns']\r\n .filter(x => x.summaryType)\r\n .map(x => {\r\n var aggregator = toAggregator(x.summaryType)\r\n if (aggregator == null)\r\n return null;\r\n\r\n return new aggregator(x.field);\r\n }).filter(x => x != null);\r\n\r\n dg.view.setSummaryOptions({\r\n aggregators: aggregators\r\n });\r\n\r\n var grouping = (dg.view as any).getGrouping();\r\n for (var i = 0; i < grouping.length; i++)\r\n grouping[i].aggregators = aggregators;\r\n\r\n dg.view.setGrouping(grouping); \r\n dg.slickGrid.invalidate();\r\n });\r\n\r\n dg.element.on('click', '.slick-footerrow-column', e => { \r\n e.preventDefault();\r\n\r\n var col = $(e.currentTarget).data('column');\r\n if (!col || !col.id)\r\n return;\r\n\r\n var column = Q.tryFirst(dg['allColumns'] as Slick.Column[], x => x.id == col.id);\r\n if (!column)\r\n return;\r\n\r\n if (!column ||\r\n !column.sourceItem ||\r\n column.sourceItem.summaryType == null ||\r\n column.sourceItem.summaryType == SummaryType.Disabled)\r\n return;\r\n\r\n aggregatesPopup.data('column', column)\r\n .show()\r\n .css('top', (e.pageY - aggregatesPopup.height()) + 'px')\r\n .css('left', e.pageX + 'px')\r\n .children('li')\r\n .removeClass('active')\r\n .end()\r\n .children('li[data-agg=' + column.summaryType + ']')\r\n .addClass('active');\r\n\r\n $(document.body).off('click.aggregatesMenu' + dg['uniqueName']);\r\n\r\n window.setTimeout(() => $(document.body)\r\n .on(\"click.aggregatesMenu\" + dg['uniqueName'], () => {\r\n aggregatesPopup.hide();\r\n $(document.body).off('click.aggregatesMenu' + dg['uniqueName']);\r\n }), 1);\r\n });\r\n\r\n var oldCurrentSettings = (dg as any).getCurrentSettings;\r\n (dg as any).getCurrentSettings = function (flags: GridPersistanceFlags) {\r\n var settings = oldCurrentSettings.apply(dg, [flags]);\r\n return settings;\r\n };\r\n\r\n var oldRestoreSettings = (dg as any).restoreSettings;\r\n (dg as any).restoreSettings = function (settings?: PersistedGridSettings, \r\n flags?: GridPersistanceFlags) {\r\n oldRestoreSettings.apply(dg, [settings, flags]);\r\n };\r\n }\r\n }\r\n}","declare namespace Slick {\r\n interface Column {\r\n grouping?: false | GroupInfo;\r\n }\r\n}\r\n\r\nnamespace Slick.Plugins {\r\n \r\n export interface DraggableGroupingOptions {\r\n deleteIconCssClass?: string;\r\n deleteIconImage?: string;\r\n dropPlaceHolderText?: string;\r\n getGroupingFor?: (column: Column) => GroupInfo;\r\n getAllColumns?: () => Slick.Column[];\r\n }\r\n\r\n /**\r\n * Based on plugin at https://github.com/muthukumarse/Slickgrid\r\n */\r\n export class DraggableGrouping {\r\n \r\n private grid: Grid;\r\n private gridUid: string;\r\n private dataView: RemoteView;\r\n private dropbox: JQuery;\r\n private dropboxPlaceholder: JQuery;\r\n private expandAll: JQuery;\r\n private collapseAll: JQuery;\r\n private options: DraggableGroupingOptions;\r\n private columnsGroupBy: Slick.Column[];\r\n public onGroupChanged = new Slick.Event();\r\n\r\n constructor(options?: DraggableGroupingOptions) {\r\n var defaults: DraggableGroupingOptions = {\r\n };\r\n\r\n this.options = $.extend(true, {}, defaults, options);\r\n }\r\n\r\n public init(grid: Slick.Grid) {\r\n this.grid = grid;\r\n this.gridUid = grid['getUID']();\r\n \r\n this.dropbox = $(grid['getGroupingPanel']());\r\n var dropPlaceHolderText = this.options.dropPlaceHolderText || \r\n Q.tryGetText(\"Site.DraggableGroupingMixin.DropPlaceholder\") ||\r\n \"Drag a column header here to group by that column\";\r\n\r\n this.dropbox.html(\"
\" + \r\n dropPlaceHolderText + \"
\" + \r\n `` + \r\n ``);\r\n\r\n this.dropboxPlaceholder = this.dropbox.find(\".slick-dropped-placeholder\");\r\n this.expandAll = this.dropbox.find(\".slick-group-expand-all\");\r\n this.collapseAll = this.dropbox.find(\".slick-group-collapse-all\");\r\n this.setupColumnDropbox();\r\n\r\n var cols = this.getColumns();\r\n for (var i = 0; i < cols.length; i++) {\r\n var col = cols[i];\r\n grid['updateColumnHeader'](col.id);\r\n }\r\n\r\n this.columnsGroupBy = [];\r\n }\r\n\r\n private getColumns(): Slick.Column[] {\r\n return (this.options.getAllColumns && this.options.getAllColumns()) || \r\n this.grid.getColumns();\r\n }\r\n\r\n public destroy() {\r\n this.onGroupChanged.clear();\r\n }\r\n\r\n private setupColumnDropbox() {\r\n var _self = this;\r\n this.dropbox.droppable({\r\n activeClass: \"ui-state-default\",\r\n hoverClass: \"ui-state-hover\",\r\n accept: \":not(.ui-sortable-helper)\",\r\n deactivate: (event, ui) => {\r\n this.dropbox.removeClass(\"slick-header-column-denied\");\r\n },\r\n drop: function(event, ui) {\r\n _self.handleGroupByDrop(this, \r\n ui.draggable.attr('id').replace(_self.gridUid, \"\"));\r\n },\r\n over: (event, ui) => {\r\n var id = (ui.draggable).attr('id').replace(this.gridUid, \"\");\r\n this.getColumns().forEach((e, i, a) => {\r\n if (e.id == id) {\r\n if (e.grouping !== false) {\r\n this.dropbox.addClass(\"slick-header-column-denied\");\r\n }\r\n }\r\n });\r\n }\r\n });\r\n\r\n this.dropbox.sortable({\r\n items: \"div.slick-dropped-grouping\",\r\n cursor: \"default\",\r\n tolerance: \"pointer\",\r\n helper: \"clone\",\r\n update: (event, ui) => {\r\n var sortArray = $(event.target).sortable('toArray', {\r\n attribute: 'data-id'\r\n }),\r\n newGroupingOrder = [];\r\n for (var i = 0, l = sortArray.length; i < l; i++) {\r\n for (var a = 0, b = this.columnsGroupBy.length; a < b; a++) {\r\n if (this.columnsGroupBy[a].id == sortArray[i]) {\r\n newGroupingOrder.push(this.columnsGroupBy[a]);\r\n break;\r\n }\r\n }\r\n }\r\n this.columnsGroupBy = newGroupingOrder;\r\n this.updateGroupBy();\r\n }\r\n });\r\n\r\n this.expandAll.on('click', (e) => {\r\n (this.grid.getData() as any).expandAllGroups();\r\n });\r\n\r\n this.collapseAll.on('click', (e) => {\r\n (this.grid.getData() as any).collapseAllGroups();\r\n });\r\n }\r\n\r\n public getGroupingFor(column: Column): GroupInfo {\r\n var g = null;\r\n\r\n if (this.options.getGroupingFor) {\r\n g = this.options.getGroupingFor(column);\r\n }\r\n \r\n if (g === false)\r\n return g;\r\n\r\n return $.extend({\r\n getter: column.field || column.id,\r\n formatter: function (g: Group) {\r\n var text;\r\n if (column.formatter) {\r\n try {\r\n text = column.formatter(-1, -1, g.value, column, { [column.field]: g });\r\n }\r\n catch (e) {\r\n text = Q.htmlEncode(g.value);\r\n }\r\n }\r\n else\r\n text = Q.htmlEncode(g.value);\r\n\r\n return (column.name || column.field || column.id) + \r\n \": \" + text + \" (\" + \r\n g.count + \" items)\";\r\n },\r\n collapsed: true\r\n }, g);\r\n }\r\n\r\n handleGroupByDrop(container: JQuery, columnid: string) {\r\n var columnAllowed = true;\r\n this.columnsGroupBy.forEach(function(clmn, i, a) {\r\n if (clmn.id == columnid) {\r\n columnAllowed = false;\r\n }\r\n });\r\n\r\n var gridColumns = this.getColumns();\r\n\r\n if (!columnAllowed)\r\n return;\r\n\r\n gridColumns.forEach((col, i, a) => {\r\n if (col.id !== columnid || col.grouping === false)\r\n return;\r\n\r\n if (col.grouping == null || $.isEmptyObject(col.grouping)) {\r\n col.grouping = this.getGroupingFor(col);\r\n if (col.grouping === false)\r\n return;\r\n }\r\n\r\n var entry = $(\"
\");\r\n \r\n var groupText = $(\"
\" + \r\n col.name + \"
\")\r\n\r\n groupText.appendTo(entry);\r\n \r\n var groupRemoveIcon = $(\"
\");\r\n if (this.options.deleteIconCssClass) \r\n groupRemoveIcon.addClass(this.options.deleteIconCssClass);\r\n\r\n if (this.options.deleteIconImage) \r\n groupRemoveIcon.css(\"background\", \"url(\" + this.options.deleteIconImage + \") no-repeat center right\");\r\n\r\n if (!this.options.deleteIconCssClass && !this.options.deleteIconImage) \r\n groupRemoveIcon.addClass('slick-groupby-remove-image');\r\n\r\n groupRemoveIcon.appendTo(entry);\r\n\r\n $(\"
\").appendTo(entry);\r\n entry.appendTo(container);\r\n \r\n this.addColumnGroupBy(col);\r\n groupRemoveIcon.one('click', () => this.removeGroupBy(col.id, entry));\r\n });\r\n\r\n this.grid.invalidate();\r\n }\r\n\r\n private addColumnGroupBy(column: Column) {\r\n this.columnsGroupBy.push(column);\r\n this.updateGroupBy();\r\n }\r\n\r\n public setDroppedGroups(idList: string[]) {\r\n if (!idList || !idList.length) {\r\n this.columnsGroupBy = [];\r\n this.dropbox.find(\".slick-dropped-grouping\").remove();\r\n }\r\n else {\r\n for (var i = 0; i < idList.length; i++) {\r\n this.handleGroupByDrop(this.dropbox, idList[i]);\r\n }\r\n }\r\n\r\n this.updateInterface();\r\n\r\n }\r\n\r\n private removeGroupBy(id: string, entry: JQuery) {\r\n entry.remove();\r\n var gridColumns = this.getColumns();\r\n\r\n var idx;\r\n while ((idx = Q.indexOf(this.columnsGroupBy, x => x.id == id)) >= 0)\r\n this.columnsGroupBy.splice(idx, 1);\r\n \r\n this.updateGroupBy();\r\n }\r\n\r\n private updateInterface() {\r\n var hasGrouping = !!(this.columnsGroupBy && this.columnsGroupBy.length);\r\n this.collapseAll.toggle(hasGrouping);\r\n this.expandAll.toggle(hasGrouping);\r\n this.dropboxPlaceholder.toggle(!hasGrouping);\r\n }\r\n\r\n private updateGroupBy() {\r\n this.updateInterface();\r\n\r\n if (this.columnsGroupBy.length == 0) {\r\n (this.grid.getData() as any).setGrouping([]);\r\n this.onGroupChanged.notify({ groupColumns: [] });\r\n this.grid.invalidate();\r\n return;\r\n }\r\n \r\n var groupingArray: any[] = [];\r\n this.columnsGroupBy.forEach(function(element, index, array) {\r\n groupingArray.push(element.grouping);\r\n });\r\n\r\n (this.grid.getData() as any).setGrouping(groupingArray);\r\n this.grid.invalidate();\r\n this.onGroupChanged.notify({ groupColumns: groupingArray})\r\n }\r\n\r\n public static setupColumnReorder(grid: Slick.Grid, $headers: JQuery, \r\n setupColumnResize: () => void, trigger: (ev: any, p: any) => void) {\r\n $headers.filter(\":ui-sortable\").sortable(\"destroy\");\r\n var $headerDraggableGroupBy = $(grid['getGroupingPanel']());\r\n var columns = grid.getColumns();\r\n var uid = grid['getUID']();\r\n $headers.sortable({\r\n distance: 3,\r\n cursor: \"default\",\r\n tolerance: \"intersection\",\r\n helper: \"clone\",\r\n placeholder: \"slick-sortable-placeholder ui-state-default slick-header-column\",\r\n forcePlaceholderSize: true,\r\n appendTo: \"body\",\r\n start: function(e, ui) {\r\n $(ui.helper).addClass(\"slick-header-column-active\");\r\n },\r\n beforeStop: function(e, ui) {\r\n $(ui.helper).removeClass(\"slick-header-column-active\");\r\n var hasDroppedColumn = $headerDraggableGroupBy\r\n .find(\".slick-dropped-grouping\").length;\r\n if (hasDroppedColumn > 0){\r\n $headerDraggableGroupBy.find(\".slick-dropped-placeholder\").hide();\r\n $headerDraggableGroupBy.find(\".slick-dropped-grouping\").show(); \r\n } \r\n },\r\n stop: function(e) {\r\n if (!grid['getEditorLock']().commitCurrentEdit()) {\r\n $(this).sortable(\"cancel\");\r\n return;\r\n }\r\n \r\n var reorderedIds = $headers.sortable(\"toArray\");\r\n var reorderedColumns = [];\r\n for (var i = 0; i < reorderedIds.length; i++) {\r\n reorderedColumns.push(columns[grid.getColumnIndex(\r\n reorderedIds[i].replace(uid, \"\"))]);\r\n }\r\n grid.setColumns(reorderedColumns);\r\n trigger(grid.onColumnsReordered, {});\r\n e.stopPropagation();\r\n setupColumnResize();\r\n }\r\n });\r\n }\r\n }\r\n}","namespace Serenity {\r\n export interface GridPersistanceFlags {\r\n groupColumns?: boolean;\r\n }\r\n\r\n export interface PersistedGridSettings {\r\n groupColumns?: string[];\r\n }\r\n \r\n export interface DraggableGroupingMixinOptions {\r\n grid: Serenity.DataGrid;\r\n }\r\n\r\n function sortBy(field: string, reverse?: boolean, primer?: (value: any) => any) {\r\n \r\n\t var key = function (x: any) {\r\n return primer ? primer(x[field]) : x[field]\r\n };\r\n\t\r\n\t return function (a: any, b: any) {\r\n\t var A = key(a), B = key(b);\r\n\t return (A < B ? -1 : (A > B ? 1 : 0)) * [1,-1][+!!reverse];\r\n\t }\r\n\t};\r\n\r\n export class DraggableGroupingMixin {\r\n \r\n public readonly plugin: Slick.Plugins.DraggableGrouping;\r\n\r\n constructor(options: DraggableGroupingMixinOptions) {\r\n var dg = options.grid;\r\n\r\n var plugin = this.plugin = new Slick.Plugins.DraggableGrouping({\r\n getAllColumns: () => (dg as any).allColumns\r\n });\r\n\r\n dg.slickGrid.registerPlugin(plugin);\r\n\r\n plugin.onGroupChanged.subscribe(() => {\r\n (dg as any).persistSettings(null);\r\n });\r\n\r\n var oldCurrentSettings = (dg as any).getCurrentSettings;\r\n (dg as any).getCurrentSettings = function (flags: GridPersistanceFlags) {\r\n var settings = oldCurrentSettings.apply(dg, [flags]);\r\n\r\n if (flags == null || flags.groupColumns == null || flags.groupColumns) {\r\n var grouping = (dg.view as any).getGrouping() as Slick.GroupInfo[] || [];\r\n settings['groupColumns'] = grouping.map(x => x.getter)\r\n .filter(x => x != null && typeof x == \"string\");\r\n }\r\n\r\n return settings;\r\n };\r\n\r\n function loadGroupCols(groupColsToLoad: string[]) { \r\n if (groupColsToLoad == null)\r\n return;\r\n \r\n var columns = (dg as any).allColumns as Slick.Column[];\r\n\r\n var groupCols = groupColsToLoad\r\n .map(x => Q.tryFirst(columns, z => z.id == x))\r\n .filter(x => x != null);\r\n \r\n var groupings = groupCols.map((e: Slick.Column) => {\r\n if (e['grouping'] == null)\r\n e['grouping'] = plugin.getGroupingFor(e);\r\n\r\n return e['grouping'];\r\n });\r\n\r\n dg.view.setGrouping(groupings as any);\r\n plugin.setDroppedGroups(groupCols.map(x => x.id));\r\n dg.slickGrid.invalidate();\r\n };\r\n\r\n function getDefaultGroupCols() {\r\n var colsWithOrder = (dg as any).allColumns.filter((x: Slick.Column) => x.sourceItem != null &&\r\n x.sourceItem.groupOrder != null) as Slick.Column[];\r\n if (colsWithOrder.length) {\r\n return colsWithOrder.sort(sortBy('groupOrder')).map(x => x.id);\r\n }\r\n return null;\r\n }\r\n\r\n var oldRestoreSettings = (dg as any).restoreSettings;\r\n (dg as any).restoreSettings = function (settings?: PersistedGridSettings, flags?: GridPersistanceFlags) {\r\n oldRestoreSettings.apply(dg, [settings, flags]);\r\n\r\n if (!(flags == null || flags.groupColumns == null || flags.groupColumns))\r\n return;\r\n\r\n var groupColsToLoad: string[] = null;\r\n\r\n if (settings == null) {\r\n var storage = this.getPersistanceStorage();\r\n if (storage != null) {\r\n var json = Q.trimToNull(storage.getItem(this.getPersistanceKey()));\r\n if (json) {\r\n groupColsToLoad = (JSON.parse(json) || {}).groupColumns;\r\n }\r\n }\r\n }\r\n else\r\n groupColsToLoad = settings.groupColumns;\r\n\r\n if (groupColsToLoad == null) {\r\n groupColsToLoad = getDefaultGroupCols();\r\n }\r\n\r\n loadGroupCols(groupColsToLoad);\r\n \r\n };\r\n }\r\n }\r\n}","\r\nnamespace Serenity {\r\n export const enum HeaderFilterType {\r\n disabled = 0,\r\n value = 1,\r\n text = 2\r\n }\r\n}\r\n\r\ndeclare namespace Slick {\r\n export interface Column {\r\n headerFilterType?: Serenity.HeaderFilterType;\r\n headerFilterValues?: object[];\r\n }\r\n}\r\n\r\nnamespace Slick.Plugins {\r\n\r\n /*\r\n Based on SlickGrid Header Menu Plugin (https://github.com/mleibman/SlickGrid/blob/master/plugins/slick.headermenu.js)\r\n Based on SlickGrid Spreadsheet Plugins (https://github.com/danny-sg/slickgrid-spreadsheet-plugins/blob/master/ext.headerfilter.js)\r\n (Can't be used at the same time as the header menu plugin as it implements the dropdown in the same way)\r\n */\r\n\r\n export interface HeaderFiltersOptions {\r\n buttonImage?: string;\r\n useColumnFormatter?: boolean;\r\n getFilterValues?: (column: Slick.Column, callback: (values: object[], texts?: string[]) => void) => void;\r\n getFilterType?: (column: Slick.Column) => Serenity.HeaderFilterType;\r\n }\r\n\r\n export class HeaderFilters {\r\n\r\n private grid: Slick.Grid;\r\n private menu: JQuery;\r\n private searchInput: JQuery;\r\n private handler: Slick.EventHandler;\r\n private options: HeaderFiltersOptions;\r\n private checkedValues : any = new window['Set']();\r\n private filterValues: object[];\r\n private filterTexts: string[];\r\n public onFilterApplied = new Slick.Event();\r\n public onCommand = new Slick.Event();\r\n\r\n constructor(options: HeaderFiltersOptions) {\r\n this.handler = new Slick.EventHandler();\r\n\r\n var defaults: HeaderFiltersOptions = {\r\n buttonImage: \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEQAACxEBf2RfkQAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4yMfEgaZUAAACeSURBVDhPvdItDsIwGIfxAoZNAQaDmOEgXAIzsRvgCArNCRBcYAmeO+AQHGBuCWqOhYTP521SQsZI2yzhn/xE3+RxVU3WRoSJoz70OpjiiMxijzH0WhhhgzOeP+RIEOA9E6e4oBqdIFGIr0k8xA43mKjADLXR5wY44IEr1rBGZltIWGIuB9f9P1zgDu+whxW8Q1kXS8T65Tn5x6IypV7aOzNezxwrTQAAAABJRU5ErkJggg==\",\r\n useColumnFormatter: true,\r\n getFilterValues: null\r\n };\r\n\r\n this.options = $.extend(true, {}, defaults, options);\r\n this.handleMenuItemClick = this.handleMenuItemClick.bind(this);\r\n }\r\n \r\n init(g: Slick.Grid) {\r\n \r\n this.grid = g;\r\n this.handler.subscribe(g.onHeaderCellRendered, this.handleHeaderCellRendered.bind(this))\r\n .subscribe(g.onBeforeHeaderCellDestroy, this.handleBeforeHeaderCellDestroy.bind(this))\r\n .subscribe(g.onClick, this.handleBodyMouseDown.bind(this))\r\n .subscribe(g.onColumnsResized, this.columnsResized.bind(this));\r\n\r\n g.setColumns(g.getColumns());\r\n\r\n $(document.body).bind(\"mousedown\", this.handleBodyMouseDown = this.handleBodyMouseDown.bind(this));\r\n }\r\n\r\n destroy() {\r\n this.handler.unsubscribeAll();\r\n $(document.body).unbind(\"mousedown\", this.handleBodyMouseDown);\r\n }\r\n\r\n getFilterType(column: Slick.Column) {\r\n if (column.headerFilterType != null)\r\n return column.headerFilterType;\r\n\r\n if (this.options.getFilterType != null) {\r\n column.headerFilterType = this.options.getFilterType(column);\r\n if (column.headerFilterType != null)\r\n return column.headerFilterType;\r\n }\r\n\r\n if (column.headerFilterType == null)\r\n column.headerFilterType = Serenity.HeaderFilterType.value;\r\n\r\n return column.headerFilterType;\r\n }\r\n\r\n private handleBodyMouseDown(e: any) {\r\n if (this.menu && this.menu[0] != e.target && !$.contains(this.menu[0], e.target)) {\r\n this.hideMenu();\r\n }\r\n }\r\n\r\n private hideMenu() {\r\n if (this.menu) {\r\n this.menu.remove();\r\n this.menu = null;\r\n }\r\n }\r\n\r\n private handleHeaderCellRendered(e: any, args: any) {\r\n var column = args.column as Column;\r\n\r\n var filterType = this.getFilterType(column);\r\n if (filterType === Serenity.HeaderFilterType.disabled)\r\n return false;\r\n\r\n var $el = $(\"\")\r\n .addClass(\"slick-header-menubutton\")\r\n .data(\"column\", column);\r\n\r\n if (this.options.buttonImage) {\r\n $el.css(\"background-image\", \"url(\" + this.options.buttonImage + \")\");\r\n }\r\n\r\n $(args.node).addClass('has-header-menubutton');\r\n $el.on(\"click\", e => {\r\n e.stopPropagation();\r\n this.showFilter(e);\r\n }).appendTo(args.node);\r\n }\r\n\r\n private handleBeforeHeaderCellDestroy(e: any, args: any) {\r\n $(args.node)\r\n .find(\".slick-header-menubutton\")\r\n .remove();\r\n }\r\n\r\n private addMenuItem(menu: JQuery, columnDef: Slick.Column, title: string, command: string, image: string) {\r\n var $item = $(\"