mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
chore: refactor frontend components folder
This commit is contained in:
swve
parent
46f016f661
commit
5a746a946d
106 changed files with 159 additions and 164 deletions
|
|
@ -0,0 +1,268 @@
|
|||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import PageLoading from '@components/Objects/Loaders/PageLoading'
|
||||
import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
|
||||
import { getAPIUrl, getUriWithOrg } from '@services/config/config'
|
||||
import { swrFetcher } from '@services/utils/ts/requests'
|
||||
import { Globe, Ticket, UserSquare, Users, X } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import React, { useEffect } from 'react'
|
||||
import useSWR, { mutate } from 'swr'
|
||||
import dayjs from 'dayjs'
|
||||
import {
|
||||
changeSignupMechanism,
|
||||
deleteInviteCode,
|
||||
} from '@services/organizations/invites'
|
||||
import toast from 'react-hot-toast'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import Modal from '@components/Objects/StyledElements/Modal/Modal'
|
||||
import OrgInviteCodeGenerate from '@components/Objects/Modals/Dash/OrgAccess/OrgInviteCodeGenerate'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
|
||||
function OrgAccess() {
|
||||
const org = useOrg() as any
|
||||
const session = useLHSession() as any
|
||||
const access_token = session?.data?.tokens?.access_token;
|
||||
const { data: invites } = useSWR(
|
||||
org ? `${getAPIUrl()}orgs/${org?.id}/invites` : null,
|
||||
(url) => swrFetcher(url, access_token)
|
||||
)
|
||||
const [isLoading, setIsLoading] = React.useState(false)
|
||||
const [joinMethod, setJoinMethod] = React.useState('closed')
|
||||
const [invitesModal, setInvitesModal] = React.useState(false)
|
||||
const router = useRouter()
|
||||
|
||||
async function getOrgJoinMethod() {
|
||||
if (org) {
|
||||
if (org.config.config.features.members.signup_mode == 'open') {
|
||||
setJoinMethod('open')
|
||||
} else {
|
||||
setJoinMethod('inviteOnly')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteInvite(invite: any) {
|
||||
let res = await deleteInviteCode(org.id, invite.invite_code_uuid, access_token)
|
||||
if (res.status == 200) {
|
||||
mutate(`${getAPIUrl()}orgs/${org.id}/invites`)
|
||||
} else {
|
||||
toast.error('Error ' + res.status + ': ' + res.data.detail)
|
||||
}
|
||||
}
|
||||
|
||||
async function changeJoinMethod(method: 'open' | 'inviteOnly') {
|
||||
let res = await changeSignupMechanism(org.id, method, access_token)
|
||||
if (res.status == 200) {
|
||||
router.refresh()
|
||||
mutate(`${getAPIUrl()}orgs/slug/${org?.slug}`)
|
||||
} else {
|
||||
toast.error('Error ' + res.status + ': ' + res.data.detail)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (invites && org) {
|
||||
getOrgJoinMethod()
|
||||
setIsLoading(false)
|
||||
}
|
||||
}, [org, invites])
|
||||
|
||||
return (
|
||||
<>
|
||||
{!isLoading ? (
|
||||
<>
|
||||
<div className="h-6"></div>
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4 anit ">
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mb-3 ">
|
||||
<h1 className="font-bold text-xl text-gray-800">Join method</h1>
|
||||
<h2 className="text-gray-500 text-md">
|
||||
{' '}
|
||||
Choose how users can join your organization{' '}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex space-x-2 mx-auto">
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Change to open "
|
||||
confirmationMessage="Are you sure you want to change the signup mechanism to open ? This will allow users to join your organization freely."
|
||||
dialogTitle={'Change to open ?'}
|
||||
dialogTrigger={
|
||||
<div className="w-full h-[160px] bg-slate-100 rounded-lg cursor-pointer hover:bg-slate-200 ease-linear transition-all">
|
||||
{joinMethod == 'open' ? (
|
||||
<div className="bg-green-200 text-green-600 font-bold w-fit my-3 mx-3 absolute text-sm px-3 py-1 rounded-lg">
|
||||
Active
|
||||
</div>
|
||||
) : null}
|
||||
<div className="flex flex-col space-y-1 justify-center items-center h-full">
|
||||
<Globe className="text-slate-400" size={40}></Globe>
|
||||
<div className="text-2xl text-slate-700 font-bold">
|
||||
Open
|
||||
</div>
|
||||
<div className="text-gray-400 text-center">
|
||||
Users can join freely from the signup page
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
functionToExecute={() => {
|
||||
changeJoinMethod('open')
|
||||
}}
|
||||
status="info"
|
||||
></ConfirmationModal>
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Change to closed "
|
||||
confirmationMessage="Are you sure you want to change the signup mechanism to closed ? This will allow users to join your organization only by invitation."
|
||||
dialogTitle={'Change to closed ?'}
|
||||
dialogTrigger={
|
||||
<div className="w-full h-[160px] bg-slate-100 rounded-lg cursor-pointer hover:bg-slate-200 ease-linear transition-all">
|
||||
{joinMethod == 'inviteOnly' ? (
|
||||
<div className="bg-green-200 text-green-600 font-bold w-fit my-3 mx-3 absolute text-sm px-3 py-1 rounded-lg">
|
||||
Active
|
||||
</div>
|
||||
) : null}
|
||||
<div className="flex flex-col space-y-1 justify-center items-center h-full">
|
||||
<Ticket className="text-slate-400" size={40}></Ticket>
|
||||
<div className="text-2xl text-slate-700 font-bold">
|
||||
Closed
|
||||
</div>
|
||||
<div className="text-gray-400 text-center">
|
||||
Users can join only by invitation
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
functionToExecute={() => {
|
||||
changeJoinMethod('inviteOnly')
|
||||
}}
|
||||
status="info"
|
||||
></ConfirmationModal>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
joinMethod == 'open'
|
||||
? 'opacity-20 pointer-events-none'
|
||||
: 'pointer-events-auto'
|
||||
}
|
||||
>
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mt-3 mb-3 ">
|
||||
<h1 className="font-bold text-xl text-gray-800">
|
||||
Invite codes
|
||||
</h1>
|
||||
<h2 className="text-gray-500 text-md">
|
||||
Invite codes can be copied and used to join your organization{' '}
|
||||
</h2>
|
||||
</div>
|
||||
<table className="table-auto w-full text-left whitespace-nowrap rounded-md overflow-hidden">
|
||||
<thead className="bg-gray-100 text-gray-500 rounded-xl uppercase">
|
||||
<tr className="font-bolder text-sm">
|
||||
<th className="py-3 px-4">Code</th>
|
||||
<th className="py-3 px-4">Signup link</th>
|
||||
<th className="py-3 px-4">Type</th>
|
||||
<th className="py-3 px-4">Expiration date</th>
|
||||
<th className="py-3 px-4">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<>
|
||||
<tbody className="mt-5 bg-white rounded-md">
|
||||
{invites?.map((invite: any) => (
|
||||
<tr
|
||||
key={invite.invite_code_uuid}
|
||||
className="border-b border-gray-100 text-sm"
|
||||
>
|
||||
<td className="py-3 px-4">{invite.invite_code}</td>
|
||||
<td className="py-3 px-4 ">
|
||||
<Link
|
||||
className="outline bg-gray-50 text-gray-600 px-2 py-1 rounded-md outline-gray-300 outline-dashed outline-1"
|
||||
target="_blank"
|
||||
href={getUriWithOrg(
|
||||
org?.slug,
|
||||
`/signup?inviteCode=${invite.invite_code}`
|
||||
)}
|
||||
>
|
||||
{getUriWithOrg(
|
||||
org?.slug,
|
||||
`/signup?inviteCode=${invite.invite_code}`
|
||||
)}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
{invite.usergroup_id ? (
|
||||
<div className="flex space-x-2 items-center">
|
||||
<UserSquare className="w-4 h-4" />
|
||||
<span>Linked to a UserGroup</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex space-x-2 items-center">
|
||||
<Users className="w-4 h-4" />
|
||||
<span>Normal</span>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
{dayjs(invite.expiration_date)
|
||||
.add(1, 'year')
|
||||
.format('DD/MM/YYYY')}{' '}
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Delete Code"
|
||||
confirmationMessage="Are you sure you want remove this invite code ?"
|
||||
dialogTitle={'Delete code ?'}
|
||||
dialogTrigger={
|
||||
<button className="mr-2 flex space-x-2 hover:cursor-pointer p-1 px-3 bg-rose-700 rounded-md font-bold items-center text-sm text-rose-100">
|
||||
<X className="w-4 h-4" />
|
||||
<span> Delete code</span>
|
||||
</button>
|
||||
}
|
||||
functionToExecute={() => {
|
||||
deleteInvite(invite)
|
||||
}}
|
||||
status="warning"
|
||||
></ConfirmationModal>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</>
|
||||
</table>
|
||||
<div className='flex flex-row-reverse mt-3 mr-2'>
|
||||
<Modal
|
||||
isDialogOpen={
|
||||
invitesModal
|
||||
}
|
||||
onOpenChange={() =>
|
||||
setInvitesModal(!invitesModal)
|
||||
}
|
||||
minHeight="no-min"
|
||||
minWidth='lg'
|
||||
dialogContent={
|
||||
<OrgInviteCodeGenerate
|
||||
setInvitesModal={setInvitesModal}
|
||||
/>
|
||||
}
|
||||
dialogTitle="Generate Invite Code"
|
||||
dialogDescription={
|
||||
'Generate a new invite code for your organization'
|
||||
}
|
||||
dialogTrigger={
|
||||
<button
|
||||
className=" flex space-x-2 hover:cursor-pointer p-1 px-3 bg-green-700 rounded-md font-bold items-center text-sm text-green-100"
|
||||
>
|
||||
<Ticket className="w-4 h-4" />
|
||||
<span> Generate invite code</span>
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<PageLoading />
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default OrgAccess
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
'use client'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import AddUserGroup from '@components/Objects/Modals/Dash/OrgUserGroups/AddUserGroup'
|
||||
import EditUserGroup from '@components/Objects/Modals/Dash/OrgUserGroups/EditUserGroup'
|
||||
import ManageUsers from '@components/Objects/Modals/Dash/OrgUserGroups/ManageUsers'
|
||||
import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
|
||||
import Modal from '@components/Objects/StyledElements/Modal/Modal'
|
||||
import { getAPIUrl } from '@services/config/config'
|
||||
import { deleteUserGroup } from '@services/usergroups/usergroups'
|
||||
import { swrFetcher } from '@services/utils/ts/requests'
|
||||
import { Pencil, SquareUserRound, Users, X } from 'lucide-react'
|
||||
import React from 'react'
|
||||
import toast from 'react-hot-toast'
|
||||
import useSWR, { mutate } from 'swr'
|
||||
|
||||
function OrgUserGroups() {
|
||||
const org = useOrg() as any
|
||||
const session = useLHSession() as any
|
||||
const access_token = session?.data?.tokens?.access_token;
|
||||
const [userGroupManagementModal, setUserGroupManagementModal] = React.useState(false)
|
||||
const [createUserGroupModal, setCreateUserGroupModal] = React.useState(false)
|
||||
const [editUserGroupModal, setEditUserGroupModal] = React.useState(false)
|
||||
const [selectedUserGroup, setSelectedUserGroup] = React.useState(null) as any
|
||||
|
||||
const { data: usergroups } = useSWR(
|
||||
org ? `${getAPIUrl()}usergroups/org/${org.id}` : null,
|
||||
(url) => swrFetcher(url, access_token)
|
||||
)
|
||||
|
||||
const deleteUserGroupUI = async (usergroup_id: any) => {
|
||||
const res = await deleteUserGroup(usergroup_id, access_token)
|
||||
if (res.status == 200) {
|
||||
mutate(`${getAPIUrl()}usergroups/org/${org.id}`)
|
||||
}
|
||||
else {
|
||||
toast.error('Error ' + res.status + ': ' + res.data.detail)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const handleUserGroupManagementModal = (usergroup_id: any) => {
|
||||
setSelectedUserGroup(usergroup_id)
|
||||
setUserGroupManagementModal(!userGroupManagementModal)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="h-6"></div>
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4">
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mb-3 ">
|
||||
<h1 className="font-bold text-xl text-gray-800">Manage UserGroups & Users</h1>
|
||||
<h2 className="text-gray-500 text-sm">
|
||||
{' '}
|
||||
UserGroups are a way to group users together to manage their access to the resources (Courses) in your organization.{' '}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table-auto w-full text-left whitespace-nowrap rounded-md overflow-hidden">
|
||||
<thead className="bg-gray-100 text-gray-500 rounded-xl uppercase">
|
||||
<tr className="font-bolder text-sm">
|
||||
<th className="py-3 px-4">UserGroup</th>
|
||||
<th className="py-3 px-4">Description</th>
|
||||
<th className="py-3 px-4">Manage Users</th>
|
||||
<th className="py-3 px-4">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<>
|
||||
<tbody className="mt-5 bg-white rounded-md">
|
||||
{usergroups?.map((usergroup: any) => (
|
||||
<tr key={usergroup.id} className="border-b border-gray-100 text-sm">
|
||||
<td className="py-3 px-4">{usergroup.name}</td>
|
||||
<td className="py-3 px-4 ">{usergroup.description}</td>
|
||||
<td className="py-3 px-4 ">
|
||||
<Modal
|
||||
isDialogOpen={
|
||||
userGroupManagementModal &&
|
||||
selectedUserGroup === usergroup.id
|
||||
}
|
||||
onOpenChange={() =>
|
||||
handleUserGroupManagementModal(usergroup.id)
|
||||
}
|
||||
minHeight="lg"
|
||||
minWidth='lg'
|
||||
dialogContent={
|
||||
<ManageUsers
|
||||
usergroup_id={usergroup.id}
|
||||
/>
|
||||
}
|
||||
dialogTitle="Manage UserGroup Users"
|
||||
dialogDescription={
|
||||
'Manage the users in this UserGroup'
|
||||
}
|
||||
dialogTrigger={
|
||||
<button className="flex space-x-2 hover:cursor-pointer p-1 px-3 bg-yellow-700 rounded-md font-bold items-center text-sm text-yellow-100">
|
||||
<Users className="w-4 h-4" />
|
||||
<span> Manage Users</span>
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
<td className="py-3 px-4 flex space-x-2">
|
||||
<Modal
|
||||
isDialogOpen={editUserGroupModal}
|
||||
dialogTrigger={
|
||||
<button className="flex space-x-2 hover:cursor-pointer p-1 px-3 bg-sky-700 rounded-md font-bold items-center text-sm text-sky-100">
|
||||
<Pencil className="size-4" />
|
||||
<span>Edit</span>
|
||||
</button>
|
||||
}
|
||||
minHeight='sm'
|
||||
minWidth='sm'
|
||||
onOpenChange={() => {
|
||||
setEditUserGroupModal(!editUserGroupModal)
|
||||
}}
|
||||
dialogContent={
|
||||
<EditUserGroup usergroup={usergroup} />
|
||||
}
|
||||
/>
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Delete UserGroup"
|
||||
confirmationMessage="Access to all resources will be removed for all users in this UserGroup. Are you sure you want to delete this UserGroup ?"
|
||||
dialogTitle={'Delete UserGroup ?'}
|
||||
dialogTrigger={
|
||||
<button className="flex space-x-2 hover:cursor-pointer p-1 px-3 bg-rose-700 rounded-md font-bold items-center text-sm text-rose-100">
|
||||
<X className="w-4 h-4" />
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
}
|
||||
functionToExecute={() => {
|
||||
deleteUserGroupUI(usergroup.id)
|
||||
}}
|
||||
status="warning"
|
||||
></ConfirmationModal>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</>
|
||||
</table>
|
||||
</div>
|
||||
<div className='flex justify-end mt-3 mr-2'>
|
||||
<Modal
|
||||
isDialogOpen={
|
||||
createUserGroupModal
|
||||
}
|
||||
onOpenChange={() =>
|
||||
setCreateUserGroupModal(!createUserGroupModal)
|
||||
}
|
||||
minHeight="no-min"
|
||||
dialogContent={
|
||||
<AddUserGroup
|
||||
setCreateUserGroupModal={setCreateUserGroupModal}
|
||||
/>
|
||||
}
|
||||
dialogTitle="Create a UserGroup"
|
||||
dialogDescription={
|
||||
'Create a new UserGroup to manage users'
|
||||
}
|
||||
dialogTrigger={
|
||||
<button
|
||||
className=" flex space-x-2 hover:cursor-pointer p-1 px-3 bg-green-700 rounded-md font-bold items-center text-sm text-green-100"
|
||||
>
|
||||
<SquareUserRound className="w-4 h-4" />
|
||||
<span>Create a UserGroup</span>
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default OrgUserGroups
|
||||
146
apps/web/components/Dashboard/Pages/Users/OrgUsers/OrgUsers.tsx
Normal file
146
apps/web/components/Dashboard/Pages/Users/OrgUsers/OrgUsers.tsx
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import PageLoading from '@components/Objects/Loaders/PageLoading'
|
||||
import RolesUpdate from '@components/Objects/Modals/Dash/OrgUsers/RolesUpdate'
|
||||
import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
|
||||
import Modal from '@components/Objects/StyledElements/Modal/Modal'
|
||||
import Toast from '@components/Objects/StyledElements/Toast/Toast'
|
||||
import { getAPIUrl } from '@services/config/config'
|
||||
import { removeUserFromOrg } from '@services/organizations/orgs'
|
||||
import { swrFetcher } from '@services/utils/ts/requests'
|
||||
import { KeyRound, LogOut } from 'lucide-react'
|
||||
import React, { useEffect } from 'react'
|
||||
import toast from 'react-hot-toast'
|
||||
import useSWR, { mutate } from 'swr'
|
||||
|
||||
function OrgUsers() {
|
||||
const org = useOrg() as any
|
||||
const session = useLHSession() as any
|
||||
const access_token = session?.data?.tokens?.access_token;
|
||||
const { data: orgUsers } = useSWR(
|
||||
org ? `${getAPIUrl()}orgs/${org?.id}/users` : null,
|
||||
(url) => swrFetcher(url, access_token)
|
||||
)
|
||||
const [rolesModal, setRolesModal] = React.useState(false)
|
||||
const [selectedUser, setSelectedUser] = React.useState(null) as any
|
||||
const [isLoading, setIsLoading] = React.useState(true)
|
||||
|
||||
const handleRolesModal = (user_uuid: any) => {
|
||||
setSelectedUser(user_uuid)
|
||||
setRolesModal(!rolesModal)
|
||||
}
|
||||
|
||||
const handleRemoveUser = async (user_id: any) => {
|
||||
const res = await removeUserFromOrg(org.id, user_id,access_token)
|
||||
if (res.status === 200) {
|
||||
await mutate(`${getAPIUrl()}orgs/${org.id}/users`)
|
||||
} else {
|
||||
toast.error('Error ' + res.status + ': ' + res.data.detail)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (orgUsers) {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}, [org, orgUsers])
|
||||
|
||||
return (
|
||||
<div>
|
||||
{isLoading ? (
|
||||
<div>
|
||||
<PageLoading />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Toast></Toast>
|
||||
<div className="h-6"></div>
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4 ">
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mb-3 ">
|
||||
<h1 className="font-bold text-xl text-gray-800">Active users</h1>
|
||||
<h2 className="text-gray-500 text-md">
|
||||
{' '}
|
||||
Manage your organization users, assign roles and permissions{' '}
|
||||
</h2>
|
||||
</div>
|
||||
<table className="table-auto w-full text-left whitespace-nowrap rounded-md overflow-hidden">
|
||||
<thead className="bg-gray-100 text-gray-500 rounded-xl uppercase">
|
||||
<tr className="font-bolder text-sm">
|
||||
<th className="py-3 px-4">User</th>
|
||||
<th className="py-3 px-4">Role</th>
|
||||
<th className="py-3 px-4">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<>
|
||||
<tbody className="mt-5 bg-white rounded-md">
|
||||
{orgUsers?.map((user: any) => (
|
||||
<tr
|
||||
key={user.user.id}
|
||||
className="border-b border-gray-200 border-dashed"
|
||||
>
|
||||
<td className="py-3 px-4 flex space-x-2 items-center">
|
||||
<span>
|
||||
{user.user.first_name + ' ' + user.user.last_name}
|
||||
</span>
|
||||
<span className="text-xs bg-neutral-100 p-1 px-2 rounded-full text-neutral-400 font-semibold">
|
||||
@{user.user.username}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">{user.role.name}</td>
|
||||
<td className="py-3 px-4 flex space-x-2 items-end">
|
||||
<Modal
|
||||
isDialogOpen={
|
||||
rolesModal && selectedUser === user.user.user_uuid
|
||||
}
|
||||
onOpenChange={() =>
|
||||
handleRolesModal(user.user.user_uuid)
|
||||
}
|
||||
minHeight="no-min"
|
||||
dialogContent={
|
||||
<RolesUpdate
|
||||
alreadyAssignedRole={user.role.role_uuid}
|
||||
setRolesModal={setRolesModal}
|
||||
user={user}
|
||||
/>
|
||||
}
|
||||
dialogTitle="Update Role"
|
||||
dialogDescription={
|
||||
'Update @' + user.user.username + "'s role"
|
||||
}
|
||||
dialogTrigger={
|
||||
<button className="flex space-x-2 hover:cursor-pointer p-1 px-3 bg-yellow-700 rounded-md font-bold items-center text-sm text-yellow-100">
|
||||
<KeyRound className="w-4 h-4" />
|
||||
<span> Edit Role</span>
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Remove User"
|
||||
confirmationMessage="Are you sure you want remove this user from the organization?"
|
||||
dialogTitle={'Delete ' + user.user.username + ' ?'}
|
||||
dialogTrigger={
|
||||
<button className="mr-2 flex space-x-2 hover:cursor-pointer p-1 px-3 bg-rose-700 rounded-md font-bold items-center text-sm text-rose-100">
|
||||
<LogOut className="w-4 h-4" />
|
||||
<span> Remove from organization</span>
|
||||
</button>
|
||||
}
|
||||
functionToExecute={() => {
|
||||
handleRemoveUser(user.user.id)
|
||||
}}
|
||||
status="warning"
|
||||
></ConfirmationModal>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default OrgUsers
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import PageLoading from '@components/Objects/Loaders/PageLoading'
|
||||
import Toast from '@components/Objects/StyledElements/Toast/Toast'
|
||||
import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
|
||||
import { getAPIUrl } from '@services/config/config'
|
||||
import { inviteBatchUsers } from '@services/organizations/invites'
|
||||
import { swrFetcher } from '@services/utils/ts/requests'
|
||||
import { Info, UserPlus } from 'lucide-react'
|
||||
import React, { useEffect } from 'react'
|
||||
import toast from 'react-hot-toast'
|
||||
import useSWR, { mutate } from 'swr'
|
||||
|
||||
function OrgUsersAdd() {
|
||||
const org = useOrg() as any
|
||||
const session = useLHSession() as any
|
||||
const access_token = session?.data?.tokens?.access_token;
|
||||
const [isLoading, setIsLoading] = React.useState(false)
|
||||
const [invitedUsers, setInvitedUsers] = React.useState('');
|
||||
const [selectedInviteCode, setSelectedInviteCode] = React.useState('');
|
||||
|
||||
async function sendInvites() {
|
||||
setIsLoading(true)
|
||||
let res = await inviteBatchUsers(org.id, invitedUsers, selectedInviteCode,access_token)
|
||||
if (res.status == 200) {
|
||||
mutate(`${getAPIUrl()}orgs/${org?.id}/invites/users`)
|
||||
setIsLoading(false)
|
||||
} else {
|
||||
toast.error('Error ' + res.status + ': ' + res.data.detail)
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const { data: invites } = useSWR(
|
||||
org ? `${getAPIUrl()}orgs/${org?.id}/invites` : null,
|
||||
(url) => swrFetcher(url, access_token)
|
||||
)
|
||||
const { data: invited_users } = useSWR(
|
||||
org ? `${getAPIUrl()}orgs/${org?.id}/invites/users` : null,
|
||||
(url) => swrFetcher(url, access_token)
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (invites) {
|
||||
setSelectedInviteCode(invites?.[0]?.invite_code_uuid)
|
||||
}
|
||||
}
|
||||
, [invites, invited_users])
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toast></Toast>
|
||||
{!isLoading ? (
|
||||
<>
|
||||
<div className="h-6"></div>
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4 anit ">
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mb-3 ">
|
||||
<h1 className="font-bold text-xl text-gray-800">Invite users to your Organization</h1>
|
||||
<h2 className="text-gray-500 text-md">
|
||||
{' '}
|
||||
Send invite via email, separated by comma{' '}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex space-x-2 mx-auto">
|
||||
<textarea
|
||||
onChange={(e) => setInvitedUsers(e.target.value)}
|
||||
className='w-full h-[200px] rounded-md border px-3 py-2 bg-gray-100/40 placeholder:italic placeholder:text-slate-300' placeholder='Example : spike.spiegel@bepop.space, michael.scott@dundermifflin.com' name="" id="" ></textarea>
|
||||
</div>
|
||||
<div className="flex space-x-2 mx-auto my-5 ml-2 items-center space-x-4 justify-between">
|
||||
|
||||
<div className='flex space-x-2 items-center'>
|
||||
<p className='flex items-center'>Invite Code </p>
|
||||
<select
|
||||
onChange={(e) => setSelectedInviteCode(e.target.value)}
|
||||
defaultValue={selectedInviteCode}
|
||||
className='text-gray-400 border rounded-md px-3 py-1' name="" id="">
|
||||
{invites?.map((invite: any) => (
|
||||
<option key={invite.invite_code_uuid} value={invite.invite_code_uuid}>{invite.invite_code}</option>
|
||||
))}
|
||||
</select>
|
||||
<ToolTip content={'Use one of the invite codes that you generated from the signup access page'} sideOffset={8} side="right"><Info className='text-gray-400' size={14} /></ToolTip>
|
||||
</div>
|
||||
<div className='flex flex-row-reverse '>
|
||||
<button
|
||||
onClick={sendInvites}
|
||||
className="flex space-x-2 hover:cursor-pointer p-1 px-3 bg-green-700 rounded-md font-bold items-center text-sm text-green-100"
|
||||
>
|
||||
<UserPlus className="w-4 h-4" />
|
||||
<span>Send invites via email</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mt-3 mb-3 ">
|
||||
<h1 className="font-bold text-xl text-gray-800">
|
||||
Invited Users
|
||||
</h1>
|
||||
<h2 className="text-gray-500 text-md">
|
||||
{' '}
|
||||
Users who have been invited to join your organization{' '}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table-auto w-full text-left whitespace-nowrap rounded-md overflow-hidden">
|
||||
<thead className="bg-gray-100 text-gray-500 rounded-xl uppercase">
|
||||
<tr className="font-bolder text-sm">
|
||||
<th className="py-3 px-4">Email</th>
|
||||
<th className="py-3 px-4">Signup Status</th>
|
||||
<th className="py-3 px-4">Email sent</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<>
|
||||
<tbody className="mt-5 bg-white rounded-md">
|
||||
{invited_users?.map((invited_user: any) => (
|
||||
<tr
|
||||
key={invited_user.email}
|
||||
className="border-b border-gray-100 text-sm"
|
||||
>
|
||||
<td className="py-3 px-4">{invited_user.email}</td>
|
||||
<td className="py-3 px-4">{invited_user.pending ? <div className='bg-orange-400 text-orange-100 w-fit px-2 py1 rounded-md'>Pending</div> : <div className='bg-green-400 text-green-100 w-fit px-2 py1 rounded-md'>Signed</div>}</td>
|
||||
<td className="py-3 px-4">{invited_user.email_sent ? <div className='bg-green-600 text-green-100 w-fit px-2 py1 rounded-md'>Sent</div> : <div className='bg-red-400 text-red-100 w-fit px-2 py1 rounded-md'>No</div>}</td>
|
||||
|
||||
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<PageLoading />
|
||||
)
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default OrgUsersAdd
|
||||
Loading…
Add table
Add a link
Reference in a new issue