Merge pull request #64 from credebl/57-empty-list-custom-component

Created Empty List Custom Component
credebl · Aug 2, 2023 · 98fa15a · 98fa15a
2 parents 9776f17 + 7f80c48
commit 98fa15a
Show file tree

Hide file tree

Showing 10 changed files with 378 additions and 287 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/api/organization.ts b/src/api/organization.ts
@@ -130,7 +130,7 @@ export const getOrgDashboard = async (orgId: string) => {
     }
 
     try {
-        return axiosGet(axiosPayload);
+        return await axiosGet(axiosPayload);
     }
     catch (error) {
         const err = error as Error
@@ -235,7 +235,7 @@ export const getOrganizationUsers = async () => {
     }
 
     try {
-        return axiosGet(axiosPayload);
+        return await axiosGet(axiosPayload);
     }
     catch (error) {
         const err = error as Error

diff --git a/src/app/NavBarSidebar.astro b/src/app/NavBarSidebar.astro
@@ -289,14 +289,14 @@ import SignOutButton  from '../components/SignOutButton/index'
 							</div>
 						</a> -->
 						<a
-						href="./invitations"
+						href={pathRoutes.users.invitations}
 						class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"
 					>
 								<svg
 								class="mx-auto mb-1 text-gray-500 w-7 h-7 dark:text-gray-400"
 								 xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-									  <path d="M9.978 13.2329L19.37 6.56494C19.312 6.50191 19.2498 6.44278 19.184 6.38794L11.2 0.650939C10.8566 0.392942 10.4392 0.252371 10.0097 0.25003C9.58011 0.247688 9.16123 0.383702 8.815 0.637939L0.8 6.39994C0.726113 6.46135 0.65692 6.52821 0.593 6.59994L9.978 13.2329Z" fill="#6B7280"/>
-									  <path d="M11.181 14.8639C10.8416 15.1166 10.4292 15.2521 10.006 15.2499C9.57095 15.2509 9.14735 15.1106 8.799 14.8499L0 8.62694V17.9999C0 18.5304 0.210714 19.0391 0.585786 19.4142C0.960859 19.7892 1.46957 19.9999 2 19.9999H18C18.5304 19.9999 19.0391 19.7892 19.4142 19.4142C19.7893 19.0391 20 18.5304 20 17.9999V8.57294L11.181 14.8639Z" fill="#6B7280"/>
+									<path d="M9.978 13.2329L19.37 6.56494C19.312 6.50191 19.2498 6.44278 19.184 6.38794L11.2 0.650939C10.8566 0.392942 10.4392 0.252371 10.0097 0.25003C9.58011 0.247688 9.16123 0.383702 8.815 0.637939L0.8 6.39994C0.726113 6.46135 0.65692 6.52821 0.593 6.59994L9.978 13.2329Z" fill="#6B7280"/>
+									<path d="M11.181 14.8639C10.8416 15.1166 10.4292 15.2521 10.006 15.2499C9.57095 15.2509 9.14735 15.1106 8.799 14.8499L0 8.62694V17.9999C0 18.5304 0.210714 19.0391 0.585786 19.4142C0.960859 19.7892 1.46957 19.9999 2 19.9999H18C18.5304 19.9999 19.0391 19.7892 19.4142 19.4142C19.7893 19.0391 20 18.5304 20 17.9999V8.57294L11.181 14.8639Z" fill="#6B7280"/>
 									</svg>
 
 						<div class="text-sm font-medium text-gray-900 dark:text-white">

diff --git a/src/components/EmptyListComponent/index.tsx b/src/components/EmptyListComponent/index.tsx
@@ -0,0 +1,29 @@
+import { ReactElement } from "react";
+
+export const EmptyListMessage = ({ message, description, buttonContent, svgComponent, onClick }
+    : {
+        message: string,
+        description: string,
+        buttonContent?: string,
+        svgComponent?: ReactElement,
+
+        onClick?: () => void,
+    }) => {
+    return (
+        <div className='flex mt-20 justify-start items-center flex-col'>
+            <p className='text-2xl font-bold mb-4'>{message}</p>
+            <p className='text-lg mb-4'>{description}</p>
+            {
+                buttonContent
+                && <button
+                    className='group flex h-min p-3 mt-10 items-center justify-center p-0.5 font-medium focus:z-10 border border-transparent enabled:hover:bg-cyan-800 dark:enabled:hover:bg-cyan-700 text-base font- text-center text-white bg-primary-700 rounded-lg hover:bg-accent-00 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800&quot;'
+                    onClick={onClick}>
+                    {svgComponent}
+                    <span className="ml-2">{buttonContent}</span>
+                </button>
+            }
+
+        </div>
+    )
+};
+
diff --git a/src/components/Resources/Schema/Schemas.tsx b/src/components/Resources/Schema/Schemas.tsx
@@ -12,6 +12,7 @@ import SearchInput from '../../SearchInput';
 import { getAllSchemas } from '../../../api/Schema';
 import { getFromLocalStorage } from '../../../api/Auth';
 import { pathRoutes } from '../../../config/pathRoutes';
+import { EmptyListMessage } from '../../EmptyListComponent';
 
 const SchemaList = () => {
   const [schemaList, setSchemaList] = useState([])
@@ -57,7 +58,9 @@ const SchemaList = () => {
     }
   };
 
-
+  const createSchema = () => {
+    window.location.href = `${pathRoutes.organizations.createSchema}?OrgId=${orgId}`
+  }
 
   useEffect(() => {
     getSchemaList(schemaListAPIParameter)
@@ -102,9 +105,7 @@ const SchemaList = () => {
             </div>
             <Button
               id='createSchemaButton'
-              onClick={() => {
-                window.location.href = `${pathRoutes.organizations.createSchema}?OrgId=${orgId}`
-              }}
+              onClick={createSchema}
               className='text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800'
             ><svg className="pr-2" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24">
             <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z"/>
@@ -127,16 +128,17 @@ const SchemaList = () => {
             </Alert>
           }
           {loading
-            ? <div className="flex items-center justify-center mb-4">
+            ? (<div className="flex items-center justify-center mb-4">
               <Spinner
                 color="info"
               />
-            </div>
+            </div>)
             :
+            schemaList && schemaList.length > 0 ? (
+
             <div className='Flex-wrap' style={{ display: 'flex', flexDirection: 'column' }}>
               <div className="mt-1 grid w-full grid-cols-1 gap-4 mt-0 mb-4 xl:grid-cols-2 2xl:grid-cols-3">
-                {schemaList && schemaList.length > 0 &&
-                  schemaList.map((element, key) => (
+                  { schemaList.map((element, key) => (
                     <div className='p-2' key={key}>
                       <SchemaCard schemaName={element['name']} version={element['version']} schemaId={element['schemaLedgerId']} issuerDid={element['issuerId']} attributes={element['attributes']} created={element['createDateTime']} />
                     </div>
@@ -155,7 +157,15 @@ const SchemaList = () => {
                   totalPages={0}
                 />
               </div>
-            </div>
+            </div> ) : (<EmptyListMessage
+                message={'No Schemas'}
+                description={'Get started by creating a new Schema'}
+                buttonContent={'Create Schema'} 
+                svgComponent={<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24">
+                <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
+              </svg>} 
+              onClick={createSchema}
+                 />)
           }
         </div>
       </div>

diff --git a/src/components/organization/OrganizationsList.tsx b/src/components/organization/OrganizationsList.tsx
@@ -14,6 +14,7 @@ import SearchInput from '../SearchInput';
 import { getOrganizations } from '../../api/organization';
 import { pathRoutes } from '../../config/pathRoutes';
 import { setToLocalStorage } from '../../api/Auth';
+import { EmptyListMessage } from '../EmptyListComponent';
 
 const initialPageState = {
   pageNumber: 1,
@@ -44,7 +45,7 @@ const OrganizationsList = () => {
   }
 
   //Fetch the user organization list
-  const getAllOrganizations = async () => {    
+  const getAllOrganizations = async () => {
 
     setLoading(true)
     const response = await getOrganizations(currentPage.pageNumber, currentPage.pageSize, searchText);
@@ -60,19 +61,16 @@ const OrganizationsList = () => {
         return userOrg;
       })
 
-      if(orgList.length === 0){
-          setError('No Data Found')
-      }
-
       setOrganizationList(orgList)
       setCurrentPage({
         ...currentPage,
         total: totalPages
       })
-    } else {
-      setError(response as string)
     }
+    else{
+      setError(response as string)
 
+    }
     setLoading(false)
   }
 
@@ -96,14 +94,14 @@ const OrganizationsList = () => {
   }, [searchText, openModal, currentPage.pageNumber])
 
   useEffect(() => {
-    const queryParameters = new URLSearchParams( window?.location?.search)
-    const isModel =  queryParameters.get("orgModal") || ''
+    const queryParameters = new URLSearchParams(window?.location?.search)
+    const isModel = queryParameters.get("orgModal") || ''
 
-    if(isModel !== ''){
+    if (isModel !== '') {
       props.setOpenModal(true)
     }
 
-}, [])
+  }, [])
 
   //onCHnage of Search input text
   const searchInputChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -135,13 +133,13 @@ const OrganizationsList = () => {
             />
             <Button
               onClick={createOrganizationModel}
-              className='text-base font-   text-center text-white bg-primary-700 rounded-lg hover:bg-accent-00 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
+              className='text-base font-text-center text-white bg-primary-700 rounded-lg hover:bg-accent-00 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
             >
-               <div className='pr-3'>
-              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24">
-  <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z"/>
-</svg>
-</div>
+              <div className='pr-3'>
+                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24">
+                  <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
+                </svg>
+              </div>
 
               Create
             </Button>
@@ -153,6 +151,7 @@ const OrganizationsList = () => {
             setOpenModal={
               props.setOpenModal
             } />
+
           <AlertComponent
             message={message ? message : error}
             type={message ? 'success' : 'failure'}
@@ -161,13 +160,14 @@ const OrganizationsList = () => {
               setError(null)
             }}
           />
+
           {loading
             ? <div className="flex items-center justify-center mb-4">
               <Spinner
                 color="info"
               />
             </div>
-            : organizationsList && organizationsList?.length > 0 && <div className="mt-1 grid w-full grid-cols-1 gap-4 mt-0 mb-4 xl:grid-cols-2 2xl:grid-cols-3">
+            : organizationsList && organizationsList?.length > 0 ? (<div className="mt-1 grid w-full grid-cols-1 gap-4 mt-0 mb-4 xl:grid-cols-2 2xl:grid-cols-3">
               {
                 organizationsList.map((org) => (
                   <Card onClick={() => redirectOrgDashboard(org.id)} className='transform transition duration-500 hover:scale-105 hover:bg-gray-50 cursor-pointer'>
@@ -209,8 +209,15 @@ const OrganizationsList = () => {
                   </Card>
                 ))
               }
-
-            </div>
+            </div>)
+              : organizationsList && (<EmptyListMessage
+                message={'No Organization'}
+                description={'Get started by creating a new Organization'}
+                buttonContent={'Create Organization'}
+                onClick={createOrganizationModel}
+                svgComponent={<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24">
+                  <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
+                </svg>} />)
           }
 
           <div className="flex items-center justify-end mb-4">