Skip to content

[WC-1301]: update structure preview for data grid 2 #176

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
r0b1n merged 11 commits into from
Dec 8, 2022
Merged

[WC-1301]: update structure preview for data grid 2 #176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
f42280b
chore(pluggable-widgets-commons): new api style for dropzone helper
r0b1n Nov 30, 2022
b08bc87
chore(datagrid-web): use text helper in structure preview
r0b1n Nov 30, 2022
c12f2a0
chore(datagrid-web): use container helper in structure preview
r0b1n Nov 30, 2022
28fc0b4
chore(datagrid-web): use selectable helper in structure preview
r0b1n Nov 30, 2022
ba2034f
chore(datagrid-web): use dropzone helper in structure preview
r0b1n Nov 30, 2022
2ae5a4b
chore(datagrid-web): use rowLayout helper in structure preview
r0b1n Nov 30, 2022
f1b465f
chore(datagrid-web): add data source panel and remove it from drop zones
r0b1n Nov 30, 2022
cd6fcd3
chore(datagrid-web): version bump and changelog update
r0b1n Nov 30, 2022
98b3d82
fix(datagrid-web): use data source header only in the known supported…
r0b1n Dec 1, 2022
f2a697a
fix(html-element-web): use data source header only in the known suppo…
r0b1n Dec 1, 2022
337c4b4
fix(html-element-web): add changelog record and bump version
r0b1n Dec 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/pluggableWidgets/datagrid-web/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),

## [Unreleased]

### Changed

- We improved structure preview of the widget in Studio Pro 9.20 and above.

## [2.4.2] - 2022-09-01

