MOBILE-3745 core: Add new openPopover function

src/addons/calendar/pages/day/day.page.ts

@@ -34,7 +34,7 @@ import { CoreCategoryData, CoreCourses, CoreEnrolledCourseData } from '@features
 import { CoreCoursesHelper } from '@features/courses/services/courses-helper';
 import { AddonCalendarFilterPopoverComponent } from '../../components/filter/filter';
 import moment from 'moment';
-import { Network, NgZone, PopoverController } from '@singletons';
+import { Network, NgZone } from '@singletons';
 import { CoreNavigator } from '@services/navigator';
 import { Params } from '@angular/router';
 import { Subscription } from 'rxjs';
@@ -535,7 +535,7 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
      * @param event Event.
      */
     async openFilter(event: MouseEvent): Promise<void> {
-        const popover = await PopoverController.create({
+        await CoreDomUtils.openPopover({
             component: AddonCalendarFilterPopoverComponent,
             componentProps: {
                 courses: this.courses,
@@ -543,7 +543,6 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
             },
             event,
         });
-        await popover.present();
     }
 
     /**

src/addons/calendar/pages/index/index.page.ts

@@ -23,7 +23,7 @@ import { AddonCalendar, AddonCalendarProvider } from '../../services/calendar';
 import { AddonCalendarOffline } from '../../services/calendar-offline';
 import { AddonCalendarSync, AddonCalendarSyncProvider } from '../../services/calendar-sync';
 import { AddonCalendarFilter, AddonCalendarHelper } from '../../services/calendar-helper';
-import { Network, NgZone, PopoverController } from '@singletons';
+import { Network, NgZone } from '@singletons';
 import { Subscription } from 'rxjs';
 import { CoreEnrolledCourseData } from '@features/courses/services/courses';
 import { ActivatedRoute, Params } from '@angular/router';
@@ -333,7 +333,7 @@ export class AddonCalendarIndexPage implements OnInit, OnDestroy {
      * @param event Event.
      */
     async openFilter(event: MouseEvent): Promise<void> {
-        const popover = await PopoverController.create({
+        await CoreDomUtils.openPopover({
             component: AddonCalendarFilterPopoverComponent,
             componentProps: {
                 courses: this.courses,
@@ -341,7 +341,6 @@ export class AddonCalendarIndexPage implements OnInit, OnDestroy {
             },
             event,
         });
-        await popover.present();
     }
 
     /**

src/addons/calendar/pages/list/list.page.ts

@@ -35,7 +35,7 @@ import { CoreConstants } from '@/core/constants';
 import { AddonCalendarFilterPopoverComponent } from '../../components/filter/filter';
 import { Params } from '@angular/router';
 import { Subscription } from 'rxjs';
-import { Network, NgZone, PopoverController } from '@singletons';
+import { Network, NgZone } from '@singletons';
 import { CoreCoursesHelper } from '@features/courses/services/courses-helper';
 import { CoreUtils } from '@services/utils/utils';
 import { CoreNavigator } from '@services/navigator';
@@ -616,7 +616,7 @@ export class AddonCalendarListPage implements OnInit, OnDestroy {
      * @param event Event.
      */
     async openFilter(event: MouseEvent): Promise<void> {
-        const popover = await PopoverController.create({
+        await CoreDomUtils.openPopover({
             component: AddonCalendarFilterPopoverComponent,
             componentProps: {
                 courses: this.courses,
@@ -624,7 +624,6 @@ export class AddonCalendarListPage implements OnInit, OnDestroy {
             },
             event,
         });
-        await popover.present();
     }
 
     /**

src/addons/mod/forum/components/index/index.ts

@@ -28,7 +28,7 @@ import {
     AddonModForumReplyDiscussionData,
 } from '@addons/mod/forum/services/forum';
 import { AddonModForumOffline, AddonModForumOfflineDiscussion } from '@addons/mod/forum/services/forum-offline';
-import { PopoverController, Translate } from '@singletons';
+import { Translate } from '@singletons';
 import { CoreCourseContentsPage } from '@features/course/pages/contents/contents';
 import { AddonModForumHelper } from '@addons/mod/forum/services/forum-helper';
 import { CoreGroups, CoreGroupsProvider } from '@services/groups';
@@ -667,7 +667,7 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
      * @param discussion Discussion.
      */
     async showOptionsMenu(event: Event, discussion: AddonModForumDiscussion): Promise<void> {
-        const popover = await PopoverController.create({
+        const popoverData = await CoreDomUtils.openPopover<{ action?: string; value: boolean }>({
             component: AddonModForumDiscussionOptionsMenuComponent,
             componentProps: {
                 discussion,
@@ -677,20 +677,16 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
             event,
         });
 
-        await popover.present();
+        if (popoverData && popoverData.action) {
-
+            switch (popoverData.action) {
-        const result = await popover.onDidDismiss<{ action?: string; value: boolean }>();
-
-        if (result.data && result.data.action) {
-            switch (result.data.action) {
                 case 'lock':
-                    discussion.locked = result.data.value;
+                    discussion.locked = popoverData.value;
                     break;
                 case 'pin':
-                    discussion.pinned = result.data.value;
+                    discussion.pinned = popoverData.value;
                     break;
                 case 'star':
-                    discussion.starred = result.data.value;
+                    discussion.starred = popoverData.value;
                     break;
                 default:
                     break;

src/addons/mod/forum/components/post/post.ts

@@ -40,7 +40,7 @@ import {
     AddonModForumUpdateDiscussionPostWSOptionsObject,
 } from '../../services/forum';
 import { CoreTag } from '@features/tag/services/tag';
-import { PopoverController, Translate } from '@singletons';
+import { Translate } from '@singletons';
 import { CoreFileUploader } from '@features/fileuploader/services/fileuploader';
 import { IonContent } from '@ionic/angular';
 import { AddonModForumSync } from '../../services/forum-sync';
@@ -218,7 +218,7 @@ export class AddonModForumPostComponent implements OnInit, OnDestroy, OnChanges
      * @param event Click Event.
      */
     async showOptionsMenu(event: Event): Promise<void> {
-        const popover = await PopoverController.create({
+        const popoverData = await CoreDomUtils.openPopover<{ action?: string }>({
             component: AddonModForumPostOptionsMenuComponent,
             componentProps: {
                 post: this.post,
@@ -228,12 +228,8 @@ export class AddonModForumPostComponent implements OnInit, OnDestroy, OnChanges
             event,
         });
 
-        await popover.present();
+        if (popoverData && popoverData.action) {
-
+            switch (popoverData.action) {
-        const result = await popover.onDidDismiss<{ action?: string }>();
-
-        if (result.data && result.data.action) {
-            switch (result.data.action) {
                 case 'edit':
                     this.editPost();
                     break;

src/addons/mod/glossary/components/index/index.ts

@@ -27,7 +27,7 @@ import { IonContent } from '@ionic/angular';
 import { CoreSites } from '@services/sites';
 import { CoreDomUtils } from '@services/utils/dom';
 import { CoreTextUtils } from '@services/utils/text';
-import { PopoverController, Translate } from '@singletons';
+import { Translate } from '@singletons';
 import { CoreEventObserver, CoreEvents } from '@singletons/events';
 import {
     AddonModGlossary,
@@ -405,7 +405,7 @@ export class AddonModGlossaryIndexComponent extends CoreCourseModuleMainActivity
      * @param event Event.
      */
     async openModePicker(event: MouseEvent): Promise<void> {
-        const popover = await PopoverController.create({
+        const mode = await CoreDomUtils.openPopover<AddonModGlossaryFetchMode>({
             component: AddonModGlossaryModePickerPopoverComponent,
             componentProps: {
                 browseModes: this.glossary!.browsemodes,
@@ -414,11 +414,6 @@ export class AddonModGlossaryIndexComponent extends CoreCourseModuleMainActivity
             event,
         });
 
-        await popover.present();
-
-        const result = await popover.onDidDismiss<AddonModGlossaryFetchMode>();
-
-        const mode = result.data;
         if (mode) {
             if (mode !== this.fetchMode) {
                 this.changeFetchMode(mode);

src/addons/mod/quiz/classes/auto-save.ts

@@ -16,10 +16,10 @@ import { BehaviorSubject } from 'rxjs';
 
 import { CoreQuestionHelper } from '@features/question/services/question-helper';
 import { CoreQuestionsAnswers } from '@features/question/services/question';
-import { PopoverController } from '@singletons';
 import { CoreLogger } from '@singletons/logger';
 import { AddonModQuizConnectionErrorComponent } from '../components/connection-error/connection-error';
 import { AddonModQuiz, AddonModQuizAttemptWSData, AddonModQuizQuizWSData } from '../services/quiz';
+import { CoreDomUtils } from '@services/utils/dom';
 
 /**
  * Class to support auto-save in quiz. Every certain seconds, it will check if there are changes in the current page answers
@@ -197,13 +197,10 @@ export class AddonModQuizAutoSave {
         };
         this.popoverShown = true;
 
-        this.popover = await PopoverController.create({
+        this.popover = await CoreDomUtils.openPopover({
             component: AddonModQuizConnectionErrorComponent,
             event: <Event> event,
         });
-        await this.popover.present();
-
-        await this.popover.onDidDismiss();
 
         this.popoverShown = false;
     }

src/addons/mod/wiki/components/index/index.ts

@@ -27,7 +27,7 @@ import { CoreSites } from '@services/sites';
 import { CoreDomUtils } from '@services/utils/dom';
 import { CoreTextUtils } from '@services/utils/text';
 import { CoreUtils } from '@services/utils/utils';
-import { PopoverController, Translate } from '@singletons';
+import { Translate } from '@singletons';
 import { CoreEventObserver, CoreEvents } from '@singletons/events';
 import { Md5 } from 'ts-md5';
 import { AddonModWikiPageDBRecord } from '../../services/database/wiki';
@@ -794,7 +794,7 @@ export class AddonModWikiIndexComponent extends CoreCourseModuleMainActivityComp
      * @param event Event.
      */
     async showSubwikiPicker(event: MouseEvent): Promise<void> {
-        const popover = await PopoverController.create({
+        const popoverData = await CoreDomUtils.openPopover<AddonModWikiSubwiki>({
             component: AddonModWikiSubwikiPickerComponent,
             componentProps: {
                 subwikis: this.subwikiData.subwikis,
@@ -803,12 +803,8 @@ export class AddonModWikiIndexComponent extends CoreCourseModuleMainActivityComp
             event,
         });
 
-        await popover.present();
+        if (popoverData) {
-
+            this.goToSubwiki(popoverData.id, popoverData.userid, popoverData.groupid, popoverData.canedit);
-        const result = await popover.onDidDismiss();
-
-        if (result.data) {
-            this.goToSubwiki(result.data.id, result.data.userid, result.data.groupid, result.data.canedit);
         }
     }
 

src/core/components/context-menu/context-menu.ts

@@ -17,7 +17,7 @@ import { Subject } from 'rxjs';
 import { auditTime } from 'rxjs/operators';
 import { CoreDomUtils } from '@services/utils/dom';
 import { CoreUtils } from '@services/utils/utils';
-import { PopoverController, Translate } from '@singletons';
+import { Translate } from '@singletons';
 import { CoreContextMenuItemComponent } from './context-menu-item';
 import { CoreContextMenuPopoverComponent } from './context-menu-popover';
 
@@ -176,26 +176,23 @@ export class CoreContextMenuComponent implements OnInit, OnDestroy {
      */
     async showContextMenu(event: MouseEvent): Promise<void> {
         if (!this.expanded) {
-            const popover = await PopoverController.create(
-                {
-                    event,
-                    component: CoreContextMenuPopoverComponent,
-                    componentProps: {
-                        title: this.title,
-                        items: this.items,
-                    },
-                    showBackdrop: true,
-                    id: this.uniqueId,
-                },
-            );
-            await popover.present();
             this.expanded = true;
 
-            const data = await popover.onDidDismiss<CoreContextMenuItemComponent>();
+            const popoverData = await CoreDomUtils.openPopover<CoreContextMenuItemComponent>({
+                event,
+                component: CoreContextMenuPopoverComponent,
+                componentProps: {
+                    title: this.title,
+                    items: this.items,
+                },
+                showBackdrop: true,
+                id: this.uniqueId,
+            });
+
             this.expanded = false;
 
-            if (data.data) {
+            if (popoverData) {
-                data.data.onClosed?.emit();
+                popoverData.onClosed?.emit();
             }
 
         }

src/core/features/courses/components/course-progress/course-progress.ts

@@ -19,7 +19,7 @@ import { CoreDomUtils } from '@services/utils/dom';
 import { CoreCourses, CoreCoursesProvider } from '@features/courses/services/courses';
 import { CoreCourse, CoreCourseProvider } from '@features/course/services/course';
 import { CoreCourseHelper, CorePrefetchStatusInfo } from '@features/course/services/course-helper';
-import { PopoverController, Translate } from '@singletons';
+import { Translate } from '@singletons';
 import { CoreConstants } from '@/core/constants';
 import { CoreEnrolledCourseDataWithExtraInfoAndOptions } from '../../services/courses-helper';
 import { CoreCoursesCourseOptionsMenuComponent } from '../course-options-menu/course-options-menu';
@@ -198,7 +198,7 @@ export class CoreCoursesCourseProgressComponent implements OnInit, OnDestroy {
         e.preventDefault();
         e.stopPropagation();
 
-        const popover = await PopoverController.create({
+        const popoverData = await CoreDomUtils.openPopover<string>({
             component: CoreCoursesCourseOptionsMenuComponent,
             componentProps: {
                 course: this.course,
@@ -207,37 +207,32 @@ export class CoreCoursesCourseProgressComponent implements OnInit, OnDestroy {
             },
             event: e,
         });
-        await popover.present();
 
-        const action = await popover.onDidDismiss<string>();
+        switch (popoverData) {
-
+            case 'download':
-        if (action.data) {
+                if (!this.prefetchCourseData.loading) {
-            switch (action.data) {
+                    this.prefetchCourse(e);
-                case 'download':
+                }
-                    if (!this.prefetchCourseData.loading) {
+                break;
-                        this.prefetchCourse(e);
+            case 'delete':
-                    }
+                if (this.courseStatus == 'downloaded' || this.courseStatus == 'outdated') {
-                    break;
+                    this.deleteCourse();
-                case 'delete':
+                }
-                    if (this.courseStatus == 'downloaded' || this.courseStatus == 'outdated') {
+                break;
-                        this.deleteCourse();
+            case 'hide':
-                    }
+                this.setCourseHidden(true);
-                    break;
+                break;
-                case 'hide':
+            case 'show':
-                    this.setCourseHidden(true);
+                this.setCourseHidden(false);
-                    break;
+                break;
-                case 'show':
+            case 'favourite':
-                    this.setCourseHidden(false);
+                this.setCourseFavourite(true);
-                    break;
+                break;
-                case 'favourite':
+            case 'unfavourite':
-                    this.setCourseFavourite(true);
+                this.setCourseFavourite(false);
-                    break;
+                break;
-                case 'unfavourite':
+            default:
-                    this.setCourseFavourite(false);
+                break;
-                    break;
-                default:
-                    break;
-            }
         }
 
     }

src/core/services/utils/dom.ts

@@ -15,7 +15,7 @@
 import { Injectable, SimpleChange, ElementRef, KeyValueChanges } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { IonContent } from '@ionic/angular';
-import { ModalOptions, AlertOptions, AlertButton, TextFieldTypes } from '@ionic/core';
+import { ModalOptions, PopoverOptions, AlertOptions, AlertButton, TextFieldTypes } from '@ionic/core';
 import { Md5 } from 'ts-md5';
 
 import { CoreApp } from '@services/app';
@@ -796,7 +796,7 @@ export class CoreDomUtilsProvider {
             el.addEventListener('click', async (ev: Event) => {
                 const html = el.getAttribute('data-html');
 
-                const popover = await PopoverController.create({
+                await CoreDomUtils.openPopover({
                     component: CoreBSTooltipComponent,
                     componentProps: {
                         content,
@@ -804,7 +804,6 @@ export class CoreDomUtilsProvider {
                     },
                     event: ev,
                 });
-                await popover.present();
             });
         });
     }
@@ -1721,6 +1720,26 @@ export class CoreDomUtilsProvider {
         return await this.openModal<T>(modalOptions);
     }
 
+    /**
+     * Opens a popover.
+     *
+     * @param popoverOptions Modal Options.
+     */
+    async openPopover<T = void>(
+        popoverOptions: PopoverOptions,
+    ): Promise<T | undefined> {
+
+        const popover = await PopoverController.create(popoverOptions);
+
+        await popover.present();
+
+        // If onDidDismiss is nedded we can add a new param to the function to wait one function or the other.
+        const result = await popover.onWillDismiss<T>();
+        if (result?.data) {
+            return result?.data;
+        }
+    }
+
     /**
      * View an image in a modal.
      *