@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
460 lines (459 loc) • 21.4 kB
JavaScript
import { AdaptableModuleBase } from './AdaptableModuleBase';
import * as ModuleConstants from '../Utilities/Constants/ModuleConstants';
import * as StyledColumnRedux from '../Redux/ActionsReducers/StyledColumnRedux';
import { StyledColumnWizard, getStyledColumnEditDefaultSectionName } from '../View/StyledColumn/Wizard/StyledColumnWizard';
import { summaryStringsToTagContents } from '../View/Wizard/SummaryColorTag';
import { renderStyledColumnRangesSummary, getStyledColumnPercentBarStyleViewValues, } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardStyleSection';
import { getStyledColumnGradientStyleViewValues } from '../View/StyledColumn/Wizard/StyledColumnWizardGradientSection';
import { getStyledColumnBulletStyleViewValues, StyledColumnBulletRangesView, } from '../View/StyledColumn/Wizard/StyledColumnWizardBulletSection';
import { StyledColumnBulletPreview } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnBulletPreview';
import { getStyledColumnRatingStyleViewValues } from '../View/StyledColumn/Wizard/StyledColumnWizardRatingSection';
import { StyledColumnRatingPreview } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview';
import { getStyledColumnRangeBarDisplayViewValues, StyledColumnRangeBarRangeView, } from '../View/StyledColumn/Wizard/StyledColumnWizardRangeBarSection';
import { StyledColumnRangeBarPreview } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview';
import { getStyledColumnIconStyleViewValues, StyledColumnIconMappingsView, } from '../View/StyledColumn/Wizard/StyledColumnWizardIconSection';
import { StyledColumnIconPreview } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnIconPreview';
import { collectIncludedRowKindLabels } from '../View/StyledColumn/Wizard/StyledColumnWizardScopeSection';
import ObjectFactory from '../Utilities/ObjectFactory';
import { StyledColumnBadgePreview } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview';
import { StyledColumnGradientPreview } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnGradientPreview';
import { StyledColumnPercentBarPreview } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnPercentBarPreview';
import { getStyledColumnBadgeStyleViewValues, StyledColumnBadgeDefinitionsView, } from '../View/StyledColumn/Wizard/StyledColumnBadgeSection';
import { getStyledColumnSparklineStyleViewValues } from '../View/StyledColumn/Wizard/StyledColumnSparklineSettingsSection';
import { StyledColumnSparklinePreview } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnSparklinePreview';
import { getObjectTagsViewItems } from '../Utilities/getObjectTagsViewItems';
export class StyledColumnModule extends AdaptableModuleBase {
constructor(api) {
super(ModuleConstants.StyledColumnModuleId, ModuleConstants.StyledColumnFriendlyName, 'brush', 'StyledColumnPopup', '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 = [];
if (column && this.isModuleEditable() && !column.isTreeColumn) {
let styledColumn = this.api.styledColumnApi.getStyledColumnForColumnId(column.columnId);
if (this.api.columnApi.hasNumericArrayDataType(column.columnId) &&
column.IsReadOnly !== true &&
this.api.styledColumnApi.canDisplaySparklines()) {
let sparklineColumnExists = column.isSparkline && Boolean(styledColumn);
if (column.isSparkline && !sparklineColumnExists) {
}
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: hasSparklineStyle ? 'Style' : 'Settings',
},
};
returnColumnMenuItems.push(this.createMenuItemShowPopup(name, label + 'Sparkline Column', this.moduleInfo.Popup, this.getGlyphForStyledColumn(styledColumn), popupParam));
}
}
else if (!column.isSparkline) {
if (styledColumn) {
if (!styledColumn.IsReadOnly) {
const defaultCurrentSectionName = getStyledColumnEditDefaultSectionName(styledColumn);
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: 'Settings',
},
});
const newIconButton = this.createMenuItemShowPopup('styled-column-icon-add', 'Create Icon Column', this.moduleInfo.Popup, 'icon-style', {
...popupParam,
value: {
...newStyledColumn,
IconStyle: {
Mappings: [],
},
},
config: {
defaultCurrentSectionName: 'Settings',
},
});
switch (column.dataType) {
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: 'Settings',
},
});
const newPercentBarButton = this.createMenuItemShowPopup('styled-column-percent-bar-add', 'Create Percent Bar', this.moduleInfo.Popup, 'percent', {
...popupParam,
value: {
...newStyledColumn,
PercentBarStyle: {
CellRanges: emptyRanges,
},
},
config: {
defaultCurrentSectionName: 'Settings',
},
});
const newBulletChartButton = this.createMenuItemShowPopup('styled-column-bullet-chart-add', 'Create Bullet Chart', this.moduleInfo.Popup, 'bullet-chart', {
...popupParam,
value: {
...newStyledColumn,
BulletChartStyle: {
CellRanges: emptyRanges,
},
},
config: {
defaultCurrentSectionName: 'Settings',
},
});
const newRatingButton = this.createMenuItemShowPopup('styled-column-rating-add', 'Create Rating Column', this.moduleInfo.Popup, 'star', {
...popupParam,
value: {
...newStyledColumn,
RatingStyle: {},
},
config: {
defaultCurrentSectionName: 'Settings',
},
});
const newRangeBarButton = this.createMenuItemShowPopup('styled-column-range-bar-add', 'Create Range Bar', this.moduleInfo.Popup, 'range-bar', {
...popupParam,
value: {
...newStyledColumn,
RangeBarStyle: {
Min: 'Col-Min',
Max: 'Col-Max',
},
},
config: {
defaultCurrentSectionName: 'Settings',
},
});
returnColumnMenuItems.push(...[
newGrandientButton,
newPercentBarButton,
newBulletChartButton,
newRangeBarButton,
newRatingButton,
newBadgeButton,
newIconButton,
]);
break;
case 'text':
returnColumnMenuItems.push(newBadgeButton);
returnColumnMenuItems.push(newIconButton);
break;
case 'textArray':
case 'numberArray':
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';
}
else if (styledColumn.BulletChartStyle) {
return 'bullet-chart';
}
else if (styledColumn.RatingStyle) {
return 'star';
}
else if (styledColumn.RangeBarStyle) {
return 'range-bar';
}
else if (styledColumn.IconStyle) {
return 'icon-style';
}
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: 'Ranges',
view: () => {
return renderStyledColumnRangesSummary(styledColumn, this.api);
},
});
if (styledColumn.PercentBarStyle) {
specificTypeItems.push({
name: 'Style',
values: summaryStringsToTagContents(getStyledColumnPercentBarStyleViewValues(styledColumn)),
});
specificTypeItems.push({
name: 'Preview',
view: StyledColumnPercentBarPreview,
});
}
if (styledColumn.GradientStyle) {
specificTypeItems.push({
name: 'Style',
values: summaryStringsToTagContents(getStyledColumnGradientStyleViewValues(styledColumn)),
});
specificTypeItems.push({
name: 'Preview',
view: StyledColumnGradientPreview,
});
}
}
if (styledColumn.BulletChartStyle) {
specificTypeItems.push({
name: 'Ranges',
view: StyledColumnBulletRangesView,
});
specificTypeItems.push({
name: 'Style',
values: summaryStringsToTagContents(getStyledColumnBulletStyleViewValues(styledColumn)),
});
specificTypeItems.push({
name: 'Preview',
view: StyledColumnBulletPreview,
});
}
if (styledColumn.RatingStyle) {
specificTypeItems.push({
name: 'Style',
values: summaryStringsToTagContents(getStyledColumnRatingStyleViewValues(styledColumn)),
});
specificTypeItems.push({
name: 'Preview',
view: StyledColumnRatingPreview,
});
}
if (styledColumn.RangeBarStyle) {
specificTypeItems.push({
name: 'Style',
view: StyledColumnRangeBarRangeView,
});
specificTypeItems.push({
name: 'Display',
values: summaryStringsToTagContents(getStyledColumnRangeBarDisplayViewValues(styledColumn)),
});
specificTypeItems.push({
name: 'Preview',
view: StyledColumnRangeBarPreview,
});
}
if (styledColumn.IconStyle) {
specificTypeItems.push({
name: 'Mappings',
view: StyledColumnIconMappingsView,
});
specificTypeItems.push({
name: 'Style',
values: summaryStringsToTagContents(getStyledColumnIconStyleViewValues(styledColumn)),
});
specificTypeItems.push({
name: 'Preview',
view: StyledColumnIconPreview,
});
}
if (styledColumn.BadgeStyle) {
specificTypeItems.push({
name: 'Badges',
view: StyledColumnBadgeDefinitionsView,
});
specificTypeItems.push({
name: 'Style',
values: summaryStringsToTagContents(getStyledColumnBadgeStyleViewValues(styledColumn, this.api)),
});
specificTypeItems.push({
name: 'Preview',
view: StyledColumnBadgePreview,
});
}
if (styledColumn.SparklineStyle) {
specificTypeItems.push({
name: 'Style',
values: summaryStringsToTagContents(getStyledColumnSparklineStyleViewValues(styledColumn)),
});
specificTypeItems.push({
name: 'Preview',
view: StyledColumnSparklinePreview,
});
}
const includedRowKinds = collectIncludedRowKindLabels(styledColumn);
return {
abObject: styledColumn,
items: [
{
name: 'Name',
values: [styledColumn.Name],
},
{
name: 'Type',
values: [this.getTypeLabel(styledColumn)],
},
{
name: 'Column',
values: [this.api.columnApi.getFriendlyNameForColumnId(styledColumn.ColumnId)],
tagVariant: 'column',
},
{
name: 'Rows',
values: includedRowKinds.length === 4 ? ['All'] : includedRowKinds,
},
...specificTypeItems,
,
getObjectTagsViewItems(styledColumn, this.api),
].filter(Boolean),
};
}
toViewAll() {
return this.getModuleAdaptableObjects({
includeLayoutNotExtendedObjects: this.showLayoutNonExtendedObjects(),
}).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;
},
};
}
containsLayoutExtensions() {
return true;
}
getTypeLabel(styledColumn) {
let type = null;
if (styledColumn.GradientStyle) {
type = 'Gradient Style';
}
else if (styledColumn.PercentBarStyle) {
type = 'Percent Bar';
}
else if (styledColumn.SparklineStyle) {
type = 'Spark Line';
}
else if (styledColumn.BadgeStyle) {
type = 'Badge Style';
}
else if (styledColumn.BulletChartStyle) {
type = 'Bullet Chart';
}
else if (styledColumn.RatingStyle) {
type = 'Rating Style';
}
else if (styledColumn.RangeBarStyle) {
type = 'Range Bar';
}
else if (styledColumn.IconStyle) {
type = 'Icon 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';
}
else if (styledColumn.BulletChartStyle) {
type = 'styled-column-bullet-chart-edit';
}
else if (styledColumn.RatingStyle) {
type = 'styled-column-rating-edit';
}
else if (styledColumn.RangeBarStyle) {
type = 'styled-column-range-bar-edit';
}
else if (styledColumn.IconStyle) {
type = 'styled-column-icon-edit';
}
return type;
}
}