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

added more things

Browse Source
This commit is contained in:
rgrgogu
2026-08-03 16:30:51 +08:00
parent 963ca25313
commit 736e5f0a6f
7 changed files with 234 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/admin/components/courses/LessonsTable.jsx
+17 -36
View File
@@ -1,15 +1,13 @@
import { useMemo, useRef, useState, useCallback } from "react";
import { useMemo, useRef, useState, useCallback, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import api from "@/utils/api.util";
import { useCourses } from "@/contexts/AdminCoursesContext";
import { useAuth } from "@/contexts/AuthContext";
import api from "@/utils/api.util";
import DataTable from "@/components/generic/Table/DataTable";
import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
import AttachLessonsDialog from "../library/AttachLessonsDialog";
import { Link2 } from "lucide-react";
import { buildDataColumns, columnPinning } from "../../config/courses/lessons/columns.config";
import { buildToolbarActions } from "../../config/courses/lessons/toolbar.config";
@@ -22,7 +20,6 @@ import { formatGeneratedBy } from "@/utils/generatedBy.util";
export default function LessonsTable({ courseId, unitId }) {
const [archiveTarget, setArchiveTarget] = useState(null);
const [archiveIds, setArchiveIds] = useState(null);
const [attachOpen, setAttachOpen] = useState(false);
const tableRefsRef = useRef({
getFilters: () => [],
@@ -44,6 +41,17 @@ export default function LessonsTable({ courseId, unitId }) {
tableRefsRef.current = refs;
};
const [tierCategories, setTierCategories] = useState([]);
useEffect(() => {
api.get("/admin/tiers/categories")
.then(({ data }) => setTierCategories(data.data ?? []))
.catch(() => {});
}, []);
const tierMap = useMemo(
() => Object.fromEntries(tierCategories.map((c) => [c.slug, c])),
[tierCategories]
);
const exportConfig = {
allData: lessons,
attributes,
@@ -62,8 +70,7 @@ export default function LessonsTable({ courseId, unitId }) {
onArchive: (row) => setArchiveTarget(row),
}), [courseId, unitId]);
const toolbarActions = [
...buildToolbarActions({
const toolbarActions = buildToolbarActions({
fetchLessons: (params) => fetchLessons(courseId, unitId, params),
pagination,
exportConfig,
@@ -73,24 +80,7 @@ export default function LessonsTable({ courseId, unitId }) {
getFilters: () => tableRefsRef.current.getFilters(),
getSort: () => tableRefsRef.current.getSort(),
getTableInstance: () => tableRefsRef.current.tableInstance,
}),
// Junction revamp — lessons live standalone in the library; attach without re-creating
{
key: "attach-existing",
type: "button",
label: "Attach Existing",
icon: <Link2 className="h-3.5 w-3.5" />,
variant: "outline",
onClick: () => setAttachOpen(true),
},
];
const handleAttachLessons = async (lessonIds) => {
for (const lesson_id of lessonIds) {
await api.post(`/admin/courses/${courseId}/units/${unitId}/lessons`, { lesson_id });
}
fetchLessons(courseId, unitId, { page: 1, limit: pagination?.limit ?? 10 });
};
});
const selectionActions = buildSelectionActions({
exportConfig,
@@ -100,8 +90,8 @@ export default function LessonsTable({ courseId, unitId }) {
});
const columns = useMemo(
() => buildDataColumns(attributes, rowActions),
[attributes, rowActions]
() => buildDataColumns(attributes, rowActions, tierMap, unit?.subscription, course?.subscription),
[attributes, rowActions, tierMap, unit?.subscription, course?.subscription]
);
const handleArchiveSuccess = () => {
@@ -163,15 +153,6 @@ export default function LessonsTable({ courseId, unitId }) {
loading={loading}
onSuccess={handleArchiveSuccess}
/>
{/* ── Attach existing library lessons ── */}
<AttachLessonsDialog
open={attachOpen}
onOpenChange={setAttachOpen}
attachedLessonIds={lessons.map((l) => l.lesson_id)}
onAttach={handleAttachLessons}
loading={loading}
/>
</>
);
}
src/modules/admin/components/courses/UnitsTable.jsx
+14 -3
View File
@@ -1,4 +1,4 @@
import { useMemo, useRef, useState, useCallback } from "react";
import { useMemo, useRef, useState, useCallback, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import api from "@/utils/api.util";
@@ -41,6 +41,17 @@ export default function UnitsTable({ courseId, returnTo }) {
tableRefsRef.current = refs;
};
const [tierCategories, setTierCategories] = useState([]);
useEffect(() => {
api.get("/admin/tiers/categories")
.then(({ data }) => setTierCategories(data.data ?? []))
.catch(() => {});
}, []);
const tierMap = useMemo(
() => Object.fromEntries(tierCategories.map((c) => [c.slug, c])),
[tierCategories]
);
const exportConfig = {
allData: units,
attributes,
@@ -79,8 +90,8 @@ export default function UnitsTable({ courseId, returnTo }) {
});
const columns = useMemo(
() => buildDataColumns(attributes, rowActions),
[attributes, rowActions]
() => buildDataColumns(attributes, rowActions, tierMap, course?.subscription),
[attributes, rowActions, tierMap, course?.subscription]
);
const handleArchiveSuccess = () => {
src/modules/admin/config/courses/lessons/columns.config.jsx
+24 -3
View File
@@ -2,11 +2,13 @@
// Column definitions and pinning config for the Users table.
import { Badge } from "@/components/ui/badge";
import { Clock } from "lucide-react";
import { Clock, Tag } from "lucide-react";
import * as LucideIcons from "lucide-react";
import { buildColumns } from "@/utils/table.util";
import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
import { formatDuration } from "@/utils/timestamp.util";
import { resolveTierBadge } from "@/utils/tierBadge.util";
export const columnPinning = {
right: ["actions"],
@@ -14,7 +16,8 @@ export const columnPinning = {
};
// ─── Custom cell overrides ────────────────────────────────────────────────────
const cellOverrides = {
function buildCellOverrides(tierMap, unitSubscription, courseSubscription) {
return {
duration_seconds: (info) => {
const seconds = parseInt(info.getValue() ?? 0, 10);
@@ -27,17 +30,35 @@ const cellOverrides = {
</div>
);
},
subscription: (info) => {
const slug = info.getValue() || unitSubscription || courseSubscription;
if (!slug) return <span className="text-muted-foreground/40">-</span>;
const { label, cls } = resolveTierBadge(slug, tierMap);
const Icon = LucideIcons[tierMap[slug]?.badge_icon] ?? Tag;
return (
<Badge className={cls}>
<Icon className="size-3" />
{label}
</Badge>
);
},
};
}
/**
* Builds the full column array for the Users table.
*
* @param {Array} attributes Field definitions from the server (drives data columns)
* @param {Array} rowActions Row-level kebab action definitions
* @param {Object} tierMap slug → tier category, for colored Subscription badges
* @param {string} unitSubscription Parent unit's tier, used when the lesson has no direct tier of its own
* @param {string} courseSubscription Parent course's tier, used when neither the lesson nor the unit has one
* @returns {Array} TanStack column definitions
*/
export function buildDataColumns(attributes, rowActions) {
export function buildDataColumns(attributes, rowActions, tierMap = {}, unitSubscription = null, courseSubscription = null) {
const visibleAttributes = attributes.filter((a) => !a.hidden);
const cellOverrides = buildCellOverrides(tierMap, unitSubscription, courseSubscription);
return [
buildSelectionColumn(),
src/modules/admin/config/courses/units/columns.config.jsx
+23 -3
View File
@@ -2,11 +2,13 @@
// Column definitions and pinning config for the Users table.
import { Badge } from "@/components/ui/badge";
import { Clock } from "lucide-react";
import { Clock, Tag } from "lucide-react";
import * as LucideIcons from "lucide-react";
import { buildColumns } from "@/utils/table.util";
import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
import { formatDuration } from "@/utils/timestamp.util";
import { resolveTierBadge } from "@/utils/tierBadge.util";
export const columnPinning = {
right: ["actions"],
@@ -14,7 +16,8 @@ export const columnPinning = {
};
// ─── Custom cell overrides ────────────────────────────────────────────────────
const cellOverrides = {
function buildCellOverrides(tierMap, courseSubscription) {
return {
duration_seconds: (info) => {
const seconds = parseInt(info.getValue() ?? 0, 10);
@@ -27,17 +30,34 @@ const cellOverrides = {
</div>
);
},
subscription: (info) => {
const slug = info.getValue() || courseSubscription;
if (!slug) return <span className="text-muted-foreground/40">-</span>;
const { label, cls } = resolveTierBadge(slug, tierMap);
const Icon = LucideIcons[tierMap[slug]?.badge_icon] ?? Tag;
return (
<Badge className={cls}>
<Icon className="size-3" />
{label}
</Badge>
);
},
};
}
/**
* Builds the full column array for the Users table.
*
* @param {Array} attributes Field definitions from the server (drives data columns)
* @param {Array} rowActions Row-level kebab action definitions
* @param {Object} tierMap slug → tier category, for colored Subscription badges
* @param {string} courseSubscription Parent course's tier, used when the unit has no direct tier of its own
* @returns {Array} TanStack column definitions
*/
export function buildDataColumns(attributes, rowActions) {
export function buildDataColumns(attributes, rowActions, tierMap = {}, courseSubscription = null) {
const visibleAttributes = attributes.filter((a) => !a.hidden);
const cellOverrides = buildCellOverrides(tierMap, courseSubscription);
return [
buildSelectionColumn(),
src/modules/admin/pages/courses/ViewCourse.jsx
+2 -2
View File
@@ -297,9 +297,9 @@ function CourseDetailsTab({ course, loading, instructors, achievementKeys, achie
const TABS = [
{ key: "details", label: "Course Details", icon: BookOpen },
{ key: "progress", label: "Reading Progress", icon: BarChart2 },
{ key: "units", label: "Units", icon: Layers },
{ key: "assessment", label: "Assessment", icon: ClipboardList },
{ key: "units", label: "Units", icon: Layers },
{ key: "progress", label: "Reading Progress", icon: BarChart2 },
];
const WIDE_TABS = new Set(["units", "assessment"]);
src/modules/admin/pages/courses/lessons/AddLesson.jsx
+46 -2
View File
@@ -7,13 +7,14 @@ import { nanoid } from "nanoid";
import {
ChevronLeft, ChevronRight, Check,
FileText, LayoutTemplate, ListChecks,
Plus, Trash2,
Plus, Trash2, Link2,
} from "lucide-react";
import { useCourses } from "@/contexts/AdminCoursesContext";
import { useAuth } from "@/contexts/AuthContext";
import { PageMeta } from "@/contexts/MetadataContext";
import { cn } from "@/lib/utils";
import api from "@/utils/api.util";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
@@ -28,6 +29,7 @@ import { AddBlockMenu } from "@/components/generic/AddBlockMenu";
import { PreviewContent, PreviewChrome } from "../../../components/courses/LessonsPreview";
import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
import DraftRequirementsEditor from "@/modules/admin/components/courses/DraftRequirementsEditor";
import AttachLessonsDialog from "@/modules/admin/components/library/AttachLessonsDialog";
function makeBlock(type) {
return { id: nanoid(), type, content: { ...DEFAULT_CONTENT[type] } };
@@ -231,8 +233,10 @@ export default function AddLesson() {
} = useCourses();
const { user } = useAuth();
const [mode, setMode] = useState(null); // null | "create" — the wizard only shows once "Create" is chosen
const [step, setStep] = useState(0);
const [requirements, setRequirements] = useState([]);
const [attachOpen, setAttachOpen] = useState(false);
const {
register, control, trigger, getValues, setValue,
@@ -294,6 +298,14 @@ export default function AddLesson() {
navigate(`/admin/courses/${courseId}/units/${unitId}/lessons`);
};
const handleAttachLessons = async (lessonIds) => {
for (const lesson_id of lessonIds) {
await api.post(`/admin/courses/${courseId}/units/${unitId}/lessons`, { lesson_id });
}
bypassOnce();
navigate(`/admin/courses/${courseId}/units/${unitId}/lessons`);
};
return (
<section className="bg-muted h-full">
<PageMeta title={unit ? `Add Lesson – ${unit.title} - STARR` : undefined} />
@@ -301,7 +313,12 @@ export default function AddLesson() {
<div className="w-full max-w-3xl mx-auto space-y-6">
<div className="flex items-center gap-3">
<Button type="button" variant="ghost" size="icon" onClick={handleBack}>
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => (mode === "create" && step > 0 ? setStep(0) : handleBack())}
>
<ChevronLeft className="h-4 w-4" />
</Button>
<div>
@@ -314,6 +331,23 @@ export default function AddLesson() {
</div>
</div>
{/* Select existing vs. create new */}
<div className="flex items-start justify-between gap-3 pb-3 border-b border-border">
<p className="text-xs text-muted-foreground">
Attach an existing library lesson to reuse its content, or create a new one from scratch.
</p>
<div className="flex items-center gap-2 shrink-0">
<Button type="button" variant="outline" size="sm" onClick={() => setAttachOpen(true)}>
<Link2 className="h-3.5 w-3.5 mr-1.5" /> Select
</Button>
<Button type="button" variant="outline" size="sm" onClick={() => setMode("create")}>
<Plus className="h-3.5 w-3.5 mr-1.5" /> Create
</Button>
</div>
</div>
{mode === "create" && (
<>
{/* Stepper */}
<div className="flex items-center gap-0">
{STEPS.map((s, i) => {
@@ -397,10 +431,20 @@ export default function AddLesson() {
</Button>
)}
</div>
</>
)}
</div>
</div>
{unsavedChangesDialog}
<AttachLessonsDialog
open={attachOpen}
onOpenChange={setAttachOpen}
attachedLessonIds={unit?.lessons?.map((l) => l.lesson_id) ?? []}
onAttach={handleAttachLessons}
loading={loading}
/>
</section>
);
}
src/modules/admin/pages/task_list/ViewTaskList.jsx
+1 -1
View File
@@ -248,7 +248,7 @@ export default function ViewTaskList() {
<span className="text-xs text-muted-foreground w-5 text-right shrink-0">
{index + 1}.
</span>
<span className="flex-1 text-sm text-left truncate">
<span className="flex-1 text-sm text-left truncate w-48">
{task.name ?? `Task ${index + 1}`}
</span>
{task.requirements?.length > 0 && (