From 341ef0e82df6c25447dd2828422b0679c611c0a3 Mon Sep 17 00:00:00 2001 From: Diana Date: Fri, 19 Nov 2021 19:00:43 +0100 Subject: [PATCH 1/7] introduced boolean --- .vscode/settings.json | 22 +++++++++++++++++++ .../App/Controls/ColorfulCell.tsx | 6 ++++- ColorfulOptionsetGrid/App/Hooks/useConfig.ts | 2 +- .../ControlManifest.Input.xml | 10 ++++++--- 4 files changed, 35 insertions(+), 5 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..c66ace6 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,22 @@ +{ + "workbench.colorCustomizations": { + "activityBar.activeBackground": "#ab307e", + "activityBar.activeBorder": "#25320e", + "activityBar.background": "#ab307e", + "activityBar.foreground": "#e7e7e7", + "activityBar.inactiveForeground": "#e7e7e799", + "activityBarBadge.background": "#25320e", + "activityBarBadge.foreground": "#e7e7e7", + "statusBar.background": "#832561", + "statusBar.foreground": "#e7e7e7", + "statusBarItem.hoverBackground": "#ab307e", + "titleBar.activeBackground": "#832561", + "titleBar.activeForeground": "#e7e7e7", + "titleBar.inactiveBackground": "#83256199", + "titleBar.inactiveForeground": "#e7e7e799", + "sash.hoverBorder": "#ab307e", + "statusBarItem.remoteBackground": "#832561", + "statusBarItem.remoteForeground": "#e7e7e7" + }, + "peacock.color": "#832561" +} \ No newline at end of file diff --git a/ColorfulOptionsetGrid/App/Controls/ColorfulCell.tsx b/ColorfulOptionsetGrid/App/Controls/ColorfulCell.tsx index f231f5e..7a31089 100644 --- a/ColorfulOptionsetGrid/App/Controls/ColorfulCell.tsx +++ b/ColorfulOptionsetGrid/App/Controls/ColorfulCell.tsx @@ -15,6 +15,9 @@ export interface IColorfulCellProps { export const ColorfulCell = function ColorfulCell({item, column, metadataOptions, displayTextType, displayIconType, defaultIcon} : IColorfulCellProps) : JSX.Element{ const currentOptionSetValue= item.raw.getValue(column.original.name) as number; + if(currentOptionSetValue==null){ + return
; + } let color = metadataOptions?.get(currentOptionSetValue?.toString() ?? "")?.color ?? "gray"; if(color==="white"){ color = "gray" @@ -40,8 +43,9 @@ export const ColorfulCell = function ColorfulCell({item, column, metadataOptions } }[displayTextType]; const content = item[column.original.name]; + const title = `${column.original.displayName}: ${item[column.original.name]}` ; const renderText = displayTextType!=="NOTEXT" ? {content} : "" - return(
+ return(
{renderIcon} {renderText}
); diff --git a/ColorfulOptionsetGrid/App/Hooks/useConfig.ts b/ColorfulOptionsetGrid/App/Hooks/useConfig.ts index eca0094..5a1cae6 100644 --- a/ColorfulOptionsetGrid/App/Hooks/useConfig.ts +++ b/ColorfulOptionsetGrid/App/Hooks/useConfig.ts @@ -41,7 +41,7 @@ export const useConfig= (dataset: DataSet, defaultIcon: string, utils: Component setConfigs(myConfigs); const myOptionSetColumns = customizedColumnsArray.length >0 //found customized, or take all optionset columns otherwise ? customizedColumnsArray.map((setup) => setup.column?.name ?? "") - : dataset.columns.filter((column) => column.dataType==="OptionSet").map((column) => column.name); + : dataset.columns.filter((column) => column.dataType==="OptionSet" || column.dataType==="TwoOptions").map((column) => column.name); setOptionSetColumns(myOptionSetColumns); getAttributes(dataset.getTargetEntityType(), myOptionSetColumns, utils , new Map(myConfigs)) .then(setMetadataAttributes); diff --git a/ColorfulOptionsetGrid/ControlManifest.Input.xml b/ColorfulOptionsetGrid/ControlManifest.Input.xml index 127ec14..1ffddb7 100644 --- a/ColorfulOptionsetGrid/ControlManifest.Input.xml +++ b/ColorfulOptionsetGrid/ControlManifest.Input.xml @@ -2,11 +2,15 @@ + + OptionSet + TwoOptions + - - - + + + From 4534d9ec22c235091d9d20d271738b10c97e5cae Mon Sep 17 00:00:00 2001 From: Diana Date: Fri, 19 Nov 2021 23:46:58 +0100 Subject: [PATCH 2/7] introduced multiselect optionset --- .../App/Controls/ColorfulCell.tsx | 59 +- .../App/Controls/ColorfulCellItem.tsx | 53 + ColorfulOptionsetGrid/App/Hooks/useConfig.ts | 2 +- .../ControlManifest.Input.xml | 3 +- .../css/ColorfulOptionSetGrid.css | 20 +- ColorfulOptionsetGrid/index.ts | 4 +- Docs/img/NewDataTypes/Background.png | Bin 0 -> 97190 bytes Docs/img/NewDataTypes/Border.png | Bin 0 -> 92516 bytes Docs/img/NewDataTypes/Dot.png | Bin 0 -> 78932 bytes Docs/img/NewDataTypes/Dot_Border.png | Bin 0 -> 94742 bytes package-lock.json | 4416 ++++++++++++----- package.json | 7 +- 12 files changed, 3236 insertions(+), 1328 deletions(-) create mode 100644 ColorfulOptionsetGrid/App/Controls/ColorfulCellItem.tsx create mode 100644 Docs/img/NewDataTypes/Background.png create mode 100644 Docs/img/NewDataTypes/Border.png create mode 100644 Docs/img/NewDataTypes/Dot.png create mode 100644 Docs/img/NewDataTypes/Dot_Border.png diff --git a/ColorfulOptionsetGrid/App/Controls/ColorfulCell.tsx b/ColorfulOptionsetGrid/App/Controls/ColorfulCell.tsx index 7a31089..46ae8c6 100644 --- a/ColorfulOptionsetGrid/App/Controls/ColorfulCell.tsx +++ b/ColorfulOptionsetGrid/App/Controls/ColorfulCell.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import { render } from 'react-dom'; import { IGridColumn } from '../Generic/Hooks/useColumns'; import { ISetupSchemaValue } from '../Utils/interfaces'; +import { ColorfulCellItem } from './ColorfulCellItem'; export interface IColorfulCellProps { item: any; @@ -14,41 +15,35 @@ export interface IColorfulCellProps { } export const ColorfulCell = function ColorfulCell({item, column, metadataOptions, displayTextType, displayIconType, defaultIcon} : IColorfulCellProps) : JSX.Element{ - const currentOptionSetValue= item.raw.getValue(column.original.name) as number; - if(currentOptionSetValue==null){ + + if(item.raw.getValue(column.original.name) ==null){ return
; } - let color = metadataOptions?.get(currentOptionSetValue?.toString() ?? "")?.color ?? "gray"; - if(color==="white"){ - color = "gray" + if(column.original.dataType==="MultiSelectOptionSet" || column.original.dataType==="MultiSelectPicklist"){ + const currentValues = (item.raw.getValue(column.original.name) as string ?? "").split(","); + const currentDisplayNames = (item.raw.getFormattedValue(column.original.name) as string ?? "").split(";"); + return (
+ {currentValues.map((currentValue, index) => { + return () + })} +
) } - const icon = metadataOptions?.get(currentOptionSetValue?.toString() ?? "")?.icon ?? defaultIcon; - const iconColor = displayTextType==="BOX" ? "white" : color; - const renderIcon = displayIconType!=="NONE" ?