CDC #60 - Data Entry Form

client/package.json

@@ -11,10 +11,10 @@
     "flow": "flow"
   },
   "dependencies": {
-    "@performant-software/geospatial": "^1.1.0",
-    "@performant-software/semantic-components": "^1.1.0",
-    "@performant-software/shared-components": "^1.1.0",
-    "@performant-software/user-defined-fields": "^1.1.0",
+    "@performant-software/geospatial": "^1.1.1-beta.3",
+    "@performant-software/semantic-components": "^1.1.1-beta.3",
+    "@performant-software/shared-components": "^1.1.1-beta.3",
+    "@performant-software/user-defined-fields": "^1.1.1-beta.3",
     "boring-avatars": "^1.10.1",
     "classnames": "^2.3.1",
     "i18next": "^21.9.1",

client/src/App.js

@@ -4,7 +4,6 @@ import { useDragDrop } from '@performant-software/shared-components';
 import React, { type ComponentType } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import AuthenticatedRoute from './components/AuthenticatedRoute';
-import CurrentRecordContextProvider from './components/CurrentRecordContextProvider';
 import Layout from './components/Layout';
 import Login from './pages/Login';
 import Logout from './pages/Logout';
@@ -14,11 +13,8 @@ import ProjectEdit from './pages/ProjectEdit';
 import ProjectImport from './pages/ProjectImport';
 import ProjectModel from './pages/ProjectModel';
 import ProjectModelFactory from './components/ProjectModelFactory';
-import ProjectModelRelationshipFactory from './components/ProjectModelRelationshipFactory';
-import ProjectModelRelationshipsFactory from './components/ProjectModelRelationshipsFactory';
 import ProjectModels from './pages/ProjectModels';
 import ProjectModelsFactory from './components/ProjectModelsFactory';
-import ProjectSettingsContextProvider from './components/ProjectSettingsContextProvider';
 import Projects from './pages/Projects';
 import User from './pages/User';
 import UserProject from './pages/UserProject';
@@ -39,11 +35,7 @@ const App: ComponentType<any> = useDragDrop(() => (
         element={(
           <AuthenticatedRoute>
             <ProjectContextProvider>
-              <ProjectSettingsContextProvider>
-                <CurrentRecordContextProvider>
-                  <Layout />
-                </CurrentRecordContextProvider>
-              </ProjectSettingsContextProvider>
+              <Layout />
             </ProjectContextProvider>
           </AuthenticatedRoute>
         )}
@@ -129,22 +121,6 @@ const App: ComponentType<any> = useDragDrop(() => (
                   index
                   element={<ProjectModelFactory />}
                 />
-                <Route
-                  path=':projectModelRelationshipId'
-                >
-                  <Route
-                    index
-                    element={<ProjectModelRelationshipsFactory />}
-                  />
-                  <Route
-                    path='new'
-                    element={<ProjectModelRelationshipFactory />}
-                  />
-                  <Route
-                    path=':relationshipId'
-                    element={<ProjectModelRelationshipFactory />}
-                  />
-                </Route>
               </Route>
             </Route>
           </Route>

client/src/components/InstanceForm.js

@@ -31,9 +31,11 @@ const InstanceForm = (props: Props) => {
         }]}
         addButton={{
           basic: false,
-          color: 'blue',
-          location: 'top'
+          color: 'dark gray',
+          content: t('Common.buttons.addName'),
+          location: 'bottom'
         }}
+        className='compact'
         columns={[{
           name: 'name',
           label: t('InstanceForm.instanceNames.columns.name'),
@@ -43,6 +45,7 @@ const InstanceForm = (props: Props) => {
           label: t('InstanceForm.instanceNames.columns.primary'),
           render: (sourceTitle) => <BooleanIcon value={sourceTitle.primary} />
         }]}
+        configurable={false}
         items={props.item.source_titles}
         modal={{
           component: NameRelationModal,

client/src/components/ItemForm.js

@@ -31,9 +31,11 @@ const ItemForm = (props: Props) => {
         }]}
         addButton={{
           basic: false,
-          color: 'blue',
-          location: 'top'
+          color: 'dark gray',
+          content: t('Common.buttons.addName'),
+          location: 'bottom'
         }}
+        className='compact'
         columns={[{
           name: 'name',
           label: t('ItemForm.itemNames.columns.name'),
@@ -43,6 +45,7 @@ const ItemForm = (props: Props) => {
           label: t('ItemForm.itemNames.columns.primary'),
           render: (sourceTitle) => <BooleanIcon value={sourceTitle.primary} />
         }]}
+        configurable={false}
         items={props.item.source_titles}
         modal={{
           component: NameRelationModal,

client/src/components/ItemHeader.js

@@ -0,0 +1,41 @@
+// @flow
+
+import cx from 'classnames';
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Header, Icon } from 'semantic-ui-react';
+import styles from './ItemHeader.module.css';
+
+type Props = {
+  back?: {
+    label: string,
+    url: string
+  },
+  name: string
+};
+
+const ItemHeader = (props: Props) => (
+  <div
+    className={styles.itemHeader}
+  >
+    { props.back?.url && props.back?.label && (
+      <Link
+        to={props.back.url}
+      >
+        <Icon
+          name='arrow left'
+        />
+        { props.back.label }
+      </Link>
+    )}
+    { props.name && (
+      <Header
+        className={cx(styles.ui, styles.header)}
+        content={props.name}
+        size='large'
+      />
+    )}
+  </div>
+);
+
+export default ItemHeader;

client/src/components/ItemHeader.module.css

@@ -0,0 +1,13 @@
+.itemHeader {
+  padding-bottom: 1em;
+}
+
+.itemHeader > .ui.header {
+  margin-top: 0.5em;
+  padding-bottom: 0.5em;
+}
+
+.itemHeader a,
+.itemHeader a:hover {
+  color: unset;
+}