diff --git a/src/DispatchCell.tsx b/src/DispatchCell.tsx index 8250082..0f9eaca 100644 --- a/src/DispatchCell.tsx +++ b/src/DispatchCell.tsx @@ -19,21 +19,7 @@ import { MstContext } from './MstContext'; * Dispatch renderer component for cells. */ export const DispatchCell: React.FC = React.memo( - ({ - data, - uischema, - onMeasureChange, - uri, - schema, - viewElement, - view, - enabled, - id, - parent, - CKey, - rowData, - ...rest - }) => { + ({ data, onMeasureChange, uri, schema, viewElement, view, enabled, id, parent, CKey, rowData, ...rest }) => { const { cells } = useContext(MstContext); const renderer = maxBy(cells, (r) => r.tester(viewElement, schema)); if (renderer === undefined || renderer.tester(viewElement, schema) === -1) { @@ -51,7 +37,6 @@ export const DispatchCell: React.FC = React.memo( data={data} rowData={rowData} onMeasureChange={onMeasureChange} - uischema={uischema} schema={schema} viewElement={viewElement} uri={uri} diff --git a/src/Form.tsx b/src/Form.tsx index 8cebe37..59e3d08 100644 --- a/src/Form.tsx +++ b/src/Form.tsx @@ -19,7 +19,7 @@ import { JsonSchema7 } from './models/jsonSchema7'; import { MstContext } from './MstContext'; import { UnknownRenderer } from './UnknownRenderer'; import { RankedTester } from './testers'; -import { UISchema, View, ViewElement } from './models/uischema'; +import { View, ViewElement } from './models/uischema'; export interface ControlComponent { data: any; @@ -52,13 +52,13 @@ export interface FormsCell { cell: React.FC; } export interface InitStateProps { - uischema: UISchema; viewElement: ViewElement; view: View; } export interface FormsInitStateProps { - viewIri: string; - viewsResultsScope: string; + viewDescrCollId: string; + viewDescrId: string; + viewKindCollId: string; } export interface FormsDispatchProps extends InitStateProps { enabled?: boolean; @@ -66,8 +66,8 @@ export interface FormsDispatchProps extends InitStateProps { form?: string; } export interface FormDispatchProps extends FormsDispatchProps { - schema: any; - uri: string; + schema?: any; + uri?: string; } export interface RenderProps extends FormsDispatchProps { schema: JsonSchema7; @@ -86,12 +86,31 @@ export interface DispatchCellProps extends RenderProps { [key: string]: any; } -const FormDispatch: React.FC = observer( - ({ uischema, schema, uri, viewElement, view, enabled, parent, form }) => { - const { renderers } = useContext(MstContext); +export const FormsDispatch: React.FC = observer( + ({ view, viewElement, parent, form, uri, enabled }: any) => { + const { store, renderers } = useContext(MstContext); + + const shapes = viewElement.resultsScope ? viewElement.resultsScope.split('/') : []; + const iri = shapes.length === 2 ? shapes[0] : viewElement.resultsScope; + let schema: any; + if (iri) { + const coll = store.getColl(iri); + schema = coll?.collConstr.entConstrs[0]?.schemaJs; + //if (store.schemas[iri]) { + // schema = store.schemas[iri]; + //} else { + // if (iri !== 'client:views' && iri !== 'rm:viewPick' && iri !== 'data:Tabs') { + //store.getSchemaByUri(iri); + // return ; + // } + //} + if (!schema) return ; + } + schema = shapes.length === 2 ? schema.properties[shapes[1]] : schema; + const id = uri ? /*createId(uri)*/ uri : ''; const renderer = maxBy(renderers, (r) => r.tester(viewElement, schema)); - const isModal = viewElement.options && viewElement.options.modal; + //const isModal = viewElement.options && viewElement.options.modal; if (renderer === undefined || renderer.tester(viewElement, schema) === -1) { return ; } else { @@ -99,7 +118,6 @@ const FormDispatch: React.FC = observer( return ( {}}> = observer( }, ); -const withStoreToFormDispatch = (Component: any): any => - observer(({ ...props }: any) => { - const { view, viewElement, parent, form, uischema } = props; - const { store } = useContext(MstContext); - - const shapes = viewElement.resultsScope ? viewElement.resultsScope.split('/') : []; - const iri = shapes.length === 2 ? shapes[0] : viewElement.resultsScope; - let schema: any; - if (iri) { - const coll = store.getColl(iri); - schema = coll?.collConstr.entConstrs[0]?.schemaJs; - //if (store.schemas[iri]) { - // schema = store.schemas[iri]; - //} else { - // if (iri !== 'client:views' && iri !== 'rm:viewPick' && iri !== 'data:Tabs') { - //store.getSchemaByUri(iri); - // return ; - // } - //} - if (!schema) return ; - } - const s = shapes.length === 2 ? schema.properties[shapes[1]] : schema; - return ( - - ); - }); -export const FormsDispatch = withStoreToFormDispatch(FormDispatch); - export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) { return (
@@ -154,23 +144,45 @@ export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) { export const Form: React.FC = observer((props) => { const { store } = useContext(MstContext); - console.log('inForm', { store }); - if (Object.keys(store.ns.currentJs).length < 5) { + if (!store) { + console.log('!store', store); + return ; + } + if (Object.keys(store.ns.currentJs).length < 6) { + console.log('!ns'); + return ; + } + + const { viewDescrId, viewDescrCollId, viewKindCollId } = props; + + const collWithViewDescrsObs = store.getColl(viewDescrCollId); + if (!collWithViewDescrsObs) { + console.log('!collWithViewDescrsObs', viewDescrCollId); + return ; + } + + const viewDescrObs = collWithViewDescrsObs?.dataByIri(viewDescrId); + if (!viewDescrObs) { + console.log('!viewDescrObs', viewDescrId); return ; } - const { viewIri, viewsResultsScope } = props; - const coll = store.getColl(viewsResultsScope); - //const collSS = getSnapshot(coll); - const views = coll?.data; - const viewObs: any = coll?.dataByIri(viewIri); - if (!viewObs) { + const collWithViewKindsObs = store.getColl(viewKindCollId); + if (!collWithViewKindsObs) { + console.log('!collWithViewKindsObs', viewKindCollId); + return ; + } + const viewKindId = viewDescrObs.viewKind; + const viewKindObs = collWithViewKindsObs.dataByIri(viewKindId); + if (!viewKindObs) { + console.log('!viewKindObs', viewKindId); return ; } - const view = getSnapshot(viewObs); + const viewKind: any = getSnapshot(viewKindObs); + const view: any = getSnapshot(viewDescrObs); return ( {}}> - + ); }); diff --git a/src/antd-controls/AntdSelect.tsx b/src/antd-controls/AntdSelect.tsx index 6536ab8..975629a 100644 --- a/src/antd-controls/AntdSelect.tsx +++ b/src/antd-controls/AntdSelect.tsx @@ -14,8 +14,8 @@ import { Select } from 'antd'; import { areEqual } from '../util/ContextToProps'; export const AntdSelect = React.memo((props: any /*EnumCellProps & WithClassname*/) => { - const { data, className, id, enabled, uischema, path, handleChange, options = [], config } = props; - const appliedUiSchemaOptions = merge({}, config, uischema.options); + const { data, className, id, enabled, path, handleChange, options = [], config } = props; + const appliedUiSchemaOptions = merge({}, config); console.log('OPTIONS', options); return ( diff --git a/src/cells/AntdCellCardLayout.tsx b/src/cells/AntdCellCardLayout.tsx index 23ef3a9..c6d768b 100644 --- a/src/cells/AntdCellCardLayout.tsx +++ b/src/cells/AntdCellCardLayout.tsx @@ -18,7 +18,7 @@ import { DispatchCell } from '../DispatchCell'; import './cell.css'; export const AntdCellCardLayout = (props: any) => { - const { viewElement, view, schema, uischema, data, id } = props; + const { viewElement, view, schema, data, id } = props; const createCardChilds = () => viewElement.elements ? viewElement.elements.map((e: ViewElement, idx: number) => { @@ -32,7 +32,6 @@ export const AntdCellCardLayout = (props: any) => { rowData={data} schema={newSchema || schema} viewElement={e} - uischema={uischema} /> ); }) diff --git a/src/cells/AntdCellHorizontalLayout.tsx b/src/cells/AntdCellHorizontalLayout.tsx index df63382..1582edd 100644 --- a/src/cells/AntdCellHorizontalLayout.tsx +++ b/src/cells/AntdCellHorizontalLayout.tsx @@ -18,18 +18,11 @@ import { get } from 'lodash-es'; import { Idx } from '../util/layout'; -export const AntdHorizontalLayoutRenderer: React.FC = ({ - uischema, - viewElement, - view, - data, - schema, -}) => { +export const AntdHorizontalLayoutRenderer: React.FC = ({ viewElement, view, data, schema }) => { //const layout = viewElement as Layout; const Render: React.FC = ({ idx, schema, - uischema, viewElement, view, data, @@ -52,7 +45,6 @@ export const AntdHorizontalLayoutRenderer: React.FC = ({ view={view} rowData={data} schema={newSchema || schema} - uischema={uischema} enabled={enabled} parent={parent} form={form} @@ -66,15 +58,7 @@ export const AntdHorizontalLayoutRenderer: React.FC = ({ return ( {(viewElement.elements || []).map((e: ViewElement, idx: number) => ( - + ))} ); diff --git a/src/data-controls/DataControl.tsx b/src/data-controls/DataControl.tsx index 24a379e..7cb2c5e 100644 --- a/src/data-controls/DataControl.tsx +++ b/src/data-controls/DataControl.tsx @@ -28,7 +28,6 @@ export const AntdDataLayout: React.FC = (props) => { handleChange = () => {}, dataSource, view, - uischema, schema, editing, getData, @@ -53,7 +52,6 @@ export const AntdDataLayout: React.FC = (props) => { onDnD={onDnD} viewElement={viewElement} view={view} - uischema={uischema} onCreateFolder={onCreateFolder} onDeleteFolder={onDeleteFolder} onRename={onRename} diff --git a/src/data-controls/GridRenderer.tsx b/src/data-controls/GridRenderer.tsx index f60c5db..92b700b 100644 --- a/src/data-controls/GridRenderer.tsx +++ b/src/data-controls/GridRenderer.tsx @@ -20,9 +20,8 @@ const divStyle: React.CSSProperties = { }; export const GridRenderer: React.FC = (props) => { - const { child, onSelect, viewElement, uischema, view, schema } = props; + const { child, onSelect, viewElement, view, schema } = props; const grid = viewElement?.options?.grid || { gutter: 16, column: 4 }; - console.log('UISCEMA', uischema); const template = viewElement?.options?.elementTemplate || null; const createCell = (data: any, id: string | number) => template ? ( @@ -35,7 +34,6 @@ export const GridRenderer: React.FC = (props) => { rowData={data} schema={schema} viewElement={e} - uischema={uischema} /> )) ) : ( diff --git a/src/data-controls/TableRenderer.tsx b/src/data-controls/TableRenderer.tsx index cfc7472..00f9bee 100644 --- a/src/data-controls/TableRenderer.tsx +++ b/src/data-controls/TableRenderer.tsx @@ -22,7 +22,7 @@ const divStyle: React.CSSProperties = { export const TableRenderer: React.FC = React.memo( (props) => { - const { schema, enabled, child, onSelect, viewElement, uischema, view, editing } = props; + const { schema, enabled, child, onSelect, viewElement, view, editing } = props; const [selected, setSelected] = useState(child[0]); const [cacheSelect, setCacheSelect] = useState(); const [dataSource, setDataSource] = useState(child); @@ -82,7 +82,6 @@ export const TableRenderer: React.FC = React.memo(
diff --git a/src/data-controls/TreeRenderer.tsx b/src/data-controls/TreeRenderer.tsx index 16c9c89..1c6680b 100644 --- a/src/data-controls/TreeRenderer.tsx +++ b/src/data-controls/TreeRenderer.tsx @@ -30,7 +30,6 @@ export const TreeRenderer: React.FC = (props) => { onSelect, viewElement, dataSource, - uischema, view, editing, onDnD, diff --git a/src/layouts/AntdFormLayout.tsx b/src/layouts/AntdFormLayout.tsx index 4b52d0a..da8524c 100644 --- a/src/layouts/AntdFormLayout.tsx +++ b/src/layouts/AntdFormLayout.tsx @@ -74,7 +74,6 @@ export const LogicalButton: React.FC = observer(({ form, onCancel, onS }); export const AntdFormLayout: React.FC = ({ - uischema, viewElement, view, enabled, @@ -98,7 +97,6 @@ export const AntdFormLayout: React.FC = ({
= ({ - uischema, viewElement, view, enabled, @@ -27,20 +26,13 @@ export const AntdHorizontalLayoutRenderer: React.FC = ({ parent, }) => { //const layout = viewElement as Layout; - const Render: React.FC = ({ idx, uischema, viewElement, view, enabled, parent, form }) => { + const Render: React.FC = ({ idx, viewElement, view, enabled, parent, form }) => { const options = viewElement.options || {}; const style: any = options.style; const span = options.contentSize || !viewElement.elements ? undefined : Math.ceil(24 / viewElement.elements.length); return ( - + ); }; @@ -49,7 +41,7 @@ export const AntdHorizontalLayoutRenderer: React.FC = ({ if (viewElement.options && viewElement.options.width === 'all-empty-space') rowStyle.width = '100%'; return ( - {renderLayoutElements({ uischema, viewElement, view, enabled, Render, parent })} + {renderLayoutElements({ viewElement, view, enabled, Render, parent })} ); }; diff --git a/src/layouts/AntdVerticalLayout.tsx b/src/layouts/AntdVerticalLayout.tsx index 8c8b70f..5e9ff35 100644 --- a/src/layouts/AntdVerticalLayout.tsx +++ b/src/layouts/AntdVerticalLayout.tsx @@ -19,7 +19,6 @@ import { Idx } from '../util/layout'; import { LayoutComponent } from './LayoutComponent'; export const AntdVerticalLayoutRenderer: React.FC = ({ - uischema, viewElement, view, enabled, @@ -27,7 +26,7 @@ export const AntdVerticalLayoutRenderer: React.FC = ({ parent, form, }) => { - const Render: React.FC = ({ idx, uischema, viewElement, view, enabled, parent }) => { + const Render: React.FC = ({ idx, viewElement, view, enabled, parent }) => { const options = viewElement.options || {}; const style: any = options.style; return ( @@ -37,14 +36,7 @@ export const AntdVerticalLayoutRenderer: React.FC = ({ flex: viewElement.options && viewElement.options.height === 'all-empty-space' ? '1 1 auto' : '', }}> - + ); @@ -52,7 +44,7 @@ export const AntdVerticalLayoutRenderer: React.FC = ({ return (
- {renderLayoutElements({ uischema, viewElement, view, enabled, Render, parent })} + {renderLayoutElements({ viewElement, view, enabled, Render, parent })}
); diff --git a/src/layouts/SplitPaneLayout.tsx b/src/layouts/SplitPaneLayout.tsx index 0ba1127..e789719 100644 --- a/src/layouts/SplitPaneLayout.tsx +++ b/src/layouts/SplitPaneLayout.tsx @@ -26,7 +26,7 @@ const divStyle: React.CSSProperties = { margin: '1px', }; -const renderSplitElements = ({ viewElement, uischema, view, enabled, Render, parent, form }: RenderLayoutProps) => { +const renderSplitElements = ({ viewElement, view, enabled, Render, parent, form }: RenderLayoutProps) => { const elements = viewElement.elements; const defaultSize = viewElement.options && viewElement.options.defaultSize; const id = viewElement['@id']; @@ -42,14 +42,7 @@ const renderSplitElements = ({ viewElement, uischema, view, enabled, Render, par const style = childView.options && childView.options.style; res.push( - + , ); } @@ -62,7 +55,7 @@ const renderSplitElements = ({ viewElement, uischema, view, enabled, Render, par return (
- +
); @@ -72,26 +65,19 @@ const renderSplitElements = ({ viewElement, uischema, view, enabled, Render, par ); }; -export const SplitPaneLayoutRenderer: React.FC = ({ - uischema, - viewElement, - view, - enabled, - visible, - parent, -}) => { +export const SplitPaneLayoutRenderer: React.FC = ({ viewElement, view, enabled, visible, parent }) => { //const layout = viewElement as Layout; - const Render: React.FC = ({ idx, uischema, viewElement, view, enabled, parent }) => { + const Render: React.FC = ({ idx, viewElement, view, enabled, parent }) => { return (
- +
); }; return ( - {renderSplitElements({ uischema, viewElement, view, enabled, Render, parent })} + {renderSplitElements({ viewElement, view, enabled, Render, parent })} ); diff --git a/src/layouts/TabsLayout.tsx b/src/layouts/TabsLayout.tsx index 0674b6e..0d3ee5d 100644 --- a/src/layouts/TabsLayout.tsx +++ b/src/layouts/TabsLayout.tsx @@ -15,20 +15,14 @@ import { rankWith, RankedTester, uiTypeIs } from '../testers'; import { withLayoutProps } from '../util/ContextToProps'; export const TabsLayout: React.FC = (props) => { - const { enabled, onSelect = () => {}, uischema, viewElement, view } = props; + const { enabled, onSelect = () => {}, viewElement, view } = props; const elements = viewElement.elements; const viewTabs = elements ? elements.map((e: any, index: number) => { const title = e.options && e.options.title; return ( - + ); }) diff --git a/src/models/uischema.ts b/src/models/uischema.ts index 83d639f..40b123a 100644 --- a/src/models/uischema.ts +++ b/src/models/uischema.ts @@ -7,30 +7,16 @@ * * SPDX-License-Identifier: GPL-3.0-only ********************************************************************************/ -export interface UISchemaElement { - type: string; - editable?: boolean; - visible?: boolean; - properties?: { - [key: string]: UISchemaElement; - }; -} - -export interface UISchema { - [key: string]: UISchemaElement; -} - -export interface ViewElement extends UISchemaElement { - //customReq?: any; - order?: string[]; - properties?: { - [key: string]: ViewElement; - }; +export interface ViewElement { '@id': string; '@type': string; title?: string; description?: string; - queries?: any[]; + viewKind?: string; + + type: string; + //order?: string[]; + //queries?: any[]; scope?: string; resultsScope?: string; options?: { diff --git a/src/stores/ViewCollConstrs.ts b/src/stores/ViewCollConstrs.ts index fe98988..b238d43 100644 --- a/src/stores/ViewCollConstrs.ts +++ b/src/stores/ViewCollConstrs.ts @@ -8,11 +8,11 @@ * SPDX-License-Identifier: GPL-3.0-only ********************************************************************************/ export const viewDescrCollConstr = { - '@id': 'rm:Views_Coll', + '@id': 'aldkg:Views_Coll', entConstrs: [ { - '@id': 'rm:Views_EntConstr0', - schema: 'rm:ViewShape', + '@id': 'aldkg:Views_EntConstr0', + schema: 'aldkg:ViewShape', }, ], }; diff --git a/src/stores/ViewDescr.ts b/src/stores/ViewDescr.ts index 3d85a0d..fd83b37 100644 --- a/src/stores/ViewDescr.ts +++ b/src/stores/ViewDescr.ts @@ -10,14 +10,22 @@ import { reaction } from 'mobx'; import { getParent, getRoot, IAnyModelType, IAnyStateTreeNode, SnapshotIn, types } from 'mobx-state-tree'; -import { arrDiff, CollConstr, JsObject } from '@agentlab/sparql-jsld-client'; +import { + arrDiff, + CollConstr, + CollState, + JsObject, + SparqlClient, + registerMstSchema, + createModelFromState, +} from '@agentlab/sparql-jsld-client'; export const ViewElement = types.model('ViewElement', { '@id': types.maybe(types.string), // JSON-LD object id of a view '@type': types.maybe(types.string), // JSON-LD class id of a View title: types.maybe(types.string), description: types.maybe(types.string), - viewKind: types.maybe(types.string), + //viewKind: types.maybe(types.string), type: types.string, scope: types.maybe(types.string), @@ -28,6 +36,64 @@ export const ViewElement = types.model('ViewElement', { elements: types.maybe(types.array(types.late((): IAnyModelType => ViewElement))), }); +/** + * View Kind, which could be persisted in DB + */ +export const ViewKind = types + .model('ViewKind', { + '@id': types.identifier, // JSON-LD object id of a view + '@type': types.string, // JSON-LD class id of a View + + title: types.maybe(types.string), // mandatory title + description: types.maybe(types.string), + + type: types.string, + scope: types.maybe(types.string), + resultsScope: types.maybe(types.string), + options: types.maybe(types.frozen()), + + // Container-specific (e.g. Layout, type: 'xxxLayout') + elements: types.array(ViewElement), + + collsConstrs: types.array(CollConstr), // former 'queries' + }) + .actions((self) => { + const rep: IAnyStateTreeNode = getRoot(self); + const coll: IAnyStateTreeNode = getParent(self, 2); + let disp: any; + return { + afterAttach() { + console.log('ViewKind afterAttach, @id=', self['@id']); + if (coll.resolveCollConstrs) { + disp = reaction( + () => self.collsConstrs, + (newArr: any[], oldArr: any[]) => { + console.log('ViewKind reaction, add coll ref, @id=', self['@id']); + const { deleted, added } = arrDiff(newArr, oldArr); + console.log('ViewKind reaction, add coll ref, {deleted,added}=', { deleted, added }); + deleted.forEach((e: any) => rep.colls.delete(e['@id'])); + added.forEach((e: any) => rep.addCollByConstrRef(e)); + }, + { fireImmediately: true }, + ); + } + }, + beforeDetach() { + console.log('ViewKind beforeDetach, @id=', self['@id']); + if (coll.resolveCollConstrs) { + if (disp) disp(); + self.collsConstrs.forEach((e) => rep.colls.delete(e['@id'])); + } + }, + setCollConstrs(collsConstrs: any[]) { + const ccso = collsConstrs.map((cc) => CollConstr.create(cc)); + self.collsConstrs.push(...ccso); + }, + }; + }); + +export type IViewKindSnapshotIn = SnapshotIn; + /** * View Description, which could be persisted in DB */ @@ -86,3 +152,14 @@ export const ViewDescr = types }); export type IViewDescrSnapshotIn = SnapshotIn; + +export const createUiModelFromState = ( + repId: string, + client: SparqlClient, + initialState: any, + additionalColls: CollState[] | undefined = undefined, +): any => { + registerMstSchema('aldkg:ViewKind', ViewKind); + registerMstSchema('aldkg:ViewDescr', ViewDescr); + return createModelFromState(repId, client, initialState, additionalColls); +}; diff --git a/src/stores/ViewShapeSchema.ts b/src/stores/ViewShapeSchema.ts index 376e181..a738a81 100644 --- a/src/stores/ViewShapeSchema.ts +++ b/src/stores/ViewShapeSchema.ts @@ -11,7 +11,7 @@ import { JSONSchema6forRdf } from '@agentlab/sparql-jsld-client'; export const ViewShapeSchema: JSONSchema6forRdf = { $schema: 'http://json-schema.org/draft-07/schema#', - '@id': 'rm:ViewShape', + '@id': 'aldkg:ViewShape', '@type': 'sh:NodeShape', title: 'View Shape', description: 'Artifact Shape', @@ -37,7 +37,7 @@ export const ViewShapeSchema: JSONSchema6forRdf = { export const ViewKindShapeSchema: JSONSchema6forRdf = { $schema: 'http://json-schema.org/draft-07/schema#', - '@id': 'rm:ViewShape', + '@id': 'aldkg:ViewShape', '@type': 'sh:NodeShape', title: 'View Shape', description: 'Artifact Shape', diff --git a/src/testers.ts b/src/testers.ts index 313d2c1..9cb4b88 100644 --- a/src/testers.ts +++ b/src/testers.ts @@ -9,7 +9,7 @@ ********************************************************************************/ import { find, includes, isArray, isEmpty } from 'lodash-es'; import { JsonSchema7 } from './models/jsonSchema7'; -import { UISchemaElement, ViewElement } from './models/uischema'; +import { ViewElement } from './models/uischema'; /* eslint-disable @typescript-eslint/naming-convention */ @@ -68,8 +68,8 @@ export const rankWith = */ export const uiTypeIs = (expected: string): Tester => - (uischema: UISchemaElement): boolean => - !isEmpty(uischema) && uischema.type === expected; + (viewElement: ViewElement): boolean => + !isEmpty(viewElement) && viewElement.type === expected; /** * Checks whether the given UI schema has an option with the given @@ -81,12 +81,12 @@ export const uiTypeIs = */ export const optionIs = (optionName: string, optionValue: any): Tester => - (uischema: UISchemaElement): boolean => { - if (isEmpty(uischema)) { + (viewElement: ViewElement): boolean => { + if (isEmpty(viewElement)) { return false; } - const options = (uischema as any).options; + const options = (viewElement as any).options; return !isEmpty(options) && options[optionName] === optionValue; }; diff --git a/src/util/AntdModal.tsx b/src/util/AntdModal.tsx index 397a6ae..1747f04 100644 --- a/src/util/AntdModal.tsx +++ b/src/util/AntdModal.tsx @@ -15,7 +15,7 @@ import { SaveReqDialog } from './OnSaveDialog'; import { MstContext } from '../MstContext'; export const AntdModal: React.FC = observer( - ({ id, uischema, schema, viewElement, enabled, view, cells, childrenId, Render }) => { + ({ id, schema, viewElement, enabled, view, cells, childrenId, Render }) => { const [visible, setVisible] = useState(false); const { store } = useContext(MstContext); @@ -42,7 +42,6 @@ export const AntdModal: React.FC = observer( width={1200} okText='Сохранить'> ): ); }); export const withStoreToFormProps = (Component: React.FC): React.FC => - observer(({ uischema, viewElement, view, enabled, parent, form }) => { + observer(({ viewElement, view, enabled, parent, form }) => { if (!view['@id']) { return null; } const title = viewElement.options ? viewElement.options.title : ''; const id = viewElement['@id']; - const enabledLayout = enabled && checkProperty('editable', id, uischema, viewElement, view); - const visible = checkProperty('visible', id, uischema, viewElement, view); + const enabledLayout = enabled && checkProperty('editable', id, viewElement, view); + const visible = checkProperty('visible', id, viewElement, view); const { store } = useContext(MstContext); return ( ): React.FC observer(({ ...props }: any) => { - const { uischema, viewElement, view } = props; + const { viewElement, view } = props; const { store } = useContext(MstContext); const scope = viewElement.resultsScope; if (!store.getSelectedDataJs(scope)) { return ; } //const id = store.getSelectedDataJs(scope).type; - return ; + return ; }); export const withStoreToViewProps = (Component: any): any => observer(({ ...props }: any) => { - const { uischema, view, viewElement, parent } = props; + const { view, viewElement, parent } = props; const { store } = useContext(MstContext); const scope = viewElement.resultsScope; const coll = store.getColl(scope); @@ -178,7 +174,6 @@ export const withStoreToViewProps = (Component: any): any => return ( store.setEditing(viewElement.resultsScope, state)} @@ -366,7 +361,7 @@ export const withStoreToTabProps = (Component: any): any => export const withStoreToMenuProps = (Component: any): any => observer(({ ...props }: any) => { - const { schema, uischema, viewElement, view, parent } = props; + const { schema, viewElement, view, parent } = props; const { store } = useContext(MstContext); //if (parent && viewElement.resultsScope && !store.saveLogicTree[viewElement.resultsScope]) { // store.setSaveLogic(parent, viewElement.resultsScope); @@ -387,7 +382,6 @@ export const withStoreToMenuProps = (Component: any): any => modals={viewElement.elements ? viewElement.elements.filter((e: any) => e.options && e.options.modal) : []} schema={schema} view={view} - uischema={uischema} uri={scope} tabs={data} handleChange={(data: JsObject) => store.setSelectedData(scope, data)} @@ -399,10 +393,10 @@ export const withStoreToMenuProps = (Component: any): any => export const withStoreToCollapseProps = (Component: any): any => observer(({ ...props }: any) => { - const { uischema, viewElement, view } = props; + const { viewElement, view } = props; const options = viewElement.options || {}; - return ; + return ; }); export const withStoreToArrayProps = (Component: any): any => @@ -460,17 +454,16 @@ export const withStoreToArrayProps = (Component: any): any => }); export const withLayoutProps = (Component: React.FC): React.FC => - observer(({ uischema, viewElement, view, enabled, form, parent }) => { + observer(({ viewElement, view, enabled, form, parent }) => { const id = viewElement['@id'] || ''; - const enabledLayout = enabled && checkProperty('editable', id, uischema, viewElement, view); - const visible = checkProperty('visible', id, uischema, viewElement, view); + const enabledLayout = enabled && checkProperty('editable', id, viewElement, view); + const visible = checkProperty('visible', id, viewElement, view); const { store } = useContext(MstContext); if (viewElement.options && viewElement.options.connections) { viewElement.options.connections.forEach((e: any) => store.setSaveLogic(e.from, e.to)); } return ( ): React.FC< }); export const withStoreToSaveButtonProps = (Component: React.FC): React.FC => - observer(({ uischema, viewElement, view, enabled, parent }) => { + observer(({ viewElement, view, enabled, parent }) => { const { store } = useContext(MstContext); if (parent && viewElement.resultsScope && !store.saveLogicTree[viewElement.resultsScope]) { store.setSaveLogic(parent, viewElement.resultsScope); } - const key = (viewElement as Control).resultsScope; + const key = viewElement.resultsScope; return ( ): Rea return ; }); -const mapStateToControlProps = ({ id, uischema, schema, viewElement, view, enabled }: ToControlProps) => { +const mapStateToControlProps = ({ id, schema, viewElement, view, enabled }: ToControlProps) => { const pathSegments = id.split('/'); const path = pathSegments.join('.properties.'); - const visible = checkProperty('visible', path, uischema, viewElement, view); + const visible = checkProperty('visible', path, viewElement, view); const editable = viewElement.options && 'editable' in viewElement.options ? viewElement.options.editable : true; const required = true; const uiOptions = viewElement.options; @@ -533,13 +526,10 @@ const mapStateToControlProps = ({ id, uischema, schema, viewElement, view, enabl }; }; -const checkProperty = (property: Property, path: string, uischema: UISchema, viewElement: ViewElement, view: View) => { - const uiProp = get(uischema, path); +const checkProperty = (property: Property, path: string, viewElement: ViewElement, view: View) => { const viewClassProp = viewElement.options; const viewProp = get(view, path); - if (uiProp && uiProp[property]) { - return uiProp[property]; - } else if (viewClassProp && viewClassProp[property]) { + if (viewClassProp && viewClassProp[property]) { return viewClassProp[property]; } else if (viewProp && viewProp[property]) { return viewProp[property]; @@ -638,7 +628,7 @@ export const withContextFormsSaveControlProps = //type FormsPropTypes = ControlProps | CombinatorProps | LayoutProps | CellProps | ArrayLayoutProps | StatePropsOfControlWithDetail | OwnPropsOfRenderer; export const areEqual = (prevProps: any /*FormsPropTypes*/, nextProps: any /*FormsPropTypes*/) => { - const prev = omit(prevProps, ['handleChange', 'uischemas']); - const next = omit(nextProps, ['handleChange', 'uischemas']); - return isEqual(prev, next) && get(prevProps, 'uischemas.length') === get(nextProps, 'uischemas.length'); + const prev = omit(prevProps, ['handleChange']); + const next = omit(nextProps, ['handleChange']); + return isEqual(prev, next); }; diff --git a/src/util/layout.tsx b/src/util/layout.tsx index fb72925..b94dc13 100644 --- a/src/util/layout.tsx +++ b/src/util/layout.tsx @@ -21,12 +21,12 @@ export interface RenderLayoutProps extends FormsDispatchProps { Render: React.FC; } -export const renderLayoutElements = ({ viewElement, uischema, view, enabled, Render, parent }: RenderLayoutProps) => { +export const renderLayoutElements = ({ viewElement, view, enabled, Render, parent }: RenderLayoutProps) => { const elements = viewElement.elements; //const id = view['@id']; //const sort = id ? view.properties && view.properties[id] && view.properties[id].order : undefined; if (!elements || elements.length === 0) return <>; return elements.map((el: ViewElement, idx: number) => ( - + )); }; diff --git a/stories/AntdCardCell.stories.tsx b/stories/AntdCardCell.stories.tsx index c58393e..e388215 100644 --- a/stories/AntdCardCell.stories.tsx +++ b/stories/AntdCardCell.stories.tsx @@ -13,13 +13,7 @@ import { Story, Meta } from '@storybook/react/types-6-0'; import { Provider } from 'react-redux'; import { asReduxStore, connectReduxDevtools } from 'mst-middlewares'; -import { - SparqlClientImpl, - rootModelInitialState, - createModelFromState, - CollState, - mstSchemas, -} from '@agentlab/sparql-jsld-client'; +import { SparqlClientImpl, rootModelInitialState, CollState } from '@agentlab/sparql-jsld-client'; import { antdCells, @@ -31,7 +25,7 @@ import { RendererRegistryEntry, } from '../src'; import { viewKindCollConstr, viewDescrCollConstr } from '../src/stores/ViewCollConstrs'; -import { ViewDescr } from '../src/stores/ViewDescr'; +import { createUiModelFromState } from '../src/stores/ViewDescr'; const antdRenderers: RendererRegistryEntry[] = [ ...antdControlRenderers, @@ -41,16 +35,16 @@ const antdRenderers: RendererRegistryEntry[] = [ const viewKinds = [ { - '@id': 'rm:CardCellGridViewKind', + '@id': 'mktp:CardCellGridViewKind', '@type': 'aldkg:ViewKind', type: 'VerticalLayout', collsConstrs: [ { - '@id': 'rm:Cards_Coll', + '@id': 'mktp:ViewKind_Cards_Coll', '@type': 'aldkg:CollConstr', entConstrs: [ { - '@id': 'rm:Cards_Coll_Shape0', + '@id': 'mktp:ViewKind_Cards_Coll_Shape0', '@type': 'aldkg:EntConstr', schema: 'hs:ProductCardShape', }, @@ -64,7 +58,7 @@ const viewKinds = [ elements: [ { type: 'DataControl', - resultsScope: 'rm:Cards_Coll', + resultsScope: 'mktp:ViewKind_Cards_Coll', options: { renderType: 'grid', grid: { @@ -236,17 +230,17 @@ const viewDescrs = [ { '@id': 'mktp:CardCellViewDescr', '@type': 'aldkg:ViewDescr', - viewKind: 'rm:CardCellGridViewKind', + viewKind: 'mktp:CardCellGridViewKind', type: 'VerticalLayout', title: 'CardCellGrid', description: 'CardCellGrid', collsConstrs: [ { - '@id': 'rm:Cards_Coll', + '@id': 'mktp:ViewDescr_Cards_Coll', '@type': 'aldkg:CollConstr', entConstrs: [ { - '@id': 'rm:Cards_Coll_Shape0', + '@id': 'mktp:ViewDescr_Cards_Coll_Shape0', '@type': 'aldkg:EntConstr', schema: 'hs:ProductCardShape', }, @@ -257,174 +251,7 @@ const viewDescrs = [ //width: 'all-empty-space', }, // child ui elements configs - elements: [ - { - type: 'DataControl', - resultsScope: 'rm:Cards_Coll', - options: { - renderType: 'grid', - grid: { - gutter: 16, - xs: 2, - sm: 2, - md: 3, - lg: 3, - xl: 4, - xxl: 7, - }, - elementTemplate: [ - { - type: 'CardLayout', - elements: [ - { - type: 'ImageCell', - scope: 'imageUrl', - }, - { - type: 'Control', - scope: 'name', - options: { - editable: false, - style: { - height: '3.5em', - textAlign: 'left', - fontFamily: 'Lato,Tahoma,sans-serif', - overflow: 'hidden', - textOverflow: 'ellipsis', - margin: 0, - }, - }, - }, - { - type: 'Rate', - scope: 'starsValue', - options: { - editable: false, - }, - }, - { - type: 'CellHorizontalLayout', - options: { - justify: 'space-between', - }, - elements: [ - { - type: 'Control', - scope: 'price', - options: { - formater: 'labeledValue', - editable: false, - label: 'Цена', - specialChar: '₽', - style: { - textAlign: 'left', - fontFamily: 'Lato,Tahoma,sans-serif', - color: 'gray', - }, - }, - }, - { - type: 'Control', - scope: 'totalSales', - options: { - formater: 'labeledValue', - editable: false, - label: 'Всего продано', - style: { - textAlign: 'right', - fontFamily: 'Lato,Tahoma,sans-serif', - color: 'gray', - }, - }, - }, - ], - }, - { - type: 'Control', - scope: 'lastMonthSalesAmount', - options: { - editable: false, - formater: 'сomparison', - dataToFormater: { - prevValue: 'prevMonthSalesAmount', - }, - label: 'Продажи за месяц', - style: { - textAlign: 'left', - fontFamily: 'Lato,Tahoma,sans-serif', - color: 'gray', - }, - }, - }, - { - type: 'Control', - scope: 'lastMonthSalesValue', - options: { - formater: 'сomparison', - editable: false, - dataToFormater: { - prevValue: 'prevMonthSalesValue', - }, - label: 'Объем продаж', - style: { - textAlign: 'left', - fontFamily: 'Lato,Tahoma,sans-serif', - color: 'gray', - }, - }, - }, - { - type: 'G2', - }, - { - type: 'CellHorizontalLayout', - options: { - justify: 'space-around', - }, - elements: [ - { - type: 'Control', - scope: '@id', - options: { - style: { - border: '1.5px solid black', - borderRadius: '2px', - height: '2em', - textAlign: 'center', - fontWeight: 500, - width: '90px', - color: 'black', - }, - specialImage: 'https://www.meme-arsenal.com/memes/f8e9bfb9fdf368272b21a5dac8f01ec1.jpg', - editable: false, - formater: 'link', - dataToFormater: { - link: '@id', - }, - label: 'Wildberries', - }, - }, - { - type: 'Button', - options: { - label: 'Добавить', - style: { - border: '1.5px solid black', - borderRadius: '2px', - width: '90px', - fontWeight: 500, - color: 'black', - }, - }, - }, - ], - }, - ], - }, - ], - }, - }, - ], + elements: [], }, ]; @@ -436,7 +263,7 @@ const additionalColls: CollState[] = [ opt: { updPeriod: undefined, lastSynced: moment.now(), - resolveCollConstrs: false, // disable data loading from the server for viewKinds.collConstrs + //resolveCollConstrs: false, // disable data loading from the server for viewKinds.collConstrs }, }, // ViewDescrs Collection @@ -452,10 +279,8 @@ const additionalColls: CollState[] = [ }, ]; -mstSchemas['aldkg:ViewDescr'] = ViewDescr; - const client = new SparqlClientImpl('https://rdf4j.agentlab.ru/rdf4j-server'); -const rootStore = createModelFromState('mktp', client, rootModelInitialState, additionalColls); +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 @@ -480,7 +305,11 @@ export const Empty: Story<{}> = () => ( margin: '0 auto', padding: '5px', }}> - + diff --git a/stories/Form.stories.tsx b/stories/Form.stories.tsx index 2fd172b..2396acf 100644 --- a/stories/Form.stories.tsx +++ b/stories/Form.stories.tsx @@ -8,19 +8,12 @@ * SPDX-License-Identifier: GPL-3.0-only ********************************************************************************/ import moment from 'moment'; -import { variable } from '@rdfjs/data-model'; import React from 'react'; import { Meta, Story } from '@storybook/react'; import { Provider } from 'react-redux'; import { asReduxStore, connectReduxDevtools } from 'mst-middlewares'; -import { - SparqlClientImpl, - rootModelInitialState, - createModelFromState, - CollState, - mstSchemas, -} from '@agentlab/sparql-jsld-client'; +import { SparqlClientImpl, rootModelInitialState, CollState } from '@agentlab/sparql-jsld-client'; import { RendererRegistryEntry, @@ -31,15 +24,14 @@ import { antdLayoutRenderers, } from '../src'; import { viewKindCollConstr, viewDescrCollConstr } from '../src/stores/ViewCollConstrs'; -import { ViewDescr } from '../src/stores/ViewDescr'; +import { createUiModelFromState } from '../src/stores/ViewDescr'; const antdRenderers: RendererRegistryEntry[] = [...antdControlRenderers, ...antdLayoutRenderers]; -const viewDescrs = [ +const viewKinds = [ { - '@id': 'rm:FormView', + '@id': 'rm:FormViewKind', '@type': 'aldkg:ViewDescr', - //'viewKind': 'rm:FormViewClass', title: 'Малая форма', description: 'Small form', type: 'FormLayout', @@ -86,17 +78,34 @@ const viewDescrs = [ }, ]; +const viewDescrs = [ + { + '@id': 'rm:FormViewDescr', + '@type': 'aldkg:ViewDescr', + viewKind: 'rm:FormViewKind', + type: 'VerticalLayout', + title: 'CardCellGrid', + description: 'CardCellGrid', + collsConstrs: [], + options: { + //width: 'all-empty-space', + }, + // child ui elements configs + elements: [], + }, +]; + const additionalColls: CollState[] = [ // ViewKinds Collection - /*{ + { constr: viewKindCollConstr, data: viewKinds, opt: { updPeriod: undefined, lastSynced: moment.now(), - resolveCollConstrs: false, // disable data loading from the server for viewKinds.collConstrs + //resolveCollConstrs: false, // disable data loading from the server for viewKinds.collConstrs }, - },*/ + }, // ViewDescrs Collection { constr: viewDescrCollConstr, @@ -110,10 +119,8 @@ const additionalColls: CollState[] = [ }, ]; -mstSchemas['aldkg:ViewDescr'] = ViewDescr; - const client = new SparqlClientImpl('https://rdf4j.agentlab.ru/rdf4j-server'); -const rootStore = createModelFromState('reqs2', client, rootModelInitialState, additionalColls); +const rootStore = createUiModelFromState('reqs2', client, rootModelInitialState, additionalColls); const store: any = asReduxStore(rootStore); // eslint-disable-next-line @typescript-eslint/no-var-requires connectReduxDevtools(require('remotedev'), rootStore); @@ -130,7 +137,11 @@ const Template: Story = (args: any) => (
- +
diff --git a/stories/Tree.stories.tsx b/stories/Tree.stories.tsx index 072e455..7b7fbae 100644 --- a/stories/Tree.stories.tsx +++ b/stories/Tree.stories.tsx @@ -146,7 +146,6 @@ export const Empty: Story<{}> = () => ( schema={artifactSchema} view={{} as any} id={'test'} - uischema={{}} enabled={true} dataSource={data} /> diff --git a/stories/TreeAndForm.stories.tsx b/stories/TreeAndForm.stories.tsx index cfbd53e..a86314c 100644 --- a/stories/TreeAndForm.stories.tsx +++ b/stories/TreeAndForm.stories.tsx @@ -13,13 +13,7 @@ import { Story, Meta } from '@storybook/react/types-6-0'; import { Provider } from 'react-redux'; import { asReduxStore, connectReduxDevtools } from 'mst-middlewares'; -import { - SparqlClientImpl, - rootModelInitialState, - createModelFromState, - CollState, - mstSchemas, -} from '@agentlab/sparql-jsld-client'; +import { SparqlClientImpl, rootModelInitialState, CollState } from '@agentlab/sparql-jsld-client'; import { antdCells, @@ -31,7 +25,7 @@ import { RendererRegistryEntry, } from '../src'; import { viewKindCollConstr, viewDescrCollConstr } from '../src/stores/ViewCollConstrs'; -import { ViewDescr } from '../src/stores/ViewDescr'; +import { createUiModelFromState } from '../src/stores/ViewDescr'; const antdRenderers: RendererRegistryEntry[] = [ ...antdControlRenderers, @@ -39,13 +33,12 @@ const antdRenderers: RendererRegistryEntry[] = [ ...antdDataControlRenderers, ]; -const viewDescrs = [ +const viewKinds = [ { - '@id': 'mktp:TreeAndFormViewDescr', + '@id': 'mktp:TreeAndFormViewKind', '@type': 'aldkg:ViewDescr', title: 'TreeAndForm', description: 'TreeAndForm', - viewKind: 'rm:TreeAndFormViewKind', collsConstrs: [ { '@id': 'rm:Categories_Coll', @@ -287,17 +280,34 @@ const viewDescrs = [ }, ]; +const viewDescrs = [ + { + '@id': 'mktp:TreeAndFormViewDescr', + '@type': 'aldkg:ViewDescr', + viewKind: 'mktp:TreeAndFormViewKind', + type: 'VerticalLayout', + title: 'CardCellGrid', + description: 'CardCellGrid', + collsConstrs: [], + options: { + //width: 'all-empty-space', + }, + // child ui elements configs + elements: [], + }, +]; + const additionalColls: CollState[] = [ // ViewKinds Collection - /*{ + { constr: viewKindCollConstr, data: viewKinds, opt: { updPeriod: undefined, lastSynced: moment.now(), - resolveCollConstrs: false, // disable data loading from the server for viewKinds.collConstrs + //resolveCollConstrs: false, // disable data loading from the server for viewKinds.collConstrs }, - },*/ + }, // ViewDescrs Collection { constr: viewDescrCollConstr, @@ -311,10 +321,8 @@ const additionalColls: CollState[] = [ }, ]; -mstSchemas['aldkg:ViewDescr'] = ViewDescr; - const client = new SparqlClientImpl('https://rdf4j.agentlab.ru/rdf4j-server'); -const rootStore = createModelFromState('mktp', client, rootModelInitialState, additionalColls); +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); @@ -331,7 +339,11 @@ export const Empty: Story<{}> = () => (
- +
diff --git a/stories/TreeAndFormArtifact.stories.tsx b/stories/TreeAndFormArtifact.stories.tsx index 9707522..924c5aa 100644 --- a/stories/TreeAndFormArtifact.stories.tsx +++ b/stories/TreeAndFormArtifact.stories.tsx @@ -13,13 +13,7 @@ import { Story, Meta } from '@storybook/react/types-6-0'; import { Provider } from 'react-redux'; import { asReduxStore, connectReduxDevtools } from 'mst-middlewares'; -import { - SparqlClientImpl, - rootModelInitialState, - createModelFromState, - CollState, - mstSchemas, -} from '@agentlab/sparql-jsld-client'; +import { SparqlClientImpl, rootModelInitialState, CollState } from '@agentlab/sparql-jsld-client'; import { antdCells, @@ -31,7 +25,7 @@ import { RendererRegistryEntry, } from '../src'; import { viewKindCollConstr, viewDescrCollConstr } from '../src/stores/ViewCollConstrs'; -import { ViewDescr } from '../src/stores/ViewDescr'; +import { createUiModelFromState } from '../src/stores/ViewDescr'; const antdRenderers: RendererRegistryEntry[] = [ ...antdControlRenderers, @@ -39,13 +33,12 @@ const antdRenderers: RendererRegistryEntry[] = [ ...antdDataControlRenderers, ]; -const viewDescrs = [ +const viewKinds = [ { - '@id': 'mktp:TreeAndFormViewDescr', + '@id': 'mktp:TreeAndFormArtifactViewKind', '@type': 'aldkg:ViewDescr', title: 'TreeAndForm', description: 'TreeAndForm', - viewKind: 'rm:TreeAndFormViewKind', collsConstrs: [ { '@id': 'rm:Folders_Coll', @@ -126,17 +119,34 @@ const viewDescrs = [ }, ]; +const viewDescrs = [ + { + '@id': 'mktp:TreeAndFormArtifactViewDescr', + '@type': 'aldkg:ViewDescr', + viewKind: 'mktp:TreeAndFormArtifactViewKind', + type: 'VerticalLayout', + title: 'CardCellGrid', + description: 'CardCellGrid', + collsConstrs: [], + options: { + //width: 'all-empty-space', + }, + // child ui elements configs + elements: [], + }, +]; + const additionalColls: CollState[] = [ // ViewKinds Collection - /*{ + { constr: viewKindCollConstr, data: viewKinds, opt: { updPeriod: undefined, lastSynced: moment.now(), - resolveCollConstrs: false, // disable data loading from the server for viewKinds.collConstrs + //resolveCollConstrs: false, // disable data loading from the server for viewKinds.collConstrs }, - },*/ + }, // ViewDescrs Collection { constr: viewDescrCollConstr, @@ -150,10 +160,8 @@ const additionalColls: CollState[] = [ }, ]; -mstSchemas['aldkg:ViewDescr'] = ViewDescr; - const client = new SparqlClientImpl('https://rdf4j.agentlab.ru/rdf4j-server'); -const rootStore = createModelFromState('reqs2', client, rootModelInitialState, additionalColls); +const rootStore = createUiModelFromState('reqs2', client, rootModelInitialState, additionalColls); const store: any = asReduxStore(rootStore); // eslint-disable-next-line @typescript-eslint/no-var-requires connectReduxDevtools(require('remotedev'), rootStore); @@ -170,7 +178,11 @@ export const Empty: Story<{}> = () => (
- +
diff --git a/stories/TreeAndFormColumns.stories.tsx b/stories/TreeAndFormColumns.stories.tsx index 947f020..3847a6b 100644 --- a/stories/TreeAndFormColumns.stories.tsx +++ b/stories/TreeAndFormColumns.stories.tsx @@ -13,13 +13,7 @@ import { Story, Meta } from '@storybook/react/types-6-0'; import { Provider } from 'react-redux'; import { asReduxStore, connectReduxDevtools } from 'mst-middlewares'; -import { - SparqlClientImpl, - rootModelInitialState, - createModelFromState, - CollState, - mstSchemas, -} from '@agentlab/sparql-jsld-client'; +import { SparqlClientImpl, rootModelInitialState, CollState } from '@agentlab/sparql-jsld-client'; import { antdCells, @@ -31,7 +25,7 @@ import { RendererRegistryEntry, } from '../src'; import { viewKindCollConstr, viewDescrCollConstr } from '../src/stores/ViewCollConstrs'; -import { ViewDescr } from '../src/stores/ViewDescr'; +import { createUiModelFromState } from '../src/stores/ViewDescr'; const antdRenderers: RendererRegistryEntry[] = [ ...antdControlRenderers, @@ -39,13 +33,12 @@ const antdRenderers: RendererRegistryEntry[] = [ ...antdDataControlRenderers, ]; -const viewDescrs = [ +const viewKinds = [ { - '@id': 'mktp:TreeAndFormViewDescr', + '@id': 'mktp:TreeAndFormViewKind', '@type': 'aldkg:ViewDescr', title: 'TreeAndForm', description: 'TreeAndForm', - viewKind: 'rm:TreeAndFormViewKind', collsConstrs: [ { '@id': 'rm:Cards_Coll', @@ -231,17 +224,34 @@ const viewDescrs = [ }, ]; +const viewDescrs = [ + { + '@id': 'mktp:TreeAndFormViewDescr', + '@type': 'aldkg:ViewDescr', + viewKind: 'mktp:TreeAndFormViewKind', + type: 'VerticalLayout', + title: 'CardCellGrid', + description: 'CardCellGrid', + collsConstrs: [], + options: { + //width: 'all-empty-space', + }, + // child ui elements configs + elements: [], + }, +]; + const additionalColls: CollState[] = [ // ViewKinds Collection - /*{ + { constr: viewKindCollConstr, data: viewKinds, opt: { updPeriod: undefined, lastSynced: moment.now(), - resolveCollConstrs: false, // disable data loading from the server for viewKinds.collConstrs + //resolveCollConstrs: false, // disable data loading from the server for viewKinds.collConstrs }, - },*/ + }, // ViewDescrs Collection { constr: viewDescrCollConstr, @@ -255,10 +265,8 @@ const additionalColls: CollState[] = [ }, ]; -mstSchemas['aldkg:ViewDescr'] = ViewDescr; - const client = new SparqlClientImpl('https://rdf4j.agentlab.ru/rdf4j-server'); -const rootStore = createModelFromState('mktp', client, rootModelInitialState, additionalColls); +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); @@ -275,7 +283,11 @@ export const Empty: Story<{}> = () => (
- +