### Fixed
Expand Down
2 changes: 1 addition & 1 deletion packages/pluggableWidgets/datagrid-web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "datagrid-web",
"widgetName": "Datagrid",
"version": "2.4.2",
"version": "2.4.3",
"description": "",
"copyright": "© Mendix Technology BV 2022. All rights reserved.",
"private": true,
Expand Down
258 changes: 107 additions & 151 deletions packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import {
ContainerProps,
DropZoneProps,
RowLayoutProps,
StructurePreviewProps
container,
datasource,
dropzone,
rowLayout,
selectable,
StructurePreviewProps,
text
} from "@mendix/pluggable-widgets-commons";
import {
changePropertyIn,
Expand Down Expand Up @@ -130,7 +133,16 @@ export function getProperties(
return defaultProperties;
}

export const getPreview = (values: DatagridPreviewProps, isDarkMode: boolean): StructurePreviewProps => {
export const getPreview = (
values: DatagridPreviewProps,
isDarkMode: boolean,
spVersion: number[] = [0, 0, 0]
): StructurePreviewProps => {
const [x, y] = spVersion;
const canHideDataSourceHeader = x >= 9 && y >= 20;

const modeColor = (colorDark: string, colorLight: string) => (isDarkMode ? colorDark : colorLight);

const hasColumns = values.columns && values.columns.length > 0;
const columnProps: ColumnsPreviewType[] = hasColumns
? values.columns
Expand All @@ -154,173 +166,117 @@ export const getPreview = (values: DatagridPreviewProps, isDarkMode: boolean): S
wrapText: false
}
];
const columns: RowLayoutProps = {
type: "RowLayout",
columnSize: "fixed",
children: columnProps.map(
column =>
({
type: "Container",
borders: true,
grow: column.width === "manual" && column.size ? column.size : 1,
backgroundColor:
values.columnsHidable && column.hidable === "hidden"
? isDarkMode
? "#3E3E3E"
: "#F5F5F5"
: undefined,
children: [
column.showContentAs === "customContent"
? {
type: "DropZone",
property: column.content
}
: {
type: "Container",
padding: 8,
children: [
{
type: "Text",
content:
column.showContentAs === "dynamicText"
? column.dynamicText ?? "Dynamic text"
: `[${
column.attribute ? column.attribute : "No attribute selected"
}]`,
fontSize: 10
}
]
}
]
} as ContainerProps)
const columns = rowLayout({
columnSize: "fixed"
})(
...columnProps.map(column =>
container({
borders: true,
grow: column.width === "manual" && column.size ? column.size : 1,
backgroundColor:
values.columnsHidable && column.hidable === "hidden" ? modeColor("#3E3E3E", "#F5F5F5") : undefined
})(
column.showContentAs === "customContent"
? dropzone(dropzone.hideDataSourceHeaderIf(canHideDataSourceHeader))(column.content)
: container({
padding: 8
})(
text({ fontSize: 10 })(
column.showContentAs === "dynamicText"
? column.dynamicText ?? "Dynamic text"
: `[${column.attribute ? column.attribute : "No attribute selected"}]`
)
)
)
)
};
const titleHeader: RowLayoutProps = {
type: "RowLayout",
columnSize: "fixed",
backgroundColor: isDarkMode ? "#3B5C8F" : "#DAEFFB",
borders: true,
borderWidth: 1,
children: [
{
type: "Container",
padding: 4,
children: [
{
type: "Text",
content: "Data grid 2",
fontColor: isDarkMode ? "#6DB1FE" : "#2074C8"
}
]
}
]
};
const headerFilters = {
type: "RowLayout",
);
const titleHeader = rowLayout({
columnSize: "fixed",
backgroundColor: modeColor("#3B5C8F", "#DAEFFB"),
borders: true,
children: [
{
type: "DropZone",
property: values.filtersPlaceholder,
placeholder: "Place filter widget(s) here"
} as DropZoneProps
]
} as RowLayoutProps;
const headers: RowLayoutProps = {
type: "RowLayout",
borderWidth: 1
})(
container({
padding: 4
})(text({ fontColor: modeColor("#6DB1FE", "#2074C8") })("Data grid 2"))
);
const headerFilters = rowLayout({
columnSize: "fixed",
children: columnProps.map(column => {
borders: true
})(
dropzone(
dropzone.placeholder("Place filter widget(s) here"),
dropzone.hideDataSourceHeaderIf(canHideDataSourceHeader)
)(values.filtersPlaceholder)
);

const headers = rowLayout({
columnSize: "fixed"
})(
...columnProps.map(column => {
const isColumnHidden = values.columnsHidable && column.hidable === "hidden";
const content: ContainerProps = {
type: "Container",
const content = container({
borders: true,
grow:
values.columns.length > 0
? column.width === "manual" && column.size
? column.size
: 1
: undefined,
backgroundColor: isColumnHidden
? isDarkMode
? "#4F4F4F"
: "#DCDCDC"
: isDarkMode
? "#3E3E3E"
: "#F5F5F5",
children: [
{
type: "Container",
padding: 8,
children: [
{
type: "Text",
bold: true,
fontSize: 10,
content: column.header ? column.header : "Header",
fontColor: column.header
? undefined
: isColumnHidden
? isDarkMode
? "#4F4F4F"
: "#DCDCDC"
: isDarkMode
? "#3E3E3E"
: "#F5F5F5"
}
]
},
...(hasColumns && values.columnsFilterable
? [
{
type: "DropZone",
property: column.filter,
placeholder: "Place filter widget here"
} as DropZoneProps
]
: [])
]
};
backgroundColor: isColumnHidden ? modeColor("#4F4F4F", "#DCDCDC") : modeColor("#3E3E3E", "#F5F5F5")
})(
container({
padding: 8
})(
text({
bold: true,
fontSize: 10,
fontColor: column.header
? undefined
: isColumnHidden
? modeColor("#4F4F4F", "#DCDCDC")
: modeColor("#3E3E3E", "#F5F5F5")
})(column.header ? column.header : "Header")
),
...(hasColumns && values.columnsFilterable
? [
dropzone(
dropzone.placeholder("Place filter widget here"),
dropzone.hideDataSourceHeaderIf(canHideDataSourceHeader)
)(column.filter)
]
: [])
);
return values.columns.length > 0
? {
type: "Selectable",
object: column,
grow: column.width === "manual" && column.size ? column.size : 1,
child: {
type: "Container",
children: [content]
}
}
? selectable(column, { grow: column.width === "manual" && column.size ? column.size : 1 })(
container()(content)
)
: content;
})
};
);
const footer =
values.showEmptyPlaceholder === "custom"
? [
{
type: "RowLayout",
rowLayout({
columnSize: "fixed",
borders: true,
children: [
{
type: "DropZone",
property: values.emptyPlaceholder,
placeholder: "Empty list message: Place widgets here"
} as DropZoneProps
]
} as RowLayoutProps
borders: true
})(
dropzone(
dropzone.placeholder("Empty list message: Place widgets here"),
dropzone.hideDataSourceHeaderIf(canHideDataSourceHeader)
)(values.emptyPlaceholder)
)
]
: [];
return {
type: "Container",
children: [
titleHeader,
...(values.showHeaderFilters && values.filterList.length > 0 ? [headerFilters] : []),
headers,
...Array.from({ length: 5 }).map(() => columns),
...footer
]
};

return container()(
titleHeader,
...(canHideDataSourceHeader ? [datasource(values.datasource)()] : []),
...(values.showHeaderFilters && values.filterList.length > 0 ? [headerFilters] : []),
headers,
...Array.from({ length: 5 }).map(() => columns),
...footer
);
};

export function check(values: DatagridPreviewProps): Problem[] {
Expand Down
2 changes: 1 addition & 1 deletion packages/pluggableWidgets/datagrid-web/src/package.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="utf-8" ?>
<package xmlns="http://www.mendix.com/package/1.0/">
<clientModule name="Datagrid" version="2.4.2" xmlns="http://www.mendix.com/clientModule/1.0/">
<clientModule name="Datagrid" version="2.4.3" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="Datagrid.xml" />
</widgetFiles>
Expand Down
4 changes: 4 additions & 0 deletions packages/pluggableWidgets/html-element-web/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),

## [Unreleased]

### Fixed

- We fixed an issue with HTML Element widget producing errors in Studio Pro versions below 9.18.

## [1.0.0] - 2022-11-24

### Added
Expand Down
2 changes: 1 addition & 1 deletion packages/pluggableWidgets/html-element-web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "html-element-web",
"widgetName": "HTMLElement",
"version": "1.0.0",
"version": "1.0.1",
"description": "Displays custom HTML",
"copyright": "© Mendix Technology BV 2022. All rights reserved.",
"license": "Apache-2.0",
Expand Down
14 changes: 6 additions & 8 deletions packages/pluggableWidgets/html-element-web/src/HTMLElement.editorConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,18 +189,16 @@ export function getPreview(
)
: container({ padding: 0 })(
text()(`<${tagName}>`),
dropzone(
canHideDataSourceHeader
? {
showDataSourceHeader: false
}
: {}
)(values.tagUseRepeat ? values.tagContentRepeatContainer : values.tagContentContainer),
dropzone(dropzone.hideDataSourceHeaderIf(canHideDataSourceHeader))(
values.tagUseRepeat ? values.tagContentRepeatContainer : values.tagContentContainer
),
text()(`</${tagName}>`)
);

return container({ grow: 1, borders: true, borderWidth: 1 })(
values.tagContentRepeatDataSource ? datasource(values.tagContentRepeatDataSource)() : container()(),
values.tagContentRepeatDataSource && canHideDataSourceHeader
? datasource(values.tagContentRepeatDataSource)()
: container()(),
isVoidElement(tagName) ? voidElementPreview(tagName) : flowElementPreview()
);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/pluggableWidgets/html-element-web/src/package.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="utf-8" ?>
<package xmlns="http://www.mendix.com/package/1.0/">
<clientModule name="HTMLElement" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<clientModule name="HTMLElement" version="1.0.1" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="HTMLElement.xml" />
</widgetFiles>
Expand Down
Loading