diff --git a/scripts/langindex.json b/scripts/langindex.json index 6f9b71abf..a8d9ddc2b 100644 --- a/scripts/langindex.json +++ b/scripts/langindex.json @@ -73,6 +73,7 @@ "addon.block_timeline.noevents": "block_timeline", "addon.block_timeline.overdue": "block_timeline", "addon.block_timeline.pluginname": "block_timeline", + "addon.block_timeline.searchevents": "block_timeline", "addon.block_timeline.sortbycourses": "block_timeline", "addon.block_timeline.sortbydates": "block_timeline", "addon.blog.blog": "blog", diff --git a/src/addons/block/timeline/components/components.module.ts b/src/addons/block/timeline/components/components.module.ts index f54298186..00c06106d 100644 --- a/src/addons/block/timeline/components/components.module.ts +++ b/src/addons/block/timeline/components/components.module.ts @@ -18,6 +18,7 @@ import { CoreSharedModule } from '@/core/shared.module'; import { AddonBlockTimelineComponent } from './timeline/timeline'; import { AddonBlockTimelineEventsComponent } from './events/events'; +import { CoreSearchComponentsModule } from '@features/search/components/components.module'; @NgModule({ declarations: [ @@ -26,6 +27,7 @@ import { AddonBlockTimelineEventsComponent } from './events/events'; ], imports: [ CoreSharedModule, + CoreSearchComponentsModule, ], exports: [ AddonBlockTimelineComponent, diff --git a/src/addons/block/timeline/components/events/events.ts b/src/addons/block/timeline/components/events/events.ts index b9047ff2b..4e0155873 100644 --- a/src/addons/block/timeline/components/events/events.ts +++ b/src/addons/block/timeline/components/events/events.ts @@ -52,7 +52,7 @@ export class AddonBlockTimelineEventsComponent implements OnChanges { this.showCourse = !this.course; if (changes.events || changes.from || changes.to) { - if (this.events && this.events.length > 0) { + if (this.events) { const filteredEvents = await this.filterEventsByTime(this.from, this.to); this.empty = !filteredEvents || filteredEvents.length <= 0; diff --git a/src/addons/block/timeline/components/timeline/addon-block-timeline.html b/src/addons/block/timeline/components/timeline/addon-block-timeline.html index a955b9b69..a0774f1d9 100644 --- a/src/addons/block/timeline/components/timeline/addon-block-timeline.html +++ b/src/addons/block/timeline/components/timeline/addon-block-timeline.html @@ -2,41 +2,61 @@

{{ 'addon.block_timeline.pluginname' | translate }}

 - - - - - - -
- - - {{ 'core.all' | translate }} - - - {{ 'addon.block_timeline.overdue' | translate }} - - - {{ 'addon.block_timeline.duedate' | translate }} - - - {{ 'addon.block_timeline.next7days' | translate }} - - - {{ 'addon.block_timeline.next30days' | translate }} - - - {{ 'addon.block_timeline.next3months' | translate }} - - - {{ 'addon.block_timeline.next6months' | translate }} - - -
+ + + + + {{ 'core.all' | translate }} + + + {{ 'addon.block_timeline.overdue' | translate }} + + + {{ 'addon.block_timeline.duedate' | translate }} + + + {{ 'addon.block_timeline.next7days' | translate }} + + + {{ 'addon.block_timeline.next30days' | translate }} + + + {{ 'addon.block_timeline.next3months' | translate }} + + + {{ 'addon.block_timeline.next6months' | translate }} + + + + + + + + + + + {{'addon.block_timeline.sortbydates' | translate}} + + + {{'addon.block_timeline.sortbycourses' | translate}} + + + + + + + + + + + diff --git a/src/addons/block/timeline/components/timeline/timeline.ts b/src/addons/block/timeline/components/timeline/timeline.ts index 2eb6979df..969658ee7 100644 --- a/src/addons/block/timeline/components/timeline/timeline.ts +++ b/src/addons/block/timeline/components/timeline/timeline.ts @@ -59,6 +59,9 @@ export class AddonBlockTimelineComponent extends CoreBlockBaseComponent implemen dataFrom?: number; dataTo?: number; + searchEnabled = false; + searchText = ''; + protected courseIds: number[] = []; protected fetchContentDefaultError = 'Error getting timeline data.'; @@ -85,6 +88,8 @@ export class AddonBlockTimelineComponent extends CoreBlockBaseComponent implemen this.sort = await this.currentSite.getLocalSiteConfig('AddonBlockTimelineSort', this.sort); + this.searchEnabled = this.currentSite.isVersionGreaterEqualThan('4.0'); + super.ngOnInit(); } @@ -135,7 +140,8 @@ export class AddonBlockTimelineComponent extends CoreBlockBaseComponent implemen async loadMore(course?: AddonBlockTimelineCourse): Promise { try { if (course) { - const courseEvents = await AddonBlockTimeline.getActionEventsByCourse(course.id, course.canLoadMore); + const courseEvents = + await AddonBlockTimeline.getActionEventsByCourse(course.id, course.canLoadMore, this.searchText); course.events = course.events?.concat(courseEvents.events); course.canLoadMore = courseEvents.canLoadMore; } else { @@ -153,7 +159,7 @@ export class AddonBlockTimelineComponent extends CoreBlockBaseComponent implemen * @return Promise resolved when done. */ protected async fetchMyOverviewTimeline(afterEventId?: number): Promise { - const events = await AddonBlockTimeline.getActionEventsByTimesort(afterEventId); + const events = await AddonBlockTimeline.getActionEventsByTimesort(afterEventId, this.searchText); this.timeline.events = events.events; this.timeline.canLoadMore = events.canLoadMore; @@ -174,7 +180,7 @@ export class AddonBlockTimelineComponent extends CoreBlockBaseComponent implemen if (this.timelineCourses.courses.length > 0) { this.courseIds = this.timelineCourses.courses.map((course) => course.id); - const courseEvents = await AddonBlockTimeline.getActionEventsByCourses(this.courseIds); + const courseEvents = await AddonBlockTimeline.getActionEventsByCourses(this.courseIds, this.searchText); this.timelineCourses.courses = this.timelineCourses.courses.filter((course) => { if (courseEvents[course.id].events.length == 0) { @@ -243,6 +249,17 @@ export class AddonBlockTimelineComponent extends CoreBlockBaseComponent implemen } } + /** + * Search text changed. + * + * @param searchValue Search value + */ + searchTextChanged(searchValue = ''): void { + this.searchText = searchValue || ''; + + this.fetchContent(); + } + } export type AddonBlockTimelineCourse = CoreEnrolledCourseDataWithOptions & { diff --git a/src/addons/block/timeline/lang.json b/src/addons/block/timeline/lang.json index fbd482f47..10c8b2859 100644 --- a/src/addons/block/timeline/lang.json +++ b/src/addons/block/timeline/lang.json @@ -8,6 +8,7 @@ "noevents": "No upcoming activities due", "overdue": "Overdue", "pluginname": "Timeline", + "searchevents": "Search by activity type or name", "sortbycourses": "Sort by courses", "sortbydates": "Sort by dates" -} \ No newline at end of file +} diff --git a/src/addons/block/timeline/services/timeline.ts b/src/addons/block/timeline/services/timeline.ts index c2e646f00..0dbddde01 100644 --- a/src/addons/block/timeline/services/timeline.ts +++ b/src/addons/block/timeline/services/timeline.ts @@ -26,7 +26,6 @@ import { import moment from 'moment'; import { makeSingleton } from '@singletons'; import { CoreSiteWSPreSets } from '@classes/site'; -import { CoreError } from '@classes/errors/error'; // Cache key was maintained from block myoverview when blocks were splitted. const ROOT_CACHE_KEY = 'myoverview:'; @@ -45,12 +44,14 @@ export class AddonBlockTimelineProvider { * * @param courseId Only events in this course. * @param afterEventId The last seen event id. + * @param searchValue The value a user wishes to search against. * @param siteId Site ID. If not defined, use current site. * @return Promise resolved when the info is retrieved. */ async getActionEventsByCourse( courseId: number, afterEventId?: number, + searchValue = '', siteId?: string, ): Promise<{ events: AddonCalendarEvent[]; canLoadMore?: number }> { const site = await CoreSites.getSite(siteId); @@ -70,17 +71,18 @@ export class AddonBlockTimelineProvider { cacheKey: this.getActionEventsByCourseCacheKey(courseId), }; + if (searchValue != '') { + data.searchvalue = searchValue; + preSets.getFromCache = false; + } + const courseEvents = await site.read( 'core_calendar_get_action_events_by_course', data, preSets, ); - if (courseEvents && courseEvents.events) { - return this.treatCourseEvents(courseEvents, time); - } - - throw new CoreError('No events returned on core_calendar_get_action_events_by_course.'); + return this.treatCourseEvents(courseEvents, time); } /** @@ -98,10 +100,12 @@ export class AddonBlockTimelineProvider { * * @param courseIds Course IDs. * @param siteId Site ID. If not defined, use current site. + * @param searchValue The value a user wishes to search against. * @return Promise resolved when the info is retrieved. */ async getActionEventsByCourses( courseIds: number[], + searchValue = '', siteId?: string, ): Promise<{[courseId: string]: { events: AddonCalendarEvent[]; canLoadMore?: number } }> { const site = await CoreSites.getSite(siteId); @@ -117,6 +121,11 @@ export class AddonBlockTimelineProvider { cacheKey: this.getActionEventsByCoursesCacheKey(), }; + if (searchValue != '') { + data.searchvalue = searchValue; + preSets.getFromCache = false; + } + const events = await site.read( 'core_calendar_get_action_events_by_courses', data, @@ -145,11 +154,13 @@ export class AddonBlockTimelineProvider { * Get calendar action events based on the timesort value. * * @param afterEventId The last seen event id. + * @param searchValue The value a user wishes to search against. * @param siteId Site ID. If not defined, use current site. * @return Promise resolved when the info is retrieved. */ async getActionEventsByTimesort( afterEventId?: number, + searchValue = '', siteId?: string, ): Promise<{ events: AddonCalendarEvent[]; canLoadMore?: number }> { const site = await CoreSites.getSite(siteId); @@ -171,25 +182,26 @@ export class AddonBlockTimelineProvider { uniqueCacheKey: true, }; + if (searchValue != '') { + data.searchvalue = searchValue; + preSets.getFromCache = false; + } + const result = await site.read( 'core_calendar_get_action_events_by_timesort', data, preSets, ); - if (result && result.events) { - const canLoadMore = result.events.length >= limitnum ? result.lastid : undefined; + const canLoadMore = result.events.length >= limitnum ? result.lastid : undefined; - // Filter events by time in case it uses cache. - const events = result.events.filter((element) => element.timesort >= timesortfrom); + // Filter events by time in case it uses cache. + const events = result.events.filter((element) => element.timesort >= timesortfrom); - return { - events, - canLoadMore, - }; - } - - throw new CoreError('No events returned on core_calendar_get_action_events_by_timesort.'); + return { + events, + canLoadMore, + }; } /** diff --git a/src/addons/calendar/services/calendar.ts b/src/addons/calendar/services/calendar.ts index 815254572..17c60c3bf 100644 --- a/src/addons/calendar/services/calendar.ts +++ b/src/addons/calendar/services/calendar.ts @@ -1785,6 +1785,7 @@ export type AddonCalendarGetActionEventsByCoursesWSParams = { timesortfrom?: number; // Time sort from. timesortto?: number; // Time sort to. limitnum?: number; // Limit number. + searchvalue?: string; // The value a user wishes to search against. }; /** @@ -1804,6 +1805,7 @@ export type AddonCalendarGetActionEventsByCourseWSParams = { timesortto?: number; // Time sort to. aftereventid?: number; // The last seen event id. limitnum?: number; // Limit number. + searchvalue?: string; // The value a user wishes to search against. }; /** @@ -1816,6 +1818,7 @@ export type AddonCalendarGetActionEventsByTimesortWSParams = { limitnum?: number; // Limit number. limittononsuspendedevents?: boolean; // Limit the events to courses the user is not suspended in. userid?: number; // The user id. + searchvalue?: string; // The value a user wishes to search against. }; /** diff --git a/src/core/components/combobox/combobox.scss b/src/core/components/combobox/combobox.scss index 501321352..566c1274e 100644 --- a/src/core/components/combobox/combobox.scss +++ b/src/core/components/combobox/combobox.scss @@ -2,6 +2,7 @@ :host { max-width: 100%; + display: block; @include margin-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right)); ion-select, @@ -87,6 +88,10 @@ ion-select { background: var(--background-focused); opacity: var(--background-focused-opacity); } + + &[hidden] { + display: none !important; + } } ion-button { diff --git a/src/core/components/combobox/combobox.ts b/src/core/components/combobox/combobox.ts index 617e6801d..c66579939 100644 --- a/src/core/components/combobox/combobox.ts +++ b/src/core/components/combobox/combobox.ts @@ -12,10 +12,11 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core'; +import { Component, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core'; import { Translate } from '@singletons'; import { ModalOptions } from '@ionic/core'; import { CoreDomUtils } from '@services/utils/dom'; +import { IonSelect } from '@ionic/angular'; /** * Component that show a combo select button (combobox). @@ -43,6 +44,8 @@ import { CoreDomUtils } from '@services/utils/dom'; }) export class CoreComboboxComponent { + @ViewChild(IonSelect) select!: IonSelect; + @Input() interface: 'popover' | 'modal' = 'popover'; @Input() label = Translate.instant('core.show'); // Aria label. @Input() disabled = false; @@ -51,26 +54,37 @@ export class CoreComboboxComponent { // Additional options when interface modal is selected. @Input() icon?: string; // Icon for modal interface. + @Input() badge?: number; // Badge number to show near the icon. @Input() modalOptions?: ModalOptions; // Will emit an event the value changed. @Input() listboxId = ''; expanded = false; - async showModal(): Promise { - if (this.expanded || !this.modalOptions) { - return; - } - this.expanded = true; + /** + * Shows combobox modal. + * + * @param event Event. + * @return Promise resolved when done. + */ + async openSelect(event?: UIEvent): Promise { + if (this.interface == 'modal') { + if (this.expanded || !this.modalOptions) { + return; + } + this.expanded = true; - if (this.listboxId) { - this.modalOptions.id = this.listboxId; - } + if (this.listboxId) { + this.modalOptions.id = this.listboxId; + } - const data = await CoreDomUtils.openModal(this.modalOptions); - this.expanded = false; + const data = await CoreDomUtils.openModal(this.modalOptions); + this.expanded = false; - if (data) { - this.onChange.emit(data); + if (data) { + this.onChange.emit(data); + } + } else if (this.select) { + this.select.open(event); } } diff --git a/src/core/components/combobox/core-combobox.html b/src/core/components/combobox/core-combobox.html index aad62d2af..6b3d2ceb2 100644 --- a/src/core/components/combobox/core-combobox.html +++ b/src/core/components/combobox/core-combobox.html @@ -1,27 +1,20 @@ - + + + + {{badge}} + + + - + + {{badge}} {{ label }}:
{{selection}} diff --git a/src/core/directives/auto-focus.ts b/src/core/directives/auto-focus.ts index 190f90d19..6aeb4d829 100644 --- a/src/core/directives/auto-focus.ts +++ b/src/core/directives/auto-focus.ts @@ -52,7 +52,7 @@ export class CoreAutoFocusDirective implements AfterViewInit { /** * Function to focus the element. * - * @param retries Internal param to stop retrying then 0. + * @param retries Internal param to stop retrying on 0. */ protected setFocus(retries = 10): void { if (retries == 0) { diff --git a/src/core/features/block/components/side-blocks/side-blocks.scss b/src/core/features/block/components/side-blocks/side-blocks.scss new file mode 100644 index 000000000..fc2f730f2 --- /dev/null +++ b/src/core/features/block/components/side-blocks/side-blocks.scss @@ -0,0 +1,13 @@ +@import "~theme/globals"; + +:host ::ng-deep core-block { + @include media-breakpoint-up(md) { + .ion-hide-md-down { + display: none !important; + } + + .ion-hide-md-up { + display: block !important; + } + } +} diff --git a/src/core/features/block/components/side-blocks/side-blocks.ts b/src/core/features/block/components/side-blocks/side-blocks.ts index eefc8f527..0f817a4a0 100644 --- a/src/core/features/block/components/side-blocks/side-blocks.ts +++ b/src/core/features/block/components/side-blocks/side-blocks.ts @@ -28,6 +28,7 @@ import { CoreCoursesDashboard } from '@features/courses/services/dashboard'; @Component({ selector: 'core-block-side-blocks', templateUrl: 'side-blocks.html', + styleUrls: ['side-blocks.scss'], }) export class CoreBlockSideBlocksComponent implements OnInit { diff --git a/src/core/features/search/components/search-box/search-box.scss b/src/core/features/search/components/search-box/search-box.scss index e3d84473a..4848d54b9 100644 --- a/src/core/features/search/components/search-box/search-box.scss +++ b/src/core/features/search/components/search-box/search-box.scss @@ -1,5 +1,5 @@ :host { - height: 73px; + min-height: 61px; display: block; position: relative; @@ -8,13 +8,12 @@ left: 0; right: 0; z-index: 4; - margin-top: 10px; - margin-bottom: 10px; + margin-top: 8px; + margin-bottom: 8px; } ion-button.button { - margin-left: 0; - margin-right: 0; + margin: 0; } .core-search-history { @@ -37,4 +36,9 @@ padding-left: 0; padding-right: 0; } + + + ion-item { + --min-height: var(--a11y-min-target-size); + } } diff --git a/src/core/features/search/components/search-box/search-box.ts b/src/core/features/search/components/search-box/search-box.ts index 5270c4f1b..275647525 100644 --- a/src/core/features/search/components/search-box/search-box.ts +++ b/src/core/features/search/components/search-box/search-box.ts @@ -41,8 +41,8 @@ export class CoreSearchBoxComponent implements OnInit { @Input() searchLabel?: string; // Label to be used on action button. @Input() placeholder?: string; // Placeholder text for search text input. @Input() autocorrect = 'on'; // Enables/disable Autocorrection on search text input. - @Input() spellcheck?: string | boolean = true; // Enables/disable Spellchecker on search text input. - @Input() autoFocus?: string | boolean; // Enables/disable Autofocus when entering view. + @Input() spellcheck: string | boolean = true; // Enables/disable Spellchecker on search text input. + @Input() autoFocus: string | boolean = false; // Enables/disable Autofocus when entering view. @Input() lengthCheck = 3; // Check value length before submit. If 0, any string will be submitted. @Input() showClear = true; // Show/hide clear button. @Input() disabled = false; // Disables the input text. diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index 45f9de0ab..c4c8a8d00 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -172,6 +172,7 @@ ion-app.ios ion-header h2 { .item.ion-text-wrap ion-label core-format-text .core-format-text-content > *, .fake-ion-item.ion-text-wrap core-format-text .core-format-text-content > * { white-space: normal; + overflow: inherit; } .item.ion-text-wrap ion-label {