MOBILE-3643 forum: Migrate edit post modal

main
Noel De Martin 2021-02-23 16:53:19 +01:00
parent 6f45f090cb
commit aa108ea283
5 changed files with 269 additions and 8 deletions

View File

@ -19,17 +19,19 @@ import { CoreEditorComponentsModule } from '@features/editor/components/componen
import { CoreSharedModule } from '@/core/shared.module';
import { CoreTagComponentsModule } from '@features/tag/components/components.module';
import { AddonModForumDiscussionOptionsMenuComponent } from './discussion-options-menu/discussion-options-menu';
import { AddonModForumEditPostComponent } from './edit-post/edit-post';
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: [
AddonModForumDiscussionOptionsMenuComponent,
AddonModForumEditPostComponent,
AddonModForumIndexComponent,
AddonModForumPostComponent,
AddonModForumPostOptionsMenuComponent,
AddonModForumDiscussionOptionsMenuComponent,
],
imports: [
CoreSharedModule,

View File

@ -0,0 +1,43 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button [attr.aria-label]="'core.back' | translate"></ion-back-button>
</ion-buttons>
<ion-title>{{ 'addon.mod_forum.yourreply' | translate }}</ion-title>
<ion-buttons slot="end">
<ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
<ion-icon name="close" slot="icon-only"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<form ion-list #editFormEl>
<ion-item>
<ion-label position="stacked">{{ 'addon.mod_forum.subject' | translate }}</ion-label>
<ion-input type="text" [placeholder]="'addon.mod_forum.subject' | translate" [(ngModel)]="replyData.subject" name="subject"></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">{{ 'addon.mod_forum.message' | translate }}</ion-label>
<core-rich-text-editor item-content [control]="messageControl" (contentChanged)="onMessageChange($event)" [placeholder]="'addon.mod_forum.replyplaceholder' | translate" [name]="'mod_forum_reply_' + replyData.id" [component]="component" [componentId]="componentId" [autoSave]="true" contextLevel="module" [contextInstanceId]="forum.cmid" elementId="message" [draftExtraParams]="{edit: replyData.id}"></core-rich-text-editor>
</ion-item>
<ion-item-divider class="ion-text-wrap core-expandable" (click)="toggleAdvanced()">
<ion-icon *ngIf="!advanced" name="fa-caret-right" slot="start"></ion-icon>
<ion-icon *ngIf="advanced" name="fa-caret-down" slot="start"></ion-icon>
<ion-label>{{ 'addon.mod_forum.advanced' | translate }}</ion-label>
</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>
</ng-container>
<ion-grid>
<ion-row>
<ion-col>
<ion-button expand="block" (click)="reply($event)" [disabled]="replyData.subject == '' || replyData.message == null">{{ 'core.savechanges' | translate }}</ion-button>
</ion-col>
<ion-col>
<ion-button expand="block" color="light" (click)="closeModal()">{{ 'core.cancel' | translate }}</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</form>
</ion-content>

View File

@ -0,0 +1,148 @@
// (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, ViewChild, ElementRef, Input, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { CoreFileEntry, CoreFileUploader } from '@features/fileuploader/services/fileuploader';
import { CoreSites } from '@services/sites';
import { CoreDomUtils } from '@services/utils/dom';
import { ModalController, Translate } from '@singletons';
import { AddonModForumData, AddonModForumPost, AddonModForumReply } from '@addons/mod/forum/services/forum.service';
import { AddonModForumHelper } from '@addons/mod/forum/services/helper.service';
/**
* Page that displays a form to edit discussion post.
*/
@Component({
selector: 'addon-mod-forum-edit-post',
templateUrl: 'edit-post.html',
})
export class AddonModForumEditPostComponent implements OnInit {
@ViewChild('editFormEl') formElement!: ElementRef;
@Input() component!: string; // Component this post belong to.
@Input() componentId!: number; // Component ID.
@Input() forum!: AddonModForumData; // The forum the post belongs to. Required for attachments and offline posts.
@Input() post!: AddonModForumPost;
messageControl = new FormControl();
advanced = false; // Display all form fields.
replyData!: AddonModForumReply;
originalData!: Omit<AddonModForumReply, 'id'>; // Object with the original post data. Usually shared between posts.
protected forceLeave = false; // To allow leaving the page without checking for changes.
ngOnInit(): void {
// @todo Override android back button to show confirmation before dismiss.
this.replyData = {
id: this.post.id,
subject: this.post.subject,
message: this.post.message,
files: this.post.attachments || [],
};
// Delete the local files from the tmp folder if any.
CoreFileUploader.instance.clearTmpFiles(this.replyData.files as CoreFileEntry[]);
// Update rich text editor.
this.messageControl.setValue(this.replyData.message);
// Update original data.
this.originalData = {
subject: this.replyData.subject,
message: this.replyData.message,
files: this.replyData.files.slice(),
};
// Show advanced fields if any of them has not the default value.
this.advanced = this.replyData.files.length > 0;
}
/**
* Message changed.
*
* @param text The new text.
*/
onMessageChange(text: string): void {
this.replyData.message = text;
}
/**
* Close modal.
*
* @param data Data to return to the page.
*/
async closeModal(data?: AddonModForumReply): Promise<void> {
const confirmDismiss = await this.confirmDismiss();
if (!confirmDismiss) {
return;
}
if (data) {
CoreDomUtils.instance.triggerFormSubmittedEvent(this.formElement, false, CoreSites.instance.getCurrentSiteId());
} else {
CoreDomUtils.instance.triggerFormCancelledEvent(this.formElement, CoreSites.instance.getCurrentSiteId());
}
ModalController.instance.dismiss(data);
}
/**
* Reply to this post.
*
* @param e Click event.
*/
reply(e: Event): void {
e.preventDefault();
e.stopPropagation();
// Close the modal, sending the input data.
this.forceLeave = true;
this.closeModal(this.replyData);
}
/**
* Show or hide advanced form fields.
*/
toggleAdvanced(): void {
this.advanced = !this.advanced;
}
/**
* Check if we can leave the page or not.
*
* @return Resolved if we can leave it, rejected if not.
*/
private async confirmDismiss(): Promise<boolean> {
if (this.forceLeave || !AddonModForumHelper.instance.hasPostDataChanged(this.replyData, this.originalData)) {
return true;
}
try {
// Show confirmation if some data has been modified.
await CoreDomUtils.instance.showConfirm(Translate.instant('core.confirmcanceledit'));
// Delete the local files from the tmp folder.
CoreFileUploader.instance.clearTmpFiles(this.replyData.files as CoreFileEntry[]);
return true;
} catch (error) {
return false;
}
}
}

View File

@ -36,10 +36,13 @@ import {
AddonModForumDiscussion,
AddonModForumPost,
AddonModForumProvider,
AddonModForumReply,
AddonModForumUpdateDiscussionPostWSOptionsObject,
AddonModForumWSPostAttachment,
} from '../../services/forum.service';
import { CoreTag } from '@features/tag/services/tag';
import { PopoverController, Translate } from '@singletons';
import { CoreFileUploader } from '@features/fileuploader/services/fileuploader';
import { ModalController, PopoverController, Translate } from '@singletons';
import { CoreFileEntry, CoreFileUploader } from '@features/fileuploader/services/fileuploader';
import { IonContent } from '@ionic/angular';
import { AddonModForumSync } from '../../services/sync.service';
import { CoreSync } from '@services/sync';
@ -48,6 +51,7 @@ 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';
import { AddonModForumEditPostComponent } from '../edit-post/edit-post';
/**
* Components that shows a discussion post, its attachments and the action buttons allowed (reply, etc.).
@ -174,7 +178,7 @@ export class AddonModForumPostComponent implements OnInit, OnDestroy, OnChanges
isEditing?: boolean,
subject?: string,
message?: string,
files?: any[],
files?: (CoreFileEntry | AddonModForumWSPostAttachment)[],
isPrivate?: boolean,
): void {
// Delete the local files from the tmp folder if any.
@ -241,10 +245,64 @@ export class AddonModForumPostComponent implements OnInit, OnDestroy, OnChanges
/**
* Shows a form modal to edit an online post.
*/
editPost(): void {
alert('Edit post not implemented');
async editPost(): Promise<void> {
const modal = await ModalController.instance.create({
component: AddonModForumEditPostComponent,
componentProps: {
post: this.post,
component: this.component,
componentId: this.componentId,
forum: this.forum,
},
backdropDismiss: false,
});
// @todo
modal.present();
const result = await modal.onDidDismiss<AddonModForumReply>();
const data = result.data;
if (!data) {
return;
}
// Add some HTML to the message if needed.
const message = CoreTextUtils.instance.formatHtmlLines(data.message);
const files = data.files;
const options: AddonModForumUpdateDiscussionPostWSOptionsObject = {};
const sendingModal = await CoreDomUtils.instance.showModalLoading('core.sending', true);
try {
// Upload attachments first if any.
if (files.length) {
const attachment = await AddonModForumHelper.instance.uploadOrStoreReplyFiles(
this.forum.id,
this.post.id,
files,
false,
);
options.attachmentsid = attachment;
}
// Try to send it to server.
const sent = await AddonModForum.instance.updatePost(this.post.id, data.subject, message, options);
if (sent && this.forum.id) {
// Data sent to server, delete stored files (if any).
AddonModForumHelper.instance.deleteReplyStoredFiles(this.forum.id, this.post.id);
this.onPostChange.emit();
this.post.subject = data.subject;
this.post.message = message;
this.post.attachments = data.files;
}
} catch (error) {
CoreDomUtils.instance.showErrorModalDefault(error, 'addon.mod_forum.couldnotupdate', true);
} finally {
sendingModal.dismiss();
}
}
/**

View File

@ -1600,6 +1600,16 @@ export type AddonModForumAccessInformation = {
cangrade?: boolean; // Whether the user has the capability mod/forum:grade allowed.
};
/**
* Reply info.
*/
export type AddonModForumReply = {
id: number;
subject: string;
message: string;
files: (CoreFileEntry | AddonModForumWSPostAttachment)[];
};
/**
* Can add discussion info.
*/