MOBILE-3643 forum: Migrate option menus

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

@@ -21,11 +21,15 @@ import { CoreTagComponentsModule } from '@features/tag/components/components.mod
 
 import { AddonModForumIndexComponent } from './index/index';
 import { AddonModForumPostComponent } from './post/post';
+import { AddonModForumPostOptionsMenuComponent } from './post-options-menu/post-options-menu';
+import { AddonModForumDiscussionOptionsMenuComponent } from './discussion-options-menu/discussion-options-menu';
 
 @NgModule({
     declarations: [
         AddonModForumIndexComponent,
         AddonModForumPostComponent,
+        AddonModForumPostOptionsMenuComponent,
+        AddonModForumDiscussionOptionsMenuComponent,
     ],
     imports: [
         CoreSharedModule,

src/addons/mod/forum/components/discussion-options-menu/discussion-options-menu.html

@@ -0,0 +1,36 @@
+<ion-item class="ion-text-wrap" (click)="setLockState(true)" *ngIf="discussion.canlock && !discussion.locked">
+    <ion-icon name="fa-lock" slot="start"></ion-icon>
+    <ion-label>
+        <h2>{{ 'addon.mod_forum.lockdiscussion' | translate }}</h2>
+    </ion-label>
+</ion-item>
+<ion-item class="ion-text-wrap" (click)="setLockState(false)" *ngIf="discussion.canlock && discussion.locked">
+    <ion-icon name="fa-unlock" slot="start"></ion-icon>
+    <ion-label>
+        <h2>{{ 'addon.mod_forum.unlockdiscussion' | translate }}</h2>
+    </ion-label>
+</ion-item>
+<ion-item class="ion-text-wrap" (click)="setPinState(true)" *ngIf="canPin && !discussion.pinned">
+    <ion-icon name="fa-map-pin" slot="start"></ion-icon>
+    <ion-label>
+        <h2>{{ 'addon.mod_forum.pindiscussion' | translate }}</h2>
+    </ion-label>
+</ion-item>
+<ion-item class="ion-text-wrap" (click)="setPinState(false)" *ngIf="canPin && discussion.pinned">
+    <ion-icon name="fa-map-pin" slot="start" class="icon-slash"></ion-icon>
+    <ion-label>
+        <h2>{{ 'addon.mod_forum.unpindiscussion' | translate }}</h2>
+    </ion-label>
+</ion-item>
+<ion-item class="ion-text-wrap" (click)="toggleFavouriteState(true)" *ngIf="discussion.canfavourite && !discussion.starred">
+    <ion-icon name="fa-star" slot="start"></ion-icon>
+    <ion-label>
+        <h2>{{ 'addon.mod_forum.addtofavourites' | translate }}</h2>
+    </ion-label>
+</ion-item>
+<ion-item class="ion-text-wrap" (click)="toggleFavouriteState(false)" *ngIf="discussion.canfavourite && discussion.starred">
+    <ion-icon name="fa-star" slot="start" class="icon-slash"></ion-icon>
+    <ion-label>
+        <h2>{{ 'addon.mod_forum.removefromfavourites' | translate }}</h2>
+    </ion-label>
+</ion-item>

src/addons/mod/forum/components/discussion-options-menu/discussion-options-menu.ts

@@ -0,0 +1,143 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, Input, OnInit } from '@angular/core';
+import { CoreSites } from '@services/sites';
+import { CoreDomUtils } from '@services/utils/dom';
+import { PopoverController } from '@singletons';
+import { CoreEvents } from '@singletons/events';
+import { AddonModForum, AddonModForumDiscussion, AddonModForumProvider } from '../../services/forum.service';
+
+/**
+ * This component is meant to display a popover with the discussion options.
+ */
+@Component({
+    selector: 'addon-forum-discussion-options-menu',
+    templateUrl: 'discussion-options-menu.html',
+})
+export class AddonModForumDiscussionOptionsMenuComponent implements OnInit {
+
+    @Input() discussion!: AddonModForumDiscussion; // The discussion.
+    @Input() forumId!: number; // The forum Id.
+    @Input() cmId!: number; // The component module Id.
+
+    canPin = false;
+
+    /**
+     * Component being initialized.
+     */
+    async ngOnInit(): Promise<void> {
+        if (!AddonModForum.instance.isSetPinStateAvailableForSite()) {
+            this.canPin = false;
+
+            return;
+        }
+
+        // Use the canAddDiscussion WS to check if the user can pin discussions.
+        try {
+            const response = await AddonModForum.instance.canAddDiscussionToAll(this.forumId, { cmId: this.cmId });
+
+            this.canPin = !!response.canpindiscussions;
+        } catch (error) {
+            this.canPin = false;
+        }
+    }
+
+    /**
+     * Lock or unlock the discussion.
+     *
+     * @param locked True to lock the discussion, false to unlock.
+     */
+    async setLockState(locked: boolean): Promise<void> {
+        const modal = await CoreDomUtils.instance.showModalLoading('core.sending', true);
+
+        try {
+            const response = await AddonModForum.instance.setLockState(this.forumId, this.discussion.discussion, locked);
+            const data = {
+                forumId: this.forumId,
+                discussionId: this.discussion.discussion,
+                cmId: this.cmId,
+                locked: response.locked,
+            };
+
+            CoreEvents.trigger(AddonModForumProvider.CHANGE_DISCUSSION_EVENT, data, CoreSites.instance.getCurrentSiteId());
+            PopoverController.instance.dismiss({ action: 'lock', value: locked });
+            CoreDomUtils.instance.showToast('addon.mod_forum.lockupdated', true);
+        } catch (error) {
+            CoreDomUtils.instance.showErrorModal(error);
+            PopoverController.instance.dismiss();
+        } finally {
+            modal.dismiss();
+        }
+    }
+
+    /**
+     * Pin or unpin the discussion.
+     *
+     * @param pinned True to pin the discussion, false to unpin it.
+     */
+    async setPinState(pinned: boolean): Promise<void> {
+        const modal = await CoreDomUtils.instance.showModalLoading('core.sending', true);
+
+        try {
+            await AddonModForum.instance.setPinState(this.discussion.discussion, pinned);
+
+            const data = {
+                forumId: this.forumId,
+                discussionId: this.discussion.discussion,
+                cmId: this.cmId,
+                pinned: pinned,
+            };
+
+            CoreEvents.trigger(AddonModForumProvider.CHANGE_DISCUSSION_EVENT, data, CoreSites.instance.getCurrentSiteId());
+            PopoverController.instance.dismiss({ action: 'pin', value: pinned });
+            CoreDomUtils.instance.showToast('addon.mod_forum.pinupdated', true);
+        } catch (error) {
+            CoreDomUtils.instance.showErrorModal(error);
+            PopoverController.instance.dismiss();
+        } finally {
+            modal.dismiss();
+        }
+    }
+
+    /**
+     * Star or unstar the discussion.
+     *
+     * @param starred True to star the discussion, false to unstar it.
+     */
+    async toggleFavouriteState(starred: boolean): Promise<void> {
+        const modal = await CoreDomUtils.instance.showModalLoading('core.sending', true);
+
+        try {
+            await AddonModForum.instance.toggleFavouriteState(this.discussion.discussion, starred);
+
+            const data = {
+                forumId: this.forumId,
+                discussionId: this.discussion.discussion,
+                cmId: this.cmId,
+                starred: starred,
+            };
+
+            CoreEvents.trigger(AddonModForumProvider.CHANGE_DISCUSSION_EVENT, data, CoreSites.instance.getCurrentSiteId());
+            PopoverController.instance.dismiss({ action: 'star', value: starred });
+            CoreDomUtils.instance.showToast('addon.mod_forum.favouriteupdated', true);
+        } catch (error) {
+            CoreDomUtils.instance.showErrorModal(error);
+            PopoverController.instance.dismiss();
+        } finally {
+            modal.dismiss();
+        }
+    }
+
+}

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

@@ -80,7 +80,7 @@
                             fill="clear" color="dark"
                             [attr.aria-label]="('core.displayoptions' | translate)"
                             (click)="showOptionsMenu($event, discussion)">
-                            <ion-icon name="more" slot="icon-only">
+                            <ion-icon name="ellipsis-vertical" slot="icon-only">
                             </ion-icon>
                         </ion-button>
                     </div>

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

@@ -24,7 +24,7 @@ import {
     AddonModForumDiscussion,
 } from '@addons/mod/forum/services/forum.service';
 import { AddonModForumOffline, AddonModForumOfflineDiscussion } from '@addons/mod/forum/services/offline.service';
-import { Translate } from '@singletons';
+import { PopoverController, Translate } from '@singletons';
 import { CoreCourseContentsPage } from '@features/course/pages/contents/contents';
 import { AddonModForumHelper } from '@addons/mod/forum/services/helper.service';
 import { CoreGroups, CoreGroupsProvider } from '@services/groups';
@@ -37,6 +37,7 @@ import { CoreUtils } from '@services/utils/utils';
 import { CoreCourse } from '@features/course/services/course';
 import { CorePageItemsListManager } from '@classes/page-items-list-manager';
 import { CoreSplitViewComponent } from '@components/split-view/split-view';
+import { AddonModForumDiscussionOptionsMenuComponent } from '../discussion-options-menu/discussion-options-menu';
 
 /**
  * Component that displays a forum entry page.
@@ -557,41 +558,39 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
     /**
      * Show the context menu.
      *
-     * @param e Click Event.
+     * @param event Click Event.
+     * @param discussion Discussion.
      */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async showOptionsMenu(event: Event, discussion: AddonModForumDiscussion): Promise<void> {
-    showOptionsMenu(e: Event, discussion: any): void {
+        const popover = await PopoverController.instance.create({
-        alert('Show options menu not implemented');
+            component: AddonModForumDiscussionOptionsMenuComponent,
+            componentProps: {
+                discussion,
+                forumId: this.forum!.id,
+                cmId: this.module!.id,
+            },
+            event,
+        });
 
-        // @todo
+        popover.present();
-        // e.preventDefault();
-        // e.stopPropagation();
 
-        // const popover = this.popoverCtrl.create(AddonForumDiscussionOptionsMenuComponent, {
+        const result = await popover.onDidDismiss<{ action?: string; value: boolean }>();
-        //     discussion: discussion,
+
-        //     forumId: this.forum.id,
+        if (result.data && result.data.action) {
-        //     cmId: this.module.id,
+            switch (result.data.action) {
-        // });
+                case 'lock':
-        // popover.onDidDismiss((data) => {
+                    discussion.locked = result.data.value;
-        //     if (data && data.action) {
+                    break;
-        //         switch (data.action) {
+                case 'pin':
-        //             case 'lock':
+                    discussion.pinned = result.data.value;
-        //                 discussion.locked = data.value;
+                    break;
-        //                 break;
+                case 'star':
-        //             case 'pin':
+                    discussion.starred = result.data.value;
-        //                 discussion.pinned = data.value;
+                    break;
-        //                 break;
+                default:
-        //             case 'star':
+                    break;
-        //                 discussion.starred = data.value;
+            }
-        //                 break;
+        }
-        //             default:
-        //                 break;
-        //         }
-        //     }
-        // });
-        // popover.present({
-        //     ev: e,
-        // });
     }
 
 }

src/addons/mod/forum/components/post-options-menu/post-options-menu.html

@@ -0,0 +1,26 @@
+<core-loading [hideUntil]="loaded" class="core-loading-center">
+    <ion-item class="ion-text-wrap" (click)="editPost()" *ngIf="offlinePost || (canEdit && isOnline)">
+        <ion-icon name="create" slot="start"></ion-icon>
+        <ion-label>
+            <h2>{{ 'addon.mod_forum.edit' | translate }}</h2>
+        </ion-label>
+    </ion-item>
+    <ion-item class="ion-text-wrap" (click)="deletePost()" *ngIf="offlinePost || (canDelete && isOnline)">
+        <ion-icon name="trash" slot="start"></ion-icon>
+        <ion-label>
+            <h2 *ngIf="!offlinePost">{{ 'addon.mod_forum.delete' | translate }}</h2>
+            <h2 *ngIf="offlinePost">{{ 'core.discard' | translate }}</h2>
+        </ion-label>
+    </ion-item>
+    <ion-item class="ion-text-wrap" (click)="dismiss()" *ngIf="wordCount">
+        <ion-label>
+            <h2>{{ 'core.numwords' | translate: {'$a': wordCount} }}</h2>
+        </ion-label>
+    </ion-item>
+    <ion-item class="ion-text-wrap" [href]="url" *ngIf="url" core-link capture="false">
+        <ion-icon name="open" slot="start"></ion-icon>
+        <ion-label>
+            <h2>{{ 'core.openinbrowser' | translate }}</h2>
+        </ion-label>
+    </ion-item>
+</core-loading>

src/addons/mod/forum/components/post-options-menu/post-options-menu.scss

@@ -0,0 +1,11 @@
+:host {
+    core-loading:not(.core-loading-loaded) > .core-loading-container {
+        position: relative !important;
+        padding-top: 10px !important;
+        padding-bottom: 10px !important;
+        overflow: hidden;
+    }
+    core-loading > .core-loading-container .core-loading-message {
+        display: none;
+    }
+}

src/addons/mod/forum/components/post-options-menu/post-options-menu.ts

@@ -0,0 +1,132 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { CoreSites, CoreSitesReadingStrategy } from '@services/sites';
+import { CoreApp } from '@services/app';
+import { AddonModForum, AddonModForumPost } from '@addons/mod/forum/services/forum.service';
+import { Network, NgZone, PopoverController } from '@singletons';
+import { Subscription } from 'rxjs';
+import { CoreDomUtils } from '@services/utils/dom';
+
+/**
+ * This component is meant to display a popover with the post options.
+ */
+@Component({
+    selector: 'addon-forum-post-options-menu',
+    templateUrl: 'post-options-menu.html',
+    styleUrls: ['./post-options-menu.scss'],
+})
+export class AddonModForumPostOptionsMenuComponent implements OnInit, OnDestroy {
+
+    @Input() post!: AddonModForumPost; // The post.
+    @Input() cmId!: number;
+    @Input() forumId!: number; // The forum Id.
+
+    wordCount?: number | null; // Number of words when available.
+    canEdit = false;
+    canDelete = false;
+    loaded = false;
+    url?: string;
+    isOnline!: boolean;
+    offlinePost!: boolean;
+
+    protected onlineObserver?: Subscription;
+
+    /**
+     * Component being initialized.
+     */
+    async ngOnInit(): Promise<void> {
+        this.isOnline = CoreApp.instance.isOnline();
+
+        this.onlineObserver = Network.instance.onChange().subscribe(() => {
+            // Execute the callback in the Angular zone, so change detection doesn't stop working.
+            NgZone.instance.run(() => {
+                this.isOnline = CoreApp.instance.isOnline();
+            });
+        });
+
+        if (this.post.id > 0) {
+            const site = CoreSites.instance.getCurrentSite()!;
+            this.url = site.createSiteUrl('/mod/forum/discuss.php', { d: this.post.discussionid.toString() }, 'p' + this.post.id);
+            this.offlinePost = false;
+        } else {
+            // Offline post, you can edit or discard the post.
+            this.loaded = true;
+            this.offlinePost = true;
+
+            return;
+        }
+
+        if (typeof this.post.capabilities.delete == 'undefined') {
+            if (this.forumId) {
+                try {
+                    this.post =
+                        await AddonModForum.instance.getDiscussionPost(this.forumId, this.post.discussionid, this.post.id, {
+                            cmId: this.cmId,
+                            readingStrategy: CoreSitesReadingStrategy.OnlyNetwork,
+                        });
+                } catch (error) {
+                    CoreDomUtils.instance.showErrorModalDefault(error, 'Error getting discussion post.');
+                }
+            } else {
+                this.loaded = true;
+
+                return;
+            }
+        }
+
+        this.canDelete = !!this.post.capabilities.delete && AddonModForum.instance.isDeletePostAvailable();
+        this.canEdit = !!this.post.capabilities.edit && AddonModForum.instance.isUpdatePostAvailable();
+        this.wordCount = (this.post.haswordcount && this.post.wordcount) || null;
+        this.loaded = true;
+    }
+
+    /**
+     * Component destroyed.
+     */
+    ngOnDestroy(): void {
+        this.onlineObserver?.unsubscribe();
+    }
+
+    /**
+     * Close the popover.
+     */
+    dismiss(): void {
+        PopoverController.instance.dismiss();
+    }
+
+    /**
+     * Delete a post.
+     */
+    deletePost(): void {
+        if (!this.offlinePost) {
+            PopoverController.instance.dismiss({ action: 'delete' });
+        } else {
+            PopoverController.instance.dismiss({ action: 'deleteoffline' });
+        }
+    }
+
+    /**
+     * Edit a post.
+     */
+    editPost(): void {
+        if (!this.offlinePost) {
+            PopoverController.instance.dismiss({ action: 'edit' });
+        } else {
+            PopoverController.instance.dismiss({ action: 'editoffline' });
+        }
+    }
+
+}

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

@@ -19,7 +19,7 @@
                     </ion-note>
                     <ion-button *ngIf="optionsMenuEnabled"
                         fill="clear" color="dark" (click)="showOptionsMenu($event)" [attr.aria-label]="('core.displayoptions' | translate)">
-                        <ion-icon name="more" slot="icon-only">
+                        <ion-icon name="ellipsis-vertical" slot="icon-only">
                         </ion-icon>
                     </ion-button>
                 </div>
@@ -44,7 +44,7 @@
                         </ion-note>
                         <ion-button *ngIf="optionsMenuEnabled"
                             fill="clear" color="dark" (click)="showOptionsMenu($event)" [attr.aria-label]="('core.displayoptions' | translate)">
-                            <ion-icon name="more" slot="icon-only">
+                            <ion-icon name="ellipsis-vertical" slot="icon-only">
                             </ion-icon>
                         </ion-button>
                     </ng-container>

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

@@ -38,7 +38,7 @@ import {
     AddonModForumProvider,
 } from '../../services/forum.service';
 import { CoreTag } from '@features/tag/services/tag';
-import { Translate } from '@singletons';
+import { PopoverController, Translate } from '@singletons';
 import { CoreFileUploader } from '@features/fileuploader/services/fileuploader';
 import { IonContent } from '@ionic/angular';
 import { AddonModForumSync } from '../../services/sync.service';
@@ -47,6 +47,7 @@ import { CoreTextUtils } from '@services/utils/text';
 import { AddonModForumHelper } from '../../services/helper.service';
 import { AddonModForumOffline, AddonModForumReplyOptions } from '../../services/offline.service';
 import { CoreUtils } from '@services/utils/utils';
+import { AddonModForumPostOptionsMenuComponent } from '../post-options-menu/post-options-menu';
 
 /**
  * Components that shows a discussion post, its attachments and the action buttons allowed (reply, etc.).
@@ -202,13 +203,39 @@ export class AddonModForumPostComponent implements OnInit, OnDestroy, OnChanges
     /**
      * Show the context menu.
      *
-     * @param e Click Event.
+     * @param event Click Event.
      */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async showOptionsMenu(event: Event): Promise<void> {
-    showOptionsMenu(e: Event): void {
+        const popover = await PopoverController.instance.create({
-        alert('Options menu not implemented');
+            component: AddonModForumPostOptionsMenuComponent,
+            componentProps: {
+                post: this.post,
+                forumId: this.forum.id,
+                cmId: this.forum.cmid,
+            },
+            event,
+        });
 
-        // @todo
+        popover.present();
+
+        const result = await popover.onDidDismiss<{ action?: string }>();
+
+        if (result.data && result.data.action) {
+            switch (result.data.action) {
+                case 'edit':
+                    this.editPost();
+                    break;
+                case 'editoffline':
+                    this.editOfflineReply();
+                    break;
+                case 'delete':
+                    this.deletePost();
+                    break;
+                case 'deleteoffline':
+                    this.discardOfflineReply();
+                    break;
+            }
+        }
     }
 
     /**

src/addons/mod/forum/services/forum.service.ts

@@ -1442,9 +1442,19 @@ export type AddonModForumPost = {
     isprivatereply: boolean; // Isprivatereply.
     capabilities: {
         reply: boolean; // Whether the user can reply to the post.
+        view?: boolean; // Whether the user can view the post.
+        edit?: boolean; // Whether the user can edit the post.
+        delete?: boolean; // Whether the user can delete the post.
+        split?: boolean; // Whether the user can split the post.
+        selfenrol?: boolean; // Whether the user can self enrol into the course.
+        export?: boolean; // Whether the user can export the post.
+        controlreadstatus?: boolean; // Whether the user can control the read status of the post.
+        canreplyprivately?: boolean; // Whether the user can post a private reply.
     };
     attachment?: 0 | 1;
     attachments?: (CoreFileEntry | AddonModForumWSPostAttachment)[];
+    haswordcount?: boolean; // Haswordcount.
+    wordcount?: number; // Wordcount.
     tags?: { // Tags.
         id: number; // Tag id.
         name: string; // Tag name.