FEAT #11691 TIME 0:20 add filter attachments types

src/frontend/app/attachments/attachments-list.component.html

@@ -8,12 +8,14 @@
         <div *ngIf="attachments.length == 0" style="text-align:center;font-size:24px;font-weight:bold;opacity:0.3;">
             {{lang.noAttachment}}
         </div>
-        <button mat-button color="primary" (click)="createAttachment()">{{lang.addAttachment}}</button>
-        <mat-form-field [style.visibility]="attachments.length > 0 ? 'visible' : 'hidden'" floatLabel="never"
-            style="padding-left:20px;padding-right:20px;">
-            <input matInput placeholder="{{lang.searchByAttachmentType}}" #listFilter>
-        </mat-form-field>
-        <mat-card *ngFor="let attachment of attachments | filterList:listFilter.value:'typeLabel'"
+        <!--<button mat-button color="primary" (click)="createAttachment()">{{lang.addAttachment}}</button>-->
+        <mat-button-toggle-group *ngIf="attachments.length > 0" class="filterTypes" (change)="filterType($event)">
+            <mat-button-toggle [checked]="currentFilter === ''" [value]="''">Tous</mat-button-toggle>
+            <mat-button-toggle *ngFor="let attachType of filterAttachTypes | sortBy : 'label'"
+                [checked]="currentFilter === attachType.id" [value]="attachType.id">{{attachType.label}}
+            </mat-button-toggle>
+        </mat-button-toggle-group>
+        <mat-card *ngFor="let attachment of attachments | filterList:currentFilter:'type'"
             [class.signed]="attachment.status==='SIGN'" [style.background-image]="'url('+attachment.thumbnailUrl+')'"
             style="padding:0;margin: 30px;min-height: 300px;background-size: cover;overflow: hidden;"
             (mouseover)="$event.stopPropagation();toggleInfo(attachment,true)">
@@ -85,4 +87,7 @@
             </div>
         </mat-card>
     </div>
+    <button mat-fab class="addPj" color="primary" [title]="lang.addAttachment" (click)="createAttachment()">
+        <mat-icon class="fa fa-plus"></mat-icon>
+    </button>
 </ng-template>
\ No newline at end of file

src/frontend/app/attachments/attachments-list.component.scss

@@ -3,7 +3,7 @@
 .mat-card {
     box-shadow: none;
     border: solid 1px #E0E0E0;
-    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
+    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
 }
 
 .layout {
@@ -16,6 +16,7 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
+
     .mat-raised-button {
         width: 200px;
     }
@@ -93,10 +94,16 @@
 
 .signed {
     border: solid 1px green;
+
     .infosPj {
         background: green;
     }
-    .mainInfos, .subInfos, .stateInfo, .statusInfo, .subInfosBottom {
+
+    .mainInfos,
+    .subInfos,
+    .stateInfo,
+    .statusInfo,
+    .subInfosBottom {
         color: white;
     }
 }
@@ -133,7 +140,7 @@
 }
 
 .loading {
-    display:flex;
+    display: flex;
     justify-content: center;
     top: 0;
     left: 0;
@@ -141,4 +148,43 @@
     background: #ffffffb3;
     z-index: 1;
     overflow: hidden;
+}
+
+.filterTypes {
+    margin-left: 10px;
+    ::ng-deep.mat-button-toggle-checked {
+        background: $secondary;
+        color: white;
+        font-weight: bold;
+        height: 25px;
+        font-size: 10px;
+
+        .mat-button-toggle-label-content {
+            line-height: 0px;
+        }
+
+        .mat-button-toggle-button {
+            height: 100%;
+        }
+    }
+
+    :not(::ng-deep.mat-button-toggle-checked) {
+        ::ng-deep.mat-button-toggle-button {
+            color: $primary;
+            font-weight: bold;
+            height: 25px;
+            font-size: 10px;
+
+            .mat-button-toggle-label-content {
+                line-height: 0px;
+            }
+        }
+    }
+}
+
+.addPj {
+    position: fixed;
+    z-index: 2;
+    bottom: 80px;
+    margin-left: 10px;
 }
\ No newline at end of file

src/frontend/app/attachments/attachments-list.component.ts

@@ -46,6 +46,9 @@ export class AttachmentsListComponent implements OnInit {
 
     hideMainInfo: boolean = false;
 
+    filterAttachTypes: any[] = [];
+    currentFilter: string = '';
+
     dialogRef: MatDialogRef<any>;
 
     @Input('injectDatas') injectDatas: any;
@@ -66,6 +69,12 @@ export class AttachmentsListComponent implements OnInit {
                     this.mailevaEnabled = data.mailevaEnabled;
                     this.attachments = data.attachments;
                     this.attachments.forEach((element: any) => {
+                        if (this.filterAttachTypes.filter(attachType => attachType.id === element.type).length === 0) {
+                            this.filterAttachTypes.push( {
+                                id: element.type,
+                                label: element.typeLabel
+                            });
+                        }
                         element.thumbnailUrl = '../../rest/attachments/' + element.resId + '/thumbnail';
                         element.canDelete = this.privilegeService.hasCurrentUserPrivilege('manage_attachments') || this.headerService.user.id === element.typist;
                     });
@@ -82,14 +91,24 @@ export class AttachmentsListComponent implements OnInit {
     loadAttachments(resId: number) {
         this.resId = resId;
         this.loading = true;
+        this.filterAttachTypes = [];
         this.http.get("../../rest/resources/" + this.resId + "/attachments")
             .subscribe((data: any) => {
                 this.mailevaEnabled = data.mailevaEnabled;
                 this.attachments = data.attachments;
                 this.attachments.forEach((element: any) => {
+                    if (this.filterAttachTypes.filter(attachType => attachType.id === element.type).length === 0) {
+                        this.filterAttachTypes.push( {
+                            id: element.type,
+                            label: element.typeLabel
+                        });
+                    }
                     element.thumbnailUrl = '../../rest/attachments/' + element.resId + '/thumbnail';
                     element.canDelete = this.privilegeService.hasCurrentUserPrivilege('manage_attachments') || this.headerService.user.id === element.typist;
                 });
+                if (this.attachments.filter((attach: any) => attach.type === this.currentFilter).length === 0) {
+                    this.currentFilter = '';
+                }
                 this.reloadBadgeNotes.emit(`${this.attachments.length}`);
                 this.loading = false;
             }, (err: any) => {
@@ -176,4 +195,8 @@ export class AttachmentsListComponent implements OnInit {
             })
         ).subscribe();
     }
+
+    filterType(ev: any) {
+        this.currentFilter = ev.value;
+    }
 }