FEAT #9906 front pj list

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

@@ -2,13 +2,45 @@
     <div *ngIf="attachments.length == 0" style="text-align:center;font-size:24px;font-weight:bold;opacity:0.3;">
         AUCUN ATTACHEMENT
     </div>
-    <mat-card *ngFor="let attachment of attachments" style="margin: 30px;">
-       <div class="thumbnailPj">
-        <img>
-       </div>
-       <div class="infosPj">
-
-       </div>
+    <mat-card *ngFor="let attachment of attachments" [style.background-image]="'url('+attachment.thumbnailUrl+')'"
+        style="padding:0;margin: 30px;min-height: 250px;background-size: cover;">
+        <a mat-mini-fab color="primary" class="downloadButton" title="Télécharger le fichier original" href="index.php?display=true&module=attachments&page=view_attachment&res_id_master={{resIds[0]}}&id={{attachment.res_id}}" target="_blank">
+            <mat-icon fontSet="fas" fontIcon="fa-download fa-2x"></mat-icon>
+        </a>
+        <div class="infosPj">
+            <div class="line subInfos">
+                <div title="{{attachment.identifier}} (n°{{attachment.res_id}})">{{attachment.identifier}}</div>
+                <div title="{{attachmentTypes[attachment.attachment_type].label}}" style="text-align:center;">
+                    {{attachmentTypes[attachment.attachment_type].label}}
+                </div>
+                <div *ngIf="attachment.update_date == null" title='{{attachment.creation_date | date : "le dd/MM/y à HH:mm"}} par {{attachment.firstname_typist}}
+                    {{attachment.lastname_typist}}' style="text-align:right;">
+                    {{attachment.creation_date | timeAgo}}
+                </div>
+                <div *ngIf="attachment.update_date != null" style="text-align:right;"
+                    title='{{attachment.update_date | date : "le dd/MM/y à HH:mm"}} par {{attachment.firstname_updated}} {{attachment.lastname_updated}}'>
+                    {{attachment.update_date | timeAgo}}
+                </div>
+            </div>
+            <div class="line">
+                <div style="text-align:center;padding: 5px;">
+                    {{attachment.title | shorten: 50: '...'}}
+                </div>
+            </div>
+            <div class="line subInfosBottom">
+                <div>{{attachment.status}}</div>
+                <div *ngIf="attachment.return_date != null && attachment.effective == null"
+                    title='{{attachment.return_date | date : "le dd/MM/y à HH:mm"}}' style="text-align:right;">
+                    <i class="fa fa-stopwatch" title="Date de retour attendue"></i>&nbsp;<span
+                        [innerHTML]="attachment.return_date | timeLimit"></span>
+                </div>
+                <div *ngIf="attachment.effective != null" style="text-align:right;">
+                    <i class="fa fa-lock" title="Date de retour"></i>&nbsp;<span
+                        title='{{attachment.effective_date | date : "le dd/MM/y à HH:mm"}}'
+                        [innerHTML]="attachment.effective_date | timeAgo"></span>
+                </div>
+            </div>
+        </div>
     </mat-card>
 </ng-container>
 

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

+@import '../../css/vars.scss';
+
+.mat-card {
+    box-shadow: none;
+    border: solid 1px rgba(0, 0, 0, 0.12);
+}
+
+.infosPj {
+    box-shadow: 0 -5px 5px -5px #333;
+    border-top: solid 1px rgba(0, 0, 0, 0.12);
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    background: white;
+    padding: 5px;
+
+    .line {
+        display: flex;
+
+        div {
+            flex: 1;
+        }
+    }
+}
+
+.subInfos {
+    font-size: 12px;
+    color: $primary;
+    font-weight: bold;
+}
+
+.subInfosBottom {
+    font-size: 12px;
+    color: #666;
+}
+
+.mat-icon {
+    height: auto;
+}
+
+.downloadButton {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    opacity: 0.5;
+    transition: opacity 0.2s ease-in-out;
+}
+
+.downloadButton:hover {
+    opacity: 1;
+    transition: opacity 0.2s ease-in-out;
+}
\ No newline at end of file

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

@@ -29,6 +29,9 @@ export class AttachmentsListComponent implements OnInit {
         this.http.get("../../rest/res/" + this.resIds[0] + "/attachments")
             .subscribe((data: any) => {
                 this.attachments = data.attachments;
+                this.attachments.forEach((element: any) => {
+                    element.thumbnailUrl = '../../rest/res/' + this.resIds[0] + '/attachments/' + element.res_id + '/thumbnail';
+                });
                 this.attachmentTypes = data.attachment_types;
                 this.reloadBadgeNotes.emit(`${this.attachments.length}`);
                 this.loading = false;