diff --git a/src/frontend/app/attachments/attachments-list.component.html b/src/frontend/app/attachments/attachments-list.component.html
index 1e6c1095fe576271c61a6503abb7e93ed2a0d9fd..8ac0972ca747b53c5edfa7401c3204729415f9d9 100644
--- a/src/frontend/app/attachments/attachments-list.component.html
+++ b/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
diff --git a/src/frontend/app/attachments/attachments-list.component.scss b/src/frontend/app/attachments/attachments-list.component.scss
index 15506e4f64cd5326fb695350ca7bedbb7f4ca5a4..5e7bd8d173cdc89a53960cb17fe4b99df06b738b 100644
--- a/src/frontend/app/attachments/attachments-list.component.scss
+++ b/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
diff --git a/src/frontend/app/attachments/attachments-list.component.ts b/src/frontend/app/attachments/attachments-list.component.ts
index fc27fc0d0fd138a4f24f1b27c6f8d14d550eab01..2d67fd44c96081cee3fbf3f8759ddde6ff2e5dfc 100644
--- a/src/frontend/app/attachments/attachments-list.component.ts
+++ b/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;
+ }
}