From 9df2db72cd8c84d72b78616fa0aaa4e1a1175404 Mon Sep 17 00:00:00 2001 From: Artkrygin <80037398+Artkrygin@users.noreply.github.com> Date: Tue, 12 Oct 2021 11:49:56 +0300 Subject: [PATCH 1/8] GH-38 [FIX] Broken layout --- src/controls/AntdImageControl.tsx | 12 ++++++++++++ src/controls/index.ts | 6 ++++++ src/layouts/AntdHorizontalLayout.tsx | 5 ++++- src/layouts/AntdVerticalLayout.tsx | 5 ++--- stories/FormWithColumns.stories.tsx | 16 ++++++++++------ 5 files changed, 34 insertions(+), 10 deletions(-) create mode 100644 src/controls/AntdImageControl.tsx diff --git a/src/controls/AntdImageControl.tsx b/src/controls/AntdImageControl.tsx new file mode 100644 index 0000000..07de9a1 --- /dev/null +++ b/src/controls/AntdImageControl.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { rankWith, RankedTester, uiTypeIs } from '../testers'; +import { Image } from 'antd'; +import { withStoreToControlProps } from '../util/ContextToProps'; + +export const AntdImageControl = (props: any): JSX.Element => { + const { uiOptions, data } = props; + return ; +}; + +export const antdImageControlTester: RankedTester = rankWith(3, uiTypeIs('aldkg:Image')); +export const AntdImageControlWithStore = withStoreToControlProps(AntdImageControl); diff --git a/src/controls/index.ts b/src/controls/index.ts index 1838419..7b4cbf1 100644 --- a/src/controls/index.ts +++ b/src/controls/index.ts @@ -17,6 +17,7 @@ import { antdRadioGroupControlTester, AntdRadioGroupControlWithStore } from './A import { antdSliderControlTester, AntdSliderControlWithStore } from './AntdSliderControl'; import { antdTextControlTester, AntdTextControlWithStore } from './AntdTextControl'; import { tinyMCEControlTester, TinyMCEControlWithStore } from './TinyMCEControl'; +import { antdImageControlTester, AntdImageControlWithStore } from './AntdImageControl'; export const antdControlRenderers: RendererRegistryEntry[] = [ { tester: antdBooleanControlTester, renderer: AntdBooleanControlWithStore }, @@ -28,6 +29,10 @@ export const antdControlRenderers: RendererRegistryEntry[] = [ tester: antdRadioGroupControlTester, renderer: AntdRadioGroupControlWithStore, }, + { + tester: antdImageControlTester, + renderer: AntdImageControlWithStore, + }, { tester: antdSliderControlTester, renderer: AntdSliderControlWithStore }, { tester: antdTextControlTester, renderer: AntdTextControlWithStore }, @@ -44,3 +49,4 @@ export * from './AntdRadioGroupControl'; export * from './AntdSliderControl'; export * from './AntdTextControl'; export * from './TinyMCEControl'; +export * from './AntdImageControl'; diff --git a/src/layouts/AntdHorizontalLayout.tsx b/src/layouts/AntdHorizontalLayout.tsx index 3ce4430..0b47508 100644 --- a/src/layouts/AntdHorizontalLayout.tsx +++ b/src/layouts/AntdHorizontalLayout.tsx @@ -27,11 +27,14 @@ export const AntdHorizontalLayoutRenderer: React.FC = ({ visible, }) => { //const layout = viewKindElement as Layout; + const parentViewKindElement = viewKindElement; const Render: React.FC = ({ idx, viewKind, viewKindElement, viewDescr, enabled, form }) => { const options = viewKindElement.options || {}; const style: any = options.style; const span = - options.contentSize || !viewKindElement.elements ? undefined : Math.ceil(24 / viewKindElement.elements.length); + options.contentSize || !parentViewKindElement.elements + ? undefined + : Math.ceil(24 / parentViewKindElement.elements.length); return ( = ({ form, readOnly, }) => { + const style = viewKindElement.options?.style; const Render: React.FC = ({ idx, viewKind, viewKindElement, viewDescr, enabled }) => { const options = viewKindElement.options || {}; const newViewKindElement = { ...viewKindElement }; - const style = viewKindElement.options?.style; if (newViewKindElement.options) { newViewKindElement.options.style = {}; } @@ -41,7 +41,6 @@ export const AntdVerticalLayoutRenderer: React.FC = ({ position: 'relative', width: '100%', //flex: viewKindElement.options && viewKindElement.options.height === 'all-empty-space' ? '1 1 auto' : '', - ...style, }}> = ({ }; return ( -
+
{renderLayoutElements({ viewKind, viewKindElement, viewDescr, enabled, Render, readOnly })}
diff --git a/stories/FormWithColumns.stories.tsx b/stories/FormWithColumns.stories.tsx index 2abd662..0fb948e 100644 --- a/stories/FormWithColumns.stories.tsx +++ b/stories/FormWithColumns.stories.tsx @@ -105,15 +105,19 @@ const viewKinds = [ '@type': 'aldkg:VerticalLayout', options: { style: { - width: '20%', + padding: '5px', }, width: 'all-empty-space', }, elements: [ { '@id': 'mktp:_63JdF67', - '@type': 'aldkg:Control', + '@type': 'aldkg:Image', resultsScope: 'rm:Cards_Coll/imageUrl', + options: { + fallback: + 'data:image/png;base64,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', + }, }, ], }, @@ -122,7 +126,7 @@ const viewKinds = [ '@type': 'aldkg:VerticalLayout', options: { style: { - width: '20%', + padding: '5px', }, width: 'all-empty-space', }, @@ -169,7 +173,7 @@ const viewKinds = [ '@type': 'aldkg:VerticalLayout', options: { style: { - width: '20%', + padding: '5px', }, width: 'all-empty-space', }, @@ -201,7 +205,7 @@ const viewKinds = [ '@type': 'aldkg:VerticalLayout', options: { style: { - width: '20%', + padding: '5px', }, width: 'all-empty-space', }, @@ -243,7 +247,7 @@ const viewKinds = [ '@type': 'aldkg:VerticalLayout', options: { style: { - width: '20%', + padding: '5px', }, width: 'all-empty-space', }, From 4adc93b7045acad5dc3fada4fb50074cf5c95483 Mon Sep 17 00:00:00 2001 From: Artkrygin <80037398+Artkrygin@users.noreply.github.com> Date: Tue, 12 Oct 2021 12:33:25 +0300 Subject: [PATCH 2/8] GH-38 [ADD] Data filter --- src/controls/AntdImageControl.tsx | 2 +- stories/FormWithColumns.stories.tsx | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/controls/AntdImageControl.tsx b/src/controls/AntdImageControl.tsx index 07de9a1..1a2c531 100644 --- a/src/controls/AntdImageControl.tsx +++ b/src/controls/AntdImageControl.tsx @@ -5,7 +5,7 @@ import { withStoreToControlProps } from '../util/ContextToProps'; export const AntdImageControl = (props: any): JSX.Element => { const { uiOptions, data } = props; - return ; + return ; }; export const antdImageControlTester: RankedTester = rankWith(3, uiTypeIs('aldkg:Image')); diff --git a/stories/FormWithColumns.stories.tsx b/stories/FormWithColumns.stories.tsx index 0fb948e..5d14a33 100644 --- a/stories/FormWithColumns.stories.tsx +++ b/stories/FormWithColumns.stories.tsx @@ -80,6 +80,10 @@ const viewKinds = [ '@type': 'aldkg:EntConstr', schema: 'hs:ProductCardShape', service: mktpSchemaRepoIri, + conditions: { + '@id': 'mktp:Cards_Coll_Ent0_con', + identifier: 'https://huntersales.ru/catalog/products/18279449', + }, }, ], //orderBy: [{ expression: variable('identifier0'), descending: false }], From 401c634973f001c9b903c6872e6e13e4a12b4c67 Mon Sep 17 00:00:00 2001 From: Artkrygin <80037398+Artkrygin@users.noreply.github.com> Date: Tue, 12 Oct 2021 13:17:23 +0300 Subject: [PATCH 3/8] GH-38 [ADD] Align for HorizontalLayout, no borders for read-only fields --- src/Form.css | 3 +++ src/Form.tsx | 1 + src/layouts/AntdHorizontalLayout.tsx | 5 +++-- stories/FormWithColumns.stories.tsx | 1 + 4 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 src/Form.css diff --git a/src/Form.css b/src/Form.css new file mode 100644 index 0000000..92c6611 --- /dev/null +++ b/src/Form.css @@ -0,0 +1,3 @@ +.ant-input-disabled { + border: none; +} diff --git a/src/Form.tsx b/src/Form.tsx index 004d469..5ae4c6b 100644 --- a/src/Form.tsx +++ b/src/Form.tsx @@ -22,6 +22,7 @@ import { UnknownRenderer } from './UnknownRenderer'; import { RankedTester } from './testers'; import { IViewDescr, IViewDescrElement, IViewKind, IViewKindElement } from './models/uischema'; import { JsObject } from '@agentlab/sparql-jsld-client'; +import './Form.css'; export interface ControlComponent { data: any; diff --git a/src/layouts/AntdHorizontalLayout.tsx b/src/layouts/AntdHorizontalLayout.tsx index 0b47508..c50d11c 100644 --- a/src/layouts/AntdHorizontalLayout.tsx +++ b/src/layouts/AntdHorizontalLayout.tsx @@ -47,11 +47,12 @@ export const AntdHorizontalLayoutRenderer: React.FC = ({ ); }; - const justify: any = viewKindElement.options ? viewKindElement.options.justify : 'center'; + const justify: any = viewKindElement.options?.justify || 'center'; + const align: any = viewKindElement.options?.align || 'middle'; const rowStyle: any = { flexWrap: 'nowrap' }; if (viewKindElement.options && viewKindElement.options.width === 'all-empty-space') rowStyle.width = '100%'; return ( - + {renderLayoutElements({ viewKind, viewKindElement, viewDescr, enabled, Render })} ); diff --git a/stories/FormWithColumns.stories.tsx b/stories/FormWithColumns.stories.tsx index 5d14a33..ddb3ac5 100644 --- a/stories/FormWithColumns.stories.tsx +++ b/stories/FormWithColumns.stories.tsx @@ -96,6 +96,7 @@ const viewKinds = [ '@type': 'aldkg:HorizontalLayout', options: { justify: 'start', // start end center space-between space-around + align: 'flex-start', //contentSize: true, style: { //flexGrow: '5', From 42ed9e37809b0a16f1c4f8e3b6c7fbd5ac928473 Mon Sep 17 00:00:00 2001 From: Artkrygin <80037398+Artkrygin@users.noreply.github.com> Date: Tue, 12 Oct 2021 15:29:09 +0300 Subject: [PATCH 4/8] GH-38 [FIX] More compact form --- src/Form.css | 3 - src/Form.tsx | 1 - src/layouts/AntdFormLayout.tsx | 2 +- src/layouts/AntdHorizontalLayout.tsx | 13 +- src/layouts/AntdVerticalLayout.tsx | 2 +- src/util/ContextToProps.tsx | 2 +- stories/FormWithColumns.stories.tsx | 353 ++++++++++++++------------- 7 files changed, 190 insertions(+), 186 deletions(-) delete mode 100644 src/Form.css diff --git a/src/Form.css b/src/Form.css deleted file mode 100644 index 92c6611..0000000 --- a/src/Form.css +++ /dev/null @@ -1,3 +0,0 @@ -.ant-input-disabled { - border: none; -} diff --git a/src/Form.tsx b/src/Form.tsx index 5ae4c6b..004d469 100644 --- a/src/Form.tsx +++ b/src/Form.tsx @@ -22,7 +22,6 @@ import { UnknownRenderer } from './UnknownRenderer'; import { RankedTester } from './testers'; import { IViewDescr, IViewDescrElement, IViewKind, IViewKindElement } from './models/uischema'; import { JsObject } from '@agentlab/sparql-jsld-client'; -import './Form.css'; export interface ControlComponent { data: any; diff --git a/src/layouts/AntdFormLayout.tsx b/src/layouts/AntdFormLayout.tsx index 3fedf46..9e61ec0 100644 --- a/src/layouts/AntdFormLayout.tsx +++ b/src/layouts/AntdFormLayout.tsx @@ -82,7 +82,7 @@ export const AntdFormLayout: React.FC = ({ return ( {({ width, height }: any) => ( -
onEdit()}> +
onEdit()}> {title} {readOnly ? null : }
diff --git a/src/layouts/AntdHorizontalLayout.tsx b/src/layouts/AntdHorizontalLayout.tsx index c50d11c..3bb143b 100644 --- a/src/layouts/AntdHorizontalLayout.tsx +++ b/src/layouts/AntdHorizontalLayout.tsx @@ -25,18 +25,17 @@ export const AntdHorizontalLayoutRenderer: React.FC = ({ viewDescrElement, enabled, visible, + form, }) => { //const layout = viewKindElement as Layout; const parentViewKindElement = viewKindElement; - const Render: React.FC = ({ idx, viewKind, viewKindElement, viewDescr, enabled, form }) => { + const Render: React.FC = ({ idx, viewKind, viewKindElement, viewDescr, enabled }) => { const options = viewKindElement.options || {}; + const numberOfColumns = Math.ceil(24 / (parentViewKindElement.elements?.length || 1)); const style: any = options.style; - const span = - options.contentSize || !parentViewKindElement.elements - ? undefined - : Math.ceil(24 / parentViewKindElement.elements.length); + const span = options.contentSize || numberOfColumns; return ( - + = ({ ); }; - const justify: any = viewKindElement.options?.justify || 'center'; + const justify: any = viewKindElement.options?.justify || 'space-between'; const align: any = viewKindElement.options?.align || 'middle'; const rowStyle: any = { flexWrap: 'nowrap' }; if (viewKindElement.options && viewKindElement.options.width === 'all-empty-space') rowStyle.width = '100%'; diff --git a/src/layouts/AntdVerticalLayout.tsx b/src/layouts/AntdVerticalLayout.tsx index 5307afb..174d2db 100644 --- a/src/layouts/AntdVerticalLayout.tsx +++ b/src/layouts/AntdVerticalLayout.tsx @@ -42,7 +42,7 @@ export const AntdVerticalLayoutRenderer: React.FC = ({ width: '100%', //flex: viewKindElement.options && viewKindElement.options.height === 'all-empty-space' ? '1 1 auto' : '', }}> - + Date: Tue, 12 Oct 2021 16:13:27 +0300 Subject: [PATCH 5/8] GH-38 Change layout --- src/layouts/AntdFormLayout.tsx | 4 +- src/layouts/AntdHorizontalLayout.tsx | 8 +- src/layouts/AntdVerticalLayout.tsx | 1 + stories/FormWithColumns.stories.tsx | 455 +++++++++++++++------------ 4 files changed, 258 insertions(+), 210 deletions(-) diff --git a/src/layouts/AntdFormLayout.tsx b/src/layouts/AntdFormLayout.tsx index 9e61ec0..8cb655a 100644 --- a/src/layouts/AntdFormLayout.tsx +++ b/src/layouts/AntdFormLayout.tsx @@ -78,11 +78,11 @@ export const AntdFormLayout: React.FC = ({ onEdit, editing, }) => { - const { readOnly } = viewKindElement.options; + const { readOnly, style } = viewKindElement.options; return ( {({ width, height }: any) => ( -
onEdit()}> +
onEdit()}> {title} {readOnly ? null : } diff --git a/src/layouts/AntdHorizontalLayout.tsx b/src/layouts/AntdHorizontalLayout.tsx index 3bb143b..def4b3b 100644 --- a/src/layouts/AntdHorizontalLayout.tsx +++ b/src/layouts/AntdHorizontalLayout.tsx @@ -30,12 +30,16 @@ export const AntdHorizontalLayoutRenderer: React.FC = ({ //const layout = viewKindElement as Layout; const parentViewKindElement = viewKindElement; const Render: React.FC = ({ idx, viewKind, viewKindElement, viewDescr, enabled }) => { + const defaultSize = parentViewKindElement.options?.defaultSize; const options = viewKindElement.options || {}; const numberOfColumns = Math.ceil(24 / (parentViewKindElement.elements?.length || 1)); const style: any = options.style; - const span = options.contentSize || numberOfColumns; + const span = + defaultSize && defaultSize[viewKindElement['@id']] + ? defaultSize && defaultSize[viewKindElement['@id']] + : options.contentSize || numberOfColumns; return ( - + = ({ style={{ position: 'relative', width: '100%', + height: '100%', //flex: viewKindElement.options && viewKindElement.options.height === 'all-empty-space' ? '1 1 auto' : '', }}> diff --git a/stories/FormWithColumns.stories.tsx b/stories/FormWithColumns.stories.tsx index 0282d53..9a8f8b9 100644 --- a/stories/FormWithColumns.stories.tsx +++ b/stories/FormWithColumns.stories.tsx @@ -92,232 +92,275 @@ const viewKinds = [ // child ui elements configs elements: [ { - '@id': 'rm:_83hd7f', - '@type': 'aldkg:FormLayout', + '@id': 'mktp:_8255hFsd', + '@type': 'aldkg:VerticalLayout', options: { - readOnly: false, + style: { + height: '20%', + }, + width: 'all-empty-space', }, elements: [ { - '@id': 'mktp:_87Dfg78', - '@type': 'aldkg:HorizontalLayout', + '@id': 'rm:_83hd7f', + '@type': 'aldkg:FormLayout', options: { - justify: 'start', // start end center space-between space-around - align: 'flex-start', - //contentSize: true, - style: { - //flexGrow: '5', - width: '100%', - }, - width: 'all-empty-space', + readOnly: false, }, elements: [ { - '@id': 'mktp:_8255hFd3', - '@type': 'aldkg:VerticalLayout', + '@id': 'mktp:_87Dfg78', + '@type': 'aldkg:HorizontalLayout', options: { + justify: 'start', // start end center space-between space-around + align: 'flex-start', + //contentSize: true, style: { - padding: '5px', + //flexGrow: '5', + width: '100%', + }, + defaultSize: { + 'mktp:_8255hFd3': 4, + 'mktp:_88Dfg78': 20, }, width: 'all-empty-space', }, elements: [ { - '@id': 'mktp:_63JdF67', - '@type': 'aldkg:Image', - resultsScope: 'rm:Cards_Coll/imageUrl', + '@id': 'mktp:_8255hFd3', + '@type': 'aldkg:VerticalLayout', options: { - fallback: - 'data:image/png;base64,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', + style: { + padding: '5px', + }, + width: 'all-empty-space', }, - }, - ], - }, - { - '@id': 'mktp:_93JhdA78', - '@type': 'aldkg:VerticalLayout', - options: { - style: { - padding: '5px', - }, - width: 'all-empty-space', - }, - elements: [ - /*{ - '@id': 'mktp:_92KdFj6', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/identifier', - },*/ - { - '@id': 'mktp:_63JdF67', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/name', - }, - { - '@id': 'mktp:_Kjd7F7s8', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/country', - }, - { - '@id': 'mktp:_Kf893Jd6', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/brand', + elements: [ + { + '@id': 'mktp:_63JdF67', + '@type': 'aldkg:Image', + resultsScope: 'rm:Cards_Coll/imageUrl', + options: { + fallback: + 'data:image/png;base64,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', + }, + }, + ], }, { - '@id': 'mktp:_K84jd^', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/price', - }, - { - '@id': 'mktp:_dF7jdF6', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/saleValue', - }, - { - '@id': 'mktp:_93Kdf7j', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/seller', - }, - ], - }, - { - '@id': 'mktp:_87Kdf3Ry7', - '@type': 'aldkg:VerticalLayout', - options: { - style: { - padding: '5px', - }, - width: 'all-empty-space', - }, - elements: [ - { - '@id': 'mktp:_93Kd8hH', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/categoryPopularity', - }, - { - '@id': 'mktp:_j7JG8d', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/commentsCount', - }, - { - '@id': 'mktp:_fg78Dfj6', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/starsValue', - }, - { - '@id': 'mktp:_924KFhf7', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/questionsCount', - }, - ], - }, - { - '@id': 'mktp:_86hDyf9', - '@type': 'aldkg:VerticalLayout', - options: { - style: { - padding: '5px', - }, - width: 'all-empty-space', - }, - elements: [ - { - '@id': 'mktp:_Kd83457', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/lastMonthSalesAmount', - }, - { - '@id': 'mktp:_8385jKd', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/lastMonthSalesValue', - }, - { - '@id': 'mktp:_8357KhfEm', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/perMonthSalesAmount', - }, - { - '@id': 'mktp:_956jsnH', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/perMonthSalesValue', - }, - { - '@id': 'mktp:_834LdjR', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/prevMonthSalesAmount', - }, - { - '@id': 'mktp:_935jFhj', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/prevMonthSalesValue', - }, - ], - }, - { - '@id': 'mktp:_9348jDf7', - '@type': 'aldkg:VerticalLayout', - options: { - style: { - padding: '5px', - }, - width: 'all-empty-space', - }, - elements: [ - { - '@id': 'mktp:_912JdmF', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/salesAmountDiff', - }, - { - '@id': 'mktp:_935KfH', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/totalSales', - }, - { - '@id': 'mktp:_482fDg8', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/totalSalesDiff', - }, - { - '@id': 'mktp:_94Fdf72', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/stocks', - }, - { - '@id': 'mktp:_68hDf2', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/stocksDiffOrders', - }, - { - '@id': 'mktp:_683Jfg72', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/stocksDiffReturns', + '@id': 'mktp:_88Dfg78', + '@type': 'aldkg:VerticalLayout', + options: { + style: { + height: '20%', + }, + }, + elements: [ + { + '@id': 'mktp:_63JdF67', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/name', + }, + { + '@id': 'mktp:_87Dfg78', + '@type': 'aldkg:HorizontalLayout', + options: { + justify: 'start', // start end center space-between space-around + align: 'flex-start', + //contentSize: true, + style: { + //flexGrow: '5', + width: '100%', + }, + width: 'all-empty-space', + }, + elements: [ + { + '@id': 'mktp:_93JhdA78', + '@type': 'aldkg:VerticalLayout', + options: { + style: { + padding: '5px', + }, + width: 'all-empty-space', + }, + elements: [ + /*{ + '@id': 'mktp:_92KdFj6', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/identifier', + },*/ + { + '@id': 'mktp:_Kjd7F7s8', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/country', + }, + { + '@id': 'mktp:_Kf893Jd6', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/brand', + }, + { + '@id': 'mktp:_K84jd^', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/price', + }, + { + '@id': 'mktp:_dF7jdF6', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/saleValue', + }, + { + '@id': 'mktp:_93Kdf7j', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/seller', + }, + ], + }, + { + '@id': 'mktp:_87Kdf3Ry7', + '@type': 'aldkg:VerticalLayout', + options: { + style: { + padding: '5px', + }, + width: 'all-empty-space', + }, + elements: [ + { + '@id': 'mktp:_93Kd8hH', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/categoryPopularity', + }, + { + '@id': 'mktp:_j7JG8d', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/commentsCount', + }, + { + '@id': 'mktp:_fg78Dfj6', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/starsValue', + }, + { + '@id': 'mktp:_924KFhf7', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/questionsCount', + }, + ], + }, + { + '@id': 'mktp:_86hDyf9', + '@type': 'aldkg:VerticalLayout', + options: { + style: { + padding: '5px', + }, + width: 'all-empty-space', + }, + elements: [ + { + '@id': 'mktp:_Kd83457', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/lastMonthSalesAmount', + }, + { + '@id': 'mktp:_8385jKd', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/lastMonthSalesValue', + }, + { + '@id': 'mktp:_8357KhfEm', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/perMonthSalesAmount', + }, + { + '@id': 'mktp:_956jsnH', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/perMonthSalesValue', + }, + { + '@id': 'mktp:_834LdjR', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/prevMonthSalesAmount', + }, + { + '@id': 'mktp:_935jFhj', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/prevMonthSalesValue', + }, + ], + }, + { + '@id': 'mktp:_9348jDf7', + '@type': 'aldkg:VerticalLayout', + options: { + style: { + padding: '5px', + }, + width: 'all-empty-space', + }, + elements: [ + { + '@id': 'mktp:_912JdmF', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/salesAmountDiff', + }, + { + '@id': 'mktp:_935KfH', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/totalSales', + }, + { + '@id': 'mktp:_482fDg8', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/totalSalesDiff', + }, + { + '@id': 'mktp:_94Fdf72', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/stocks', + }, + { + '@id': 'mktp:_68hDf2', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/stocksDiffOrders', + }, + { + '@id': 'mktp:_683Jfg72', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/stocksDiffReturns', + }, + /*{ + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/rootId', + }, + { + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/photosCount', + }, + { + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/firstParsedAt', + }, + { + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/lastMonthParsedAt', + }, + { + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/parsedAt', + }, + { + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/prevParsedAt', + },*/ + ], + }, + ], + }, + ], }, - /*{ - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/rootId', - }, - { - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/photosCount', - }, - { - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/firstParsedAt', - }, - { - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/lastMonthParsedAt', - }, - { - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/parsedAt', - }, - { - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/prevParsedAt', - },*/ ], }, ], From d9e63a7604ca38a9c1bbf1fb16c4b8e616143fbc Mon Sep 17 00:00:00 2001 From: Artkrygin <80037398+Artkrygin@users.noreply.github.com> Date: Tue, 12 Oct 2021 17:03:21 +0300 Subject: [PATCH 6/8] GH-38 Review fixes --- src/layouts/AntdFormLayout.tsx | 2 +- src/layouts/AntdVerticalLayout.tsx | 9 +++++---- src/util/layout.tsx | 2 +- stories/FormWithColumns.stories.tsx | 7 +++++-- 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/layouts/AntdFormLayout.tsx b/src/layouts/AntdFormLayout.tsx index 8cb655a..0df446c 100644 --- a/src/layouts/AntdFormLayout.tsx +++ b/src/layouts/AntdFormLayout.tsx @@ -83,7 +83,7 @@ export const AntdFormLayout: React.FC = ({ {({ width, height }: any) => (
onEdit()}> - {title} + {title && {title}} {readOnly ? null : } = ({ }) => { const style = viewKindElement.options?.style; const Render: React.FC = ({ idx, viewKind, viewKindElement, viewDescr, enabled }) => { - const options = viewKindElement.options || {}; + const height = viewKindElement.options?.style?.height; + console.log('OPT', viewKindElement, height); const newViewKindElement = { ...viewKindElement }; if (newViewKindElement.options) { newViewKindElement.options.style = {}; @@ -39,8 +40,8 @@ export const AntdVerticalLayoutRenderer: React.FC = ({ diff --git a/src/util/layout.tsx b/src/util/layout.tsx index 07bec8f..7230383 100644 --- a/src/util/layout.tsx +++ b/src/util/layout.tsx @@ -35,7 +35,7 @@ export const renderLayoutElements = ({ //const sort = id ? viewKind.properties && viewKind.properties[id] && viewKind.properties[id].order : undefined; if (!elements || elements.length === 0) return <>; return elements.map((el: IViewKindElement, idx: number) => { - el = { ...el, options: { ...el.options, readOnly } }; + el = { ...el, options: { readOnly, ...el.options } }; return ( ); diff --git a/stories/FormWithColumns.stories.tsx b/stories/FormWithColumns.stories.tsx index 9a8f8b9..58c89ad 100644 --- a/stories/FormWithColumns.stories.tsx +++ b/stories/FormWithColumns.stories.tsx @@ -102,10 +102,13 @@ const viewKinds = [ }, elements: [ { - '@id': 'rm:_83hd7f', + '@id': 'rm:_834hd7f', '@type': 'aldkg:FormLayout', options: { - readOnly: false, + style: { + height: '100%', + }, + readOnly: true, }, elements: [ { From f15e13a9813cd1507f710f6376d4e8c977910500 Mon Sep 17 00:00:00 2001 From: Artkrygin <80037398+Artkrygin@users.noreply.github.com> Date: Tue, 12 Oct 2021 17:29:33 +0300 Subject: [PATCH 7/8] GH-18 read-only true --- src/controls/AntdImageControl.tsx | 2 +- src/layouts/AntdFormLayout.tsx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/controls/AntdImageControl.tsx b/src/controls/AntdImageControl.tsx index 1a2c531..33c0591 100644 --- a/src/controls/AntdImageControl.tsx +++ b/src/controls/AntdImageControl.tsx @@ -5,7 +5,7 @@ import { withStoreToControlProps } from '../util/ContextToProps'; export const AntdImageControl = (props: any): JSX.Element => { const { uiOptions, data } = props; - return ; + return ; }; export const antdImageControlTester: RankedTester = rankWith(3, uiTypeIs('aldkg:Image')); diff --git a/src/layouts/AntdFormLayout.tsx b/src/layouts/AntdFormLayout.tsx index 0df446c..eebfb0b 100644 --- a/src/layouts/AntdFormLayout.tsx +++ b/src/layouts/AntdFormLayout.tsx @@ -82,7 +82,9 @@ export const AntdFormLayout: React.FC = ({ return ( {({ width, height }: any) => ( -
onEdit()}> +
!readOnly && onEdit()}> {title && {title}} {readOnly ? null : } From 635a9fbab8f4965d44aa7a070bd789bcec828fd0 Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Tue, 12 Oct 2021 18:02:03 +0300 Subject: [PATCH 8/8] [refactor] GH-38 Add table to story --- ...es.tsx => FormColumnsAndTable.stories.tsx} | 233 +++++++++++++++--- 1 file changed, 198 insertions(+), 35 deletions(-) rename stories/{FormWithColumns.stories.tsx => FormColumnsAndTable.stories.tsx} (75%) diff --git a/stories/FormWithColumns.stories.tsx b/stories/FormColumnsAndTable.stories.tsx similarity index 75% rename from stories/FormWithColumns.stories.tsx rename to stories/FormColumnsAndTable.stories.tsx index 58c89ad..4ce4de1 100644 --- a/stories/FormWithColumns.stories.tsx +++ b/stories/FormColumnsAndTable.stories.tsx @@ -23,12 +23,13 @@ import { Form, MstContextProvider, RendererRegistryEntry, + tableRenderers, } from '../src'; import { viewKindCollConstr, viewDescrCollConstr } from '../src/models/ViewCollConstrs'; import { createUiModelFromState } from '../src/models/MstViewDescr'; export default { - title: 'Form/Form with Columns', + title: 'Several Controls/FormColumns and Table', component: Form, argTypes: { backgroundColor: { control: 'color' }, @@ -40,6 +41,7 @@ export const Empty: Story<{}> = () => { ...antdControlRenderers, ...antdLayoutRenderers, ...antdDataControlRenderers, + ...tableRenderers, ]; const client = new SparqlClientImpl( @@ -188,11 +190,6 @@ const viewKinds = [ width: 'all-empty-space', }, elements: [ - /*{ - '@id': 'mktp:_92KdFj6', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/identifier', - },*/ { '@id': 'mktp:_Kjd7F7s8', '@type': 'aldkg:Control', @@ -272,11 +269,6 @@ const viewKinds = [ '@type': 'aldkg:Control', resultsScope: 'rm:Cards_Coll/lastMonthSalesValue', }, - { - '@id': 'mktp:_8357KhfEm', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/perMonthSalesAmount', - }, { '@id': 'mktp:_956jsnH', '@type': 'aldkg:Control', @@ -334,30 +326,6 @@ const viewKinds = [ '@type': 'aldkg:Control', resultsScope: 'rm:Cards_Coll/stocksDiffReturns', }, - /*{ - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/rootId', - }, - { - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/photosCount', - }, - { - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/firstParsedAt', - }, - { - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/lastMonthParsedAt', - }, - { - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/parsedAt', - }, - { - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/prevParsedAt', - },*/ ], }, ], @@ -370,6 +338,201 @@ const viewKinds = [ }, ], }, + { + '@id': 'mktp:_8255hFsd', + '@type': 'aldkg:VerticalLayout', + options: { + style: { + height: '80%', + }, + width: 'all-empty-space', + }, + elements: [ + { + '@id': 'mktp:CategoryCardsTable', + '@type': 'aldkg:Array', + resultsScope: 'rm:Cards_Coll', + options: { + draggable: true, + resizeableHeader: true, + height: 'all-empty-space', + style: { height: '100%' }, + order: [ + 'imageUrl', + 'name', + 'price', + 'saleValue', + 'categoryPopularity', + 'commentsCount', + 'starsValue', + 'questionsCount', + 'lastMonthSalesAmount', + 'lastMonthSalesValue', + 'perMonthSalesAmount', + 'perMonthSalesValue', + 'prevMonthSalesAmount', + 'prevMonthSalesValue', + 'salesAmountDiff', + 'totalSales', + 'totalSalesDiff', + 'stocks', + 'stocksDiffOrders', + 'stocksDiffReturns', + 'country', + 'brand', + 'seller', + 'identifier', + 'rootId', + 'photosCount', + 'firstParsedAt', + 'lastMonthParsedAt', + 'parsedAt', + 'prevParsedAt', + ], + imageUrl: { + width: 60, + formatter: 'image', + editable: false, + }, + identifier: { + formatter: 'link', + //dataToFormatter: { link: 'identifier' }, + sortable: true, + editable: false, + }, + name: { + width: 340, + formatter: 'link', + dataToFormatter: { link: '@id' }, + sortable: true, + editable: false, + }, + country: { + width: 60, + sortable: true, + editable: false, + }, + brand: { + formatter: 'link', + sortable: true, + editable: false, + }, + price: { + width: 60, + sortable: true, + editable: false, + }, + saleValue: { + width: 60, + sortable: true, + editable: false, + }, + seller: { + formatter: 'link', + sortable: true, + editable: false, + }, + categoryPopularity: { + width: 100, + editable: false, + }, + commentsCount: { + width: 100, + sortable: true, + editable: false, + }, + starsValue: { + width: 100, + sortable: true, + editable: false, + }, + questionsCount: { + width: 100, + sortable: true, + editable: false, + }, + lastMonthSalesAmount: { + width: 150, + sortable: true, + editable: false, + }, + lastMonthSalesValue: { + width: 150, + sortable: true, + editable: false, + }, + perMonthSalesAmount: { + width: 150, + sortable: true, + editable: false, + }, + perMonthSalesValue: { + width: 150, + sortable: true, + editable: false, + }, + prevMonthSalesAmount: { + width: 150, + sortable: true, + editable: false, + }, + prevMonthSalesValue: { + width: 150, + sortable: true, + editable: false, + }, + salesAmountDiff: { + width: 150, + sortable: true, + editable: false, + }, + totalSales: { + width: 100, + sortable: true, + editable: false, + }, + totalSalesDiff: { + width: 150, + sortable: true, + editable: false, + }, + stocks: { + width: 100, + sortable: true, + editable: false, + }, + stocksDiffOrders: { + width: 100, + sortable: true, + editable: false, + }, + stocksDiffReturns: { + width: 100, + sortable: true, + editable: false, + }, + rootId: { + editable: false, + }, + photosCount: { + editable: false, + }, + firstParsedAt: { + editable: false, + }, + lastMonthParsedAt: { + editable: false, + }, + parsedAt: { + editable: false, + }, + prevParsedAt: { + editable: false, + }, + }, + }, + ], + }, ], }, ];