records list layout adjustments (#3016)

* records list layout adjustments * layout adjustments --------- Co-authored-by: Stefano Ricci <[email protected]> Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
openforis · Sep 18, 2023 · 270fa49 · 270fa49
1 parent 43d814e
commit 270fa49
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 20 deletions.
diff --git a/webapp/components/Table/Header/VisibleColumnsMenu/VisibleColumnsMenu.js b/webapp/components/Table/Header/VisibleColumnsMenu/VisibleColumnsMenu.js
@@ -28,6 +28,7 @@ export const VisibleColumnsMenu = (props) => {
 
   return (
     <ButtonMenu
+      className="btn-s"
       closeMenuOnItemClick={false}
       iconClassName="icon-cog"
       items={availableColumns.map((column) => {

diff --git a/webapp/style/table.scss b/webapp/style/table.scss
@@ -1,6 +1,6 @@
 @import 'webapp/style/vars';
 
-$tableHeaderHeight: 30px;
+$tableHeaderHeight: 40px;
 $tableFooterHeight: 30px;
 
 .table {
@@ -10,7 +10,6 @@ $tableFooterHeight: 30px;
 }
 
 .table__header {
-  height: $tableHeaderHeight;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -25,7 +24,6 @@ $tableFooterHeight: 30px;
 }
 
 .table__footer {
-  height: $tableFooterHeight;
   display: flex;
   justify-content: flex-end;
 }

diff --git a/webapp/views/App/views/Data/Records/HeaderLeft/HeaderLeft.js b/webapp/views/App/views/Data/Records/HeaderLeft/HeaderLeft.js
@@ -77,7 +77,6 @@ const HeaderLeft = ({ handleSearch, navigateToRecord, onRecordsUpdate, search, s
         <Button
           testId={TestId.records.addBtn}
           onClick={() => dispatch(RecordActions.createRecord(navigate))}
-          className="btn-s"
           iconClassName="icon-plus icon-12px icon-left"
           label="common.new"
         />

diff --git a/webapp/views/App/views/Data/Records/HeaderLeft/HeaderLeft.scss b/webapp/views/App/views/Data/Records/HeaderLeft/HeaderLeft.scss
@@ -1,16 +1,22 @@
 @import 'webapp/style/vars';
 
-$tableHeaderHeight: 40px;
+$tableHeaderHeight: 30px;
 
 .records__header-left {
   display: flex;
+  align-items: center;
   height: $tableHeaderHeight;
   column-gap: 1rem;
-}
 
-.records__header-left__input-search {
-  padding: 0px 5px;
-  border: 1px solid $greyBorder;
-  background: white;
-  width: 15rem;
+  button,
+  .btn {
+    padding: 0.5rem 0.8rem;
+  }
+
+  .records__header-left__input-search {
+    padding: 5px 5px;
+    border: 1px solid $greyBorder;
+    background: white;
+    width: 15rem;
+  }
 }
diff --git a/webapp/views/App/views/Data/Records/Records.js b/webapp/views/App/views/Data/Records/Records.js
@@ -12,6 +12,7 @@ import { useSurveyCycleKey, useNodeDefRootKeys } from '@webapp/store/survey'
 import { appModuleUri, dataModules } from '@webapp/app/appModules'
 
 import Table from '@webapp/components/Table'
+import { LoadingBar } from '@webapp/components'
 import { useOnWebSocketEvent } from '@webapp/components/hooks'
 
 import HeaderLeft from './HeaderLeft'
@@ -44,6 +45,10 @@ const Records = () => {
     eventHandler: onRecordsUpdate,
   })
 
+  if (columns === null) {
+    return <LoadingBar />
+  }
+
   return (
     <Table
       visibleColumnsSelectionEnabled

diff --git a/webapp/views/App/views/Data/Records/useColumns.js b/webapp/views/App/views/Data/Records/useColumns.js
@@ -32,8 +32,9 @@ export const useColumns = ({ categoryItemsByCodeDefUuid, navigateToRecord, onRec
     [navigateToRecord]
   )
 
-  return useMemo(
-    () => [
+  return useMemo(() => {
+    if (categoryItemsByCodeDefUuid === null) return null
+    return [
       {
         key: 'selected',
         renderItem: ({ itemSelected }) => (
@@ -56,6 +57,7 @@ export const useColumns = ({ categoryItemsByCodeDefUuid, navigateToRecord, onRec
             {itemPosition}
           </div>
         ),
+        width: '3rem',
       },
       ...nodeDefKeys.map((nodeDef) => ({
         key: NodeDef.getUuid(nodeDef),
@@ -83,12 +85,14 @@ export const useColumns = ({ categoryItemsByCodeDefUuid, navigateToRecord, onRec
         header: 'common.dateCreated',
         sortable: true,
         renderItem: ({ item: record }) => DateUtils.formatDateTimeDisplay(Record.getDateCreated(record)),
+        width: '11rem',
       },
       {
         key: Record.keys.dateModified,
         header: 'common.dateLastModified',
         sortable: true,
         renderItem: ({ item: record }) => DateUtils.formatDateTimeDisplay(Record.getDateModified(record)),
+        width: '11rem',
       },
       {
         key: Record.keys.ownerName,
@@ -100,16 +104,19 @@ export const useColumns = ({ categoryItemsByCodeDefUuid, navigateToRecord, onRec
         header: 'dataView.records.step',
         sortable: true,
         renderItem: ({ item: record }) => Record.getStep(record),
+        width: '5rem',
       },
       {
         key: 'errors',
         header: 'common.error_plural',
         renderItem: ({ item: record }) => A.pipe(Validation.getValidation, Validation.getErrorsCount)(record),
+        width: '6rem',
       },
       {
         key: 'warnings',
         header: 'common.warning_plural',
         renderItem: ({ item: record }) => A.pipe(Validation.getValidation, Validation.getWarningsCount)(record),
+        width: '6rem',
       },
       {
         key: 'action-buttons',
@@ -134,8 +141,8 @@ export const useColumns = ({ categoryItemsByCodeDefUuid, navigateToRecord, onRec
             </>
           )
         },
+        width: '80px',
       },
-    ],
-    [categoryItemsByCodeDefUuid, lang, nodeDefKeys, onRecordEditButtonClick, onRecordsUpdate, user]
-  )
+    ]
+  }, [categoryItemsByCodeDefUuid, lang, nodeDefKeys, onRecordEditButtonClick, onRecordsUpdate, user])
 }
diff --git a/webapp/views/App/views/Data/Records/useNodeDefKeysCategoryItemsInLevel.js b/webapp/views/App/views/Data/Records/useNodeDefKeysCategoryItemsInLevel.js
@@ -8,7 +8,7 @@ import { useSurvey } from '@webapp/store/survey'
 
 export const useNodeDefKeysCategoryItemsInLevel = () => {
   const survey = useSurvey()
-  const [result, setResult] = useState({})
+  const [result, setResult] = useState(null)
 
   useEffect(() => {
     const categoryItemsByCodeDefUuid = {}
@@ -18,9 +18,13 @@ export const useNodeDefKeysCategoryItemsInLevel = () => {
     const surveyId = Survey.getId(survey)
 
     const nodeDefCodeKeys = nodeDefKeys.filter(NodeDef.isCode)
+    if (nodeDefCodeKeys.length === 0) {
+      setResult({})
+      return
+    }
     nodeDefCodeKeys.forEach((nodeDefKey) => {
       const categoryUuid = NodeDef.getCategoryUuid(nodeDefKey)
-      if (!categoryUuid) return null // category not specified (e.g. error importing survey from Collect)
+      if (!categoryUuid) return // category not specified (e.g. error importing survey from Collect)
 
       const levelIndex = Survey.getNodeDefCategoryLevelIndex(nodeDefKey)(survey)
       const { request, cancel } = API.fetchCategoryItemsInLevelRequest({
@@ -29,10 +33,12 @@ export const useNodeDefKeysCategoryItemsInLevel = () => {
         levelIndex,
         draft: false,
       })
-      requestCancelByNodeDefUuid[NodeDef.getUuid] = cancel
+      const nodeDefKeyUuid = NodeDef.getUuid(nodeDefKey)
+      requestCancelByNodeDefUuid[nodeDefKeyUuid] = cancel
       request.then(({ data }) => {
+        delete requestCancelByNodeDefUuid[nodeDefKeyUuid]
         const { items } = data
-        categoryItemsByCodeDefUuid[NodeDef.getUuid(nodeDefKey)] = items
+        categoryItemsByCodeDefUuid[nodeDefKeyUuid] = items
         if (Object.values(categoryItemsByCodeDefUuid).length === nodeDefCodeKeys.length) {
           setResult(categoryItemsByCodeDefUuid)
         }