kennethscoffee/starr-philproperties
1
0
Fork 0
mirror of https://github.com/rgrgogu/new_starr.git synced 2026-09-27 00:12:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix some issues

Browse Source
This commit is contained in:
rgrgogu
2026-07-19 14:59:46 +08:00
parent bd7200a9cf
commit 51133a51a5
6 changed files with 121 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/admin/components/courses/CreateUnitDialog.jsx
+58 -5
View File
@@ -1,22 +1,27 @@
// modules/admin/components/courses/CreateUnitDialog.jsx
// Lightweight "create a brand-new unit and attach it to this course" dialog —
// the create-new counterpart to AttachUnitsDialog's attach-existing flow.
// Two steps (Details -> Completion Requirements) to match the other two
// create-unit surfaces (AddUnit.jsx, AddLibraryUnit.jsx) — same capability,
// just condensed into a dialog since this one runs inline in a wizard.
import { useEffect } from "react";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { ChevronLeft } from "lucide-react";
import { useCourses } from "@/contexts/AdminCoursesContext";
import { useAuth } from "@/contexts/AuthContext";
import {
Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose,
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Spinner } from "@/components/ui/spinner";
import DraftRequirementsEditor from "./DraftRequirementsEditor";
const schema = z.object({
title: z.string().min(1, "Title is required."),
@@ -25,19 +30,33 @@ const schema = z.object({
});
export default function CreateUnitDialog({ open, onOpenChange, courseId, nextOrder = 0, onCreated, draftMode = false }) {
const { createUnit, loading } = useCourses();
const { createUnit, syncUnitRequirements, loading } = useCourses();
const { user } = useAuth();
const { register, handleSubmit, reset, formState: { errors } } = useForm({
const [step, setStep] = useState(0);
const [requirements, setRequirements] = useState([]);
const { register, handleSubmit, trigger, reset, formState: { errors } } = useForm({
resolver: zodResolver(schema),
defaultValues: { title: "", description: "", order: nextOrder },
});
useEffect(() => {
if (open) reset({ title: "", description: "", order: nextOrder });
if (open) {
reset({ title: "", description: "", order: nextOrder });
setStep(0);
setRequirements([]);
}
}, [open, nextOrder, reset]);
const handleNext = async () => {
const valid = await trigger();
if (valid) setStep(1);
};
const onValid = async (values) => {
const clean = requirements.map(({ _key, ...r }) => r);
if (draftMode) {
onCreated?.({
unit_id: null,
@@ -46,6 +65,7 @@ export default function CreateUnitDialog({ open, onOpenChange, courseId, nextOrd
description: values.description,
order_index: values.order,
lessons: [],
requirements: clean,
});
onOpenChange(false);
return;
@@ -54,6 +74,11 @@ export default function CreateUnitDialog({ open, onOpenChange, courseId, nextOrd
const result = await createUnit(courseId, { ...values, createdBy: user?.user_id });
const unit = result?.data?.data ?? null;
if (!unit) return;
if (clean.length > 0) {
await syncUnitRequirements(courseId, unit.unit_id, clean);
}
onCreated?.(unit);
onOpenChange(false);
};
@@ -63,9 +88,14 @@ export default function CreateUnitDialog({ open, onOpenChange, courseId, nextOrd
<DialogContent className="sm:max-w-[440px]">
<DialogHeader>
<DialogTitle>New Unit</DialogTitle>
<DialogDescription>
Creates a new unit in the shared Units Library and attaches it to this course.
</DialogDescription>
</DialogHeader>
<form onSubmit={handleSubmit(onValid)} className="space-y-4">
{step === 0 && (
<>
<div className="space-y-1.5">
<Label htmlFor="unit_title">
Title <span className="text-destructive">*</span>
@@ -83,15 +113,38 @@ export default function CreateUnitDialog({ open, onOpenChange, courseId, nextOrd
<Label htmlFor="unit_order">Order</Label>
<Input id="unit_order" type="number" min={0} {...register("order")} />
</div>
</>
)}
{step === 1 && (
<div className="space-y-3">
<p className="text-sm text-muted-foreground">
Configure how learners complete this unit — optional, sensible defaults apply automatically.
</p>
<DraftRequirementsEditor entityType="unit" items={requirements} onChange={setRequirements} />
</div>
)}
<DialogFooter>
{step === 0 ? (
<>
<DialogClose asChild>
<Button type="button" variant="outline" disabled={loading}>Cancel</Button>
</DialogClose>
<Button type="button" onClick={handleNext}>Next</Button>
</>
) : (
<>
<Button type="button" variant="outline" onClick={() => setStep(0)} disabled={loading}>
<ChevronLeft className="h-4 w-4 mr-1" />
Back
</Button>
<Button type="submit" disabled={loading}>
{loading && <Spinner className="h-4 w-4 mr-2" />}
Create Unit
</Button>
</>
)}
</DialogFooter>
</form>
</DialogContent>
src/modules/admin/components/courses/UnitsTable.jsx
+2 -1
View File
@@ -18,7 +18,7 @@ import { buildRowActions } from "../../config/courses/units/rowActions.config";
import { getTimestamp } from "@/utils/timestamp.util";
export default function UnitsTable({ courseId }) {
export default function UnitsTable({ courseId, returnTo }) {
const [archiveTarget, setArchiveTarget] = useState(null);
const [archiveIds, setArchiveIds] = useState(null);
const [attachOpen, setAttachOpen] = useState(false);
@@ -68,6 +68,7 @@ export default function UnitsTable({ courseId }) {
exportConfig,
navigate,
courseId,
returnTo,
getFilters: () => tableRefsRef.current.getFilters(),
getSort: () => tableRefsRef.current.getSort(),
getTableInstance: () => tableRefsRef.current.tableInstance,
src/modules/admin/config/courses/units/toolbar.config.jsx
+2 -1
View File
@@ -7,6 +7,7 @@ export function buildToolbarActions({
exportConfig,
navigate,
courseId,
returnTo,
getFilters,
getSort,
getTableInstance,
@@ -42,7 +43,7 @@ export function buildToolbarActions({
label: "New Unit",
icon: <Plus className="h-3.5 w-3.5" />,
variant: "default",
onClick: () => navigate(`/admin/courses/${courseId}/units/add`),
onClick: () => navigate(`/admin/courses/${courseId}/units/add`, returnTo ? { state: { returnTo } } : undefined),
},
{
key: "archived-units",
src/modules/admin/pages/courses/AddCourse.jsx
+1
View File
@@ -271,6 +271,7 @@ export default function AddCourse() {
unit_id: u.unit_id,
title: u.title,
description: u.description,
requirements: u.requirements ?? [],
lessons: u.lessons.map((l) => ({
lesson_id: l.lesson_id,
title: l.title,
src/modules/admin/pages/courses/EditCourse.jsx
+26 -9
View File
@@ -1,5 +1,5 @@
import { useEffect, useState, useCallback } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { useForm, useFieldArray, useWatch } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
@@ -14,6 +14,7 @@ import { TIER_COLOR_OPTIONS } from "@/utils/tierColors";
import { AssetPickerSheet } from "@/components/generic/AssetPickerSheet";
import { PageMeta } from "@/contexts/MetadataContext";
import CourseInstructorPicker from "@/modules/admin/components/courses/CourseInstructorPicker";
import UnitsTable from "@/modules/admin/components/courses/UnitsTable";
import CoursePrerequisiteBuilder from "@/modules/admin/components/courses/CoursePrerequisiteBuilder";
import { useCategories } from "@/contexts/AdminCategoriesContext";
import { useAuth } from "@/contexts/AuthContext";
@@ -61,6 +62,7 @@ const schema = z.object({
const STEPS = [
{ label: "Basic Info", description: "Title, level & objectives" },
{ label: "Units", description: "Roadmap for this course" },
{ label: "Categories", description: "Tags & instructors" },
{ label: "Rewards", description: "Badge & achievements" },
{ label: "Requirements", description: "Prerequisites & completion" },
@@ -157,7 +159,12 @@ export default function EditCourse() {
const { categories: allCategories, fetchCategories } = useCategories();
const { user } = useAuth();
const [currentStep, setCurrentStep] = useState(0);
const [searchParams] = useSearchParams();
const initialStep = Math.min(
Math.max(Number(searchParams.get("step")) || 0, 0),
STEPS.length - 1,
);
const [currentStep, setCurrentStep] = useState(initialStep);
// ─── Tier categories ──────────────────────────────────────────────────────
const [tierCategories, setTierCategories] = useState([]);
@@ -751,8 +758,18 @@ export default function EditCourse() {
</>
)}
{/* ── Step 1: Categories & Instructors ── */}
{/* ── Step 1: Units ── */}
{currentStep === 1 && (
<SectionCard
title="Units"
description="This course's roadmap. Units live independently in the shared Units Library — creating one here attaches it automatically, and attaching an existing one reuses it without copying."
>
<UnitsTable courseId={courseId} returnTo={`/admin/courses/${courseId}/edit?step=1`} />
</SectionCard>
)}
{/* ── Step 2: Categories & Instructors ── */}
{currentStep === 2 && (
<>
<SectionCard title="Categories" description="Assign this course to one or more categories for browsing.">
{selectedCategoryIds.length > 0 && (
@@ -900,8 +917,8 @@ export default function EditCourse() {
</>
)}
{/* ── Step 2: Rewards ── */}
{currentStep === 2 && (
{/* ── Step 3: Rewards ── */}
{currentStep === 3 && (
<SectionCard
title="Rewards"
description="Badge and achievements awarded to learners who complete this course."
@@ -1109,8 +1126,8 @@ export default function EditCourse() {
</SectionCard>
)}
{/* ── Step 3: Prerequisites & Completion Requirements ── */}
{currentStep === 3 && (
{/* ── Step 4: Prerequisites & Completion Requirements ── */}
{currentStep === 4 && (
<>
<SectionCard
title="Prerequisites"
@@ -1153,8 +1170,8 @@ export default function EditCourse() {
</>
)}
{/* ── Step 4: Pricing ── */}
{currentStep === 4 && (
{/* ── Step 5: Pricing ── */}
{currentStep === 5 && (
<SectionCard
title="Product Listing"
description="Allow learners to purchase this course individually via PayPal."
src/modules/admin/pages/courses/units/AddUnit.jsx
+10 -5
View File
@@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useNavigate, useParams, useLocation } from "react-router-dom";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
@@ -35,10 +35,13 @@ function FieldError({ message }) {
export default function AddUnit() {
const navigate = useNavigate();
const location = useLocation();
const { courseId } = useParams();
const { createUnit, fetchCourse, course, loading, syncUnitRequirements } = useCourses();
const { user } = useAuth();
const backTarget = location.state?.returnTo ?? `/admin/courses/${courseId}/units`;
const [step, setStep] = useState(0);
const [requirements, setRequirements] = useState([]);
@@ -72,7 +75,7 @@ export default function AddUnit() {
}
bypassOnce();
navigate(`/admin/courses/${courseId}/units`);
navigate(backTarget);
};
return (
@@ -86,13 +89,15 @@ export default function AddUnit() {
type="button"
variant="ghost"
size="icon"
onClick={() => (step === 0 ? navigate(`/admin/courses/${courseId}/units`) : setStep(0))}
onClick={() => (step === 0 ? navigate(backTarget) : setStep(0))}
>
<ChevronLeft className="h-4 w-4" />
</Button>
<div>
<h1 className="text-xl font-semibold">Create Unit</h1>
<p className="text-sm text-muted-foreground">Add a new unit to this course.</p>
<p className="text-sm text-muted-foreground">
Creates a new unit in the shared Units Library and attaches it to this course.
</p>
</div>
</div>
@@ -169,7 +174,7 @@ export default function AddUnit() {
<Button
type="button"
variant="outline"
onClick={() => (step === 0 ? navigate(`/admin/courses/${courseId}/units`) : setStep(0))}
onClick={() => (step === 0 ? navigate(backTarget) : setStep(0))}
disabled={loading}
>
<ChevronLeft className="h-4 w-4 mr-1" />