@rolatech/angular-course 17.3.1 → 17.3.3

package/fesm2022/{rolatech-angular-course-rolatech-angular-course-D-_W2GtF.mjs → rolatech-angular-course-rolatech-angular-course-DhmJ0teX.mjs}

@@ -4,13 +4,13 @@ import * as i6 from '@angular/forms';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { CommonModule, NgClass, DatePipe, isPlatformBrowser, ViewportScroller } from '@angular/common';
 import * as i1$3 from '@angular/router';
-import { RouterModule, RouterLink, ActivatedRoute, Router } from '@angular/router';
+import { RouterModule, RouterLink, ActivatedRoute, Router, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { BaseService, DialogService } from '@rolatech/angular-services';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i1$2 from '@angular/material/dialog';
 import { MatDialog, MAT_DIALOG_DATA, MatDialogClose } from '@angular/material/dialog';
-import { ImagePreviewDialogComponent, ThumbnailComponent, IconButtonComponent, AngularComponentsModule, ImageComponent, MediaListComponent, MediaListItemComponent, BaseComponent, AppContainerComponent, ListComponent } from '@rolatech/angular-components';
+import { ImagePreviewDialogComponent, ThumbnailComponent, IconButtonComponent, AngularComponentsModule, ImageComponent, MediaListComponent, MediaListItemComponent, BaseComponent, AppContainerComponent, ListComponent, ConfirmationDialogComponent, ToolbarComponent } from '@rolatech/angular-components';
 import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i1 from '@angular/material/expansion';
@@ -20,10 +20,10 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { DurationPipe, AngularCommonModule } from '@rolatech/angular-common';
 import * as i5$1 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
-import * as i7$1 from '@angular/material/stepper';
+import * as i7 from '@angular/material/stepper';
 import { MatStepperModule, MatStepper } from '@angular/material/stepper';
 import { MomentDateAdapter } from '@angular/material-moment-adapter';
-import * as i7 from '@angular/material/core';
+import * as i6$2 from '@angular/material/core';
 import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, MatOptionModule } from '@angular/material/core';
 import moment from 'moment';
 import * as i6$1 from '@angular/material/select';
@@ -40,9 +40,10 @@ import * as i3$3 from '@angular/material/snack-bar';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import * as i4 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { first, remove, findLastIndex } from 'lodash';
+import { first, remove, findLastIndex, findIndex, clone } from 'lodash';
 import { AuthService, AuthUserService } from '@rolatech/angular-auth';
 import { CommentsComponent } from '@rolatech/angular-comment';
+import { Observable, from, concatMap, take } from 'rxjs';
 
 var CourseStatus;
 (function (CourseStatus) {
@@ -709,7 +710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
             args: [{ selector: 'rolatech-course-section-item', standalone: true, imports: [MatIconModule, FormsModule, MatButtonModule, IconButtonComponent], template: "<div class=\"flex flex-col grow\">\n  @if (section().id !== editId()) {\n    <div>\n      <div class=\"flex justify-between items-center cursor-pointer\" (click)=\"isExpand = !isExpand\">\n        <div class=\"w-full flex items-center gap-3 pl-3\">\n          <span>{{ section().title }}</span>\n          <button mat-icon-button class=\"max-w-8 max-h-8 !p-1\" (click)=\"onEdit(section())\">\n            <mat-icon>edit</mat-icon>\n          </button>\n          <button mat-icon-button class=\"max-w-8 max-h-8 !p-1\" (click)=\"onDelete(section())\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n        <!-- <rolatech-icon-button (click)=\"isExpand = !isExpand\">{{\n          isExpand ? 'expand_less' : 'expand_more'\n        }}</rolatech-icon-button> -->\n        <button mat-icon-button class=\"max-w-8 max-h-8 !p-1\">\n          <mat-icon>{{ isExpand ? 'expand_less' : 'expand_more' }}</mat-icon>\n        </button>\n      </div>\n      @if (isExpand) {\n        <div>\n          <ng-content></ng-content>\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"flex flex-col justify-between items-center\">\n      <input\n        type=\"text\"\n        class=\"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500\"\n        placeholder=\"\u6807\u9898\"\n        [(ngModel)]=\"section().title\"\n      />\n      <div class=\"w-full flex flex-row justify-end p-4 gap-3\">\n        <button mat-button (click)=\"onCancel(section())\">\u53D6\u6D88</button>\n        <button mat-flat-button color=\"primary\" (click)=\"onSave(section())\">\u4FDD\u5B58</button>\n      </div>\n    </div>\n  }\n  <!-- <mat-form-field appearance=\"fill\">\n      <mat-label>\u63CF\u8FF0</mat-label>\n      <input matInput placeholder=\"\u63CF\u8FF0\" [(ngModel)]=\"section.description\" />\n    </mat-form-field> -->\n</div>\n" }]
         }] });
 
-const MY_FORMATS = {
+const COURSE_SCHEDULE_DATE_FORMATS = {
     parse: {
         dateInput: 'YYYY-MM-DD',
     },
@@ -780,9 +781,9 @@ class ScheduleItemComponent {
                 useClass: MomentDateAdapter,
                 deps: [MAT_DATE_LOCALE],
             },
-            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
+            { provide: MAT_DATE_FORMATS, useValue: COURSE_SCHEDULE_DATE_FORMATS },
             DatePipe,
-        ], ngImport: i0, template: "<div class=\"flex flex-col py-3\">\n  <mat-form-field appearance=\"fill\">\n    <mat-label> \u6807\u9898 </mat-label>\n    <input matInput type=\"text\" [(ngModel)]=\"schedule.title\" name=\"title\" required />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\">\n    <mat-label> \u5185\u5BB9 </mat-label>\n    <textarea\n      matInput\n      type=\"text\"\n      [(ngModel)]=\"schedule.content\"\n      name=\"content\"\n      cdkTextareaAutosize\n      cdkAutosizeMinRows=\"3\"\n      required\n    ></textarea>\n  </mat-form-field>\n  <div class=\"flex flex-row gap-3\">\n    <mat-form-field appearance=\"fill\">\n      <mat-label>\u5F00\u59CB\u65E5\u671F</mat-label>\n      <input\n        matInput\n        [matDatepicker]=\"picker\"\n        (focus)=\"picker.open()\"\n        name=\"startAt\"\n        [(ngModel)]=\"schedule.startDate\"\n        (ngModelChange)=\"startDateChanged($event)\"\n        (dateInput)=\"schedule.startDate = $event.value.format('YYYY-MM-DD')\"\n        readonly\n        required\n      />\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label>\u5F00\u59CB\u65F6\u95F4</mat-label>\n      <mat-select [(ngModel)]=\"schedule.startTime\" (selectionChange)=\"startTimeChanged($event)\" required readonly>\n        @for (d of date; track d) {\n          <mat-option [value]=\"d\">\n            {{ d }}\n          </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <div class=\"flex flex-row gap-3\">\n    <mat-form-field appearance=\"fill\">\n      <mat-label>\u7ED3\u675F\u65E5\u671F</mat-label>\n      <input\n        matInput\n        [matDatepicker]=\"picker2\"\n        name=\"endAt\"\n        (focus)=\"picker2.open()\"\n        (ngModelChange)=\"endDateChanged($event)\"\n        [(ngModel)]=\"schedule.endDate\"\n        (dateInput)=\"schedule.endDate = $event.value.format('YYYY-MM-DD')\"\n        readonly\n        required\n      />\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker2\"></mat-datepicker-toggle>\n      <mat-datepicker #picker2></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label>\u7ED3\u675F\u65F6\u95F4</mat-label>\n      <mat-select [(ngModel)]=\"schedule.endTime\" (selectionChange)=\"endTimeChanged($event)\" required readonly>\n        @for (d of date; track d) {\n          <mat-option [value]=\"d\">\n            {{ d }}\n          </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  </div>\n</div>\n@if (actions()) {\n  <div class=\"flex flex-row justify-end p-4\">\n    <button mat-button (click)=\"onDelete(schedule)\">\u5220\u9664</button>\n    <button mat-button (click)=\"onSave(schedule)\">\u4FDD\u5B58</button>\n  </div>\n}\n<mat-divider></mat-divider>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i3$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
+        ], ngImport: i0, template: "<div class=\"flex flex-col py-3\">\n  <mat-form-field appearance=\"fill\">\n    <mat-label> \u6807\u9898 </mat-label>\n    <input matInput type=\"text\" [(ngModel)]=\"schedule.title\" name=\"title\" required />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\">\n    <mat-label> \u5185\u5BB9 </mat-label>\n    <textarea\n      matInput\n      type=\"text\"\n      [(ngModel)]=\"schedule.content\"\n      name=\"content\"\n      cdkTextareaAutosize\n      cdkAutosizeMinRows=\"3\"\n      required\n    ></textarea>\n  </mat-form-field>\n  <div class=\"flex flex-row gap-3\">\n    <mat-form-field appearance=\"fill\">\n      <mat-label>\u5F00\u59CB\u65E5\u671F</mat-label>\n      <input\n        matInput\n        [matDatepicker]=\"picker\"\n        (focus)=\"picker.open()\"\n        name=\"startAt\"\n        [(ngModel)]=\"schedule.startDate\"\n        (ngModelChange)=\"startDateChanged($event)\"\n        (dateInput)=\"schedule.startDate = $event.value.format('YYYY-MM-DD')\"\n        readonly\n        required\n      />\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label>\u5F00\u59CB\u65F6\u95F4</mat-label>\n      <mat-select [(ngModel)]=\"schedule.startTime\" (selectionChange)=\"startTimeChanged($event)\" required readonly>\n        @for (d of date; track d) {\n          <mat-option [value]=\"d\">\n            {{ d }}\n          </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <div class=\"flex flex-row gap-3\">\n    <mat-form-field appearance=\"fill\">\n      <mat-label>\u7ED3\u675F\u65E5\u671F</mat-label>\n      <input\n        matInput\n        [matDatepicker]=\"picker2\"\n        name=\"endAt\"\n        (focus)=\"picker2.open()\"\n        (ngModelChange)=\"endDateChanged($event)\"\n        [(ngModel)]=\"schedule.endDate\"\n        (dateInput)=\"schedule.endDate = $event.value.format('YYYY-MM-DD')\"\n        readonly\n        required\n      />\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker2\"></mat-datepicker-toggle>\n      <mat-datepicker #picker2></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label>\u7ED3\u675F\u65F6\u95F4</mat-label>\n      <mat-select [(ngModel)]=\"schedule.endTime\" (selectionChange)=\"endTimeChanged($event)\" required readonly>\n        @for (d of date; track d) {\n          <mat-option [value]=\"d\">\n            {{ d }}\n          </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  </div>\n</div>\n@if (actions()) {\n  <div class=\"flex flex-row justify-end p-4\">\n    <button mat-button (click)=\"onDelete(schedule)\">\u5220\u9664</button>\n    <button mat-button (click)=\"onSave(schedule)\">\u4FDD\u5B58</button>\n  </div>\n}\n<mat-divider></mat-divider>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i3$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ScheduleItemComponent, decorators: [{
             type: Component,
