FEAT #124 add dnd sign file

apps/maarch_entreprise/Views/user-administration.component.html

@@ -148,24 +148,20 @@
                         <div id="jstree"></div>
                     </mat-tab>
                     <mat-tab *ngIf="!creationMode" label="Signature(s)">
-                        <button style="position: absolute;right: 20px;bottom: 20px;z-index:1;" (click)="clickOnUploader('uploadSignFile')" matTooltip="taille de 2 mo maximum"
-                            mat-fab color="accent">
-                            <mat-icon style="height:auto;" class="fa fa-plus"></mat-icon>
-                        </button>
-                        <div class="col-md-3 col-sm-6" *ngFor="let signature of user.signatures; let i = index">
-                            <mat-card style="padding-left:5px;">
-                                <mat-card-header>
-                                    <mat-card-title>
-                                        <mat-form-field>
-                                            <input matInput type="text" [(ngModel)]="signature.signature_label" name="selectedSignatureLabel" placeholder="{{lang.label}}"
-                                                (focusout)="updateSignature(i)">
-                                            <button mat-button matSuffix mat-icon-button (click)="deleteSignature(signature)" color="warn" matTooltip="{{lang.delete}}">
-                                                <mat-icon class="fa fa-times"></mat-icon>
-                                            </button>
-                                        </mat-form-field>
-                                    </mat-card-title>
-                                </mat-card-header>
+                        <div dnd-droppable matTooltip="{{lang.uploadSignFileInfo}}" (click)="clickOnUploader('uploadSignFile')" [class.dndFileHighlighted]="highlightMe" (dragover)="highlightMe=true" (dragleave)="highlightMe=false" (onDropSuccess)="test($event);highlightMe=false;"
+                            class="dndFile">
+                            {{lang.uploadSignFile}}
+                        </div>
+                        <div class="col-md-3 col-sm-6 col-xm-12" *ngFor="let signature of user.signatures; let i = index">
+                            <mat-card style="margin-bottom:10px;">
                                 <mat-card-content style="text-align:center;">
+                                    <mat-form-field floatLabel="never">
+                                        <input matInput type="text" [(ngModel)]="signature.signature_label" name="selectedSignatureLabel" placeholder="{{lang.label}}"
+                                            (focusout)="updateSignature(i)">
+                                        <button mat-button matSuffix mat-icon-button (click)="deleteSignature(signature)" color="warn" matTooltip="{{lang.delete}}">
+                                            <mat-icon class="fa fa-times"></mat-icon>
+                                        </button>
+                                    </mat-form-field>
                                     <img src="{{signature.pathToSignatureOnTmp}}" alt="Signature" style="width:auto;height:60px;">
                                 </mat-card-content>
                             </mat-card>

apps/maarch_entreprise/css/maarch-material.scss

@@ -75,25 +75,46 @@ $theme: mat-light-theme($primary, $accent, $warn);
 }
 
 .adminArea_1{
+  overflow: hidden;
   padding:20px;
   border-right: dashed 1px mat-color($primary, 500);
   border-bottom: dashed 1px mat-color($primary, 500);
 }
 
 .adminArea_2{
+  overflow: hidden;
   padding:20px;
   border-left: dashed 1px mat-color($primary, 500);
   border-bottom: dashed 1px mat-color($primary, 500);
 }
 
 .adminArea_3{
+  overflow: hidden;
   padding:20px;
   border-right: dashed 1px mat-color($primary, 500);
   border-top: dashed 1px mat-color($primary, 500);
 }
 
 .adminArea_4{
+  overflow: hidden;
   padding:20px;
   border-left: dashed 1px mat-color($primary, 500);
   border-top: dashed 1px mat-color($primary, 500);
+}
+
+.dndFile{
+  border: dashed 5px grey;
+  padding:10px;
+  text-align:center;
+  opacity:0.5;
+  font-size:15px;
+  font-weight:bolder;
+  margin-bottom:10px;
+
+}
+
+.dndFileHighlighted {
+  opacity : 1 !important;
+  border: dashed 5px mat-color($primary, 500) !important;
+  color : mat-color($primary, 500);
 }
\ No newline at end of file

apps/maarch_entreprise/js/angular/app/administration/user-administration.component.js

@@ -405,6 +405,24 @@ var UserAdministrationComponent = /** @class */ (function (_super) {
             });
         }
     };
+    UserAdministrationComponent.prototype.test = function (event) {
+        var _this = this;
+        console.log(event.mouseEvent.dataTransfer);
+        if (event.mouseEvent.dataTransfer.files && event.mouseEvent.dataTransfer.files[0]) {
+            var reader = new FileReader();
+            this.signatureModel.name = event.mouseEvent.dataTransfer.files[0].name;
+            this.signatureModel.size = event.mouseEvent.dataTransfer.files[0].size;
+            this.signatureModel.type = event.mouseEvent.dataTransfer.files[0].type;
+            if (this.signatureModel.label == "") {
+                this.signatureModel.label = this.signatureModel.name;
+            }
+            reader.readAsDataURL(event.mouseEvent.dataTransfer.files[0]);
+            reader.onload = function (value) {
+                window['angularUserAdministrationComponent'].componentAfterUpload(value.target.result);
+                _this.submitSignature();
+            };
+        }
+    };
     __decorate([
         core_1.ViewChild(material_1.MatPaginator),
         __metadata("design:type", material_1.MatPaginator)

apps/maarch_entreprise/js/angular/app/administration/user-administration.component.ts

@@ -421,6 +421,27 @@ export class UserAdministrationComponent extends AutoCompletePlugin implements O
                 });
         }
     }
+
+    test(event:any) {
+        console.log(event.mouseEvent.dataTransfer);
+        if (event.mouseEvent.dataTransfer.files && event.mouseEvent.dataTransfer.files[0]) {
+            var reader = new FileReader();
+
+            this.signatureModel.name = event.mouseEvent.dataTransfer.files[0].name;
+            this.signatureModel.size = event.mouseEvent.dataTransfer.files[0].size;
+            this.signatureModel.type = event.mouseEvent.dataTransfer.files[0].type;
+            if (this.signatureModel.label == "") {
+                this.signatureModel.label = this.signatureModel.name;
+            }
+
+            reader.readAsDataURL(event.mouseEvent.dataTransfer.files[0]);
+
+            reader.onload = (value: any) => {
+                window['angularUserAdministrationComponent'].componentAfterUpload(value.target.result);
+                this.submitSignature();
+            };
+        }
+    }
 }
 export interface History {
     event_date: Date;

apps/maarch_entreprise/js/angular/lang/lang-en.js

@@ -258,6 +258,8 @@ exports.LANG_EN = {
     "updateStatus": "Document status modification",
     "updateStatusInformationsChrono": "When typing the CHRONO of a document, you will modify its status. The document will be present in the basket depending of the status you have chosen.",
     "updateStatusInformationsGed": "When typing the GED NUMBER of a document, you will modify its status. The document will be present in the basket depending of the status you have chosen.",
+    "uploadSignFile": "Upload a sign file",
+    "uploadSignFileInfo": "Click to add sign file from your computer",
     "usedInActionPage": "Used in action page",
     "usedInBasketlist": "Used in basket list",
     "user": "user",

apps/maarch_entreprise/js/angular/lang/lang-en.ts

@@ -256,6 +256,8 @@ export const LANG_EN = {
     "updateStatus"              : "Document status modification",
     "updateStatusInformationsChrono" : "When typing the CHRONO of a document, you will modify its status. The document will be present in the basket depending of the status you have chosen.",
     "updateStatusInformationsGed"    : "When typing the GED NUMBER of a document, you will modify its status. The document will be present in the basket depending of the status you have chosen.",
+    "uploadSignFile"            : "Upload a sign file",
+    "uploadSignFileInfo"        : "Click to add sign file from your computer",
     "usedInActionPage"          : "Used in action page",
     "usedInBasketlist"          : "Used in basket list",
     "user"                      : "user",

apps/maarch_entreprise/js/angular/lang/lang-fr.js

@@ -277,6 +277,8 @@ exports.LANG_FR = {
     "updateStatus": "Changement de statut de courrier",
     "updateStatusInformationsChrono": "En saisissant le NUMÉRO CHRONO du document, vous modifierez le statut du courrier. Le courrier sera disponible dans la bannette des utilisateurs auquel il était affecté suivant le statut que vous aurez défini.",
     "updateStatusInformationsGed": "En saisissant l'IDENTIFIANT GED du document, vous modifierez le statut du courrier. Le courrier sera disponible dans la bannette des utilisateurs auquel il était affecté suivant le statut que vous aurez défini.",
+    "uploadSignFile": "Déposer une signature",
+    "uploadSignFileInfo": "Cliquer pour ajouter une signature depuis votre poste",
     "usedInActionPage": "Action sur la page d'action",
     "usedInBasketlist": "Action sur la liste de résultat",
     "user": "utilisateur",

apps/maarch_entreprise/js/angular/lang/lang-fr.ts

@@ -275,6 +275,8 @@ export const LANG_FR = {
     "updateStatus"                  : "Changement de statut de courrier",
     "updateStatusInformationsChrono" : "En saisissant le NUMÉRO CHRONO du document, vous modifierez le statut du courrier. Le courrier sera disponible dans la bannette des utilisateurs auquel il était affecté suivant le statut que vous aurez défini.",
     "updateStatusInformationsGed"    : "En saisissant l'IDENTIFIANT GED du document, vous modifierez le statut du courrier. Le courrier sera disponible dans la bannette des utilisateurs auquel il était affecté suivant le statut que vous aurez défini.",
+    "uploadSignFile"               : "Déposer une signature",
+    "uploadSignFileInfo"           : "Cliquer pour ajouter une signature depuis votre poste",
     "usedInActionPage"             : "Action sur la page d'action",
     "usedInBasketlist"             : "Action sur la liste de résultat",
     "user"                          : "utilisateur",