eduardo
/
datasurvey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add star rating for each survey and restyled the card

This commit is contained in:
Pablo Bonilla 2021-07-17 21:58:54 -06:00
parent 982332d154
commit 5d2f9ef41d
No known key found for this signature in database
GPG Key ID: 46877262B8DE47E2
3 changed files with 76 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/main/webapp/app/entities/encuesta/list/encuesta.component.html
View File

@ -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>

22
src/main/webapp/app/entities/encuesta/list/encuesta.component.ts
View File

@ -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');

29
src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss
View File

@ -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;
}