Merge pull request #128 from performant-software/feature/rc127_read_only_views

RC #127 - Read-only views

Author: dleadbetter

packages/semantic-ui/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@performant-software/shared-components": "^0.5.2",
     "@react-google-maps/api": "^2.8.1",
+    "axios": "^0.26.1",
     "flow-copy-source": "^2.0.9",
     "i18next": "^19.4.4",
     "react-calendar": "^3.3.0",

packages/semantic-ui/src/components/DataList.js

@@ -19,10 +19,10 @@ type Props = {
     props?: any,
     onChange?: (filter: any) => Promise<any>
   },
-  onDelete: (item: any) => Promise<any>,
+  onDelete?: (item: any) => Promise<any>,
   onDeleteAll?: () => Promise<any>,
   onLoad: (params: any) => Promise<any>,
-  onSave: (item: any) => Promise<any>,
+  onSave?: (item: any) => Promise<any>,
   perPageOptions?: Array<number>,
   polling?: number,
   resolveErrors?: (error: any) => Array<string>,
@@ -251,6 +251,10 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
      * @returns {Q.Promise<any> | Promise<R> | Promise<any> | void | *}
      */
     onDelete(selectedItem: any) {
+      if (!this.props.onDelete) {
+        return Promise.resolve();
+      }
+
       return this.props
         .onDelete(selectedItem)
         .then(this.afterDelete.bind(this))
@@ -333,6 +337,10 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
      * @returns {Q.Promise<any> | Promise<R> | Promise<any> | void | *}
      */
     onSave(item: any) {
+      if (!this.props.onSave) {
+        return Promise.resolve();
+      }
+
       return Promise.resolve(this.props.onSave(item))
         .then(() => this.setState({ saved: true }, this.fetchData.bind(this)));
     }

packages/semantic-ui/src/components/DataTableColumnSelector.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Component, type ComponentType } from 'react';
+import React, { Component, type ComponentType, type Element } from 'react';
 import { Checkbox, Dropdown, Icon } from 'semantic-ui-react';
 import _ from 'underscore';
 import Draggable from './Draggable';
@@ -10,7 +10,8 @@ import type { Column } from './DataTable';
 
 type Props = {
   className: string,
-  columns: Array<Column>
+  columns: Array<Column>,
+  renderListHeader?: () => Element<any>
 };
 
 type State = {
@@ -107,37 +108,40 @@ const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
      */
     renderHeader() {
       return (
-        <Dropdown
-          basic
-          button
-          icon='cog'
-          className='icon configure-button open-right'
-          simple
-        >
-          <Dropdown.Menu>
-            { this.state.columns
-              .filter((c) => c.label && c.label.length)
-              .map((c, index) => (
-                <Draggable
-                  id={c.name}
-                  index={index}
-                  key={c.name}
-                  onDrag={this.onDrag.bind(this)}
-                >
-                  <Dropdown.Item>
-                    <Icon
-                      name='bars'
-                    />
-                    <Checkbox
-                      checked={!c.hidden}
-                      label={c.label}
-                      onClick={this.onColumnCheckbox.bind(this, c)}
-                    />
-                  </Dropdown.Item>
-                </Draggable>
-              ))}
-          </Dropdown.Menu>
-        </Dropdown>
+        <>
+          { this.props.renderListHeader && this.props.renderListHeader() }
+          <Dropdown
+            basic
+            button
+            icon='cog'
+            className='icon configure-button open-right'
+            simple
+          >
+            <Dropdown.Menu>
+              { this.state.columns
+                .filter((c) => c.label && c.label.length)
+                .map((c, index) => (
+                  <Draggable
+                    id={c.name}
+                    index={index}
+                    key={c.name}
+                    onDrag={this.onDrag.bind(this)}
+                  >
+                    <Dropdown.Item>
+                      <Icon
+                        name='bars'
+                      />
+                      <Checkbox
+                        checked={!c.hidden}
+                        label={c.label}
+                        onClick={this.onColumnCheckbox.bind(this, c)}
+                      />
+                    </Dropdown.Item>
+                  </Draggable>
+                ))}
+            </Dropdown.Menu>
+          </Dropdown>
+        </>
       );
     }
   }

packages/semantic-ui/src/components/DataView.css

@@ -0,0 +1,4 @@
+.data-view-modal.ui.form .field span.label {
+  display: block;
+  font-weight: bold;
+}