Skip to content

Commit

Permalink
Merge pull request #72 from credebl/291-send-invitation-design
Browse files Browse the repository at this point in the history
Send invitation design: 291
  • Loading branch information
nishad-ayanworks authored Aug 3, 2023
2 parents 4a4ac78 + 87478b0 commit 7b76aac
Show file tree
Hide file tree
Showing 9 changed files with 118 additions and 77 deletions.
2 changes: 1 addition & 1 deletion src/app/NavBarStacked.astro
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { asset, url } from '../lib/data.js';
<div class="container py-3 mx-auto">
<div class="flex items-center justify-between">
<div class="flex items-center justify-start">
<a class="flex mr-4">
<a class="flex mr-4" href='/'>
<img
src='/images/CREDEBL_ICON.png'
class="h-8 mr-3"
Expand Down
19 changes: 14 additions & 5 deletions src/components/AlertComponent/index.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,27 @@
import { Alert, Avatar, Spinner } from 'flowbite-react';
import { Alert } from 'flowbite-react';

export const AlertComponent = ({ message, type, viewButton, onAlertClose }: { message: string | null, type: string, viewButton?: boolean, onAlertClose: () => void }) => {

export const AlertComponent = ({ message, type, onAlertClose }: { message: string | null, type: string, onAlertClose: () => void }) => {


return message !== null ? <Alert
className='mb-4'
color={type}
onDismiss={() => onAlertClose()}
>
<span>
<span className='flex flex-wrap justify-between items-center'>
<p>
{message}
</p>

{
viewButton
&& <p className='md:w-32 lg:w-48 text-base text-primary-700 text-right'>
View more...
</p>
}

</span>

</Alert>
: <></>
: <></>
}
8 changes: 4 additions & 4 deletions src/components/EmptyListComponent/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ReactElement } from "react";
import type { ReactElement } from "react";

