fix: mobile left nav

Chia-Network · Apr 2, 2024 · 44df937 · 44df937
1 parent 99ab99a
commit 44df937
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 19 deletions.
diff --git a/src/renderer/components/blocks/layout/LeftNav.tsx b/src/renderer/components/blocks/layout/LeftNav.tsx
@@ -48,6 +48,12 @@ const LeftNav = () => {
         >
           <FormattedMessage id={'units-list'} />
         </div>
+        <div
+          onClick={() => handleNavigation(ROUTES.AUDIT)}
+          className={`cursor-pointer p-3 ${isActive(ROUTES.AUDIT) ? 'bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-white' : 'text-gray-700 dark:text-gray-300'} hover:bg-gray-300 dark:hover:bg-gray-700 rounded-md text-lg font-semibold`}
+        >
+          <FormattedMessage id={'audit'} />
+        </div>
         <div
           onClick={() => handleNavigation(ROUTES.GLOSSARY)}
           className={`cursor-pointer p-3 ${isActive(ROUTES.GLOSSARY) ? 'bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-white' : 'text-gray-700 dark:text-gray-300'} hover:bg-gray-300 dark:hover:bg-gray-700 rounded-md text-lg font-semibold`}
@@ -81,7 +87,7 @@ const LeftNav = () => {
                 active={isActive(ROUTES.AUDIT)}
                 onClick={() => navigate(ROUTES.AUDIT)}
               >
-                <FormattedMessage id="audits" />
+                <FormattedMessage id="audit" />
               </Sidebar.Item>
               <Sidebar.Item
                 style={{ cursor: 'pointer' }}

diff --git a/src/renderer/components/blocks/widgets/OrganizationSelector.tsx b/src/renderer/components/blocks/widgets/OrganizationSelector.tsx
@@ -5,9 +5,10 @@ import { Dropdown, SyncIndicator } from '@/components';
 interface OrganizationSelectorProps {
   onSelect: (organization: any | undefined) => void;
   defaultOrgUid: string | undefined;
+  noSelectionLabel?: string
 }
 
-const OrganizationSelector: React.FC<OrganizationSelectorProps> = ({ onSelect, defaultOrgUid }) => {
+const OrganizationSelector: React.FC<OrganizationSelectorProps> = ({ onSelect, defaultOrgUid, noSelectionLabel = 'Select Organization' }) => {
   const { data: organizations, error, isLoading } = useGetOrganizationsListQuery({});
   const [selectedOrganization, setSelectedOrganization] = useState<any | undefined>(undefined);
 
@@ -36,7 +37,7 @@ const OrganizationSelector: React.FC<OrganizationSelectorProps> = ({ onSelect, d
   };
 
   return (
-    <Dropdown label={selectedOrganization ? selectedOrganization.name : 'All Organizations'} inline={true}>
+    <Dropdown label={selectedOrganization ? selectedOrganization.name : noSelectionLabel} inline={true}>
       <Dropdown.Item onClick={() => handleSelect(undefined)}>All Organizations</Dropdown.Item>
       {organizations.map((organization) => (
         <Dropdown.Item

diff --git a/src/renderer/pages/Audit/AuditPage.tsx b/src/renderer/pages/Audit/AuditPage.tsx
@@ -8,6 +8,7 @@ import {
   SkeletonTable,
   AuditsTable,
   SearchBox,
+  SyncIndicator
 } from '@/components';
 import {FormattedMessage} from "react-intl";
 
@@ -92,6 +93,7 @@ const AuditPage: React.FC = () => {
       <div className="flex flex-col md:flex-row gap-6 pl-1 my-2.5 relative z-30">
         <SearchBox defaultValue={search} onChange={handleSearchChange}/>
         <OrganizationSelector onSelect={handleOrganizationSelected} defaultOrgUid={orgUid}/>
+        <SyncIndicator detailed={true} orgUid={orgUid} />
       </div>
         <>
           {auditLoading ? (

diff --git a/src/renderer/pages/ProjectsList/ProjectsListPage.tsx b/src/renderer/pages/ProjectsList/ProjectsListPage.tsx
@@ -1,17 +1,17 @@
 import React, { useCallback } from 'react';
 import { useGetProjectsQuery } from '@/api';
 import { useQueryParamState, useColumnOrderHandler } from '@/hooks';
-import {debounce, DebouncedFunc} from 'lodash';
+import { debounce, DebouncedFunc } from 'lodash';
 import {
   OrganizationSelector,
   IndeterminateProgressOverlay,
   SkeletonTable,
   ProjectsListTable,
   SearchBox,
   SyncIndicator,
-  OrgUidBadge
+  OrgUidBadge,
 } from '@/components';
-import {FormattedMessage} from "react-intl";
+import { FormattedMessage } from 'react-intl';
 
 const ProjectsListPage: React.FC = () => {
   const [currentPage, setCurrentPage] = useQueryParamState('page', '1');
@@ -51,19 +51,23 @@ const ProjectsListPage: React.FC = () => {
   }
 
   if (projectsError) {
-    return <FormattedMessage id={"unable-to-load-contents"}/>;
+    return <FormattedMessage id={'unable-to-load-contents'} />;
   }
 
-  if (!projectsData){
-    return <FormattedMessage id={"no-records-found"}/>;
+  if (!projectsData) {
+    return <FormattedMessage id={'no-records-found'} />;
   }
 
   return (
     <>
       {projectsFetching && <IndeterminateProgressOverlay />}
       <div className="flex flex-col lg:flex-row gap-6 pl-1 my-2.5 relative z-30">
         <SearchBox defaultValue={search} onChange={handleSearchChange} />
-        <OrganizationSelector onSelect={handleOrganizationSelected} defaultOrgUid={orgUid} />
+        <OrganizationSelector
+          onSelect={handleOrganizationSelected}
+          defaultOrgUid={orgUid}
+          noSelectionLabel="All Organizations"
+        />
         <SyncIndicator detailed={true} orgUid={orgUid} />
         <OrgUidBadge orgUid={orgUid} />
       </div>

diff --git a/src/renderer/pages/UnitsList/UnitsListPage.tsx b/src/renderer/pages/UnitsList/UnitsListPage.tsx
@@ -1,16 +1,17 @@
 import React, { useCallback } from 'react';
 import { useGetUnitsQuery } from '@/api';
 import { useQueryParamState, useColumnOrderHandler } from '@/hooks';
-import {debounce, DebouncedFunc} from 'lodash';
+import { debounce, DebouncedFunc } from 'lodash';
 import {
   OrganizationSelector,
   IndeterminateProgressOverlay,
   SkeletonTable,
   SearchBox,
   UnitsListTable,
-  SyncIndicator
+  SyncIndicator,
+  OrgUidBadge,
 } from '@/components';
-import {FormattedMessage} from "react-intl";
+import { FormattedMessage } from 'react-intl';
 
 const UnitsListPage: React.FC = () => {
   const [currentPage, setCurrentPage] = useQueryParamState('page', '1');
@@ -50,19 +51,23 @@ const UnitsListPage: React.FC = () => {
   }
 
   if (unitsError) {
-    return <FormattedMessage id={"unable-to-load-contents"}/>;
+    return <FormattedMessage id={'unable-to-load-contents'} />;
   }
 
-  if (!unitsData){
-    return <FormattedMessage id={"no-records-found"}/>;
+  if (!unitsData) {
+    return <FormattedMessage id={'no-records-found'} />;
   }
 
   return (
     <>
       {unitsFetching && <IndeterminateProgressOverlay />}
       <div className="flex flex-col md:flex-row gap-6 pl-1 my-2.5 relative z-30">
         <SearchBox defaultValue={search} onChange={handleSearchChange} />
-        <OrganizationSelector onSelect={handleOrganizationSelected} defaultOrgUid={orgUid} />
+        <OrganizationSelector
+          onSelect={handleOrganizationSelected}
+          defaultOrgUid={orgUid}
+          noSelectionLabel="All Organizations"
+        />
         <SyncIndicator detailed={true} orgUid={orgUid} />
         <OrgUidBadge orgUid={orgUid} />
       </div>

diff --git a/src/renderer/routes/AppNavigator.tsx b/src/renderer/routes/AppNavigator.tsx
@@ -23,6 +23,7 @@ const AppNavigator: React.FC = () => {
             <Route path="/" element={<Navigate to={ROUTES.PROJECTS_LIST} />} />
             <Route path={ROUTES.PROJECTS_LIST} element={<Pages.ProjectsListPage />} />
             <Route path={ROUTES.UNITS_LIST} element={<Pages.UnitsListPage />} />
+            <Route path={ROUTES.AUDIT} element={<Pages.AuditPage />} />
             <Route path={ROUTES.GLOSSARY} element={<Pages.GlossaryPage />} />
             <Route path="*" element={<Navigate replace to={ROUTES.PROJECTS_LIST} />} />
           </Route>

diff --git a/src/renderer/translations/tokens/en-US.json b/src/renderer/translations/tokens/en-US.json
@@ -28,15 +28,14 @@
   "covered-by-ndc": "Covered By Ndc",
   "project-status": "Project Status",
   "unit-metric": "Unit Metric",
-  "validation-body": "Validation Body",
   "table": "Table",
   "timestamp": "Timestamp",
   "type": "Type",
   "root-hash": "Root Hash",
   "author": "Author",
   "comment": "Comment",
   "please-select-an-organization-to-view-audit-data": "Please select an organization to view audit data",
-  "audits": "Audits",
+  "audit": "Audit",
   "validation-body": "Validation Body",
   "glossary": "Glossary",
   "term": "Term",