From 1ce7662a45238852c44e0b7c1aae9891c898e5ca Mon Sep 17 00:00:00 2001
From: "J.-S. Caux" <J.S.Caux@uva.nl>
Date: Thu, 22 Oct 2020 22:20:21 +0200
Subject: [PATCH] Tweak appearance and debug drafting

---
 apimail/api/serializers.py                    |  6 +-
 .../assets/vue/components/MessagesTable.vue   | 62 +++++++++----------
 2 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/apimail/api/serializers.py b/apimail/api/serializers.py
index 115a3dc09..0d186486d 100644
--- a/apimail/api/serializers.py
+++ b/apimail/api/serializers.py
@@ -51,6 +51,7 @@ class ComposedMessageAPIResponseSerializer(serializers.ModelSerializer):
 
 
 class ComposedMessageSerializer(serializers.ModelSerializer):
+    from_email = serializers.SerializerMethodField()
     attachment_files = AttachmentFileSerializer(many=True, read_only=True)
     api_responses = ComposedMessageAPIResponseSerializer(many=True, read_only=True)
 
@@ -58,11 +59,14 @@ class ComposedMessageSerializer(serializers.ModelSerializer):
         model = ComposedMessage
         fields = [
             'uuid', 'author', 'created_on', 'status',
-            'from_account', 'to_recipient', 'cc_recipients', 'bcc_recipients',
+            'from_account', 'from_email', 'to_recipient', 'cc_recipients', 'bcc_recipients',
             'subject', 'body_text', 'body_html',
             'attachment_files', 'api_responses'
         ]
 
+    def get_from_email(self, obj):
+        return obj.from_account.email
+
     def create(self, validated_data):
         attachment_uuids = validated_data.pop('attachment_uuids')
         cm = super().create(validated_data)
diff --git a/apimail/static/apimail/assets/vue/components/MessagesTable.vue b/apimail/static/apimail/assets/vue/components/MessagesTable.vue
index 3c866cdfe..c32b6b5d5 100644
--- a/apimail/static/apimail/assets/vue/components/MessagesTable.vue
+++ b/apimail/static/apimail/assets/vue/components/MessagesTable.vue
@@ -70,7 +70,7 @@
       <tr
 	v-for="draftmsg in draftMessages"
 	>
-	<td>{{ draftmsg.from_account }}</td>
+	<td>{{ draftmsg.from_email }}</td>
 	<td>{{ draftmsg.to_recipient }}</td>
 	<td>{{ draftmsg.subject }}</td>
 	<td>{{ draftmsg.status }}</td>
@@ -163,17 +163,34 @@
 	  </b-form-group>
 	</b-col>
       </b-row>
-      <hr class="my-1">
+      <hr class="mt-1 mb-2">
       <b-row class="mb-0">
 	<b-col class="col-lg-1">
 	  <strong>Restrict:</strong>
 	</b-col>
 	<b-col class="col-lg-4">
+	  <b-form-group
+	    label="Last: "
+	    label-cols-sm="3"
+	    label-align-sm="right"
+	    label-size="sm"
+	    class="mb-0"
+	    >
+	    <b-form-radio-group
+	      v-model="timePeriod"
+	      buttons
+	      button-variant="primary"
+	      size="sm"
+	      :options="timePeriodOptions"
+	      >
+	    </b-form-radio-group>
+	  </b-form-group>
 	  <b-form-group
 	    label="Status:"
 	    label-cols-sm="3"
 	    label-align-sm="right"
 	    label-size="sm"
+	    class="mb-0"
 	    >
 	    <b-form-radio-group
 	      v-model="readStatus"
@@ -189,6 +206,7 @@
 	    label-cols-sm="3"
 	    label-align-sm="right"
 	    label-size="sm"
+	    class="mb-0"
 	    >
 	    <b-form-radio-group
 	      v-model="flowDirection"
@@ -228,25 +246,17 @@
 	  </b-button>
 	</b-col>
       </b-row>
-      <hr class="my-1">
-      <b-row>
-	<b-col class="col-lg-1">
-	  <strong>Search:</strong>
-	</b-col>
+      <hr class="mt-1 mb-2">
+      <b-row class="mb-0">
 	<b-col class="col-lg-6">
-	  <b-form-group
-	    label-cols-sm="3"
-	    label="Filter:"
-            label-align-sm="right"
-            label-size="sm"
-	    >
+	  <b-form-group>
 	    <b-input-group size="sm">
 	      <b-form-input
 		v-model="filter"
 		debounce="250"
 		type="search"
 		id="filterInput"
-		placeholder="Type to search"
+		placeholder="Type to filter"
 		>
 	      </b-form-input>
 	      <b-input-group-append>
@@ -254,24 +264,8 @@
 	      </b-input-group-append>
 	    </b-input-group>
 	  </b-form-group>
-	  <b-form-group
-	    label="Period: last"
-	    label-cols-sm="3"
-	    label-align-sm="right"
-	    label-size="sm"
-	    class="mb-0"
-	    >
-	    <b-form-radio-group
-	      v-model="timePeriod"
-	      buttons
-	      button-variant="primary"
-	      size="sm"
-	      :options="timePeriodOptions"
-	      >
-	    </b-form-radio-group>
-	  </b-form-group>
 	</b-col>
-	<b-col class="col-lg-5 mb-0">
+	<b-col class="col-lg-6 mb-0">
 	  <b-form-group
             label="Filter on:"
 	    label-cols-sm="3"
@@ -316,7 +310,9 @@
 	Tags
       </template>
       <template v-slot:cell(read)="row">
-	<b-badge variant="primary">{{ row.item.read ? "" : "&emsp;" }}</b-badge>
+	<div v-if="!row.item.read">
+	  <b-badge variant="primary">&emsp;</b-badge>
+	</div>
       </template>
       <template v-slot:cell(tags)="row">
 	<ul class="list-inline">
@@ -442,7 +438,7 @@ export default {
 		{ text: 'week', value: 'week' },
 		{ text: 'month', value: 'month' },
 		{ text: 'year', value: 'year' },
-		{ text: 'any time', value: 'any' },
+		{ text: 'any', value: 'any' },
 	    ],
 	    readStatus: null,
 	    readStatusOptions: [
-- 
GitLab