MOBILE-2985 forum: Simplified form when adding discussions and replies

scripts/langindex.json

@@ -479,6 +479,7 @@
   "addon.mod_forum.addanewdiscussion": "forum",
   "addon.mod_forum.addanewquestion": "forum",
   "addon.mod_forum.addanewtopic": "forum",
+  "addon.mod_forum.advanced": "forum",
   "addon.mod_forum.cannotadddiscussion": "forum",
   "addon.mod_forum.cannotadddiscussionall": "forum",
   "addon.mod_forum.cannotcreatediscussion": "forum",
@@ -508,6 +509,7 @@
   "addon.mod_forum.refreshdiscussions": "local_moodlemobileapp",
   "addon.mod_forum.refreshposts": "local_moodlemobileapp",
   "addon.mod_forum.reply": "forum",
+  "addon.mod_forum.replyplaceholder": "forum",
   "addon.mod_forum.subject": "forum",
   "addon.mod_forum.unread": "forum",
   "addon.mod_forum.unreadpostsnumber": "forum",

src/addon/mod/forum/components/post/addon-mod-forum-post.html

@@ -45,13 +45,20 @@ <h2><span [class.core-bold]="post.parent == 0"><core-format-text [text]="post.su
     </ion-item>
     <ion-item>
         <ion-label stacked>{{ 'addon.mod_forum.message' | translate }}</ion-label>
-        <core-rich-text-editor item-content [control]="messageControl" (contentChanged)="onMessageChange($event)" [placeholder]="'addon.mod_forum.message' | translate" [name]="'mod_forum_reply_' + post.id" [component]="component" [componentId]="componentId"></core-rich-text-editor>
-    </ion-item>
-    <core-attachments *ngIf="forum.id && forum.maxattachments > 0" [files]="replyData.files" [maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments" [component]="component" [componentId]="forum.cmid" [allowOffline]="true"></core-attachments>
-    <ion-item text-wrap *ngIf="accessInfo.canpostprivatereply">
-        <ion-label>{{ 'addon.mod_forum.privatereply' | translate }}</ion-label>
-        <ion-checkbox item-end [(ngModel)]="replyData.isprivatereply"></ion-checkbox>
+        <core-rich-text-editor item-content [control]="messageControl" (contentChanged)="onMessageChange($event)" [placeholder]="'addon.mod_forum.replyplaceholder' | translate" [name]="'mod_forum_reply_' + post.id" [component]="component" [componentId]="componentId"></core-rich-text-editor>
     </ion-item>
+    <ion-item-divider text-wrap (click)="toggleAdvanced()" class="core-expandable">
+        <core-icon *ngIf="!advanced" name="fa-caret-right" item-start></core-icon>
+        <core-icon *ngIf="advanced" name="fa-caret-down" item-start></core-icon>
+        {{ 'addon.mod_forum.advanced' | translate }}
+    </ion-item-divider>
+    <ng-container *ngIf="advanced">
+        <core-attachments *ngIf="forum.id && forum.maxattachments > 0" [files]="replyData.files" [maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments" [component]="component" [componentId]="forum.cmid" [allowOffline]="true"></core-attachments>
+        <ion-item text-wrap *ngIf="accessInfo.canpostprivatereply">
+            <ion-label>{{ 'addon.mod_forum.privatereply' | translate }}</ion-label>
+            <ion-checkbox item-end [(ngModel)]="replyData.isprivatereply"></ion-checkbox>
+        </ion-item>
+    </ng-container>
     <ion-grid>
         <ion-row>
             <ion-col>

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

@@ -52,6 +52,7 @@ export class AddonModForumPostComponent implements OnInit, OnDestroy {
     messageControl = new FormControl();
 
     uniqueId: string;
+    advanced = false; // Display all form fields.
 
     protected syncId: string;
 
@@ -119,6 +120,9 @@ export class AddonModForumPostComponent implements OnInit, OnDestroy {
         this.originalData.message = this.replyData.message;
         this.originalData.files = this.replyData.files.slice();
         this.originalData.isprivatereply = this.replyData.isprivatereply;
+
+        // Show advanced fields if any of them has not the default value.
+        this.advanced = this.replyData.files.length > 0 || this.originalData.isprivatereply;
     }
 
     /**
@@ -325,6 +329,13 @@ export class AddonModForumPostComponent implements OnInit, OnDestroy {
         this.forumProvider.invalidateDiscussionPosts(this.discussionId);
     }
 
+    /**
+     * Show or hide advanced form fields.
+     */
+    toggleAdvanced(): void {
+        this.advanced = !this.advanced;
+    }
+
     /**
      * Component being destroyed.
      */

src/addon/mod/forum/lang/en.json

@@ -2,6 +2,7 @@
     "addanewdiscussion": "Add a new discussion topic",
     "addanewquestion": "Add a new question",
     "addanewtopic": "Add a new topic",
+    "advanced": "Advanced",
     "cannotadddiscussion": "Adding discussions to this forum requires group membership.",
     "cannotadddiscussionall": "You do not have permission to add a new discussion topic for all participants.",
     "cannotcreatediscussion": "Could not create new discussion",
@@ -31,6 +32,7 @@
     "refreshdiscussions": "Refresh discussions",
     "refreshposts": "Refresh posts",
     "reply": "Reply",
+    "replyplaceholder": "Write your reply...",
     "subject": "Subject",
     "unread": "Unread",
     "unreadpostsnumber": "{{$a}} unread posts"

src/addon/mod/forum/pages/new-discussion/new-discussion.html

@@ -21,21 +21,28 @@
                 <ion-label stacked>{{ 'addon.mod_forum.message' | translate }}</ion-label>
                 <core-rich-text-editor item-content [control]="messageControl" (contentChanged)="onMessageChange($event)" [placeholder]="'addon.mod_forum.message' | translate" name="addon_mod_forum_new_discussion" [component]="component" [componentId]="forum.cmid"></core-rich-text-editor>
             </ion-item>
-            <ion-item *ngIf="showGroups">
-                <ion-label id="addon-mod-forum-groupslabel">{{ 'addon.mod_forum.group' | translate }}</ion-label>
-                <ion-select [(ngModel)]="newDiscussion.groupId" aria-labelledby="addon-mod-forum-groupslabel" interface="action-sheet">
-                    <ion-option *ngFor="let group of groups" [value]="group.id">{{ group.name }}</ion-option>
-                </ion-select>
-            </ion-item>
-            <ion-item>
-                <ion-label>{{ 'addon.mod_forum.discussionsubscription' | translate }}</ion-label>
-                <ion-toggle [(ngModel)]="newDiscussion.subscribe"></ion-toggle>
-            </ion-item>
-            <ion-item *ngIf="canPin">
-                <ion-label>{{ 'addon.mod_forum.discussionpinned' | translate }}</ion-label>
-                <ion-toggle [(ngModel)]="newDiscussion.pin"></ion-toggle>
-            </ion-item>
-            <core-attachments *ngIf="canCreateAttachments && forum && forum.maxattachments > 0" [files]="newDiscussion.files" [maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments" [component]="component" [componentId]="forum.cmid" [allowOffline]="true"></core-attachments>
+            <ion-item-divider text-wrap (click)="toggleAdvanced()" class="core-expandable">
+                <core-icon *ngIf="!advanced" name="fa-caret-right" item-start></core-icon>
+                <core-icon *ngIf="advanced" name="fa-caret-down" item-start></core-icon>
+                {{ 'addon.mod_forum.advanced' | translate }}
+            </ion-item-divider>
+            <ng-container *ngIf="advanced">
+                <ion-item *ngIf="showGroups">
+                    <ion-label id="addon-mod-forum-groupslabel">{{ 'addon.mod_forum.group' | translate }}</ion-label>
+                    <ion-select [(ngModel)]="newDiscussion.groupId" aria-labelledby="addon-mod-forum-groupslabel" interface="action-sheet">
+                        <ion-option *ngFor="let group of groups" [value]="group.id">{{ group.name }}</ion-option>
+                    </ion-select>
+                </ion-item>
+                <ion-item>
+                    <ion-label>{{ 'addon.mod_forum.discussionsubscription' | translate }}</ion-label>
+                    <ion-toggle [(ngModel)]="newDiscussion.subscribe"></ion-toggle>
+                </ion-item>
+                <ion-item *ngIf="canPin">
+                    <ion-label>{{ 'addon.mod_forum.discussionpinned' | translate }}</ion-label>
+                    <ion-toggle [(ngModel)]="newDiscussion.pin"></ion-toggle>
+                </ion-item>
+                <core-attachments *ngIf="canCreateAttachments && forum && forum.maxattachments > 0" [files]="newDiscussion.files" [maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments" [component]="component" [componentId]="forum.cmid" [allowOffline]="true"></core-attachments>
+            </ng-container>
             <ion-item>
                 <ion-row>
                     <ion-col>

src/addon/mod/forum/pages/new-discussion/new-discussion.ts

@@ -61,6 +61,7 @@ export class AddonModForumNewDiscussionPage implements OnDestroy {
         pin: false,
         files: []
     };
+    advanced = false; // Display all form fields.
 
     protected courseId: number;
     protected cmId: number;
@@ -193,11 +194,19 @@ export class AddonModForumNewDiscussionPage implements OnDestroy {
                         this.messageControl.setValue(discussion.message);
 
                         // Treat offline attachments if any.
+                        let promise;
                         if (discussion.options.attachmentsid && discussion.options.attachmentsid.offline) {
-                            return this.forumHelper.getNewDiscussionStoredFiles(this.forumId, this.timeCreated).then((files) => {
+                            promise = this.forumHelper.getNewDiscussionStoredFiles(this.forumId, this.timeCreated).then((files) => {
                                 this.newDiscussion.files = files;
                             });
                         }
+
+                        return Promise.resolve(promise).then(() => {
+                            // Show advanced fields by default if any of them has not the default value.
+                            if (!this.newDiscussion.subscribe || this.newDiscussion.pin || this.newDiscussion.files.length) {
+                                this.advanced = true;
+                            }
+                        });
                     });
                 }));
             }
@@ -497,6 +506,13 @@ export class AddonModForumNewDiscussionPage implements OnDestroy {
         });
     }
 
