From b4cf423008c7f49d87be1cebf352b8d1877d9138 Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Wed, 17 Nov 2021 21:30:44 +0300 Subject: [PATCH] [add] DialogButton initial impl --- src/dialog/DialogButtonRenderer.tsx | 176 ++++++++++++++++++++ src/index.ts | 1 + stories/TreeTableChartMktpCards.stories.tsx | 117 ++++++++++--- 3 files changed, 270 insertions(+), 24 deletions(-) create mode 100644 src/dialog/DialogButtonRenderer.tsx diff --git a/src/dialog/DialogButtonRenderer.tsx b/src/dialog/DialogButtonRenderer.tsx new file mode 100644 index 0000000..eebfa83 --- /dev/null +++ b/src/dialog/DialogButtonRenderer.tsx @@ -0,0 +1,176 @@ +import { MstContext, processViewKindOverride, RankedTester, rankWith, uiTypeIs } from '@agentlab/ldkg-ui-react'; +import { SparqlClientImpl } from '@agentlab/sparql-jsld-client'; +import { Button, Divider, Form, Input, InputNumber, Modal } from 'antd'; +import React, { useContext, useState } from 'react'; +import uuid62 from 'uuid62'; + +const client = new SparqlClientImpl('https://rdf4j.agentlab.ru/rdf4j-server'); +client.setRepositoryId('mktp-schema'); + +export const DialogButtonRenderer: React.FC = (props) => { + const { store } = useContext(MstContext); + const [isModalVisible, setIsModalVisible] = useState(false); + + const { viewKind, viewDescr, form, enabled } = props; + + const [formRef] = Form.useForm(); + + const [id, collIri, collIriOverride, inCollPath, viewKindElement, viewDescrElement] = processViewKindOverride( + props, + store, + ); + const style = viewKindElement.options?.style; + + const showModal = () => { + setIsModalVisible(true); + }; + const handleOk = () => { + setIsModalVisible(false); + //const client = getEnv(store).client; + //console.log('CCCLIENT', client); + + const vals = formRef.getFieldsValue(); + formRef.resetFields(); + let uud = '_' + uuid62.v4(); + const catIri = `https://www.1688.com/categories/${uud}`; + const q1 = `PREFIX rdf: + PREFIX als: + INSERT DATA { + GRAPH { + <${catIri}> rdf:type als:Category ; + rdf:type als:Query ; + als:name '${vals.categryName}' ; + als:nameCn '' ; + als:description '' . + } + }`; + console.log(q1); + const results1 = client.sparqlUpdate(q1); + console.log('q1 resp', results1); + + uud = '_' + uuid62.v4(); + const jobIri = `https://www.1688.com/jobs/${uud}`; + const q2 = `PREFIX rdf: + PREFIX mktp: + INSERT DATA { + GRAPH { + <${jobIri}> rdf:type mktp:ScraperJob ; + mktp:category <${catIri}> ; + mktp:minPrice ${vals.minPrice} ; + mktp:maxPrice ${vals.minPrice} ; + mktp:minVol ${vals.minVol} ; + mktp:maxVol ${vals.maxVol} ; + mktp:prodTitle '${vals.prodTitle || ''}' ; + mktp:limit ${vals.limit} . + } + }`; + console.log(q2); + const results2 = client.sparqlUpdate(q2); + console.log('q2 resp', results2); + }; + const handleCancel = () => { + setIsModalVisible(false); + }; + const onFinish = (values: any) => { + console.log('Success:', values); + }; + + const onFinishFailed = (errorInfo: any) => { + console.log('Failed:', errorInfo); + }; + return ( +
+ +
+ +
+ + + + + Параметры товара + + + + + + - + + + + + + + + + + - + + + + + + + + + + + + +
+ +
+
+ ); +}; + +export const antdDialogButtonControlTester: RankedTester = rankWith(2, uiTypeIs('aldkg:DialogButton')); diff --git a/src/index.ts b/src/index.ts index 9c8854f..6a99d58 100644 --- a/src/index.ts +++ b/src/index.ts @@ -17,6 +17,7 @@ export * from './charts/RadarChart'; export * as TimeSeriesWithAuxiliaryView from './charts/TimeSeriesWithAuxiliaryView'; export * from './DataRenderer'; export * as DateRangePickerMenu from './DateRangePickerMenu'; +export * from './dialog/DialogButtonRenderer'; // test data export * from './store/data'; export * from './store/MstViewElements'; diff --git a/stories/TreeTableChartMktpCards.stories.tsx b/stories/TreeTableChartMktpCards.stories.tsx index 91da052..feb64f5 100644 --- a/stories/TreeTableChartMktpCards.stories.tsx +++ b/stories/TreeTableChartMktpCards.stories.tsx @@ -28,6 +28,7 @@ import { asReduxStore, connectReduxDevtools } from 'mst-middlewares'; import React from 'react'; import { Provider } from 'react-redux'; import { chartsRenderers } from '../src'; +import { antdDialogButtonControlTester, DialogButtonRenderer } from '../src/dialog/DialogButtonRenderer'; const buildCustomTooltip = (property: string) => (title: any, items: any) => { const data = items[0]?.data || {}; @@ -48,6 +49,7 @@ const Template: Story = ({ additionalColls, viewDescrId, viewDescrCollId }: any) ...antdDataControlRenderers, ...tableRenderers, ...chartsRenderers, + { tester: antdDialogButtonControlTester, renderer: DialogButtonRenderer }, ]; const client = new SparqlClientImpl( @@ -180,34 +182,69 @@ const viewKindsCats = [ }, elements: [ { - '@id': 'mktp:_df7eds', - '@type': 'aldkg:TabControl', - // by this resultsScope TabControl could have read access to the results, selected by Query with @id='rm:ProjectViewClass_ArtifactFormats_Query' - resultsScope: 'mktp:Marketplaces_Coll', // bind to results data by query @id + '@id': 'mktp:_94kFg89', + '@type': 'aldkg:PanelLayout', options: { - title: 'Маркетплейсы', + flow: 'horizontal', style: { - margin: '0 0 0 24px', + width: '100%', + flexDirection: 'row', + display: 'flex', }, - contentSize: true, - // by this connection TabControl could have read/write access to the property 'artifactFormat' in condition object with @id='rm:ProjectViewClass_Artifacts_Query_Shape0_Condition' - connections: [ - { toObj: 'mktp:Categories_Coll_Ent', toProp: 'schema', fromProp: 'categoryShape' }, - { toObj: 'mktp:ProductCards_in_Category_Coll_Ent', toProp: 'schema', fromProp: 'productCardShape' }, - // Product cards - { toObj: 'mktp:ProductCards_in_Product_Coll_Ent', toProp: 'schema', fromProp: 'productCardShape' }, - //Observations - { toObj: 'mktp:Observations_Coll_Ent', toProp: 'schema', fromProp: 'observationShape' }, - //SVD - { toObj: 'mktp:SvdDaily_Coll_Ent_Cond', toProp: 'forDataset' }, - { toObj: 'mktp:SvdWeekly_Coll_Ent_Cond', toProp: 'forDataset' }, - { toObj: 'mktp:SvdMonthly_Coll_Ent_Cond', toProp: 'forDataset' }, - //SRD - { toObj: 'mktp:SrdDaily_Coll_Ent_Cond', toProp: 'forDataset' }, - { toObj: 'mktp:SrdWeekly_Coll_Ent_Cond', toProp: 'forDataset' }, - { toObj: 'mktp:SrdMonthly_Coll_Ent_Cond', toProp: 'forDataset' }, - ], }, + elements: [ + { + '@id': 'mktp:_fd8Sd', + '@type': 'aldkg:DialogButton', + options: { + style: { + display: 'flex', + flexDirection: 'row', + }, + }, + }, + { + '@id': 'mktp:_df7eds', + '@type': 'aldkg:TabControl', + // by this resultsScope TabControl could have read access to the results, selected by Query with @id='rm:ProjectViewClass_ArtifactFormats_Query' + resultsScope: 'mktp:Marketplaces_Coll', // bind to results data by query @id + options: { + title: 'Маркетплейсы', + style: { + margin: '0 0 0 42px', + display: 'flex', + flexDirection: 'row', + width: '200px', + }, + contentSize: true, + // by this connection TabControl could have read/write access to the property 'artifactFormat' in condition object with @id='rm:ProjectViewClass_Artifacts_Query_Shape0_Condition' + connections: [ + { toObj: 'mktp:Categories_Coll_Ent', toProp: 'schema', fromProp: 'categoryShape' }, + { + toObj: 'mktp:ProductCards_in_Category_Coll_Ent', + toProp: 'schema', + fromProp: 'productCardShape', + }, + // Product cards + { + toObj: 'mktp:ProductCards_in_Product_Coll_Ent', + toProp: 'schema', + fromProp: 'productCardShape', + }, + //Observations + { toObj: 'mktp:Observations_Coll_Ent', toProp: 'schema', fromProp: 'observationShape' }, + //SVD + { toObj: 'mktp:SvdDaily_Coll_Ent_Cond', toProp: 'forDataset' }, + { toObj: 'mktp:SvdWeekly_Coll_Ent_Cond', toProp: 'forDataset' }, + { toObj: 'mktp:SvdMonthly_Coll_Ent_Cond', toProp: 'forDataset' }, + //SRD + { toObj: 'mktp:SrdDaily_Coll_Ent_Cond', toProp: 'forDataset' }, + { toObj: 'mktp:SrdWeekly_Coll_Ent_Cond', toProp: 'forDataset' }, + { toObj: 'mktp:SrdMonthly_Coll_Ent_Cond', toProp: 'forDataset' }, + ], + }, + }, + ], }, { '@id': 'mktp:_934Jfg7', @@ -266,6 +303,26 @@ const viewKindsCats = [ { toObj: 'mktp:SrdMonthly_Coll_Ent_Cond', toProp: 'srdMonthlyHasProduct' }, ], draggable: true, + selectActions: [ + { + '@id': 'action1', + '@type': 'ldkg:addObjects', + title: 'Добавить объекты', + }, + { + '@id': 'action2', + '@type': 'ldkg:deleteObjects', + title: 'Удалить объекты', + }, + { + '@id': 'action3', + '@type': 'ldkg:addConectionToTarget', + title: 'Добавить в правую таблицу', + options: { + target: 'mktp:ProductCards_in_Product_Coll', + }, + }, + ], resizeableHeader: true, height: 'all-empty-space', style: { height: '100%' }, @@ -602,6 +659,18 @@ const viewKindsCats = [ '@type': 'aldkg:Array', resultsScope: 'mktp:ProductCards_in_Product_Coll', options: { + selectActions: [ + { + '@id': 'action1', + '@type': 'ldkg:addObjects', + title: 'Добавить объекты', + }, + { + '@id': 'action2', + '@type': 'ldkg:deleteObjects', + title: 'Удалить объекты', + }, + ], draggable: true, resizeableHeader: true, height: 'all-empty-space',