EVOgeek/Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #3006 from crazyserver/MOBILE-3913

Browse Source 
Mobile 3913
This commit is contained in:
Dani Palou 2021-11-25 11:48:35 +01:00 committed by GitHub
commit 8925e5ccb4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 183 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
scripts/langindex.json
View File

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

2
src/addons/block/timeline/components/components.module.ts
View File

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

2
src/addons/block/timeline/components/events/events.ts
View File

@ -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;

86
src/addons/block/timeline/components/timeline/addon-block-timeline.html
View File

@ -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">
<core-combobox [selection]="filter" (onChange)="switchFilter($event)">
<ion-select-option class="ion-text-wrap" value="all">
{{ 'core.all' | translate }}
</ion-select-option>
<ion-select-option class="ion-text-wrap" value="overdue">
{{ 'addon.block_timeline.overdue' | translate }}
</ion-select-option>
<ion-select-option class="ion-text-wrap core-select-option-title" disabled value="disabled">
{{ 'addon.block_timeline.duedate' | translate }}
</ion-select-option>
<ion-select-option class="ion-text-wrap" value="next7days">
{{ 'addon.block_timeline.next7days' | translate }}
</ion-select-option>
<ion-select-option class="ion-text-wrap" value="next30days">
{{ 'addon.block_timeline.next30days' | translate }}
</ion-select-option>
<ion-select-option class="ion-text-wrap" value="next3months">
{{ 'addon.block_timeline.next3months' | translate }}
</ion-select-option>
<ion-select-option class="ion-text-wrap" value="next6months">
{{ 'addon.block_timeline.next6months' | translate }}
</ion-select-option>
</core-combobox>
</div>
<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">
{{ 'core.all' | translate }}
</ion-select-option>
<ion-select-option class="ion-text-wrap" value="overdue">
{{ 'addon.block_timeline.overdue' | translate }}
</ion-select-option>
<ion-select-option class="ion-text-wrap core-select-option-title" disabled value="disabled">
{{ 'addon.block_timeline.duedate' | translate }}
</ion-select-option>
<ion-select-option class="ion-text-wrap" value="next7days">
{{ 'addon.block_timeline.next7days' | translate }}
</ion-select-option>
<ion-select-option class="ion-text-wrap" value="next30days">
{{ 'addon.block_timeline.next30days' | translate }}
</ion-select-option>
<ion-select-option class="ion-text-wrap" value="next3months">
{{ 'addon.block_timeline.next3months' | translate }}
</ion-select-option>
<ion-select-option class="ion-text-wrap" value="next6months">
{{ 'addon.block_timeline.next6months' | translate }}
</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">
<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>

23
src/addons/block/timeline/components/timeline/timeline.ts
View File

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

3
src/addons/block/timeline/lang.json
View File

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

46
src/addons/block/timeline/services/timeline.ts
View File

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

3
src/addons/calendar/services/calendar.ts
View File

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

5
src/core/components/combobox/combobox.scss
View File

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

40
src/core/components/combobox/combobox.ts
View File

@ -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) {
return;
}
this.expanded = true;
/**
* Shows combobox modal.
*
* @param event Event.
* @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) {
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);
}
}

33
src/core/components/combobox/core-combobox.html
View File

@ -1,27 +1,20 @@
<ion-select
*ngIf="interface != 'modal'"
class="ion-text-start"
[(ngModel)]="selection"
(ngModelChange)="onChange.emit(selection)"
[interface]="interface"
[attr.aria-label]="label + ': ' + selection"
[disabled]="disabled"
>
<ion-button (click)="openSelect($event)" color="light" *ngIf="interface != 'modal' && icon" [disabled]="disabled">
<ion-icon [name]="icon" [attr.aria-label]="label" slot="start">
</ion-icon>
<ion-badge *ngIf="badge && badge > 0" slot="start">{{badge}}</ion-badge>
<div class="select-icon" role="presentation" aria-hidden="true">
<div class="select-icon-inner"></div>
</div>
</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
*ngIf="interface == 'modal'"
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-button *ngIf="interface == 'modal'" aria-haspopup="listbox" [attr.aria-controls]="listboxId" [attr.aria-owns]="listboxId"
[attr.aria-expanded]="expanded" (click)="openSelect()" [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>

2
src/core/directives/auto-focus.ts
View File

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

13
src/core/features/block/components/side-blocks/side-blocks.scss Normal file
View File

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

1
src/core/features/block/components/side-blocks/side-blocks.ts
View File

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

14
src/core/features/search/components/search-box/search-box.scss
View File

@ -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);
}
}

4
src/core/features/search/components/search-box/search-box.ts
View File

@ -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.

1
src/theme/theme.base.scss
View File

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