{"version":3,"file":"app-41373ea2.f584a1446b2fc034d810.bundle.js","mappings":"AAGA","sources":["webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-page-editor/content-editor-page-editor.html","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-pages-sidebar/content-editor-pages-sidebar.html","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-pages/content-editor-pages.html","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-sidebar-right/content-editor-sidebar-block-clipboard/content-editor-sidebar-block-clipboard.html","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-sidebar-right/content-editor-sidebar-block-select/content-editor-sidebar-block-select.html","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-sidebar-right/content-editor-sidebar-blocks/content-editor-sidebar-blocks.html","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-sidebar-right/content-editor-sidebar-right.html","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-sidebar-right/content-editor-sidebar-templates/content-editor-sidebar-templates.html","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-slide-selection/content-editor-slide-selection.html","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-template-preview/content-editor-template-preview.html","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-template-preview/template-preview-layout-container/template-preview-layout-container.html","webpack://lernplattform-admin-frontend/./src/resources/elements/course-and-group-list-item/course-and-group-list-item.html","webpack://lernplattform-admin-frontend/./src/resources/elements/course-and-group-select/course-and-group-select.html","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-page-editor/content-editor-page-editor.ts","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-page-editor/index.ts","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-pages-sidebar/content-editor-pages-sidebar.ts","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-pages/content-editor-pages.ts","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-sidebar-right/content-editor-sidebar-block-clipboard/content-editor-sidebar-block-clipboard.ts","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-sidebar-right/content-editor-sidebar-block-select/content-editor-sidebar-block-select.ts","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-sidebar-right/content-editor-sidebar-blocks/content-editor-sidebar-blocks.ts","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-sidebar-right/content-editor-sidebar-right.ts","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-sidebar-right/content-editor-sidebar-templates/content-editor-sidebar-templates.ts","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-sidebar-right/index.ts","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-slide-selection/content-editor-slide-selection.ts","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-slide-selection/index.ts","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-template-preview/content-editor-template-preview.ts","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-template-preview/index.ts","webpack://lernplattform-admin-frontend/./src/resources/elements/content-editor-template-preview/template-preview-layout-container/template-preview-layout-container.ts","webpack://lernplattform-admin-frontend/./src/resources/elements/course-and-group-list-item/course-and-group-list-item.ts","webpack://lernplattform-admin-frontend/./src/resources/elements/course-and-group-select/course-and-group-select.ts"],"sourcesContent":["// Module\nvar code = \"\";\n// Exports\nexport default code;","// Module\nvar code = \"\";\n// Exports\nexport default code;","// Module\nvar code = \"\";\n// Exports\nexport default code;","// Module\nvar code = \" \";\n// Exports\nexport default code;","// Module\nvar code = \" \";\n// Exports\nexport default code;","// Module\nvar code = \"\";\n// Exports\nexport default code;","// Module\nvar code = \" \";\n// Exports\nexport default code;","// Module\nvar code = \" \";\n// Exports\nexport default code;","// Module\nvar code = \" \";\n// Exports\nexport default code;","// Module\nvar code = \"\";\n// Exports\nexport default code;","// Module\nvar code = \" \";\n// Exports\nexport default code;","// Module\nvar code = \"\";\n// Exports\nexport default code;","// Module\nvar code = \" \";\n// Exports\nexport default code;","import { autoinject, ObserverLocator, Parser } from 'aurelia-framework';\nimport { I18N } from 'aurelia-i18n';\nimport { selectState, SelectStateObservableComponent } from 'common/aurelia-decorators/select-state';\nimport { StoreService } from 'common/aurelia-services/StoreService';\nimport { SubscriptionManager, SubscriptionManagerService } from 'common/aurelia-services/SubscriptionManagerService';\nimport { ContentEditingInsertModeSelector } from 'common/constants/content.editing.constants';\nimport { CONTENT_EDITOR_COURSE_CONTEXT } from 'common/constants/content.editor.constants';\nimport { ContentElementType, NonBlockElementType } from 'common/dto/content-editor/content.editor.types';\nimport { BlockType } from 'common/dto/course/content/course.types';\nimport * as ContentContextMutations from 'common/store/mutations/content.context.mutations';\nimport * as CourseContextMutations from 'common/store/mutations/course.context.mutations';\nimport {\n courseIdSelectorCreator,\n isIasSelectorCreator,\n isPageEmptySelectorCreator,\n navigationInfoSelectorCreator,\n pageIdSelectorCreator,\n} from 'common/store/selectors/course.context.selectors';\nimport { ICourseNavigationInfo } from 'common/store/store.interface';\nimport { ContentEditorApiService } from '../../../services/api/ContentEditorApiService';\nimport { ContentEditorService } from '../../../services/ContentEditorService';\nimport { CustomDialogService } from '../../../services/CustomDialogService';\nimport {\n DND_EMPTY_PAGE_ID,\n DND_LOWER_WHITESPACE_ID,\n DndActivityEventData,\n DndContext,\n DndDropEventData,\n DndDropzoneIdentifier,\n DndManager,\n DndManagerService,\n DndPayloadUniversal,\n DndSubContext,\n IDndDropzoneConfig,\n} from '../../../services/DndManagerService';\nimport * as ClipboardMutations from '../../../store/clipboard.mutations';\nimport * as ContentEditorMutations from '../../../store/content.editor.mutations';\nimport { IState } from '../../../store/state';\nimport { BlockUtils } from '../../../utils/BlockUtils';\nimport { RichTextEditorToolbar } from '../rich-text-editor/rich-text-editor-toolbar/rich-text-editor-toolbar';\nimport { UceComposableLayoutContainer } from '../uce-composable-layout-container/uce-composable-layout-container';\nimport { UceCourseLearnPageHeader } from '../uce-course-learn-page-header/uce-course-learn-page-header';\nimport { InspectorMode } from './../../../store/state';\nimport { IContentEditorBlockEditorBlock } from './../../dialogs/content-editor-block-editor-dialog/content-editor-block-editor-dialog';\n\n\n@autoinject()\nexport class ContentEditorPageEditor extends SelectStateObservableComponent {\n private layoutContainerViewModel = UceComposableLayoutContainer;\n private headerViewModel = UceCourseLearnPageHeader;\n\n private subscriptionManager: SubscriptionManager;\n private domElement: HTMLElement;\n private inspectorMode: InspectorMode | null = null;\n\n public contextIdentifier = CONTENT_EDITOR_COURSE_CONTEXT;\n @selectState(ContentEditorPageEditor, pageIdSelectorCreator, ['contextIdentifier']) private pageId?: number | null = null;\n @selectState(ContentEditorPageEditor, navigationInfoSelectorCreator, ['contextIdentifier']) private navigationInfo?: ICourseNavigationInfo | null;\n @selectState(ContentEditorPageEditor, isPageEmptySelectorCreator, ['contextIdentifier']) private isPageEmpty?: boolean;\n @selectState(ContentEditorPageEditor, isIasSelectorCreator, ['contextIdentifier']) private isIas?: boolean;\n @selectState(ContentEditorPageEditor, courseIdSelectorCreator, ['contextIdentifier']) private courseId?: number | null;\n\n private dndTemplateActive = false;\n private dndContext: DndContext = DndContext.ContentEditorLayout;\n private dndManager: DndManager | null = null;\n private dndActive = false;\n private dndEmptyPageTargeted = false;\n private dndEmptyPageIdentifier: DndDropzoneIdentifier = {\n superId: DND_EMPTY_PAGE_ID,\n subId: DND_EMPTY_PAGE_ID,\n };\n private dndLowerWhitespaceIdentifier: DndDropzoneIdentifier = {\n superId: DND_LOWER_WHITESPACE_ID,\n subId: DND_LOWER_WHITESPACE_ID,\n };\n private firstDropzoneConfig: IDndDropzoneConfig = {\n identifier: this.dndEmptyPageIdentifier,\n insertModeSelector: ContentEditingInsertModeSelector.Plain,\n subContext: DndSubContext.Content,\n };\n private lastDropzoneConfig: IDndDropzoneConfig = {\n identifier: this.dndLowerWhitespaceIdentifier,\n insertModeSelector: ContentEditingInsertModeSelector.Sequential,\n subContext: DndSubContext.Content,\n };\n\n constructor(\n element: Element,\n subscriptionManagerService: SubscriptionManagerService,\n private storeService: StoreService,\n private dndManagerService: DndManagerService,\n private customDialogService: CustomDialogService,\n private contentEditorApi: ContentEditorApiService,\n private contentEditorService: ContentEditorService,\n parser: Parser,\n observerLocator: ObserverLocator,\n private i18n: I18N,\n ) {\n super(parser, observerLocator);\n this.domElement = element as HTMLElement;\n this.subscriptionManager = subscriptionManagerService.createSubscriptionManager();\n }\n\n protected attached(): void {\n this.storeService.subscribeToDetailedChanges(this, [\n state => state.contentEditor.dragAndDrop.active,\n ], (_state, active) => {\n this.dndActive = active;\n if(!this.dndActive) {\n this.dndEmptyPageTargeted = false;\n }\n });\n\n this.dndManager = this.dndManagerService.getDndManager(this.dndContext);\n this.dndManager.subscribeDrop(this, this.dndOnDropHandler.bind(this), [this.dndEmptyPageIdentifier]);\n this.dndManager.subscribePayloadChanged(this, this.dndPayloadChangedHandler.bind(this));\n this.dndManager.subscribeToDragActivity(\n this,\n this.dndDragActivityOnLowerWhitespaceHandler.bind(this),\n [this.dndLowerWhitespaceIdentifier],\n );\n this.dndManager.subscribeToDragActivity(\n this,\n this.dndDragActivityOnEmptyPageHandler.bind(this),\n [this.dndEmptyPageIdentifier],\n );\n\n this.storeService.subscribeToDetailedChanges(this, [\n state => state.contentEditor.inspector.mode,\n ], (_state, inspectorMode) => {\n this.inspectorMode = inspectorMode;\n });\n }\n\n protected detached(): void {\n this.storeService.disposeAllSubscriptions(this);\n this.subscriptionManager.disposeSubscriptions();\n this.dndManager?.disposeSubscriptions(this);\n }\n\n private dndPayloadChangedHandler(payload: DndPayloadUniversal): void {\n this.dndTemplateActive = payload != null && payload.source === DndSubContext.Template;\n }\n\n private async dndOnDropHandler(dropInfo: DndDropEventData): Promise {\n // stop dnd before BE-API activity\n this.stopDnd();\n if(this.pageId == null\n || this.contextIdentifier == null\n || dropInfo.dndPayload == null\n || dropInfo.dropTarget.subContext !== DndSubContext.Content) return;\n\n if(dropInfo.dndPayload.source === DndSubContext.Clipboard) {\n if(dropInfo.dndPayload.existingPayloadId == null) return;\n const changes = await this.contentEditorApi.moveElementFromClipboard(\n dropInfo.dndPayload.existingPayloadId,\n {\n insertMode: ContentEditingInsertModeSelector.Plain,\n pageId: this.pageId,\n },\n );\n await this.storeService\n .pipe(ContentContextMutations.applyLayoutChanges, this.contextIdentifier, changes.targetLayoutChanges)\n .pipe(\n ClipboardMutations.applyRemoveChanges,\n changes.clipboardLayoutContainerChanges,\n changes.clipboardCardContentChanges,\n changes.clipboardRemovedBlockId,\n ).pipe(ContentEditorMutations.updateContainerStructure, this.contextIdentifier)\n .dispatch();\n } else if(dropInfo.dndPayload.source === DndSubContext.New) {\n // insert a fresh block\n if(dropInfo.dndPayload.createNewType == null) return;\n\n let createBlockDto: IContentEditorBlockEditorBlock | null = null;\n switch(dropInfo.dndPayload.createNewType) {\n case NonBlockElementType.Card:\n createBlockDto = {\n type: BlockType.EMPTY_CARD,\n text: this.i18n.tr('pages.content-editor.cardTextBlockPlaceholder'),\n };\n break;\n case BlockType.TEXT:\n case BlockType.SPACER:\n createBlockDto = {\n type: dropInfo.dndPayload.createNewType,\n text: '',\n };\n break;\n case NonBlockElementType.AiText:\n createBlockDto = {\n type: BlockType.TEXT,\n text: '',\n };\n break;\n case NonBlockElementType.AiQuiz:\n createBlockDto = await this.customDialogService.showContentEditorBlockEditorDialog({\n contextIdentifier: this.contextIdentifier,\n blockId: null,\n block: {\n type: BlockType.QUESTION,\n nonBlockElementType: dropInfo.dndPayload.createNewType,\n }\n });\n break;\n default:\n createBlockDto = await this.customDialogService.showContentEditorBlockEditorDialog({\n contextIdentifier: this.contextIdentifier,\n blockId: null,\n block: {\n type: dropInfo.dndPayload.createNewType\n }\n });\n break;\n }\n if(createBlockDto == null) return;\n\n const changes = await this.contentEditorApi.addFirstElementOnPage(this.pageId, BlockUtils.convertToCreateUniversalBlock(createBlockDto));\n await this.storeService\n .pipe(ContentContextMutations.applyLayoutChanges, this.contextIdentifier, changes)\n .pipe(ContentEditorMutations.updateContainerStructure, this.contextIdentifier)\n .dispatch();\n\n if(dropInfo.dndPayload.createNewType === NonBlockElementType.AiText) RichTextEditorToolbar.showAiTray();\n await this.contentEditorService.focusNewTextBlock(changes);\n\n } else if(dropInfo.dndPayload.source === DndSubContext.Template) {\n // apply template to page:\n if(dropInfo.dndPayload.existingPayloadId == null || this.courseId == null) return;\n const changes = await this.contentEditorApi.applyTemplateExisting(\n this.courseId,\n this.pageId,\n dropInfo.dndPayload.existingPayloadId,\n );\n await this.storeService\n .pipe(ContentContextMutations.applyLayoutChanges, this.contextIdentifier, changes.layoutChanges)\n .pipe(ContentEditorMutations.updateContainerStructure, this.contextIdentifier)\n .dispatch();\n }\n }\n\n private stopDnd(): void {\n if(this.inspectorMode !== InspectorMode.Container) this.storeService\n .dispatch(ContentEditorMutations.updateContainerStylesState, { showExtraContainerSpace: false });\n\n this.storeService\n .pipe(ContentEditorMutations.updateDragAndDropState, {\n active: false,\n lowerWhitespaceTargeted: false,\n })\n .pipe(ContentEditorMutations.resetContainerHoverState)\n .dispatch();\n }\n\n private dndDragActivityOnEmptyPageHandler(dndInfo: DndActivityEventData): void {\n this.dndEmptyPageTargeted = dndInfo.enterEvent;\n }\n\n private dndDragActivityOnLowerWhitespaceHandler(dndInfo: DndActivityEventData): void {\n const lowerWhitespaceTargeted = dndInfo.enterEvent;\n this.storeService.dispatch(ContentEditorMutations.updateDragAndDropState, { lowerWhitespaceTargeted });\n }\n\n private ensureInspectorEmpty(): void {\n if(this.inspectorMode !== InspectorMode.Inactive) {\n // reset selected layout container but keep inspector open\n this.storeService.dispatch(ContentEditorMutations.updateInspector, null);\n }\n }\n\n private async pageIdChanged(): Promise {\n await this.storeService\n .pipe(ContentEditorMutations.updateContainerStructure, this.contextIdentifier)\n .pipe(ContentEditorMutations.resetContainerHoverState)\n .dispatch();\n }\n\n private async navigateBack(): Promise {\n this.ensureInspectorEmpty();\n await this.storeService.dispatch(CourseContextMutations.navigateBack, this.contextIdentifier);\n }\n\n private async navigateForward(): Promise {\n this.ensureInspectorEmpty();\n await this.storeService.dispatch(CourseContextMutations.navigateForward, this.contextIdentifier);\n }\n}\n","import { PLATFORM } from 'aurelia-pal';\nimport { FrameworkConfiguration } from 'aurelia-framework';\n\nexport function configure(config: FrameworkConfiguration): void {\n config.globalResources(PLATFORM.moduleName('resources/elements/content-editor-page-editor/content-editor-page-editor'));\n}\n","import { autoinject, bindable } from 'aurelia-framework';\nimport { selectState } from 'common/aurelia-decorators/select-state';\nimport { courseIdSelectorCreator, pageIdSelectorCreator } from 'common/store/selectors/course.context.selectors';\nimport { PageTypeFilter } from '../content-editor-pages/content-editor-pages';\n\n@autoinject()\nexport class ContentEditorPagesSidebar {\n @bindable() public contextIdentifier: string | null = null;\n private open = false;\n private searchString = '';\n private searchActive = false;\n private pageTypeOptions = [PageTypeFilter.LearningOnly, PageTypeFilter.All];\n private pageTypeFilter = PageTypeFilter.LearningOnly;\n\n @selectState(ContentEditorPagesSidebar, courseIdSelectorCreator, ['contextIdentifier']) private courseId?: number | null;\n @selectState(ContentEditorPagesSidebar, pageIdSelectorCreator, ['contextIdentifier']) private pageId?: number | null = null;\n\n private toggleOpen(): void {\n this.open = !this.open;\n }\n}\n","import { autoinject, bindable } from 'aurelia-framework';\nimport { I18N } from 'aurelia-i18n';\nimport { StoreService } from 'common/aurelia-services/StoreService';\nimport { ContentEditingInsertModeSelector } from 'common/constants/content.editing.constants';\nimport { IPageEditResponseDto } from 'common/dto/course/management/course.management.interface';\nimport { PageType } from 'common/enum/course.enum';\nimport { ErrorType } from 'common/enum/errortype.enum';\nimport * as CourseContextMutations from 'common/store/mutations/course.context.mutations';\nimport { ArrayUtils } from 'common/utils/ArrayUtils';\nimport { assertNotNullOrUndefined } from 'common/utils/assert';\nimport { DomUtils } from 'common/utils/DomUtils';\nimport { LogUtils } from 'common/utils/LogUtils';\nimport { ContentEditorApiService } from '../../../services/api/ContentEditorApiService';\nimport { CourseContentManagementApiService } from '../../../services/api/CourseContentManagementApiService';\nimport { CourseManagementApiService } from '../../../services/api/CourseManagementApiService';\nimport { CourseCacheService } from '../../../services/CourseCacheService';\nimport { CustomDialogService } from '../../../services/CustomDialogService';\nimport {\n DndActivityEventData,\n DndContext,\n DndDropEventData,\n DndManager,\n DndManagerService,\n DndPayloadUniversal,\n IDndDropzoneConfig\n} from '../../../services/DndManagerService';\nimport { ToastService } from '../../../services/ToastService';\nimport { IState } from '../../../store/state';\nimport { CreatePageEvent, PageSelectedEvent, ToggleCollapseEvent, UpdatePageEvent } from '../page-row/page-row';\nimport { DndInsertModeSequential, DndSubContext } from './../../../services/DndManagerService';\n\n/**\n * The abbreviation DndPac used in course-page and course-row represents: Drag and Drop - Pages and Chapters\n * DndPacFirstTargetDisplayMode is used for the very first drag and drop target above the first content element,\n * all other targets are handled inside page-row elements with a different logic.\n */\nenum DndPacFirstTargetDisplayMode {\n Hidden = 'hidden',\n Allowed = 'allowed',\n Target = 'target',\n}\n\nexport enum DndPacForbiddenLayersMode {\n All = 'all',\n None = 'none',\n Range = 'range',\n}\n\ninterface IDndPacLayerRange {\n from: number;\n to: number;\n}\n\ninterface IDndPacForbiddenLayersSetting {\n mode: DndPacForbiddenLayersMode;\n range: IDndPacLayerRange;\n}\n\n/**\n * IDndPacTargetDisplaySetting is a part of the interface to page-row via binding\n */\nexport interface IDndPacTargetDisplaySetting {\n layer: number;\n isTarget: boolean;\n forbiddenLayers: IDndPacForbiddenLayersSetting;\n}\n\nexport interface IDndPacViewDataCurrentElement {\n payload: DndPayloadUniversal;\n prefix: string;\n title: string;\n parentId: number | null;\n order: number;\n layer: number;\n row: number;\n visible: boolean;\n collapsed: boolean;\n isIntro: boolean;\n isTrainingOnly: boolean;\n rootIsTrainingOnly: boolean;\n hasRequirements: boolean;\n highlighted: boolean;\n active: boolean;\n}\n\nexport interface IDndPacViewDataNeighbourElement {\n id: number;\n layer: number;\n type: PageType;\n}\n\n/**\n * IDndPacViewDataElementData is used for each row in the list of elements representing the course content.\n * The additional information of previous and next is used by each page-row to calculate it's drag and drop\n * - drop-zones and targets within it's limited scope.\n */\nexport interface IDndPacViewDataElementData {\n current: IDndPacViewDataCurrentElement;\n previous: IDndPacViewDataNeighbourElement | null;\n next: IDndPacViewDataNeighbourElement | null;\n}\n\ninterface IDndPacViewDataRow {\n element: IDndPacViewDataElementData;\n targetDisplay: IDndPacTargetDisplaySetting;\n}\n\n/**\n * DndPacViewData collects the majority of information required by the view to do it's job in one type.\n * In the view each page-row is provided the \"maxLayer\" and one array-element of \"rows\" as bindings.\n */\ntype DndPacViewData = {\n maxLayer: number;\n rows: Array;\n};\n\ntype TAddAllChildrenToListConfig = {\n counterIn: number;\n currentLayer: number;\n page: IPage;\n currentPageParentChaptersIds?: Set;\n prefixBase: string;\n rootPage?: IPage;\n};\n\n@autoinject()\nexport class ContentEditorPages {\n /**\n * only available inside content-editor\n */\n @bindable() public contextIdentifier: string | null = null;\n @bindable() public courseId: number | null = null;\n @bindable() public searchString = '';\n @bindable() public searchActive = false;\n @bindable() public typeFilter = PageTypeFilter.LearningOnly;\n @bindable() public pageId: number | null = null;\n\n private INTRO_CHAPTER_PREFIX: string = this.i18N.tr('pages.content-editor.introChapterPrefix');\n private isAttached = false;\n private domElement: HTMLElement;\n\n /**\n * dndActive and onDropActive are used to create a representation of drag-and-drop-active\n * which is used by the draggable view-elements to prevent starting a new drag-and-drop activity\n * while the current one is still active (meaning the async onDrop reaction is still ongoing).\n */\n private dndActive = false;\n private onDropActive = false;\n private pages: IPageEditResponseDto[] = [];\n private viewDataRows: Array = [];\n private viewData: DndPacViewData = { maxLayer: 0, rows: [] };\n private viewDataBuffer: DndPacViewData = { maxLayer: 0, rows: [] };\n private rowElementMinWidth = 5;\n private dndPayload: DndPayloadUniversal | null = null;\n private dndLastEnteredInfo: IDndDropzoneConfig | null = null;\n private firstTargetDisplayMode: DndPacFirstTargetDisplayMode = DndPacFirstTargetDisplayMode.Allowed;\n private firstDropzoneConfig: IDndDropzoneConfig = {\n identifier: {\n superId: 0,\n subId: 0,\n },\n insertModeSelector: ContentEditingInsertModeSelector.Sequential,\n insertModeSequential: DndInsertModeSequential.Before,\n };\n private dndManager: DndManager;\n private dndContext = DndContext.PagesAndChapters;\n\n constructor(\n private storeService: StoreService,\n private contentEditorApi: ContentEditorApiService,\n private courseManagementApiService: CourseManagementApiService,\n private courseContentManagementApiService: CourseContentManagementApiService,\n private dndManagerService: DndManagerService,\n private customDialogService: CustomDialogService,\n private toastService: ToastService,\n private courseCacheService: CourseCacheService,\n private i18N: I18N,\n element: Element,\n ) {\n this.domElement = element as HTMLElement;\n this.dndManager = this.dndManagerService.getDndManager(this.dndContext);\n }\n\n public async refresh(): Promise {\n if(!this.isAttached) return;\n await this.updatePages();\n this.updateViewData();\n }\n\n protected attached(): void {\n this.dndManager.subscribePayloadChanged(this, this.dndPayloadChangedHandler.bind(this));\n this.dndManager.subscribeToDragActivity(this, this.dndDragActivityHandler.bind(this));\n this.dndManager.subscribeDrop(this, this.onDrop.bind(this));\n this.isAttached = true;\n }\n\n protected detached(): void {\n this.dndManager.disposeSubscriptions(this);\n this.isAttached = false;\n }\n\n private async courseIdChanged(): Promise {\n if(!this.courseId) return;\n await this.updatePages();\n this.updateViewData();\n }\n\n private async pageIdChanged(): Promise {\n if(!this.pageId) return;\n this.updateViewData();\n }\n\n private searchActiveChanged(): void {\n if(!this.searchActive) {\n this.refreshFilter();\n }\n }\n\n private searchStringChanged(): void {\n this.refreshFilter();\n }\n\n private typeFilterChanged(): void {\n this.updateViewData();\n this.refreshFilter();\n }\n\n private refreshFilter(): void {\n if(!this.isAttached) return;\n const cleanSearchString: string = this.searchString.trim().toLocaleLowerCase();\n this.viewDataRows = this.viewData.rows.filter(row => (\n (!cleanSearchString || row.element.current.title.toLocaleLowerCase().includes(cleanSearchString))\n && ((!row.element.current.isTrainingOnly && !row.element.current.rootIsTrainingOnly) || this.typeFilter === PageTypeFilter.All))\n );\n }\n\n private handlePageSelectedEvent(event: PageSelectedEvent): void {\n DomUtils.passThroughEvent(this.domElement, event);\n }\n\n private async updatePages(): Promise {\n assertNotNullOrUndefined(this.courseId, 'courseId cannot be null or undefined');\n this.pages = await this.courseManagementApiService.getPages(this.courseId);\n // update content for content-editor\n await this.courseCacheService.ensureCourseInCache(this.courseId);\n }\n\n private updateViewData(): void {\n // preparing a sorted course structure as a tree\n const currentPage = this.pages.find(page => page.id === this.pageId) ?? null;\n\n this.pages.sort((a, b) => a.order - b.order);\n const pagesById = this.pages.reduce((prev, cur) => {\n prev.set(cur.id, { ...cur, children: [] });\n return prev;\n }, new Map());\n\n // keep track of the current page path for highlights/visibility\n const currentPageParentChaptersIds = new Set();\n let currentParent: IPage | undefined;\n const pageTree = Array.from(pagesById.values()).reduce((prev, cur) => {\n const parent = pagesById.get(cur.parentId || 0);\n if(parent) {\n if(currentParent?.parentId === parent?.id || currentPage?.parentId === parent?.id) {\n currentParent = parent;\n currentPageParentChaptersIds.add(currentParent.id);\n }\n parent.children.push(cur);\n } else {\n prev.push(cur);\n }\n return prev;\n }, [] as IPage[]);\n\n // The numbering of intro pages is independent of regular pages as is the numbering of visible pages\n let allPageCounter = 1;\n let learnPageCounter = 1;\n let introPageCounter = 1;\n\n // flattening the course structure tree into an array of rows including all necessary display settings required by page-row\n this.viewDataBuffer = { maxLayer: 0, rows: [] };\n pageTree.forEach(page => {\n let counter = 1;\n let prefixBase = '';\n if(page.isIntro) {\n counter = introPageCounter++;\n prefixBase = this.INTRO_CHAPTER_PREFIX;\n } else {\n counter = allPageCounter++;\n if(this.typeFilter === PageTypeFilter.LearningOnly && !page.isTrainingOnly) {\n counter = learnPageCounter++;\n }\n }\n this.addAllChildrenToList({\n page,\n currentLayer: 0,\n prefixBase,\n counterIn: counter,\n currentPageParentChaptersIds\n });\n });\n // page-rows will create grid-columns for each layer; basic (minimum) content element width is added as nr. of columns (rowElementMinWidth)\n this.viewDataBuffer.maxLayer = this.viewDataBuffer.maxLayer + this.rowElementMinWidth;\n if(this.viewDataBuffer.rows.length > 1) {\n for(const [idx, row] of this.viewDataBuffer.rows.entries()) {\n row.element.current.row = idx;\n if(idx > 0) {\n const previousRowElement = this.viewDataBuffer.rows[idx - 1].element.current;\n assertNotNullOrUndefined(\n previousRowElement.payload?.existingPayloadId,\n 'current row id must be available to config previous row',\n );\n assertNotNullOrUndefined(\n previousRowElement.payload?.existingPayloadType,\n 'current row type must be available to config previous row',\n );\n row.element.previous = {\n id: previousRowElement.payload?.existingPayloadId,\n layer: previousRowElement.layer,\n type: previousRowElement.payload.existingPayloadType,\n };\n }\n if(idx < (this.viewDataBuffer.rows.length - 1)) {\n const nextRowElement = this.viewDataBuffer.rows[idx + 1].element.current;\n assertNotNullOrUndefined(\n nextRowElement.payload?.existingPayloadId,\n 'current row id must be available to config next row',\n );\n assertNotNullOrUndefined(\n nextRowElement.payload?.existingPayloadType,\n 'current row type must be available to config next row',\n );\n row.element.next = {\n id: nextRowElement.payload.existingPayloadId,\n layer: nextRowElement.layer,\n type: nextRowElement.payload.existingPayloadType,\n };\n }\n }\n }\n this.viewData = this.viewDataBuffer;\n this.refreshFilter();\n }\n\n private addAllChildrenToList(config: TAddAllChildrenToListConfig): void {\n let counter = config.counterIn;\n const prefixBase: string = config.prefixBase === '' || config.prefixBase === this.INTRO_CHAPTER_PREFIX ? '' : '.';\n const prefix = config.prefixBase.concat(prefixBase, counter.toString());\n const oldElementCurrent = this.viewData.rows.find(e => e.element.current.payload?.existingPayloadId === config.page.id)?.element.current;\n const hasNewElement = !!this.viewData.rows.length && !oldElementCurrent;\n const isOnCurrentPagePath = !!config.currentPageParentChaptersIds?.has(config.page.id);\n const isAmongCurrentPagePathSiblings = !!(config.page.parentId && config.currentPageParentChaptersIds?.has(config.page.parentId));\n const isCurrentPage = this.pageId === config.page.id;\n const shouldBeVisible = (hasNewElement || !config.currentLayer || isOnCurrentPagePath || isCurrentPage || isAmongCurrentPagePathSiblings);\n\n this.viewDataBuffer.rows.push({\n element: {\n current: {\n payload: {\n source: DndSubContext.Content,\n existingPayloadId: config.page.id,\n // must translate PageType because there are two identically named entities, a type (from course.types) and an enum (from course.enum).\n // it is still preferrable, because then the enum can be used in course-page and course-row for comparisons\n existingPayloadType: config.page.type === 'chapter' ? PageType.Chapter : PageType.Page,\n },\n visible: oldElementCurrent?.visible ?? shouldBeVisible,\n collapsed: (oldElementCurrent?.collapsed ?? !isOnCurrentPagePath) ?? true,\n title: config.page.title,\n highlighted: isOnCurrentPagePath,\n active: isCurrentPage,\n prefix,\n layer: config.currentLayer,\n parentId: config.page.parentId,\n order: config.page.order,\n row: 0,\n isIntro: config.page.isIntro,\n isTrainingOnly: config.page.isTrainingOnly,\n rootIsTrainingOnly: (config.rootPage ?? config.page).isTrainingOnly,\n hasRequirements: !!config.page.pagesToCompleteIds.length\n },\n // previous and next will be set after the list has been created (in loadPages())\n previous: null,\n next: null,\n },\n // majority of targetDisplay settings will be dynamically generated based on drag and drop activity\n // (forbiddenLayers in dndPayloadChangedHandler() and target-state in calcDndDisplaySettings()) -> // TODO: rename????\n targetDisplay: {\n layer: config.currentLayer,\n isTarget: false,\n forbiddenLayers: {\n mode: DndPacForbiddenLayersMode.None,\n range: {\n from: 0,\n to: 0,\n }\n }\n },\n });\n this.viewDataBuffer.maxLayer = Math.max(this.viewDataBuffer.maxLayer, config.currentLayer);\n\n if(config.page.type === PageType.Chapter) {\n counter = 0;\n config.page.children.forEach(p => {\n counter += 1;\n this.addAllChildrenToList({\n page: p as IPage,\n currentLayer: config.currentLayer + 1,\n prefixBase: prefix,\n counterIn: counter,\n rootPage: config.rootPage ?? config.page,\n currentPageParentChaptersIds: config.currentPageParentChaptersIds\n });\n });\n }\n }\n\n private getFirstTargetDisplayModifier(targetDisplayMode: DndPacFirstTargetDisplayMode): string {\n if(targetDisplayMode === DndPacFirstTargetDisplayMode.Target) return 'content-editor-pages__dnd-target--target';\n return targetDisplayMode === DndPacFirstTargetDisplayMode.Allowed\n ? 'content-editor-pages__dnd-target--allowed'\n : 'content-editor-pages__dnd-target--hidden';\n }\n\n private dndPayloadChangedHandler(payload: DndPayloadUniversal): void {\n if(payload) {\n this.dndActive = true;\n\n if(!this.dndPayload) {\n // reset display modes when a fresh drag and drop activity is started\n this.firstTargetDisplayMode = DndPacFirstTargetDisplayMode.Allowed;\n this.viewDataBuffer.rows.forEach(row => {\n this.viewDataBuffer.rows[row.element.current.row].targetDisplay.forbiddenLayers.mode = DndPacForbiddenLayersMode.None;\n });\n }\n }\n this.dndPayload = payload;\n if(payload) {\n this.calcForbiddenDndTargets();\n this.viewData = this.viewDataBuffer;\n this.refreshFilter();\n } else if(!this.onDropActive) this.dndActive = false;\n }\n\n private dndDragActivityHandler(dndInfo: DndActivityEventData): void {\n if(this.dndPayload == null) return;\n if(dndInfo && this.dndLastEnteredInfo === null) this.dndLastEnteredInfo = dndInfo.dropTarget;\n if(dndInfo.enterEvent && this.dndLastEnteredInfo) {\n this.calcCurrentDndTargetView(dndInfo);\n this.dndLastEnteredInfo = this.dndLastEnteredInfo !== dndInfo.dropTarget ? dndInfo.dropTarget : this.dndLastEnteredInfo;\n } else {\n // calculate display setttings when all drop-zone area is left\n if(this.dndLastEnteredInfo && this.dndLastEnteredInfo === dndInfo.dropTarget) {\n this.calcCurrentDndTargetView(dndInfo);\n }\n }\n }\n\n private async onDrop(dropInfo: DndDropEventData): Promise {\n this.onDropActive = true;\n\n if(!dropInfo.dndPayload || !this.courseId || dropInfo.dndPayload.existingPayloadId == null) {\n this.dndActive = false;\n this.onDropActive = false;\n return;\n }\n const pageToMove = await this.courseManagementApiService.getPage(this.courseId, dropInfo.dndPayload.existingPayloadId);\n const payloadRowIndex = this.viewData.rows.findIndex(row => row.element.current.payload?.existingPayloadId === dropInfo.dndPayload?.existingPayloadId);\n const insertBefore = dropInfo.dropTarget.insertModeSequential === DndInsertModeSequential.Before;\n const { superId: eventSourceRow } = dropInfo.dropTarget.identifier;\n // inserting at the very beginning of the course content\n if(insertBefore && eventSourceRow === 0) {\n // cannot move first element before first element\n if(payloadRowIndex === 0) {\n this.dndActive = false;\n this.onDropActive = false;\n return;\n }\n pageToMove.order = 0;\n pageToMove.parentId = null;\n } else {\n const targetRowIndex = insertBefore ? eventSourceRow - 1 : eventSourceRow;\n const targetRow = this.viewData.rows[targetRowIndex].element.current;\n const targetRowForbiddenLayers = this.viewData.rows[targetRowIndex].targetDisplay.forbiddenLayers;\n const payloadRow = this.viewData.rows[payloadRowIndex].element.current;\n const { subId: targetLayer } = dropInfo.dropTarget.identifier;\n /**\n * check if current drop target is actually forbidden and return if it is.\n * the reason why possibly forbidden target-drop events are not prevented at their origin in\n * page-rows is that the drop event can come from a neighbouring row. thus quite a bit of\n * event/binding \"traffic\" would be required to achieve this. in order to minimize this load\n * and because all information is already available in this class it is checked here:\n */\n if(targetRowForbiddenLayers.mode === DndPacForbiddenLayersMode.All\n || (targetRowForbiddenLayers.mode === DndPacForbiddenLayersMode.Range\n && (targetLayer >= targetRowForbiddenLayers.range.from\n && targetLayer <= targetRowForbiddenLayers.range.to))) {\n this.dndActive = false;\n this.onDropActive = false;\n return;\n }\n if(targetRow.payload?.existingPayloadId == null) return;\n let pageToCompare = await this.courseManagementApiService.getPage(this.courseId, targetRow.payload?.existingPayloadId);\n if(targetLayer === targetRow.layer) {\n // when moving an element backwards, after it's current order, within it's siblings list\n // the resulting \"hole\" in the order needs to be compensated:\n const orderCompensation = payloadRowIndex < targetRowIndex\n && payloadRow.layer === targetLayer\n && payloadRow.parentId === targetRow.parentId;\n pageToMove.order = pageToCompare.order + (orderCompensation ? 0 : 1);\n pageToMove.parentId = pageToCompare.parentId;\n } else if(targetLayer === targetRow.layer + 1) {\n // move to become the first child of a chapter\n pageToMove.order = 0;\n pageToMove.parentId = pageToCompare.id;\n } else {\n // for inserting at A: visually - at the end of a chapter in the page-row list AND B: closer to the root layer\n // a search backwards to the previous occurrence of target layer is required to extract proper order and parentId:\n const searchInRows: Array = this.viewData.rows.slice(0, targetRowIndex).reverse();\n const index = searchInRows.findIndex(row => row.element.current.layer === targetLayer);\n if(index > -1) {\n const currentRow = searchInRows[index].element.current;\n if(currentRow.payload?.existingPayloadId == null) return;\n pageToCompare = await this.courseManagementApiService.getPage(this.courseId, currentRow.payload?.existingPayloadId);\n pageToMove.order = pageToCompare.order + 1;\n pageToMove.parentId = pageToCompare.parentId;\n }\n }\n }\n try {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { id, importId, ...pageWithoutId } = pageToMove;\n await this.contentEditorApi.updatePage(id, pageWithoutId);\n this.toastService.genericUpdateSuccess('pages.content-editor.addPageOrChapter');\n await this.updatePages();\n this.updateViewData();\n } catch(e) {\n LogUtils.exception(e);\n this.toastService.genericUpdateError('pages.content-editor.addPageOrChapter', e);\n throw e;\n }\n this.dndActive = false;\n this.onDropActive = false;\n }\n\n /**\n * providing only \"from\" will result in a rage from X to X, meaning one specific layer is forbidden.\n */\n private setForbiddenLayersRange(from: number, to = from): IDndPacForbiddenLayersSetting {\n return {\n mode: DndPacForbiddenLayersMode.Range,\n range: {\n from,\n to,\n }\n };\n }\n\n private handleChapterCollapseEvent(event: ToggleCollapseEvent): void {\n const { parentId, collapsed } = event.detail;\n for(const row of this.getAllSubRows(parentId)) {\n // toggle visibility of all children\n row.element.current.visible = !collapsed;\n // toggle collapsed of parent\n if(row.element.current.payload?.existingPayloadType === PageType.Chapter) {\n row.element.current.collapsed = collapsed;\n }\n }\n }\n\n private getAllSubRows(parentId: number): IDndPacViewDataRow[] {\n const rows: Array = [];\n const subRows = ArrayUtils.immutableSort(\n this.viewDataRows.filter(p => p.element.current.parentId === parentId),\n (a, b) => a.element.current.order - b.element.current.order\n );\n\n for(const row of subRows) {\n if(row.element.current.payload?.existingPayloadId && row.element.current.payload.existingPayloadType === PageType.Chapter) {\n rows.push(...this.getAllSubRows(row.element.current.payload.existingPayloadId));\n }\n rows.push(row);\n }\n return rows;\n }\n\n private handleCreatePageEvent(event: CreatePageEvent): void {\n const { parentId, order } = event.detail;\n this.createPage(parentId, order);\n }\n\n private async handleUpdatePageEvent(event: UpdatePageEvent): Promise {\n const { pageId, update, onError } = event.detail;\n try {\n await this.contentEditorApi.updatePage(pageId, update);\n await this.updatePages();\n this.updateViewData();\n } catch(e) {\n LogUtils.exception(e);\n onError?.();\n }\n }\n\n private async createPage(parentId: number | null, order: number): Promise {\n const newPage = await this.customDialogService.showAddPageDialog({ parentId, order });\n if(!newPage) return;\n\n try {\n assertNotNullOrUndefined(this.courseId, 'courseId cannot be null or undefined');\n await this.courseContentManagementApiService.createPage(this.courseId, newPage);\n this.toastService.success(`pages.content-editor.${newPage.type}AddSuccess`);\n await this.updatePages();\n this.updateViewData();\n } catch(error) {\n if(error.message === ErrorType.PARENT_PAGE_MUST_BE_CHAPTER) {\n this.toastService.error(`pages.content-editor.${newPage.type}AddErrorParentNotChapter`);\n } else {\n LogUtils.exception(error);\n this.toastService.error(`pages.content-editor.${newPage.type}AddError`);\n }\n }\n }\n\n private async deletePage(pageId: number): Promise {\n await this.contentEditorApi.deletePage(pageId);\n await this.updatePages();\n this.updateViewData();\n\n // if the current page was deleted jump to the root page\n if(this.contextIdentifier != null) {\n const state = await this.storeService.getState();\n const contextState = state.contentContexts[this.contextIdentifier];\n if(contextState?.type === 'course' && contextState.state.pageId === pageId) {\n await this.storeService.dispatch(CourseContextMutations.resetToRootPageId, this.contextIdentifier);\n }\n }\n }\n\n /**\n * calculate forbidden drag and drop target layers, for a fresh payload\n */\n private calcForbiddenDndTargets(): void {\n const payloadRowIndex = this.viewData.rows.findIndex(row => row.element.current.payload?.existingPayloadId === this.dndPayload?.existingPayloadId);\n const payloadLayer = this.viewData.rows[payloadRowIndex].element.current.layer;\n if(payloadRowIndex === 0) {\n this.firstTargetDisplayMode = DndPacFirstTargetDisplayMode.Hidden;\n } else {\n this.firstTargetDisplayMode = DndPacFirstTargetDisplayMode.Allowed;\n\n // drag and drop target above payload is forbidden only on the same (or lesser) layer as the payload\n this.viewDataBuffer.rows[payloadRowIndex - 1].targetDisplay.forbiddenLayers = this.setForbiddenLayersRange(payloadLayer);\n this.viewDataBuffer.rows[payloadRowIndex].targetDisplay.forbiddenLayers = this.setForbiddenLayersRange(payloadLayer, this.viewData.maxLayer);\n\n // in case an element follows children of its previous sibling, this previous sibling and its first child must forbid\n // drag and drop to same layer as payload. begin by finding this previous sibling:\n if(payloadLayer < this.viewData.rows[payloadRowIndex - 1].element.current.layer) {\n const searchInRows: Array = this.viewData.rows.slice(0, payloadRowIndex - 1).reverse();\n const previousSiblingIndexHelper = searchInRows.findIndex(row => row.element.current.layer === payloadLayer);\n const previousSiblingIndex = this.viewData.rows.findIndex(\n row => row.element.current.payload?.existingPayloadId === searchInRows[previousSiblingIndexHelper].element.current.payload?.existingPayloadId\n );\n this.viewDataBuffer.rows[previousSiblingIndex].targetDisplay.forbiddenLayers = this.setForbiddenLayersRange(0, payloadLayer);\n this.viewDataBuffer.rows[previousSiblingIndex + 1].targetDisplay.forbiddenLayers = this.setForbiddenLayersRange(0, payloadLayer);\n }\n }\n // drag and drop targets are forbidden for all elements within a chapter (cannot move a parent into itself)\n if(payloadRowIndex < this.viewData.rows.length - 1 && this.viewData.rows[payloadRowIndex + 1].element.current.layer > payloadLayer) {\n let helperIndex = this.viewData.rows.slice(payloadRowIndex + 1).findIndex(row => row.element.current.layer <= payloadLayer);\n helperIndex = helperIndex === -1\n ? this.viewData.rows.length\n : Math.min(payloadRowIndex + helperIndex + 1, this.viewData.rows.length);\n\n for(let i = payloadRowIndex; i < helperIndex; i++) this.viewDataBuffer.rows[i].targetDisplay.forbiddenLayers.mode = DndPacForbiddenLayersMode.All;\n this.viewDataBuffer.rows[helperIndex - 1].targetDisplay.forbiddenLayers = {\n mode: DndPacForbiddenLayersMode.Range,\n range: {\n from: payloadLayer,\n to: this.viewData.maxLayer,\n }\n };\n }\n this.viewData = this.viewDataBuffer;\n this.refreshFilter();\n }\n\n /**\n * following each drag and drop - drop zone - enter/leave event the target-display-settings need to be set\n */\n private calcCurrentDndTargetView(dndInfo: DndActivityEventData): void {\n if(!this.dndLastEnteredInfo || !this.dndPayload) return;\n if(dndInfo.dropTarget.insertModeSelector !== ContentEditingInsertModeSelector.Sequential\n || dndInfo.dropTarget.insertModeSequential == null\n || this.dndLastEnteredInfo.insertModeSelector !== ContentEditingInsertModeSelector.Sequential\n || this.dndLastEnteredInfo.insertModeSequential == null) return;\n\n const { insertModeSequential: insertMode } = dndInfo.dropTarget;\n const { superId: eventSourceRow, subId: targetLayer } = dndInfo.dropTarget.identifier;\n const { insertModeSequential: lastEnteredInsertMode } = this.dndLastEnteredInfo;\n const { superId: lastEnteredSourceRow } = this.dndLastEnteredInfo.identifier;\n\n const payloadRowIndex = this.viewData.rows.findIndex(row => row.element.current.payload?.existingPayloadId === this.dndPayload?.existingPayloadId);\n const eventSourceForbiddenTargets = this.viewData.rows[eventSourceRow].targetDisplay.forbiddenLayers;\n\n // reset last target\n if(lastEnteredInsertMode === DndInsertModeSequential.Before) {\n if(lastEnteredSourceRow === 0) {\n this.firstTargetDisplayMode = payloadRowIndex === 0 ? this.firstTargetDisplayMode : DndPacFirstTargetDisplayMode.Allowed;\n } else {\n this.viewDataBuffer.rows[lastEnteredSourceRow - 1].targetDisplay.isTarget = false;\n }\n } else {\n this.viewDataBuffer.rows[lastEnteredSourceRow].targetDisplay.isTarget = false;\n }\n // don't set target for row of payload and previous on the same layer as the target layer\n // ensures moving up and down in hierarchy is possible, while same layer is forbidden\n if(targetLayer === this.viewData.rows[payloadRowIndex].element.current.layer\n && (eventSourceRow === payloadRowIndex\n || (insertMode === DndInsertModeSequential.Before\n && eventSourceRow === payloadRowIndex + 1)\n || (insertMode === DndInsertModeSequential.After\n && eventSourceRow === payloadRowIndex - 1))) return;\n if(eventSourceForbiddenTargets.mode === DndPacForbiddenLayersMode.All) return;\n\n // set current target, depending on targeted row, insertMode and forbiddenLayers\n if(dndInfo.enterEvent) {\n if(insertMode === DndInsertModeSequential.Before) {\n if(eventSourceRow === 0) {\n this.firstTargetDisplayMode = DndPacFirstTargetDisplayMode.Target;\n } else {\n const preEventSourceForbiddenLayers = this.viewData.rows[eventSourceRow - 1].targetDisplay.forbiddenLayers;\n if(preEventSourceForbiddenLayers.mode === DndPacForbiddenLayersMode.All\n || (preEventSourceForbiddenLayers.mode === DndPacForbiddenLayersMode.Range\n && ((targetLayer >= preEventSourceForbiddenLayers.range.from\n && targetLayer <= preEventSourceForbiddenLayers.range.to)))) return;\n this.viewDataBuffer.rows[eventSourceRow - 1].targetDisplay.layer = targetLayer;\n this.viewDataBuffer.rows[eventSourceRow - 1].targetDisplay.isTarget = true;\n }\n } else {\n if(eventSourceForbiddenTargets.mode === DndPacForbiddenLayersMode.Range\n && (targetLayer >= eventSourceForbiddenTargets.range.from\n && targetLayer <= eventSourceForbiddenTargets.range.to)) return;\n this.viewDataBuffer.rows[eventSourceRow].targetDisplay.layer = targetLayer;\n this.viewDataBuffer.rows[eventSourceRow].targetDisplay.isTarget = true;\n }\n }\n }\n}\n\nexport interface IPage extends IPageEditResponseDto {\n children: IPageEditResponseDto[];\n}\n\nexport enum PageTypeFilter {\n All = 'all',\n LearningOnly = 'learningOnly',\n}\n","import { autoinject, bindable, computedFrom } from 'aurelia-framework';\nimport { StoreService } from 'common/aurelia-services/StoreService';\nimport { ContentEditingInsertModeSelector } from 'common/constants/content.editing.constants';\nimport { CONTENT_EDITOR_PRESENTATION_CONTEXT } from 'common/constants/content.editor.constants';\nimport { ContentElementType } from 'common/dto/content-editor/content.editor.types';\nimport { BlockType } from 'common/dto/course/content/course.types';\nimport * as ContentContextMutations from 'common/store/mutations/content.context.mutations';\nimport { BlockUtils } from 'common/utils/BlockUtils';\nimport { ContentEditorApiService } from '../../../../services/api/ContentEditorApiService';\nimport { CustomDialogService } from '../../../../services/CustomDialogService';\nimport {\n ALL_DND_IDS,\n CLIPBOARD_CONTENT_DROPZONE_ID,\n CLIPBOARD_TRASH_DROPZONE_ID,\n DndActivityEventData,\n DndContext,\n DndDropEventData,\n DndManager,\n DndManagerService,\n DndPayloadUniversal,\n DndSubContext,\n IDndDropzoneConfig,\n} from '../../../../services/DndManagerService';\nimport * as ClipboardMutations from '../../../../store/clipboard.mutations';\nimport { IClipboardContentElementLayoutContainer } from '../../../../store/clipboard.selectors';\nimport * as ContentEditorMutations from '../../../../store/content.editor.mutations';\nimport { IState } from '../../../../store/state';\nimport { ContentEditorMode } from '../../../pages/content-editor/content-editor';\n\n@autoinject()\nexport class ContentEditorSidebarBlockClipboard {\n @bindable() public contextIdentifier = CONTENT_EDITOR_PRESENTATION_CONTEXT;\n @bindable() public clipboardContent: Array = [];\n\n private editorMode: ContentEditorMode = ContentEditorMode.PRESENTATION;\n private dndActiveAndClipboardEnabled = false;\n private dndActive = false;\n private dndActiveSourceOutsideClipboard = false;\n private dndActiveSourceClipboard = false;\n private dndClipboardContentTargeted = false;\n private dndClipboardTrashTargeted = false;\n private dndContext = DndContext.ContentEditorLayout;\n private BlockType = BlockType;\n private dndPayload: DndPayloadUniversal = null;\n private dndManager: DndManager | null = null;\n private draggedElements: HTMLElement[] = [];\n private DndSubContext = DndSubContext;\n private dndContentDropzoneConfig: IDndDropzoneConfig = {\n identifier: { superId: CLIPBOARD_CONTENT_DROPZONE_ID, subId: ALL_DND_IDS },\n subContext: DndSubContext.Clipboard,\n insertModeSelector: ContentEditingInsertModeSelector.Plain,\n };\n private dndTrashDropzoneConfig: IDndDropzoneConfig = {\n identifier: { superId: CLIPBOARD_TRASH_DROPZONE_ID, subId: ALL_DND_IDS },\n subContext: DndSubContext.Clipboard,\n insertModeSelector: ContentEditingInsertModeSelector.Plain,\n };\n\n constructor(\n private storeService: StoreService,\n private customDialogService: CustomDialogService,\n private dndManagerService: DndManagerService,\n private contentEditorApi: ContentEditorApiService,\n ) { }\n\n protected attached(): void {\n this.dndManager = this.dndManagerService.getDndManager(this.dndContext);\n this.dndManager.subscribePayloadChanged(this, this.dndPayloadChangedHandler.bind(this));\n this.dndManager.subscribeDrop(this, this.dndOnDropHandler.bind(this), null, DndSubContext.Clipboard);\n this.dndManager.subscribeToDragActivity(this, this.dndActivityHandler.bind(this), null, DndSubContext.Clipboard);\n\n this.storeService.subscribeToDetailedChanges(this, [\n state => state.contentEditor.dragAndDrop.active,\n state => state.contentEditor.mode\n ], (_state, active, editorMode) => {\n this.dndActive = active;\n this.editorMode = editorMode;\n });\n }\n\n protected detached(): void {\n this.storeService.disposeAllSubscriptions(this);\n this.dndManager?.disposeSubscriptions(this);\n }\n\n private dndPayloadChangedHandler(payload: DndPayloadUniversal): void {\n this.dndPayload = payload;\n\n this.dndActiveAndClipboardEnabled = (this.dndPayload != null && (\n this.dndPayload.excludedTargetSubContexts == null\n ||(this.dndPayload.excludedTargetSubContexts\n .findIndex(forbidden => forbidden === DndSubContext.Clipboard) === -1)));\n\n this.dndActiveSourceOutsideClipboard = payload != null\n && payload.source === DndSubContext.Content;\n this.dndActiveSourceClipboard = payload != null\n && payload.source === DndSubContext.Clipboard;\n }\n\n @computedFrom('clipboardContent')\n private get clipboardEmpty(): boolean {\n if(this.clipboardContent == null) return false;\n return this.clipboardContent.length === 0;\n }\n\n private async dndOnDropHandler(dropData: DndDropEventData): Promise {\n // stop dnd before BE-API activity\n\n this.dndClipboardContentTargeted = false;\n this.dndClipboardTrashTargeted = false;\n\n if(dropData.dndPayload?.existingPayloadId == null\n || (dropData.dndPayload.excludedTargetSubContexts != null\n && (dropData.dndPayload.excludedTargetSubContexts\n .findIndex(forbidden => forbidden === DndSubContext.Clipboard) !== -1))\n || dropData.dndPayload?.source === DndSubContext.New\n || dropData.dropTarget.subContext !== DndSubContext.Clipboard) {\n this.stopDnd();\n return;\n }\n\n if(dropData.dropTarget.identifier.superId === CLIPBOARD_CONTENT_DROPZONE_ID) {\n const changes = await this.contentEditorApi.moveElementToClipboard(dropData.dndPayload?.existingPayloadId);\n\n await this.storeService\n .pipe(ContentContextMutations.applyLayoutChanges, this.contextIdentifier, changes.sourceLayoutChanges)\n .pipe(\n ClipboardMutations.addItem,\n changes.clipboardNewLayoutContainer,\n changes.clipboardNewCardContent,\n changes.clipboardNewBlock,\n ).pipe(ContentEditorMutations.updateContainerStructure, this.contextIdentifier)\n .dispatch();\n } else if(dropData.dropTarget.identifier.superId === CLIPBOARD_TRASH_DROPZONE_ID) {\n const changes = await this.contentEditorApi.deleteElementFromClipboard(dropData.dndPayload?.existingPayloadId);\n\n await this.storeService.dispatch(\n ClipboardMutations.applyRemoveChanges,\n changes.clipboardLayoutContainerChanges,\n changes.clipboardCardContentChanges,\n changes.deletedBlockId,\n );\n }\n this.stopDnd();\n }\n\n private stopDnd(): void {\n this.storeService.dispatch(ContentEditorMutations.updateContainerStylesState, {\n showExtraContainerSpace: false,\n });\n this.storeService\n .pipe(ContentEditorMutations.updateDragAndDropState, { active: false })\n .pipe(ContentEditorMutations.resetContainerHoverState)\n .dispatch();\n }\n\n private dndActivityHandler(dndInfo: DndActivityEventData): void {\n if(this.dndPayload == null || !this.dndActiveAndClipboardEnabled) {\n this.dndClipboardContentTargeted = false;\n return;\n }\n this.dndClipboardContentTargeted = dndInfo.enterEvent\n && this.dndPayload.source === DndSubContext.Content\n && dndInfo.dropTarget.subContext === DndSubContext.Clipboard\n && dndInfo.dropTarget.identifier.superId === CLIPBOARD_CONTENT_DROPZONE_ID;\n\n this.dndClipboardTrashTargeted = dndInfo.enterEvent\n && this.dndPayload.source === DndSubContext.Clipboard\n && dndInfo.dropTarget.subContext === DndSubContext.Clipboard\n && dndInfo.dropTarget.identifier.superId === CLIPBOARD_TRASH_DROPZONE_ID;\n }\n\n private async showPreview(layoutContainerId: number): Promise {\n await this.customDialogService.showLayoutContainerPreviewDialog({\n layoutContainerId,\n });\n }\n\n private getIconName(elementType: ContentElementType): string {\n return BlockUtils.getIconName(elementType);\n }\n\n private getModifierIconName(elementType: ContentElementType): string | null {\n return BlockUtils.getModifierIconName(elementType);\n }\n}\n","import { autoinject, bindable, computedFrom } from 'aurelia-framework';\nimport { selectState } from 'common/aurelia-decorators/select-state';\nimport { StoreService } from 'common/aurelia-services/StoreService';\nimport { ContentElementType, NonBlockElementType } from 'common/dto/content-editor/content.editor.types';\nimport { BlockType } from 'common/dto/course/content/course.types';\nimport { RoleName } from 'common/enum/role.enums';\nimport { Config } from 'common/fe-config/config';\nimport { AppFlavour } from 'common/fe-config/config.interface';\nimport { isIasSelectorCreator } from 'common/store/selectors/course.context.selectors';\nimport { BlockUtils } from 'common/utils/BlockUtils';\nimport {\n DndContext,\n DndManager,\n DndManagerService,\n DndPayloadUniversal,\n DndSubContext\n} from '../../../../services/DndManagerService';\nimport { IState } from '../../../../store/state';\nimport { ContentEditorMode } from '../../../pages/content-editor/content-editor';\n\n@autoinject()\nexport class ContentEditorSidebarBlockSelect {\n @bindable() public contextIdentifier: string | null = null;\n @selectState(ContentEditorSidebarBlockSelect, isIasSelectorCreator, ['contextIdentifier']) private isIas?: boolean = false;\n\n private editorMode: ContentEditorMode = ContentEditorMode.PRESENTATION;\n private dndActive = false;\n private dndContext = DndContext.ContentEditorLayout;\n private BlockType = BlockType;\n private dndPayload: DndPayloadUniversal = null;\n private dndManager: DndManager | null = null;\n private DndPayloadSource = DndSubContext;\n private isProvider = false;\n\n constructor(\n private storeService: StoreService,\n private dndManagerService: DndManagerService,\n ) { }\n\n protected attached(): void {\n this.dndManager = this.dndManagerService.getDndManager(this.dndContext);\n this.dndManager.subscribePayloadChanged(this, this.dndPayloadChangedHandler.bind(this));\n\n this.storeService.subscribeToDetailedChanges(this, [\n state => state.contentEditor.dragAndDrop.active,\n state => state.contentEditor.mode,\n state => state.currentRole?.role === RoleName.Provider,\n ], (_state, active, editorMode, isProvider) => {\n this.dndActive = active;\n this.editorMode = editorMode;\n this.isProvider = isProvider;\n });\n }\n\n protected detached(): void {\n this.storeService.disposeAllSubscriptions(this);\n this.dndManager?.disposeSubscriptions(this);\n }\n\n private dndPayloadChangedHandler(payload: DndPayloadUniversal): void {\n this.dndPayload = payload;\n }\n\n @computedFrom('BlockType', 'NonBlockElementType', 'editorMode', 'isIas', 'isProvider')\n private get availableBlockTypes(): ContentElementType[] {\n if(this.isIas) {\n return [\n BlockType.TEXT,\n BlockType.PICTURE,\n BlockType.AUDIO,\n BlockType.VIDEO,\n BlockType.MP_INTERACTIVE_TEXT,\n BlockType.MP_QUESTION\n ];\n }\n\n const showAiBlocks = Config().ai.enabled && this.isProvider && this.editorMode === ContentEditorMode.COURSE;\n return [\n BlockType.TEXT,\n ...showAiBlocks ? [NonBlockElementType.AiText] : [],\n BlockType.PICTURE,\n BlockType.AUDIO,\n BlockType.VIDEO,\n BlockType.MP_TILES,\n BlockType.FILE,\n BlockType.SPACER,\n BlockType.FORMULA,\n NonBlockElementType.Card,\n ...(this.editorMode === ContentEditorMode.COURSE ? [\n BlockType.QUESTION,\n ...showAiBlocks ? [NonBlockElementType.AiQuiz] : [],\n BlockType.MP_SEQUENCE_START,\n ...Config().scorm.enabled && this.isProvider ? [BlockType.MP_SCORM] : [],\n BlockType.MP_RFG,\n BlockType.MP_INTERACTIVE_TEXT,\n BlockType.MP_HOT_SPOT,\n BlockType.MP_FLIPPING_CARD,\n ...[AppFlavour.Frp, AppFlavour.Yarrive].includes(Config().appFlavour) ? [BlockType.MP_RISI] : [],\n ] : [\n BlockType.MP_QUESTION,\n ]),\n ];\n }\n\n private getIconName(elementType: ContentElementType): string {\n return BlockUtils.getIconName(elementType);\n }\n\n private getModifierIconName(elementType: ContentElementType): string | null {\n return BlockUtils.getModifierIconName(elementType);\n }\n}\n","import { autoinject, bindable } from 'aurelia-framework';\nimport { selectState } from 'common/aurelia-decorators/select-state';\nimport { CONTENT_EDITOR_PRESENTATION_CONTEXT } from 'common/constants/content.editor.constants';\nimport { INavigationTab } from 'resources/elements/navigation-tabs/navigation-tabs';\nimport { clipboardContentSelectorCreator, IClipboardContentElementLayoutContainer } from 'store/clipboard.selectors';\n\n@autoinject()\nexport class ContentEditorSidebarBlocks {\n @bindable() public contextIdentifier = CONTENT_EDITOR_PRESENTATION_CONTEXT;\n\n @selectState(ContentEditorSidebarBlocks, clipboardContentSelectorCreator, []) private clipboardContent: Array | null = null;\n private showBlockClipboard = false;\n private navigationTabs: INavigationTab[] = [];\n\n protected attached(): void {\n this.navigationTabs = [\n {\n title: { titleTk: 'pages.content-editor.blocks' },\n active: !this.showBlockClipboard,\n callback: () => { this.showBlockClipboard = false; },\n },\n {\n title: { titleTk: 'globals.clipboard' },\n active: this.showBlockClipboard,\n callback: () => { this.showBlockClipboard = true; },\n },\n ];\n }\n}\n","import { UceSidebarContent } from './../../../store/state';\nimport { autoinject, bindable, computedFrom } from 'aurelia-framework';\nimport { StoreService } from 'common/aurelia-services/StoreService';\nimport { CONTENT_EDITOR_PRESENTATION_CONTEXT } from 'common/constants/content.editor.constants';\nimport { IState } from 'store/state';\n\n@autoinject()\nexport class ContentEditorSidebarRight {\n @bindable() public contextIdentifier = CONTENT_EDITOR_PRESENTATION_CONTEXT;\n private sidebarContent: UceSidebarContent | null = null;\n private sidebarOpen = false;\n\n constructor(\n private storeService: StoreService,\n ) { }\n\n protected attached(): void {\n this.storeService.subscribeToDetailedChanges(this, [\n state => state.contentEditor.sidebarRight,\n ], (_state, sidebarRight) => {\n this.sidebarContent = sidebarRight.content;\n this.sidebarOpen = sidebarRight.open;\n });\n }\n\n protected detached(): void {\n this.storeService.disposeAllSubscriptions(this);\n }\n\n @computedFrom('sidebarContent', 'sidebarOpen')\n private get isSidebarBlocksActive(): boolean | null {\n return this.sidebarContent === UceSidebarContent.Blocks && this.sidebarOpen;\n }\n\n @computedFrom('sidebarContent', 'sidebarOpen')\n private get isSidebarTemplatesActive(): boolean | null {\n return this.sidebarContent === UceSidebarContent.Templates && this.sidebarOpen;\n }\n\n @computedFrom('sidebarContent', 'sidebarOpen')\n private get isSidebarInspectorActive(): boolean | null {\n return this.sidebarContent === UceSidebarContent.Inspector && this.sidebarOpen;\n }\n}\n","import { autoinject, bindable, computedFrom, ObserverLocator, Parser } from 'aurelia-framework';\nimport { selectState, SelectStateObservableComponent } from 'common/aurelia-decorators/select-state';\nimport { StoreService } from 'common/aurelia-services/StoreService';\nimport { ContentEditingInsertModeSelector } from 'common/constants/content.editing.constants';\nimport { CONTENT_EDITOR_PRESENTATION_CONTEXT } from 'common/constants/content.editor.constants';\nimport {\n courseIdSelectorCreator,\n isPageEmptySelectorCreator,\n isSingleBlockPageSelectorCreator,\n pageIdSelectorCreator\n} from 'common/store/selectors/course.context.selectors';\nimport {\n presentationIdSelectorCreator,\n selectIsSlideEmpty,\n slideIdSelectorCreator\n} from 'common/store/selectors/presentation.context.selectors';\nimport { ContentEditorApiService } from '../../../../services/api/ContentEditorApiService';\nimport {\n ALL_DND_IDS,\n DndActivityEventData,\n DndContext,\n DndDropEventData, DndManager,\n DndManagerService,\n DndPayloadUniversal,\n DndSubContext, IDndDropzoneConfig, TEMPLATE_TRASH_DROPZONE_ID\n} from '../../../../services/DndManagerService';\nimport * as ContentEditorMutations from '../../../../store/content.editor.mutations';\nimport { IState } from '../../../../store/state';\nimport * as TemplateMutations from '../../../../store/template.mutations';\nimport { publicTemplatesSelectorCreator, userOwnedTemplatesSelectorCreator } from '../../../../store/template.selectors';\nimport { AppUtils } from 'common/utils/AppUtils';\nimport { INavigationTab } from '../../../elements/navigation-tabs/navigation-tabs';\nimport { ContentEditorMode } from '../../../pages/content-editor/content-editor';\n\n@autoinject()\nexport class ContentEditorSidebarTemplates extends SelectStateObservableComponent {\n @bindable() public contextIdentifier = CONTENT_EDITOR_PRESENTATION_CONTEXT;\n\n @selectState(ContentEditorSidebarTemplates, courseIdSelectorCreator, ['contextIdentifier']) private courseId?: number | null;\n @selectState(ContentEditorSidebarTemplates, presentationIdSelectorCreator, ['contextIdentifier']) private presentationId?: number | null = null;\n @selectState(ContentEditorSidebarTemplates, pageIdSelectorCreator, ['contextIdentifier']) private selectedPageId?: number | null = null;\n @selectState(ContentEditorSidebarTemplates, slideIdSelectorCreator, ['contextIdentifier']) private selectedSlideId?: number | null = null;\n @selectState(ContentEditorSidebarTemplates, isPageEmptySelectorCreator, ['contextIdentifier']) private isPageEmpty?: boolean;\n @selectState(ContentEditorSidebarTemplates, isSingleBlockPageSelectorCreator, ['contextIdentifier']) private isSingleBlockPage?: boolean;\n private createTemplateDisabled = false;\n\n @selectState(ContentEditorSidebarTemplates, publicTemplatesSelectorCreator, []) private publicTemplateIds: Array | null = null;\n @selectState(ContentEditorSidebarTemplates, userOwnedTemplatesSelectorCreator, []) private userOwnedTemplateIds: Array | null = null;\n private templateIds: Array = [];\n\n private showPublicTemplates = true;\n private navigationTabs: INavigationTab[] = [];\n private editorMode: ContentEditorMode = ContentEditorMode.PRESENTATION;\n private dndActive = false;\n private dndActiveSourceTemplate = false;\n private dndTemplateTrashTargeted = false;\n private dndContext = DndContext.ContentEditorLayout;\n private dndPayload: DndPayloadUniversal = null;\n private dndManager: DndManager | null = null;\n private draggedElements: HTMLElement[] = [];\n private DndSubContext = DndSubContext;\n private dndTrashDropzoneConfig: IDndDropzoneConfig = {\n identifier: { superId: TEMPLATE_TRASH_DROPZONE_ID, subId: ALL_DND_IDS },\n subContext: DndSubContext.Template,\n insertModeSelector: ContentEditingInsertModeSelector.Plain,\n };\n\n constructor(\n private storeService: StoreService,\n private dndManagerService: DndManagerService,\n private contentEditorApi: ContentEditorApiService,\n parser: Parser,\n observerLocator: ObserverLocator,\n ) {\n super(parser, observerLocator);\n }\n\n protected attached(): void {\n this.navigationTabs = [\n {\n title: { titleText: AppUtils.getAppName() ?? '' },\n active: this.showPublicTemplates,\n callback: () => {\n this.showPublicTemplates = true;\n this.updateTemplateList();\n },\n },\n {\n title: { titleTk: 'pages.content-editor.templatesUserOwned' },\n active: !this.showPublicTemplates,\n callback: () => {\n this.showPublicTemplates = false;\n this.updateTemplateList();\n },\n },\n ];\n\n this.dndManager = this.dndManagerService.getDndManager(this.dndContext);\n this.dndManager.subscribePayloadChanged(this, this.dndPayloadChangedHandler.bind(this));\n this.dndManager.subscribeDrop(this, this.dndOnDropHandler.bind(this), undefined, DndSubContext.Template);\n this.dndManager.subscribeToDragActivity(this, this.dndActivityHandler.bind(this), undefined, DndSubContext.Template);\n\n this.storeService.subscribeToDetailedChanges(this, [\n state => state.contentEditor.dragAndDrop.active,\n state => state.contentEditor.mode\n ], (_state, active, editorMode) => {\n this.dndActive = active;\n this.editorMode = editorMode;\n });\n\n const { contextIdentifier } = this;\n if(contextIdentifier === CONTENT_EDITOR_PRESENTATION_CONTEXT) {\n this.storeService.subscribeMemoized(\n this,\n selectIsSlideEmpty,\n isSlideEmpty => {\n this.createTemplateDisabled = isSlideEmpty;\n }, contextIdentifier,\n );\n }\n }\n\n protected detached(): void {\n this.storeService.disposeAllSubscriptions(this);\n this.dndManager?.disposeSubscriptions(this);\n }\n\n private isPageEmptyChanged(): void {\n this.updateCreateTemplateDisabled();\n }\n\n private isSingleBlockPageChanged(): void {\n this.updateCreateTemplateDisabled();\n }\n\n private updateCreateTemplateDisabled(): void {\n this.createTemplateDisabled = (this.isSingleBlockPage != null && this.isSingleBlockPage)\n || (this.isPageEmpty != null && this.isPageEmpty);\n }\n\n private publicTemplateIdsChanged(): void {\n this.updateTemplateList();\n }\n\n private userOwnedTemplateIdsChanged(): void {\n this.updateTemplateList();\n }\n\n private updateTemplateList(): void {\n this.templateIds = this.showPublicTemplates ? this.publicTemplateIds ?? [] : this.userOwnedTemplateIds ?? [];\n }\n\n @computedFrom('contextIdentifier', 'showPublicTemplates')\n private get descriptionTextTk(): string {\n return `pages.content-editor.template${this.showPublicTemplates ? 'Select' : 'Add'}Description${this.contextIdentifier === CONTENT_EDITOR_PRESENTATION_CONTEXT ? 'Slide' : 'Page'}`;\n }\n\n @computedFrom('contextIdentifier')\n private get addNewTextTk(): string {\n return `pages.content-editor.templateAddNew${this.contextIdentifier === CONTENT_EDITOR_PRESENTATION_CONTEXT ? 'Slide' : 'Page'}`;\n }\n\n private dndPayloadChangedHandler(payload: DndPayloadUniversal): void {\n this.dndPayload = payload;\n\n this.dndActiveSourceTemplate = payload != null\n && payload.source === DndSubContext.Template;\n }\n\n private async dndOnDropHandler(dropData: DndDropEventData): Promise {\n // stop dnd before BE-API activity\n await this.storeService\n .pipe(ContentEditorMutations.updateContainerStylesState, { showExtraContainerSpace: false })\n .pipe(ContentEditorMutations.updateDragAndDropState, { active: false })\n .pipe(ContentEditorMutations.resetContainerHoverState)\n .dispatch();\n this.dndTemplateTrashTargeted = false;\n\n if(dropData.dndPayload?.existingPayloadId == null\n || (dropData.dndPayload.excludedTargetSubContexts != null\n && (dropData.dndPayload.excludedTargetSubContexts\n .findIndex(forbidden => forbidden === DndSubContext.Template) !== -1))\n || dropData.dndPayload?.source === DndSubContext.New\n || dropData.dropTarget.subContext !== DndSubContext.Template\n || dropData.dropTarget.identifier.superId !== TEMPLATE_TRASH_DROPZONE_ID) return;\n\n const removedInfos = await this.contentEditorApi.deleteTemplate(dropData.dndPayload.existingPayloadId);\n await this.storeService.dispatch(TemplateMutations.applyRemoveChanges, removedInfos);\n }\n\n private dndActivityHandler(dndInfo: DndActivityEventData): void {\n if(this.dndPayload == null) return;\n\n this.dndTemplateTrashTargeted = dndInfo.enterEvent\n && this.dndPayload.source === DndSubContext.Template\n && dndInfo.dropTarget.subContext === DndSubContext.Template\n && dndInfo.dropTarget.identifier.superId === TEMPLATE_TRASH_DROPZONE_ID;\n }\n\n private async onAddTemplate(): Promise {\n const contentMacroId = this.contextIdentifier === CONTENT_EDITOR_PRESENTATION_CONTEXT\n ? this.presentationId : this.courseId;\n const pageOrSlideId = this.contextIdentifier === CONTENT_EDITOR_PRESENTATION_CONTEXT\n ? this.selectedSlideId : this.selectedPageId;\n if(contentMacroId == null || pageOrSlideId == null) return;\n const newTemplateContent = await this.contentEditorApi.addTemplate(contentMacroId, pageOrSlideId);\n await this.storeService.dispatch(TemplateMutations.addItem, newTemplateContent);\n }\n}\n","import { PLATFORM } from 'aurelia-pal';\nimport { FrameworkConfiguration } from 'aurelia-framework';\n\nexport function configure(config: FrameworkConfiguration): void {\n config.globalResources(PLATFORM.moduleName('resources/elements/content-editor-sidebar-right/content-editor-sidebar-right'));\n config.globalResources(PLATFORM.moduleName('resources/elements/content-editor-sidebar-right/content-editor-sidebar-blocks/content-editor-sidebar-blocks'));\n config.globalResources(PLATFORM.moduleName('resources/elements/content-editor-sidebar-right/content-editor-sidebar-block-select/content-editor-sidebar-block-select'));\n config.globalResources(PLATFORM.moduleName('resources/elements/content-editor-sidebar-right/content-editor-sidebar-block-clipboard/content-editor-sidebar-block-clipboard'));\n config.globalResources(PLATFORM.moduleName('resources/elements/content-editor-sidebar-right/content-editor-sidebar-templates/content-editor-sidebar-templates'));\n}\n","import { autoinject, bindable, computedFrom, observable, ObserverLocator, Parser } from 'aurelia-framework';\nimport { selectState, SelectStateObservableComponent } from 'common/aurelia-decorators/select-state';\nimport { StoreService } from 'common/aurelia-services/StoreService';\nimport { ContentEditingInsertModeSelector } from 'common/constants/content.editing.constants';\nimport { DISTINAR_PRESENTATION_CONTEXT } from 'common/constants/content.editor.constants';\nimport { IPresentationSlideDto } from 'common/dto/course/content/slide.interface';\nimport { ICreateSlideConfigurationDto } from 'common/dto/course/management/course.management.interface';\nimport * as ContentContextMutations from 'common/store/mutations/content.context.mutations';\nimport * as CourseContextMutations from 'common/store/mutations/course.context.mutations';\nimport * as PresentationContextMutations from 'common/store/mutations/presentation.context.mutations';\nimport {\n iasSlideIdSelectorCreator,\n iasSlideIdsOrderedSelectorCreator,\n isIasSelectorCreator,\n pageIdSelectorCreator\n} from 'common/store/selectors/course.context.selectors';\nimport {\n presentationIdSelectorCreator,\n slideIdSelectorCreator,\n slideIdsOrderedSelectorCreator\n} from 'common/store/selectors/presentation.context.selectors';\nimport { assertNotNullOrUndefined } from 'common/utils/assert';\nimport { ContentEditorApiService } from '../../../services/api/ContentEditorApiService';\nimport {\n DndActivityEventData,\n DndContext,\n DndDropEventData,\n DndInsertModeSequential,\n DndManager,\n DndManagerService,\n DndPayloadUniversal,\n DndSimpleTargetDisplaySetting,\n DndSubContext,\n DndTargetDisplay,\n IDndDropzoneConfig\n} from '../../../services/DndManagerService';\nimport { ToastService } from '../../../services/ToastService';\nimport * as ContentEditorMutations from '../../../store/content.editor.mutations';\nimport { updateDistinarPresentationResumeData } from '../../../store/lecturer.distinar.mutations';\nimport { IState } from '../../../store/state';\n\n@autoinject()\nexport class ContentEditorSlideSelection extends SelectStateObservableComponent {\n @bindable() public contextIdentifier: string | null = null;\n @bindable() public editable = false;\n\n @selectState(ContentEditorSlideSelection, pageIdSelectorCreator, ['contextIdentifier']) private pageId: number | null = null;\n @selectState(ContentEditorSlideSelection, isIasSelectorCreator, ['contextIdentifier']) private isIas: boolean = false;\n @selectState(ContentEditorSlideSelection, slideIdsOrderedSelectorCreator, ['contextIdentifier']) private orderedSlideIds: Array = [];\n @selectState(ContentEditorSlideSelection, iasSlideIdsOrderedSelectorCreator, ['contextIdentifier']) private orderedIasSlideIds: Array = [];\n @selectState(ContentEditorSlideSelection, iasSlideIdSelectorCreator, ['contextIdentifier']) private selectedIasSlideId?: number | null = null;\n @selectState(ContentEditorSlideSelection, slideIdSelectorCreator, ['contextIdentifier']) private selectedSlideId: number | null = null;\n @selectState(ContentEditorSlideSelection, presentationIdSelectorCreator, ['contextIdentifier']) private presentationId: number | null = null;\n\n private domElement: HTMLElement;\n\n @observable() private dndActive = false;\n private dndContext: DndContext = DndContext.ContentEditorSlides;\n private dndManager: DndManager | null = null;\n private dndPayload: DndPayloadUniversal = null;\n private dndLastEnteredInfo: IDndDropzoneConfig | null = null;\n private dndTargetDisplaySettings: Array = [];\n private dndTargetDisplaySettingsBuffer: Array = [];\n private DndInsertModeSequential = DndInsertModeSequential;\n private DndTargetDisplay = DndTargetDisplay;\n private DndPayloadSource = DndSubContext;\n\n constructor(\n element: Element,\n parser: Parser,\n observerLocator: ObserverLocator,\n private storeService: StoreService,\n private dndManagerService: DndManagerService,\n private contentEditorApi: ContentEditorApiService,\n private toastService: ToastService\n ) {\n super(parser, observerLocator);\n this.domElement = element as HTMLElement;\n }\n\n public dndPayloadChangedHandler(payload: DndPayloadUniversal): void {\n this.dndPayload = payload;\n this.dndActive = payload != null;\n\n // perform initial target display setting calculation with dummy data\n if(this.dndPayload != null && this.dndPayload.existingPayloadId != null) {\n const dropTargetInfo: IDndDropzoneConfig = {\n identifier: {\n superId: this.dndPayload.existingPayloadId ?? 0,\n subId: 0,\n },\n insertModeSelector: ContentEditingInsertModeSelector.Sequential,\n insertModeSequential: DndInsertModeSequential.Before,\n };\n this.calcDndTargetDisplaySettings(dropTargetInfo, true);\n } else this.resetTargetDisplaySettings();\n }\n\n public dndDragActivityHandler(dndInfo: DndActivityEventData): void {\n if(this.dndPayload == null) return;\n const config = dndInfo.dropTarget;\n if(dndInfo && this.dndLastEnteredInfo === null) this.dndLastEnteredInfo = dndInfo.dropTarget;\n if(dndInfo.enterEvent && this.dndLastEnteredInfo) {\n this.dndLastEnteredInfo = this.dndLastEnteredInfo !== dndInfo.dropTarget ? dndInfo.dropTarget : this.dndLastEnteredInfo;\n this.calcDndTargetDisplaySettings(config, false);\n } else {\n // calculate display settings when all drop-zone area is left and thus the latest targets need to be reset\n if(this.dndLastEnteredInfo && this.dndLastEnteredInfo === dndInfo.dropTarget) {\n this.calcDndTargetDisplaySettings(config, true);\n }\n }\n }\n\n protected attached(): void {\n this.dndManager = this.dndManagerService.getDndManager(this.dndContext);\n this.dndManager.subscribePayloadChanged(this, this.dndPayloadChangedHandler.bind(this));\n this.dndManager.subscribeToDragActivity(this, this.dndDragActivityHandler.bind(this));\n this.dndManager.subscribeDrop(this, this.onDrop.bind(this));\n }\n\n protected detached(): void {\n this.dndManager?.disposeSubscriptions(this);\n this.dndLastEnteredInfo = null;\n }\n\n public async onDrop(dropInfo: DndDropEventData): Promise {\n // TODO: implementation point for differentiated DnDState\n this.dndActive = false;\n if(dropInfo.dndPayload == null\n || dropInfo.dndPayload.existingPayloadId == null\n || dropInfo.dndPayload.existingPayloadId === dropInfo.dropTarget.identifier.superId\n || dropInfo.dropTarget.sequentialOrder == null) return;\n assertNotNullOrUndefined(this.contextIdentifier, 'contextIdentifier cannot be null or undefined');\n\n if(this.isIas) {\n const changes = await this.contentEditorApi.moveIasSlide(dropInfo.dndPayload.existingPayloadId, dropInfo.dropTarget.sequentialOrder);\n await this.storeService.dispatch(CourseContextMutations.applyIasSlideOrderChanges, this.contextIdentifier, changes.updated);\n } else {\n const changes = await this.contentEditorApi.moveSlide(dropInfo.dndPayload.existingPayloadId, dropInfo.dropTarget.sequentialOrder);\n await this.storeService.dispatch(PresentationContextMutations.applySlideOrderChanges, this.contextIdentifier, changes);\n }\n }\n\n private resetTargetDisplaySettings(): void {\n // reset target displays to be hidden\n const slides = this.isIas ? this.orderedIasSlideIds : this.orderedSlideIds;\n this.dndTargetDisplaySettingsBuffer = [];\n slides.forEach(() => {\n this.dndTargetDisplaySettingsBuffer.push({\n before: DndTargetDisplay.Hidden,\n after: DndTargetDisplay.Hidden,\n });\n });\n this.dndTargetDisplaySettings = this.dndTargetDisplaySettingsBuffer;\n }\n\n /**\n * Slides have an order starting at 1\n * Index is used equivalent to order (order = index + 1)\n * Thanks to this similarity aquiring actual slide dtos in here is not required.\n *\n * Dropzone config - sequentialOrder for drop information should be\n * in case of insert before: the same order as the item to insert before\n * in case of insert after: the order + 1 of the item to insert after\n */\n private getDropzoneConfig(\n index: number,\n ias: boolean,\n insertMode: DndInsertModeSequential\n ): IDndDropzoneConfig {\n const config: IDndDropzoneConfig = {\n identifier: {\n superId: ias ? this.orderedIasSlideIds[index] : this.orderedSlideIds[index],\n subId: 0,\n },\n insertModeSelector: ContentEditingInsertModeSelector.Sequential,\n insertModeSequential: insertMode,\n sequentialOrder: insertMode === DndInsertModeSequential.Before ? index + 1 : index + 2,\n };\n return config;\n }\n\n private calcDndTargetDisplaySettings(dndInfo: IDndDropzoneConfig, resetTargets: boolean): void {\n const slides = this.isIas ? this.orderedIasSlideIds : this.orderedSlideIds;\n let targetDisplaySettingBefore = DndTargetDisplay.Hidden;\n let targetDisplaySettingAfter = DndTargetDisplay.Hidden;\n this.dndTargetDisplaySettingsBuffer = [];\n slides.forEach((slide, index) => {\n targetDisplaySettingBefore = this.dndPayload == null\n || slide === this.dndPayload.existingPayloadId\n || (index > 0 && slides[index - 1] === this.dndPayload.existingPayloadId)\n ? DndTargetDisplay.Hidden\n : DndTargetDisplay.Allowed;\n if(targetDisplaySettingBefore === DndTargetDisplay.Allowed) {\n targetDisplaySettingBefore = !resetTargets\n && ((index > 0\n && dndInfo.identifier.superId === slides[index - 1]\n && dndInfo.insertModeSequential === DndInsertModeSequential.After)\n || (dndInfo.identifier.superId === slides[index]\n && dndInfo.insertModeSequential === DndInsertModeSequential.Before))\n ? DndTargetDisplay.Target\n : targetDisplaySettingBefore;\n }\n targetDisplaySettingAfter = this.dndPayload == null\n || slide === this.dndPayload.existingPayloadId\n || (index < slides.length - 1 && slides[index + 1] === this.dndPayload.existingPayloadId)\n ? DndTargetDisplay.Hidden\n : DndTargetDisplay.Allowed;\n if(targetDisplaySettingAfter === DndTargetDisplay.Allowed) {\n targetDisplaySettingAfter = !resetTargets\n && ((index < slides.length - 1\n && dndInfo.identifier.superId === slides[index + 1]\n && dndInfo.insertModeSequential === DndInsertModeSequential.Before)\n || (dndInfo.identifier.superId === slides[index]\n && dndInfo.insertModeSequential === DndInsertModeSequential.After))\n ? DndTargetDisplay.Target\n : targetDisplaySettingAfter;\n }\n this.dndTargetDisplaySettingsBuffer.push({\n before: targetDisplaySettingBefore,\n after: targetDisplaySettingAfter,\n });\n });\n this.dndTargetDisplaySettings = this.dndTargetDisplaySettingsBuffer;\n }\n\n private resetInspectorContent(): void {\n this.storeService.dispatch(ContentEditorMutations.updateInspector, null);\n }\n\n private async onSelectSlide(slideId: number): Promise {\n assertNotNullOrUndefined(this.contextIdentifier, 'contextIdentifier cannot be null or undefined');\n if(this.isIas) {\n await this.storeService.dispatch(CourseContextMutations.setIasSlideId, this.contextIdentifier, slideId);\n } else {\n await this.storeService.dispatch(PresentationContextMutations.setSlideId, this.contextIdentifier, slideId);\n if(this.contextIdentifier === DISTINAR_PRESENTATION_CONTEXT) {\n await this.storeService.dispatch(updateDistinarPresentationResumeData, slideId, this.presentationId);\n }\n this.resetInspectorContent();\n }\n }\n\n private async onAddSlide(insertAfterSlideId?: number): Promise {\n assertNotNullOrUndefined(this.contextIdentifier, 'contextIdentifier cannot be null or undefined');\n const dto: ICreateSlideConfigurationDto = { referenceSlideId: this.selectedSlideId, insertAfterSlideId };\n if(this.isIas) {\n assertNotNullOrUndefined(this.pageId, 'pageId cannot be null or undefined');\n const changes = await this.contentEditorApi.createEmptyIasSlide(this.pageId, dto);\n await this.storeService\n .pipe(\n CourseContextMutations.addIasSlideAndUpdateOrders,\n this.contextIdentifier,\n changes.newSlide,\n changes.updatedSlideOrders\n )\n .pipe(CourseContextMutations.setIasSlideId, this.contextIdentifier, changes.newSlide.id)\n .dispatch();\n } else {\n assertNotNullOrUndefined(this.presentationId, 'presentationId cannot be null or undefined');\n const changes = await this.contentEditorApi.createEmptySlide(this.presentationId, dto);\n await this.storeService\n .pipe(\n PresentationContextMutations.addSlideAndUpdateOrders,\n this.contextIdentifier,\n changes.newSlide,\n changes.updatedSlideOrders\n )\n .pipe(PresentationContextMutations.setSlideId, this.contextIdentifier, changes.newSlide.id)\n .dispatch();\n this.resetInspectorContent();\n }\n }\n\n private async onCloneSlide(slideId: number): Promise {\n assertNotNullOrUndefined(this.contextIdentifier, 'contextIdentifier cannot be null or undefined');\n if(this.isIas) {\n assertNotNullOrUndefined(this.pageId, 'pageId cannot be null or undefined');\n const changes = await this.contentEditorApi.cloneIasSlide(slideId);\n await this.storeService.dispatch(\n CourseContextMutations.addIasSlideAndUpdateOrders,\n this.contextIdentifier,\n changes.newSlide,\n changes.updatedSlideOrders\n );\n await this.storeService.dispatch(\n ContentContextMutations.applyLayoutChanges,\n this.contextIdentifier,\n changes.layoutChanges\n );\n } else {\n assertNotNullOrUndefined(this.presentationId, 'presentationId cannot be null or undefined');\n const changes = await this.contentEditorApi.cloneSlide(slideId);\n await this.storeService.dispatch(\n PresentationContextMutations.addSlideAndUpdateOrders,\n this.contextIdentifier,\n changes.newSlide,\n changes.updatedSlideOrders\n );\n await this.storeService.dispatch(\n ContentContextMutations.applyLayoutChanges,\n this.contextIdentifier,\n changes.layoutChanges\n );\n this.resetInspectorContent();\n }\n }\n\n private async onDeleteSlide(slideId: number): Promise {\n assertNotNullOrUndefined(this.contextIdentifier, 'contextIdentifier cannot be null or undefined');\n try {\n const changes = await this.contentEditorApi.deleteSlide(slideId);\n\n if(this.isIas) {\n await this.storeService\n .pipe(CourseContextMutations.applyIasSlideOrderChanges, this.contextIdentifier, changes.updatedSlideOrders)\n .pipe(ContentContextMutations.applyLayoutChanges, this.contextIdentifier, changes.layoutChanges)\n .pipe(CourseContextMutations.removeIasSlide, this.contextIdentifier, slideId)\n .dispatch();\n } else {\n await this.storeService\n .pipe(PresentationContextMutations.applySlideOrderChanges, this.contextIdentifier, { added: [], removedIds: [], updated: changes.updatedSlideOrders })\n .pipe(ContentContextMutations.applyLayoutChanges, this.contextIdentifier, changes.layoutChanges)\n .pipe(PresentationContextMutations.removeSlide, this.contextIdentifier, slideId)\n .dispatch();\n this.resetInspectorContent();\n }\n } catch(e) {\n this.toastService.error('elements.presentationSideBar.removeSlideError');\n }\n }\n\n @computedFrom('isIas', 'editable')\n private get styleClasses(): string {\n const classes: Array = [''];\n if(this.isIas) classes.push('content-editor-slide-selection--is-ias');\n if(this.editable) classes.push('content-editor-slide-selection--editable');\n return classes.join(' ');\n }\n}\n","import { FrameworkConfiguration, PLATFORM } from 'aurelia-framework';\n\nexport function configure(config: FrameworkConfiguration): void {\n config.globalResources(PLATFORM.moduleName('resources/elements/content-editor-slide-selection/content-editor-slide-selection'));\n}\n","import { autoinject, bindable, computedFrom } from 'aurelia-framework';\nimport { selectState, SelectStateObservableComponent } from 'common/aurelia-decorators/select-state';\nimport { IPageSlideTemplateDto } from 'common/dto/content-editor/content.editor.interface';\nimport { ContentEditorMode } from 'resources/pages/content-editor/content-editor';\nimport { templateByIdSelectorCreator } from 'store/template.selectors';\n\n@autoinject()\nexport class ContentEditorTemplatePreview extends SelectStateObservableComponent {\n @bindable() public templateId: number | null = null;\n @bindable() public editorMode: ContentEditorMode = ContentEditorMode.PRESENTATION;\n\n @selectState(ContentEditorTemplatePreview, templateByIdSelectorCreator, ['templateId']) private template?: IPageSlideTemplateDto | null;\n\n @computedFrom('editorMode')\n private get ratio(): number {\n if(this.editorMode === ContentEditorMode.COURSE) {\n return 9 / 16;\n }\n return 16 / 9;\n }\n}\n","import { FrameworkConfiguration, PLATFORM } from 'aurelia-framework';\n\nexport function configure(config: FrameworkConfiguration): void {\n config.globalResources(PLATFORM.moduleName('resources/elements/content-editor-template-preview/content-editor-template-preview'));\n config.globalResources(PLATFORM.moduleName('resources/elements/content-editor-template-preview/template-preview-layout-container/template-preview-layout-container'));\n}\n","import { autoinject, bindable, ObserverLocator, Parser } from 'aurelia-framework';\nimport { LayoutStyles } from 'common/aurelia-components/content-editor/universal-layout-container/universal-layout-container';\nimport { selectState, SelectStateObservableComponent } from 'common/aurelia-decorators/select-state';\nimport { SubscriptionManager, SubscriptionManagerService } from 'common/aurelia-services/SubscriptionManagerService';\nimport { ILayoutContainerChildInfo, ITemplateLayoutContainerDto, LayoutContainerDirection } from 'common/dto/course/layout.container.interface';\nimport { layoutContainerByIdSelectorCreator, layoutContainerChildIdsOrderedSelectorCreator, layoutContainerChildInfoOrderedSelectorCreator } from 'store/template.selectors';\n\nenum Mode {\n Block = 'block',\n Children = 'children',\n}\n\n@autoinject()\nexport class TemplatePreviewLayoutContainer extends SelectStateObservableComponent {\n @bindable() public layoutContainerId: number | null = null;\n\n @selectState(TemplatePreviewLayoutContainer, layoutContainerByIdSelectorCreator, ['layoutContainerId']) private layoutContainer?: ITemplateLayoutContainerDto | null;\n @selectState(TemplatePreviewLayoutContainer, layoutContainerChildIdsOrderedSelectorCreator, ['layoutContainerId']) private orderedChildIds?: Array;\n @selectState(TemplatePreviewLayoutContainer, layoutContainerChildInfoOrderedSelectorCreator, ['layoutContainerId']) private orderedChildInfos?: Array;\n private styleClasses: string | null = null;\n private layoutStyles: LayoutStyles | null = null;\n private mode: Mode | null = null;\n private domElement: HTMLElement;\n private scaleFactor = 1;\n\n private subscriptionManager: SubscriptionManager;\n\n constructor(\n element: Element,\n parser: Parser,\n observerLocator: ObserverLocator,\n subscriptionManagerService: SubscriptionManagerService,\n ) {\n super(parser, observerLocator);\n this.domElement = element as HTMLElement;\n this.subscriptionManager = subscriptionManagerService.createSubscriptionManager();\n }\n\n protected attached(): void {\n this.subscribeToResize();\n }\n\n protected detached(): void {\n this.subscriptionManager.disposeSubscriptions();\n }\n\n private layoutContainerChanged(): void {\n this.updateStyles();\n this.updateContentStyles();\n }\n\n private orderedChildInfosChanged(): void {\n this.updateContentStyles();\n }\n\n private updateStyles(): void {\n const styles = ['template-preview-layout-container'];\n\n if(this.layoutContainer != null) {\n this.mode = this.layoutContainer.templateBlockType == null ? Mode.Children : Mode.Block;\n styles.push(`template-preview-layout-container--content-mode-${this.mode}`);\n\n const {\n border,\n shadow,\n spacing,\n } = this.layoutContainer.style;\n const prefix = 'template-preview-layout-container--style';\n\n if(border) styles.push(`${prefix}-border`);\n if(shadow) styles.push(`${prefix}-shadow`);\n if(spacing) styles.push(`${prefix}-spacing`);\n\n if(this.domElement.isConnected) {\n const { backgroundColor } = this.layoutContainer.style;\n this.domElement.style.setProperty('--template-preview-layout-container-background-color', backgroundColor != null\n ? backgroundColor\n : 'transparent');\n }\n }\n this.styleClasses = styles.join(' ');\n }\n\n /**\n * for templates content mode is always extrinsic as we don't have any intrinsic block sizes\n */\n private updateContentStyles(): void {\n if(this.layoutContainer == null || this.orderedChildInfos == null) {\n this.layoutStyles = null;\n return;\n }\n\n const { templateBlockType, layout: { direction } } = this.layoutContainer;\n\n if(templateBlockType != null) {\n this.layoutStyles = null;\n return;\n }\n\n const horizontal = direction === LayoutContainerDirection.Horizontal;\n const gridValue = this.orderedChildInfos.map(childInfo => {\n const adjustedSize = Math.abs(childInfo.itemSize).toFixed(0);\n return `minmax(0, ${adjustedSize}fr)`;\n }).join(' ');\n\n this.layoutStyles = {\n 'grid-template-columns': horizontal ? gridValue : '1fr',\n 'grid-template-rows': horizontal ? '1fr' : gridValue,\n };\n }\n\n private subscribeToResize(): void {\n if(!this.domElement.isConnected) return;\n this.subscriptionManager.disposeSubscriptions();\n\n this.subscriptionManager.subscribeToElementResize(this.domElement, this.updateScaleFactor.bind(this));\n }\n\n private updateScaleFactor(): void {\n const width = parseFloat(window.getComputedStyle(this.domElement).width);\n this.scaleFactor = width / 1920; // magic number, by design everything has normal/default size when the slide is 1920px wide\n }\n}\n","import { ICourseGroupResponseDto } from 'common/dto/course/course.group.interface';\nimport { ICourseEditResponseDto } from 'common/dto/course/management/course.management.interface';\nimport { autoinject, bindable } from 'aurelia-framework';\nimport { DomUtils } from 'common/utils/DomUtils';\n\n/**\n * @event {RemoveCourseAndGroupClickedEvent} remove-course-and-group-clicked\n */\n@autoinject()\nexport class CourseAndGroupListItem {\n @bindable() public course: ICourseEditResponseDto | null = null;\n @bindable() public courseGroup: ICourseGroupResponseDto | null = null;\n @bindable() public removable: boolean = true;\n private domElement: HTMLElement;\n\n constructor(\n element: Element,\n ) {\n this.domElement = element as HTMLElement;\n }\n\n private handleRemoveCourseAndGroupClick(): void {\n DomUtils.fireEvent(this.domElement, {\n name: 'remove-course-and-group-clicked',\n bubbles: false,\n detail: {\n course: this.course,\n courseGroup: this.courseGroup\n }\n });\n }\n}\n\nexport type RemoveCourseAndGroupClickedEvent = CustomEvent<{\n course: ICourseEditResponseDto | null;\n courseGroup: ICourseGroupResponseDto | null;\n}>;","import { autoinject, bindable, computedFrom } from 'aurelia-framework';\nimport { ICourseGroupResponseDto } from 'common/dto/course/course.group.interface';\nimport { ICourseEditResponseDto } from 'common/dto/course/management/course.management.interface';\nimport { ArrayUtils } from 'common/utils/ArrayUtils';\nimport { I18N } from 'aurelia-i18n';\nimport { assertNotNullOrUndefined } from 'common/utils/assert';\nimport { DomUtils } from 'common/utils/DomUtils';\nimport { ValidationUtils } from '../../../utils/ValidationUtils';\nimport { TenantApiService } from '../../../services/api/TenantApiService';\nimport { StudentService } from '../../../services/StudentService';\nimport { DateService } from '../../../services/DateService';\nimport { DEFAULT_MAX_DAYS_TO_EXAM, DEFAULT_MIN_DAYS_TO_EXAM } from 'common/constants/course.constants';\nimport { LearnGoalUtils } from 'common/utils/LearnGoalUtils';\n\ninterface ICourseWithAvailability extends ICourseEditResponseDto {\n info: string;\n available: boolean;\n}\n\n/**\n * @event {AddCourseAndGroupClickedEvent} add-course-and-group-clicked\n */\n@autoinject()\nexport class CourseAndGroupSelect {\n @bindable() public unavailableCourseIds: number[] = [];\n @bindable() public examDate: string | null = null;\n private allCourses: ICourseEditResponseDto[] = [];\n private availableCourses: Array = [];\n private availableCourseCourseGroups: Array> = [];\n private selectedCourse: ICourseEditResponseDto | null = null;\n private selectedCourseGroup: ICourseGroupResponseDto | null = null;\n private examDateError: string | null = null;\n\n private noGroupInCourse = false;\n private domElement: HTMLElement;\n\n constructor(\n private tenantApi: TenantApiService,\n private studentService: StudentService,\n private dateService: DateService,\n private i18N: I18N,\n element: Element,\n ) {\n this.domElement = element as HTMLElement;\n }\n\n protected async attached(): Promise {\n this.allCourses = await this.tenantApi.getAvailableRegularCourses();\n this.updateAvailableCourses();\n }\n\n private unavailableCourseIdsChanged(): void {\n if(!this.domElement.isConnected) return;\n this.updateAvailableCourses();\n }\n\n private async updateAvailableCourses(): Promise {\n const coursesWithAvailability: ICourseWithAvailability[] = this.allCourses.map(c => {\n const available = !this.unavailableCourseIds.includes(c.id);\n const infoText = this.i18N.tr('dialogs.invitationCreate.alreadyParticipant');\n return {\n ...c,\n available,\n info: `${c.title} (${infoText})`,\n };\n });\n\n this.availableCourses = ArrayUtils.immutableSort(coursesWithAvailability, (a, b) => {\n const aAvailable = a.available ? -1 : 1;\n const bAvailable = b.available ? -1 : 1;\n return aAvailable - bAvailable || a.title.localeCompare(b.title);\n });\n\n if(!this.availableCourses.length) return;\n this.selectedCourse = this.isInvitedToAllCourses ? null : this.availableCourses[0];\n await this.handleSelectedCourseChanged(this.availableCourses[0].id, null);\n }\n\n private async handleSelectedCourseChanged(courseId: number, createdCourseGroup: ICourseGroupResponseDto | null = null): Promise {\n this.availableCourseCourseGroups = [];\n this.noGroupInCourse = true;\n this.selectedCourseGroup = null;\n this.availableCourseCourseGroups = await this.getCourseGroupsForCourse(courseId);\n if(!this.availableCourseCourseGroups.length && createdCourseGroup) {\n this.availableCourseCourseGroups.push(createdCourseGroup);\n }\n this.availableCourseCourseGroups = ArrayUtils.immutableSort(this.availableCourseCourseGroups, (a, b) => a.name.localeCompare(b.name));\n this.noGroupInCourse = !this.availableCourseCourseGroups.length;\n }\n\n private async getCourseGroupsForCourse(courseId: number): Promise>> {\n const filterDate = this.dateService.formatDateForApiFilter(new Date());\n return this.tenantApi.getAvailableCourseGroups([courseId], filterDate);\n }\n\n private async handleCreateCourseGroupClick(): Promise {\n const { selectedCourse } = this;\n assertNotNullOrUndefined(selectedCourse, 'can not create a courseGroup without a course');\n const createdCourseGroup = await this.studentService.createCourseGroup([selectedCourse]);\n if(createdCourseGroup?.to && !this.dateService.isInPast(createdCourseGroup?.to)) {\n await this.handleSelectedCourseChanged(selectedCourse.id, createdCourseGroup);\n }\n }\n\n private handleAddCourseAndGroupClick(): void {\n this.examDateError = ValidationUtils.isExamDateValid(this.examDate, this.selectedCourse?.minDaysToExam ?? DEFAULT_MIN_DAYS_TO_EXAM, this.maxDaysToExam);\n if(this.examDateError) return;\n\n DomUtils.fireEvent(this.domElement, {\n name: 'add-course-and-group-clicked',\n bubbles: false,\n detail: {\n selectedCourse: this.selectedCourse,\n examDate: this.examDate,\n selectedCourseGroup: this.selectedCourseGroup\n }\n });\n }\n\n @computedFrom('availableCourses.length')\n private get isInvitedToAllCourses(): boolean {\n return this.availableCourses.every(c => !c.available);\n }\n\n @computedFrom('selectedCourse')\n private get maxDaysToExam(): number {\n if(!this.selectedCourse) return DEFAULT_MAX_DAYS_TO_EXAM;\n return LearnGoalUtils.getDaysToExamMaximumFromExpirationInMonths(this.selectedCourse?.accessCodeExpirationInMonths);\n }\n}\n\nexport type AddCourseAndGroupClickedEvent = CustomEvent<{\n selectedCourse: ICourseEditResponseDto | null;\n examDate: string | null;\n selectedCourseGroup: ICourseGroupResponseDto | null;\n}>;"],"names":[],"sourceRoot":""}