mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: init usergroup linking to a course
This commit is contained in:
swve
parent
a6152ef1f5
commit
4f75e6a90a
12 changed files with 428 additions and 55 deletions
|
|
@ -0,0 +1,211 @@
|
|||
import { useCourse, useCourseDispatch } from '@components/Contexts/CourseContext'
|
||||
import LinkToUserGroup from '@components/Objects/Modals/Dash/EditCourseAccess/LinkToUserGroup'
|
||||
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
|
||||
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 React from 'react'
|
||||
import toast from 'react-hot-toast'
|
||||
import useSWR, { mutate } from 'swr'
|
||||
|
||||
type EditCourseAccessProps = {
|
||||
orgslug: string
|
||||
course_uuid?: string
|
||||
}
|
||||
|
||||
function EditCourseAccess(props: EditCourseAccessProps) {
|
||||
const [error, setError] = React.useState('')
|
||||
|
||||
const course = useCourse() as any
|
||||
const dispatchCourse = useCourseDispatch() as any
|
||||
const courseStructure = course.courseStructure
|
||||
const { data: usergroups } = useSWR(
|
||||
courseStructure ? `${getAPIUrl()}usergroups/resource/${courseStructure.course_uuid}` : null,
|
||||
swrFetcher
|
||||
)
|
||||
const [isPublic, setIsPublic] = React.useState(courseStructure.public)
|
||||
|
||||
|
||||
React.useEffect(() => {
|
||||
// This code will run whenever form values are updated
|
||||
if (isPublic !== courseStructure.public) {
|
||||
dispatchCourse({ type: 'setIsNotSaved' })
|
||||
const updatedCourse = {
|
||||
...courseStructure,
|
||||
public: isPublic,
|
||||
}
|
||||
dispatchCourse({ type: 'setCourseStructure', payload: updatedCourse })
|
||||
}
|
||||
}, [course, isPublic])
|
||||
return (
|
||||
<div>
|
||||
{' '}
|
||||
<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">Access to the course</h1>
|
||||
<h2 className="text-gray-500 text-sm">
|
||||
{' '}
|
||||
Choose if want your course to be publicly available on the internet or only accessible to signed in users{' '}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex space-x-2 mx-auto mb-3">
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Change to Public"
|
||||
confirmationMessage="Are you sure you want this course to be publicly available on the internet ?"
|
||||
dialogTitle={'Change to Public ?'}
|
||||
dialogTrigger={
|
||||
<div className="w-full h-[200px] bg-slate-100 rounded-lg cursor-pointer hover:bg-slate-200 ease-linear transition-all">
|
||||
{isPublic ? (
|
||||
<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">
|
||||
Public
|
||||
</div>
|
||||
<div className="text-gray-400 text-md tracking-tight w-[500px] leading-5 text-center">
|
||||
The Course is publicly available on the internet, it is indexed by search engines and can be accessed by anyone
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
}
|
||||
functionToExecute={() => {
|
||||
setIsPublic(true)
|
||||
}}
|
||||
status="info"
|
||||
></ConfirmationModal>
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Change to Users Only"
|
||||
confirmationMessage="Are you sure you want this course to be only accessible to signed in users ?"
|
||||
dialogTitle={'Change to Users Only ?'}
|
||||
dialogTrigger={
|
||||
<div className="w-full h-[200px] bg-slate-100 rounded-lg cursor-pointer hover:bg-slate-200 ease-linear transition-all">
|
||||
{!isPublic ? (
|
||||
<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">
|
||||
<Users className="text-slate-400" size={40}></Users>
|
||||
<div className="text-2xl text-slate-700 font-bold">
|
||||
Users Only
|
||||
</div>
|
||||
<div className="text-gray-400 text-md tracking-tight w-[500px] leading-5 text-center">
|
||||
The Course is only accessible to signed in users, additionaly you can choose which UserGroups can access this course
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
}
|
||||
functionToExecute={() => {
|
||||
setIsPublic(false)
|
||||
}}
|
||||
status="info"
|
||||
></ConfirmationModal>
|
||||
</div>
|
||||
<UserGroupsSection usergroups={usergroups} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
function UserGroupsSection({ usergroups }: { usergroups: any[] }) {
|
||||
const course = useCourse() as any
|
||||
const [userGroupModal, setUserGroupModal] = React.useState(false)
|
||||
|
||||
const removeUserGroupLink = async (usergroup_id: number) => {
|
||||
const res = await unLinkResourcesToUserGroup(usergroup_id, course.courseStructure.course_uuid)
|
||||
if (res.status === 200) {
|
||||
toast.success('Successfully unliked from usergroup')
|
||||
mutate(`${getAPIUrl()}usergroups/resource/${course.courseStructure.course_uuid}`)
|
||||
}
|
||||
else {
|
||||
toast.error('Error ' + res.status + ': ' + res.data.detail)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<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">UserGroups</h1>
|
||||
<h2 className="text-gray-500 text-sm">
|
||||
{' '}
|
||||
Choose which UserGroups can access this course{' '}
|
||||
</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">Name</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.invite_code_uuid}
|
||||
className="border-b border-gray-100 text-sm"
|
||||
>
|
||||
<td className="py-3 px-4">{usergroup.name}</td>
|
||||
<td className="py-3 px-4">
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Delete Link"
|
||||
confirmationMessage="Users from this UserGroup will no longer have access to this course"
|
||||
dialogTitle={'Unlink UserGroup ?'}
|
||||
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 link</span>
|
||||
</button>
|
||||
}
|
||||
functionToExecute={() => {
|
||||
removeUserGroupLink(usergroup.id)
|
||||
}}
|
||||
status="warning"
|
||||
></ConfirmationModal>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</>
|
||||
</table>
|
||||
<div className='flex flex-row-reverse mt-3 mr-2'>
|
||||
<Modal
|
||||
isDialogOpen={
|
||||
userGroupModal
|
||||
}
|
||||
onOpenChange={() =>
|
||||
setUserGroupModal(!userGroupModal)
|
||||
}
|
||||
minHeight="no-min"
|
||||
dialogContent={
|
||||
<LinkToUserGroup setUserGroupModal={setUserGroupModal} />
|
||||
|
||||
}
|
||||
dialogTitle="Link Course to a UserGroup"
|
||||
dialogDescription={
|
||||
'Choose which UserGroups can access this course'
|
||||
}
|
||||
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"
|
||||
>
|
||||
<UsersRound className="w-4 h-4" />
|
||||
<span>Link to a UserGroup</span>
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
||||
</div></>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditCourseAccess
|
||||
|
|
@ -116,10 +116,11 @@ function EditCourseGeneral(props: EditCourseStructureProps) {
|
|||
message={formik.errors.description}
|
||||
/>
|
||||
<Form.Control asChild>
|
||||
<Textarea
|
||||
<Input
|
||||
style={{ backgroundColor: 'white' }}
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.description}
|
||||
type='text'
|
||||
required
|
||||
/>
|
||||
</Form.Control>
|
||||
|
|
@ -177,26 +178,7 @@ function EditCourseGeneral(props: EditCourseStructureProps) {
|
|||
</Form.Control>
|
||||
</FormField>
|
||||
|
||||
<FormField className="flex items-center h-10" name="public">
|
||||
<div className="flex my-auto items-center">
|
||||
<label
|
||||
className="text-black text-[15px] leading-none pr-[15px]"
|
||||
htmlFor="public-course"
|
||||
>
|
||||
Public Course
|
||||
</label>
|
||||
<Switch.Root
|
||||
className="w-[42px] h-[25px] bg-neutral-200 rounded-full relative data-[state=checked]:bg-neutral-500 outline-none cursor-default"
|
||||
id="public-course"
|
||||
onCheckedChange={(checked) =>
|
||||
formik.setFieldValue('public', checked)
|
||||
}
|
||||
checked={formik.values.public === 'true'}
|
||||
>
|
||||
<Switch.Thumb className="block w-[21px] h-[21px] bg-white rounded-full shadow-[0_2px_2px] shadow-neutral-300 transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[19px]" />
|
||||
</Switch.Root>
|
||||
</div>
|
||||
</FormField>
|
||||
|
||||
</FormLayout>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -46,18 +46,17 @@ function ThumbnailUpdate() {
|
|||
{localThumbnail ? (
|
||||
<img
|
||||
src={URL.createObjectURL(localThumbnail)}
|
||||
className={`${
|
||||
isLoading ? 'animate-pulse' : ''
|
||||
} shadow w-[200px] h-[100px] rounded-md`}
|
||||
className={`${isLoading ? 'animate-pulse' : ''
|
||||
} shadow w-[200px] h-[100px] rounded-md`}
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
src={`${getCourseThumbnailMediaDirectory(
|
||||
src={`${course.courseStructure.thumbnail_image ? getCourseThumbnailMediaDirectory(
|
||||
org?.org_uuid,
|
||||
course.courseStructure.course_uuid,
|
||||
course.courseStructure.thumbnail_image
|
||||
)}`}
|
||||
className="shadow w-[200px] h-[100px] rounded-md"
|
||||
) : '/empty_thumbnail.png'}`}
|
||||
className="shadow w-[200px] h-[100px] rounded-md bg-gray-200"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue