From 5d2f9ef41de4077dd6d0f8804cb20fb4eb23a7ce Mon Sep 17 00:00:00 2001
From: Pablo Bonilla <pbonilla29@hotmail.com>
Date: Sat, 17 Jul 2021 21:58:54 -0600
Subject: [PATCH] Add star rating for each survey and restyled the card

---
 .../encuesta/list/encuesta.component.html     | 49 ++++++++++++-------
 .../encuesta/list/encuesta.component.ts       | 22 ++++++++-
 .../paper-dashboard/_datasurvey-list.scss     | 29 +++++++++--
 3 files changed, 76 insertions(+), 24 deletions(-)

diff --git a/src/main/webapp/app/entities/encuesta/list/encuesta.component.html b/src/main/webapp/app/entities/encuesta/list/encuesta.component.html
index 73e36c6..f0545aa 100644
--- a/src/main/webapp/app/entities/encuesta/list/encuesta.component.html
+++ b/src/main/webapp/app/entities/encuesta/list/encuesta.component.html
@@ -85,7 +85,7 @@
       [attr.data-id]="encuesta.id"
     >
       <div class="entity-header">
-        <div>
+        <div class="entity-state--container">
           <div
             class="entity-state"
             [ngClass]="
@@ -120,24 +120,35 @@
         </div>
       </div>
 
-      <br />
-      <br />
-      <br />
-      <!-- <span>{{ encuesta.calificacion }}</span> -->
-
-      <span *ngIf="encuesta.acceso == 'PUBLIC'" class="title"
-        ><fa-icon class="entity-icon--access" [icon]="faUnlock"></fa-icon>&nbsp;&nbsp;{{ encuesta.nombre }}</span
-      >
-      <span *ngIf="encuesta.acceso == 'PRIVATE'" class="title mt-2"
-        ><fa-icon class="entity-icon--access" [icon]="faLock"></fa-icon>&nbsp;&nbsp;{{ encuesta.nombre }}</span
-      >
-      <span class="mt-2"
-        ><fa-icon class="entity-icon--access" [icon]="faCalendarAlt"></fa-icon>&nbsp;&nbsp;{{
-          encuesta.fechaCreacion | formatShortDatetime
-        }}</span
-      >
-      <span class="subtitle mt-2">{{ encuesta.descripcion }}</span>
-      <span class="tag mt-2">{{ encuesta.categoria?.nombre | lowercase }}</span>
+      <div class="entity-body">
+        <div class="entity-body--row">
+          <span *ngIf="encuesta.acceso == 'PUBLIC'" class="title"
+            ><fa-icon class="entity-icon--access" [icon]="faUnlock"></fa-icon>&nbsp;&nbsp;{{ encuesta.nombre | titlecase }}</span
+          >
+        </div>
+        <div class="entity-body--row">
+          <span *ngIf="encuesta.acceso == 'PRIVATE'" class="title mt-2"
+            ><fa-icon class="entity-icon--access" [icon]="faLock"></fa-icon>&nbsp;&nbsp;{{ encuesta.nombre | titlecase }}</span
+          >
+        </div>
+        <div class="entity-body--row">
+          <span class="mt-2"
+            ><fa-icon class="entity-icon--access" [icon]="faCalendarAlt"></fa-icon>&nbsp;&nbsp;{{
+              encuesta.fechaCreacion | formatShortDatetime | titlecase
+            }}</span
+          >
+        </div>
+        <div class="entity-body--row">
+          <span class="subtitle mt-2">{{ encuesta.descripcion | titlecase }}</span>
+        </div>
+        <div class="entity-body--row">
+          <span class="tag mt-2">{{ encuesta.categoria?.nombre | lowercase }}</span>
+        </div>
+        <div class="entity-body--row">
+          <fa-icon *ngFor="let i of [].constructor(encuesta.calificacion)" class="entity-icon--star" [icon]="faStar"></fa-icon
+          ><fa-icon *ngFor="let i of [].constructor(5 - encuesta.calificacion!)" class="entity-icon--star--off" [icon]="faStar"></fa-icon>
+        </div>
+      </div>
 
       <!-- <p>
         <a [routerLink]="['/encuesta', encuesta.id, 'view']">{{ encuesta.id }}</a>
diff --git a/src/main/webapp/app/entities/encuesta/list/encuesta.component.ts b/src/main/webapp/app/entities/encuesta/list/encuesta.component.ts
index 5f4685b..6fccf6b 100644
--- a/src/main/webapp/app/entities/encuesta/list/encuesta.component.ts
+++ b/src/main/webapp/app/entities/encuesta/list/encuesta.component.ts
@@ -23,7 +23,18 @@ import { AccountService } from 'app/core/auth/account.service';
 import { Account } from 'app/core/auth/account.model';
 import { Router } from '@angular/router';
 
-import { faShareAlt, faLock, faUnlock, faCalendarAlt, faEdit, faCopy, faFile, faTrashAlt, faPlus } from '@fortawesome/free-solid-svg-icons';
+import {
+  faShareAlt,
+  faLock,
+  faUnlock,
+  faCalendarAlt,
+  faEdit,
+  faCopy,
+  faFile,
+  faTrashAlt,
+  faPlus,
+  faStar,
+} from '@fortawesome/free-solid-svg-icons';
 
 import * as $ from 'jquery';
 
@@ -42,6 +53,7 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
   faFile = faFile;
   faTrashAlt = faTrashAlt;
   faPlus = faPlus;
+  faStar = faStar;
 
   account: Account | null = null;
   usuarioExtra: UsuarioExtra | null = null;
@@ -308,6 +320,14 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
     }
   }
 
+  counter(i: number) {
+    return new Array(i);
+  }
+
+  testMe(something: any) {
+    return 5 - something;
+  }
+
   openContextMenu(event: any): void {
     document.querySelectorAll('.ds-list--entity').forEach(e => {
       e.classList.remove('active');
diff --git a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss
index 99874c8..7bd5f80 100644
--- a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss
+++ b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss
@@ -24,7 +24,7 @@
   .ds-list--entity {
     display: flex;
     flex-direction: column;
-    justify-content: flex-end;
+    justify-content: space-between;
     align-items: flex-start;
     border: 1px solid #dadce0;
     border-radius: $border-radius-small;
@@ -59,11 +59,14 @@
     .entity-header {
       display: flex;
       justify-content: space-between;
-      align-self: flex-start;
       width: 100%;
       pointer-events: none;
     }
 
+    .entity-body--row {
+      margin: 0.4rem 0;
+    }
+
     .entity-share {
       border-radius: 50%;
       background-color: #f1f5f9;
@@ -77,13 +80,23 @@
       color: #313747;
     }
 
+    .entity-share:hover {
+      background-color: #e3e6e9;
+    }
+
     .entity-icon--access {
       font-size: 0.8rem;
       color: rgb(154, 156, 158);
     }
 
-    .entity-share:hover {
-      background-color: #e3e6e9;
+    .entity-icon--star {
+      color: #ffcc47;
+      margin-right: 0.2rem;
+    }
+
+    .entity-icon--star--off {
+      color: #d9dde0;
+      margin-right: 0.2rem;
     }
 
     .entity-state {
@@ -91,10 +104,18 @@
       width: 10px;
       height: 10px;
       position: absolute;
+      left: 0;
       opacity: 0;
       animation: scaleIn 4s infinite cubic-bezier(0.36, 0.11, 0.89, 0.32);
     }
 
+    .entity-state--container {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
     .entity-state--blue {
       background-color: #2962ff;
     }