export const EmptyListMessage = ({ message, description, buttonContent, svgComponent, onClick }
: {
Expand All @@ -11,12 +11,12 @@ export const EmptyListMessage = ({ message, description, buttonContent, svgCompo
}) => {
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>
<p className='text-2xl font-bold mb-4 text-gray-900 dark:text-white'>{message}</p>
<p className='text-lg mb-4 text-gray-900 dark:text-white'>{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;'
className='group flex h-min p-3 mt-5 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>
Expand Down
16 changes: 10 additions & 6 deletions src/components/UserDashBoard.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import type { AxiosResponse } from "axios";
import { useEffect, useState } from "react";
import { getUserInvitations } from "../api/invitations";
import { getOrganizations } from "../api/organization";
import { apiStatusCodes } from "../config/CommonConstant";
import { pathRoutes } from "../config/pathRoutes";

import { AlertComponent } from "./AlertComponent";
import type { Organisation } from "./organization/interfaces";
import type { AxiosResponse } from "axios";
import CustomAvatar from '../components/Avatar'
import type { Organisation } from "./organization/interfaces";
import { apiStatusCodes } from "../config/CommonConstant";
import { getOrganizations } from "../api/organization";
import { getUserInvitations } from "../api/invitations";
import { pathRoutes } from "../config/pathRoutes";

const initialPageState = {
pageNumber: 1,
Expand All @@ -17,6 +18,7 @@ const initialPageState = {
const UserDashBoard = () => {

const [message, setMessage] = useState<string | null>(null)
const [viewButton, setViewButton] = useState<boolean>(false)
const [error, setError] = useState<string | null>(null)
const [currentPage, setCurrentPage] = useState(initialPageState);
const [loading, setLoading] = useState<boolean>(false)
Expand All @@ -37,6 +39,7 @@ const UserDashBoard = () => {

if (invitationList.length > 0) {
setMessage('You have some pending received invitations')
setViewButton(true)
}

setCurrentPage({
Expand Down Expand Up @@ -91,6 +94,7 @@ const UserDashBoard = () => {
<AlertComponent
message={message ? message : error}
type={message ? 'warning' : 'failure'}
viewButton={viewButton}
onAlertClose={() => {
setMessage(null)
setError(null)
Expand Down
27 changes: 14 additions & 13 deletions src/components/organization/OrgDropDown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@ import { pathRoutes } from '../../config/pathRoutes';
const OrgDropDown = () => {
const [orgList, setOrgList] = useState<Organisation[]>([]);
const [activeOrg, setactiveOrg] = useState<Organisation | null>(null)



useEffect(() => {
getAllorgs()
Expand All @@ -36,31 +34,34 @@ const OrgDropDown = () => {
};

const setActiveOrg = async (organizations: Organisation[]) => {

let activeOrg: Organisation | null = null

const orgId = await getFromLocalStorage(storageKeys.ORG_ID)
if (orgId) {
activeOrg = organizations?.find(org => org.id === Number(orgId)) as Organisation
setactiveOrg(activeOrg || null)
await setToLocalStorage(storageKeys.ORG_ID, orgId.toString());
} else {
activeOrg = organizations && organizations[0]
setactiveOrg(activeOrg || null)
await setToLocalStorage(storageKeys.ORG_ID, activeOrg.id.toString());

}

const roles: string[] = activeOrg?.userOrgRoles.map(role => role.orgRole.name)
activeOrg.roles = roles
if (activeOrg) {

await setToLocalStorage(storageKeys.ORG_ID, activeOrg.id.toString());
const roles: string[] = activeOrg?.userOrgRoles.map(role => role.orgRole.name)
activeOrg.roles = roles

await setToLocalStorage(storageKeys.ORG_ROLES, roles.toString());
}

await setToLocalStorage(storageKeys.ORG_ROLES, roles.toString());

}

const redirectToCreateOrgModal = () => {
window.location.href = '/organizations?orgModal=true';

}

return (
Expand All @@ -75,8 +76,8 @@ const OrgDropDown = () => {

<>
{
activeOrg ?
<>
activeOrg
? <>
{activeOrg.logoUrl ? (
<CustomAvatar size="20" src={activeOrg?.logoUrl} round />
) : (
Expand Down Expand Up @@ -136,8 +137,8 @@ const OrgDropDown = () => {
onClick={redirectToCreateOrgModal}
>
<svg xmlns="http://www.w3.org/2000/svg" className='pr-2 dark:text-white' width="24" height="24" fill="none" viewBox="0 0 24 24">
<path fill="currentColor" 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>
<path fill="currentColor" 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>


Create Organization
Expand Down
2 changes: 1 addition & 1 deletion src/components/organization/OrganizationsList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ const OrganizationsList = () => {
return (
<span
key={index}
className="m-1 bg-primary-50 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-primary-700"
className="m-1 bg-primary-50 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300"
>
{role.charAt(0).toUpperCase() + role.slice(1)}
</span>
Expand Down
59 changes: 29 additions & 30 deletions src/components/organization/invitations/SendInvitationModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,12 @@ interface Invitations {


interface RoleI {
id: number
name: string
id: number
name: string
}


const SendInvitationModal = (props: { openModal: boolean; setMessage: (message: string)=> void ; setOpenModal: (flag: boolean)=> void }) => {
const SendInvitationModal = (props: { openModal: boolean; setMessage: (message: string) => void; setOpenModal: (flag: boolean) => void }) => {

const [loading, setLoading] = useState<boolean>(false)

Expand All @@ -47,7 +47,7 @@ const SendInvitationModal = (props: { openModal: boolean; setMessage: (message:
const { data } = resRoles as AxiosResponse

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

const roles: Array<RoleI> = data?.data.response

const memberRole = roles.find(role => role.name === 'member')
Expand Down Expand Up @@ -89,7 +89,7 @@ const SendInvitationModal = (props: { openModal: boolean; setMessage: (message:

const sendInvitations = async () => {

setLoading(true)
setLoading(true)

const invitationPayload = invitations.map(invitation => {
return {
Expand Down Expand Up @@ -124,13 +124,13 @@ const SendInvitationModal = (props: { openModal: boolean; setMessage: (message:
}>
<Modal.Header>Send Invitations</Modal.Header>
<Modal.Body>
<AlertComponent
<AlertComponent
message={erroMsg}
type={'error'}
onAlertClose = {() => {
onAlertClose={() => {
setErrMsg(null)
}}
/>
/>
<Formik
initialValues={initialInvitationData}
validationSchema={
Expand Down Expand Up @@ -180,12 +180,11 @@ const SendInvitationModal = (props: { openModal: boolean; setMessage: (message:

<div className="w-1/3">
<Button type="submit"
color="gray"
className='mt-6 float-right 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-700 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"/>
</svg>

className='mt-6 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" />
</svg>

ADD
</Button>
</div>
Expand All @@ -197,10 +196,10 @@ const SendInvitationModal = (props: { openModal: boolean; setMessage: (message:
)}

</Formik>
{
invitations.length > 0 &&
<div>
<div

<div>
{
invitations.length > 0 && <div
className="p-2 my-2 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-2 dark:bg-gray-800"
>
<ul className="divide-y divide-gray-200 dark:divide-gray-700">
Expand Down Expand Up @@ -248,19 +247,19 @@ const SendInvitationModal = (props: { openModal: boolean; setMessage: (message:
}
</ul>
</div>
<div className="mt-4 flex justify-end">
<Button
onClick={sendInvitations}
isProcessing={loading}
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"'
>
Send
</Button>
</div>
}

<div className="mt-4 flex justify-end">
<Button
onClick={sendInvitations}
disabled={invitations.length === 0}
isProcessing={loading}
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"'
>
Send
</Button>
</div>

}

</div>

</Modal.Body>

Expand Down
Loading

0 comments on commit 7b76aac

Please sign in to comment.