Start work on MessageComposer component

apimail/api/serializers.py

@@ -7,6 +7,7 @@ from rest_framework import serializers
 
 from ..models import (
     EmailAccount, EmailAccountAccess,
+    ComposedMessage,
     Event,
     StoredMessage, StoredMessageAttachment,
     UserTag)
@@ -28,6 +29,11 @@ class EmailAccountAccessSerializer(serializers.ModelSerializer):
         fields = ['account', 'rights', 'date_from', 'date_until']
 
 
+class ComposedMessageSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = ComposedMessage
+
+
 class EventSerializer(serializers.ModelSerializer):
     class Meta:
         model = Event

apimail/static/apimail/assets/vue/components/MessageComposer.vue

+<template>
+<div>
+  <h1>Compose email message</h1>
+  <b-form>
+    <b-form-group
+      id="to-recipient"
+      label="To:"
+      label-for="input-to-recipient"
+      class="mb-4"
+      >
+      <b-form-input
+	id="input-to-recipient"
+	v-model="form.torecipient"
+	type="email"
+	required
+	placeholder="Enter main recipient's email"
+	>
+      </b-form-input>
+    </b-form-group>
+    <b-form-group
+      id="message-body"
+      label="Message:"
+      label-for="input-message-body"
+      >
+      <b-form-textarea
+	id="input-message-body"
+	v-model="form.body"
+	rows="10"
+	>
+      </b-form-textarea>
+    </b-form-group>
+    <b-button type="savedraft" variant="warning">Save draft</b-button>
+    <b-button type="send" variant="success">Send</b-button>
+  </b-form>
+</div>
+</template>
+
+<script>
+  export default {
+      name: "message-composer",
+      props: {
+	  originalmessage: {
+	      type: Object,
+	      required: false,
+	  }
+      },
+      data () {
+	  return {
+	      form: {
+		  torecipient: '',
+		  body: '',
+	      }
+	  }
+      },
+      mounted () {
+      	  if (this.originalmessage) {
+      	      this.form.torecipient = this.originalmessage.data.from
+      	      this.form.body = '<blockquote>\n' + this.originalmessage.data["body-plain"] + '\n</blockquote>'
+      	  }
+      }
+  }
+</script>

apimail/static/apimail/assets/vue/components/MessageContent.vue

@@ -2,6 +2,21 @@
 <div>
   <b-card header-tag="header" footer-tag="footer" class="overflow-x-auto">
     <template v-slot:header>
+      <b-button v-b-modal.modal-reply>Reply</b-button>
+      <b-modal
+	id="modal-reply"
+	title="Reply"
+	hide-header-close
+	no-close-on-escape
+	no-close-on-backdrop
+	>
+	<message-composer :originalmessage="message"></message-composer>
+	<template v-slot:modal-footer="{ cancel, }">
+	  <b-button size="sm" variant="danger" @click="cancel()">
+	    Cancel
+	  </b-button>
+	</template>
+      </b-modal>
       <div class="text-dark">
 	<b-row>
 	<b-col class="col-lg-8">
@@ -53,10 +68,15 @@
 <script>
 import Cookies from 'js-cookie'
 
+import MessageComposer from './MessageComposer.vue'
+
 var csrftoken = Cookies.get('csrftoken');
 
 export default {
     name: "message-content",
+    components: {
+    	MessageComposer,
+    },
     props: {
 	message: {
 	    type: Object,
@@ -78,7 +98,6 @@ export default {
     },
     mounted () {
 	if (!this.message.read) {
-	    console.log('uuid: ' + this.message.uuid)
 	    fetch('/mail/api/stored_message/' + this.message.uuid + '/mark_as_read',
 		  {
 		      method: 'PATCH',

apimail/static/apimail/assets/vue/components/MessagesTable.vue

@@ -221,6 +221,7 @@
 	<message-content :message=row.item class="m-2 mb-4"></message-content>
       </template>
     </b-table>
+
   </div>
 
 </div>

apimail/urls.py

@@ -77,4 +77,9 @@ urlpatterns = [
         views.attachment_file,
         name='message_attachment'
     ),
+    path( # /mail/message/compose
+        'message/compose',
+        TemplateView.as_view(template_name='apimail/message_compose.html'),
+        name='message_compose'
+    ),
 ]

apimail/views.py

@@ -7,7 +7,7 @@ import mimetypes
 from django.http import HttpResponse
 from django.shortcuts import get_object_or_404
 
-from .models import StoredMessageAttachment
+from .models import StoredMessage, StoredMessageAttachment
 
 
 def attachment_file(request, uuid, pk):