@defikitdotnet/education-module-ai
Version:
AI Education Module using Agent Framework
195 lines (194 loc) • 15.9 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var router_1 = require("next/router");
var card_1 = require("../../components/ui/card");
var input_1 = require("../../components/ui/input");
var label_1 = require("../../components/ui/label");
var textarea_1 = require("../../components/ui/textarea");
var select_1 = require("../../components/ui/select");
var button_1 = require("../../components/ui/button");
var lucide_react_1 = require("lucide-react");
var AgentContext_1 = require("../../context/AgentContext");
var file_upload_1 = require("../../components/ui/file-upload");
var tabs_1 = require("../../components/ui/tabs");
var CategoryManager_1 = __importDefault(require("../../components/CategoryManager"));
var link_1 = __importDefault(require("next/link"));
// Map of values to display names
var levelNames = {
beginner: "Beginner",
intermediate: "Intermediate",
advanced: "Advanced",
};
var visibilityNames = {
private: "Private",
public: "Public",
};
var CreateCoursePage = function () {
var router = (0, router_1.useRouter)();
var agent = (0, AgentContext_1.useAgent)().agent;
var _a = (0, react_1.useState)(null), teacher = _a[0], setTeacher = _a[1];
var _b = (0, react_1.useState)(false), isAuthenticated = _b[0], setIsAuthenticated = _b[1];
var _c = (0, react_1.useState)({
title: "",
description: "",
level: "beginner",
visibility: "private",
thumbnail: "",
categories: [],
}), formData = _c[0], setFormData = _c[1];
var _d = (0, react_1.useState)(false), isSubmitting = _d[0], setIsSubmitting = _d[1];
var _e = (0, react_1.useState)(null), error = _e[0], setError = _e[1];
var _f = (0, react_1.useState)("upload"), thumbnailTab = _f[0], setThumbnailTab = _f[1];
var apiBaseUrl = process.env.NEXT_PUBLIC_BACKEND_URL || "http://localhost:3009";
(0, react_1.useEffect)(function () {
// Check for teacher info in localStorage
var storedTeacher = localStorage.getItem('currentTeacher');
if (storedTeacher) {
try {
var teacherData = JSON.parse(storedTeacher);
setTeacher(teacherData);
setIsAuthenticated(true);
}
catch (e) {
console.error("Failed to parse teacher data:", e);
router.push('/teacher/login');
}
}
else {
// Redirect to login if no teacher data found
router.push('/teacher/login');
}
}, [router]);
var handleTextChange = function (e) {
var _a = e.target, name = _a.name, value = _a.value;
setFormData(function (prev) {
var _a;
return (__assign(__assign({}, prev), (_a = {}, _a[name] = value, _a)));
});
};
var handleSelectChange = function (name, value) {
setFormData(function (prev) {
var _a;
return (__assign(__assign({}, prev), (_a = {}, _a[name] = value, _a)));
});
};
var handleCategoriesChange = function (selectedCategoryIds) {
setFormData(function (prev) { return (__assign(__assign({}, prev), { categories: selectedCategoryIds })); });
};
var handleFileUpload = function (fileUrl) {
// We need to set the full URL with the API base URL
var fullUrl = "".concat(process.env.NEXT_PUBLIC_BACKEND_URL).concat(fileUrl);
setFormData(function (prev) { return (__assign(__assign({}, prev), { thumbnail: fullUrl })); });
};
var handleSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
var response, errorData, course, err_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
e.preventDefault();
setError(null);
setIsSubmitting(true);
_a.label = 1;
case 1:
_a.trys.push([1, 6, , 7]);
if (!teacher || !teacher.id) {
throw new Error("Teacher authentication is required");
}
return [4 /*yield*/, fetch("".concat(apiBaseUrl, "/api/courses"), {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(__assign(__assign({}, formData), { teacherId: teacher.id })),
credentials: 'include', // Include cookies for authentication
})];
case 2:
response = _a.sent();
if (!!response.ok) return [3 /*break*/, 4];
return [4 /*yield*/, response.json()];
case 3:
errorData = _a.sent();
throw new Error(errorData.message || "Failed to create course");
case 4: return [4 /*yield*/, response.json()];
case 5:
course = _a.sent();
// Redirect to the course detail page
router.push("/teacher/course/".concat(course.id));
return [3 /*break*/, 7];
case 6:
err_1 = _a.sent();
console.error("Failed to create course:", err_1);
setError(err_1 instanceof Error ? err_1.message : "An error occurred");
setIsSubmitting(false);
return [3 /*break*/, 7];
case 7: return [2 /*return*/];
}
});
}); };
// If teacher authentication is missing, show error
if (!isAuthenticated || !teacher) {
return ((0, jsx_runtime_1.jsx)("div", { className: "container mx-auto py-8", children: (0, jsx_runtime_1.jsxs)(card_1.Card, { className: "max-w-2xl mx-auto", children: [(0, jsx_runtime_1.jsx)(card_1.CardHeader, { children: (0, jsx_runtime_1.jsx)(card_1.CardTitle, { className: "text-red-600", children: "Authentication Required" }) }), (0, jsx_runtime_1.jsx)(card_1.CardContent, { children: (0, jsx_runtime_1.jsx)("p", { children: "You need to log in to create a course. Please log in to continue." }) }), (0, jsx_runtime_1.jsx)(card_1.CardFooter, { children: (0, jsx_runtime_1.jsx)(link_1.default, { href: "/teacher/login", children: (0, jsx_runtime_1.jsx)(button_1.Button, { children: "Go to Login" }) }) })] }) }));
}
return ((0, jsx_runtime_1.jsx)("div", { className: "container mx-auto py-8", children: (0, jsx_runtime_1.jsxs)(card_1.Card, { className: "max-w-2xl mx-auto", children: [(0, jsx_runtime_1.jsx)(card_1.CardHeader, { children: (0, jsx_runtime_1.jsx)(card_1.CardTitle, { children: "Create New Course" }) }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, children: [(0, jsx_runtime_1.jsxs)(card_1.CardContent, { className: "space-y-4", children: [error && ((0, jsx_runtime_1.jsx)("div", { className: "bg-red-50 border-l-4 border-red-500 p-4 mb-4", children: (0, jsx_runtime_1.jsx)("p", { className: "text-red-700", children: error }) })), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)(label_1.Label, { htmlFor: "title", children: "Course Title" }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: "title", name: "title", value: formData.title, onChange: handleTextChange, placeholder: "Enter course title", required: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)(label_1.Label, { htmlFor: "description", children: "Description" }), (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { id: "description", name: "description", value: formData.description, onChange: handleTextChange, placeholder: "Enter course description", rows: 4 })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)(label_1.Label, { children: "Course Thumbnail" }), (0, jsx_runtime_1.jsxs)(tabs_1.Tabs, { value: thumbnailTab, onValueChange: function (value) {
return setThumbnailTab(value);
}, children: [(0, jsx_runtime_1.jsxs)(tabs_1.TabsList, { className: "grid grid-cols-2 mb-4", children: [(0, jsx_runtime_1.jsxs)(tabs_1.TabsTrigger, { value: "upload", className: "flex items-center", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: "h-4 w-4 mr-2" }), "Upload Image"] }), (0, jsx_runtime_1.jsxs)(tabs_1.TabsTrigger, { value: "url", className: "flex items-center", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.LinkIcon, { className: "h-4 w-4 mr-2" }), "URL"] })] }), (0, jsx_runtime_1.jsx)(tabs_1.TabsContent, { value: "upload", children: (0, jsx_runtime_1.jsx)(file_upload_1.FileUpload, { onFileUpload: handleFileUpload }) }), (0, jsx_runtime_1.jsx)(tabs_1.TabsContent, { value: "url", children: (0, jsx_runtime_1.jsx)("div", { className: "space-y-2", children: (0, jsx_runtime_1.jsx)(input_1.Input, { id: "thumbnail", name: "thumbnail", value: formData.thumbnail, onChange: handleTextChange, placeholder: "Enter image URL for course thumbnail", className: "flex-1" }) }) })] }), formData.thumbnail && ((0, jsx_runtime_1.jsx)("div", { className: "mt-2 border rounded-md p-2 relative h-40 bg-gray-50", children: (0, jsx_runtime_1.jsx)("img", { src: formData.thumbnail, alt: "Course thumbnail preview", className: "h-full w-full object-contain mx-auto", onError: function (e) {
// Replace with a placeholder when image fails to load
e.target.src =
"/images/placeholder.jpg";
} }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)(label_1.Label, { htmlFor: "level", children: "Level" }), (0, jsx_runtime_1.jsxs)(select_1.Select, { value: formData.level, onValueChange: function (value) { return handleSelectChange("level", value); }, children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { children: levelNames[formData.level] }) }), (0, jsx_runtime_1.jsxs)(select_1.SelectContent, { children: [(0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: "beginner", children: "Beginner" }), (0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: "intermediate", children: "Intermediate" }), (0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: "advanced", children: "Advanced" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)(label_1.Label, { htmlFor: "visibility", children: "Visibility" }), (0, jsx_runtime_1.jsxs)(select_1.Select, { value: formData.visibility, onValueChange: function (value) {
return handleSelectChange("visibility", value);
}, children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { children: visibilityNames[formData.visibility] }) }), (0, jsx_runtime_1.jsxs)(select_1.SelectContent, { children: [(0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: "private", children: "Private" }), (0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: "public", children: "Public" })] })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex justify-between items-center", children: (0, jsx_runtime_1.jsx)(label_1.Label, { children: "Categories" }) }), (0, jsx_runtime_1.jsx)(CategoryManager_1.default, { mode: "select", teacherId: teacher.id, apiBaseUrl: apiBaseUrl, selectedCategories: formData.categories, onCategoriesChange: handleCategoriesChange })] })] }), (0, jsx_runtime_1.jsxs)(card_1.CardFooter, { className: "flex justify-between", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", variant: "outline", onClick: function () { return router.push("/teacher"); }, disabled: isSubmitting, children: "Cancel" }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Creating..."] })) : ("Create Course") })] })] })] }) }));
};
exports.default = CreateCoursePage;