Skip to content

Commit

Permalink
[add] DialogButton initial impl
Browse files Browse the repository at this point in the history
  • Loading branch information
amivanoff committed Nov 17, 2021
1 parent 326887a commit b4cf423
Show file tree
Hide file tree
Showing 3 changed files with 270 additions and 24 deletions.
176 changes: 176 additions & 0 deletions src/dialog/DialogButtonRenderer.tsx
Original file line number Diff line number Diff line change
@@ -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<any> = (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: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX als: <https://www.1688.com/schema#>
INSERT DATA {
GRAPH <https://mktp.agentlab.ru/data/ali/hierarchy> {
<${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: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX mktp: <https://mktp.agentlab.ru/onto/mktp#>
INSERT DATA {
GRAPH <https://mktp.agentlab.ru/data/mktp> {
<${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 (
<div style={{ display: 'flex', flexDirection: 'row', margin: '10px 52px 0 0' }}>
<Button type='primary' onClick={showModal}>
Добавить запрос
</Button>
<div style={{ display: 'block', margin: '0' }}>
<Modal
title='Добавить запрос для мониторинга 1688'
visible={isModalVisible}
onOk={handleOk}
onCancel={handleCancel}>
<Form
form={formRef}
name='basic'
labelCol={{ xs: { span: 24 }, sm: { span: 8 } }}
wrapperCol={{ xs: { span: 24 }, sm: { span: 14 } }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
preserve={false}>
<Form.Item
label='Название запроса'
tooltip='Название, под которым результаты будут отображаться в дереве категорий товара 1688'
initialValue={'Запрос 1'}
name='categryName'
rules={[{ required: true, message: 'Введите название запроса' }]}>
<Input />
</Form.Item>

<Divider plain>Параметры товара</Divider>

<Form.Item
label='Цена товара, юань'
tooltip='Минимальная и максимальная цены товара в юанях'
style={{ marginBottom: 0 }}>
<Form.Item
name='minPrice'
rules={[{ required: true, message: 'Введите минимальную цену товара!' }]}
style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}
initialValue={0}>
<InputNumber style={{ width: '100%' }} />
</Form.Item>
<span style={{ display: 'inline-block', width: '20px', lineHeight: '32px', textAlign: 'center' }}>-</span>
<Form.Item
name='maxPrice'
initialValue={250}
rules={[{ required: true, message: 'Введите максимальную цену товара!' }]}
style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}>
<InputNumber style={{ width: '100%' }} />
</Form.Item>
</Form.Item>

<Form.Item
label='Объем продаж на 30 дней'
tooltip='Минимальный и максимальный объем продаж товара в шт или кв. метрах'
style={{ marginBottom: 0 }}>
<Form.Item
name='minVol'
rules={[{ required: true, message: 'Введите минимальный объем продаж!' }]}
style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}
initialValue={10000}>
<InputNumber style={{ width: '100%' }} />
</Form.Item>
<span style={{ display: 'inline-block', width: '20px', lineHeight: '32px', textAlign: 'center' }}>-</span>
<Form.Item
name='maxVol'
initialValue={100000}
rules={[{ required: true, message: 'Введите максимальный объем продаж!' }]}
style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}>
<InputNumber style={{ width: '100%' }} />
</Form.Item>
</Form.Item>

<Form.Item
label='Макс. кол-во карточек'
tooltip='Ограничение на максимальное число карточек на обработку'
name='limit'
initialValue={30}
rules={[{ required: true, message: 'Введите максимальное количество карточек!' }]}>
<InputNumber style={{ width: '100%' }} />
</Form.Item>

<Form.Item
label='Название товара'
name='prodTitle'
tooltip='Фрагмент строки в названии для поиска на английском и/или китайском'>
<Input />
</Form.Item>
</Form>
</Modal>
</div>
</div>
);
};

export const antdDialogButtonControlTester: RankedTester = rankWith(2, uiTypeIs('aldkg:DialogButton'));
1 change: 1 addition & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
117 changes: 93 additions & 24 deletions stories/TreeTableChartMktpCards.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 || {};
Expand All @@ -48,6 +49,7 @@ const Template: Story = ({ additionalColls, viewDescrId, viewDescrCollId }: any)
...antdDataControlRenderers,
...tableRenderers,
...chartsRenderers,
{ tester: antdDialogButtonControlTester, renderer: DialogButtonRenderer },
];

const client = new SparqlClientImpl(
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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%' },
Expand Down Expand Up @@ -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',
Expand Down

0 comments on commit b4cf423

Please sign in to comment.