From 681341e3c680635a65359c9efdae7e76d3b80094 Mon Sep 17 00:00:00 2001 From: Artyom Date: Wed, 15 Sep 2021 12:45:25 +0300 Subject: [PATCH 1/3] [FIX control no-data rendering --- src/util/ContextToProps.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/src/util/ContextToProps.tsx b/src/util/ContextToProps.tsx index fdf2192..036f483 100644 --- a/src/util/ContextToProps.tsx +++ b/src/util/ContextToProps.tsx @@ -59,7 +59,6 @@ export const withStoreToControlProps = (Component: React.FC): }>(successValidation); const { form } = props; - const controlProps = mapStateToControlProps(props); const [id, collIri, collIriOverride, inCollPath, viewKindElement, viewDescrElement] = processViewKindOverride( props, @@ -69,12 +68,9 @@ export const withStoreToControlProps = (Component: React.FC): const coll = collIriOverride ? store.getColl(collIriOverride) : undefined; let collData = coll?.data; if (collData) collData = getSnapshot(collData); + const controlProps = mapStateToControlProps({ ...props, data: collData }); - if (!collData || collData.length === 0) { - return ; - } - - const data = collData[0]; + const data = collData.length !== 0 ? collData[0] : {}; const onValidate = (data: any) => { if (viewKindElement.options && Array.isArray(viewKindElement.options.validation)) { const validation = viewKindElement.options.validation; @@ -221,16 +217,17 @@ export const withStoreToCellProps = (Component: React.FC): React.FC => observer((props: any) => { const { data, onMeasureChange, height, uri, CKey, rowData, viewKindElement } = props; const path = viewKindElement.scope ? viewKindElement.scope.split('/').join('.') : null; - const controlProps = mapStateToControlProps(props); /*const { store } = useRootCtx(); const onSave = (data: any) => { let newData: any = {}; newData[CKey] = data; store.saveCellData(newData, uri, rowData['@id']); };*/ + const cellData = path ? get(data, path) : data; + const controlProps = mapStateToControlProps({ ...props, data: cellData }); return ( ): Rea return ; }); -const mapStateToControlProps = ({ id, schema, viewKindElement, viewKind, enabled }: ToControlProps) => { +const mapStateToControlProps = ({ id, schema, viewKindElement, viewKind, data }: ToControlProps & { data: any }) => { const pathSegments = id.split('/'); const path = pathSegments.join('.properties.'); const visible = checkProperty('visible', path, viewKindElement, viewKind); @@ -600,11 +597,12 @@ const mapStateToControlProps = ({ id, schema, viewKindElement, viewKind, enabled const labelDesc = createLabelDescriptionFrom(viewKindElement as any, schema); const label = labelDesc.show ? (labelDesc.text as string) : ''; const key = pathSegments[1]; + const enabled = data && (editable ?? true); return { description, label, visible, - enabled: editable === 'undefined' ? true : editable, + enabled, required, uiOptions, key, From 34f5878a1addf93e88904074cfcc0ae0474e3b8d Mon Sep 17 00:00:00 2001 From: Artyom Date: Wed, 22 Sep 2021 13:09:18 +0300 Subject: [PATCH 2/3] ADD FormWithUndefinedProperty and FormWithNullProperty stories --- stories/Form.stories.tsx | 48 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 46 insertions(+), 2 deletions(-) diff --git a/stories/Form.stories.tsx b/stories/Form.stories.tsx index 8e70f33..45a5e85 100644 --- a/stories/Form.stories.tsx +++ b/stories/Form.stories.tsx @@ -98,7 +98,7 @@ const viewDescrs = [ }, ]; -const additionalColls: CollState[] = [ +const createAdditionalColls = (viewKinds: any, colls: CollState[]): CollState[] => [ // ViewKinds Collection { constr: viewKindCollConstr, @@ -120,6 +120,7 @@ const additionalColls: CollState[] = [ // for viewDescrs.collConstrs (it loads lazily -- after the first access) }, }, + ...colls, ]; export default { @@ -134,7 +135,12 @@ const Template: Story = (args: any) => { const antdRenderers: RendererRegistryEntry[] = [...antdControlRenderers, ...antdLayoutRenderers]; const client = new SparqlClientImpl('https://rdf4j.agentlab.ru/rdf4j-server'); - const rootStore = createUiModelFromState('reqs2', client, rootModelInitialState, additionalColls); + const rootStore = createUiModelFromState( + 'reqs2', + client, + rootModelInitialState, + createAdditionalColls(args.viewKinds || viewKinds, args.colls || []), + ); const store: any = asReduxStore(rootStore); // eslint-disable-next-line @typescript-eslint/no-var-requires connectReduxDevtools(require('remotedev'), rootStore); @@ -151,3 +157,41 @@ const Template: Story = (args: any) => { export const RemoteData = Template.bind({}); RemoteData.args = {}; + +export const FormWithNullProperty = Template.bind({}); +FormWithNullProperty.args = { + colls: [ + { + constr: viewKinds[0].collsConstrs[0], + data: [ + { + creator: null, + assetFolder: null, + description: 'TestDescr', + }, + ], + opt: { + updPeriod: undefined, + lastSynced: moment.now(), + //resolveCollConstrs: false, // 'true' here (by default) triggers data loading from the server + // for viewDescrs.collConstrs (it loads lazily -- after the first access) + }, + }, + ], +}; + +export const FormWithUndefinedProperty = Template.bind({}); +FormWithUndefinedProperty.args = { + colls: [ + { + constr: viewKinds[0].collsConstrs[0], + data: [{}], + opt: { + updPeriod: undefined, + lastSynced: moment.now(), + //resolveCollConstrs: false, // 'true' here (by default) triggers data loading from the server + // for viewDescrs.collConstrs (it loads lazily -- after the first access) + }, + }, + ], +}; From c2d809b33cf736fd5dcabbb6db14fb407d3bd89f Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Wed, 22 Sep 2021 15:44:19 +0300 Subject: [PATCH 3/3] [refactor] GH-15 Story test data --- stories/Form.stories.tsx | 107 +++++++++++++++++++-------------------- 1 file changed, 52 insertions(+), 55 deletions(-) diff --git a/stories/Form.stories.tsx b/stories/Form.stories.tsx index 45a5e85..a56e82d 100644 --- a/stories/Form.stories.tsx +++ b/stories/Form.stories.tsx @@ -13,7 +13,7 @@ import { Meta, Story } from '@storybook/react'; import { Provider } from 'react-redux'; import { asReduxStore, connectReduxDevtools } from 'mst-middlewares'; -import { SparqlClientImpl, rootModelInitialState, CollState } from '@agentlab/sparql-jsld-client'; +import { SparqlClientImpl, rootModelInitialState, CollState, JsObject } from '@agentlab/sparql-jsld-client'; import { RendererRegistryEntry, @@ -98,30 +98,44 @@ const viewDescrs = [ }, ]; -const createAdditionalColls = (viewKinds: any, colls: CollState[]): CollState[] => [ - // ViewKinds Collection - { - constr: viewKindCollConstr, - data: viewKinds, - opt: { - updPeriod: undefined, - lastSynced: moment.now(), - //resolveCollConstrs: false, // disable data loading from the server for viewKinds.collConstrs +const createAdditionalColls = (viewKinds: any, data: JsObject[] | undefined): CollState[] => { + const additionalColls = [ + // ViewKinds Collection + { + constr: viewKindCollConstr, + data: viewKinds, + opt: { + updPeriod: undefined, + lastSynced: moment.now(), + //resolveCollConstrs: false, // disable data loading from the server for viewKinds.collConstrs + }, }, - }, - // ViewDescrs Collection - { - constr: viewDescrCollConstr, - data: viewDescrs, - opt: { - updPeriod: undefined, - lastSynced: moment.now(), - //resolveCollConstrs: false, // 'true' here (by default) triggers data loading from the server - // for viewDescrs.collConstrs (it loads lazily -- after the first access) + // ViewDescrs Collection + { + constr: viewDescrCollConstr, + data: viewDescrs, + opt: { + updPeriod: undefined, + lastSynced: moment.now(), + //resolveCollConstrs: false, // 'true' here (by default) triggers data loading from the server + // for viewDescrs.collConstrs (it loads lazily -- after the first access) + }, }, - }, - ...colls, -]; + ]; + if (data) { + additionalColls.push({ + constr: viewKinds[0].collsConstrs[0], + data, + opt: { + updPeriod: undefined, + lastSynced: moment.now(), + //resolveCollConstrs: false, // 'true' here (by default) triggers data loading from the server + // for viewDescrs.collConstrs (it loads lazily -- after the first access) + }, + }); + } + return additionalColls; +}; export default { title: 'Form/ArtifactForm', @@ -139,7 +153,7 @@ const Template: Story = (args: any) => { 'reqs2', client, rootModelInitialState, - createAdditionalColls(args.viewKinds || viewKinds, args.colls || []), + createAdditionalColls(args.viewKinds || viewKinds, args.data), ); const store: any = asReduxStore(rootStore); // eslint-disable-next-line @typescript-eslint/no-var-requires @@ -158,40 +172,23 @@ const Template: Story = (args: any) => { export const RemoteData = Template.bind({}); RemoteData.args = {}; -export const FormWithNullProperty = Template.bind({}); -FormWithNullProperty.args = { - colls: [ +export const ObjectWithNullProperty = Template.bind({}); +ObjectWithNullProperty.args = { + data: [ { - constr: viewKinds[0].collsConstrs[0], - data: [ - { - creator: null, - assetFolder: null, - description: 'TestDescr', - }, - ], - opt: { - updPeriod: undefined, - lastSynced: moment.now(), - //resolveCollConstrs: false, // 'true' here (by default) triggers data loading from the server - // for viewDescrs.collConstrs (it loads lazily -- after the first access) - }, + creator: null, + assetFolder: null, + description: 'TestDescr', }, ], }; -export const FormWithUndefinedProperty = Template.bind({}); -FormWithUndefinedProperty.args = { - colls: [ - { - constr: viewKinds[0].collsConstrs[0], - data: [{}], - opt: { - updPeriod: undefined, - lastSynced: moment.now(), - //resolveCollConstrs: false, // 'true' here (by default) triggers data loading from the server - // for viewDescrs.collConstrs (it loads lazily -- after the first access) - }, - }, - ], +export const EmptyObject = Template.bind({}); +EmptyObject.args = { + data: [{}], +}; + +export const NoObject = Template.bind({}); +NoObject.args = { + data: [{}], };