Update survey entity interaction inside list

src/main/webapp/app/entities/encuesta/encuesta.module.ts

@@ -5,9 +5,10 @@ import { EncuestaDetailComponent } from './detail/encuesta-detail.component';
 import { EncuestaUpdateComponent } from './update/encuesta-update.component';
 import { EncuestaDeleteDialogComponent } from './delete/encuesta-delete-dialog.component';
 import { EncuestaRoutingModule } from './route/encuesta-routing.module';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 @NgModule({
-  imports: [SharedModule, EncuestaRoutingModule],
+  imports: [SharedModule, EncuestaRoutingModule, FontAwesomeModule],
   declarations: [EncuestaComponent, EncuestaDetailComponent, EncuestaUpdateComponent, EncuestaDeleteDialogComponent],
   entryComponents: [EncuestaDeleteDialogComponent],
 })

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

@@ -36,14 +36,23 @@
   </div>
 
   <!-- Lista de Encuestas del Usuario -->
-  <div class="ds-list">
+  <div class="ds-list" oncontextmenu="return false;">
     <div
       class="ds-list--entity"
       *ngFor="let encuesta of encuestas; trackBy: trackId"
       (dblclick)="openSurvey($event)"
+      (click)="selectSurvey($event)"
       [attr.data-id]="encuesta.id"
     >
       <span>{{ encuesta.nombre }}</span>
+      <br />
+      <span>{{ encuesta.descripcion }}</span>
+      <br />
+      <span>{{ encuesta.fechaCreacion | formatMediumDatetime }}</span>
+      <br />
+      <span>{{ encuesta.calificacion }}</span>
+      <br />
+      <span><fa-icon [icon]="faShareAlt"></fa-icon></span>
 
       <!-- <p>
         <a [routerLink]="['/encuesta', encuesta.id, 'view']">{{ encuesta.id }}</a>

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

@@ -23,6 +23,8 @@ import { AccountService } from 'app/core/auth/account.service';
 import { Account } from 'app/core/auth/account.model';
 import { Router } from '@angular/router';
 
+import { faShareAlt } from '@fortawesome/free-solid-svg-icons';
+
 import * as $ from 'jquery';
 
 @Component({
@@ -30,6 +32,9 @@ import * as $ from 'jquery';
   templateUrl: './encuesta.component.html',
 })
 export class EncuestaComponent implements OnInit, AfterViewInit {
+  // Icons
+  faShareAlt = faShareAlt;
+
   account: Account | null = null;
   usuarioExtra: UsuarioExtra | null = null;
 
@@ -80,7 +85,8 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
     this.encuestaService.query().subscribe(
       (res: HttpResponse<IEncuesta[]>) => {
         this.isLoading = false;
-        this.encuestas = res.body ?? [];
+        const tmpEncuestas = res.body ?? [];
+        this.encuestas = tmpEncuestas.filter(e => e.usuarioExtra?.id === this.usuarioExtra?.id);
       },
       () => {
         this.isLoading = false;
@@ -89,12 +95,15 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
   }
 
   ngOnInit(): void {
-    this.loadAll();
-
-    // Call upon selecting a survey to edit
-    // this.updateForm(encuesta);
-
-    this.loadRelationshipsOptions();
+    document.body.addEventListener('click', e => {
+      if (e.target) {
+        if (!(e.target as HTMLElement).classList.contains('ds-list--entity')) {
+          document.querySelectorAll('.ds-list--entity').forEach(e => {
+            e.classList.remove('active');
+          });
+        }
+      }
+    });
 
     // this.activatedRoute.data.subscribe(({ encuesta }) => {
     //   if (encuesta.id === undefined) {
@@ -114,6 +123,8 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
       if (account !== null) {
         this.usuarioExtraService.find(account.id).subscribe(usuarioExtra => {
           this.usuarioExtra = usuarioExtra.body;
+          this.loadAll();
+          this.loadRelationshipsOptions();
           if (this.usuarioExtra !== null) {
             if (this.usuarioExtra.id === undefined) {
               const today = dayjs().startOf('day');
@@ -127,10 +138,7 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
     });
   }
 
-  ngAfterViewInit(): void {
-    let surveys = document.querySelectorAll('.ds-list--entity');
-    console.log(surveys);
-  }
+  ngAfterViewInit(): void {}
 
   trackId(index: number, item: IEncuesta): number {
     return item.id!;
@@ -278,14 +286,12 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
   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);
-
-    //   });
-    // });
+  selectSurvey(event: any): void {
+    document.querySelectorAll('.ds-list--entity').forEach(e => {
+      e.classList.remove('active');
+    });
+    event.target.classList.add('active');
   }
 }

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

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

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

@@ -1,3 +1,15 @@
+@media screen and (max-width: 1280px) {
+  .ds-list {
+    grid-template-columns: repeat(3, 1fr) !important;
+  }
+}
+
+@media screen and (max-width: 880px) {
+  .ds-list {
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+}
+
 @media screen and (max-width: 991px) {
   .navbar {
     padding: 0;
@@ -434,10 +446,6 @@
 }
 
 @media screen and (max-width: 767px) {
-  .ds-list {
-    grid-template-columns: repeat(3, 1fr) !important;
-  }
-
   .nav-tabs-navigation.vertical-navs {
     padding: 0 28px;
   }
@@ -511,7 +519,7 @@
 
 @media screen and (max-width: 576px) {
   .ds-list {
-    grid-template-columns: repeat(2, 1fr) !important;
+    grid-template-columns: repeat(1, 1fr) !important;
   }
 
   .navbar[class*='navbar-toggleable-'] .container {