mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-18 20:09: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.{' '}
|
||||
</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">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'
|
||||
}
|
||||
<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-yellow-700 rounded-md font-bold items-center text-sm text-yellow-100">
|
||||
<Users className="w-4 h-4" />
|
||||
<span> Manage Users</span>
|
||||
<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>
|
||||
}
|
||||
/>
|
||||
</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)
|
||||
minHeight='sm'
|
||||
minWidth='sm'
|
||||
onOpenChange={() => {
|
||||
setEditUserGroupModal(!editUserGroupModal)
|
||||
}}
|
||||
status="warning"
|
||||
></ConfirmationModal>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</>
|
||||
</table>
|
||||
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={
|
||||
|
|
|
|||
|
|
@ -102,33 +102,33 @@ function OrgUsersAdd() {
|
|||
Users who have been invited 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">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 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>
|
||||
</>
|
||||
) : (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue