From 483c69cf7b21b437e7e6d726552ab2c73b5947a7 Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Fri, 24 Sep 2021 16:20:34 +0300 Subject: [PATCH] GH-28 Tests for the bug --- stories/AntdCardCell.stories.tsx | 1 - stories/TreeTableFormMktp.stories.tsx | 89 ++- stories/TwoTables.stories.tsx | 1056 ++++++++++++++----------- stories/TwoTablesBig.stories.tsx | 70 +- 4 files changed, 687 insertions(+), 529 deletions(-) diff --git a/stories/AntdCardCell.stories.tsx b/stories/AntdCardCell.stories.tsx index 0bb2212..551f32c 100644 --- a/stories/AntdCardCell.stories.tsx +++ b/stories/AntdCardCell.stories.tsx @@ -305,7 +305,6 @@ export const Full: Story<{}> = () => { const client = new SparqlClientImpl('https://rdf4j.agentlab.ru/rdf4j-server'); const rootStore = createUiModelFromState('mktp', client, rootModelInitialState, additionalColls); - console.log('rootStore', rootStore); const store: any = asReduxStore(rootStore); // eslint-disable-next-line @typescript-eslint/no-var-requires connectReduxDevtools(require('remotedev'), rootStore); diff --git a/stories/TreeTableFormMktp.stories.tsx b/stories/TreeTableFormMktp.stories.tsx index 8829b71..f2d7ba6 100644 --- a/stories/TreeTableFormMktp.stories.tsx +++ b/stories/TreeTableFormMktp.stories.tsx @@ -7,6 +7,7 @@ * * SPDX-License-Identifier: GPL-3.0-only ********************************************************************************/ +import { cloneDeep } from 'lodash-es'; import moment from 'moment'; import React from 'react'; import { Story, Meta } from '@storybook/react'; @@ -35,6 +36,43 @@ import { import { viewKindCollConstr, viewDescrCollConstr } from '../src/models/ViewCollConstrs'; import { createUiModelFromState } from '../src/models/MstViewDescr'; +export default { + title: 'Several Controls/Tree-Table-Form', + component: Form, + argTypes: { + backgroundColor: { control: 'color' }, + }, +} as Meta; + +const Template: Story = (args: any) => { + const antdRenderers: RendererRegistryEntry[] = [ + ...antdControlRenderers, + ...antdLayoutRenderers, + ...antdDataControlRenderers, + ...tableRenderers, + ]; + + //const client = new SparqlClientImpl('https://rdf4j.agentlab.ru/rdf4j-server'); + //const rootStore = createUiModelFromState('mktp', client, rootModelInitialState, additionalColls); + const client = new SparqlClientImpl( + 'https://rdf4j.agentlab.ru/rdf4j-server', + 'https://rdf4j.agentlab.ru/rdf4j-server/repositories/mktp/namespaces', + ); + const rootStore = createUiModelFromState('mktp-fed', client, rootModelInitialState, args.additionalColls); + const store: any = asReduxStore(rootStore); + // eslint-disable-next-line @typescript-eslint/no-var-requires + connectReduxDevtools(require('remotedev'), rootStore); + return ( +
+ + +
+ + +
+ ); +}; + const viewKinds = [ { '@id': 'mktp:TreeTableFormMktpCategoriesViewKind', @@ -118,13 +156,13 @@ const viewKinds = [ width: '100%', height: '100%', }, + height: 'all-empty-space', + //width: 'all-empty-space', defaultSize: { 'mktp:MarketplacesTabs': '17%', 'mktp:CategoryCardsTable': '43%', 'mktp:CategoryCardForm': '43%', }, - height: 'all-empty-space', - //width: 'all-empty-space', }, elements: [ { @@ -426,39 +464,18 @@ const additionalColls: CollState[] = [ }, ]; -export default { - title: 'Several Controls/Tree-Table-Form', - component: Form, - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as Meta; - -export const MktpCategories: Story<{}> = () => { - const antdRenderers: RendererRegistryEntry[] = [ - ...antdControlRenderers, - ...antdLayoutRenderers, - ...antdDataControlRenderers, - ...tableRenderers, - ]; +export const MktpCategories100Percent = Template.bind({}); +MktpCategories100Percent.args = { + additionalColls, + viewDescrId: viewDescrs[0]['@id'], + viewDescrCollId: viewDescrCollConstr['@id'], +}; - //const client = new SparqlClientImpl('https://rdf4j.agentlab.ru/rdf4j-server'); - //const rootStore = createUiModelFromState('mktp', client, rootModelInitialState, additionalColls); - const client = new SparqlClientImpl( - 'https://rdf4j.agentlab.ru/rdf4j-server', - 'https://rdf4j.agentlab.ru/rdf4j-server/repositories/mktp/namespaces', - ); - const rootStore = createUiModelFromState('mktp-fed', client, rootModelInitialState, additionalColls); - const store: any = asReduxStore(rootStore); - // eslint-disable-next-line @typescript-eslint/no-var-requires - connectReduxDevtools(require('remotedev'), rootStore); - return ( -
- - - - - -
- ); +export const MktpCategories50Percent = Template.bind({}); +const additionalColls50 = cloneDeep(additionalColls); +additionalColls50[0].data[0].elements[0].options.style.height = '50%'; +MktpCategories50Percent.args = { + additionalColls: additionalColls50, + viewDescrId: viewDescrs[0]['@id'], + viewDescrCollId: viewDescrCollConstr['@id'], }; diff --git a/stories/TwoTables.stories.tsx b/stories/TwoTables.stories.tsx index 0449b85..26f0562 100644 --- a/stories/TwoTables.stories.tsx +++ b/stories/TwoTables.stories.tsx @@ -7,6 +7,7 @@ * * SPDX-License-Identifier: GPL-3.0-only ********************************************************************************/ +import { cloneDeep } from 'lodash-es'; import moment from 'moment'; import { variable } from '@rdfjs/data-model'; import React from 'react'; @@ -30,6 +31,35 @@ import { import { tableRenderers } from '../src'; +export default { + title: 'Several Controls/TwoTables RemoteData', + component: Form, +} as Meta; + +const Template: Story = (args: any) => { + const antdRenderers: RendererRegistryEntry[] = [ + ...antdControlRenderers, + ...antdLayoutRenderers, + ...antdDataControlRenderers, + ...tableRenderers, + ]; + + const client = new SparqlClientImpl('https://rdf4j.agentlab.ru/rdf4j-server'); + const rootStore = createUiModelFromState('mktp', client, rootModelInitialState, args.additionalColls); + const store: any = asReduxStore(rootStore); + // eslint-disable-next-line @typescript-eslint/no-var-requires + connectReduxDevtools(require('remotedev'), rootStore); + return ( +
+ + + + + +
+ ); +}; + const viewKinds = [ { '@id': 'mktp:TwoTablesViewKind', @@ -89,458 +119,465 @@ const viewKinds = [ }, ], }, + { + '@id': 'mktp:Cards_Coll', + '@type': 'aldkg:CollConstr', + entConstrs: [ + { + '@id': 'mktp:Cards_Coll_Ent0', + '@type': 'aldkg:EntConstr', + schema: 'hs:ProductCardShape', + conditions: { + '@id': 'mktp:Cards_Coll_Ent0_con', + '@_id': 'https://www.wildberries.ru/catalog/15570386/detail.aspx', + }, + }, + ], + //orderBy: [{ expression: variable('identifier0'), descending: false }], + }, ], elements: [ { - '@id': 'mktp:_934jHd67', - '@type': 'aldkg:VerticalLayout', - //options: { - // height: 'all-empty-space', - ///}, + '@id': 'mktp:_97hFH67', + '@type': 'aldkg:SplitPaneLayout', + options: { + style: { + width: '100%', + height: '100%', + }, + defaultSize: { + 'mktp:MarketplacesTabs': '17%', + 'mktp:CategoryCardsTable': '43', + 'mktp:ProductCardsTable': '26%', + 'mktp:ProductTree': '17%', + }, + height: 'all-empty-space', + //width: 'all-empty-space', + }, + // child ui elements configs elements: [ { - '@id': 'mktp:_97hFH67', - '@type': 'aldkg:SplitPaneLayout', - options: { - style: { - width: '100%', - height: '100%', - }, - defaultSize: { - 'mktp:MarketplacesTabs': '17%', - 'mktp:CategoryCardsTable': '43', - 'mktp:ProductCardsTable': '26%', - 'mktp:ProductTree': '17%', - }, - height: 'all-empty-space', - //width: 'all-empty-space', - }, - // child ui elements configs + '@id': 'mktp:MarketplacesTabs', + '@type': 'aldkg:TabsLayout', elements: [ { - '@id': 'mktp:MarketplacesTabs', - '@type': 'aldkg:TabsLayout', - elements: [ - { - '@id': 'mktp:_23sLhd67', - '@type': 'aldkg:DataControl', - resultsScope: 'mktp:Categories_Coll', - options: { - renderType: 'tree', - title: 'WildBerries', - treeNodeTitleKey: 'name', - treeNodeParentKey: 'SubcatInCatLink', - connections: [{ to: 'mktp:ProductCards_in_Category_Coll_Ent0_con', by: 'CardInCatLink' }], - }, - }, - { - '@id': 'mktp:_90Syd67', - '@type': 'aldkg:DataControl', - resultsScope: 'mktp:Categories_Coll_Amzn', - options: { - renderType: 'tree', - title: 'Amazon', - treeNodeTitleKey: 'name', - treeNodeParentKey: 'SubcatInCatLink', - }, - }, - { - '@id': 'mktp:_20dAy80', - '@type': 'aldkg:DataControl', - resultsScope: 'mktp:Categories_Coll_1688', - options: { - renderType: 'tree', - title: '1688', - treeNodeTitleKey: 'name', - treeNodeParentKey: 'SubcatInCatLink', - }, - }, - ], - }, - { - '@id': 'mktp:CategoryCardsTable', - '@type': 'aldkg:Array', - resultsScope: 'mktp:ProductCards_in_Category_Coll', + '@id': 'mktp:_23sLhd67', + '@type': 'aldkg:DataControl', + resultsScope: 'mktp:Categories_Coll', options: { - target: { - name: 'правую таблицу', - iri: 'mktp:ProductCards_in_Product_Coll', - }, - 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, - }, + renderType: 'tree', + title: 'WildBerries', + treeNodeTitleKey: 'name', + treeNodeParentKey: 'SubcatInCatLink', + connections: [{ to: 'mktp:ProductCards_in_Category_Coll_Ent0_con', by: 'CardInCatLink' }], }, }, { - '@id': 'mktp:ProductCardsTable', - '@type': 'aldkg:Array', - resultsScope: 'mktp:ProductCards_in_Product_Coll', + '@id': 'mktp:_90Syd67', + '@type': 'aldkg:DataControl', + resultsScope: 'mktp:Categories_Coll_Amzn', 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, - }, + renderType: 'tree', + title: 'Amazon', + treeNodeTitleKey: 'name', + treeNodeParentKey: 'SubcatInCatLink', }, }, { - '@id': 'mktp:ProductTree', + '@id': 'mktp:_20dAy80', '@type': 'aldkg:DataControl', - resultsScope: 'mktp:Products_Coll', + resultsScope: 'mktp:Categories_Coll_1688', options: { renderType: 'tree', - title: 'Продукты', - treeNodeTitleKey: 'title', - treeNodeParentKey: 'SubProdInProdLink', - connections: [{ to: 'mktp:ProductCards_in_Product_Coll_Ent0_Cond', by: 'CardInProdLink' }], + title: '1688', + treeNodeTitleKey: 'name', + treeNodeParentKey: 'SubcatInCatLink', }, }, ], }, + { + '@id': 'mktp:CategoryCardsTable', + '@type': 'aldkg:Array', + resultsScope: 'mktp:ProductCards_in_Category_Coll', + options: { + target: { + name: 'правую таблицу', + iri: 'mktp:ProductCards_in_Product_Coll', + }, + 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, + }, + }, + }, + { + '@id': 'mktp:ProductCardsTable', + '@type': 'aldkg:Array', + resultsScope: 'mktp:ProductCards_in_Product_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, + }, + }, + }, + { + '@id': 'mktp:ProductTree', + '@type': 'aldkg:DataControl', + resultsScope: 'mktp:Products_Coll', + options: { + renderType: 'tree', + title: 'Продукты', + treeNodeTitleKey: 'title', + treeNodeParentKey: 'SubProdInProdLink', + connections: [{ to: 'mktp:ProductCards_in_Product_Coll_Ent0_Cond', by: 'CardInProdLink' }], + }, + }, ], }, ], @@ -560,6 +597,38 @@ const viewDescrs = [ }, ]; +const cardForm = { + '@id': 'mktp:_933ndh8', + '@type': 'aldkg:VerticalLayout', + options: { + style: { + margin: '5px', + }, + }, + elements: [ + { + '@id': 'mktp:_29jGu67', + '@type': 'aldkg:Control', + resultsScope: 'mktp:Cards_Coll/identifier', + }, + { + '@id': 'mktp:_18hfgG78', + '@type': 'aldkg:Control', + resultsScope: 'mktp:Cards_Coll/name', + }, + { + '@id': 'mktp:_732HJfg6', + '@type': 'aldkg:Control', + resultsScope: 'mktp:Cards_Coll/country', + }, + { + '@id': 'mktp:_93jaSy67', + '@type': 'aldkg:Control', + resultsScope: 'mktp:Cards_Coll/brand', + }, + ], +}; + const additionalColls: CollState[] = [ // ViewKinds Collection { @@ -584,34 +653,107 @@ const additionalColls: CollState[] = [ }, ]; -export default { - title: 'Several Controls/TwoTables', - component: Form, -} as Meta; +////////////////////////////////////////////////////// +// Without VerticalLayout AND without Form +////////////////////////////////////////////////////// +export const NoVerticalLayout100Height = Template.bind({}); +NoVerticalLayout100Height.args = { + additionalColls, + viewDescrId: viewDescrs[0]['@id'], + viewDescrCollId: viewDescrCollConstr['@id'], +}; -const Template: Story = (args: any) => { - const antdRenderers: RendererRegistryEntry[] = [ - ...antdControlRenderers, - ...antdLayoutRenderers, - ...antdDataControlRenderers, - ...tableRenderers, - ]; +export const NoVerticalLayout50Height = Template.bind({}); +const additionalCollsNoVerticalLayout50Height = cloneDeep(additionalColls); +additionalCollsNoVerticalLayout50Height[0].data[0].elements[0].options.style.height = '50%'; +NoVerticalLayout50Height.args = { + additionalColls: additionalCollsNoVerticalLayout50Height, + viewDescrId: viewDescrs[0]['@id'], + viewDescrCollId: viewDescrCollConstr['@id'], +}; - const client = new SparqlClientImpl('https://rdf4j.agentlab.ru/rdf4j-server'); - const rootStore = createUiModelFromState('mktp', client, rootModelInitialState, additionalColls); - const store: any = asReduxStore(rootStore); - // eslint-disable-next-line @typescript-eslint/no-var-requires - connectReduxDevtools(require('remotedev'), rootStore); - return ( -
- - - - - -
- ); +////////////////////////////////////////////////////// +// Without VerticalLayout AND with Form +////////////////////////////////////////////////////// +export const NoVerticalLayout100HeightForm = Template.bind({}); +const additionalCollsNoVerticalLayout100HeightForm = cloneDeep(additionalColls); +additionalCollsNoVerticalLayout100HeightForm[0].data[0].elements = [ + ...additionalCollsNoVerticalLayout100HeightForm[0].data[0].elements, + cardForm, +]; +NoVerticalLayout100HeightForm.args = { + additionalColls: additionalCollsNoVerticalLayout100HeightForm, + viewDescrId: viewDescrs[0]['@id'], + viewDescrCollId: viewDescrCollConstr['@id'], +}; + +export const NoVerticalLayout50HeightForm = Template.bind({}); +const additionalColls50HeightForm = cloneDeep(additionalCollsNoVerticalLayout100HeightForm); +additionalColls50HeightForm[0].data[0].elements[0].options.style.height = '50%'; +NoVerticalLayout50HeightForm.args = { + additionalColls: additionalColls50HeightForm, + viewDescrId: viewDescrs[0]['@id'], + viewDescrCollId: viewDescrCollConstr['@id'], }; -export const RemoteData = Template.bind({}); -RemoteData.args = {}; +////////////////////////////////////////////////////// +// With VerticalLayout AND without Form +////////////////////////////////////////////////////// +export const VerticalLayout100Height = Template.bind({}); +const additionalCollsVerticalLayout100Height = cloneDeep(additionalColls); +// wrap elements in VerticalLayout +additionalCollsVerticalLayout100Height[0].data[0].elements = [ + { + '@id': 'mktp:_934jHd67', + '@type': 'aldkg:VerticalLayout', + options: { + height: 'all-empty-space', + }, + elements: additionalCollsVerticalLayout100Height[0].data[0].elements, + }, +]; +VerticalLayout100Height.args = { + additionalColls: additionalCollsVerticalLayout100Height, + viewDescrId: viewDescrs[0]['@id'], + viewDescrCollId: viewDescrCollConstr['@id'], +}; + +export const VerticalLayout50Height = Template.bind({}); +const additionalCollsVerticalLayout50Height = cloneDeep(additionalCollsVerticalLayout100Height); +additionalCollsVerticalLayout50Height[0].data[0].elements[0].elements[0].options.style.height = '50%'; +VerticalLayout50Height.args = { + additionalColls: additionalCollsVerticalLayout50Height, + viewDescrId: viewDescrs[0]['@id'], + viewDescrCollId: viewDescrCollConstr['@id'], +}; + +////////////////////////////////////////////////////// +// With VerticalLayout AND with Form +////////////////////////////////////////////////////// +export const VerticalLayout100HeightForm = Template.bind({}); +const additionalCollsVerticalLayout100HeightForm = cloneDeep(additionalColls); +// wrap elements in VerticalLayout +additionalCollsVerticalLayout100HeightForm[0].data[0].elements = [ + { + '@id': 'mktp:_934jHd67', + '@type': 'aldkg:VerticalLayout', + options: { + height: 'all-empty-space', + }, + elements: [...additionalCollsVerticalLayout100HeightForm[0].data[0].elements, cardForm], + }, +]; +VerticalLayout100HeightForm.args = { + additionalColls: additionalCollsVerticalLayout100HeightForm, + viewDescrId: viewDescrs[0]['@id'], + viewDescrCollId: viewDescrCollConstr['@id'], +}; + +export const VerticalLayout50HeightForm = Template.bind({}); +const additionalCollsVerticalLayout50HeightForm = cloneDeep(additionalCollsVerticalLayout100HeightForm); +additionalCollsVerticalLayout50HeightForm[0].data[0].elements[0].elements[0].options.style.height = '50%'; +VerticalLayout50HeightForm.args = { + additionalColls: additionalCollsVerticalLayout50HeightForm, + viewDescrId: viewDescrs[0]['@id'], + viewDescrCollId: viewDescrCollConstr['@id'], +}; diff --git a/stories/TwoTablesBig.stories.tsx b/stories/TwoTablesBig.stories.tsx index b64679c..71f7ba9 100644 --- a/stories/TwoTablesBig.stories.tsx +++ b/stories/TwoTablesBig.stories.tsx @@ -14,7 +14,7 @@ import { Meta, Story } from '@storybook/react'; import { Provider } from 'react-redux'; import { asReduxStore, connectReduxDevtools } from 'mst-middlewares'; -import { rootModelInitialState, CollState, SparqlClientImpl, sendGet } from '@agentlab/sparql-jsld-client'; +import { rootModelInitialState, CollState, SparqlClientImpl } from '@agentlab/sparql-jsld-client'; import { antdCells, @@ -30,6 +30,38 @@ import { viewKindCollConstr, } from '../src'; +export default { + title: 'Several Controls/TwoTablesBig', + component: Form, +} as Meta; + +const Template: Story = (args: any) => { + const antdRenderers: RendererRegistryEntry[] = [ + ...antdControlRenderers, + ...antdLayoutRenderers, + ...antdDataControlRenderers, + ...tableRenderers, + ]; + + const client = new SparqlClientImpl( + 'https://rdf4j.agentlab.ru/rdf4j-server', + 'https://rdf4j.agentlab.ru/rdf4j-server/repositories/mktp/namespaces', + ); + const rootStore = createUiModelFromState('mktp-fed', client, rootModelInitialState, additionalColls); + const store: any = asReduxStore(rootStore); + // eslint-disable-next-line @typescript-eslint/no-var-requires + connectReduxDevtools(require('remotedev'), rootStore); + return ( +
+ + + + + +
+ ); +}; + const viewKinds = [ { '@id': 'mktp:TwoTablesViewKind', @@ -106,14 +138,14 @@ const viewKinds = [ width: '100%', height: '100%', }, + height: 'all-empty-space', + width: 'all-empty-space', defaultSize: { 'mktp:MarketplacesTabs': '17%', 'mktp:CategoryCardsTable': '43%', 'mktp:ProductCardsTable': '26%', 'mktp:ProductTree': '17%', }, - height: 'all-empty-space', - //width: 'all-empty-space', }, // child ui elements configs elements: [ @@ -584,37 +616,5 @@ const additionalColls: CollState[] = [ }, ]; -export default { - title: 'Several Controls/TwoTablesBig', - component: Form, -} as Meta; - -const Template: Story = (args: any) => { - const antdRenderers: RendererRegistryEntry[] = [ - ...antdControlRenderers, - ...antdLayoutRenderers, - ...antdDataControlRenderers, - ...tableRenderers, - ]; - - const client = new SparqlClientImpl( - 'https://rdf4j.agentlab.ru/rdf4j-server', - 'https://rdf4j.agentlab.ru/rdf4j-server/repositories/mktp/namespaces', - ); - const rootStore = createUiModelFromState('mktp-fed', client, rootModelInitialState, additionalColls); - const store: any = asReduxStore(rootStore); - // eslint-disable-next-line @typescript-eslint/no-var-requires - connectReduxDevtools(require('remotedev'), rootStore); - return ( -
- - - - - -
- ); -}; - export const RemoteData = Template.bind({}); RemoteData.args = {};