diff --git a/src/frontend/app/sendedResource/sended-resource-list.component.html b/src/frontend/app/sendedResource/sended-resource-list.component.html
index 46e0e40ad898efe0fb2d4a23d8147c67f6d2184d..f92ecd7b7032229548566e4cdee43739e96dc5f5 100644
--- a/src/frontend/app/sendedResource/sended-resource-list.component.html
+++ b/src/frontend/app/sendedResource/sended-resource-list.component.html
@@ -64,7 +64,7 @@
         </ng-container>
         <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
     </mat-table>
-    <button mat-fab class="addSendedResource" color="primary" [title]="lang.addAttachment" (click)="openPromptMail()">
-        <mat-icon class="fa fa-plus"></mat-icon>
+    <button mat-fab *ngIf="privilegeService.hasCurrentUserPrivilege('sendmail')" class="addSendedResource" color="primary" [title]="lang.sendElement" (click)="openPromptMail()">
+        <mat-icon style="height: auto;width: auto;font-size: 20px;" class="far fa-paper-plane"></mat-icon>
     </button>
 </ng-template>
\ No newline at end of file
diff --git a/src/frontend/app/sendedResource/sended-resource-list.component.ts b/src/frontend/app/sendedResource/sended-resource-list.component.ts
index 47b2490c9fe8d79646502448a11ca9513e91340b..010c882380aa5648294ef85c21bfe1bf32f18cf8 100644
--- a/src/frontend/app/sendedResource/sended-resource-list.component.ts
+++ b/src/frontend/app/sendedResource/sended-resource-list.component.ts
@@ -83,7 +83,7 @@ export class SendedResourceListComponent implements OnInit {
                             hasAttach: false,
                             hasNote: false,
                             hasMainDoc: false,
-                            canManage: false
+                            canManage: true
                         }
                     })
                     return data;
@@ -185,19 +185,19 @@ export class SendedResourceListComponent implements OnInit {
                         return {
                             id: item.id,
                             sender: item.userLabel,
-                            recipients: item.userLabel,
+                            recipients: item.recipients.map((item: any) => item.contactLabel),
                             creationDate: item.creationDate,
                             sendDate: item.creationDate,
                             type: 'shipping',
                             typeColor: '#9440D5',
-                            desc: 'Envoi maileva',
+                            desc: this.lang.shipping,
                             status: 'SENT',
                             hasAttach: item.creationDate === 'attachment',
                             hasNote: false,
                             hasMainDoc: item.creationDate === 'resource',
                             canManage: false
                         }
-                    })
+                    });
                     return data;
                 }),
                 tap((data: any) => {
@@ -234,10 +234,16 @@ export class SendedResourceListComponent implements OnInit {
         this.dataSource.filter = ev.value;
     }
 
-    openPromptMail(row: any = null) {
+    openPromptMail(row: any = {id: null, type: null}) {
 
-        if (row.canManage) {
-            const dialogRef = this.dialog.open(SendedResourcePageComponent, { maxWidth: '90vw', width: '750px', disableClose: true, data: { title: `Toto`, resId: this.resId, emailId: row.id } });
+        let title = this.lang.sendElement;
+
+        if (row.id !== null) {
+            title = this.lang[row.type];
+        }
+
+        if (row.canManage || row.id === null) {
+            const dialogRef = this.dialog.open(SendedResourcePageComponent, { maxWidth: '90vw', width: '750px', minHeight:'500px', disableClose: true, data: { title: title, resId: this.resId, emailId: row.id, emailType: row.type } });
 
             dialogRef.afterClosed().pipe(
                 filter((data: string) => data === 'success'),
@@ -250,6 +256,5 @@ export class SendedResourceListComponent implements OnInit {
                 })
             ).subscribe();
         }
-
     }
 }
\ No newline at end of file
diff --git a/src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.html b/src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.html
index 92720f065e383bc6b28c422c88ed4bd25000767c..d9af58861e32a66626d9c42537a4d83679e4580b 100644
--- a/src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.html
+++ b/src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.html
@@ -1,133 +1,172 @@
 <h1 mat-dialog-title>
     <span style="flex: 1;">
-        Envoyer un élement
+        {{data.title}}
     </span>
     <button [title]="lang.close" mat-icon-button (click)="closeModal()">
         <mat-icon class="fa fa-times"></mat-icon>
     </button></h1>
 <mat-dialog-content class="modal-container">
+    <div *ngIf="loading" class="loading">
+        <mat-spinner style="margin:auto;"></mat-spinner>
+    </div>
     <mat-form-field>
         <span matPrefix class="attachLabel">De&nbsp;:&nbsp;</span>
-        <input *ngIf="emailStatus === 'SENT'" matInput [value]="currentSender" readonly>
-        <mat-select *ngIf="emailStatus !== 'SENT'" [(ngModel)]="currentSender">
+        <input *ngIf="!canManageMail()" matInput [value]="currentSender" readonly>
+        <mat-select *ngIf="canManageMail()" [(ngModel)]="currentSender">
             <mat-option *ngFor="let email of availableSenders | sortBy: 'label'" [value]="email.email">
                 {{email.label}} ({{email.email}})
             </mat-option>
         </mat-select>
-        <button mat-button color="primary" matSuffix [disabled]="emailStatus === 'SENT'" [class.activeButton]="showCopies" (click)="$event.stopPropagation();showCopies = !showCopies">Cc</button>
-        <button mat-button color="primary" matSuffix [disabled]="emailStatus === 'SENT'" [class.activeButton]="showInvisibleCopies"
+        <button mat-button color="primary" matSuffix [disabled]="!canManageMail()" [class.activeButton]="showCopies"
+            (click)="$event.stopPropagation();showCopies = !showCopies">Cc</button>
+        <button mat-button color="primary" matSuffix [disabled]="!canManageMail()"
+            [class.activeButton]="showInvisibleCopies"
             (click)="$event.stopPropagation();showInvisibleCopies = !showInvisibleCopies">Cci</button>
     </mat-form-field>
 
     <mat-form-field>
         <span matPrefix class="attachLabel">À&nbsp;:&nbsp;</span>
-        <mat-chip-list id="recipients-list" #recipientsList cdkDropList [cdkDropListConnectedTo]="['copies-list','invcopies-list']" [cdkDropListData]="recipients" (cdkDropListDropped)="drop($event)">
-            <mat-chip cdkDrag class="recipients" *ngFor="let recipient of recipients" [selectable]="selectable" [removable]="emailStatus !== 'SENT'"
-                (removed)="remove(recipient, 'recipients')" [title]="recipient.email">
+        <mat-chip-list id="recipients-list" #recipientsList cdkDropList
+            [cdkDropListConnectedTo]="['copies-list','invcopies-list']" [cdkDropListData]="recipients"
+            (cdkDropListDropped)="drop($event)">
+            <mat-chip cdkDrag class="recipients" *ngFor="let recipient of recipients" [selectable]="selectable"
+                [removable]="canManageMail()" (removed)="remove(recipient, 'recipients')" [title]="recipient.email">
                 {{recipient.label}}
-                <mat-icon matChipRemove class="fa fa-times" *ngIf="emailStatus !== 'SENT'"></mat-icon>
+                <mat-icon matChipRemove class="fa fa-times" *ngIf="canManageMail()"></mat-icon>
             </mat-chip>
-            <input [formControl]="recipientsInput" [disabled]="emailStatus === 'SENT'" [matChipInputFor]="recipientsList"
+            <input [formControl]="recipientsInput" [matChipInputFor]="recipientsList"
                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="true"
-                (matChipInputTokenEnd)="add($event, 'recipients')" [matAutocomplete]="autoEmails" (focus)="resetAutocomplete()">
+                (matChipInputTokenEnd)="add($event, 'recipients')" [matAutocomplete]="autoEmails"
+                (focus)="resetAutocomplete()">
         </mat-chip-list>
         <mat-autocomplete #autoEmails="matAutocomplete" (optionSelected)="addEmail($event.option.value, 'recipients')">
             <mat-option *ngFor="let option of filteredEmails | async" [value]="option">
-                {{option.label}}<span class="attachLabel" *ngIf="option.type !== 'contactGroup'"> ({{option.email}})</span>
+                {{option.label}}<span class="attachLabel" *ngIf="option.type !== 'contactGroup'">
+                    ({{option.email}})</span>
             </mat-option>
         </mat-autocomplete>
     </mat-form-field>
 
     <mat-form-field *ngIf="showCopies">
         <span matPrefix class="attachLabel">Cc&nbsp;:&nbsp;</span>
-        <mat-chip-list id="copies-list" #copiesList cdkDropList [cdkDropListConnectedTo]="['recipients-list','invcopies-list']" [cdkDropListData]="copies" (cdkDropListDropped)="drop($event)">
-            <mat-chip cdkDrag class="copy" *ngFor="let copy of copies" [selectable]="selectable" [removable]="emailStatus !== 'SENT'"
-                (removed)="remove(copy, 'copies')" [title]="copy.email">
+        <mat-chip-list id="copies-list" #copiesList cdkDropList
+            [cdkDropListConnectedTo]="['recipients-list','invcopies-list']" [cdkDropListData]="copies"
+            (cdkDropListDropped)="drop($event)">
+            <mat-chip cdkDrag class="copy" *ngFor="let copy of copies" [selectable]="selectable"
+                [removable]="canManageMail()" (removed)="remove(copy, 'copies')" [title]="copy.email">
                 {{copy.label}}
-                <mat-icon matChipRemove class="fa fa-times" *ngIf="emailStatus !== 'SENT'"></mat-icon>
+                <mat-icon matChipRemove class="fa fa-times" *ngIf="canManageMail()"></mat-icon>
             </mat-chip>
-            <input [formControl]="recipientsInput" [disabled]="emailStatus === 'SENT'" [matChipInputFor]="copiesList"
+            <input [formControl]="recipientsInput" [matChipInputFor]="copiesList"
                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="true"
-                (matChipInputTokenEnd)="add($event, 'copies')" [matAutocomplete]="autoEmails2" (focus)="resetAutocomplete()">
+                (matChipInputTokenEnd)="add($event, 'copies')" [matAutocomplete]="autoEmails2"
+                (focus)="resetAutocomplete()">
         </mat-chip-list>
         <mat-autocomplete #autoEmails2="matAutocomplete" (optionSelected)="addEmail($event.option.value, 'copies')">
             <mat-option *ngFor="let option of filteredEmails | async" [value]="option">
-                {{option.label}}<span class="attachLabel" *ngIf="option.type !== 'contactGroup'"> ({{option.email}})</span>
+                {{option.label}}<span class="attachLabel" *ngIf="option.type !== 'contactGroup'">
+                    ({{option.email}})</span>
             </mat-option>
         </mat-autocomplete>
     </mat-form-field>
 
     <mat-form-field *ngIf="showInvisibleCopies">
         <span matPrefix class="attachLabel">Cci&nbsp;:&nbsp;</span>
-        <mat-chip-list id="invcopies-list" #invCopiesList cdkDropList [cdkDropListConnectedTo]="['recipients-list','copies-list']" [cdkDropListData]="invisibleCopies" (cdkDropListDropped)="drop($event)">
-            <mat-chip class="copy" *ngFor="let invCopy of invisibleCopies" [selectable]="selectable" [removable]="emailStatus !== 'SENT'"
-                (removed)="remove(invCopy, 'invisibleCopies')" [title]="invCopy.email">
+        <mat-chip-list id="invcopies-list" #invCopiesList cdkDropList
+            [cdkDropListConnectedTo]="['recipients-list','copies-list']" [cdkDropListData]="invisibleCopies"
+            (cdkDropListDropped)="drop($event)">
+            <mat-chip class="copy" *ngFor="let invCopy of invisibleCopies" [selectable]="selectable"
+                [removable]="canManageMail()" (removed)="remove(invCopy, 'invisibleCopies')" [title]="invCopy.email">
                 {{invCopy.label}}
-                <mat-icon matChipRemove class="fa fa-times" *ngIf="emailStatus !== 'SENT'"></mat-icon>
+                <mat-icon matChipRemove class="fa fa-times" *ngIf="canManageMail()"></mat-icon>
             </mat-chip>
-            <input [formControl]="recipientsInput" [disabled]="emailStatus === 'SENT'" [matChipInputFor]="invCopiesList"
+            <input [formControl]="recipientsInput" [matChipInputFor]="invCopiesList"
                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="true"
-                (matChipInputTokenEnd)="add($event, 'invisibleCopies')" [matAutocomplete]="autoEmails3" (focus)="resetAutocomplete()">
+                (matChipInputTokenEnd)="add($event, 'invisibleCopies')" [matAutocomplete]="autoEmails3"
+                (focus)="resetAutocomplete()">
         </mat-chip-list>
-        <mat-autocomplete #autoEmails3="matAutocomplete" (optionSelected)="addEmail($event.option.value, 'invisibleCopies')">
+        <mat-autocomplete #autoEmails3="matAutocomplete"
+            (optionSelected)="addEmail($event.option.value, 'invisibleCopies')">
             <mat-option *ngFor="let option of filteredEmails | async" [value]="option">
-                {{option.label}}<span class="attachLabel" *ngIf="option.type !== 'contactGroup'"> ({{option.email}})</span>
+                {{option.label}}<span class="attachLabel" *ngIf="option.type !== 'contactGroup'">
+                    ({{option.email}})</span>
             </mat-option>
         </mat-autocomplete>
     </mat-form-field>
     <mat-form-field floatLabel="never">
-        <input matInput placeholder="Sujet" [readonly]="emailStatus === 'SENT'" [(ngModel)]="emailsubject" maxlength="70">
-        <button mat-icon-button matSuffix *ngFor="let keyVal of emailAttachTool | keyvalue" [disabled]="emailStatus === 'SENT' || emailAttachTool[keyVal.key].list.length === 0" [title]="emailAttachTool[keyVal.key].title" (click)="$event.stopPropagation();currentEmailAttachTool=keyVal.key;" [matMenuTriggerFor]="emailAttachListMenu">
-            <mat-icon class="{{emailAttachTool[keyVal.key].icon}}" [class.activeButton]="(keyVal.key === 'document' && emailAttach.document.isLinked) || (keyVal.key !== 'document' && emailAttach[keyVal.key].length > 0)" color="primary"></mat-icon>
+        <input matInput placeholder="Sujet" [readonly]="!canManageMail()" [(ngModel)]="emailsubject" maxlength="70">
+        <button mat-icon-button matSuffix *ngFor="let keyVal of emailAttachTool | keyvalue"
+            [disabled]="!canManageMail() || emailAttachTool[keyVal.key].list.length === 0"
+            [title]="emailAttachTool[keyVal.key].title"
+            (click)="$event.stopPropagation();currentEmailAttachTool=keyVal.key;"
+            [matMenuTriggerFor]="emailAttachListMenu">
+            <mat-icon class="{{emailAttachTool[keyVal.key].icon}}"
+                [class.activeButton]="(keyVal.key === 'document' && emailAttach.document.isLinked) || (keyVal.key !== 'document' && emailAttach[keyVal.key].length > 0)"
+                color="primary"></mat-icon>
         </button>
         <mat-menu #emailAttachListMenu="matMenu" [class]="'attachListMenu'">
             <ng-container *ngFor="let keyVal of emailAttachTool | keyvalue">
                 <ng-container *ngIf="keyVal.key === currentEmailAttachTool">
-                    <button mat-menu-item style="line-height: normal;" disableRipple *ngFor="let attach of emailAttachTool[keyVal.key].list" [disabled]="isSelectedAttachMail(attach,keyVal.key)">
+                    <button mat-menu-item style="line-height: normal;" disableRipple
+                        *ngFor="let attach of emailAttachTool[keyVal.key].list"
+                        [disabled]="isSelectedAttachMail(attach,keyVal.key)">
                         <span (click)="toggleAttachMail(attach,keyVal.key,'original')" [title]="attach.label">
-                            <div style="font-size: 10px;opacity: 0.5;">{{attach.chrono}} - {{attach.typeLabel}} ({{attach.creator}})</div>
-                            {{attach.label | shorten: 45: '...'}} - {{attach.format}}</span>&nbsp;<span class="pdfVersion" *ngIf="!functions.empty(attach.convertedDocument)" (click)="toggleAttachMail(attach,keyVal.key,'pdf');">(version PDF)
+                            <div style="font-size: 10px;opacity: 0.5;">{{attach.chrono}} - {{attach.typeLabel}}
+                                ({{attach.creator}})</div>
+                            {{attach.label | shorten: 45: '...'}} - {{attach.format}}
+                        </span>&nbsp;<span class="pdfVersion" *ngIf="!functions.empty(attach.convertedDocument)"
+                            (click)="toggleAttachMail(attach,keyVal.key,'pdf');">(version PDF)
                         </span>
                     </button>
-                </ng-container>  
+                </ng-container>
             </ng-container>
         </mat-menu>
     </mat-form-field>
     <mat-chip-list>
-        <mat-chip class="copy" *ngIf="emailAttach.document.isLinked" [selectable]="selectable" [removable]="emailStatus !== 'SENT'"
-            (removed)="removeAttachMail(0, 'document')" [title]="emailAttach.document.chrono + ' - ' + emailAttach.document.label">
-            <i class="fa fa-file attachLabel"></i>&nbsp;{{emailAttach.document.label | shorten: 25: '...'}}&nbsp;<small class="attachLabel">(pdf - 25 Ko)</small>
-            <mat-icon matChipRemove class="fa fa-times" *ngIf="emailStatus !== 'SENT'"></mat-icon>
+        <mat-chip class="copy" *ngIf="emailAttach.document.isLinked" [selectable]="selectable"
+            [removable]="canManageMail()" (removed)="removeAttachMail(0, 'document')"
+            [title]="emailAttach.document.chrono + ' - ' + emailAttach.document.label">
+            <i class="fa fa-file attachLabel"></i>&nbsp;{{emailAttach.document.label | shorten: 25: '...'}}&nbsp;<small
+                class="attachLabel">(pdf - 25 Ko)</small>
+            <mat-icon matChipRemove class="fa fa-times" *ngIf="canManageMail()"></mat-icon>
         </mat-chip>
         <ng-container *ngFor="let keyVal of emailAttach | keyvalue">
             <ng-container *ngIf="keyVal.key !== 'document'">
-                <mat-chip class="copy" *ngFor="let item of emailAttach[keyVal.key]; let i=index;" [selectable]="selectable" [removable]="emailStatus !== 'SENT'"
-                (removed)="removeAttachMail(i, keyVal.key)" [title]="item.title">
-                <i class="{{emailAttachTool[keyVal.key].icon}} attachLabel"></i>&nbsp;{{item.label | shorten: 25: '...'}}&nbsp;<small class="attachLabel">({{item.format}}{{!functions.empty(item.size) ? ' - '+item.size : ''}})</small>
-                <mat-icon matChipRemove class="fa fa-times" *ngIf="emailStatus !== 'SENT'"></mat-icon>
-            </mat-chip>
-            </ng-container>  
+                <mat-chip class="copy" *ngFor="let item of emailAttach[keyVal.key]; let i=index;"
+                    [selectable]="selectable" [removable]="canManageMail()" (removed)="removeAttachMail(i, keyVal.key)"
+                    [title]="item.title">
+                    <i
+                        class="{{emailAttachTool[keyVal.key].icon}} attachLabel"></i>&nbsp;{{item.label | shorten: 25: '...'}}&nbsp;<small
+                        class="attachLabel">({{item.format}}{{!functions.empty(item.size) ? ' - '+item.size : ''}})</small>
+                    <mat-icon matChipRemove class="fa fa-times" *ngIf="canManageMail()"></mat-icon>
+                </mat-chip>
+            </ng-container>
         </ng-container>
     </mat-chip-list>
-    <div class="models" *ngIf="emailStatus !== 'SENT'">
+    <div class="models" *ngIf="canManageMail()">
         <plugin-select-search *ngIf="availableEmailModels.length > 0" [label]="'Modèle(s) de mail'"
             [placeholderLabel]="'Modèle(s) de mail'" [datas]="availableEmailModels"
-            [formControlSelect]="templateEmailListForm" (afterSelected)="mergeEmailTemplate($event)"
-        >
+            [formControlSelect]="templateEmailListForm" (afterSelected)="mergeEmailTemplate($event)">
         </plugin-select-search>
 
         <plugin-select-search #templateList *ngIf="availableSignEmailModels.length > 0" [label]="'Signature(s) de mail'"
             [placeholderLabel]="'Signature(s) de mail'" [datas]="availableSignEmailModels"
-            [formControlSelect]="emailSignListForm" (afterSelected)="mergeSignEmailTemplate($event)"
-        >
+            [formControlSelect]="emailSignListForm" (afterSelected)="mergeSignEmailTemplate($event)">
         </plugin-select-search>
     </div>
     <div style="padding-top: 10px;">
-        <textarea style="padding-top: 10px;" name="emailSignature" id="emailSignature" [(ngModel)]="emailContent"></textarea>
+        <textarea *ngIf="!pdfMode" style="padding-top: 10px;" name="emailSignature" id="emailSignature"
+            [(ngModel)]="emailContent"></textarea>
+
+        <app-document-viewer *ngIf="pdfMode" #appDocumentViewer style="display:block;height:400px;width:100%;overflow: auto;"
+            [editMode]="false" [base64]="emailContent">
+        </app-document-viewer>
     </div>
 </mat-dialog-content>
-<div mat-dialog-actions class="actions" *ngIf="emailStatus !== 'SENT'">
-    <button mat-raised-button color="primary" (click)="onSubmit()">Envoyer</button>
+<div mat-dialog-actions class="actions" *ngIf="!loading && canManageMail()">
+    <button mat-raised-button color="primary" *ngIf="privilegeService.hasCurrentUserPrivilege('sendmail')"
+        (click)="onSubmit()">Envoyer</button>
     <button mat-raised-button color="primary" (click)="saveDraft()">Enregistrer le brouilon</button>
-    <button mat-raised-button color="warn" (click)="deleteEmail()" *ngIf="data.emailId" [disabled]="emailStatus === 'SENT' || emailStatus === 'WAITING'">Supprimer</button>
-</div>
+    <button mat-raised-button color="warn" (click)="deleteEmail()" *ngIf="data.emailId"
+        [disabled]="!canManageMail()">Supprimer</button>
+</div>
\ No newline at end of file
diff --git a/src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.scss b/src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.scss
index 5f9ffb866fecfdb8cc3a8cf37d365aa3b22967b8..172618568a9ffef045a2a46e11a08cd694d8fc0e 100644
--- a/src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.scss
+++ b/src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.scss
@@ -2,9 +2,13 @@
 
 .loading {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
+    height: 100%;
+    position: absolute;
+    z-index: 2;
+    width: 100%;
+    top: 0;
+    left: 0;
+    background: white;
 }
 
 .mat-dialog-title {
diff --git a/src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.ts b/src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.ts
index be0fa410ede8817925e1b35c0dd8bfe97d08559e..7f0f7fe5e0391a05e022c60c4332b93ce0ec7de6 100644
--- a/src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.ts
+++ b/src/frontend/app/sendedResource/sended-resource-page/sended-resource-page.component.ts
@@ -1,17 +1,19 @@
-import { COMMA, ENTER } from '@angular/cdk/keycodes';
-import { Component, OnInit, ViewChild, EventEmitter, ElementRef, Input, Inject, AfterViewInit } from '@angular/core';
+import { COMMA } from '@angular/cdk/keycodes';
+import { Component, OnInit, Inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { LANG } from '../../translate.component';
 import { NotificationService } from '../../notification.service';
-import { Observable, merge, Subject, of as observableOf, of } from 'rxjs';
-import { MatPaginator, MatSort, MatDialog, MatTableDataSource, MAT_DIALOG_DATA, MatDialogRef, MatChipInputEvent, MatSelect } from '@angular/material';
-import { takeUntil, startWith, switchMap, map, catchError, filter, exhaustMap, tap, debounceTime, distinctUntilChanged, finalize } from 'rxjs/operators';
+import { Observable, of } from 'rxjs';
+import { MatDialog, MAT_DIALOG_DATA, MatDialogRef, MatChipInputEvent } from '@angular/material';
+import { switchMap, map, catchError, filter, exhaustMap, tap, debounceTime } from 'rxjs/operators';
 import { FormControl } from '@angular/forms';
 import { FunctionsService } from '../../../service/functions.service';
 import { CdkDragDrop, transferArrayItem } from '@angular/cdk/drag-drop';
 import { ContactService } from '../../../service/contact.service';
 import { AppService } from '../../../service/app.service';
 import { ConfirmComponent } from '../../../plugins/modal/confirm.component';
+import { PrivilegeService } from '../../../service/privileges.service';
+import { HeaderService } from '../../../service/header.service';
 
 declare var tinymce: any;
 
@@ -58,6 +60,7 @@ export class SendedResourcePageComponent implements OnInit {
     showCopies: boolean = false;
     showInvisibleCopies: boolean = false;
 
+    emailCreatorId: number = null;
     emailId: number = null;
     emailsubject: string = '';
     emailStatus: string = 'WAITING';
@@ -83,6 +86,9 @@ export class SendedResourcePageComponent implements OnInit {
     emailAttach: any = {};
     lastClicked: any = Date.now();
 
+    canManage: boolean = false;
+    pdfMode : boolean = false;
+
     constructor(
         public http: HttpClient,
         private notify: NotificationService,
@@ -91,6 +97,8 @@ export class SendedResourcePageComponent implements OnInit {
         public dialogRef: MatDialogRef<SendedResourcePageComponent>,
         public functions: FunctionsService,
         private contactService: ContactService,
+        public privilegeService: PrivilegeService,
+        private headerService: HeaderService
     ) { }
 
     async ngOnInit(): Promise<void> {
@@ -112,9 +120,11 @@ export class SendedResourcePageComponent implements OnInit {
         await this.getAttachElements();
         await this.getResourceData();
         await this.getUserEmails();
-
-        if (this.data.emailId) {
+        
+        if (this.data.emailId && this.data.emailType === 'email') {
             await this.getEmailData(this.data.emailId);
+        } else if (this.data.emailId && this.data.emailType === 'acknowledgementReceipt'){
+            await this.getAcknowledgementReceiptData(this.data.emailId);
         }
         this.loading = false;
         setTimeout(() => {
@@ -265,9 +275,10 @@ export class SendedResourcePageComponent implements OnInit {
     }
 
     getEmailData(emailId: number) {
-        return new Promise((resolve, reject) => {
+        return new Promise((resolve) => {
             this.http.get(`../../rest/emails/${emailId}`).pipe(
                 tap((data: any) => {
+                    this.emailCreatorId = data.userId;
                     this.currentSender = data.sender.email;
                     this.recipients = data.recipients.map((item: any) => {
                         return {
@@ -315,10 +326,42 @@ export class SendedResourcePageComponent implements OnInit {
                             this.emailAttach.document.isLinked = true;
                             this.emailAttach.document.original = data.document.original;
                         }
-                    });
-                    console.log(this.emailAttachTool);
-                    console.log(this.emailAttach);
-                    
+                    });                    
+                    resolve(true);
+                }),
+                catchError((err) => {
+                    this.notify.handleSoftErrors(err);
+                    resolve(false);
+                    return of(false);
+                })
+            ).subscribe();
+        });
+    }
+
+    getAcknowledgementReceiptData(emailId: number) {
+        return new Promise((resolve) => {
+            this.http.get(`../../rest/acknowledgementReceipts/${emailId}`).pipe(
+                tap((data: any) => {
+                    this.currentSender = data.acknowledgementReceipt.userLabel;
+                    this.recipients = [{
+                        label: this.contactService.formatContact(data.acknowledgementReceipt.contact),
+                        email: data.acknowledgementReceipt.contact.email
+                    }];
+
+                    this.emailsubject = this.lang.shipping;
+
+                    this.emailStatus = 'SENT';
+                }),
+                exhaustMap(() => this.http.get(`../../rest/acknowledgementReceipts/${emailId}/content`)),
+                tap((data: any) => {
+                    this.pdfMode = data.format === 'pdf';
+
+                    if (this.pdfMode) {
+                        this.emailContent = data.encodedDocument;
+                        
+                    } else {
+                        this.emailContent = atob(data.encodedDocument);
+                    }
                     resolve(true);
                 }),
                 catchError((err) => {
@@ -331,7 +374,7 @@ export class SendedResourcePageComponent implements OnInit {
     }
 
     getResourceData() {
-        return new Promise((resolve, reject) => {
+        return new Promise((resolve) => {
             this.http.get(`../../rest/resources/${this.data.resId}?light=true`).pipe(
                 tap((data: any) => {
                     this.resourceData = data;
@@ -376,7 +419,7 @@ export class SendedResourcePageComponent implements OnInit {
     }
 
     getUserEmails() {
-        return new Promise((resolve, reject) => {
+        return new Promise((resolve) => {
             this.http.get('../../rest/currentUser/availableEmails').pipe(
                 tap((data: any) => {
                     this.availableSenders = data.emails;
@@ -393,7 +436,7 @@ export class SendedResourcePageComponent implements OnInit {
     }
 
     getAttachElements() {
-        return new Promise((resolve, reject) => {
+        return new Promise((resolve) => {
             this.http.get(`../../rest/resources/${this.data.resId}/emailsInitialization`).pipe(
                 tap((data: any) => {
                     Object.keys(data).forEach(element => {
@@ -423,6 +466,7 @@ export class SendedResourcePageComponent implements OnInit {
 
     initEmailsList() {
         this.recipientsInput.valueChanges.pipe(
+            filter(value => value !== null),
             debounceTime(300),
             tap((value) => {
                 if (value.length === 0) {
@@ -509,9 +553,7 @@ export class SendedResourcePageComponent implements OnInit {
 
     createEmail(closeModal: boolean = true) {
         this.http.post(`../../rest/emails`, this.formatEmail()).pipe(
-            tap((data: any) => {
-                //this.data.emailId = data.id;
-
+            tap(() => {
                 if (this.emailStatus === 'DRAFT') {
                     this.notify.success("Brouillon enregitré");
                 } else {
@@ -663,10 +705,13 @@ export class SendedResourcePageComponent implements OnInit {
         }
     }
 
-    test() {
-        if (Date.now() - this.lastClicked >= 5000) {
-            this.lastClicked = Date.now();
-            console.log('modifié');
+    canManageMail() {
+        if ((this.data.emailId === null) || (this.emailStatus !== 'SENT' && this.headerService.user.id === this.emailCreatorId)) {
+            this.recipientsInput.enable();
+            return true;
+        } else {
+            this.recipientsInput.disable();
+            return false;
         }
     }
 }
\ No newline at end of file
diff --git a/src/frontend/lang/lang-en.ts b/src/frontend/lang/lang-en.ts
index d9cda5733aee00f9a2355217df73d9da61821e15..53d7f1e92dc3ca70e5f1df8966849a7e3ab4bb0d 100755
--- a/src/frontend/lang/lang-en.ts
+++ b/src/frontend/lang/lang-en.ts
@@ -1500,4 +1500,5 @@ export const LANG_EN = {
     "m2m_ARCHIVETRANSFER" : "Archive transfer",
     "m2m_ARCHIVETRANSFERREPLY" : "Archive transfer reply",
     "shipping" :  "Send maileva",
+    "sendElement" :  "Send an element",
 };
diff --git a/src/frontend/lang/lang-fr.ts b/src/frontend/lang/lang-fr.ts
index 25bbb67d9dd29630931180cf853cf639f48b1500..4f4fe7930dc48d7acb1070c5650490c8e29f842f 100755
--- a/src/frontend/lang/lang-fr.ts
+++ b/src/frontend/lang/lang-fr.ts
@@ -1539,4 +1539,5 @@ export const LANG_FR = {
     "senderShort" :  "De",
     "recipientShort" :  "Pour",
     "shipping" :  "Envoi maileva",
+    "sendElement" :  "Envoyer un element",
 };
diff --git a/src/frontend/lang/lang-nl.ts b/src/frontend/lang/lang-nl.ts
index 7361bbe626834cb36b76a12a5078680341ec5c6b..2d7993794134a17c05d295bc33cf5631b7ce2484 100755
--- a/src/frontend/lang/lang-nl.ts
+++ b/src/frontend/lang/lang-nl.ts
@@ -1524,5 +1524,6 @@ export const LANG_NL = {
     "recipientShort" :  "To", //_TO_TRANSLATE,
     "m2m_ARCHIVETRANSFER" : "Digitale brief",
     "m2m_ARCHIVETRANSFERREPLY" :  "Antwoord verzonden",
-    "shipping" :  "Send maileva", //_TO_TRANSLATE,
+    "shipping" :  "Send maileva", //_TO_TRANSLATE
+    "sendElement" :  "Send an element", //_TO_TRANSLATE
 };