mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
fix: collections bugs and issues
This commit is contained in:
swve
parent
79a31dd8ec
commit
be7b9499f2
4 changed files with 210 additions and 111 deletions
|
|
@ -7,17 +7,22 @@ import { getAPIUrl, getUriWithOrg } from '@services/config/config'
|
|||
import { revalidateTags, swrFetcher } from '@services/utils/ts/requests'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { Loader2, Image as ImageIcon } from 'lucide-react'
|
||||
import { toast } from 'react-hot-toast'
|
||||
import Image from 'next/image'
|
||||
import { getCourseThumbnailMediaDirectory } from '@services/media/media'
|
||||
|
||||
function NewCollection(params: any) {
|
||||
const org = useOrg() as any
|
||||
const session = useLHSession() as any;
|
||||
const access_token = session?.data?.tokens?.access_token;
|
||||
const session = useLHSession() as any
|
||||
const access_token = session?.data?.tokens?.access_token
|
||||
const orgslug = params.params.orgslug
|
||||
const [name, setName] = React.useState('')
|
||||
const [description, setDescription] = React.useState('')
|
||||
const [selectedCourses, setSelectedCourses] = React.useState([]) as any
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const router = useRouter()
|
||||
const { data: courses, error: error } = useSWR(
|
||||
const { data: courses, error: error, isLoading } = useSWR(
|
||||
`${getAPIUrl()}courses/org_slug/${orgslug}/page/1/limit/10`,
|
||||
(url) => swrFetcher(url, access_token)
|
||||
)
|
||||
|
|
@ -32,111 +37,189 @@ function NewCollection(params: any) {
|
|||
}
|
||||
|
||||
const handleDescriptionChange = (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
event: React.ChangeEvent<HTMLTextAreaElement>
|
||||
) => {
|
||||
setDescription(event.target.value)
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: any) => {
|
||||
e.preventDefault()
|
||||
|
||||
const collection = {
|
||||
name: name,
|
||||
description: description,
|
||||
courses: selectedCourses,
|
||||
public: isPublic,
|
||||
org_id: org.id,
|
||||
|
||||
if (!name.trim()) {
|
||||
toast.error('Please enter a collection name')
|
||||
return
|
||||
}
|
||||
await createCollection(collection, session.data?.tokens?.access_token)
|
||||
await revalidateTags(['collections'], org.slug)
|
||||
// reload the page
|
||||
router.refresh()
|
||||
|
||||
// wait for 2s before reloading the page
|
||||
setTimeout(() => {
|
||||
if (!description.trim()) {
|
||||
toast.error('Please enter a description')
|
||||
return
|
||||
}
|
||||
|
||||
if (selectedCourses.length === 0) {
|
||||
toast.error('Please select at least one course')
|
||||
return
|
||||
}
|
||||
|
||||
setIsSubmitting(true)
|
||||
try {
|
||||
const collection = {
|
||||
name: name.trim(),
|
||||
description: description.trim(),
|
||||
courses: selectedCourses,
|
||||
public: isPublic,
|
||||
org_id: org.id,
|
||||
}
|
||||
await createCollection(collection, session.data?.tokens?.access_token)
|
||||
await revalidateTags(['collections'], org.slug)
|
||||
toast.success('Collection created successfully!')
|
||||
router.push(getUriWithOrg(orgslug, '/collections'))
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
toast.error('Failed to create collection. Please try again.')
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-[60vh]">
|
||||
<div className="text-red-500">Failed to load courses. Please try again later.</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-64 m-auto py-20">
|
||||
<div className="font-bold text-lg mb-4">Add new</div>
|
||||
<div className="max-w-2xl mx-auto py-12 px-4">
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Create New Collection</h1>
|
||||
<p className="mt-2 text-sm text-gray-600">
|
||||
Group your courses together in a collection to make them easier to find and manage.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
value={name}
|
||||
onChange={handleNameChange}
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<label className="block">
|
||||
<span className="text-sm font-medium text-gray-700">Collection Name</span>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter collection name"
|
||||
value={name}
|
||||
onChange={handleNameChange}
|
||||
className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
|
||||
maxLength={100}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<select
|
||||
onChange={handleVisibilityChange}
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
defaultValue={isPublic}
|
||||
>
|
||||
<option value="false">Private Collection</option>
|
||||
<option value="true">Public Collection </option>
|
||||
</select>
|
||||
|
||||
{!courses ? (
|
||||
<p className="text-gray-500">Loading...</p>
|
||||
) : (
|
||||
<div className="space-y-4 p-3">
|
||||
<p>Courses</p>
|
||||
{courses.map((course: any) => (
|
||||
<div
|
||||
key={course.course_uuid}
|
||||
className="flex items-center space-x-2"
|
||||
<label className="block">
|
||||
<span className="text-sm font-medium text-gray-700">Visibility</span>
|
||||
<select
|
||||
onChange={handleVisibilityChange}
|
||||
className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
|
||||
defaultValue={isPublic}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={course.id}
|
||||
name={course.name}
|
||||
value={course.id}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedCourses([...selectedCourses, course.id])
|
||||
} else {
|
||||
setSelectedCourses(
|
||||
selectedCourses.filter(
|
||||
(course_uuid: any) =>
|
||||
course_uuid !== course.course_uuid
|
||||
)
|
||||
)
|
||||
}
|
||||
}}
|
||||
className="text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<option value="true">Public Collection - Visible to everyone</option>
|
||||
<option value="false">Private Collection - Only visible to organization members</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label
|
||||
htmlFor={course.course_uuid}
|
||||
className="text-sm text-gray-700"
|
||||
>
|
||||
{course.name}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
<label className="block">
|
||||
<span className="text-sm font-medium text-gray-700">Description</span>
|
||||
<textarea
|
||||
placeholder="Enter collection description"
|
||||
value={description}
|
||||
onChange={handleDescriptionChange}
|
||||
rows={4}
|
||||
className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
|
||||
maxLength={500}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div className="space-y-2">
|
||||
<span className="text-sm font-medium text-gray-700">Select Courses</span>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 className="w-6 h-6 animate-spin text-gray-500" />
|
||||
</div>
|
||||
) : courses?.length === 0 ? (
|
||||
<p className="text-sm text-gray-500 py-4">No courses available. Create some courses first.</p>
|
||||
) : (
|
||||
<div className="mt-2 border border-gray-200 rounded-lg bg-gray-50">
|
||||
<div className="max-h-[400px] overflow-y-auto p-4 space-y-3 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent hover:scrollbar-thumb-gray-400">
|
||||
{courses?.map((course: any) => (
|
||||
<label
|
||||
key={course.id}
|
||||
className="relative flex items-center p-4 bg-white rounded-md hover:bg-gray-50 transition cursor-pointer gap-4"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={course.id}
|
||||
name={course.name}
|
||||
value={course.id}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedCourses([...selectedCourses, course.id])
|
||||
} else {
|
||||
setSelectedCourses(
|
||||
selectedCourses.filter((id: any) => id !== course.id)
|
||||
)
|
||||
}
|
||||
}}
|
||||
className="h-4 w-4 text-blue-500 rounded border-gray-300 focus:ring-blue-500"
|
||||
/>
|
||||
<div className="relative w-24 h-16 rounded-md overflow-hidden bg-gray-100 flex-shrink-0">
|
||||
{course.thumbnail_image ? (
|
||||
<img
|
||||
src={getCourseThumbnailMediaDirectory(org.org_uuid, course.course_uuid, course.thumbnail_image)}
|
||||
alt={course.name}
|
||||
className="object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<ImageIcon className="w-6 h-6 text-gray-400" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-sm font-medium text-gray-900 truncate">{course.name}</h3>
|
||||
{course.description && (
|
||||
<p className="mt-1 text-xs text-gray-500 line-clamp-2">{course.description}</p>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<div className="px-4 py-3 bg-gray-50 border-t border-gray-200">
|
||||
<p className="text-xs text-gray-500">
|
||||
Selected courses: {selectedCourses.length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Description"
|
||||
value={description}
|
||||
onChange={handleDescriptionChange}
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-black focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
<div className="flex items-center justify-end space-x-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="px-6 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2"
|
||||
>
|
||||
{isSubmitting && <Loader2 className="w-4 h-4 animate-spin" />}
|
||||
<span>{isSubmitting ? 'Creating...' : 'Create Collection'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ const CollectionsPage = async (params: any) => {
|
|||
text="Create a collection to add content"
|
||||
/>
|
||||
</p>
|
||||
<div className="mt-4">
|
||||
<div className="mt-4 flex justify-center">
|
||||
<AuthenticatedClientElement
|
||||
checkMethod="roles"
|
||||
ressourceType="collections"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue