mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: add ability to create/delete ugs from interface
This commit is contained in:
swve
parent
4f75e6a90a
commit
d1d817678b
10 changed files with 317 additions and 25 deletions
|
|
@ -215,11 +215,7 @@ async def get_invite_codes(
|
|||
# Get invite codes
|
||||
invite_codes = r.keys(f"org_invite_code_*:org:{org.org_uuid}:code:*")
|
||||
|
||||
if not invite_codes:
|
||||
raise HTTPException(
|
||||
status_code=404,
|
||||
detail="Invite codes not found",
|
||||
)
|
||||
|
||||
|
||||
invite_codes_list = []
|
||||
|
||||
|
|
|
|||
|
|
@ -99,11 +99,7 @@ async def read_usergroups_by_org_id(
|
|||
statement = select(UserGroup).where(UserGroup.org_id == org_id)
|
||||
usergroups = db_session.exec(statement).all()
|
||||
|
||||
if not usergroups:
|
||||
raise HTTPException(
|
||||
status_code=404,
|
||||
detail="UserGroups not found",
|
||||
)
|
||||
|
||||
|
||||
# RBAC check
|
||||
await rbac_check(
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ function CourseOverviewPage({ params }: { params: CourseOverviewParams }) {
|
|||
<CourseProvider courseuuid={getEntireCourseUUID(params.courseuuid)}>
|
||||
<div className="pl-10 pr-10 text-sm tracking-tight bg-[#fcfbfc] z-10 shadow-[0px_4px_16px_rgba(0,0,0,0.06)]">
|
||||
<CourseOverviewTop params={params} />
|
||||
<div className="flex space-x-3 font-black text-xs">
|
||||
<div className="flex space-x-3 font-black text-sm">
|
||||
<Link
|
||||
href={
|
||||
getUriWithOrg(params.orgslug, '') +
|
||||
|
|
|
|||
|
|
@ -3,13 +3,14 @@ import React, { useEffect } from 'react'
|
|||
import { motion } from 'framer-motion'
|
||||
import Link from 'next/link'
|
||||
import { getUriWithOrg } from '@services/config/config'
|
||||
import { ScanEye, UserPlus, Users } from 'lucide-react'
|
||||
import { ScanEye, SquareUserRound, UserPlus, Users } from 'lucide-react'
|
||||
import BreadCrumbs from '@components/Dashboard/UI/BreadCrumbs'
|
||||
import { useSession } from '@components/Contexts/SessionContext'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import OrgUsers from '@components/Dashboard/Users/OrgUsers/OrgUsers'
|
||||
import OrgAccess from '@components/Dashboard/Users/OrgAccess/OrgAccess'
|
||||
import OrgUsersAdd from '@components/Dashboard/Users/OrgUsersAdd/OrgUsersAdd'
|
||||
import OrgUserGroups from '@components/Dashboard/Users/OrgUserGroups/OrgUserGroups'
|
||||
|
||||
export type SettingsParams = {
|
||||
subpage: string
|
||||
|
|
@ -35,6 +36,10 @@ function UsersSettingsPage({ params }: { params: SettingsParams }) {
|
|||
setH1Label('Invite users')
|
||||
setH2Label('Invite users to join your organization')
|
||||
}
|
||||
if (params.subpage == 'usergroups') {
|
||||
setH1Label('UserGroups')
|
||||
setH2Label('Create and manage user groups')
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -62,8 +67,7 @@ function UsersSettingsPage({ params }: { params: SettingsParams }) {
|
|||
}
|
||||
>
|
||||
<div
|
||||
className={`py-2 w-fit text-center border-black transition-all ease-linear ${
|
||||
params.subpage.toString() === 'users'
|
||||
className={`py-2 w-fit text-center border-black transition-all ease-linear ${params.subpage.toString() === 'users'
|
||||
? 'border-b-4'
|
||||
: 'opacity-50'
|
||||
} cursor-pointer`}
|
||||
|
|
@ -74,14 +78,30 @@ function UsersSettingsPage({ params }: { params: SettingsParams }) {
|
|||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
href={
|
||||
getUriWithOrg(params.orgslug, '') + `/dash/users/settings/usergroups`
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={`py-2 w-fit text-center border-black transition-all ease-linear ${params.subpage.toString() === 'usergroups'
|
||||
? 'border-b-4'
|
||||
: 'opacity-50'
|
||||
} cursor-pointer`}
|
||||
>
|
||||
<div className="flex items-center space-x-2.5 mx-2">
|
||||
<SquareUserRound size={16} />
|
||||
<div>UserGroups</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
href={
|
||||
getUriWithOrg(params.orgslug, '') + `/dash/users/settings/add`
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={`py-2 w-fit text-center border-black transition-all ease-linear ${
|
||||
params.subpage.toString() === 'add'
|
||||
className={`py-2 w-fit text-center border-black transition-all ease-linear ${params.subpage.toString() === 'add'
|
||||
? 'border-b-4'
|
||||
: 'opacity-50'
|
||||
} cursor-pointer`}
|
||||
|
|
@ -98,8 +118,7 @@ function UsersSettingsPage({ params }: { params: SettingsParams }) {
|
|||
}
|
||||
>
|
||||
<div
|
||||
className={`py-2 w-fit text-center border-black transition-all ease-linear ${
|
||||
params.subpage.toString() === 'signups'
|
||||
className={`py-2 w-fit text-center border-black transition-all ease-linear ${params.subpage.toString() === 'signups'
|
||||
? 'border-b-4'
|
||||
: 'opacity-50'
|
||||
} cursor-pointer`}
|
||||
|
|
@ -122,6 +141,7 @@ function UsersSettingsPage({ params }: { params: SettingsParams }) {
|
|||
{params.subpage == 'users' ? <OrgUsers /> : ''}
|
||||
{params.subpage == 'signups' ? <OrgAccess /> : ''}
|
||||
{params.subpage == 'add' ? <OrgUsersAdd /> : ''}
|
||||
{params.subpage == 'usergroups' ? <OrgUserGroups /> : ''}
|
||||
</motion.div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import Modal from '@components/StyledElements/Modal/Modal'
|
|||
import { getAPIUrl } from '@services/config/config'
|
||||
import { unLinkResourcesToUserGroup } from '@services/usergroups/usergroups'
|
||||
import { swrFetcher } from '@services/utils/ts/requests'
|
||||
import { Globe, Users, UsersRound, X } from 'lucide-react'
|
||||
import { Globe, SquareUserRound, Users, UsersRound, X } from 'lucide-react'
|
||||
import React from 'react'
|
||||
import toast from 'react-hot-toast'
|
||||
import useSWR, { mutate } from 'swr'
|
||||
|
|
@ -198,13 +198,14 @@ function UserGroupsSection({ usergroups }: { usergroups: any[] }) {
|
|||
<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"
|
||||
>
|
||||
<UsersRound className="w-4 h-4" />
|
||||
<SquareUserRound className="w-4 h-4" />
|
||||
<span>Link to a UserGroup</span>
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
||||
</div></>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -74,7 +74,6 @@ function OrgAccess() {
|
|||
|
||||
return (
|
||||
<>
|
||||
<Toast></Toast>
|
||||
{!isLoading ? (
|
||||
<>
|
||||
<div className="h-6"></div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,154 @@
|
|||
'use client'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import AddUserGroup from '@components/Objects/Modals/Dash/OrgUserGroups/AddUserGroup'
|
||||
import ManageUsers from '@components/Objects/Modals/Dash/OrgUserGroups/ManageUsers'
|
||||
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
|
||||
import Modal from '@components/StyledElements/Modal/Modal'
|
||||
import { getAPIUrl } from '@services/config/config'
|
||||
import { deleteUserGroup } from '@services/usergroups/usergroups'
|
||||
import { swrFetcher } from '@services/utils/ts/requests'
|
||||
import { 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 [userGroupManagementModal, setUserGroupManagementModal] = React.useState(false)
|
||||
const [createUserGroupModal, setCreateUserGroupModal] = React.useState(false)
|
||||
const [selectedUserGroup, setSelectedUserGroup] = React.useState(null) as any
|
||||
|
||||
const { data: usergroups } = useSWR(
|
||||
org ? `${getAPIUrl()}usergroups/org/${org.id}` : null,
|
||||
swrFetcher
|
||||
)
|
||||
|
||||
const deleteUserGroupUI = async (usergroup_id: any) => {
|
||||
const res = await deleteUserGroup(usergroup_id)
|
||||
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>
|
||||
<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="no-min"
|
||||
dialogContent={
|
||||
<ManageUsers
|
||||
/>
|
||||
}
|
||||
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 ">
|
||||
|
||||
<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 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
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
'use client'
|
||||
import FormLayout, {
|
||||
ButtonBlack,
|
||||
Flex,
|
||||
FormField,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
Input,
|
||||
} from '@components/StyledElements/Form/Form'
|
||||
import * as Form from '@radix-ui/react-form'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import React from 'react'
|
||||
import { BarLoader } from 'react-spinners'
|
||||
import { createUserGroup } from '@services/usergroups/usergroups'
|
||||
import { mutate } from 'swr'
|
||||
import { getAPIUrl } from '@services/config/config'
|
||||
|
||||
type AddUserGroupProps = {
|
||||
setCreateUserGroupModal: any
|
||||
}
|
||||
|
||||
function AddUserGroup(props: AddUserGroupProps) {
|
||||
const org = useOrg() as any
|
||||
const [userGroupName, setUserGroupName] = React.useState('')
|
||||
const [userGroupDescription, setUserGroupDescription] = React.useState('')
|
||||
const [isSubmitting, setIsSubmitting] = React.useState(false)
|
||||
|
||||
const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setUserGroupName(event.target.value)
|
||||
}
|
||||
|
||||
const handleDescriptionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setUserGroupDescription(event.target.value)
|
||||
}
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault()
|
||||
setIsSubmitting(true)
|
||||
|
||||
const obj = {
|
||||
name: userGroupName,
|
||||
description: userGroupDescription,
|
||||
org_id: org.id
|
||||
}
|
||||
const res = await createUserGroup(obj)
|
||||
if (res.status == 200) {
|
||||
setIsSubmitting(false)
|
||||
mutate(`${getAPIUrl()}usergroups/org/${org.id}`)
|
||||
props.setCreateUserGroupModal(false)
|
||||
|
||||
} else {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<FormLayout onSubmit={handleSubmit}>
|
||||
<FormField name="name">
|
||||
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormMessage match="valueMissing">
|
||||
Please provide a ug name
|
||||
</FormMessage>
|
||||
</Flex>
|
||||
<Form.Control asChild>
|
||||
<Input onChange={handleNameChange} type="text" required />
|
||||
</Form.Control>
|
||||
</FormField>
|
||||
<FormField name="description">
|
||||
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
|
||||
<FormLabel>Description</FormLabel>
|
||||
<FormMessage match="valueMissing">
|
||||
Please provide a ug description
|
||||
</FormMessage>
|
||||
</Flex>
|
||||
<Form.Control asChild>
|
||||
<Input onChange={handleDescriptionChange} type="text" required />
|
||||
</Form.Control>
|
||||
</FormField>
|
||||
<Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
|
||||
<Form.Submit asChild>
|
||||
<ButtonBlack type="submit" css={{ marginTop: 10 }}>
|
||||
{isSubmitting ? (
|
||||
<BarLoader
|
||||
cssOverride={{ borderRadius: 60 }}
|
||||
width={60}
|
||||
color="#ffffff"
|
||||
/>
|
||||
) : (
|
||||
'Create UserGroup'
|
||||
)}
|
||||
</ButtonBlack>
|
||||
</Form.Submit>
|
||||
</Flex>
|
||||
</FormLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddUserGroup
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react'
|
||||
|
||||
function ManageUsers() {
|
||||
return (
|
||||
<div>ManageUsers</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ManageUsers
|
||||
|
|
@ -10,6 +10,24 @@ export async function getUserGroups(org_id: any) {
|
|||
return res
|
||||
}
|
||||
|
||||
export async function createUserGroup(body: any) {
|
||||
const result: any = await fetch(
|
||||
`${getAPIUrl()}usergroups`,
|
||||
RequestBody('POST', body, null)
|
||||
)
|
||||
const res = await getResponseMetadata(result)
|
||||
return res
|
||||
}
|
||||
|
||||
export async function deleteUserGroup(usergroup_id: number) {
|
||||
const result: any = await fetch(
|
||||
`${getAPIUrl()}usergroups/${usergroup_id}`,
|
||||
RequestBody('DELETE', null, null)
|
||||
)
|
||||
const res = await getResponseMetadata(result)
|
||||
return res
|
||||
}
|
||||
|
||||
export async function linkResourcesToUserGroup(
|
||||
usergroup_id: any,
|
||||
resource_uuids: any
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue