mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
fix: long user input leads to overflow
This commit is contained in:
Benjamin Frost
parent
ac7d90a3f4
commit
7a7e12cd11
2 changed files with 105 additions and 103 deletions
|
|
@ -55,88 +55,90 @@ function OrgUserGroups() {
|
||||||
UserGroups are a way to group users together to manage their access to the resources (Courses) in your organization.{' '}
|
UserGroups are a way to group users together to manage their access to the resources (Courses) in your organization.{' '}
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<table className="table-auto w-full text-left whitespace-nowrap rounded-md overflow-hidden">
|
<div className="overflow-x-auto">
|
||||||
<thead className="bg-gray-100 text-gray-500 rounded-xl uppercase">
|
<table className="table-auto w-full text-left whitespace-nowrap rounded-md overflow-hidden">
|
||||||
<tr className="font-bolder text-sm">
|
<thead className="bg-gray-100 text-gray-500 rounded-xl uppercase">
|
||||||
<th className="py-3 px-4">UserGroup</th>
|
<tr className="font-bolder text-sm">
|
||||||
<th className="py-3 px-4">Description</th>
|
<th className="py-3 px-4">UserGroup</th>
|
||||||
<th className="py-3 px-4">Manage Users</th>
|
<th className="py-3 px-4">Description</th>
|
||||||
<th className="py-3 px-4">Actions</th>
|
<th className="py-3 px-4">Manage Users</th>
|
||||||
</tr>
|
<th className="py-3 px-4">Actions</th>
|
||||||
</thead>
|
</tr>
|
||||||
<>
|
</thead>
|
||||||
<tbody className="mt-5 bg-white rounded-md">
|
<>
|
||||||
{usergroups?.map((usergroup: any) => (
|
<tbody className="mt-5 bg-white rounded-md">
|
||||||
<tr key={usergroup.id} className="border-b border-gray-100 text-sm">
|
{usergroups?.map((usergroup: any) => (
|
||||||
<td className="py-3 px-4">{usergroup.name}</td>
|
<tr key={usergroup.id} className="border-b border-gray-100 text-sm">
|
||||||
<td className="py-3 px-4 ">{usergroup.description}</td>
|
<td className="py-3 px-4">{usergroup.name}</td>
|
||||||
<td className="py-3 px-4 ">
|
<td className="py-3 px-4 ">{usergroup.description}</td>
|
||||||
<Modal
|
<td className="py-3 px-4 ">
|
||||||
isDialogOpen={
|
<Modal
|
||||||
userGroupManagementModal &&
|
isDialogOpen={
|
||||||
selectedUserGroup === usergroup.id
|
userGroupManagementModal &&
|
||||||
}
|
selectedUserGroup === usergroup.id
|
||||||
onOpenChange={() =>
|
}
|
||||||
handleUserGroupManagementModal(usergroup.id)
|
onOpenChange={() =>
|
||||||
}
|
handleUserGroupManagementModal(usergroup.id)
|
||||||
minHeight="lg"
|
}
|
||||||
minWidth='lg'
|
minHeight="lg"
|
||||||
dialogContent={
|
minWidth='lg'
|
||||||
<ManageUsers
|
dialogContent={
|
||||||
usergroup_id={usergroup.id}
|
<ManageUsers
|
||||||
/>
|
usergroup_id={usergroup.id}
|
||||||
}
|
/>
|
||||||
dialogTitle="Manage UserGroup Users"
|
}
|
||||||
dialogDescription={
|
dialogTitle="Manage UserGroup Users"
|
||||||
'Manage the users in this UserGroup'
|
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={
|
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">
|
<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">
|
||||||
<Users className="w-4 h-4" />
|
<Pencil className="size-4" />
|
||||||
<span> Manage Users</span>
|
<span>Edit</span>
|
||||||
</button>
|
</button>
|
||||||
}
|
}
|
||||||
/>
|
minHeight='sm'
|
||||||
</td>
|
minWidth='sm'
|
||||||
<td className="py-3 px-4 flex space-x-2">
|
onOpenChange={() => {
|
||||||
<Modal
|
setEditUserGroupModal(!editUserGroupModal)
|
||||||
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"
|
dialogContent={
|
||||||
></ConfirmationModal>
|
<EditUserGroup usergroup={usergroup} />
|
||||||
</td>
|
}
|
||||||
</tr>
|
/>
|
||||||
))}
|
<ConfirmationModal
|
||||||
</tbody>
|
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 ?"
|
||||||
</table>
|
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'>
|
<div className='flex justify-end mt-3 mr-2'>
|
||||||
<Modal
|
<Modal
|
||||||
isDialogOpen={
|
isDialogOpen={
|
||||||
|
|
|
||||||
|
|
@ -102,33 +102,33 @@ function OrgUsersAdd() {
|
||||||
Users who have been invited to join your organization{' '}
|
Users who have been invited to join your organization{' '}
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<table className="table-auto w-full text-left whitespace-nowrap rounded-md overflow-hidden">
|
<div className="overflow-x-auto">
|
||||||
<thead className="bg-gray-100 text-gray-500 rounded-xl uppercase">
|
<table className="table-auto w-full text-left whitespace-nowrap rounded-md overflow-hidden">
|
||||||
<tr className="font-bolder text-sm">
|
<thead className="bg-gray-100 text-gray-500 rounded-xl uppercase">
|
||||||
<th className="py-3 px-4">Email</th>
|
<tr className="font-bolder text-sm">
|
||||||
<th className="py-3 px-4">Signup Status</th>
|
<th className="py-3 px-4">Email</th>
|
||||||
<th className="py-3 px-4">Email sent</th>
|
<th className="py-3 px-4">Signup Status</th>
|
||||||
</tr>
|
<th className="py-3 px-4">Email sent</th>
|
||||||
</thead>
|
</tr>
|
||||||
<>
|
</thead>
|
||||||
<tbody className="mt-5 bg-white rounded-md">
|
<>
|
||||||
{invited_users?.map((invited_user: any) => (
|
<tbody className="mt-5 bg-white rounded-md">
|
||||||
<tr
|
{invited_users?.map((invited_user: any) => (
|
||||||
key={invited_user.email}
|
<tr
|
||||||
className="border-b border-gray-100 text-sm"
|
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}</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>
|
<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>
|
|
||||||
|
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue