Add email preview and attachment display in AttachmentsList component

calendar/js/calendar-main.js

@@ -7725,7 +7725,8 @@ __webpack_require__.r(__webpack_exports__);
       loadingDataEmailBox: false,
       mailBoxData: [],
       mailAttachments: [],
-      loadingText: 'Chargement ...'
+      loadingText: 'Chargement ...',
+      selectedMail: null
     };
   },
   computed: {
@@ -7873,6 +7874,7 @@ __webpack_require__.r(__webpack_exports__);
     },
     async getAttachments(mail) {
       this.loadingText = 'Récupération des piecs jointes ...';
+      this.selectedMail = mail;
       this.loadingDataEmailBox = true;
       this.showAttachmentsSection = true;
       this.mailAttachments = [];
@@ -18519,7 +18521,13 @@ var render = function render() {
       },
       proxy: true
     }], null, false, 1821202730)
-  }, [_vm._v("\n\t\t\t\t\tRevenir dans la listes des emails\n\t\t\t\t")]), _vm._v(" "), _vm._l(_vm.mailAttachments, function (attachment) {
+  }, [_vm._v("\n\t\t\t\t\tRevenir dans la listes des emails\n\t\t\t\t")]), _vm._v(" "), _vm.selectedMail ? _c("div", [_c("div", {
+    staticClass: "mailHeader"
+  }, [_vm._v("\n\t\t\t\t\t\t\t" + _vm._s(_vm.getLabelEmailBox(_vm.selectedMail.from) + " : " + _vm.selectedMail.subject) + "\n\t\t\t\t\t\t")]), _vm._v(" "), _c("div", {
+    staticClass: "mailContent"
+  }, [_vm._v("\n\t\t\t\t\t\t\t" + _vm._s(_vm.selectedMail.previewText) + "\n\t\t\t\t\t\t")])]) : _vm._e(), _vm._v(" "), _c("div", {
+    staticClass: "mailHeader"
+  }, [_vm._v("\n\t\t\t\t\t\tPièces jointes : \n\t\t\t\t\t")]), _vm._v(" "), _vm._l(_vm.mailAttachments, function (attachment) {
     return !_vm.loadingDataEmailBox && _vm.mailAttachments.length > 0 ? _c("div", {
       staticClass: "image-list-attachement"
     }, [attachment.isImage ? _c("div", {
@@ -18541,9 +18549,9 @@ var render = function render() {
           return _vm.pickEmailAttachement(attachment);
         }
       }
-    }, [_c("label", [_vm._v(_vm._s("Pièce joint : " + attachment.fileName))])]) : attachment.isCalendarEvent ? _c("div", {
+    }, [_c("label", [_vm._v(_vm._s(attachment.fileName))])]) : attachment.isCalendarEvent ? _c("div", {
       staticClass: "image-item-attachement"
-    }, [_c("label", [_vm._v(_vm._s("Pièce joint : " + attachment.fileName) + " ( nNon allouée)")])]) : _vm._e()]) : _vm._e();
+    }, [_c("label", [_vm._v(_vm._s(attachment.fileName) + " ( nNon allouée)")])]) : _vm._e()]) : _vm._e();
   }), _vm._v(" "), !_vm.mailAttachments.length && !_vm.loadingDataEmailBox ? [_c("p", [_vm._v(" Pas d'Attachements")])] : _vm._e()], 2)]) : _vm._e(), _vm._v(" "), _vm.loadingDataEmailBox ? _c("div", {
     staticClass: "modal__content"
   }, [_c("div", [_c("NcLoadingIcon", {
@@ -56536,6 +56544,21 @@ ___CSS_LOADER_EXPORT___.push([module.id, `@charset "UTF-8";
 }
 label[data-v-5efccc46] {
   font-size: 16px; /* Taille de police pour la légende */
+}
+.mailHeader[data-v-5efccc46] {
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 10px;
+  font-weight: bold;
+}
+.mailContent[data-v-5efccc46] {
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 10px;
 }`, ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
@@ -310882,4 +310905,4 @@ appointmentsConfigsStore.addInitialConfigs((0,_nextcloud_initial_state__WEBPACK_
 
 /******/ })()
 ;
-//# sourceMappingURL=calendar-main.js.map?v=f7e4c22de3b2e5407421
+//# sourceMappingURL=calendar-main.js.map?v=3dcf8dd7e7b228387c59

calendar/src/components/Editor/Attachments/AttachmentsList.vue

@@ -105,16 +105,28 @@
 						</template>
 						Revenir dans la listes des emails
 					</NcActionButton>
+						<div v-if="selectedMail" >
+							<div class="mailHeader">
+								{{ getLabelEmailBox(selectedMail.from) + ' : ' + selectedMail.subject  }}
+							</div>
+							<div class="mailContent">
+								{{ selectedMail.previewText }}
+							</div>
+						</div>
+
+						<div class="mailHeader">
+							Pièces jointes : 
+						</div>
 						<div class="image-list-attachement " v-if="!loadingDataEmailBox  && mailAttachments.length > 0" v-for="attachment in mailAttachments">  
 							<div v-if="attachment.isImage" class="image-item-attachement " @click="pickEmailAttachement(attachment)">  
 								<img :src="attachment.downloadUrl" :alt="attachment.fileName ">  
 								<label>{{ attachment.fileName }}</label>  
 							</div>  
 							<div v-else-if="! attachment.isImage &&  !attachment.isCalendarEvent" class="image-item-attachement " @click="pickEmailAttachement(attachment)">  
-								<label>{{  'Pièce joint : ' +  attachment.fileName }}</label>  
+								<label>{{ attachment.fileName }}</label>  
 							</div>  
 							<div v-else-if="attachment.isCalendarEvent" class="image-item-attachement " >  
-								<label>{{  'Pièce joint : ' +  attachment.fileName }} ( nNon allouée)</label>  
+								<label>{{  attachment.fileName }} ( nNon allouée)</label>  
 							</div>  
 						</div>
 					<template v-if="!mailAttachments.length && !loadingDataEmailBox" >
@@ -208,6 +220,7 @@ export default {
 			mailBoxData: [],
 			mailAttachments: [],
 			loadingText: 'Chargement ...',
+			selectedMail: null
 		}
 	},
 	computed: {
@@ -359,8 +372,9 @@ export default {
 		},
 		async getAttachments(mail){
 			this.loadingText = 'Récupération des piecs jointes ...'	
+			this.selectedMail = mail
 			this.loadingDataEmailBox = true
-			this.showAttachmentsSection = true 
+			this.showAttachmentsSection = true
 			this.mailAttachments  = [] ;
 			await this.loadAttachments(mail)
 			this.loadingDataEmailBox = false
@@ -562,6 +576,23 @@ export default {
 
 label {  
     font-size: 16px; /* Taille de police pour la légende */  
-}  
+}
+
+.mailHeader{
+	text-align: left;
+	display: flex;  
+    flex-direction: column;  
+    align-items: flex-start;  
+	padding: 10px;
+	font-weight: bold;
+}
+
+.mailContent{
+	text-align: left;
+	display: flex;  
+	flex-direction: column;  
+	align-items: flex-start;  
+	padding: 10px;
+}
 
 </style>