@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
276 lines (275 loc) • 12.4 kB
JavaScript
import { AdaptableModuleBase } from './AdaptableModuleBase';
import * as ModuleConstants from '../Utilities/Constants/ModuleConstants';
import * as StyledColumnRedux from '../Redux/ActionsReducers/StyledColumnRedux';
import { StyledColumnWizard } from '../View/StyledColumn/Wizard/StyledColumnWizard';
import { renderStyledColumnStyleSummary } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardStyleSection';
import ObjectFactory from '../Utilities/ObjectFactory';
import { StyledColumnBadgePreview } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview';
import { getObjectTagsViewItems } from '../Utilities/getObjectTagsViewItems';
export class StyledColumnModule extends AdaptableModuleBase {
constructor(api) {
super(ModuleConstants.StyledColumnModuleId, ModuleConstants.StyledColumnFriendlyName, 'brush', 'StyledColumnPopup', // to change
'Create a Special Column Style e.g Gradient, Percent Bar or Badge', api);
}
getModuleAdaptableObjects(config) {
return this.api.styledColumnApi.getStyledColumns(config);
}
getExplicitlyReferencedColumnIds(styledColumn) {
return [styledColumn.ColumnId];
}
hasNamedQueryReferences() {
return false;
}
createColumnMenuItems(column) {
let returnColumnMenuItems = [];
// Need a Column and an editable Module
if (column && this.isModuleEditable() && !column.isTreeColumn) {
let styledColumn = this.api.styledColumnApi.getStyledColumnForColumnId(column.columnId);
// First look at Sparkline Columns - needs to be editable array type
if (this.api.columnApi.hasNumericArrayDataType(column.columnId) &&
column.IsReadOnly !== true &&
this.api.styledColumnApi.canDisplaySparklines()) {
let sparklineColumnExists = column.isSparkline && Boolean(styledColumn);
if (column.isSparkline && !sparklineColumnExists) {
// do nothing as we only want to continue if there is no sparkline column or if its in state
// because if just one then it was created in AG Grid and we dont want to edit it
}
else {
const hasSparklineStyle = styledColumn != null && styledColumn.SparklineStyle != null;
if (!hasSparklineStyle) {
styledColumn = {
...ObjectFactory.CreateEmptyStyledColumn(),
ColumnId: column.columnId,
SparklineStyle: {},
};
}
let label = hasSparklineStyle ? 'Edit ' : 'Create ';
let name = hasSparklineStyle
? 'styled-column-sparkline-edit'
: 'styled-column-sparkline-add';
let popupParam = {
action: hasSparklineStyle ? 'Edit' : 'New',
source: 'ColumnMenu',
value: styledColumn,
config: {
defaultCurrentSectionName: 'Settings',
},
};
returnColumnMenuItems.push(this.createMenuItemShowPopup(name, label + 'Sparkline Column', this.moduleInfo.Popup, this.getGlyphForStyledColumn(styledColumn), popupParam));
}
}
// Next do non sparkline
else if (!column.isSparkline) {
// Edit is common
if (styledColumn) {
if (!styledColumn.IsReadOnly) {
let defaultCurrentSectionName = undefined;
if (styledColumn.BadgeStyle) {
defaultCurrentSectionName = 'Badges';
}
else {
defaultCurrentSectionName = 'Style';
}
const popupParam = {
action: 'Edit',
source: 'ColumnMenu',
value: styledColumn,
config: {
defaultCurrentSectionName,
},
};
const icon = this.getGlyphForStyledColumn(styledColumn);
const typeLabel = this.getTypeLabel(styledColumn);
const label = `Edit ${typeLabel}`;
const name = this.getTypeName(styledColumn);
returnColumnMenuItems.push(this.createMenuItemShowPopup(name, label, this.moduleInfo.Popup, icon, popupParam));
}
}
else {
const newStyledColumn = {
...ObjectFactory.CreateEmptyStyledColumn(),
ColumnId: column.columnId,
};
const popupParam = {
action: 'New',
source: 'ColumnMenu',
value: newStyledColumn,
config: {},
};
const badgeLabel = 'Create Badge Style';
const newBadgeButton = this.createMenuItemShowPopup('styled-column-badge-add', badgeLabel, this.moduleInfo.Popup, 'badge', {
...popupParam,
value: {
...newStyledColumn,
BadgeStyle: {
Badges: [ObjectFactory.CreateDefaultStyledColumnBadge()],
},
},
config: {
defaultCurrentSectionName: 'Badges',
},
});
switch (column.dataType) {
// Number
// Create Styled Column - Gradient | Percent Bar | Badge
case 'number':
const emptyRanges = this.api.columnScopeApi.createCellColorRangesForScope({
ColumnIds: [column.columnId],
});
const newGrandientButton = this.createMenuItemShowPopup('styled-column-gradient-add', 'Create Gradient Column', this.moduleInfo.Popup, 'gradient', {
...popupParam,
value: {
...newStyledColumn,
GradientStyle: {
CellRanges: emptyRanges,
},
},
config: {
defaultCurrentSectionName: 'Style',
},
});
const newPercentBarButton = this.createMenuItemShowPopup('styled-column-percent-bar-add', 'Create Percent Bar', this.moduleInfo.Popup, 'percent', {
...popupParam,
value: {
...newStyledColumn,
PercentBarStyle: {
CellRanges: emptyRanges,
},
},
config: {
defaultCurrentSectionName: 'Style',
},
});
returnColumnMenuItems.push(...[newGrandientButton, newPercentBarButton, newBadgeButton]);
break;
case 'text':
returnColumnMenuItems.push(newBadgeButton);
break;
case 'textArray':
returnColumnMenuItems.push(newBadgeButton);
break;
}
}
}
}
return returnColumnMenuItems;
}
getGlyphForStyledColumn(styledColumn) {
if (styledColumn.GradientStyle) {
return 'gradient';
}
else if (styledColumn.PercentBarStyle) {
return 'percent';
}
else if (styledColumn.SparklineStyle) {
return 'spark-line';
}
else if (styledColumn.BadgeStyle) {
return 'badge';
}
return this.moduleInfo.Glyph;
}
getTeamSharingAction() {
return {
ModuleEntities: this.api.styledColumnApi.getStyledColumns(),
AddAction: StyledColumnRedux.StyledColumnAdd,
EditAction: StyledColumnRedux.StyledColumnEdit,
};
}
toView(styledColumn) {
const specificTypeItems = [];
if (styledColumn.GradientStyle || styledColumn.PercentBarStyle) {
specificTypeItems.push({
name: 'Style',
view: () => {
return renderStyledColumnStyleSummary(styledColumn, this.api);
},
});
}
if (styledColumn.BadgeStyle) {
specificTypeItems.push({
name: 'Settings',
values: [
`Data Rows: ${styledColumn.BadgeStyle?.RowScope?.ExcludeDataRows ? 'No' : 'Yes'}`,
`Group Rows: ${styledColumn.BadgeStyle?.RowScope?.ExcludeGroupRows ? 'No' : 'Yes'}`,
`Summary Rows: ${styledColumn.BadgeStyle?.RowScope?.ExcludeSummaryRows ? 'No' : 'Yes'}`,
],
});
}
if (styledColumn.BadgeStyle) {
specificTypeItems.push({
name: 'Preview',
view: StyledColumnBadgePreview,
});
}
return {
abObject: styledColumn,
items: [
{
name: 'Type',
values: [this.getTypeLabel(styledColumn)],
},
{
name: 'Column',
values: [this.api.columnApi.getFriendlyNameForColumnId(styledColumn.ColumnId)],
},
...specificTypeItems,
,
getObjectTagsViewItems(styledColumn, this.api),
].filter(Boolean),
};
}
toViewAll() {
return this.getModuleAdaptableObjects({
includeLayoutNotAssociatedObjects: this.showLayoutNotAssociatedObjects(),
}).map((styledColumn) => this.toView(styledColumn));
}
getViewProperties() {
return {
getEditAction: StyledColumnRedux.StyledColumnEdit,
getDeleteAction: StyledColumnRedux.StyledColumnDelete,
getSuspendAction: StyledColumnRedux.StyledColumnSuspend,
getUnSuspendAction: StyledColumnRedux.StyledColumnUnSuspend,
getSuspendAllAction: StyledColumnRedux.StyledColumnSuspendAll,
getUnSuspendAllAction: StyledColumnRedux.StyledColumnUnSuspendAll,
getEditWizard() {
return StyledColumnWizard;
},
};
}
canBeAssociatedWithLayouts() {
return true;
}
getTypeLabel(styledColumn) {
let type = null;
if (styledColumn.GradientStyle) {
type = 'Gradient Column';
}
else if (styledColumn.PercentBarStyle) {
type = 'Percent Bar';
}
else if (styledColumn.SparklineStyle) {
type = 'Spark Line';
}
else if (styledColumn.BadgeStyle) {
type = 'Badge Style';
}
return type;
}
getTypeName(styledColumn) {
let type = null;
if (styledColumn.GradientStyle) {
type = 'styled-column-gradient-edit';
}
else if (styledColumn.PercentBarStyle) {
type = 'styled-column-percent-bar-edit';
}
else if (styledColumn.SparklineStyle) {
type = 'styled-column-sparkline-edit';
}
else if (styledColumn.BadgeStyle) {
type = 'styled-column-badge-edit';
}
return type;
}
}