Rename panel -> area

Author: jochenklar

rdmo/projects/assets/js/project/components/Main.js

@@ -1,22 +1,22 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
 
-import Dashboard from './panels/Dashboard'
-import Interview from './panels/Interview'
-import Documents from './panels/Documents'
-import Information from './panels/Information'
-import Memberships from './panels/Memberships'
-import Snapshots from './panels/Snapshots'
-import Plugins from './panels/Plugins'
+import Dashboard from './areas/Dashboard'
+import Interview from './areas/Interview'
+import Documents from './areas/Documents'
+import Information from './areas/Information'
+import Memberships from './areas/Memberships'
+import Snapshots from './areas/Snapshots'
+import Plugins from './areas/Plugins'
 
 import View from './helper/View'
 
 const Main = () => {
-  const { panel } = useSelector((state) => state.config)
+  const { area } = useSelector((state) => state.config)
   const { project, currentView } = useSelector((state) => state.project)
 
-  const renderPanel = () => {
-    switch (panel) {
+  const renderArea = () => {
+    switch (area) {
       case 'dashboard':
         return <Dashboard />
       case 'interview':
@@ -36,10 +36,10 @@ const Main = () => {
     }
   }
 
-  return panel && project && (
+  return area && project && (
     <div className="py-4 ps-4 pe-5">
       <div className="container gx-0">
-        {renderPanel()}
+        {renderArea()}
       </div>
     </div>
   )

rdmo/projects/assets/js/project/components/Sidebar.js

@@ -12,7 +12,7 @@ import { navigateDashboard } from '../actions/projectActions'
 const Sidebar = () => {
   const dispatch = useDispatch()
 
-  const { panel } = useSelector((state) => state.config)
+  const { area } = useSelector((state) => state.config)
   const { project } = useSelector((state) => state.project)
 
   const catalog = project?.catalogs.find(catalog => catalog.id == project.project.catalog)
@@ -21,23 +21,23 @@ const Sidebar = () => {
     {
       title: '',
       items: [
-        { panel: 'dashboard', name: gettext('Dashboard'), icon: 'bi-grid' }
+        { area: 'dashboard', name: gettext('Dashboard'), icon: 'bi-grid' }
       ],
     },
     {
       title: gettext('Data management plan'),
       items: [
-        { panel: 'interview', name: gettext('Interview'), icon: 'bi-clipboard-check' },
-        { panel: 'documents', name: gettext('Documents'), icon: 'bi-file-text' },
-        { panel: 'snapshots', name: gettext('Snapshots'), icon: 'bi-stack' },
+        { area: 'interview', name: gettext('Interview'), icon: 'bi-clipboard-check' },
+        { area: 'documents', name: gettext('Documents'), icon: 'bi-file-text' },
+        { area: 'snapshots', name: gettext('Snapshots'), icon: 'bi-stack' },
       ],
     },
     {
       title: gettext('Settings'),
       items: [
-        { panel: 'information', name: gettext('Project information'), icon: 'bi-info-square' },
-        { panel: 'memberships', name: gettext('Membership'), icon: 'bi-people' },
-        { panel: 'plugins', name: gettext('Plugins'), icon: 'bi-wrench' },
+        { area: 'information', name: gettext('Project information'), icon: 'bi-info-square' },
+        { area: 'memberships', name: gettext('Membership'), icon: 'bi-people' },
+        { area: 'plugins', name: gettext('Plugins'), icon: 'bi-wrench' },
       ],
     },
   ]
@@ -65,9 +65,9 @@ const Sidebar = () => {
               group.items.map((item, itemIndex) => (
                 <Link
                   key={itemIndex}
-                  href={buildPath({ panel: item.panel })}
-                  className={classnames('nav-link', { active: panel === item.panel })}
-                  onClick={() => dispatch(navigateDashboard({ panel: item.panel }))}
+                  href={buildPath({ area: item.area })}
+                  className={classnames('nav-link', { active: area === item.area })}
+                  onClick={() => dispatch(navigateDashboard({ area: item.area }))}
                 >
                   <div className="d-flex align-items-center gap-2">
                     <i className={`bi ${item.icon}`}></i>

…s/project/components/panels/Dashboard.js …js/project/components/areas/Dashboard.jsrdmo/projects/assets/js/project/components/panels/Dashboard.js renamed to rdmo/projects/assets/js/project/components/areas/Dashboard.js rdmo/projects/assets/js/project/components/panels/Dashboard.js renamed to rdmo/projects/assets/js/project/components/areas/Dashboard.js

@@ -24,7 +24,7 @@ const Documents = () => {
               <ViewTile
                   title={view.title}
                   help={view.help}
-                  onClick={() => dispatch(navigateDashboard({ panel: 'documents', viewId: view.id }))}
+                  onClick={() => dispatch(navigateDashboard({ area: 'documents', viewId: view.id }))}
                   onExport={(format) => dispatch(downloadView(null, view.id, format))}
               />
             </div>
@@ -38,15 +38,15 @@ const Documents = () => {
           <ViewTile
             title={gettext('List all questions')}
             help={gettext('Overview of all questions')}
-            onClick={() => dispatch(navigateDashboard({ panel: 'documents', detail: 'questions' }))}
+            onClick={() => dispatch(navigateDashboard({ area: 'documents', detail: 'questions' }))}
             onExport={(format) => {console.log(format)}}
           />
         </div>
         <div className="col-lg-6">
           <ViewTile
             title={gettext('List all answers')}
             help={gettext('Overview of all questions and answers')}
-            onClick={() => dispatch(navigateDashboard({ panel: 'documents', detail: 'answers' }))}
+            onClick={() => dispatch(navigateDashboard({ area: 'documents', detail: 'answers' }))}
             onExport={(format) => dispatch(downloadAnswers(null, format))}
           />
         </div>