Skip to content

Commit

Permalink
feat: created an empty list custom component
Browse files Browse the repository at this point in the history 
Signed-off-by: bhavanakarwade <[email protected]>
  • Loading branch information
@bhavanakarwade
bhavanakarwade committed Aug 2, 2023
1 parent 9776f17 commit 00c533b
Show file tree
Hide file tree
Showing 8 changed files with 211 additions and 174 deletions.
4 changes: 2 additions & 2 deletions src/api/organization.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -235,7 +235,7 @@ export const getOrganizationUsers = async () => {
}

try {
return axiosGet(axiosPayload);
return await axiosGet(axiosPayload);
}
catch (error) {
const err = error as Error
Expand Down
29 changes: 29 additions & 0 deletions src/components/EmptyListComponent/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
)
};

28 changes: 19 additions & 9 deletions src/components/Resources/Schema/Schemas.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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([])
Expand Down Expand Up @@ -57,7 +58,9 @@ const SchemaList = () => {
}
};


const createSchema = () => {
window.location.href = `${pathRoutes.organizations.createSchema}?OrgId=${orgId}`
}

useEffect(() => {
getSchemaList(schemaListAPIParameter)
Expand Down Expand Up @@ -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"/>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
49 changes: 23 additions & 26 deletions src/components/organization/OrganizationsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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);
Expand All @@ -60,19 +61,16 @@ const OrganizationsList = () => {
return userOrg;
})

if(orgList.length === 0){
setError('No Data Found')
if (orgList.length === 0) {
setError('No Data Found')
}

setOrganizationList(orgList)
setCurrentPage({
...currentPage,
total: totalPages
})
} else {
setError(response as string)
}

setLoading(false)
}

Expand All @@ -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>) => {
Expand Down Expand Up @@ -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>
Expand All @@ -153,21 +151,13 @@ const OrganizationsList = () => {
setOpenModal={
props.setOpenModal
} />
<AlertComponent
message={message ? message : error}
type={message ? 'success' : 'failure'}
onAlertClose={() => {
setMessage(null)
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'>
Expand Down Expand Up @@ -210,7 +200,14 @@ const OrganizationsList = () => {
))
}

</div>
</div>) : (<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">
Expand Down
29 changes: 14 additions & 15 deletions src/components/organization/invitations/Invitations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { TextTittlecase } from '../../../utils/TextTransform';
import { apiStatusCodes } from '../../../config/CommonConstant';
import { getOrganizationInvitations } from '../../../api/invitations';
import { getOrganizations } from '../../../api/organization';
import { EmptyListMessage } from '../../EmptyListComponent';

const initialPageState = {
pageNumber: 1,
Expand Down Expand Up @@ -47,6 +48,8 @@ const Invitations = () => {
const response = await getOrganizationInvitations(currentPage.pageNumber, currentPage.pageSize, searchText);
const { data } = response as AxiosResponse

setLoading(false)

if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {

const totalPages = data?.data?.totalPages;
Expand All @@ -61,11 +64,7 @@ const Invitations = () => {
...currentPage,
total: totalPages
})
} else {
setError(response as string)
}

setLoading(false)
}
}

//This useEffect is called when the searchText changes
Expand Down Expand Up @@ -124,21 +123,13 @@ const Invitations = () => {
props.setOpenModal
} />

<AlertComponent
message={message ? message : error}
type={message ? 'success' : 'failure'}
onAlertClose={() => {
setMessage(null)
setError(null)
}}
/>
{loading
? <div className="flex items-center justify-center mb-4">
<Spinner
color="info"
/>
</div>
: invitationsList && invitationsList?.length > 0 && <div
: invitationsList && invitationsList?.length > 0 ? (<div
className="p-2 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-3 dark:bg-gray-800"
>
<div className="flow-root">
Expand Down Expand Up @@ -227,7 +218,15 @@ const Invitations = () => {
}
</ul>
</div>
</div>
</div>) : (<EmptyListMessage
message={'No Invitations'}
description={'Get started by inviting a users'}
buttonContent={'Invite'}
onClick={createInvitationsModel}
svgComponent = {<svg className='pr-2' xmlns="http://www.w3.org/2000/svg" width="36" height="18" fill="none" viewBox="0 0 42 24">
<path fill="#fff" d="M37.846 0H9.231a3.703 3.703 0 0 0-3.693 3.692v1.385c0 .508.416.923.924.923a.926.926 0 0 0 .923-.923V3.692c0-.184.046-.369.092-.554L17.815 12 7.477 20.861a2.317 2.317 0 0 1-.092-.553v-1.385A.926.926 0 0 0 6.462 18a.926.926 0 0 0-.924.923v1.385A3.703 3.703 0 0 0 9.231 24h28.615a3.703 3.703 0 0 0 3.693-3.692V3.692A3.703 3.703 0 0 0 37.846 0ZM8.862 1.892c.092-.046.23-.046.369-.046h28.615c.139 0 .277 0 .37.046L24.137 13.938a.97.97 0 0 1-1.2 0L8.863 1.893Zm28.984 20.262H9.231c-.139 0-.277 0-.37-.046L19.247 13.2l2.492 2.17a2.67 2.67 0 0 0 1.8.691 2.67 2.67 0 0 0 1.8-.692l2.493-2.169 10.384 8.908c-.092.046-.23.046-.369.046Zm1.846-1.846c0 .184-.046.369-.092.553L29.262 12 39.6 3.138c.046.185.092.37.092.554v16.616ZM2.77 9.692c0-.507.416-.923.923-.923h5.539c.507 0 .923.416.923.923a.926.926 0 0 1-.923.923h-5.54a.926.926 0 0 1-.923-.923Zm6.462 5.539H.923A.926.926 0 0 1 0 14.308c0-.508.415-.923.923-.923h8.308c.507 0 .923.415.923.923a.926.926 0 0 1-.923.923Z"/>
</svg>}
/>)
}

<div className="flex items-center justify-end mb-4">
Expand Down
Loading

0 comments on commit 00c533b

Please sign in to comment.