Skip to content

Commit

Permalink
feat(plugins): move external Cell Menu into Slickgrid-Universal
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghiscoding
ghiscoding committed Sep 5, 2021
1 parent b64dacb commit 6f34c10
Show file tree
Hide file tree
Showing 40 changed files with 2,271 additions and 996 deletions.
10 changes: 5 additions & 5 deletions examples/webpack-demo-vanilla-bundle/src/examples/example03.ts
View file
Expand Up @@ -193,7 +193,7 @@ export class Example3 {
}
},
{
id: 'effortDriven', name: 'Effort Driven', field: 'effortDriven',
id: 'effortDriven', name: 'Effort-Driven', field: 'effortDriven',
width: 80, minWidth: 20, maxWidth: 100,
cssClass: 'cell-effort-driven',
sortable: true,
Expand Down Expand Up @@ -268,7 +268,7 @@ export class Example3 {
},
{ command: 'something', title: 'Disabled Command', disabled: true, positionOrder: 67, }
],
optionTitle: 'Change Complete Flag',
optionTitle: 'Change Effort-Driven Flag',
optionItems: [
{ option: true, title: 'True', iconCssClass: 'mdi mdi-check-box-outline' },
{ option: false, title: 'False', iconCssClass: 'mdi mdi-checkbox-blank-outline' },
Expand Down Expand Up @@ -327,10 +327,10 @@ export class Example3 {
// are available under the grid options as shown below
onCommand: (e, args) => this.executeCommand(e, args),
onOptionSelected: (_e, args) => {
// change "Completed" property with new option selected from the Cell Menu
// change "Effort-Driven" property with new option selected from the Cell Menu
const dataContext = args && args.dataContext;
if (dataContext && dataContext.hasOwnProperty('completed')) {
dataContext.completed = args.item.option;
if (dataContext && dataContext.hasOwnProperty('effortDriven')) {
dataContext.effortDriven = args.item.option;
this.sgb.gridService.updateItem(dataContext);
}
},
Expand Down
4 changes: 2 additions & 2 deletions examples/webpack-demo-vanilla-bundle/src/examples/example04.ts
View file
Expand Up @@ -377,7 +377,7 @@ export class Example4 {
onCommand: (e, args) => this.executeCommand(e, args),
onOptionSelected: (_e, args) => {
// change "Completed" property with new option selected from the Cell Menu
const dataContext = args && args.dataContext;
const dataContext = args?.dataContext;
if (dataContext && dataContext.hasOwnProperty('completed')) {
dataContext.completed = args.item.option;
this.sgb?.gridService.updateItem(dataContext);
Expand Down Expand Up @@ -486,7 +486,7 @@ export class Example4 {
alert('Please help!');
break;
case 'delete-row':
if (confirm(`Do you really want to delete row (${args.row + 1}) with "${dataContext.title}"`)) {
if (confirm(`Do you really want to delete row (${args.row + 1}) with "${dataContext.title}"?`)) {
this.sgb?.gridService.deleteItemById(dataContext.id);
}
break;
Expand Down
42 changes: 40 additions & 2 deletions examples/webpack-demo-vanilla-bundle/src/examples/example07.ts
View file
Expand Up @@ -64,6 +64,35 @@ export class Example7 {
{
id: 'title', nameKey: 'TITLE', field: 'title', filterable: true, editor: { model: Editors.longText, required: true, alwaysSaveOnEnterKey: true },
},
{
id: 'action', name: 'Action', field: 'action', minWidth: 60, maxWidth: 60,
excludeFromExport: true, excludeFromHeaderMenu: true,
formatter: () => `<div class="button-style margin-auto" style="width: 35px; margin-top: -1px;"><span class="mdi mdi-chevron-down mdi-22px color-primary"></span></div>`,
cellMenu: {
commandTitleKey: 'COMMANDS',
commandItems: [
{
command: 'command1', titleKey: 'DELETE_ROW',
iconCssClass: 'mdi mdi-close color-danger', cssClass: 'has-text-danger', textCssClass: 'bold',
action: (_e, args) => {
if (confirm(`Do you really want to delete row (${args.row + 1}) with "${args.dataContext.title}"?`)) {
this.sgb?.gridService.deleteItemById(args.dataContext.id);
}
}
},
'divider',
{
command: 'help', titleKey: 'HELP', iconCssClass: 'mdi mdi-help-circle',
action: () => alert('Please help!')
},
],
optionTitleKey: 'CHANGE_COMPLETED_FLAG',
optionItems: [
{ option: true, titleKey: 'TRUE', iconCssClass: 'mdi mdi-check-box-outline', action: (e, args) => this.changeCompletedOption(args.dataContext, args.item.option) },
{ option: false, titleKey: 'FALSE', iconCssClass: 'mdi mdi-checkbox-blank-outline', action: (e, args) => this.changeCompletedOption(args.dataContext, args.item.option) },
]
}
},
{
id: 'duration', nameKey: 'DURATION', field: 'duration', sortable: true, filterable: true,
type: 'number', editor: { model: Editors.text, alwaysSaveOnEnterKey: true, },
Expand All @@ -86,7 +115,7 @@ export class Example7 {
editor: { model: Editors.date }, type: FieldType.dateIso, saveOutputType: FieldType.dateUtc,
},
{
id: 'effort-driven', nameKey: 'COMPLETED', field: 'effortDriven', formatter: Formatters.checkmarkMaterial,
id: 'completed', nameKey: 'COMPLETED', field: 'completed', formatter: Formatters.checkmarkMaterial,
filterable: true, sortable: true,
filter: {
collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
Expand Down Expand Up @@ -196,6 +225,7 @@ export class Example7 {
exportWithFormatter: true,
sanitizeDataExport: true
},
enableCellMenu: true,
enableFiltering: true,
enableTranslate: true,
translater: this.translateService, // pass the TranslateService instance to the grid
Expand Down Expand Up @@ -276,6 +306,14 @@ export class Example7 {
this.sgb.filterService.clearFilters();
}

changeCompletedOption(dataContext: any, newValue: boolean) {
console.log('change', dataContext, newValue)
if (dataContext && dataContext.hasOwnProperty('completed')) {
dataContext.completed = newValue;
this.sgb?.gridService.updateItem(dataContext);
}
}

/** Delete last inserted row */
deleteItem() {
const requisiteColumnDef = this.columnDefinitions.find((column: Column) => column.id === 'prerequisites');
Expand Down Expand Up @@ -303,7 +341,7 @@ export class Example7 {
percentComplete: Math.round(Math.random() * 100),
start: new Date(2009, 0, 1),
finish: new Date(2009, 0, 5),
effortDriven: (i % 5 === 0),
completed: (i % 5 === 0),
prerequisites: (i % 2 === 0) && i !== 0 && i < 50 ? [i, i - 1] : [],
});
}
Expand Down
4 changes: 2 additions & 2 deletions packages/common/src/controls/__tests__/gridMenuControl.spec.ts
View file
Expand Up @@ -824,7 +824,7 @@ describe('GridMenuControl', () => {
it('should add a custom Grid Menu item with "iconImage" and expect an icon to be included on the item DOM element', () => {
gridOptionsMock.gridMenu.customItems = [{ command: 'help', title: 'Help', iconImage: '/images/some-image.png' }];
gridOptionsMock.gridMenu.iconCssClass = undefined;
gridOptionsMock.gridMenu.iconImage = '/images/some-gridmenu-image.png';
gridOptionsMock.gridMenu.iconImage = '/images/some-image.png';

control.columns = columnsMock;
control.init();
Expand All @@ -835,7 +835,7 @@ describe('GridMenuControl', () => {
const helpIconElm = helpCommandElm.querySelector<HTMLInputElement>('.slick-gridmenu-icon');
const helpTextElm = helpCommandElm.querySelector<HTMLInputElement>('.slick-gridmenu-content');

expect(buttonImageElm.src).toBe('/images/some-gridmenu-image.png');
expect(buttonImageElm.src).toBe('/images/some-image.png');
expect(helpTextElm.textContent).toBe('Help');
expect(helpIconElm.style.backgroundImage).toBe('url(/images/some-image.png)')
expect(consoleWarnSpy).toHaveBeenCalledWith('[Slickgrid-Universal] The "iconImage" property of a Grid Menu item is now deprecated and will be removed in future version, consider using "iconCssClass" instead.');
Expand Down
38 changes: 19 additions & 19 deletions packages/common/src/controls/columnPicker.control.ts
View file
Expand Up @@ -60,6 +60,10 @@ export class ColumnPickerControl {
this.init();
}

get addonOptions(): ColumnPickerOption {
return this.gridOptions.columnPicker || {};
}

get eventHandler(): SlickEventHandler {
return this._eventHandler;
}
Expand All @@ -71,10 +75,6 @@ export class ColumnPickerControl {
this._columns = newColumns;
}

get controlOptions(): ColumnPickerOption {
return this.gridOptions.columnPicker || {};
}

get gridOptions(): GridOption {
return this.sharedService.gridOptions ?? {};
}
Expand All @@ -93,9 +93,9 @@ export class ColumnPickerControl {
this.gridOptions.columnPicker = { ...this._defaults, ...this.gridOptions.columnPicker };

// localization support for the picker
this.controlOptions.columnTitle = this.extensionUtility.getPickerTitleOutputString('columnTitle', 'columnPicker');
this.controlOptions.forceFitTitle = this.extensionUtility.getPickerTitleOutputString('forceFitTitle', 'columnPicker');
this.controlOptions.syncResizeTitle = this.extensionUtility.getPickerTitleOutputString('syncResizeTitle', 'columnPicker');
this.addonOptions.columnTitle = this.extensionUtility.getPickerTitleOutputString('columnTitle', 'columnPicker');
this.addonOptions.forceFitTitle = this.extensionUtility.getPickerTitleOutputString('forceFitTitle', 'columnPicker');
this.addonOptions.syncResizeTitle = this.extensionUtility.getPickerTitleOutputString('syncResizeTitle', 'columnPicker');

const onHeaderContextMenuHandler = this.grid.onHeaderContextMenu;
const onColumnsReorderedHandler = this.grid.onColumnsReordered;
Expand All @@ -121,10 +121,10 @@ export class ColumnPickerControl {
this._menuElm.appendChild(closePickerButtonElm);

// user could pass a title on top of the columns list
if (this.controlOptions?.columnTitle) {
if (this.addonOptions?.columnTitle) {
this._columnTitleElm = document.createElement('div');
this._columnTitleElm.className = 'title';
this._columnTitleElm.textContent = this.controlOptions?.columnTitle ?? this._defaults.columnTitle;
this._columnTitleElm.textContent = this.addonOptions?.columnTitle ?? this._defaults.columnTitle;
this._menuElm.appendChild(this._columnTitleElm);
}

Expand Down Expand Up @@ -169,21 +169,21 @@ export class ColumnPickerControl {
/** Translate the Column Picker headers and also the last 2 checkboxes */
translateColumnPicker() {
// update the properties by pointers, that is the only way to get Column Picker Control to see the new values
if (this.controlOptions) {
this.controlOptions.columnTitle = '';
this.controlOptions.forceFitTitle = '';
this.controlOptions.syncResizeTitle = '';
this.controlOptions.columnTitle = this.extensionUtility.getPickerTitleOutputString('columnTitle', 'columnPicker');
this.controlOptions.forceFitTitle = this.extensionUtility.getPickerTitleOutputString('forceFitTitle', 'columnPicker');
this.controlOptions.syncResizeTitle = this.extensionUtility.getPickerTitleOutputString('syncResizeTitle', 'columnPicker');
if (this.addonOptions) {
this.addonOptions.columnTitle = '';
this.addonOptions.forceFitTitle = '';
this.addonOptions.syncResizeTitle = '';
this.addonOptions.columnTitle = this.extensionUtility.getPickerTitleOutputString('columnTitle', 'columnPicker');
this.addonOptions.forceFitTitle = this.extensionUtility.getPickerTitleOutputString('forceFitTitle', 'columnPicker');
this.addonOptions.syncResizeTitle = this.extensionUtility.getPickerTitleOutputString('syncResizeTitle', 'columnPicker');
}

// translate all columns (including hidden columns)
this.extensionUtility.translateItems(this._columns, 'nameKey', 'name');

// update the Titles of each sections (command, customTitle, ...)
if (this.controlOptions) {
this.updateAllTitles(this.controlOptions);
if (this.addonOptions) {
this.updateAllTitles(this.addonOptions);
}
}

Expand All @@ -205,7 +205,7 @@ export class ColumnPickerControl {
updateColumnPickerOrder.call(this);
this._columnCheckboxes = [];

populateColumnPicker.call(this, this.controlOptions);
populateColumnPicker.call(this, this.addonOptions);
this.repositionMenu(e);
}

Expand Down

0 comments on commit 6f34c10

Please sign in to comment.