Update visualization of user surveys

src/main/webapp/app/entities/encuesta/list/encuesta.component.html

@@ -1,22 +1,29 @@
 <div>
   <h2 id="page-heading" data-cy="EncuestaHeading">
-    <span jhiTranslate="dataSurveyApp.encuesta.home.title">Encuestas</span>
+    <div class="d-flex flex-sm-row flex-column justify-content-between align-items-center">
+      <div>
+        <span class="ds-title" jhiTranslate="dataSurveyApp.encuesta.home.title">Encuestas</span>
+        <p class="ds-subtitle">Cree encuestas y publiquelas mundialmente.</p>
+      </div>
 
-    <div class="d-flex justify-content-end">
-      <button class="btn btn-info mr-2" (click)="loadAll()" [disabled]="isLoading">
-        <fa-icon icon="sync" [spin]="isLoading"></fa-icon>
-        <span jhiTranslate="dataSurveyApp.encuesta.home.refreshListLabel">Refresh List</span>
-      </button>
+      <div>
+        <button type="button" class="ds-btn ds-btn--secondary" (click)="loadAll()" [disabled]="isLoading">
+          <fa-icon icon="sync" [spin]="isLoading"></fa-icon>&nbsp;&nbsp;<span jhiTranslate="dataSurveyApp.encuesta.home.refreshListLabel"
+            >Refresh List</span
+          >
+        </button>
 
-      <button
-        id="jh-create-entity"
-        data-cy="entityCreateButton"
-        class="btn btn-primary jh-create-entity create-encuesta"
-        [routerLink]="['/encuesta/new']"
-      >
-        <fa-icon icon="plus"></fa-icon>
-        <span jhiTranslate="dataSurveyApp.encuesta.home.createLabel"> Create a new Encuesta </span>
-      </button>
+        <button
+          *ngIf="!isAdmin() && isAuthenticated()"
+          type="button"
+          class="ds-btn ds-btn--primary"
+          (click)="resetForm()"
+          data-toggle="modal"
+          data-target="#crearEncuesta"
+        >
+          Crear encuesta
+        </button>
+      </div>
     </div>
   </h2>
 
@@ -28,6 +35,70 @@
     <span jhiTranslate="dataSurveyApp.encuesta.home.notFound">No encuestas found</span>
   </div>
 
+  <!-- Lista de Encuestas del Usuario -->
+  <div class="ds-list">
+    <div
+      class="ds-list--entity"
+      *ngFor="let encuesta of encuestas; trackBy: trackId"
+      (dblclick)="openSurvey($event)"
+      [attr.data-id]="encuesta.id"
+    >
+      <span>{{ encuesta.nombre }}</span>
+
+      <!-- <p>
+        <a [routerLink]="['/encuesta', encuesta.id, 'view']">{{ encuesta.id }}</a>
+      </p>
+      <p>{{ encuesta.nombre }}</p>
+      <p>{{ encuesta.descripcion }}</p>
+      <p>{{ encuesta.fechaCreacion | formatMediumDatetime }}</p>
+      <p>{{ encuesta.fechaPublicacion | formatMediumDatetime }}</p>
+      <p>{{ encuesta.fechaFinalizar | formatMediumDatetime }}</p>
+      <p>{{ encuesta.fechaFinalizada | formatMediumDatetime }}</p>
+      <p>{{ encuesta.calificacion }}</p>
+      <p jhiTranslate="{{ 'dataSurveyApp.AccesoEncuesta.' + encuesta.acceso }}">{{ encuesta.acceso }}</p>
+      <p>{{ encuesta.contrasenna }}</p>
+      <p jhiTranslate="{{ 'dataSurveyApp.EstadoEncuesta.' + encuesta.estado }}">{{ encuesta.estado }}</p>
+      <div>
+        <div *ngIf="encuesta.categoria">
+          <a [routerLink]="['/categoria', encuesta.categoria?.id, 'view']">{{ encuesta.categoria?.nombre }}</a>
+        </div>
+      </div>
+      <div>
+        <div *ngIf="encuesta.usuarioExtra">
+          <a [routerLink]="['/usuario-extra', encuesta.usuarioExtra?.id, 'view']">{{ encuesta.usuarioExtra?.id }}</a>
+        </div>
+      </div>
+      <div class="text-right">
+        <div class="btn-group">
+          <button
+            type="submit"
+            [routerLink]="['/encuesta', encuesta.id, 'view']"
+            class="btn btn-info btn-sm"
+            data-cy="entityDetailsButton"
+          >
+            <fa-icon icon="eye"></fa-icon>
+            <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
+          </button>
+
+          <button
+            type="submit"
+            [routerLink]="['/encuesta', encuesta.id, 'edit']"
+            class="btn btn-primary btn-sm"
+            data-cy="entityEditButton"
+          >
+            <fa-icon icon="pencil-alt"></fa-icon>
+            <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>
+          </button>
+
+          <button type="submit" (click)="delete(encuesta)" class="btn btn-danger btn-sm" data-cy="entityDeleteButton">
+            <fa-icon icon="times"></fa-icon>
+            <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>
+          </button>
+        </div>
+      </div> -->
+    </div>
+  </div>
+
   <div class="table-responsive" id="entities" *ngIf="encuestas && encuestas.length > 0">
     <table class="table table-striped" aria-describedby="page-heading">
       <thead>
@@ -109,11 +180,6 @@
 
 <!-- --------------------------------------------------------------------------------------------- -->
 