+    /**
+     * Show or hide advanced form fields.
+     */
+    toggleAdvanced(): void {
+        this.advanced = !this.advanced;
+    }
+
     /**
      * Check if we can leave the page or not.
      *

src/assets/lang/en.json

@@ -479,6 +479,7 @@
     "addon.mod_forum.addanewdiscussion": "Add a new discussion topic",
     "addon.mod_forum.addanewquestion": "Add a new question",
     "addon.mod_forum.addanewtopic": "Add a new topic",
+    "addon.mod_forum.advanced": "Advanced",
     "addon.mod_forum.cannotadddiscussion": "Adding discussions to this forum requires group membership.",
     "addon.mod_forum.cannotadddiscussionall": "You do not have permission to add a new discussion topic for all participants.",
     "addon.mod_forum.cannotcreatediscussion": "Could not create new discussion",
@@ -508,6 +509,7 @@
     "addon.mod_forum.refreshdiscussions": "Refresh discussions",
     "addon.mod_forum.refreshposts": "Refresh posts",
     "addon.mod_forum.reply": "Reply",
+    "addon.mod_forum.replyplaceholder": "Write your reply...",
     "addon.mod_forum.subject": "Subject",
     "addon.mod_forum.unread": "Unread",
     "addon.mod_forum.unreadpostsnumber": "{{$a}} unread posts",