Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: Users List and Invitations. #472

Merged
merged 3 commits into from
Dec 5, 2023
Merged

refactor: Users List and Invitations. #472

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1a8a8fa
refactor:ui enhancement
pranalidhanavade Dec 4, 2023
9109ce1
Merge branch 'develop' of https://github.com/credebl/studio into ui-e…
pranalidhanavade Dec 5, 2023
428ccb0
refactor:user list and invitations
pranalidhanavade Dec 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions src/components/Ecosystem/EcosystemList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,10 +139,15 @@ const EcosystemList = () => {
<div className="mb-2 col-span-full xl:mb-2">
<BreadCrumbs />
</div>
<div className="mb-4 flex justify-between">
<div className="mb-4 flex justify-between flex-wrap gap-4 items-center">
<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
Ecosystems
</h1>
<div className="ml-auto">
<SearchInput
onInputChange={searchInputChange}
/>
</div>
{showCreateButton && (
<RoleViewButton
buttonTitle="Create"
Expand All @@ -169,9 +174,7 @@ const EcosystemList = () => {
</div>
<div>
<div className="p-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800 min-h-100/18rem flex flex-col justify-between">
<div className="flex items-center justify-between mb-4">
<SearchInput onInputChange={searchInputChange} />
</div>


<AlertComponent
message={message ?? error}
Expand Down
2 changes: 1 addition & 1 deletion src/components/EcosystemInvite/SentInvitations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ const SentInvitations = () => {
/>

{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="p-2 mb-4 bg-white rounded-lg shadow-sm 2xl:col-span-2 sm:p-3 border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
<div className="flow-root">
<ul className="divide-y divide-gray-200 dark:divide-gray-700">
{invitationsList.map((invitation) => (
Expand Down
15 changes: 9 additions & 6 deletions src/components/Resources/Schema/SchemasList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { getFromLocalStorage } from '../../../api/Auth';
import { pathRoutes } from '../../../config/pathRoutes';
import { getOrganizationById } from '../../../api/organization';
import { ICheckEcosystem, checkEcosystem } from '../../../config/ecosystem';
import React from 'react';

const SchemaList = (props: { schemaSelectionCallback: (schemaId: string, schemaDetails: SchemaDetails) => void; }) => {
const [schemaList, setSchemaList] = useState([])
Expand Down Expand Up @@ -170,21 +171,23 @@ const SchemaList = (props: { schemaSelectionCallback: (schemaId: string, schemaD
<div className="mb-4 col-span-full xl:mb-2">
<BreadCrumbs />
</div>
<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
Schemas
</h1>

<div>
<div
className=""
>
<div className="flex flex-col items-center justify-between mb-4 pr-4 sm:flex-row">
<div id='schemasSearchInput' className='mb-2 pl-0 sm:pl-2 flex space-x-2 items-end'>

<div className="mb-4 flex justify-between flex-wrap gap-4 items-center">
<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
Schemas
</h1>
<div id='schemasSearchInput' className='mb-2 pl-0 sm:pl-2 flex space-x-2 items-end ml-auto'>
<SearchInput
onInputChange={onSearch}
/>

<select onChange={handleFilter} id="schamfilter"
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 ">
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 gap-4">
<option selected>Organization's schema</option>
{options.map((opt) => (
<option
Expand Down
55 changes: 25 additions & 30 deletions src/components/organization/OrganizationsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,37 +222,32 @@ const OrganizationsList = () => {
<div className="mb-2 col-span-full xl:mb-2">
<BreadCrumbs />
</div>
<div className="mb-2 flex justify-between">
<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
Organizations
</h1>
<RoleViewButton
buttonTitle="Create"
feature={Features.CRETAE_ORG}
svgComponent={
<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>
}
onClickEvent={createOrganizationModel}
/>
</div>

<div className='mb-4 flex justify-between flex-wrap gap-4 items-center'>
<h1 className="ml-1 text-xl font-semibold mb-4 flex justify-between flex-wrap gap-4 text-gray-900 sm:text-2xl dark:text-white">
Organizations
</h1>
<div className="ml-auto">
<SearchInput
onInputChange={searchInputChange}
/>
</div>
<RoleViewButton
buttonTitle='Create'
feature={Features.CRETAE_ORG}
svgComponent={
<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>
}
onClickEvent={createOrganizationModel}
/>

</div>
<div>
<div className="p-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
<div className="flex items-center justify-between mb-4">
<SearchInput onInputChange={searchInputChange} />
</div>
<div className="p-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">

<CreateEcosystemOrgModal
openModal={props.openModal}
Expand Down
13 changes: 4 additions & 9 deletions src/components/organization/invitations/Invitations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,14 +101,12 @@ const Invitations = () => {
const createInvitationsModel = () => {
props.setOpenModal(true)
}


return (
<div>
<div
className="p-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
>
<div className="flex items-center justify-between mb-4">
<div className="flex items-end justify-end mb-4 gap-4">
<SearchInput
onInputChange={searchInputChange}
/>
Expand Down Expand Up @@ -152,16 +150,13 @@ const Invitations = () => {
{
invitationsList.map((invitation) => (

<li className="p-4">
<li key={invitation.id}
className="p-4">
<div
className="flex flex-wrap justify-between align-center"
>
<div className="flex min-w-[40%] space-x-4 xl:mb-4 2xl:mb-0">
<div className='dark:text-white'>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" width="60px" height="60px">
<path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg>
</div>

<div className="flex-1">
<p
className="text-base font-regular text-gray-900 leading-none mb-0.5 dark:text-white "
Expand Down
2 changes: 1 addition & 1 deletion src/components/organization/invitations/ReceivedInvitations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ const ReceivedInvitations = () => {
</div>
<div>
<div className="p-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
<div className="flex items-center justify-between mb-4">
<div className="flex items-endjustify-end mb-4">
{invitationsList && invitationsList?.length > 0 ? (
<SearchInput onInputChange={searchInputChange} />
) : null}
Expand Down
22 changes: 13 additions & 9 deletions src/components/organization/users/Members.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import SearchInput from '../../SearchInput';
import type { User } from '../interfaces/users';
import { getFromLocalStorage } from '../../../api/Auth';
import { getOrganizationUsers } from '../../../api/organization';
import React from 'react';

const initialPageState = {
pageNumber: 1,
Expand Down Expand Up @@ -81,7 +82,7 @@ const Members = () => {

//This useEffect is called when the searchText changes
useEffect(() => {
// let getData: string | number | NodeJS.Timeout | undefined;

let getData: NodeJS.Timeout;

if (searchText.length >= 1) {
Expand Down Expand Up @@ -116,10 +117,11 @@ const Members = () => {
};

return (
<div className="p-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
<div className="flex items-center justify-between mb-4">
<SearchInput onInputChange={searchInputChange} />
</div>
<div>
<div className="p-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
<div className="flex items-end justify-end mb-4 ">
<SearchInput onInputChange={searchInputChange} />
</div>

<EditUserRoleModal
openModal={props.openModal}
Expand All @@ -146,10 +148,11 @@ const Members = () => {
<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 display: flex">
<ul className="divide-y divide-gray-200 dark:divide-gray-700">
<div className="grid ">
<div className="grid divide-y divide-gray-200 dark:divide-gray-700">
{usersList.map((user) => (
<li className="p-4">
<div className="flex flex-wrap justify-between 2xl:flex align-center 2xl:space-x-4">
<li key={user?.id}
className="p-4" >
<div className="flex flex-wrap justify-between 2xl:flex align-center 2xl:space-x-4 ">
<div className="min-w-[40%] flex space-x-4 xl:mb-4 2xl:mb-0">
<div className="flex-1">
<p className="text-base font-regular text-gray-900 leading-none truncate dark:text-white">
Expand All @@ -161,7 +164,7 @@ const Members = () => {
<li className="pt-3 sm:pt-3 overflow-auto">
<div className="items-center space-x-4">
<div className="flex items-center text-base font-normal text-gray-900 dark:text-white">
Role(s):
{user.roles.length>1 ? 'Roles:' : 'Role:'}
{user.roles &&
user.roles.length > 0 &&
user.roles.map(
Expand Down Expand Up @@ -251,6 +254,7 @@ const Members = () => {
</div>
)}
</div>
</div>
);
};

Expand Down
2 changes: 1 addition & 1 deletion src/components/publicProfile/OrganisationPublicProfile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ const OrganisationPublicProfile = () => {
<h1 className="ml-1 px-4 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
Organizations
</h1>
<div className="flex items-center justify-end mb-4 p-2 pl-0">
<div className="flex items-end justify-end mb-4 p-2 pl-0">
<SearchInput onInputChange={searchInputChange} />
</div>
</div>
Expand Down