From 1e2eb7e4fb7de87038b28d9c0ac5820df8b83008 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Tue, 1 Feb 2022 11:40:31 +0100 Subject: [PATCH 1/2] MOBILE-3915 course: Align icons on course index --- .../components/course-index/course-index.html | 78 ++++++------ .../components/course-index/course-index.scss | 9 +- .../components/course-index/course-index.ts | 111 ++++++++++-------- .../components/format/core-course-format.html | 1 - .../course/components/format/format.ts | 39 ++++-- 5 files changed, 131 insertions(+), 107 deletions(-) diff --git a/src/core/features/course/components/course-index/course-index.html b/src/core/features/course/components/course-index/course-index.html index 7a97a6b41..b0f6d03a3 100644 --- a/src/core/features/course/components/course-index/course-index.html +++ b/src/core/features/course/components/course-index/course-index.html @@ -12,9 +12,9 @@ - - + +

@@ -22,16 +22,17 @@

- - - + + +

@@ -42,37 +43,34 @@ -

- - - - - - - - - - - -

- - -

- - - - + + + + + + + + + + + +

+ + +

+ + + -
+ diff --git a/src/core/features/course/components/course-index/course-index.scss b/src/core/features/course/components/course-index/course-index.scss index 8ef120471..f9ee8c8ba 100644 --- a/src/core/features/course/components/course-index/course-index.scss +++ b/src/core/features/course/components/course-index/course-index.scss @@ -16,18 +16,21 @@ ion-icon.completioninfo { width: 18px; } -ion-item.section::part(native) { +ion-item::part(native) { --padding-start: 0; } -ion-icon.expandable-status-icon { +ion-icon { margin: 0; @include padding(12px, 32px, 12px, 16px); } +ion-item.core-course-index-all::part(native) { + --padding-start: 16px; +} + ion-item.item-current ion-icon.expandable-status-icon { @include padding(null, null, null, 11px); - } ion-icon.restricted { diff --git a/src/core/features/course/components/course-index/course-index.ts b/src/core/features/course/components/course-index/course-index.ts index a7b871765..b33f61ee3 100644 --- a/src/core/features/course/components/course-index/course-index.ts +++ b/src/core/features/course/components/course-index/course-index.ts @@ -13,19 +13,18 @@ // limitations under the License. import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; - -import { CoreCourseModuleData, CoreCourseSection } from '@features/course/services/course-helper'; import { CoreCourseModuleCompletionStatus, CoreCourseModuleCompletionTracking, CoreCourseProvider, } from '@features/course/services/course'; -import { CoreCourseAnyCourseData } from '@features/courses/services/courses'; -import { CoreUtils } from '@services/utils/utils'; -import { ModalController } from '@singletons'; +import { CoreCourseSection } from '@features/course/services/course-helper'; import { CoreCourseFormatDelegate } from '@features/course/services/format-delegate'; +import { CoreCourseAnyCourseData } from '@features/courses/services/courses'; import { IonContent } from '@ionic/angular'; import { CoreDomUtils } from '@services/utils/dom'; +import { CoreUtils } from '@services/utils/utils'; +import { ModalController } from '@singletons'; /** * Component to display course index modal. @@ -39,13 +38,13 @@ export class CoreCourseCourseIndexComponent implements OnInit { @ViewChild(IonContent) content?: IonContent; - @Input() sections?: CourseIndexSection[]; + @Input() sections: CoreCourseSection[] = []; @Input() selectedId?: number; @Input() course?: CoreCourseAnyCourseData; - stealthModulesSectionId = CoreCourseProvider.STEALTH_MODULES_SECTION_ID; allSectionId = CoreCourseProvider.ALL_SECTIONS_ID; highlighted?: string; + sectionsToRender: CourseIndexSection[] = []; constructor( protected elementRef: ElementRef, @@ -70,29 +69,47 @@ export class CoreCourseCourseIndexComponent implements OnInit { return; } - // Collapse all sections first. - this.sections.forEach((section) => section.expanded = false); - const currentSection = await CoreCourseFormatDelegate.getCurrentSection(this.course, this.sections); - currentSection.highlighted = true; + if (this.selectedId === undefined) { - currentSection.expanded = true; + // Highlight current section if none is selected. this.selectedId = currentSection.id; - } else { - const selectedSection = this.sections.find((section) => section.id == this.selectedId); - if (selectedSection) { - selectedSection.expanded = true; - } } - this.sections.forEach((section) => { - section.modules.forEach((module) => { - module.completionStatus = module.completiondata === undefined || - module.completiondata.tracking == CoreCourseModuleCompletionTracking.COMPLETION_TRACKING_NONE - ? undefined - : module.completiondata.state; + // Clone sections to add information. + this.sectionsToRender = this.sections + .filter((section) => !section.hiddenbynumsections && + section.id != CoreCourseProvider.STEALTH_MODULES_SECTION_ID && + section.uservisible !== false) + .map((section) => { + const modules = section.modules + .filter((module) => module.visibleoncoursepage !== 0 && !module.noviewlink) + .map((module) => { + const completionStatus = module.completiondata === undefined || + module.completiondata.tracking == CoreCourseModuleCompletionTracking.COMPLETION_TRACKING_NONE + ? undefined + : module.completiondata.state; + + return { + id: module.id, + name: module.name, + course: module.course, + visible: !!module.visible, + uservisible: !!module.uservisible, + completionStatus, + }; + }); + + return { + id: section.id, + name: section.name, + availabilityinfo: !!section.availabilityinfo, + expanded: section.id === this.selectedId, + highlighted: currentSection?.id === section.id, + hasVisibleModules: modules.length > 0, + modules: modules, + }; }); - }); this.highlighted = CoreCourseFormatDelegate.getSectionHightlightedName(this.course); @@ -102,7 +119,7 @@ export class CoreCourseCourseIndexComponent implements OnInit { this.content, '.item.item-current', ); - }, 200); + }, 300); } /** @@ -128,39 +145,33 @@ export class CoreCourseCourseIndexComponent implements OnInit { * Select a section. * * @param event Event. - * @param section Selected section object. + * @param sectionId Selected section id. + * @param moduleId Selected module id, if any. */ - selectSection(event: Event, section: CoreCourseSection): void { - if (section.uservisible !== false) { - ModalController.dismiss({ event, section }); - } - } - - /** - * Select a section and open a module - * - * @param event Event. - * @param section Selected section object. - * @param module Selected module object. - */ - selectModule(event: Event,section: CoreCourseSection, module: CoreCourseModuleData): void { - if (module.uservisible !== false) { - ModalController.dismiss({ event, section, module }); - } + selectSectionOrModule(event: Event, sectionId: number, moduleId?: number): void { + ModalController.dismiss({ event, sectionId, moduleId }); } } -type CourseIndexSection = Omit & { - highlighted?: boolean; - expanded?: boolean; - modules: (CoreCourseModuleData & { +type CourseIndexSection = { + id: number; + name: string; + highlighted: boolean; + expanded: boolean; + hasVisibleModules: boolean; + availabilityinfo: boolean; + modules: { + id: number; + course: number; + visible: boolean; + uservisible: boolean; completionStatus?: CoreCourseModuleCompletionStatus; - })[]; + }[]; }; export type CoreCourseIndexSectionWithModule = { event: Event; - section: CourseIndexSection; - module?: CoreCourseModuleData; + sectionId: number; + moduleId?: number; }; diff --git a/src/core/features/course/components/format/core-course-format.html b/src/core/features/course/components/format/core-course-format.html index e1712fea8..7bacb0dd0 100644 --- a/src/core/features/course/components/format/core-course-format.html +++ b/src/core/features/course/components/format/core-course-format.html @@ -69,7 +69,6 @@ class="section-wrapper" [id]="section.id"> -

diff --git a/src/core/features/course/components/format/format.ts b/src/core/features/course/components/format/format.ts index f6030ede6..2d5067cdc 100644 --- a/src/core/features/course/components/format/format.ts +++ b/src/core/features/course/components/format/format.ts @@ -312,20 +312,33 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy { }, }); - if (data) { - this.sectionChanged(data.section); - if (data.module) { - if (!data.module.handlerData) { - data.module.handlerData = - await CoreCourseModuleDelegate.getModuleDataFor(data.module.modname, data.module, this.course.id); - } - - if (data.module.uservisible !== false && data.module.handlerData?.action) { - data.module.handlerData.action(data.event, data.module, data.module.course); - } - this.moduleId = data.module.id; - } + if (!data) { + return; } + const section = this.sections.find((section) => section.id == data.sectionId); + if (!section) { + return; + } + this.sectionChanged(section); + + if (!data.moduleId) { + return; + } + const module = section.modules.find((module) => module.id == data.moduleId); + if (!module) { + return; + } + + if (!module.handlerData) { + module.handlerData = + await CoreCourseModuleDelegate.getModuleDataFor(module.modname, module, this.course.id); + } + + if (module.uservisible !== false && module.handlerData?.action) { + module.handlerData.action(data.event, module, module.course); + } + + this.moduleId = data.moduleId; } /** From 2c2be04065460f558ec0e4ab8a099890be66a1bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Tue, 1 Feb 2022 16:50:03 +0100 Subject: [PATCH 2/2] MOBILE-3915 chore: Fix some imports --- .../myoverview/components/myoverview/myoverview.ts | 2 +- .../recentlyaccessedcourses/recentlyaccessedcourses.ts | 2 +- .../components/starredcourses/starredcourses.ts | 2 +- src/addons/calendar/calendar-lazy.module.ts | 10 +++++----- src/addons/mod/workshop/services/workshop-helper.ts | 2 +- src/addons/notifications/notifications.module.ts | 2 +- src/addons/privatefiles/pages/index/index.ts | 4 ++-- src/addons/privatefiles/privatefiles.module.ts | 2 +- src/addons/privatefiles/services/handlers/user.ts | 2 +- src/app/app.module.ts | 2 +- src/core/features/courses/services/courses-helper.ts | 2 +- 11 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/addons/block/myoverview/components/myoverview/myoverview.ts b/src/addons/block/myoverview/components/myoverview/myoverview.ts index 9095dc2f1..97258edd6 100644 --- a/src/addons/block/myoverview/components/myoverview/myoverview.ts +++ b/src/addons/block/myoverview/components/myoverview/myoverview.ts @@ -26,7 +26,7 @@ import { CoreSite } from '@classes/site'; import { CoreUtils } from '@services/utils/utils'; import { CoreDomUtils } from '@services/utils/dom'; import { CoreTextUtils } from '@services/utils/text'; -import { AddonCourseCompletion } from '@/addons/coursecompletion/services/coursecompletion'; +import { AddonCourseCompletion } from '@addons/coursecompletion/services/coursecompletion'; import { AddonBlockMyOverviewFilterOptionsComponent } from '../filteroptions/filteroptions'; import { IonSearchbar } from '@ionic/angular'; import moment from 'moment'; diff --git a/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/recentlyaccessedcourses.ts b/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/recentlyaccessedcourses.ts index 9eaa906e6..f3b99dcd6 100644 --- a/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/recentlyaccessedcourses.ts +++ b/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/recentlyaccessedcourses.ts @@ -27,7 +27,7 @@ import { CoreEnrolledCourseDataWithOptions, } from '@features/courses/services/courses-helper'; import { CoreCourseOptionsDelegate } from '@features/course/services/course-options-delegate'; -import { AddonCourseCompletion } from '@/addons/coursecompletion/services/coursecompletion'; +import { AddonCourseCompletion } from '@addons/coursecompletion/services/coursecompletion'; import { CoreBlockBaseComponent } from '@features/block/classes/base-block-component'; import { CoreUtils } from '@services/utils/utils'; import { CoreSite } from '@classes/site'; diff --git a/src/addons/block/starredcourses/components/starredcourses/starredcourses.ts b/src/addons/block/starredcourses/components/starredcourses/starredcourses.ts index 8ec6cfaf9..fc1c47de5 100644 --- a/src/addons/block/starredcourses/components/starredcourses/starredcourses.ts +++ b/src/addons/block/starredcourses/components/starredcourses/starredcourses.ts @@ -21,7 +21,7 @@ import { CoreEnrolledCourseDataWithOptions, } from '@features/courses/services/courses-helper'; import { CoreCourseOptionsDelegate } from '@features/course/services/course-options-delegate'; -import { AddonCourseCompletion } from '@/addons/coursecompletion/services/coursecompletion'; +import { AddonCourseCompletion } from '@addons/coursecompletion/services/coursecompletion'; import { CoreBlockBaseComponent } from '@features/block/classes/base-block-component'; import { CoreUtils } from '@services/utils/utils'; import { CoreSite } from '@classes/site'; diff --git a/src/addons/calendar/calendar-lazy.module.ts b/src/addons/calendar/calendar-lazy.module.ts index 20af6f9a7..d675bf134 100644 --- a/src/addons/calendar/calendar-lazy.module.ts +++ b/src/addons/calendar/calendar-lazy.module.ts @@ -25,26 +25,26 @@ function buildRoutes(injector: Injector): Routes { data: { mainMenuTabRoot: AddonCalendarMainMenuHandlerService.PAGE_NAME, }, - loadChildren: () => import('@/addons/calendar/pages/index/index.module').then(m => m.AddonCalendarIndexPageModule), + loadChildren: () => import('@addons/calendar/pages/index/index.module').then(m => m.AddonCalendarIndexPageModule), }, { path: 'settings', loadChildren: () => - import('@/addons/calendar/pages/settings/settings.module').then(m => m.AddonCalendarSettingsPageModule), + import('@addons/calendar/pages/settings/settings.module').then(m => m.AddonCalendarSettingsPageModule), }, { path: 'day', loadChildren: () => - import('@/addons/calendar/pages/day/day.module').then(m => m.AddonCalendarDayPageModule), + import('@addons/calendar/pages/day/day.module').then(m => m.AddonCalendarDayPageModule), }, { path: 'event/:id', - loadChildren: () => import('@/addons/calendar/pages/event/event.module').then(m => m.AddonCalendarEventPageModule), + loadChildren: () => import('@addons/calendar/pages/event/event.module').then(m => m.AddonCalendarEventPageModule), }, { path: 'edit/:eventId', loadChildren: () => - import('@/addons/calendar/pages/edit-event/edit-event.module').then(m => m.AddonCalendarEditEventPageModule), + import('@addons/calendar/pages/edit-event/edit-event.module').then(m => m.AddonCalendarEditEventPageModule), }, ...buildTabMainRoutes(injector, { redirectTo: 'index', diff --git a/src/addons/mod/workshop/services/workshop-helper.ts b/src/addons/mod/workshop/services/workshop-helper.ts index 94eb54851..3588ca192 100644 --- a/src/addons/mod/workshop/services/workshop-helper.ts +++ b/src/addons/mod/workshop/services/workshop-helper.ts @@ -15,7 +15,7 @@ import { Injectable } from '@angular/core'; import { CoreError } from '@classes/errors/error'; import { CoreFileUploader, CoreFileUploaderStoreFilesResult } from '@features/fileuploader/services/fileuploader'; -import { FileEntry } from '@ionic-native/file'; +import { FileEntry } from '@ionic-native/file/ngx'; import { CoreFile } from '@services/file'; import { CoreFileEntry } from '@services/file-helper'; import { CoreSites } from '@services/sites'; diff --git a/src/addons/notifications/notifications.module.ts b/src/addons/notifications/notifications.module.ts index 0f2142d22..7a4cac5df 100644 --- a/src/addons/notifications/notifications.module.ts +++ b/src/addons/notifications/notifications.module.ts @@ -37,7 +37,7 @@ export const ADDON_NOTIFICATIONS_SERVICES: Type[] = [ const routes: Routes = [ { path: AddonNotificationsMainMenuHandlerService.PAGE_NAME, - loadChildren: () => import('@/addons/notifications/notifications-lazy.module').then(m => m.AddonNotificationsLazyModule), + loadChildren: () => import('@addons/notifications/notifications-lazy.module').then(m => m.AddonNotificationsLazyModule), }, ]; const preferencesRoutes: Routes = [ diff --git a/src/addons/privatefiles/pages/index/index.ts b/src/addons/privatefiles/pages/index/index.ts index 098214023..b159b0ccc 100644 --- a/src/addons/privatefiles/pages/index/index.ts +++ b/src/addons/privatefiles/pages/index/index.ts @@ -28,8 +28,8 @@ import { AddonPrivateFilesFile, AddonPrivateFilesGetUserInfoWSResult, AddonPrivateFilesGetFilesWSParams, -} from '@/addons/privatefiles/services/privatefiles'; -import { AddonPrivateFilesHelper } from '@/addons/privatefiles/services/privatefiles-helper'; +} from '@addons/privatefiles/services/privatefiles'; +import { AddonPrivateFilesHelper } from '@addons/privatefiles/services/privatefiles-helper'; import { CoreUtils } from '@services/utils/utils'; import { CoreNavigator } from '@services/navigator'; diff --git a/src/addons/privatefiles/privatefiles.module.ts b/src/addons/privatefiles/privatefiles.module.ts index 635a80afb..8770ae648 100644 --- a/src/addons/privatefiles/privatefiles.module.ts +++ b/src/addons/privatefiles/privatefiles.module.ts @@ -30,7 +30,7 @@ export const ADDON_PRIVATEFILES_SERVICES: Type[] = [ const routes: Routes = [ { path: AddonPrivateFilesUserHandlerService.PAGE_NAME, - loadChildren: () => import('@/addons/privatefiles/privatefiles-lazy.module').then(m => m.AddonPrivateFilesLazyModule), + loadChildren: () => import('@addons/privatefiles/privatefiles-lazy.module').then(m => m.AddonPrivateFilesLazyModule), }, ]; diff --git a/src/addons/privatefiles/services/handlers/user.ts b/src/addons/privatefiles/services/handlers/user.ts index 5b18fcb8d..5aad0dd54 100644 --- a/src/addons/privatefiles/services/handlers/user.ts +++ b/src/addons/privatefiles/services/handlers/user.ts @@ -14,7 +14,7 @@ import { Injectable } from '@angular/core'; -import { AddonPrivateFiles } from '@/addons/privatefiles/services/privatefiles'; +import { AddonPrivateFiles } from '@addons/privatefiles/services/privatefiles'; import { makeSingleton } from '@singletons'; import { CoreUserDelegateContext, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6da789ef6..6ae88d2a5 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -24,7 +24,7 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { CoreModule } from '@/core/core.module'; -import { AddonsModule } from '@/addons/addons.module'; +import { AddonsModule } from '@addons/addons.module'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; diff --git a/src/core/features/courses/services/courses-helper.ts b/src/core/features/courses/services/courses-helper.ts index aa794077b..cb0e7b1f4 100644 --- a/src/core/features/courses/services/courses-helper.ts +++ b/src/core/features/courses/services/courses-helper.ts @@ -24,7 +24,7 @@ import { } from './courses'; import { makeSingleton, Translate } from '@singletons'; import { CoreWSExternalFile } from '@services/ws'; -import { AddonCourseCompletion } from '@/addons/coursecompletion/services/coursecompletion'; +import { AddonCourseCompletion } from '@addons/coursecompletion/services/coursecompletion'; /** * Helper to gather some common courses functions.