MOBILE-3913 timeline: Search activities on timeline block

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",

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,

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;
 

src/addons/block/timeline/components/timeline/addon-block-timeline.html

@@ -4,7 +4,7 @@
     </ion-label>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" [fullscreen]="false">
-    <ion-row class="ion-no-padding ion-justify-content-between">
+    <ion-row class="ion-no-padding ion-justify-content-between ion-align-items-center">
         <ion-col size="auto" class="ion-no-padding">
             <core-combobox [selection]="filter" (onChange)="switchFilter($event)" icon="fas-filter">
                 <ion-select-option class="ion-text-wrap" value="all">
@@ -30,6 +30,12 @@
                 </ion-select-option>
             </core-combobox>
         </ion-col>
+        <ion-col class="ion-no-padding ion-hide-md-down" *ngIf="searchEnabled">
+            <!-- Filter courses. -->
+            <core-search-box (onSubmit)="searchTextChanged($event)" (onClear)="searchTextChanged()"
+                [placeholder]="'addon.block_timeline.searchevents' | translate" autocorrect="off" spellcheck="false" lengthCheck="2"
+                searchArea="AddonBlockTimeline"></core-search-box>
+        </ion-col>
         <ion-col size="auto" class="ion-no-padding">
             <core-combobox [label]="'core.sortby' | translate" [selection]="sort" (onChange)="switchSort($event)"
                 icon="fas-sort-amount-down-alt">
@@ -42,6 +48,14 @@
             </core-combobox>
         </ion-col>
     </ion-row>
+    <ion-row class="ion-no-padding ion-hide-md-up" *ngIf="searchEnabled">
+        <ion-col class="ion-no-padding">
+            <!-- Filter courses. -->
+            <core-search-box (onSubmit)="searchTextChanged($event)" (onClear)="searchTextChanged()"
+                [placeholder]="'addon.block_timeline.searchevents' | translate" autocorrect="off" spellcheck="false" lengthCheck="2"
+                searchArea="AddonBlockTimeline"></core-search-box>
+        </ion-col>
+    </ion-row>
 
     <core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'" [fullscreen]="false">
         <addon-block-timeline-events [events]="timeline.events" [canLoadMore]="timeline.canLoadMore" (loadMore)="loadMore()"

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<void> {
         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<void> {
-        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 & {

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"
 }

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,19 +71,20 @@ export class AddonBlockTimelineProvider {
             cacheKey: this.getActionEventsByCourseCacheKey(courseId),
         };
 
+        if (searchValue != '') {
+            data.searchvalue = searchValue;
+            preSets.getFromCache = false;
+        }
+
         const courseEvents = await site.read<AddonCalendarEvents>(
             '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.');
-    }
-
     /**
      * Get cache key for get calendar action events for the given course value WS call.
      *
@@ -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<AddonCalendarEventsGroupedByCourse>(
             '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,13 +182,17 @@ export class AddonBlockTimelineProvider {
             uniqueCacheKey: true,
         };
 
+        if (searchValue != '') {
+            data.searchvalue = searchValue;
+            preSets.getFromCache = false;
+        }
+
         const result = await site.read<AddonCalendarEvents>(
             'core_calendar_get_action_events_by_timesort',
             data,
             preSets,
         );
 
-        if (result && result.events) {
         const canLoadMore = result.events.length >= limitnum ? result.lastid : undefined;
 
         // Filter events by time in case it uses cache.
@@ -189,9 +204,6 @@ export class AddonBlockTimelineProvider {
         };
     }
 
-        throw new CoreError('No events returned on core_calendar_get_action_events_by_timesort.');
-    }
-
     /**
      * Get prefix cache key for calendar action events based on the timesort value WS calls.
      *

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.
 };
 
 /**

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,

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) {

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;
+        }
+    }
+}

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 {
 

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-top: 8px;
-        margin-bottom: 10px;
+        margin-bottom: 8px;
     }
 
     ion-button.button {
-        margin-left: 0;
+        margin: 0;
-        margin-right: 0;
     }
 
     .core-search-history {
@@ -37,4 +36,9 @@
         padding-left: 0;
         padding-right: 0;
     }
+
+
+    ion-item {
+        --min-height: var(--a11y-min-target-size);
+    }
 }

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() spellcheck: string | boolean = true; // Enables/disable Spellchecker on search text input.
-    @Input() autoFocus?: string | boolean; // Enables/disable Autofocus when entering view.
+    @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.

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 {