GH-16 readOnly property for Form Layout

src/Form.tsx

@@ -69,6 +69,7 @@ export interface RenderProps extends FormsDispatchProps {
 
   id: string;
   schema: JsonSchema7;
+  readOnly?: boolean;
 }
 export interface RenderCellProps extends RenderProps {
   data: any;

src/controls/AntdInputControl.tsx

@@ -38,6 +38,7 @@ export const AntdInputControl: React.FC<ControlComponent & WithInput> = (props)
   const InnerComponent = input;
 
   const formatterId = uiOptions.formatter || 'base';
+  const readOnly = uiOptions.readOnly;
   const query = uiOptions.query;
   const specialProps: any = {};
   if (uiOptions.dataToFormatter) {
@@ -61,7 +62,7 @@ export const AntdInputControl: React.FC<ControlComponent & WithInput> = (props)
       }
       validateStatus={validateObj.validateStatus}
       help={validateObj.help}>
-      {editing ? (
+      {editing && !readOnly ? (
         <InnerComponent
           {...props}
           onValidation={onValidation}

src/layouts/AntdFormLayout.tsx

@@ -89,12 +89,13 @@ export const AntdFormLayout: React.FC<any> = ({
   onEdit,
   editing,
 }) => {
+  const { readOnly } = viewKindElement.options;
   return (
     <AutoSizer>
       {({ width, height }: any) => (
         <div style={{ width, height, overflow: 'auto' }} onClick={() => onEdit()}>
           <span style={{ padding: '7px', fontSize: '2em' }}>{title}</span>
-          <LogicalButton form={id} onSave={onSave} onCancel={onCancel} />
+          {readOnly ? null : <LogicalButton form={id} onSave={onSave} onCancel={onCancel} />}
           <Form labelAlign={'left'}>
             <AntdVerticalLayoutWithStore
               id={`${id}Layout`}
@@ -105,6 +106,7 @@ export const AntdFormLayout: React.FC<any> = ({
               schema={{}}
               enabled={enabled}
               form={id}
+              readOnly={readOnly}
             />
           </Form>
         </div>

src/layouts/AntdVerticalLayout.tsx

@@ -26,6 +26,7 @@ export const AntdVerticalLayoutRenderer: React.FC<LayoutComponent> = ({
   enabled,
   visible,
   form,
+  readOnly,
 }) => {
   const Render: React.FC<FormsDispatchProps & Idx> = ({ idx, viewKind, viewKindElement, viewDescr, enabled }) => {
     const options = viewKindElement.options || {};
@@ -51,7 +52,7 @@ export const AntdVerticalLayoutRenderer: React.FC<LayoutComponent> = ({
   return (
     <React.Fragment>
       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-        {renderLayoutElements({ viewKind, viewKindElement, viewDescr, enabled, Render })}
+        {renderLayoutElements({ viewKind, viewKindElement, viewDescr, enabled, Render, readOnly })}
       </div>
     </React.Fragment>
   );

src/util/ContextToProps.tsx

@@ -68,9 +68,8 @@ export const withStoreToControlProps = (Component: React.FC<ControlComponent>):
     const coll = collIriOverride ? store.getColl(collIriOverride) : undefined;
     let collData = coll?.data;
     if (collData) collData = getSnapshot(collData);
-    const controlProps = mapStateToControlProps({ ...props, data: collData });
-
     const data = collData.length !== 0 ? collData[0] : {};
+    const controlProps = mapStateToControlProps({ ...props, data: data || {} });
     const onValidate = (data: any) => {
       if (viewKindElement.options && Array.isArray(viewKindElement.options.validation)) {
         const validation = viewKindElement.options.validation;
@@ -534,28 +533,31 @@ export const withStoreToArrayProps = (Component: any): any =>
   });
 
 export const withLayoutProps = (Component: React.FC<LayoutComponent>): React.FC<RenderProps> =>
-  observer<RenderProps>(({ viewKind, viewKindElement, viewDescr, viewDescrElement, schema, enabled, form }) => {
-    const id = viewKindElement['@id'] || '';
-    const enabledLayout = enabled && checkProperty('editable', id, viewKindElement, viewKind);
-    const visible = checkProperty('visible', id, viewKindElement, viewKind);
-    const { store } = useContext(MstContext);
-    if (viewKindElement.options && viewKindElement.options.connections) {
-      viewKindElement.options.connections.forEach((e: any) => store.setSaveLogic(e.from, e.to));
-    }
-    return (
-      <Component
-        viewKind={viewKind}
-        viewKindElement={viewKindElement}
-        viewDescr={viewDescr}
-        viewDescrElement={viewDescrElement}
-        id={id}
-        schema={schema}
-        enabled={enabledLayout}
-        visible={visible}
-        form={form}
-      />
-    );
-  });
+  observer<RenderProps>(
+    ({ viewKind, viewKindElement, viewDescr, viewDescrElement, schema, enabled, form, readOnly }) => {
+      const id = viewKindElement['@id'] || '';
+      const enabledLayout = enabled && checkProperty('editable', id, viewKindElement, viewKind);
+      const visible = checkProperty('visible', id, viewKindElement, viewKind);
+      const { store } = useContext(MstContext);
+      if (viewKindElement.options && viewKindElement.options.connections) {
+        viewKindElement.options.connections.forEach((e: any) => store.setSaveLogic(e.from, e.to));
+      }
+      return (
+        <Component
+          viewKind={viewKind}
+          viewKindElement={viewKindElement}
+          viewDescr={viewDescr}
+          viewDescrElement={viewDescrElement}
+          id={id}
+          schema={schema}
+          enabled={enabledLayout}
+          visible={visible}
+          form={form}
+          readOnly={readOnly}
+        />
+      );
+    },
+  );
 
 export const withStoreToSaveButtonProps = (Component: React.FC<ButtonComponent>): React.FC<RenderProps> =>
   observer<RenderProps>(({ viewKindElement, enabled }) => {
@@ -586,7 +588,7 @@ export const withStoreToSaveDialogProps = (Component: React.FC<SaveDialog>): Rea
   });
 
 const mapStateToControlProps = ({ id, schema, viewKindElement, viewKind, data }: ToControlProps & { data: any }) => {
-  const pathSegments = id.split('/');
+  const pathSegments = viewKindElement?.resultsScope?.split('/') || [];
   const path = pathSegments.join('.properties.');
   const visible = checkProperty('visible', path, viewKindElement, viewKind);
   const editable =
@@ -597,7 +599,7 @@ const mapStateToControlProps = ({ id, schema, viewKindElement, viewKind, data }:
   const labelDesc = createLabelDescriptionFrom(viewKindElement as any, schema);
   const label = labelDesc.show ? (labelDesc.text as string) : '';
   const key = pathSegments[1];
-  const enabled = data && (editable ?? true);
+  const enabled = data[key] && (editable ?? true);
   return {
     description,
     label,

src/util/layout.tsx

@@ -19,14 +19,25 @@ export declare type Idx = {
 export interface RenderLayoutProps extends FormsDispatchProps {
   viewKindElement: IViewKindElement;
   Render: React.FC<FormsDispatchProps & Idx>;
+  readOnly?: boolean;
 }
 
-export const renderLayoutElements = ({ viewKind, viewKindElement, viewDescr, enabled, Render }: RenderLayoutProps) => {
+export const renderLayoutElements = ({
+  viewKind,
+  viewKindElement,
+  viewDescr,
+  enabled,
+  Render,
+  readOnly,
+}: RenderLayoutProps) => {
   const elements = viewKindElement.elements;
   //const id = viewKind['@id'];
   //const sort = id ? viewKind.properties && viewKind.properties[id] && viewKind.properties[id].order : undefined;
   if (!elements || elements.length === 0) return <></>;
-  return elements.map((el: IViewKindElement, idx: number) => (
-    <Render key={idx} idx={idx} viewKind={viewKind} viewKindElement={el} viewDescr={viewDescr} enabled={enabled} />
-  ));
+  return elements.map((el: IViewKindElement, idx: number) => {
+    el = { ...el, options: { ...el.options, readOnly } };
+    return (
+      <Render key={idx} idx={idx} viewKind={viewKind} viewKindElement={el} viewDescr={viewDescr} enabled={enabled} />
+    );
+  });
 };

stories/Form.stories.tsx

@@ -7,6 +7,7 @@
  *
  * SPDX-License-Identifier: GPL-3.0-only
  ********************************************************************************/
+import { cloneDeep } from 'lodash';
 import moment from 'moment';
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
@@ -51,6 +52,9 @@ const viewKinds = [
       {
         '@id': 'rm:_83hd7f',
         '@type': 'aldkg:FormLayout',
+        options: {
+          readOnly: false,
+        },
         elements: [
           {
             '@id': 'rm:_17Gj78',
@@ -153,7 +157,7 @@ const Template: Story<any> = (args: any) => {
     'reqs2',
     client,
     rootModelInitialState,
-    createAdditionalColls(args.viewKinds || viewKinds, args.data),
+    createAdditionalColls(args.viewKinds, args.data),
   );
   const store: any = asReduxStore(rootStore);
   // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -169,11 +173,33 @@ const Template: Story<any> = (args: any) => {
   );
 };
 
-export const RemoteData = Template.bind({});
-RemoteData.args = {};
+export const EditableRemoteData = Template.bind({});
+EditableRemoteData.args = {
+  viewKinds,
+};
+
+export const ReadOnlyRemoteData = Template.bind({});
+const readOnlyFormViewKinds = cloneDeep(viewKinds);
+readOnlyFormViewKinds[0].elements[0].options.readOnly = true;
+ReadOnlyRemoteData.args = {
+  viewKinds: readOnlyFormViewKinds,
+};
+
+export const EditableObjectWithNullProperty = Template.bind({});
+EditableObjectWithNullProperty.args = {
+  viewKinds,
+  data: [
+    {
+      creator: null,
+      assetFolder: null,
+      description: 'TestDescr',
+    },
+  ],
+};
 
-export const ObjectWithNullProperty = Template.bind({});
-ObjectWithNullProperty.args = {
+export const ReadOnlyObjectWithNullProperty = Template.bind({});
+ReadOnlyObjectWithNullProperty.args = {
+  viewKinds: readOnlyFormViewKinds,
   data: [
     {
       creator: null,
@@ -183,12 +209,20 @@ ObjectWithNullProperty.args = {
   ],
 };
 
-export const EmptyObject = Template.bind({});
-EmptyObject.args = {
+export const EditableEmptyObject = Template.bind({});
+EditableEmptyObject.args = {
+  viewKinds,
   data: [{}],
 };
 
-export const NoObject = Template.bind({});
-NoObject.args = {
+export const ReadOnlyEmptyObject = Template.bind({});
+ReadOnlyEmptyObject.args = {
+  viewKinds: readOnlyFormViewKinds,
   data: [{}],
 };
+
+export const ReadOnlyNoObject = Template.bind({});
+ReadOnlyNoObject.args = {
+  viewKinds, // form should be read-only even if viewKind is not read-only
+  data: [],
+};