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 = {};