Merge pull request #3006 from crazyserver/MOBILE-3913

Mobile 3913

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

@@ -2,41 +2,61 @@
     <ion-label>
         <h2>{{ 'addon.block_timeline.pluginname' | translate }}</h2>
     </ion-label>
-    <core-context-menu slot="end">
-        <core-context-menu-item *ngIf="loaded" [priority]="900" [content]="'addon.block_timeline.sortbydates' | translate"
-            (action)="switchSort('sortbydates')" [iconAction]="sort == 'sortbydates' ? 'far-dot-circle' : 'far-circle'">
-        </core-context-menu-item>
-        <core-context-menu-item *ngIf="loaded" [priority]="800" [content]="'addon.block_timeline.sortbycourses' | translate"
-            (action)="switchSort('sortbycourses')" [iconAction]="sort == 'sortbycourses' ? 'far-dot-circle' : 'far-circle'">
-        </core-context-menu-item>
-    </core-context-menu>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" [fullscreen]="false">
-    <div class="safe-area-padding-horizontal">
+    <ion-row class="ion-no-padding ion-justify-content-between ion-align-items-center">
-        <core-combobox [selection]="filter" (onChange)="switchFilter($event)">
+        <ion-col size="auto" class="ion-no-padding">
-            <ion-select-option class="ion-text-wrap" value="all">
+            <core-combobox [selection]="filter" (onChange)="switchFilter($event)" icon="fas-filter">
-                {{ 'core.all' | translate }}
+                <ion-select-option class="ion-text-wrap" value="all">
-            </ion-select-option>
+                    {{ 'core.all' | translate }}
-            <ion-select-option class="ion-text-wrap" value="overdue">
+                </ion-select-option>
-                {{ 'addon.block_timeline.overdue' | translate }}
+                <ion-select-option class="ion-text-wrap" value="overdue">
-            </ion-select-option>
+                    {{ 'addon.block_timeline.overdue' | translate }}
-            <ion-select-option class="ion-text-wrap core-select-option-title" disabled value="disabled">
+                </ion-select-option>
-                {{ 'addon.block_timeline.duedate' | translate }}
+                <ion-select-option class="ion-text-wrap core-select-option-title" disabled value="disabled">
-            </ion-select-option>
+                    {{ 'addon.block_timeline.duedate' | translate }}
-            <ion-select-option class="ion-text-wrap" value="next7days">
+                </ion-select-option>
-                {{ 'addon.block_timeline.next7days' | translate }}
+                <ion-select-option class="ion-text-wrap" value="next7days">
-            </ion-select-option>
+                    {{ 'addon.block_timeline.next7days' | translate }}
-            <ion-select-option class="ion-text-wrap" value="next30days">
+                </ion-select-option>
-                {{ 'addon.block_timeline.next30days' | translate }}
+                <ion-select-option class="ion-text-wrap" value="next30days">
-            </ion-select-option>
+                    {{ 'addon.block_timeline.next30days' | translate }}
-            <ion-select-option class="ion-text-wrap" value="next3months">
+                </ion-select-option>
-                {{ 'addon.block_timeline.next3months' | translate }}
+                <ion-select-option class="ion-text-wrap" value="next3months">
-            </ion-select-option>
+                    {{ 'addon.block_timeline.next3months' | translate }}
-            <ion-select-option class="ion-text-wrap" value="next6months">
+                </ion-select-option>
-                {{ 'addon.block_timeline.next6months' | translate }}
+                <ion-select-option class="ion-text-wrap" value="next6months">
-            </ion-select-option>
+                    {{ 'addon.block_timeline.next6months' | translate }}
-        </core-combobox>
+                </ion-select-option>
-    </div>
+            </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">
+                <ion-select-option class="ion-text-wrap" value="sortbydates">
+                    {{'addon.block_timeline.sortbydates' | translate}}
+                </ion-select-option>
+                <ion-select-option class="ion-text-wrap" value="sortbycourses">
+                    {{'addon.block_timeline.sortbycourses' | translate}}
+                </ion-select-option>
+            </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()"
             [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>

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,17 +71,18 @@ 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);
-            return this.treatCourseEvents(courseEvents, time);
-        }
-
-        throw new CoreError('No events returned on core_calendar_get_action_events_by_course.');
     }
 
     /**
@@ -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,25 +182,26 @@ 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;
-            const canLoadMore = result.events.length >= limitnum ? result.lastid : undefined;
 
-            // Filter events by time in case it uses cache.
+        // Filter events by time in case it uses cache.
-            const events = result.events.filter((element) => element.timesort >= timesortfrom);
+        const events = result.events.filter((element) => element.timesort >= timesortfrom);
 
-            return {
+        return {
-                events,
+            events,
-                canLoadMore,
+            canLoadMore,
-            };
+        };
-        }
-
-        throw new CoreError('No events returned on core_calendar_get_action_events_by_timesort.');
     }
 
     /**

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,
@@ -87,6 +88,10 @@ ion-select {
         background: var(--background-focused);
         opacity: var(--background-focused-opacity);
     }
+
+    &[hidden] {
+        display: none !important;
+    }
 }
 
 ion-button {

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<void> {
+    /**
-        if (this.expanded || !this.modalOptions) {
+     * Shows combobox modal.
-            return;
+     *
-        }
+     * @param event Event.
-        this.expanded = true;
+     * @return Promise resolved when done.
+     */
+    async openSelect(event?: UIEvent): Promise<void> {
+        if (this.interface == 'modal') {
+            if (this.expanded || !this.modalOptions) {
+                return;
+            }
+            this.expanded = true;
 
-        if (this.listboxId) {
+            if (this.listboxId) {
-            this.modalOptions.id = this.listboxId;
+                this.modalOptions.id = this.listboxId;
-        }
+            }
 
-        const data = await CoreDomUtils.openModal(this.modalOptions);
+            const data = await CoreDomUtils.openModal(this.modalOptions);
-        this.expanded = false;
+            this.expanded = false;
 
-        if (data) {
+            if (data) {
-            this.onChange.emit(data);
+                this.onChange.emit(data);
+            }
+        } else if (this.select) {
+            this.select.open(event);
         }
     }
 

src/core/components/combobox/core-combobox.html

@@ -1,27 +1,20 @@
-<ion-select
+<ion-button (click)="openSelect($event)" color="light" *ngIf="interface != 'modal' && icon" [disabled]="disabled">
-    *ngIf="interface != 'modal'"
+    <ion-icon [name]="icon" [attr.aria-label]="label" slot="start">
-    class="ion-text-start"
+    </ion-icon>
-    [(ngModel)]="selection"
+    <ion-badge *ngIf="badge && badge > 0" slot="start">{{badge}}</ion-badge>
-    (ngModelChange)="onChange.emit(selection)"
+    <div class="select-icon" role="presentation" aria-hidden="true">
-    [interface]="interface"
+        <div class="select-icon-inner"></div>
-    [attr.aria-label]="label + ': ' + selection"
+    </div>
-    [disabled]="disabled"
+</ion-button>
->
+<ion-select *ngIf="interface != 'modal'" class="ion-text-start" [(ngModel)]="selection" (ngModelChange)="onChange.emit(selection)"
+    [interface]="interface" [attr.aria-label]="label + ': ' + selection" [disabled]="disabled" [hidden]="!!icon">
     <ng-content></ng-content>
 </ion-select>
 
-<ion-button
+<ion-button *ngIf="interface == 'modal'" aria-haspopup="listbox" [attr.aria-controls]="listboxId" [attr.aria-owns]="listboxId"
-    *ngIf="interface == 'modal'"
+    [attr.aria-expanded]="expanded" (click)="openSelect()" [disabled]="disabled" expand="block" role="combobox">
-    aria-haspopup="listbox"
-    aria-controls="addon-mod-forum-sort-order-selector"
-    [attr.aria-owns]="listboxId"
-    [attr.aria-expanded]="expanded"
-    (click)="showModal()"
-    [disabled]="disabled"
-    expand="block"
-    role="combobox"
->
     <ion-icon *ngIf="icon" [name]="icon" slot="start" aria-hidden="true"></ion-icon>
+    <ion-badge *ngIf="badge && badge > 0" slot="start">{{badge}}</ion-badge>
     <span class="sr-only" *ngIf="label">{{ label }}:</span>
     <div class="select-text">
         <slot name="text">{{selection}}</slot>

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 {