Message to be displayed for empty tables (Issue 578) (#588)

* Events Navbar persistent * Relevant messages displayed for empty tables * Prettier
IEDCMEC · Dec 13, 2024 · ddf2b0f · ddf2b0f
1 parent 1fb603a
commit ddf2b0f
Show file tree

Hide file tree

Showing 9 changed files with 119 additions and 6 deletions.
diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/attributes/[attributeId]/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/attributes/[attributeId]/index.jsx
@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
-import { Button, Flex } from '@chakra-ui/react';
+import { Text, Button, Flex } from '@chakra-ui/react';
 
 import DashboardLayout from '@/layouts/DashboardLayout';
 import DataDisplay from '@/components/DataDisplay';
@@ -98,6 +98,18 @@ export default function AttributeById() {
           router.push(`/${orgId}/events/${eventId}/participants/${row.id}`);
         }}
       />
+      {attributeDetails.length === 0 ? (
+        <div style={{ textAlign: 'center', margin: '20px' }}>
+          <Text fontSize="25px" color={'blackAlpha.800'} mb={3}>
+            No participants assigned
+          </Text>
+          <Text color={'gray.500'} mb={3}>
+            Assign participants to see details
+          </Text>
+        </div>
+      ) : (
+        <></>
+      )}
     </DashboardLayout>
   );
 }
diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/attributes/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/attributes/index.jsx
@@ -97,6 +97,7 @@ import {
   ModalHeader,
   ModalBody,
   ModalCloseButton,
+  Text,
   useDisclosure,
 } from '@chakra-ui/react';
 import DashboardLayout from '@/layouts/DashboardLayout';
@@ -150,13 +151,14 @@ export default function Attributes() {
       headerButton={
         <>
           <Button onClick={onOpen} isLoading={loading}>
-            Attribute
+            Add Attribute
           </Button>
         </>
       }
       debugInfo={JSON.stringify(attributes)}
     >
       <NavigationMenu orgId={orgId} eventId={eventId} />
+
       <DataDisplay
         loading={loading}
         columns={columns}
@@ -165,6 +167,18 @@ export default function Attributes() {
           router.push(`/${orgId}/events/${eventId}/attributes/${row.id}`);
         }}
       />
+      {attributes.length === 0 ? (
+        <div style={{ textAlign: 'center', margin: '20px' }}>
+          <Text fontSize="25px" color={'blackAlpha.800'} mb={3}>
+            No attributes created
+          </Text>
+          <Text color={'gray.500'} mb={3}>
+            Add attributes and assign participants to see details
+          </Text>
+        </div>
+      ) : (
+        <></>
+      )}
 
       <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay />

diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/extras/[extraId]/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/extras/[extraId]/index.jsx
@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
-import { Button, Flex } from '@chakra-ui/react';
+import { Text, Button, Flex } from '@chakra-ui/react';
 
 import DashboardLayout from '@/layouts/DashboardLayout';
 import DataDisplay from '@/components/DataDisplay';
@@ -112,6 +112,18 @@ export default function ExtraById() {
           router.push(`/${orgId}/events/${eventId}/participants/${row.id}`);
         }}
       />
+      {extraDetails.length === 0 ? (
+        <div style={{ textAlign: 'center', margin: '20px' }}>
+          <Text fontSize="25px" color={'blackAlpha.800'} mb={3}>
+            No participants assigned
+          </Text>
+          <Text color={'gray.500'} mb={3}>
+            Assign participants for extras to see details
+          </Text>
+        </div>
+      ) : (
+        <></>
+      )}
     </DashboardLayout>
   );
 }
diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/extras/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/extras/index.jsx
@@ -103,6 +103,7 @@ import {
   ModalHeader,
   ModalBody,
   ModalCloseButton,
+  Text,
   useDisclosure,
 } from '@chakra-ui/react';
 import DashboardLayout from '@/layouts/DashboardLayout';
@@ -176,6 +177,18 @@ export default function Extras() {
           router.push(`/${orgId}/events/${eventId}/extras/${row.id}`);
         }}
       />
+      {extras.length === 0 ? (
+        <div style={{ textAlign: 'center', margin: '20px' }}>
+          <Text fontSize="25px" color={'blackAlpha.800'} mb={3}>
+            No extras created
+          </Text>
+          <Text color={'gray.500'} mb={3}>
+            Add extras assigned and checked in to see details
+          </Text>
+        </div>
+      ) : (
+        <></>
+      )}
 
       {/* Modal for creating a new extra */}
       <Modal isOpen={isOpen} onClose={onClose}>

diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/[participantId]/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/[participantId]/index.jsx
@@ -95,6 +95,18 @@ export default function ParticipantById() {
         <Text>Extras - {participant.numberOfExtrasCheckedIn} checked in</Text>
         <DataDisplay loading={loading} columns={extraColumns} rows={participantExtras} />
       </Flex>
+      {participant.length === 0 ? (
+        <div style={{ textAlign: 'center', margin: '20px' }}>
+          <Text fontSize="25px" color={'blackAlpha.800'} mb={3}>
+            No participants created
+          </Text>
+          <Text color={'gray.500'} mb={3}>
+            Add participants and assignment to see details
+          </Text>
+        </div>
+      ) : (
+        <></>
+      )}
     </DashboardLayout>
   );
 }
diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/index.jsx
@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
-import { Button, Flex } from '@chakra-ui/react';
+import { Button, Flex, Text } from '@chakra-ui/react';
 
 import DashboardLayout from '@/layouts/DashboardLayout';
 
@@ -111,6 +111,18 @@ export default function ParticipantsCheckIn() {
           router.push(`/${orgId}/events/${eventId}/participants/${row.id}`);
         }}
       />
+      {participantsCheckIn.length === 0 ? (
+        <div style={{ textAlign: 'center', margin: '20px' }}>
+          <Text fontSize="25px" color={'blackAlpha.800'} mb={3}>
+            No participants checked-in
+          </Text>
+          <Text color={'gray.500'} mb={3}>
+            Add details about the checked-in participants
+          </Text>
+        </div>
+      ) : (
+        <></>
+      )}
     </DashboardLayout>
   );
 }
diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/index.jsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Button, useDisclosure } from '@chakra-ui/react';
+import { Button, Text, useDisclosure } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import DashboardLayout from '@/layouts/DashboardLayout';
 import DataDisplay from '@/components/DataDisplay';
@@ -175,6 +175,18 @@ export default function Participants() {
     >
       <NavigationMenu orgId={orgId} eventId={eventId} />
       <DataDisplay loading={loading} rows={participants} columns={columns} />
+      {participants.length === 0 ? (
+        <div style={{ textAlign: 'center', margin: '20px' }}>
+          <Text fontSize="25px" color={'blackAlpha.800'} mb={3}>
+            No participants
+          </Text>
+          <Text color={'gray.500'} mb={3}>
+            Add participants for the event to see details
+          </Text>
+        </div>
+      ) : (
+        <></>
+      )}
       <MultiStepModal
         isOpen={qrIsOpen}
         onClose={qROnClose}

diff --git a/apps/web-admin/src/pages/[orgId]/events/index.jsx b/apps/web-admin/src/pages/[orgId]/events/index.jsx
@@ -112,6 +112,7 @@ export default function Events() {
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import {
+  Text,
   Button,
   Modal,
   ModalOverlay,
@@ -163,7 +164,7 @@ export default function Events() {
     {}, // headers
     {}, // options
     (data) => {
-      console.log(data.data.events);
+      console.log(`events: ${data.data.events}`);
       setEvents(data.data.events || []);
     },
   );
@@ -207,6 +208,18 @@ export default function Events() {
           router.push(`/${orgId}/events/${row.id}/participants`);
         }}
       />
+      {events.length === 0 ? (
+        <div style={{ textAlign: 'center', margin: '20px' }}>
+          <Text fontSize="25px" color={'blackAlpha.800'} mb={3}>
+            No events for this organization
+          </Text>
+          <Text color={'gray.500'} mb={3}>
+            Add events for this organization to see details
+          </Text>
+        </div>
+      ) : (
+        <></>
+      )}
 
       <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay />

diff --git a/apps/web-admin/src/pages/[orgId]/members/index.jsx b/apps/web-admin/src/pages/[orgId]/members/index.jsx
@@ -88,6 +88,7 @@ import {
   ModalHeader,
   ModalBody,
   ModalCloseButton,
+  Text,
   useDisclosure,
 } from '@chakra-ui/react';
 import DashboardLayout from '@/layouts/DashboardLayout';
@@ -143,6 +144,18 @@ export default function OrganizationMembers() {
       debugInfo={members}
     >
       <DataDisplay loading={loading} columns={columns} rows={members} />
+      {members.length === 0 ? (
+        <div style={{ textAlign: 'center', margin: '20px' }}>
+          <Text fontSize="25px" color={'blackAlpha.800'} mb={3}>
+            No members for the event
+          </Text>
+          <Text color={'gray.500'} mb={3}>
+            Add members for the event and their details
+          </Text>
+        </div>
+      ) : (
+        <></>
+      )}
 
       <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay />