Update date display for each survey in user survey list

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

@@ -84,16 +84,21 @@
       <br />
       <br />
       <br />
-      <span>{{ encuesta.fechaCreacion | formatMediumDatetime }}</span>
       <!-- <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"
+      <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="subtitle">{{ encuesta.descripcion }}</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>
 
       <!-- <p>
         <a [routerLink]="['/encuesta', encuesta.id, 'view']">{{ encuesta.id }}</a>
@@ -148,8 +153,9 @@
       </div> -->
     </div>
   </div>
+</div>
 
-  <div class="table-responsive" id="entities" *ngIf="encuestas && encuestas.length > 0">
+<!-- <div class="table-responsive" id="entities" *ngIf="encuestas && encuestas.length > 0">
     <table class="table table-striped" aria-describedby="page-heading">
       <thead>
         <tr>
@@ -225,8 +231,7 @@
         </tr>
       </tbody>
     </table>
-  </div>
+  </div> -->
-</div>
 
 <!-- --------------------------------------------------------------------------------------------- -->
 

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

@@ -23,7 +23,7 @@ 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 } from '@fortawesome/free-solid-svg-icons';
+import { faShareAlt, faLock, faUnlock, faCalendarAlt } from '@fortawesome/free-solid-svg-icons';
 
 import * as $ from 'jquery';
 
@@ -36,6 +36,7 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
   faShareAlt = faShareAlt;
   faLock = faLock;
   faUnlock = faUnlock;
+  faCalendarAlt = faCalendarAlt;
 
   account: Account | null = null;
   usuarioExtra: UsuarioExtra | null = null;
@@ -312,5 +313,6 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
     // Delete
     // Copy
     // Rename
+    // Share
   }
 }

src/main/webapp/app/shared/date/format-short-datetime.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+import * as dayjs from 'dayjs';
+
+@Pipe({
+  name: 'formatShortDatetime',
+})
+export class FormatShortDatetimePipe implements PipeTransform {
+  transform(day: dayjs.Dayjs | null | undefined): string {
+    return day ? day.format('dddd, MMMM D, YYYY') : '';
+  }
+}

src/main/webapp/app/shared/shared.module.ts

@@ -9,6 +9,7 @@ import { HasAnyAuthorityDirective } from './auth/has-any-authority.directive';
 import { DurationPipe } from './date/duration.pipe';
 import { FormatMediumDatetimePipe } from './date/format-medium-datetime.pipe';
 import { FormatMediumDatePipe } from './date/format-medium-date.pipe';
+import { FormatShortDatetimePipe } from './date/format-short-datetime.pipe';
 import { SortByDirective } from './sort/sort-by.directive';
 import { SortDirective } from './sort/sort.directive';
 import { ItemCountComponent } from './pagination/item-count.component';
@@ -25,6 +26,7 @@ import { FilterPipe } from './pipes/filter';
     DurationPipe,
     FormatMediumDatetimePipe,
     FormatMediumDatePipe,
+    FormatShortDatetimePipe,
     SortByDirective,
     SortDirective,
     ItemCountComponent,
@@ -40,6 +42,7 @@ import { FilterPipe } from './pipes/filter';
     DurationPipe,
     FormatMediumDatetimePipe,
     FormatMediumDatePipe,
+    FormatShortDatetimePipe,
     SortByDirective,
     SortDirective,
     ItemCountComponent,

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

@@ -48,6 +48,15 @@
       color: rgba(0, 0, 0, 0.54);
     }
 
+    .tag {
+      font-size: 0.8rem;
+      color: rgb(248, 248, 248);
+      margin-top: 0.5rem;
+      padding: 0.2rem 1.5rem;
+      background-color: #2962ff94;
+      border-radius: 15px;
+    }
+
     .entity-header {
       display: flex;
       justify-content: space-between;