-<!-- Button trigger modal -->
-<button type="button" class="ds-btn ds-btn--primary" (click)="resetForm()" data-toggle="modal" data-target="#crearEncuesta">
-  Crear encuesta
-</button>
-
 <!-- Modal -->
 <div
   class="modal fade ds-modal"

src/main/webapp/app/entities/encuesta/list/encuesta.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit } from '@angular/core';
 import { HttpResponse } from '@angular/common/http';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
@@ -21,6 +21,7 @@ import { UsuarioExtraService } from 'app/entities/usuario-extra/service/usuario-
 import { EstadoEncuesta } from 'app/entities/enumerations/estado-encuesta.model';
 import { AccountService } from 'app/core/auth/account.service';
 import { Account } from 'app/core/auth/account.model';
+import { Router } from '@angular/router';
 
 import * as $ from 'jquery';
 
@@ -28,7 +29,7 @@ import * as $ from 'jquery';
   selector: 'jhi-encuesta',
   templateUrl: './encuesta.component.html',
 })
-export class EncuestaComponent implements OnInit {
+export class EncuestaComponent implements OnInit, AfterViewInit {
   account: Account | null = null;
   usuarioExtra: UsuarioExtra | null = null;
 
@@ -65,7 +66,8 @@ export class EncuestaComponent implements OnInit {
     protected usuarioExtraService: UsuarioExtraService,
     protected activatedRoute: ActivatedRoute,
     protected fb: FormBuilder,
-    protected accountService: AccountService
+    protected accountService: AccountService,
+    protected router: Router
   ) {}
 
   resetForm(): void {
@@ -125,6 +127,11 @@ export class EncuestaComponent implements OnInit {
     });
   }
 
+  ngAfterViewInit(): void {
+    let surveys = document.querySelectorAll('.ds-list--entity');
+    console.log(surveys);
+  }
+
   trackId(index: number, item: IEncuesta): number {
     return item.id!;
   }
@@ -259,4 +266,26 @@ export class EncuestaComponent implements OnInit {
       usuarioExtra: this.usuarioExtra,
     };
   }
+
+  isAdmin(): boolean {
+    return this.accountService.hasAnyAuthority('ROLE_ADMIN');
+  }
+
+  isAuthenticated(): boolean {
+    return this.accountService.isAuthenticated();
+  }
+
+  openSurvey(event: any): void {
+    const surveyId = event.target.getAttribute('data-id');
+    this.router.navigate(['/encuesta', surveyId, 'edit']);
+
+    // document.querySelectorAll(".ds-list--entity").forEach(ele => {
+    //   console.log(ele);
+
+    //   ele.addEventListener('dblclick', e => {
+    //     console.log(e.target);
+
+    //   });
+    // });
+  }
 }

src/main/webapp/app/layouts/sidebar/sidebar.component.ts

@@ -61,6 +61,8 @@ export class SidebarComponent {
       if (account !== null) {
         this.usuarioExtraService.find(account.id).subscribe(usuarioExtra => {
           this.usuarioExtra = usuarioExtra.body;
+          this.usuarioExtra!.nombre =
+            usuarioExtra.body!.nombre!.trim().split(' ')[0] + ' ' + usuarioExtra.body!.nombre!.trim().split(' ')[1];
         });
       }
     });

src/main/webapp/content/scss/paper-dashboard.scss

@@ -95,3 +95,5 @@
 @import 'paper-dashboard/datasurvey-form';
 @import 'paper-dashboard/datasurvey-global';
 @import 'paper-dashboard/datasurvey-modal';
+@import 'paper-dashboard/datasurvey-list';
+@import 'paper-dashboard/datasurvey-table';

src/main/webapp/content/scss/paper-dashboard/_datasurvey-form.scss

@@ -51,7 +51,7 @@ $form-background: #f1f5f9;
     outline: 0;
 
     background: url(./../../img_datasurvey/down-arrow.svg) no-repeat right;
-    background-size: 3.5%;
+    background-size: 1rem;
     -webkit-appearance: none;
     background-position-x: 94%;
 

src/main/webapp/content/scss/paper-dashboard/_datasurvey-global.scss

@@ -15,3 +15,7 @@
   color: #757d94;
   font-size: 0.9rem;
 }
+
+p {
+  margin: 0 !important;
+}

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

@@ -0,0 +1,25 @@
+.ds-list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: minmax(12.5rem, auto);
+  border: 2px dashed #e6e6e6;
+  border-radius: $border-radius-x-large;
+  padding: 1rem;
+  width: 100%;
+  user-select: none;
+  box-sizing: border-box;
+
+  .ds-list--entity {
+    border: 2px solid #e6e6e6;
+    border-radius: $border-radius-small;
+    padding: 0.5rem;
+    margin: 1rem;
+    transition: all 0.1s ease-in-out;
+    word-wrap: break-word;
+
+    &:hover {
+      background-color: #e8f0fe;
+      cursor: pointer;
+    }
+  }
+}

src/main/webapp/content/scss/paper-dashboard/_responsive.scss

@@ -434,6 +434,10 @@
 }
 
 @media screen and (max-width: 767px) {
+  .ds-list {
+    grid-template-columns: repeat(3, 1fr) !important;
+  }
+
   .nav-tabs-navigation.vertical-navs {
     padding: 0 28px;
   }
@@ -506,6 +510,10 @@
 }
 
 @media screen and (max-width: 576px) {
+  .ds-list {
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+
   .navbar[class*='navbar-toggleable-'] .container {
     margin-left: 0;
     margin-right: 0;