436 lines
25 KiB
JavaScript
436 lines
25 KiB
JavaScript
import {
|
|
BottomNav
|
|
} from "./chunk-JDU3HACN.js";
|
|
import {
|
|
EnrollmentService
|
|
} from "./chunk-AALWYTMW.js";
|
|
import {
|
|
CourseService
|
|
} from "./chunk-6K3TDILH.js";
|
|
import {
|
|
NzMessageService
|
|
} from "./chunk-GJYGTZ7J.js";
|
|
import {
|
|
AuthService,
|
|
DatePipe,
|
|
NzIconDirective,
|
|
NzIconModule,
|
|
Router
|
|
} from "./chunk-2TRRHRR7.js";
|
|
import "./chunk-EDRPZB37.js";
|
|
import {
|
|
Component,
|
|
catchError,
|
|
forkJoin,
|
|
inject,
|
|
of,
|
|
setClassMetadata,
|
|
signal,
|
|
ɵsetClassDebugInfo,
|
|
ɵɵProvidersFeature,
|
|
ɵɵadvance,
|
|
ɵɵclassProp,
|
|
ɵɵconditional,
|
|
ɵɵconditionalCreate,
|
|
ɵɵdefineComponent,
|
|
ɵɵelement,
|
|
ɵɵelementEnd,
|
|
ɵɵelementStart,
|
|
ɵɵgetCurrentView,
|
|
ɵɵlistener,
|
|
ɵɵnextContext,
|
|
ɵɵpipe,
|
|
ɵɵpipeBind2,
|
|
ɵɵpureFunction0,
|
|
ɵɵrepeater,
|
|
ɵɵrepeaterCreate,
|
|
ɵɵrepeaterTrackByIndex,
|
|
ɵɵresetView,
|
|
ɵɵrestoreView,
|
|
ɵɵstyleProp,
|
|
ɵɵtext,
|
|
ɵɵtextInterpolate,
|
|
ɵɵtextInterpolate1,
|
|
ɵɵtextInterpolate2,
|
|
ɵɵtextInterpolate3
|
|
} from "./chunk-WI7WFVZR.js";
|
|
import {
|
|
__spreadProps,
|
|
__spreadValues
|
|
} from "./chunk-WDMUDEB6.js";
|
|
|
|
// src/app/pages/my-courses/my-courses.ts
|
|
var _c0 = () => [1, 2, 3];
|
|
var _forTrack0 = ($index, $item) => $item.id;
|
|
var _forTrack1 = ($index, $item) => $item.courseId;
|
|
function MyCoursesPage_Conditional_8_For_2_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275element(0, "div", 7);
|
|
}
|
|
}
|
|
function MyCoursesPage_Conditional_8_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275elementStart(0, "div", 6);
|
|
\u0275\u0275repeaterCreate(1, MyCoursesPage_Conditional_8_For_2_Template, 1, 0, "div", 7, \u0275\u0275repeaterTrackByIndex);
|
|
\u0275\u0275elementEnd();
|
|
}
|
|
if (rf & 2) {
|
|
\u0275\u0275advance();
|
|
\u0275\u0275repeater(\u0275\u0275pureFunction0(0, _c0));
|
|
}
|
|
}
|
|
function MyCoursesPage_Conditional_9_Conditional_0_For_4_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
const _r1 = \u0275\u0275getCurrentView();
|
|
\u0275\u0275elementStart(0, "div", 12);
|
|
\u0275\u0275listener("click", function MyCoursesPage_Conditional_9_Conditional_0_For_4_Template_div_click_0_listener() {
|
|
const course_r2 = \u0275\u0275restoreView(_r1).$implicit;
|
|
const ctx_r2 = \u0275\u0275nextContext(3);
|
|
return \u0275\u0275resetView(ctx_r2.editCourse(course_r2));
|
|
});
|
|
\u0275\u0275elementStart(1, "div", 13)(2, "div", 14)(3, "h3", 15);
|
|
\u0275\u0275text(4);
|
|
\u0275\u0275elementEnd();
|
|
\u0275\u0275elementStart(5, "p", 16);
|
|
\u0275\u0275text(6);
|
|
\u0275\u0275elementEnd()();
|
|
\u0275\u0275elementStart(7, "div", 17);
|
|
\u0275\u0275element(8, "span", 18);
|
|
\u0275\u0275elementStart(9, "button", 19);
|
|
\u0275\u0275listener("click", function MyCoursesPage_Conditional_9_Conditional_0_For_4_Template_button_click_9_listener($event) {
|
|
const course_r2 = \u0275\u0275restoreView(_r1).$implicit;
|
|
const ctx_r2 = \u0275\u0275nextContext(3);
|
|
return \u0275\u0275resetView(ctx_r2.deleteCourse(course_r2, $event));
|
|
});
|
|
\u0275\u0275element(10, "span", 20);
|
|
\u0275\u0275elementEnd()()()();
|
|
}
|
|
if (rf & 2) {
|
|
const course_r2 = ctx.$implicit;
|
|
\u0275\u0275advance(4);
|
|
\u0275\u0275textInterpolate(course_r2.title);
|
|
\u0275\u0275advance(2);
|
|
\u0275\u0275textInterpolate3("", course_r2.status === "Published" ? "Publi\xE9" : "Brouillon", " \xB7 ", course_r2.topicCount, " sujet", course_r2.topicCount !== 1 ? "s" : "");
|
|
\u0275\u0275advance(2);
|
|
\u0275\u0275classProp("published", course_r2.status === "Published");
|
|
}
|
|
}
|
|
function MyCoursesPage_Conditional_9_Conditional_0_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275elementStart(0, "p", 9);
|
|
\u0275\u0275text(1, "Mes cr\xE9ations");
|
|
\u0275\u0275elementEnd();
|
|
\u0275\u0275elementStart(2, "div", 10);
|
|
\u0275\u0275repeaterCreate(3, MyCoursesPage_Conditional_9_Conditional_0_For_4_Template, 11, 6, "div", 11, _forTrack0);
|
|
\u0275\u0275elementEnd();
|
|
}
|
|
if (rf & 2) {
|
|
const ctx_r2 = \u0275\u0275nextContext(2);
|
|
\u0275\u0275advance(3);
|
|
\u0275\u0275repeater(ctx_r2.createdCourses());
|
|
}
|
|
}
|
|
function MyCoursesPage_Conditional_9_Conditional_1_For_4_Conditional_9_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275elementStart(0, "div", 22)(1, "div", 23)(2, "span", 24);
|
|
\u0275\u0275text(3);
|
|
\u0275\u0275elementEnd();
|
|
\u0275\u0275elementStart(4, "span", 25);
|
|
\u0275\u0275text(5);
|
|
\u0275\u0275elementEnd()();
|
|
\u0275\u0275elementStart(6, "div", 26);
|
|
\u0275\u0275element(7, "div", 27);
|
|
\u0275\u0275elementEnd()();
|
|
}
|
|
if (rf & 2) {
|
|
const enrollment_r5 = \u0275\u0275nextContext().$implicit;
|
|
const ctx_r2 = \u0275\u0275nextContext(3);
|
|
\u0275\u0275advance(3);
|
|
\u0275\u0275textInterpolate2(" ", enrollment_r5.progress.completedTopics, "/", enrollment_r5.progress.totalTopics, " sujets ");
|
|
\u0275\u0275advance(2);
|
|
\u0275\u0275textInterpolate1("", ctx_r2.getProgressPercent(enrollment_r5), "%");
|
|
\u0275\u0275advance(2);
|
|
\u0275\u0275styleProp("width", ctx_r2.getProgressPercent(enrollment_r5), "%");
|
|
}
|
|
}
|
|
function MyCoursesPage_Conditional_9_Conditional_1_For_4_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
const _r4 = \u0275\u0275getCurrentView();
|
|
\u0275\u0275elementStart(0, "div", 12);
|
|
\u0275\u0275listener("click", function MyCoursesPage_Conditional_9_Conditional_1_For_4_Template_div_click_0_listener() {
|
|
const enrollment_r5 = \u0275\u0275restoreView(_r4).$implicit;
|
|
const ctx_r2 = \u0275\u0275nextContext(3);
|
|
return \u0275\u0275resetView(ctx_r2.openCourse(enrollment_r5));
|
|
});
|
|
\u0275\u0275elementStart(1, "div", 13)(2, "div", 14)(3, "h3", 15);
|
|
\u0275\u0275text(4);
|
|
\u0275\u0275elementEnd();
|
|
\u0275\u0275elementStart(5, "p", 16);
|
|
\u0275\u0275text(6);
|
|
\u0275\u0275pipe(7, "date");
|
|
\u0275\u0275elementEnd()();
|
|
\u0275\u0275element(8, "span", 21);
|
|
\u0275\u0275elementEnd();
|
|
\u0275\u0275conditionalCreate(9, MyCoursesPage_Conditional_9_Conditional_1_For_4_Conditional_9_Template, 8, 5, "div", 22);
|
|
\u0275\u0275elementEnd();
|
|
}
|
|
if (rf & 2) {
|
|
const enrollment_r5 = ctx.$implicit;
|
|
\u0275\u0275advance(4);
|
|
\u0275\u0275textInterpolate(enrollment_r5.courseTitle);
|
|
\u0275\u0275advance(2);
|
|
\u0275\u0275textInterpolate1("Inscrit le ", \u0275\u0275pipeBind2(7, 3, enrollment_r5.enrolledAt, "dd/MM/yyyy"));
|
|
\u0275\u0275advance(3);
|
|
\u0275\u0275conditional(enrollment_r5.progress ? 9 : -1);
|
|
}
|
|
}
|
|
function MyCoursesPage_Conditional_9_Conditional_1_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275elementStart(0, "p", 9);
|
|
\u0275\u0275text(1, "Mon apprentissage");
|
|
\u0275\u0275elementEnd();
|
|
\u0275\u0275elementStart(2, "div", 10);
|
|
\u0275\u0275repeaterCreate(3, MyCoursesPage_Conditional_9_Conditional_1_For_4_Template, 10, 6, "div", 11, _forTrack1);
|
|
\u0275\u0275elementEnd();
|
|
}
|
|
if (rf & 2) {
|
|
const ctx_r2 = \u0275\u0275nextContext(2);
|
|
\u0275\u0275advance(3);
|
|
\u0275\u0275repeater(ctx_r2.enrollments());
|
|
}
|
|
}
|
|
function MyCoursesPage_Conditional_9_Conditional_2_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275elementStart(0, "div", 8);
|
|
\u0275\u0275element(1, "span", 28);
|
|
\u0275\u0275elementStart(2, "p", 29);
|
|
\u0275\u0275text(3, "Aucun cours pour l'instant");
|
|
\u0275\u0275elementEnd();
|
|
\u0275\u0275elementStart(4, "p", 30);
|
|
\u0275\u0275text(5, "Cr\xE9ez votre premier cours ou explorez le catalogue");
|
|
\u0275\u0275elementEnd()();
|
|
}
|
|
}
|
|
function MyCoursesPage_Conditional_9_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275conditionalCreate(0, MyCoursesPage_Conditional_9_Conditional_0_Template, 5, 0);
|
|
\u0275\u0275conditionalCreate(1, MyCoursesPage_Conditional_9_Conditional_1_Template, 5, 0);
|
|
\u0275\u0275conditionalCreate(2, MyCoursesPage_Conditional_9_Conditional_2_Template, 6, 0, "div", 8);
|
|
}
|
|
if (rf & 2) {
|
|
const ctx_r2 = \u0275\u0275nextContext();
|
|
\u0275\u0275conditional(ctx_r2.createdCourses().length > 0 ? 0 : -1);
|
|
\u0275\u0275advance();
|
|
\u0275\u0275conditional(ctx_r2.enrollments().length > 0 ? 1 : -1);
|
|
\u0275\u0275advance();
|
|
\u0275\u0275conditional(ctx_r2.createdCourses().length === 0 && ctx_r2.enrollments().length === 0 ? 2 : -1);
|
|
}
|
|
}
|
|
var MyCoursesPage = class _MyCoursesPage {
|
|
enrollmentService = inject(EnrollmentService);
|
|
courseService = inject(CourseService);
|
|
authService = inject(AuthService);
|
|
router = inject(Router);
|
|
message = inject(NzMessageService);
|
|
enrollments = signal([], ...ngDevMode ? [{ debugName: "enrollments" }] : []);
|
|
createdCourses = signal([], ...ngDevMode ? [{ debugName: "createdCourses" }] : []);
|
|
loading = signal(false, ...ngDevMode ? [{ debugName: "loading" }] : []);
|
|
get currentUser() {
|
|
return this.authService.currentUser();
|
|
}
|
|
ngOnInit() {
|
|
this.loadAll();
|
|
}
|
|
loadAll() {
|
|
const user = this.currentUser;
|
|
if (!user)
|
|
return;
|
|
this.loading.set(true);
|
|
forkJoin({
|
|
created: this.courseService.getMyCourses(user.userId).pipe(catchError(() => of([]))),
|
|
enrollments: this.enrollmentService.getEnrollments(user.userId).pipe(catchError(() => of([])))
|
|
}).subscribe({
|
|
next: ({ created, enrollments }) => {
|
|
this.createdCourses.set(created);
|
|
if (enrollments.length === 0) {
|
|
this.enrollments.set([]);
|
|
this.loading.set(false);
|
|
return;
|
|
}
|
|
const progressRequests = enrollments.map((e) => this.enrollmentService.getCourseProgress(e.courseId, user.userId).pipe(catchError(() => of(void 0))));
|
|
forkJoin(progressRequests).subscribe({
|
|
next: (progressList) => {
|
|
const enriched = enrollments.map((e, i) => __spreadProps(__spreadValues({}, e), {
|
|
progress: progressList[i] ?? void 0
|
|
}));
|
|
this.enrollments.set(enriched);
|
|
this.loading.set(false);
|
|
},
|
|
error: () => {
|
|
this.enrollments.set(enrollments);
|
|
this.loading.set(false);
|
|
}
|
|
});
|
|
},
|
|
error: () => {
|
|
this.loading.set(false);
|
|
this.message.error("Impossible de charger vos cours");
|
|
}
|
|
});
|
|
}
|
|
openCourse(enrollment) {
|
|
this.router.navigate(["/courses", enrollment.courseId]);
|
|
}
|
|
editCourse(course) {
|
|
this.router.navigate(["/courses", course.id, "edit"]);
|
|
}
|
|
createCourse() {
|
|
this.router.navigate(["/create"]);
|
|
}
|
|
deleteCourse(course, event) {
|
|
event.stopPropagation();
|
|
if (!confirm(`Supprimer "${course.title}" ?`))
|
|
return;
|
|
this.courseService.deleteCourse(course.id).subscribe({
|
|
next: () => {
|
|
this.createdCourses.set(this.createdCourses().filter((c) => c.id !== course.id));
|
|
this.message.success("Cours supprim\xE9");
|
|
},
|
|
error: () => this.message.error("Impossible de supprimer ce cours")
|
|
});
|
|
}
|
|
getProgressPercent(enrollment) {
|
|
return Math.round(enrollment.progress?.progressPercentage ?? 0);
|
|
}
|
|
static \u0275fac = function MyCoursesPage_Factory(__ngFactoryType__) {
|
|
return new (__ngFactoryType__ || _MyCoursesPage)();
|
|
};
|
|
static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _MyCoursesPage, selectors: [["app-my-courses"]], features: [\u0275\u0275ProvidersFeature([NzMessageService])], decls: 11, vars: 1, consts: [[1, "page-container", "my-courses-page"], [1, "page-header"], [1, "page-title"], [1, "create-btn", 3, "click"], ["nz-icon", "", "nzType", "plus", "nzTheme", "outline"], [1, "page-content"], [1, "loading-list"], [1, "skeleton-card"], [1, "empty-state"], [1, "section-label"], [1, "enrollments-list"], [1, "enrollment-card"], [1, "enrollment-card", 3, "click"], [1, "enrollment-header"], [1, "enrollment-info"], [1, "enrollment-title"], [1, "enrollment-date"], [1, "card-actions"], [1, "status-dot"], ["aria-label", "Supprimer", 1, "delete-course-btn", 3, "click"], ["nz-icon", "", "nzType", "delete", "nzTheme", "outline"], ["nz-icon", "", "nzType", "arrow-right", "nzTheme", "outline", 1, "chevron"], [1, "progress-section"], [1, "progress-stats"], [1, "progress-label"], [1, "progress-percent"], [1, "mc-progress-bar"], [1, "mc-progress-fill"], ["nz-icon", "", "nzType", "read", "nzTheme", "outline", 1, "empty-icon"], [1, "empty-text"], [1, "empty-hint"]], template: function MyCoursesPage_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275elementStart(0, "div", 0)(1, "div", 1)(2, "h1", 2);
|
|
\u0275\u0275text(3, "Mes Cours");
|
|
\u0275\u0275elementEnd();
|
|
\u0275\u0275elementStart(4, "button", 3);
|
|
\u0275\u0275listener("click", function MyCoursesPage_Template_button_click_4_listener() {
|
|
return ctx.createCourse();
|
|
});
|
|
\u0275\u0275element(5, "span", 4);
|
|
\u0275\u0275text(6, " Cr\xE9er ");
|
|
\u0275\u0275elementEnd()();
|
|
\u0275\u0275elementStart(7, "div", 5);
|
|
\u0275\u0275conditionalCreate(8, MyCoursesPage_Conditional_8_Template, 3, 1, "div", 6)(9, MyCoursesPage_Conditional_9_Template, 3, 3);
|
|
\u0275\u0275elementEnd();
|
|
\u0275\u0275element(10, "app-bottom-nav");
|
|
\u0275\u0275elementEnd();
|
|
}
|
|
if (rf & 2) {
|
|
\u0275\u0275advance(8);
|
|
\u0275\u0275conditional(ctx.loading() ? 8 : 9);
|
|
}
|
|
}, dependencies: [NzIconModule, NzIconDirective, BottomNav, DatePipe], styles: ["\n\n.my-courses-page[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n padding-bottom: 80px;\n}\n.page-header[_ngcontent-%COMP%] {\n padding: 20px 20px 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.page-title[_ngcontent-%COMP%] {\n font-size: 28px;\n font-weight: 800;\n color: var(--text);\n margin: 0;\n letter-spacing: -0.5px;\n}\n.create-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n background: var(--primary);\n color: var(--primary-fg);\n border: none;\n border-radius: 12px;\n padding: 8px 16px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n}\n.section-label[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 700;\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin: 16px 0 8px;\n}\n.card-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n flex-shrink: 0;\n}\n.status-dot[_ngcontent-%COMP%] {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--border);\n flex-shrink: 0;\n}\n.status-dot.published[_ngcontent-%COMP%] {\n background: #1abc9c;\n}\n.delete-course-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: #ff4d4f;\n font-size: 16px;\n cursor: pointer;\n padding: 4px;\n display: flex;\n align-items: center;\n opacity: 0.7;\n transition: opacity 0.15s;\n}\n.delete-course-btn[_ngcontent-%COMP%]:hover {\n opacity: 1;\n}\n.page-content[_ngcontent-%COMP%] {\n padding: 0 20px;\n}\n.enrollments-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n.enrollment-card[_ngcontent-%COMP%] {\n background-color: var(--card);\n border: 1px solid var(--border);\n border-radius: 16px;\n padding: 16px;\n cursor: pointer;\n transition: transform 0.15s, box-shadow 0.15s;\n}\n.enrollment-card[_ngcontent-%COMP%]:active {\n transform: scale(0.98);\n}\n.enrollment-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.course-icon-wrap[_ngcontent-%COMP%] {\n width: 44px;\n height: 44px;\n background-color: var(--bg);\n border: 1px solid var(--border);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n color: var(--text);\n flex-shrink: 0;\n}\n.enrollment-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n.enrollment-title[_ngcontent-%COMP%] {\n font-size: 15px;\n font-weight: 700;\n color: var(--text);\n margin: 0 0 2px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.enrollment-date[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--text-muted);\n margin: 0;\n}\n.chevron[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-muted);\n}\n.progress-section[_ngcontent-%COMP%] {\n margin-top: 12px;\n}\n.progress-stats[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n margin-bottom: 6px;\n}\n.progress-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--text-muted);\n}\n.progress-percent[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 700;\n color: #1abc9c;\n}\n.loading-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n.skeleton-card[_ngcontent-%COMP%] {\n height: 100px;\n background: var(--card);\n border: 1px solid var(--border);\n border-radius: 16px;\n animation: _ngcontent-%COMP%_skeleton-pulse 1.5s ease-in-out infinite;\n}\n@keyframes _ngcontent-%COMP%_skeleton-pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.4;\n }\n}\n.empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n text-align: center;\n}\n.empty-icon[_ngcontent-%COMP%] {\n font-size: 48px;\n color: var(--text-muted);\n margin-bottom: 16px;\n}\n.empty-text[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 600;\n color: var(--text);\n margin: 0 0 8px;\n}\n.empty-hint[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-muted);\n margin: 0;\n}\n/*# sourceMappingURL=my-courses.css.map */"] });
|
|
};
|
|
(() => {
|
|
(typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MyCoursesPage, [{
|
|
type: Component,
|
|
args: [{ selector: "app-my-courses", imports: [NzIconModule, BottomNav, DatePipe], providers: [NzMessageService], template: `<div class="page-container my-courses-page">
|
|
<div class="page-header">
|
|
<h1 class="page-title">Mes Cours</h1>
|
|
<button class="create-btn" (click)="createCourse()">
|
|
<span nz-icon nzType="plus" nzTheme="outline"></span>
|
|
Cr\xE9er
|
|
</button>
|
|
</div>
|
|
|
|
<div class="page-content">
|
|
@if (loading()) {
|
|
<div class="loading-list">
|
|
@for (_ of [1, 2, 3]; track $index) {
|
|
<div class="skeleton-card"></div>
|
|
}
|
|
</div>
|
|
} @else {
|
|
|
|
<!-- Courses created by user -->
|
|
@if (createdCourses().length > 0) {
|
|
<p class="section-label">Mes cr\xE9ations</p>
|
|
<div class="enrollments-list">
|
|
@for (course of createdCourses(); track course.id) {
|
|
<div class="enrollment-card" (click)="editCourse(course)">
|
|
<div class="enrollment-header">
|
|
<div class="enrollment-info">
|
|
<h3 class="enrollment-title">{{ course.title }}</h3>
|
|
<p class="enrollment-date">{{ course.status === 'Published' ? 'Publi\xE9' : 'Brouillon' }} \xB7 {{ course.topicCount }} sujet{{ course.topicCount !== 1 ? 's' : '' }}</p>
|
|
</div>
|
|
<div class="card-actions">
|
|
<span class="status-dot" [class.published]="course.status === 'Published'"></span>
|
|
<button class="delete-course-btn" (click)="deleteCourse(course, $event)" aria-label="Supprimer">
|
|
<span nz-icon nzType="delete" nzTheme="outline"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
<!-- Enrolled courses -->
|
|
@if (enrollments().length > 0) {
|
|
<p class="section-label">Mon apprentissage</p>
|
|
<div class="enrollments-list">
|
|
@for (enrollment of enrollments(); track enrollment.courseId) {
|
|
<div class="enrollment-card" (click)="openCourse(enrollment)">
|
|
<div class="enrollment-header">
|
|
<div class="enrollment-info">
|
|
<h3 class="enrollment-title">{{ enrollment.courseTitle }}</h3>
|
|
<p class="enrollment-date">Inscrit le {{ enrollment.enrolledAt | date:'dd/MM/yyyy' }}</p>
|
|
</div>
|
|
<span nz-icon nzType="arrow-right" nzTheme="outline" class="chevron"></span>
|
|
</div>
|
|
|
|
@if (enrollment.progress) {
|
|
<div class="progress-section">
|
|
<div class="progress-stats">
|
|
<span class="progress-label">
|
|
{{ enrollment.progress.completedTopics }}/{{ enrollment.progress.totalTopics }} sujets
|
|
</span>
|
|
<span class="progress-percent">{{ getProgressPercent(enrollment) }}%</span>
|
|
</div>
|
|
<div class="mc-progress-bar">
|
|
<div class="mc-progress-fill" [style.width.%]="getProgressPercent(enrollment)"></div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
@if (createdCourses().length === 0 && enrollments().length === 0) {
|
|
<div class="empty-state">
|
|
<span nz-icon nzType="read" nzTheme="outline" class="empty-icon"></span>
|
|
<p class="empty-text">Aucun cours pour l'instant</p>
|
|
<p class="empty-hint">Cr\xE9ez votre premier cours ou explorez le catalogue</p>
|
|
</div>
|
|
}
|
|
|
|
}
|
|
</div>
|
|
|
|
<app-bottom-nav />
|
|
</div>
|
|
`, styles: ["/* src/app/pages/my-courses/my-courses.css */\n.my-courses-page {\n display: flex;\n flex-direction: column;\n padding-bottom: 80px;\n}\n.page-header {\n padding: 20px 20px 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.page-title {\n font-size: 28px;\n font-weight: 800;\n color: var(--text);\n margin: 0;\n letter-spacing: -0.5px;\n}\n.create-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n background: var(--primary);\n color: var(--primary-fg);\n border: none;\n border-radius: 12px;\n padding: 8px 16px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n}\n.section-label {\n font-size: 12px;\n font-weight: 700;\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin: 16px 0 8px;\n}\n.card-actions {\n display: flex;\n align-items: center;\n gap: 10px;\n flex-shrink: 0;\n}\n.status-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--border);\n flex-shrink: 0;\n}\n.status-dot.published {\n background: #1abc9c;\n}\n.delete-course-btn {\n background: none;\n border: none;\n color: #ff4d4f;\n font-size: 16px;\n cursor: pointer;\n padding: 4px;\n display: flex;\n align-items: center;\n opacity: 0.7;\n transition: opacity 0.15s;\n}\n.delete-course-btn:hover {\n opacity: 1;\n}\n.page-content {\n padding: 0 20px;\n}\n.enrollments-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n.enrollment-card {\n background-color: var(--card);\n border: 1px solid var(--border);\n border-radius: 16px;\n padding: 16px;\n cursor: pointer;\n transition: transform 0.15s, box-shadow 0.15s;\n}\n.enrollment-card:active {\n transform: scale(0.98);\n}\n.enrollment-header {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.course-icon-wrap {\n width: 44px;\n height: 44px;\n background-color: var(--bg);\n border: 1px solid var(--border);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n color: var(--text);\n flex-shrink: 0;\n}\n.enrollment-info {\n flex: 1;\n min-width: 0;\n}\n.enrollment-title {\n font-size: 15px;\n font-weight: 700;\n color: var(--text);\n margin: 0 0 2px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.enrollment-date {\n font-size: 12px;\n color: var(--text-muted);\n margin: 0;\n}\n.chevron {\n font-size: 14px;\n color: var(--text-muted);\n}\n.progress-section {\n margin-top: 12px;\n}\n.progress-stats {\n display: flex;\n justify-content: space-between;\n margin-bottom: 6px;\n}\n.progress-label {\n font-size: 12px;\n color: var(--text-muted);\n}\n.progress-percent {\n font-size: 12px;\n font-weight: 700;\n color: #1abc9c;\n}\n.loading-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n.skeleton-card {\n height: 100px;\n background: var(--card);\n border: 1px solid var(--border);\n border-radius: 16px;\n animation: skeleton-pulse 1.5s ease-in-out infinite;\n}\n@keyframes skeleton-pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.4;\n }\n}\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n text-align: center;\n}\n.empty-icon {\n font-size: 48px;\n color: var(--text-muted);\n margin-bottom: 16px;\n}\n.empty-text {\n font-size: 18px;\n font-weight: 600;\n color: var(--text);\n margin: 0 0 8px;\n}\n.empty-hint {\n font-size: 14px;\n color: var(--text-muted);\n margin: 0;\n}\n/*# sourceMappingURL=my-courses.css.map */\n"] }]
|
|
}], null, null);
|
|
})();
|
|
(() => {
|
|
(typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(MyCoursesPage, { className: "MyCoursesPage", filePath: "src/app/pages/my-courses/my-courses.ts", lineNumber: 21 });
|
|
})();
|
|
|
|
// src/app/pages/my-courses/my-courses.routes.ts
|
|
var MY_COURSES_ROUTES = [
|
|
{ path: "", component: MyCoursesPage }
|
|
];
|
|
export {
|
|
MY_COURSES_ROUTES
|
|
};
|
|
//# sourceMappingURL=chunk-DVN263EA.js.map
|