@@ -792,7 +793,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
                             useClass: MomentDateAdapter,
                             deps: [MAT_DATE_LOCALE],
                         },
-                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
+                        { provide: MAT_DATE_FORMATS, useValue: COURSE_SCHEDULE_DATE_FORMATS },
                         DatePipe,
                     ], standalone: true, imports: [
                         NgClass,
@@ -1134,7 +1135,7 @@ class CoursePricingDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CoursePricingDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: CourseService }, { token: i3$3.MatSnackBar }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CoursePricingDialogComponent, isStandalone: true, selector: "rolatech-course-pricing-dialog", ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\n  <div class=\"h-16 flex justify-between items-center px-5\">\n    @if (data.title) {\n      <div class=\"text-md font-medium\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"flex-1 overflow-hidden mt-3 overflow-y-auto w-2/3 max-h-[55vh]\">\n    <form #detailForm=\"ngForm\" class=\"p-3\">\n      <ng-template matStepLabel>\u8BE6\u60C5</ng-template>\n      @for (item of pricing; track item) {\n        <rolatech-pricing-item [pricing]=\"item\"> </rolatech-pricing-item>\n      }\n      <div class=\"mb-6\">\n        <button mat-button (click)=\"addPricing()\">\n          <mat-icon>add</mat-icon>\n          <span>\u589E\u52A0\u4EF7\u683C</span>\n        </button>\n      </div>\n    </form>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"h-16 flex justify-end items-center px-5\">\n    <button mat-button [mat-dialog-close]=\"pricing\" cdkFocusInitial>\u4FDD\u5B58</button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "directive", type: i7$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: PricingItemComponent, selector: "rolatech-pricing-item", inputs: ["actions", "pricing"], outputs: ["pricingChange", "delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CoursePricingDialogComponent, isStandalone: true, selector: "rolatech-course-pricing-dialog", ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\n  <div class=\"h-16 flex justify-between items-center px-5\">\n    @if (data.title) {\n      <div class=\"text-md font-medium\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"flex-1 overflow-hidden mt-3 overflow-y-auto w-2/3 max-h-[55vh]\">\n    <form #detailForm=\"ngForm\" class=\"p-3\">\n      <ng-template matStepLabel>\u8BE6\u60C5</ng-template>\n      @for (item of pricing; track item) {\n        <rolatech-pricing-item [pricing]=\"item\"> </rolatech-pricing-item>\n      }\n      <div class=\"mb-6\">\n        <button mat-button (click)=\"addPricing()\">\n          <mat-icon>add</mat-icon>\n          <span>\u589E\u52A0\u4EF7\u683C</span>\n        </button>\n      </div>\n    </form>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"h-16 flex justify-end items-center px-5\">\n    <button mat-button [mat-dialog-close]=\"pricing\" cdkFocusInitial>\u4FDD\u5B58</button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "directive", type: i7.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: PricingItemComponent, selector: "rolatech-pricing-item", inputs: ["actions", "pricing"], outputs: ["pricingChange", "delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CoursePricingDialogComponent, decorators: [{
             type: Component,
@@ -1178,7 +1179,7 @@ class CourseScheduleDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseScheduleDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: CourseService }, { token: i3$3.MatSnackBar }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseScheduleDialogComponent, isStandalone: true, selector: "rolatech-course-schedule-dialog", ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\n  <div class=\"h-16 flex justify-between items-center px-5\">\n    @if (data.title) {\n      <div class=\"text-md font-medium\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"flex-1 overflow-hidden mt-3 overflow-y-auto\">\n    <form #detailForm=\"ngForm\" class=\"p-3\">\n      <ng-template matStepLabel>\u8BE6\u60C5</ng-template>\n      @for (item of schedule; track item) {\n        <rolatech-schedule-item [value]=\"item\"></rolatech-schedule-item>\n      }\n      <div class=\"mb-6\">\n        <button mat-button (click)=\"addSchedule()\">\n          <mat-icon>add</mat-icon>\n          <span>\u589E\u52A0\u8BFE\u8868</span>\n        </button>\n      </div>\n    </form>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"h-16 flex justify-end items-center px-5\">\n    <button mat-button [mat-dialog-close]=\"schedule\" cdkFocusInitial>\u4FDD\u5B58</button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "directive", type: i7$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: ScheduleItemComponent, selector: "rolatech-schedule-item", inputs: ["value", "actions"], outputs: ["delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseScheduleDialogComponent, isStandalone: true, selector: "rolatech-course-schedule-dialog", ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\n  <div class=\"h-16 flex justify-between items-center px-5\">\n    @if (data.title) {\n      <div class=\"text-md font-medium\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"flex-1 overflow-hidden mt-3 overflow-y-auto\">\n    <form #detailForm=\"ngForm\" class=\"p-3\">\n      <ng-template matStepLabel>\u8BE6\u60C5</ng-template>\n      @for (item of schedule; track item) {\n        <rolatech-schedule-item [value]=\"item\"></rolatech-schedule-item>\n      }\n      <div class=\"mb-6\">\n        <button mat-button (click)=\"addSchedule()\">\n          <mat-icon>add</mat-icon>\n          <span>\u589E\u52A0\u8BFE\u8868</span>\n        </button>\n      </div>\n    </form>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"h-16 flex justify-end items-center px-5\">\n    <button mat-button [mat-dialog-close]=\"schedule\" cdkFocusInitial>\u4FDD\u5B58</button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "directive", type: i7.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: ScheduleItemComponent, selector: "rolatech-schedule-item", inputs: ["value", "actions"], outputs: ["delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseScheduleDialogComponent, decorators: [{
             type: Component,
@@ -1302,7 +1303,7 @@ class CourseDetailsDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseDetailsDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: CourseService }, { token: i3$3.MatSnackBar }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseDetailsDialogComponent, isStandalone: true, selector: "rolatech-course-details-dialog", ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\n  <div class=\"h-16 flex justify-between items-center px-5\">\n    @if (data.title) {\n      <div class=\"text-md font-medium\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"flex-1 overflow-hidden mt-3 overflow-y-auto\">\n    <form #detailForm=\"ngForm\" class=\"p-3\">\n      <ng-template matStepLabel>\u8BE6\u60C5</ng-template>\n      @for (item of details; track item) {\n        <rolatech-detail-item\n          [detail]=\"item\"\n          (upload)=\"onDetailMediaUpload($event)\"\n          (deleteMedia)=\"onDetailMediaDelete($event)\"\n          (save)=\"onDetailSave($event)\"\n          (delete)=\"onDetailDelete($event)\"\n        ></rolatech-detail-item>\n      }\n      <div class=\"mb-6\">\n        <button mat-button (click)=\"addDetail()\">\n          <mat-icon>add</mat-icon>\n          <span>\u589E\u52A0\u8BE6\u60C5</span>\n        </button>\n      </div>\n    </form>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"h-16 flex justify-end items-center px-5\">\n    <button mat-button [mat-dialog-close]=\"true\" cdkFocusInitial>\u4FDD\u5B58</button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "directive", type: i7$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: DetailItemComponent, selector: "rolatech-detail-item", inputs: ["isUploading", "detail", "actions", "selectMedia"], outputs: ["upload", "delete", "save", "deleteMedia"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseDetailsDialogComponent, isStandalone: true, selector: "rolatech-course-details-dialog", ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\n  <div class=\"h-16 flex justify-between items-center px-5\">\n    @if (data.title) {\n      <div class=\"text-md font-medium\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"flex-1 overflow-hidden mt-3 overflow-y-auto\">\n    <form #detailForm=\"ngForm\" class=\"p-3\">\n      <ng-template matStepLabel>\u8BE6\u60C5</ng-template>\n      @for (item of details; track item) {\n        <rolatech-detail-item\n          [detail]=\"item\"\n          (upload)=\"onDetailMediaUpload($event)\"\n          (deleteMedia)=\"onDetailMediaDelete($event)\"\n          (save)=\"onDetailSave($event)\"\n          (delete)=\"onDetailDelete($event)\"\n        ></rolatech-detail-item>\n      }\n      <div class=\"mb-6\">\n        <button mat-button (click)=\"addDetail()\">\n          <mat-icon>add</mat-icon>\n          <span>\u589E\u52A0\u8BE6\u60C5</span>\n        </button>\n      </div>\n    </form>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"h-16 flex justify-end items-center px-5\">\n    <button mat-button [mat-dialog-close]=\"true\" cdkFocusInitial>\u4FDD\u5B58</button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "directive", type: i7.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: DetailItemComponent, selector: "rolatech-detail-item", inputs: ["isUploading", "detail", "actions", "selectMedia"], outputs: ["upload", "delete", "save", "deleteMedia"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseDetailsDialogComponent, decorators: [{
             type: Component,
@@ -1492,7 +1493,7 @@ class CourseEditDialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseEditDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: CategoryService }, { token: CourseService }, { token: i3$3.MatSnackBar }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseEditDialogComponent, isStandalone: true, selector: "rolatech-course-edit-dialog", viewQueries: [{ propertyName: "stepper", first: true, predicate: MatStepper, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\n  <div class=\"h-16 flex justify-between items-center px-5\">\n    @if (data.title) {\n      <div class=\"text-md font-medium\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"flex-1 overflow-hidden mt-3 overflow-y-auto\">\n    <mat-stepper #stepper (selectionChange)=\"onStepperChange($event)\">\n      <mat-step [editable]=\"true\">\n        <form #infoForm=\"ngForm\" class=\"py-3\">\n          <ng-template matStepLabel>\u57FA\u672C\u4FE1\u606F</ng-template>\n          <div class=\"flex flex-col\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label> \u8BFE\u7A0B\u540D\u79F0 </mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"course.name\" name=\"name\" required />\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\">\n              <mat-label> \u8BFE\u7A0B\u63CF\u8FF0 </mat-label>\n              <textarea\n                matInput\n                type=\"text\"\n                [(ngModel)]=\"course.description\"\n                name=\"description\"\n                required\n                cdkTextareaAutosize\n                cdkAutosizeMinRows=\"3\"\n              ></textarea>\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\" ngModelGroup=\"categories\">\n              <mat-label>\u5206\u7C7B</mat-label>\n              <mat-select\n                multiple\n                name=\"id\"\n                [compareWith]=\"compareFn\"\n                [(ngModel)]=\"course.categories\"\n                #select=\"matSelect\"\n                (selectionChange)=\"onSelectionChange($event)\"\n              >\n                @for (item of categories; track item) {\n                  <mat-option [value]=\"item\">\n                    {{ item.name }}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\">\n              <mat-label>\u7C7B\u578B</mat-label>\n              <mat-select name=\"type\" [(ngModel)]=\"course.type\">\n                @for (item of courseType; track item) {\n                  <mat-option [value]=\"item.key\">\n                    {{ item.value }}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            @if (course.type.toString() !== 'ONLINE') {\n              <mat-form-field appearance=\"fill\" ngModelGroup=\"classroom\">\n                <mat-label>\u6559\u5BA4</mat-label>\n                <mat-select [(ngModel)]=\"course.classroom\" name=\"id\">\n                  @for (classroom of classrooms; track classroom) {\n                    <mat-option [value]=\"classroom.id\">\n                      <div class=\"flex gap-3\">\n                        <span>{{ classroom.name }}</span>\n                        <span> {{ classroom.address }}</span>\n                      </div>\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            }\n          </div>\n          <div>\n            <div class=\"py-3\">\n              <h2>\u56FE\u7247\u4FE1\u606F</h2>\n            </div>\n            <rolatech-media-list (upload)=\"onUpload($event)\" [isUploading]=\"isUploading\">\n              @for (item of course.media; track item; let i = $index) {\n                <rolatech-media-list-item [media]=\"item\" (mediaItemClick)=\"onImageClick(i)\"></rolatech-media-list-item>\n              }\n            </rolatech-media-list>\n          </div>\n        </form>\n      </mat-step>\n      <mat-step [editable]=\"true\">\n        <form #detailForm=\"ngForm\" class=\"py-3\">\n          <ng-template matStepLabel>\u8BE6\u60C5</ng-template>\n          @for (item of course.details; track item) {\n            <rolatech-detail-item\n              [detail]=\"item\"\n              (upload)=\"onDetailMediaUpload($event)\"\n              (deleteMedia)=\"onDetailMediaDelete($event)\"\n              (save)=\"onDetailSave($event)\"\n              (delete)=\"onDetailDelete($event)\"\n            ></rolatech-detail-item>\n          }\n          <div class=\"mb-6\">\n            <button mat-button (click)=\"addDetail()\">\n              <mat-icon>add</mat-icon>\n              <span>\u589E\u52A0\u8BE6\u60C5</span>\n            </button>\n          </div>\n        </form>\n      </mat-step>\n      <mat-step [editable]=\"true\">\n        <form #pricingForm=\"ngForm\" class=\"py-3\">\n          <ng-template matStepLabel>\u4EF7\u683C</ng-template>\n          <div>\n            @for (item of course.pricing; track item) {\n              <rolatech-pricing-item [pricing]=\"item\"> </rolatech-pricing-item>\n            }\n            <div class=\"mb-6\">\n              <button mat-button (click)=\"addPricing()\">\n                <mat-icon>add</mat-icon>\n                <span>\u589E\u52A0\u4EF7\u683C</span>\n              </button>\n            </div>\n          </div>\n        </form>\n      </mat-step>\n      <mat-step>\n        <form #scheduleForm=\"ngForm\">\n          <ng-template matStepLabel>\u8BFE\u8868</ng-template>\n          <div class=\"flex flex-col\">\n            @for (item of course.schedule; track item) {\n              <rolatech-schedule-item [value]=\"item\"></rolatech-schedule-item>\n            }\n            <div class=\"mb-6\">\n              <button mat-button (click)=\"addSchedule()\">\n                <mat-icon>add</mat-icon>\n                <span>\u589E\u52A0\u8BFE\u8868</span>\n              </button>\n            </div>\n          </div>\n        </form>\n      </mat-step>\n    </mat-stepper>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"h-16 flex justify-end items-center px-5\">\n    @if (!firstStepper) {\n      <button mat-button mat-button (click)=\"previous()\">\u4E0A\u4E00\u6B65</button>\n    }\n    @if (!lastStepper) {\n      <button mat-button (click)=\"next()\">\u4E0B\u4E00\u6B65</button>\n    }\n    @if (lastStepper) {\n      <button mat-button [mat-dialog-close]=\"course\" cdkFocusInitial>\u4FDD\u5B58</button>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i7$1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i7$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i7$1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i3$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: MediaListComponent, selector: "rolatech-media-list", inputs: ["isUploading", "media", "showAdd"], outputs: ["mediaItemClick", "upload"] }, { kind: "component", type: MediaListItemComponent, selector: "rolatech-media-list-item", inputs: ["media", "uploadProgress"], outputs: ["mediaItemClick", "deleteMedia"] }, { kind: "component", type: DetailItemComponent, selector: "rolatech-detail-item", inputs: ["isUploading", "detail", "actions", "selectMedia"], outputs: ["upload", "delete", "save", "deleteMedia"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: PricingItemComponent, selector: "rolatech-pricing-item", inputs: ["actions", "pricing"], outputs: ["pricingChange", "delete", "save"] }, { kind: "component", type: ScheduleItemComponent, selector: "rolatech-schedule-item", inputs: ["value", "actions"], outputs: ["delete", "save"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseEditDialogComponent, isStandalone: true, selector: "rolatech-course-edit-dialog", viewQueries: [{ propertyName: "stepper", first: true, predicate: MatStepper, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\n  <div class=\"h-16 flex justify-between items-center px-5\">\n    @if (data.title) {\n      <div class=\"text-md font-medium\">{{ data.title }}</div>\n    }\n    <div class=\"cursor-pointer\" (click)=\"close()\">\n      <mat-icon fontIcon=\"close\"></mat-icon>\n    </div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"flex-1 overflow-hidden mt-3 overflow-y-auto\">\n    <mat-stepper #stepper (selectionChange)=\"onStepperChange($event)\">\n      <mat-step [editable]=\"true\">\n        <form #infoForm=\"ngForm\" class=\"py-3\">\n          <ng-template matStepLabel>\u57FA\u672C\u4FE1\u606F</ng-template>\n          <div class=\"flex flex-col\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label> \u8BFE\u7A0B\u540D\u79F0 </mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"course.name\" name=\"name\" required />\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\">\n              <mat-label> \u8BFE\u7A0B\u63CF\u8FF0 </mat-label>\n              <textarea\n                matInput\n                type=\"text\"\n                [(ngModel)]=\"course.description\"\n                name=\"description\"\n                required\n                cdkTextareaAutosize\n                cdkAutosizeMinRows=\"3\"\n              ></textarea>\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\" ngModelGroup=\"categories\">\n              <mat-label>\u5206\u7C7B</mat-label>\n              <mat-select\n                multiple\n                name=\"id\"\n                [compareWith]=\"compareFn\"\n                [(ngModel)]=\"course.categories\"\n                #select=\"matSelect\"\n                (selectionChange)=\"onSelectionChange($event)\"\n              >\n                @for (item of categories; track item) {\n                  <mat-option [value]=\"item\">\n                    {{ item.name }}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\">\n              <mat-label>\u7C7B\u578B</mat-label>\n              <mat-select name=\"type\" [(ngModel)]=\"course.type\">\n                @for (item of courseType; track item) {\n                  <mat-option [value]=\"item.key\">\n                    {{ item.value }}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            @if (course.type.toString() !== 'ONLINE') {\n              <mat-form-field appearance=\"fill\" ngModelGroup=\"classroom\">\n                <mat-label>\u6559\u5BA4</mat-label>\n                <mat-select [(ngModel)]=\"course.classroom\" name=\"id\">\n                  @for (classroom of classrooms; track classroom) {\n                    <mat-option [value]=\"classroom.id\">\n                      <div class=\"flex gap-3\">\n                        <span>{{ classroom.name }}</span>\n                        <span> {{ classroom.address }}</span>\n                      </div>\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            }\n          </div>\n          <div>\n            <div class=\"py-3\">\n              <h2>\u56FE\u7247\u4FE1\u606F</h2>\n            </div>\n            <rolatech-media-list (upload)=\"onUpload($event)\" [isUploading]=\"isUploading\">\n              @for (item of course.media; track item; let i = $index) {\n                <rolatech-media-list-item [media]=\"item\" (mediaItemClick)=\"onImageClick(i)\"></rolatech-media-list-item>\n              }\n            </rolatech-media-list>\n          </div>\n        </form>\n      </mat-step>\n      <mat-step [editable]=\"true\">\n        <form #detailForm=\"ngForm\" class=\"py-3\">\n          <ng-template matStepLabel>\u8BE6\u60C5</ng-template>\n          @for (item of course.details; track item) {\n            <rolatech-detail-item\n              [detail]=\"item\"\n              (upload)=\"onDetailMediaUpload($event)\"\n              (deleteMedia)=\"onDetailMediaDelete($event)\"\n              (save)=\"onDetailSave($event)\"\n              (delete)=\"onDetailDelete($event)\"\n            ></rolatech-detail-item>\n          }\n          <div class=\"mb-6\">\n            <button mat-button (click)=\"addDetail()\">\n              <mat-icon>add</mat-icon>\n              <span>\u589E\u52A0\u8BE6\u60C5</span>\n            </button>\n          </div>\n        </form>\n      </mat-step>\n      <mat-step [editable]=\"true\">\n        <form #pricingForm=\"ngForm\" class=\"py-3\">\n          <ng-template matStepLabel>\u4EF7\u683C</ng-template>\n          <div>\n            @for (item of course.pricing; track item) {\n              <rolatech-pricing-item [pricing]=\"item\"> </rolatech-pricing-item>\n            }\n            <div class=\"mb-6\">\n              <button mat-button (click)=\"addPricing()\">\n                <mat-icon>add</mat-icon>\n                <span>\u589E\u52A0\u4EF7\u683C</span>\n              </button>\n            </div>\n          </div>\n        </form>\n      </mat-step>\n      <mat-step>\n        <form #scheduleForm=\"ngForm\">\n          <ng-template matStepLabel>\u8BFE\u8868</ng-template>\n          <div class=\"flex flex-col\">\n            @for (item of course.schedule; track item) {\n              <rolatech-schedule-item [value]=\"item\"></rolatech-schedule-item>\n            }\n            <div class=\"mb-6\">\n              <button mat-button (click)=\"addSchedule()\">\n                <mat-icon>add</mat-icon>\n                <span>\u589E\u52A0\u8BFE\u8868</span>\n              </button>\n            </div>\n          </div>\n        </form>\n      </mat-step>\n    </mat-stepper>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"h-16 flex justify-end items-center px-5\">\n    @if (!firstStepper) {\n      <button mat-button mat-button (click)=\"previous()\">\u4E0A\u4E00\u6B65</button>\n    }\n    @if (!lastStepper) {\n      <button mat-button (click)=\"next()\">\u4E0B\u4E00\u6B65</button>\n    }\n    @if (lastStepper) {\n      <button mat-button [mat-dialog-close]=\"course\" cdkFocusInitial>\u4FDD\u5B58</button>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i7.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i7.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i7.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i3$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: MediaListComponent, selector: "rolatech-media-list", inputs: ["isUploading", "media", "showAdd"], outputs: ["mediaItemClick", "upload"] }, { kind: "component", type: MediaListItemComponent, selector: "rolatech-media-list-item", inputs: ["media", "uploadProgress"], outputs: ["mediaItemClick", "deleteMedia"] }, { kind: "component", type: DetailItemComponent, selector: "rolatech-detail-item", inputs: ["isUploading", "detail", "actions", "selectMedia"], outputs: ["upload", "delete", "save", "deleteMedia"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: PricingItemComponent, selector: "rolatech-pricing-item", inputs: ["actions", "pricing"], outputs: ["pricingChange", "delete", "save"] }, { kind: "component", type: ScheduleItemComponent, selector: "rolatech-schedule-item", inputs: ["value", "actions"], outputs: ["delete", "save"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseEditDialogComponent, decorators: [{
             type: Component,
@@ -1928,7 +1929,7 @@ const courseRoutes = [
         children: [
             {
                 path: '',
-                loadComponent: () => import('./rolatech-angular-course-course-index.component-Bm6Sg8zH.mjs').then((x) => x.CourseIndexComponent),
+                loadComponent: () => import('./rolatech-angular-course-course-index.component-BiS-U0WO.mjs').then((x) => x.CourseIndexComponent),
             },
             {
                 path: 'categories/:id',
@@ -1950,9 +1951,1090 @@ const courseRoutes = [
     },
 ];
 
+class CourseManageContentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: CourseManageContentComponent, isStandalone: true, selector: "rolatech-course-manage-content", ngImport: i0, template: "<ng-content select=\"rolatech-toolbar\"></ng-content>\n<div class=\"p-3\">\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-manage-content', standalone: true, imports: [CommonModule], template: "<ng-content select=\"rolatech-toolbar\"></ng-content>\n<div class=\"p-3\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }] });
+
+class CourseManageDetailsComponent {
+    constructor() {
+        this.route = inject(ActivatedRoute);
+        this.courseService = inject(CourseService);
+        this.dialog = inject(MatDialog);
+        this.snackBar = inject(MatSnackBar);
+        this.isLoading = false;
+        this.isUploading = false;
+        this.details = [];
+        this.status = CourseStatus;
+        this.courseType = CourseType;
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+    }
+    ngOnInit() {
+        this.find();
+    }
+    find() {
+        this.courseService.findDetails(this.id).subscribe({
+            next: (res) => {
+                if (res.data) {
+                    this.details = res.data;
+                }
+            },
+        });
+    }
+    addDetail() {
+        if (!this.details) {
+            this.details = [];
+        }
+        this.courseService
+            .addDetail(this.id, {
+            title: '',
+            description: '',
+            content: '',
+            media: [],
+        })
+            .subscribe({
+            next: (res) => {
+                const detail = res.data;
+                this.details.push({
+                    id: detail.id,
+                    title: '',
+                    description: '',
+                    content: '',
+                    media: [],
+                });
+            },
+            error: (e) => {
+                this.snackBar.open(e.message);
+            },
+        });
+    }
+    onDetailMediaUpload(event) {
+        const detailId = event.id;
+        const index = findIndex(this.details, (item) => item.id === detailId);
+        const file = event.data.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                if (!this.details[index].media) {
+                    this.details[index].media = [];
+                }
+                this.details[index].media.push({
+                    url: reader.result,
+                    alt: 'upload image',
+                });
+                this.details[index].isUploading = true;
+                const formData = new FormData();
+                formData.append('file', file);
+                this.courseService.uploadDetailMedia(this.id, detailId, formData).subscribe({
+                    next: (res) => {
+                        this.isUploading = false;
+                        this.details[index].isUploading = false;
+                        const tmp = this.details[index].media;
+                        delete res.data.productDetail;
+                        this.details[index].media[this.details[index].media.length - 1] = res.data;
+                    },
+                    error: (e) => {
+                        this.isUploading = false;
+                        this.snackBar.open('上传失败: ' + e.message);
+                    },
+                });
+            };
+            reader.onerror = (error) => {
+                this.isUploading = false;
+            };
+        }
+    }
+    onDetailMediaDelete(event) {
+        const detailId = event.id;
+        const mediaId = event.media.id;
+        this.courseService.deleteDetailMedia(this.id, detailId, mediaId).subscribe({
+            next: (res) => {
+                const detail = this.details.find((item) => item.id === detailId);
+                remove(detail.media, {
+                    id: mediaId,
+                });
+            },
+        });
+    }
+    onDetailSave(detail) {
+        delete detail.isUploading;
+        this.courseService.updateDetail(this.id, detail.id, detail).subscribe({
+            next: (res) => {
+                this.snackBar.open('保存成功');
+            },
+            error: (e) => {
+                this.snackBar.open(e.message);
+            },
+        });
+    }
+    onDetailDelete(detail) {
+        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+            width: '400px',
+            data: {
+                title: '删除详情',
+                message: '确定删除此详情吗?',
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.courseService.deleteDetail(this.id, detail.id).subscribe({
+                    next: (res) => {
+                        this.snackBar.open(res.data);
+                        remove(this.details, {
+                            id: detail.id,
+                        });
+                    },
+                    error: (e) => {
+                        this.snackBar.open(e.message);
+                    },
+                });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseManageDetailsComponent, isStandalone: true, selector: "rolatech-course-manage-details", ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u8BE6\u60C5\" class=\"hidden sm:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (detail of details; track detail) {\n        <rolatech-detail-item\n          [detail]=\"detail\"\n          (upload)=\"onDetailMediaUpload($event)\"\n          (deleteMedia)=\"onDetailMediaDelete($event)\"\n          (save)=\"onDetailSave($event)\"\n          (delete)=\"onDetailDelete($event)\"\n          [actions]=\"true\"\n        ></rolatech-detail-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addDetail()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u6DFB\u52A0\u8BE6\u60C5</span>\n    </button>\n  </div>\n</rolatech-course-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: DetailItemComponent, selector: "rolatech-detail-item", inputs: ["isUploading", "detail", "actions", "selectMedia"], outputs: ["upload", "delete", "save", "deleteMedia"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: CourseManageContentComponent, selector: "rolatech-course-manage-content" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-manage-details', standalone: true, imports: [DetailItemComponent, MatButtonModule, MatIconModule, ToolbarComponent, CourseManageContentComponent], template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u8BE6\u60C5\" class=\"hidden sm:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (detail of details; track detail) {\n        <rolatech-detail-item\n          [detail]=\"detail\"\n          (upload)=\"onDetailMediaUpload($event)\"\n          (deleteMedia)=\"onDetailMediaDelete($event)\"\n          (save)=\"onDetailSave($event)\"\n          (delete)=\"onDetailDelete($event)\"\n          [actions]=\"true\"\n        ></rolatech-detail-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addDetail()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u6DFB\u52A0\u8BE6\u60C5</span>\n    </button>\n  </div>\n</rolatech-course-manage-content>\n" }]
+        }], ctorParameters: () => [] });
+
+class CourseManageScheduleComponent {
+    constructor() {
+        this.route = inject(ActivatedRoute);
+        this.courseService = inject(CourseService);
+        this.dialog = inject(MatDialog);
+        this.snackBar = inject(MatSnackBar);
+        this.isLoading = false;
+        this.schedule = [];
+        this.status = CourseStatus;
+        this.courseType = CourseType;
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+    }
+    ngOnInit() {
+        this.find();
+    }
+    find() {
+        this.courseService.findSchedule(this.id).subscribe({
+            next: (res) => {
+                if (res.data) {
+                    this.schedule = res.data;
+                }
+            },
+        });
+    }
+    addSchedule() {
+        const dialogRef = this.dialog.open(CourseScheduleAddDialogComponent, {
+            width: '500px',
+            disableClose: true,
+            data: {
+                title: '添加课表',
+            },
+        });
+        dialogRef.afterClosed().subscribe((schedule) => {
+            if (schedule) {
+                this.courseService.addSchedule(this.id, schedule).subscribe({
+                    next: (res) => {
+                        this.schedule.push(res.data);
+                        this.snackBar.open('添加成功');
+                    },
+                    error: (error) => {
+                        this.snackBar.open(error.message);
+                    },
+                });
+            }
+        });
+    }
+    editSchedule() {
+        const dialogRef = this.dialog.open(CourseScheduleDialogComponent, {
+            width: '500px',
+            height: '90%',
+            data: {
+                title: '编辑课表',
+                courseId: this.id,
+                schedule: this.schedule,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.courseService.addSchedule(this.id, { schedule: result }).subscribe({
+                    next: (res) => {
+                        this.snackBar.open('添加成功');
+                    },
+                    error: (error) => {
+                        this.snackBar.open(error.message);
+                    },
+                });
+            }
+        });
+    }
+    onScheduleSave(schedule) {
+        this.courseService.updateSchedule(this.id, schedule.id, schedule).subscribe({
+            next: (res) => {
+                this.snackBar.open('保存成功');
+            },
+            error: (e) => {
+                this.snackBar.open(e.message);
+            },
+        });
+    }
+    onScheduleDelete(schedule) {
+        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+            width: '400px',
+            data: {
+                title: '删除课表',
+                message: '确定删除此课表吗?',
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.courseService.deleteSchedule(this.id, schedule.id).subscribe({
+                    next: (res) => {
+                        remove(this.schedule, {
+                            id: schedule.id,
+                        });
+                        this.snackBar.open(res.data);
+                    },
+                    error: (e) => {
+                        this.snackBar.open(e.message);
+                    },
+                });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageScheduleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseManageScheduleComponent, isStandalone: true, selector: "rolatech-course-manage-schedule", ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u8BFE\u7A0B\u8868\" class=\"hidden sm:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (item of schedule; track item) {\n        <rolatech-schedule-item\n          [value]=\"item\"\n          [actions]=\"true\"\n          (save)=\"onScheduleSave($event)\"\n          (delete)=\"onScheduleDelete($event)\"\n        >\n        </rolatech-schedule-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addSchedule()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u589E\u52A0\u8BFE\u8868</span>\n    </button>\n  </div>\n</rolatech-course-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: ScheduleItemComponent, selector: "rolatech-schedule-item", inputs: ["value", "actions"], outputs: ["delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: CourseManageContentComponent, selector: "rolatech-course-manage-content" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageScheduleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-manage-schedule', standalone: true, imports: [ScheduleItemComponent, MatButtonModule, MatIconModule, ToolbarComponent, CourseManageContentComponent], template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u8BFE\u7A0B\u8868\" class=\"hidden sm:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (item of schedule; track item) {\n        <rolatech-schedule-item\n          [value]=\"item\"\n          [actions]=\"true\"\n          (save)=\"onScheduleSave($event)\"\n          (delete)=\"onScheduleDelete($event)\"\n        >\n        </rolatech-schedule-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addSchedule()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u589E\u52A0\u8BFE\u8868</span>\n    </button>\n  </div>\n</rolatech-course-manage-content>\n" }]
+        }], ctorParameters: () => [] });
+
+class CourseManagePricingComponent {
+    constructor() {
+        this.route = inject(ActivatedRoute);
+        this.courseService = inject(CourseService);
+        this.dialog = inject(MatDialog);
+        this.snackBar = inject(MatSnackBar);
+        this.isLoading = false;
+        this.pricing = [];
+        this.status = CourseStatus;
+        this.courseType = CourseType;
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+    }
+    ngOnInit() {
+        this.find();
+    }
+    find() {
+        this.courseService.findPricing(this.id).subscribe({
+            next: (res) => {
+                if (res.data) {
+                    this.pricing = res.data;
+                }
+            },
+        });
+    }
+    editPricing() {
+        const dialogRef = this.dialog.open(CoursePricingDialogComponent, {
+            width: '500px',
+            height: '90%',
+            data: {
+                title: '编辑价格',
+                courseId: this.id,
+                pricing: this.pricing,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.courseService.addPricing(this.id, { pricing: result }).subscribe({
+                    next: (res) => {
+                        this.snackBar.open('添加成功');
+                    },
+                    error: (error) => {
+                        this.snackBar.open(error.message);
+                    },
+                });
+            }
+        });
+    }
+    addPricing() {
+        const dialogRef = this.dialog.open(CoursePricingAddDialogComponent, {
+            disableClose: true,
+            width: '500px',
+            data: {
+                title: '添加价格',
+            },
+        });
+        dialogRef.afterClosed().subscribe((pricing) => {
+            if (pricing) {
+                this.courseService.addPricing(this.id, { ...pricing, total: pricing.total * 100 }).subscribe({
+                    next: (res) => {
+                        this.pricing.push(res.data);
+                        this.snackBar.open('添加成功');
+                    },
+                    error: (error) => {
+                        this.snackBar.open(error.message);
+                    },
+                });
+            }
+        });
+    }
+    onPricingSave(pricing) {
+        this.courseService.updatePricing(this.id, pricing.id, pricing).subscribe({
+            next: (res) => {
+                this.snackBar.open('保存成功');
+            },
+            error: (e) => {
+                this.snackBar.open(e.message);
+            },
+        });
+    }
+    onPricingDelete(pricing) {
+        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+            width: '400px',
+            data: {
+                title: '删除价格',
+                message: '确定删除此价格吗?',
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.courseService.deletePricing(this.id, pricing.id).subscribe({
+                    next: (res) => {
+                        remove(this.pricing, {
+                            id: pricing.id,
+                        });
+                        this.snackBar.open(res.data);
+                    },
+                    error: (e) => {
+                        this.snackBar.open(e.message);
+                    },
+                });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManagePricingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseManagePricingComponent, isStandalone: true, selector: "rolatech-course-manage-pricing", ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u4EF7\u683C\" class=\"hidden sm:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (item of pricing; track item) {\n        <rolatech-pricing-item\n          [pricing]=\"item\"\n          [actions]=\"true\"\n          (save)=\"onPricingSave($event)\"\n          (delete)=\"onPricingDelete($event)\"\n        >\n        </rolatech-pricing-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addPricing()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u6DFB\u52A0\u4EF7\u683C</span>\n    </button>\n  </div>\n</rolatech-course-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: PricingItemComponent, selector: "rolatech-pricing-item", inputs: ["actions", "pricing"], outputs: ["pricingChange", "delete", "save"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: CourseManageContentComponent, selector: "rolatech-course-manage-content" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManagePricingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-manage-pricing', standalone: true, imports: [PricingItemComponent, MatButtonModule, MatIconModule, ToolbarComponent, CourseManageContentComponent], template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u4EF7\u683C\" class=\"hidden sm:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (item of pricing; track item) {\n        <rolatech-pricing-item\n          [pricing]=\"item\"\n          [actions]=\"true\"\n          (save)=\"onPricingSave($event)\"\n          (delete)=\"onPricingDelete($event)\"\n        >\n        </rolatech-pricing-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addPricing()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u6DFB\u52A0\u4EF7\u683C</span>\n    </button>\n  </div>\n</rolatech-course-manage-content>\n" }]
+        }], ctorParameters: () => [] });
+
+class BookingService extends BaseService {
+    init() {
+        this.endpoint = 'partners/bookings';
+        super.init();
+    }
+    items(options) {
+        return this.http.get(`${this.actionUrl}/items`, {
+            params: options,
+            withCredentials: true,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: BookingService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: BookingService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: BookingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class InstructorService extends BaseService {
+    init() {
+        this.endpoint = 'instructors';
+        super.init();
+    }
+    findMyClassrooms(options) {
+        return this.http.get(`${this.actionUrl}/classrooms/me`, {
+            params: options,
+            withCredentials: true,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: InstructorService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: InstructorService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: InstructorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class CourseManageInfoComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.courseService = inject(CourseService);
+        this.instructorService = inject(InstructorService);
+        this.categoryService = inject(CategoryService);
+        this.bookingService = inject(BookingService);
+        this.isLoading = false;
+        this.status = CourseStatus;
+        this.courseType = [
+            {
+                key: 'ONLINE',
+                value: '线上',
+            },
+            {
+                key: 'OFFLINE',
+                value: '线下',
+            },
+            {
+                key: 'MIXED',
+                value: '混合',
+            },
+        ];
+    }
+    ngOnInit() {
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+        this.find();
+        this.categoryService.find({}).subscribe({
+            next: (res) => {
+                this.categories = res.data;
+            },
+        });
+        this.findClassrooms();
+        this.findBookedClassrooms();
+    }
+    findBookedClassrooms() {
+        this.bookingService.items({ status: 'paid' }).subscribe({
+            next: (res) => {
+                this.bookedClassrooms = res.data;
+            },
+        });
+    }
+    findClassrooms() {
+        this.instructorService.findMyClassrooms({}).subscribe({
+            next: (res) => {
+                this.classrooms = res.data;
+            },
+        });
+    }
+    find() {
+        this.courseService.get(this.id).subscribe({
+            next: (res) => {
+                this.course = res.data;
+            },
+        });
+    }
+    compareFn(o1, o2) {
+        return o1.id === o2?.id;
+    }
+    compareClassroom(o1, o2) {
+        if (o1.room) {
+            return (o1.latitude === o2?.latitude &&
+                o1.longitude === o2?.longitude &&
+                o1.room === o2.room &&
+                o1.startAt === o2.startAt &&
+                o1.endAt === o2.endAt);
+        }
+        else {
+            return o1.latitude === o2?.latitude && o1.longitude === o2?.longitude;
+        }
+    }
+    onSelectionChange(event) {
+        this.selectedCategoyIds = event.value;
+    }
+    onClassroomSelected(event) {
+        this.selectedClassroom = event.value;
+    }
+    update() {
+        const { name, description, categories, type, classroom } = this.course;
+        const finalClassroom = clone(classroom);
+        finalClassroom.address = classroom.room ? classroom.address + ' ' + classroom.room + '室' : classroom.address;
+        const data = {
+            name,
+            description,
+            categories,
+            type,
+            classroom: finalClassroom,
+        };
+        this.courseService.update(this.id, data).subscribe({
+            next: (res) => {
+                this.snackBarService.open('保存成功');
+                // this.router.navigate([`../${res.data.id}`], { relativeTo: this.route });
+            },
+            error: (e) => {
+                this.snackBarService.open(e.message);
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseManageInfoComponent, isStandalone: true, selector: "rolatech-course-manage-info", usesInheritance: true, ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u57FA\u672C\u4FE1\u606F\" class=\"hidden sm:block\" divider></rolatech-toolbar>\n  @if (course) {\n    <div class=\"flex flex-col\">\n      <form #courseForm=\"ngForm\" (ngSubmit)=\"update()\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label> \u8BFE\u7A0B\u540D\u79F0 </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"course.name\" name=\"name\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label> \u8BFE\u7A0B\u63CF\u8FF0 </mat-label>\n          <textarea\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"course.description\"\n            name=\"description\"\n            required\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n          ></textarea>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" ngModelGroup=\"categories\" required>\n          <mat-label>\u5206\u7C7B</mat-label>\n          <mat-select\n            multiple\n            name=\"id\"\n            [compareWith]=\"compareFn\"\n            [(ngModel)]=\"course.categories\"\n            #select=\"matSelect\"\n            (selectionChange)=\"onSelectionChange($event)\"\n          >\n            @for (item of categories; track item) {\n              <mat-option [value]=\"item\">\n                {{ item.name }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>\u7C7B\u578B</mat-label>\n          <mat-select name=\"type\" [(ngModel)]=\"course.type\" required>\n            @for (item of courseType; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        @if (course.type && course.type.toString() !== 'ONLINE') {\n          <mat-form-field appearance=\"fill\" ngModelGroup=\"classroom\">\n            <mat-label>\u6559\u5BA4</mat-label>\n            <mat-select\n              name=\"id\"\n              [(ngModel)]=\"course.classroom\"\n              [compareWith]=\"compareClassroom\"\n              (selectionChange)=\"onClassroomSelected($event)\"\n              required\n            >\n              <mat-optgroup label=\"\u81EA\u6709\u6559\u5BA4\">\n                @for (classroom of classrooms; track classroom) {\n                  <mat-option [value]=\"classroom\">\n                    <div class=\"flex gap-3\">\n                      <span>{{ classroom.name }}</span>\n                      <span> {{ classroom.address }}</span>\n                    </div>\n                  </mat-option>\n                }\n              </mat-optgroup>\n              <mat-optgroup label=\"\u5DF2\u8D2D\u6559\u5BA4\">\n                @for (item of bookedClassrooms; track item) {\n                  <mat-option [value]=\"item\">\n                    <div class=\"flex flex-col py-3\">\n                      <span class=\"font-bold\"> {{ item.address }} {{ item.room }}\u5BA4</span>\n                      <span class=\"text-md font-thin\"> {{ item.startAt }} - {{ item.endAt }}</span>\n                    </div>\n                  </mat-option>\n                }\n              </mat-optgroup>\n            </mat-select>\n          </mat-form-field>\n        }\n      </form>\n    </div>\n    <div>\n      <button mat-flat-button type=\"primary\" (click)=\"update()\">\u4FDD\u5B58</button>\n    </div>\n  }\n</rolatech-course-manage-content>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i3$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$2.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: CourseManageContentComponent, selector: "rolatech-course-manage-content" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-manage-info', standalone: true, imports: [
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        TextFieldModule,
+                        MatSelectModule,
+                        MatOptionModule,
+                        MatButtonModule,
+                        ToolbarComponent,
+                        CourseManageContentComponent,
+                    ], template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u57FA\u672C\u4FE1\u606F\" class=\"hidden sm:block\" divider></rolatech-toolbar>\n  @if (course) {\n    <div class=\"flex flex-col\">\n      <form #courseForm=\"ngForm\" (ngSubmit)=\"update()\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label> \u8BFE\u7A0B\u540D\u79F0 </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"course.name\" name=\"name\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label> \u8BFE\u7A0B\u63CF\u8FF0 </mat-label>\n          <textarea\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"course.description\"\n            name=\"description\"\n            required\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n          ></textarea>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" ngModelGroup=\"categories\" required>\n          <mat-label>\u5206\u7C7B</mat-label>\n          <mat-select\n            multiple\n            name=\"id\"\n            [compareWith]=\"compareFn\"\n            [(ngModel)]=\"course.categories\"\n            #select=\"matSelect\"\n            (selectionChange)=\"onSelectionChange($event)\"\n          >\n            @for (item of categories; track item) {\n              <mat-option [value]=\"item\">\n                {{ item.name }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>\u7C7B\u578B</mat-label>\n          <mat-select name=\"type\" [(ngModel)]=\"course.type\" required>\n            @for (item of courseType; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        @if (course.type && course.type.toString() !== 'ONLINE') {\n          <mat-form-field appearance=\"fill\" ngModelGroup=\"classroom\">\n            <mat-label>\u6559\u5BA4</mat-label>\n            <mat-select\n              name=\"id\"\n              [(ngModel)]=\"course.classroom\"\n              [compareWith]=\"compareClassroom\"\n              (selectionChange)=\"onClassroomSelected($event)\"\n              required\n            >\n              <mat-optgroup label=\"\u81EA\u6709\u6559\u5BA4\">\n                @for (classroom of classrooms; track classroom) {\n                  <mat-option [value]=\"classroom\">\n                    <div class=\"flex gap-3\">\n                      <span>{{ classroom.name }}</span>\n                      <span> {{ classroom.address }}</span>\n                    </div>\n                  </mat-option>\n                }\n              </mat-optgroup>\n              <mat-optgroup label=\"\u5DF2\u8D2D\u6559\u5BA4\">\n                @for (item of bookedClassrooms; track item) {\n                  <mat-option [value]=\"item\">\n                    <div class=\"flex flex-col py-3\">\n                      <span class=\"font-bold\"> {{ item.address }} {{ item.room }}\u5BA4</span>\n                      <span class=\"text-md font-thin\"> {{ item.startAt }} - {{ item.endAt }}</span>\n                    </div>\n                  </mat-option>\n                }\n              </mat-optgroup>\n            </mat-select>\n          </mat-form-field>\n        }\n      </form>\n    </div>\n    <div>\n      <button mat-flat-button type=\"primary\" (click)=\"update()\">\u4FDD\u5B58</button>\n    </div>\n  }\n</rolatech-course-manage-content>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+const SIZE = 10 * 1024 * 1024; // file slice size 10MB
+class CourseManageMediaComponent {
+    constructor() {
+        this.route = inject(ActivatedRoute);
+        this.courseService = inject(CourseService);
+        this.dialog = inject(MatDialog);
+        this.snackBar = inject(MatSnackBar);
+        this.isUploading = false;
+        this.isLoading = false;
+        this.media = [];
+        this.status = CourseStatus;
+        this.courseType = CourseType;
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+    }
+    ngOnInit() {
+        this.find();
+    }
+    find() {
+        this.courseService.get(this.id).subscribe({
+            next: (res) => {
+                this.media = res.data.media || [];
+            },
+        });
+    }
+    onImageClick(i) {
+        const dialogRef = this.dialog.open(ImagePreviewDialogComponent, {
+            maxWidth: '80vw',
+            maxHeight: '80vh',
+            height: '80%',
+            width: '80%',
+            panelClass: 'full-screen-modal',
+            data: {
+                media: this.media,
+                selected: i,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => { });
+    }
+    createFileChunk(file, size = SIZE) {
+        const fileChunkList = [];
+        let cur = 0;
+        while (cur < file.size) {
+            fileChunkList.push({ file: file.slice(cur, cur + size) });
+            cur += size;
+        }
+        return fileChunkList;
+    }
+    onUploadMedia2(event) {
+        const file = event.target.files[0];
+        const reader = new FileReader();
+        reader.onload = (e) => { };
+        const fileChunkList = this.createFileChunk(file);
+        fileChunkList.forEach((item) => { });
+    }
+    onUploadMedia(event) {
+        const file = event.target.files[0];
+        // 5MB * 1024 * 1024 = 5242880
+        // if (file?.size > 5242880) {
+        //   this.snackBar.open('尺寸过大, 请修改后上传');
+        //   this.isUploading = false;
+        //   return;
+        // }
+        if (file) {
+            const reader = new FileReader();
+            const formData = new FormData();
+            formData.append('file', file);
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                const img = new Image();
+                img.onload = () => {
+                    this.media.push({
+                        url: img.src,
+                        alt: 'upload image',
+                        width: img.width,
+                        height: img.height,
+                    });
+                    this.isUploading = true;
+                };
+                img.src = reader.result; // This is the data URL
+            };
+            this.courseService.uploadMedia(this.id, formData).subscribe({
+                next: (res) => {
+                    this.isUploading = false;
+                    const index = findLastIndex(this.media);
+                    // Replace item at index using native splice
+                    this.media.splice(index, 1, res.data);
+                },
+                error: (e) => {
+                    this.isUploading = false;
+                    this.snackBar.open('上传失败: ' + e.message);
+                },
+            });
+            reader.onerror = (error) => {
+                this.isUploading = false;
+            };
+        }
+    }
+    onMediaDelete(item) {
+        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+            width: '400px',
+            data: {
+                title: '删除图片',
+                message: '确定删除这张课程图片吗?',
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.courseService.deleteMedia(this.id, item.id).subscribe({
+                    next: (res) => {
+                        this.media = this.media.filter((m) => m.id !== item.id);
+                        this.snackBar.open('删除成功');
+                    },
+                    error: (e) => {
+                        this.snackBar.open(e.message);
+                    },
+                });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseManageMediaComponent, isStandalone: true, selector: "rolatech-course-manage-media", ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u56FE\u7247\u4FE1\u606F\" class=\"hidden sm:block\" divider></rolatech-toolbar>\n  <div>\n    <p class=\"text-gray-600\">*\u56FE\u7247\u6587\u4EF6\u5927\u5C0F\u9650\u5236\u57285MB\u4EE5\u4E0B*</p>\n    <rolatech-media-list (upload)=\"onUploadMedia($event)\" [isUploading]=\"isUploading\">\n      @for (item of media; track item; let i = $index) {\n        <rolatech-media-list-item\n          [media]=\"item\"\n          (mediaItemClick)=\"onImageClick(i)\"\n          (deleteMedia)=\"onMediaDelete(item)\"\n        ></rolatech-media-list-item>\n      }\n    </rolatech-media-list>\n  </div>\n</rolatech-course-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: MediaListComponent, selector: "rolatech-media-list", inputs: ["isUploading", "media", "showAdd"], outputs: ["mediaItemClick", "upload"] }, { kind: "component", type: MediaListItemComponent, selector: "rolatech-media-list-item", inputs: ["media", "uploadProgress"], outputs: ["mediaItemClick", "deleteMedia"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: CourseManageContentComponent, selector: "rolatech-course-manage-content" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageMediaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-manage-media', standalone: true, imports: [MediaListComponent, MediaListItemComponent, ToolbarComponent, CourseManageContentComponent], template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u56FE\u7247\u4FE1\u606F\" class=\"hidden sm:block\" divider></rolatech-toolbar>\n  <div>\n    <p class=\"text-gray-600\">*\u56FE\u7247\u6587\u4EF6\u5927\u5C0F\u9650\u5236\u57285MB\u4EE5\u4E0B*</p>\n    <rolatech-media-list (upload)=\"onUploadMedia($event)\" [isUploading]=\"isUploading\">\n      @for (item of media; track item; let i = $index) {\n        <rolatech-media-list-item\n          [media]=\"item\"\n          (mediaItemClick)=\"onImageClick(i)\"\n          (deleteMedia)=\"onMediaDelete(item)\"\n        ></rolatech-media-list-item>\n      }\n    </rolatech-media-list>\n  </div>\n</rolatech-course-manage-content>\n" }]
+        }], ctorParameters: () => [] });
+
+class CourseManageSectionComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.courseService = inject(CourseService);
+        this.sections = [];
+        this.hasUnsaved = false;
+        this.editId = '';
+        this.lectureEditId = '';
+        this.chunkSize = 5 * 1024 * 1024; // 切片大小
+        this.fileIndex = 0; // 当前正在被遍历的文件下标
+    }
+    ngOnInit() {
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+        this.find();
+    }
+    find() {
+        this.courseService.getCourseSection(this.id).subscribe({
+            next: (res) => {
+                if (res.data) {
+                    this.sections = res.data;
+                }
+            },
+        });
+    }
+    addSection() {
+        const section = {
+            title: '',
+            description: '',
+        };
+        this.courseService.addCourseSection(this.id, section).subscribe({
+            next: (res) => {
+                this.sections.push(res.data);
+                this.editId = res.data.id;
+            },
+        });
+        this.hasUnsaved = false;
+    }
+    onCancel(event) {
+        this.sections.pop();
+        this.hasUnsaved = false;
+    }
+    onSectionSave(event) {
+        const { id } = event;
+        this.courseService.updateCourseSection(id, event).subscribe({
+            next: (res) => {
+                this.hasUnsaved = false;
+                this.snackBarService.open('保存成功');
+            },
+        });
+        this.hasUnsaved = false;
+    }
+    onSectionEdit(event) {
+        this.editId = event.id;
+        // this.editIndex = this.sections.find((item: any) => item.id === event.id);
+    }
+    onSectionDelete(event) {
+        const { id } = event;
+        const options = {
+            title: '确认删除吗',
+            message: '删除这个章节吗?',
+            cancelText: '取消',
+            confirmText: '确认',
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe({
+            next: (res) => {
+                if (res) {
+                    const data = {
+                        name: res,
+                    };
+                    this.courseService.deleteCourseSection(id).subscribe({
+                        next: (res) => {
+                            this.sections.pop();
+                            this.hasUnsaved = false;
+                            this.snackBarService.open(res.data);
+                        },
+                        error: (error) => {
+                            this.snackBarService.open(error.message);
+                        },
+                    });
+                }
+            },
+        });
+    }
+    addLecture(section) {
+        const lecture = {
+            title: '',
+            type: 'VIDEO',
+        };
+        this.courseService.addLecture(section.id, lecture).subscribe({
+            next: (res) => {
+                this.lectureEditId = res.data.id;
+                if (section.lectures) {
+                    section.lectures.push(res.data);
+                }
+                else {
+                    const lectures = [];
+                    lectures.push(res.data);
+                    section.lectures = lectures;
+                }
+            },
+        });
+    }
+    onAddLecture(event) { }
+    onLectureSave(lecture) {
+        this.courseService.updateLecture(lecture.id, lecture).subscribe({
+            next: (res) => {
+                this.snackBarService.open('保存成功');
+            },
+        });
+    }
+    onLectureEdit(lecture) { }
+    onMediaEdit(lecture, video) {
+        const { id } = lecture;
+        const options = {
+            title: lecture.title,
+            cancelText: '取消',
+            confirmText: '保存',
+            data: lecture,
+            width: '80vw',
+            height: '100%',
+            component: CourseSectionLectureVideoDialogComponent,
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe({
+            next: (res) => {
+                if (res) {
+                    // this.courseService.deleteLecture(id).subscribe({
+                    //   next: (res) => {},
+                    //   error: (error) => {
+                    //     this.snackBarService.open(error.message);
+                    //   },
+                    // });
+                }
+            },
+        });
+    }
+    onLectureDelete(section, lecture) {
+        const { id } = lecture;
+        const options = {
+            title: '确认删除吗',
+            message: '删除这一小节吗?',
+            cancelText: '取消',
+            confirmText: '确认',
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe({
+            next: (res) => {
+                if (res) {
+                    this.courseService.deleteLecture(id).subscribe({
+                        next: (res) => {
+                            const index = section.lectures.findIndex((item) => item.id === id);
+                            section.lectures.splice(index, 1);
+                            this.hasUnsaved = false;
+                            this.snackBarService.open(res.data);
+                        },
+                        error: (error) => {
+                            this.snackBarService.open(error.message);
+                        },
+                    });
+                }
+            },
+        });
+    }
+    onMediaUploadInit(lecture, event) {
+        const file = event.data.target.files[0];
+        if (!file) {
+            return;
+        }
+        const item = {
+            url: URL.createObjectURL(file),
+        };
+        lecture.item = item;
+        lecture.isUploading = true;
+        lecture.item.progress = 0;
+        const reader = new FileReader();
+        if (reader.readyState === FileReader.EMPTY) {
+            reader.onload = async (e) => {
+                const fileBuffer = e.target.result;
+                crypto.subtle.digest('SHA-256', fileBuffer).then((res) => {
+                    const hashArray = Array.from(new Uint8Array(res));
+                    const hashHex = hashArray.map((byte) => byte.toString(16).padStart(2, '0')).join('');
+                    const data = { hash: hashHex, filename: file.name, fileType: file.type };
+                    this.courseService.uploadVideoInit(lecture.id, data).subscribe({
+                        next: (res) => {
+                            this.uploadPart(lecture, res.data.uploadId, file);
+                        },
+                        error: (e) => { },
+                    });
+                });
+            };
+            reader.onerror = (error) => { };
+            reader.readAsArrayBuffer(file);
+        }
+    }
+    uploadFile(lecture, file, index, uploadId) {
+        const reader = new FileReader();
+        return new Observable((observer) => {
+            reader.readAsArrayBuffer(file);
+            reader.onload = (e) => {
+                const fileBuffer = e.target.result;
+                crypto.subtle.digest('SHA-256', fileBuffer).then((res) => {
+                    const hashArray = Array.from(new Uint8Array(res));
+                    const hashHex = hashArray.map((byte) => byte.toString(16).padStart(2, '0')).join('');
+                    const formData = new FormData();
+                    formData.append('file', file);
+                    formData.append('uploadId', uploadId);
+                    formData.append('number', index + 1);
+                    formData.append('hash', hashHex);
+                    this.courseService.uploadVideoPartsToLecture(lecture.id, formData).subscribe({
+                        next: (res) => {
+                            observer.next(res);
+                            observer.complete();
+                        },
+                        error: (e) => {
+                            this.snackBarService.open('上传失败: ' + e.message);
+                        },
+                    });
+                });
+            };
+            reader.onerror = (error) => {
+                this.snackBarService.open('上传失败: ' + error);
+            };
+        });
+    }
+    uploadPart(lecture, uploadId, file) {
+        let uploadedCount = 0;
+        const fileChunkList = this.createFileChunk(file);
+        const numberOfChunks = fileChunkList.length;
+        from(fileChunkList)
+            .pipe(concatMap((val, index) => this.uploadFile(lecture, val.file, index, uploadId)), take(numberOfChunks))
+            .subscribe((res) => {
+            uploadedCount++;
+            const p = ((uploadedCount / numberOfChunks) * 100).toFixed(0);
+            lecture.item.progress = parseFloat(p);
+            if (uploadedCount === numberOfChunks) {
+                console.log('done');
+                this.completePartUpload(lecture, { uploadId });
+            }
+        });
+    }
+    completePartUpload(lecture, data) {
+        data.duration = lecture.item.duration;
+        this.courseService.completePartUpload(lecture.id, data).subscribe({
+            next: (res) => {
+                lecture.isUploading = false;
+                lecture.item.id = res.data.id;
+            },
+            error: (e) => {
+                this.snackBarService.open('上传失败: ' + e.message);
+            },
+        });
+    }
+    onMediaUpload(lecture, event) {
+        const lectureId = event.id;
+        const file = event.data.target.files[0];
+        if (!file) {
+            return;
+        }
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => {
+            const formData = new FormData();
+            formData.append('file', file);
+            this.courseService.uploadVideoToLecture(lectureId, formData).subscribe({
+                next: (res) => {
+                    lecture.isUploading = false;
+                    lecture.item = res.data;
+                },
+                error: (e) => {
+                    lecture.isUploading = false;
+                    this.snackBarService.open('上传失败: ' + e.message);
+                },
+            });
+        };
+        reader.onerror = (error) => { };
+    }
+    onMediaDelete(lecture, event) {
+        // lecture.item = null;
+        const { id } = event;
+        const options = {
+            title: '确认删除吗',
+            message: '删除这个视频吗?',
+            cancelText: '取消',
+            confirmText: '确认',
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe({
+            next: (res) => {
+                if (res) {
+                    this.courseService.deleteLectureVideo(id).subscribe({
+                        next: (res) => {
+                            lecture.item = null;
+                            this.snackBarService.open(res.data);
+                        },
+                        error: (error) => {
+                            this.snackBarService.open(error.message);
+                        },
+                    });
+                }
+            },
+        });
+    }
+    createFileChunk(file, size = this.chunkSize) {
+        const fileChunkList = [];
+        let count = 0;
+        while (count < file.size) {
+            fileChunkList.push({
+                file: file.slice(count, count + size),
+            });
+            count += size;
+        }
+        return fileChunkList;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseManageSectionComponent, isStandalone: true, selector: "rolatech-course-manage-section", usesInheritance: true, ngImport: i0, template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u7AE0\u8282\" class=\"hidden sm:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (section of sections; track $index) {\n        <div class=\"bg-gray-100 p-2 mb-2 rounded-lg\">\n          <rolatech-course-section-item\n            [section]=\"section\"\n            (edit)=\"onSectionEdit($event)\"\n            (save)=\"onSectionSave($event)\"\n            (delete)=\"onSectionDelete($event)\"\n            [editId]=\"editId\"\n          >\n            <div class=\"bg-white sm:ml-8 mt-3 rounded-md divide-y divide-dashed\">\n              @if (section?.lectures) {\n                @for (lecture of section.lectures; track $index) {\n                  <div>\n                    <rolatech-course-section-lecture-item\n                      [lecture]=\"lecture\"\n                      (save)=\"onLectureSave($event)\"\n                      (delete)=\"onLectureDelete(section, $event)\"\n                      (edit)=\"onLectureEdit($event)\"\n                      (upload)=\"onMediaUploadInit(lecture, $event)\"\n                      (mediaEdit)=\"onMediaEdit(lecture, $event)\"\n                      (deleteMedia)=\"onMediaDelete(lecture, $event)\"\n                      [editId]=\"lectureEditId\"\n                    ></rolatech-course-section-lecture-item>\n                  </div>\n                }\n              }\n              <div class=\"p-2\">\n                <button mat-flat-button (click)=\"addLecture(section)\">\n                  <mat-icon>add</mat-icon>\n                  <span>\u589E\u52A0\u5C0F\u8282</span>\n                </button>\n              </div>\n            </div>\n          </rolatech-course-section-item>\n        </div>\n      }\n    </div>\n    @if (!hasUnsaved) {\n      <button mat-stroked-button (click)=\"addSection()\" class=\"mt-3\">\n        <mat-icon>add</mat-icon>\n        <span>\u589E\u52A0\u7AE0\u8282</span>\n      </button>\n    }\n  </div>\n</rolatech-course-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: CourseSectionItemComponent, selector: "rolatech-course-section-item", inputs: ["section", "actions", "hasUnsaved", "editId"], outputs: ["sectionChange", "actionsChange", "hasUnsavedChange", "editIdChange", "save", "cancel", "delete", "edit", "addLecture"] }, { kind: "component", type: CourseSectionLectureItemComponent, selector: "rolatech-course-section-lecture-item", inputs: ["progress", "lecture", "actions", "hasUnsaved", "editId"], outputs: ["editIdChange", "save", "cancel", "delete", "edit", "mediaEdit", "thumbnailUpload", "upload", "deleteMedia"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: CourseManageContentComponent, selector: "rolatech-course-manage-content" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-manage-section', standalone: true, imports: [
+                        CourseSectionItemComponent,
+                        CourseSectionLectureItemComponent,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatProgressBarModule,
+                        ToolbarComponent,
+                        CourseManageContentComponent,
+                    ], template: "<rolatech-course-manage-content>\n  <rolatech-toolbar title=\"\u7AE0\u8282\" class=\"hidden sm:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (section of sections; track $index) {\n        <div class=\"bg-gray-100 p-2 mb-2 rounded-lg\">\n          <rolatech-course-section-item\n            [section]=\"section\"\n            (edit)=\"onSectionEdit($event)\"\n            (save)=\"onSectionSave($event)\"\n            (delete)=\"onSectionDelete($event)\"\n            [editId]=\"editId\"\n          >\n            <div class=\"bg-white sm:ml-8 mt-3 rounded-md divide-y divide-dashed\">\n              @if (section?.lectures) {\n                @for (lecture of section.lectures; track $index) {\n                  <div>\n                    <rolatech-course-section-lecture-item\n                      [lecture]=\"lecture\"\n                      (save)=\"onLectureSave($event)\"\n                      (delete)=\"onLectureDelete(section, $event)\"\n                      (edit)=\"onLectureEdit($event)\"\n                      (upload)=\"onMediaUploadInit(lecture, $event)\"\n                      (mediaEdit)=\"onMediaEdit(lecture, $event)\"\n                      (deleteMedia)=\"onMediaDelete(lecture, $event)\"\n                      [editId]=\"lectureEditId\"\n                    ></rolatech-course-section-lecture-item>\n                  </div>\n                }\n              }\n              <div class=\"p-2\">\n                <button mat-flat-button (click)=\"addLecture(section)\">\n                  <mat-icon>add</mat-icon>\n                  <span>\u589E\u52A0\u5C0F\u8282</span>\n                </button>\n              </div>\n            </div>\n          </rolatech-course-section-item>\n        </div>\n      }\n    </div>\n    @if (!hasUnsaved) {\n      <button mat-stroked-button (click)=\"addSection()\" class=\"mt-3\">\n        <mat-icon>add</mat-icon>\n        <span>\u589E\u52A0\u7AE0\u8282</span>\n      </button>\n    }\n  </div>\n</rolatech-course-manage-content>\n" }]
+        }] });
+
+class CourseManageLayoutComponent {
+    constructor() {
+        this.submitted = false;
+        this.accepted = false;
+        this.isDraft = false;
+        this.route = inject(ActivatedRoute);
+        this.courseService = inject(CourseService);
+        this.dialog = inject(MatDialog);
+        this.snackBar = inject(MatSnackBar);
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+    }
+    ngOnInit() {
+        this.get();
+    }
+    get() {
+        this.courseService.get(this.id).subscribe({
+            next: (res) => {
+                this.course = res.data;
+                this.updateStatus();
+            },
+        });
+    }
+    updateStatus() {
+        this.isDraft = this.course.status.toString() === 'DRAFT' || this.course.status.toString() === 'PENDING';
+        this.accepted = this.course.status.toString() === 'ACCEPTED';
+    }
+    submitForReview() {
+        this.courseService.review(this.id).subscribe({
+            next: (res) => {
+                this.snackBar.open('提交成功, 等待审核');
+                this.course.status = CourseStatus['审核中'];
+                this.updateStatus();
+            },
+            error: (error) => {
+                this.snackBar.open(error.message);
+            },
+        });
+    }
+    publish() {
+        this.courseService.publish(this.id).subscribe({
+            next: (res) => {
+                this.snackBar.open('发布成功');
+                this.course.status = CourseStatus['已发布'];
+                this.updateStatus();
+            },
+            error: (error) => {
+                this.snackBar.open(error.message);
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: CourseManageLayoutComponent, isStandalone: true, selector: "rolatech-course-manage-layout", ngImport: i0, template: "<div class=\"flex flex-col md:flex-row m-auto\">\n  <div\n    class=\"min-w-[256px] px-3 flex flex-row md:flex-col md:h-full items-center md:items-start h-16 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n  >\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u8BFE\u7A0B\u4FE1\u606F</div>\n      <a routerLink=\"./info\" routerLinkActive=\"manage-active\" class=\"p-3\">\u57FA\u672C\u4FE1\u606F</a>\n      <a routerLink=\"./media\" routerLinkActive=\"manage-active\" class=\"p-3\">\u56FE\u7247</a>\n      <a routerLink=\"./details\" routerLinkActive=\"manage-active\" class=\"p-3\">\u8BE6\u60C5</a>\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u8BFE\u7A0B\u5185\u5BB9</div>\n      <a routerLink=\"./section\" routerLinkActive=\"manage-active\" class=\"p-3\">\u7AE0\u8282</a>\n      <a routerLink=\"./schedule\" routerLinkActive=\"manage-active\" class=\"p-3\">\u8BFE\u8868</a>\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u5176\u4ED6\u4FE1\u606F</div>\n      <a routerLink=\"./pricing\" routerLinkActive=\"manage-active\" class=\"p-3\">\u4EF7\u683C</a>\n    </div>\n\n    @if (isDraft) {\n      <div class=\"md:mt-6 ml-3 md:ml-2\">\n        <!-- <button mat-stroked-button (click)=\"publish()\">\u9884\u89C8</button> -->\n        <button mat-flat-button (click)=\"submitForReview()\">\u63D0\u4EA4\u5BA1\u6838</button>\n      </div>\n    }\n\n    @if (accepted) {\n      <div class=\"md:mt-6 md:ml-2\">\n        <button mat-flat-button color=\"primary\" (click)=\"publish()\">\u53D1\u5E03\u8BFE\u7A0B</button>\n      </div>\n    }\n  </div>\n  <div class=\"w-full\">\n    <router-outlet></router-outlet>\n  </div>\n</div>\n", styles: [".manage-active{background-color:#0000000d;box-shadow:5px 0 #000 inset;font-weight:600}@media (max-width: 768px){.manage-active{box-shadow:inset 0 -4px #000}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CourseManageLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-course-manage-layout', standalone: true, imports: [RouterLink, RouterLinkActive, MatButtonModule, RouterOutlet, CourseManageContentComponent], template: "<div class=\"flex flex-col md:flex-row m-auto\">\n  <div\n    class=\"min-w-[256px] px-3 flex flex-row md:flex-col md:h-full items-center md:items-start h-16 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n  >\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u8BFE\u7A0B\u4FE1\u606F</div>\n      <a routerLink=\"./info\" routerLinkActive=\"manage-active\" class=\"p-3\">\u57FA\u672C\u4FE1\u606F</a>\n      <a routerLink=\"./media\" routerLinkActive=\"manage-active\" class=\"p-3\">\u56FE\u7247</a>\n      <a routerLink=\"./details\" routerLinkActive=\"manage-active\" class=\"p-3\">\u8BE6\u60C5</a>\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u8BFE\u7A0B\u5185\u5BB9</div>\n      <a routerLink=\"./section\" routerLinkActive=\"manage-active\" class=\"p-3\">\u7AE0\u8282</a>\n      <a routerLink=\"./schedule\" routerLinkActive=\"manage-active\" class=\"p-3\">\u8BFE\u8868</a>\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u5176\u4ED6\u4FE1\u606F</div>\n      <a routerLink=\"./pricing\" routerLinkActive=\"manage-active\" class=\"p-3\">\u4EF7\u683C</a>\n    </div>\n\n    @if (isDraft) {\n      <div class=\"md:mt-6 ml-3 md:ml-2\">\n        <!-- <button mat-stroked-button (click)=\"publish()\">\u9884\u89C8</button> -->\n        <button mat-flat-button (click)=\"submitForReview()\">\u63D0\u4EA4\u5BA1\u6838</button>\n      </div>\n    }\n\n    @if (accepted) {\n      <div class=\"md:mt-6 md:ml-2\">\n        <button mat-flat-button color=\"primary\" (click)=\"publish()\">\u53D1\u5E03\u8BFE\u7A0B</button>\n      </div>\n    }\n  </div>\n  <div class=\"w-full\">\n    <router-outlet></router-outlet>\n  </div>\n</div>\n", styles: [".manage-active{background-color:#0000000d;box-shadow:5px 0 #000 inset;font-weight:600}@media (max-width: 768px){.manage-active{box-shadow:inset 0 -4px #000}}\n"] }]
+        }], ctorParameters: () => [] });
+
+const courseManageRoutes = [
+    {
+        path: '',
+        component: CourseManageLayoutComponent,
+        children: [
+            {
+                path: 'info',
+                component: CourseManageInfoComponent,
+            },
+            {
+                path: 'media',
+                component: CourseManageMediaComponent,
+            },
+            {
+                path: 'details',
+                component: CourseManageDetailsComponent,
+            },
+            {
+                path: 'pricing',
+                component: CourseManagePricingComponent,
+            },
+            {
+                path: 'schedule',
+                component: CourseManageScheduleComponent,
+            },
+            {
+                path: 'section',
+                component: CourseManageSectionComponent,
+            },
+        ],
+    },
+];
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CourseMediaOwnerRendererComponent as A, CourseSectionLectureVideoDialogComponent as B, CourseService as C, ScheduleItemComponent as D, DetailItemComponent as E, courseItem_component as F, PricingItemComponent as P, ScheduleDate as S, CategoryService as a, CourseStatus as b, courseRoutes as c, CourseRequestStatus as d, CourseType as e, CourseReviewStatus as f, CourseSectionLectureContentType as g, CoursePreviewComponent as h, CourseInfoComponent as i, CourseMediaComponent as j, CoursePricingComponent as k, CourseActionComponent as l, CourseScheduleComponent as m, CourseSectionsComponent as n, CourseSectionItemComponent as o, provideAngulaCourse as p, CourseSectionLectureItemComponent as q, CourseSectionLectureVideoItemComponent as r, CourseItemComponent as s, CoursePricingAddDialogComponent as t, CourseScheduleAddDialogComponent as u, CoursePricingDialogComponent as v, CourseScheduleDialogComponent as w, CourseDetailsDialogComponent as x, CourseEditDialogComponent as y, CourseDetailsComponent as z };
-//# sourceMappingURL=rolatech-angular-course-rolatech-angular-course-D-_W2GtF.mjs.map
+export { CourseDetailsComponent as A, CourseMediaOwnerRendererComponent as B, CourseService as C, CourseSectionLectureVideoDialogComponent as D, ScheduleItemComponent as E, DetailItemComponent as F, courseItem_component as G, PricingItemComponent as P, ScheduleDate as S, CategoryService as a, courseManageRoutes as b, courseRoutes as c, CourseStatus as d, CourseRequestStatus as e, CourseType as f, CourseReviewStatus as g, CourseSectionLectureContentType as h, CoursePreviewComponent as i, CourseInfoComponent as j, CourseMediaComponent as k, CoursePricingComponent as l, CourseActionComponent as m, CourseScheduleComponent as n, CourseSectionsComponent as o, provideAngulaCourse as p, CourseSectionItemComponent as q, CourseSectionLectureItemComponent as r, CourseSectionLectureVideoItemComponent as s, CourseItemComponent as t, CoursePricingAddDialogComponent as u, CourseScheduleAddDialogComponent as v, CoursePricingDialogComponent as w, CourseScheduleDialogComponent as x, CourseDetailsDialogComponent as y, CourseEditDialogComponent as z };
+//# sourceMappingURL=rolatech-angular-course-rolatech-angular-course-DhmJ0teX.mjs.map