From be97c9f4bc88209e414adc5838e72bcf95db109f Mon Sep 17 00:00:00 2001 From: Pablo Bonilla Date: Wed, 14 Jul 2021 00:23:05 -0600 Subject: [PATCH 1/8] Update visualization of user surveys --- .../encuesta/list/encuesta.component.html | 106 ++++++++++++++---- .../encuesta/list/encuesta.component.ts | 35 +++++- .../app/layouts/sidebar/sidebar.component.ts | 2 + .../webapp/content/scss/paper-dashboard.scss | 2 + .../paper-dashboard/_datasurvey-form.scss | 2 +- .../paper-dashboard/_datasurvey-global.scss | 4 + .../paper-dashboard/_datasurvey-list.scss | 25 +++++ .../paper-dashboard/_datasurvey-table.scss | 0 .../scss/paper-dashboard/_responsive.scss | 8 ++ 9 files changed, 160 insertions(+), 24 deletions(-) create mode 100644 src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss create mode 100644 src/main/webapp/content/scss/paper-dashboard/_datasurvey-table.scss 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 388fc7d..941e95d 100644 --- a/src/main/webapp/app/entities/encuesta/list/encuesta.component.html +++ b/src/main/webapp/app/entities/encuesta/list/encuesta.component.html @@ -1,22 +1,29 @@

- Encuestas +
+
+ Encuestas +

Cree encuestas y publiquelas mundialmente.

+
-
- +
+ - + +

@@ -28,6 +35,70 @@ No encuestas found
+ +
+
+ {{ encuesta.nombre }} + + +
+
+
@@ -109,11 +180,6 @@ - - -
{ + // console.log(ele); + + // ele.addEventListener('dblclick', e => { + // console.log(e.target); + + // }); + // }); + } } diff --git a/src/main/webapp/app/layouts/sidebar/sidebar.component.ts b/src/main/webapp/app/layouts/sidebar/sidebar.component.ts index 75fc8f2..93e4ddb 100644 --- a/src/main/webapp/app/layouts/sidebar/sidebar.component.ts +++ b/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]; }); } }); diff --git a/src/main/webapp/content/scss/paper-dashboard.scss b/src/main/webapp/content/scss/paper-dashboard.scss index 406620a..80db6c0 100644 --- a/src/main/webapp/content/scss/paper-dashboard.scss +++ b/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'; diff --git a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-form.scss b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-form.scss index bbfb5d4..5ffb44f 100644 --- a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-form.scss +++ b/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%; diff --git a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-global.scss b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-global.scss index 4fdf48e..da1c023 100644 --- a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-global.scss +++ b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-global.scss @@ -15,3 +15,7 @@ color: #757d94; font-size: 0.9rem; } + +p { + margin: 0 !important; +} diff --git a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss new file mode 100644 index 0000000..11469a4 --- /dev/null +++ b/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; + } + } +} diff --git a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-table.scss b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-table.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/main/webapp/content/scss/paper-dashboard/_responsive.scss b/src/main/webapp/content/scss/paper-dashboard/_responsive.scss index fda7b54..00cb068 100644 --- a/src/main/webapp/content/scss/paper-dashboard/_responsive.scss +++ b/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; From 559210768cf65714c47935702f18f04470d478a5 Mon Sep 17 00:00:00 2001 From: Pablo Bonilla Date: Wed, 14 Jul 2021 01:36:26 -0600 Subject: [PATCH 2/8] Update survey entity interaction inside list --- .../app/entities/encuesta/encuesta.module.ts | 3 +- .../encuesta/list/encuesta.component.html | 11 ++++- .../encuesta/list/encuesta.component.ts | 44 +++++++++++-------- .../paper-dashboard/_datasurvey-list.scss | 15 +++---- .../scss/paper-dashboard/_responsive.scss | 18 +++++--- 5 files changed, 57 insertions(+), 34 deletions(-) diff --git a/src/main/webapp/app/entities/encuesta/encuesta.module.ts b/src/main/webapp/app/entities/encuesta/encuesta.module.ts index c78f7dc..6cd231e 100644 --- a/src/main/webapp/app/entities/encuesta/encuesta.module.ts +++ b/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], }) 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 941e95d..461b88a 100644 --- a/src/main/webapp/app/entities/encuesta/list/encuesta.component.html +++ b/src/main/webapp/app/entities/encuesta/list/encuesta.component.html @@ -36,14 +36,23 @@
-
+
{{ encuesta.nombre }} +
+ {{ encuesta.descripcion }} +
+ {{ encuesta.fechaCreacion | formatMediumDatetime }} +
+ {{ encuesta.calificacion }} +
+ - {{ encuesta.nombre }} +   {{ encuesta.nombre }} +   {{ encuesta.nombre }} {{ encuesta.descripcion }}   {{ encuesta.nombre }} -   {{ encuesta.nombre }} - {{ encuesta.descripcion }} +   {{ + encuesta.fechaCreacion | formatShortDatetime + }} + {{ encuesta.descripcion }} + {{ encuesta.categoria?.nombre | lowercase }}
+
-
+ 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 2c8d0bd..e1e40ae 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,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 } } diff --git a/src/main/webapp/app/shared/date/format-short-datetime.pipe.ts b/src/main/webapp/app/shared/date/format-short-datetime.pipe.ts new file mode 100644 index 0000000..f68a8eb --- /dev/null +++ b/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') : ''; + } +} diff --git a/src/main/webapp/app/shared/shared.module.ts b/src/main/webapp/app/shared/shared.module.ts index a433735..a306705 100644 --- a/src/main/webapp/app/shared/shared.module.ts +++ b/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, 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 8ea3ce0..ba1b97c 100644 --- a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss +++ b/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; From 5615833f24e6e191baab5ce4fe7804e4bb9437eb Mon Sep 17 00:00:00 2001 From: Pablo Bonilla Date: Fri, 16 Jul 2021 22:27:34 -0600 Subject: [PATCH 6/8] Add custom context menu on survey list (implemented Create) --- .../encuesta/list/encuesta.component.html | 41 ++++++++++- .../encuesta/list/encuesta.component.ts | 44 +++++++++--- .../app/layouts/main/main.component.scss | 5 ++ .../webapp/content/scss/paper-dashboard.scss | 1 + .../_datasurvey-contextmenu.scss | 70 +++++++++++++++++++ .../paper-dashboard/_datasurvey-list.scss | 5 +- 6 files changed, 151 insertions(+), 15 deletions(-) create mode 100644 src/main/webapp/content/scss/paper-dashboard/_datasurvey-contextmenu.scss 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 83c3a1a..67fc551 100644 --- a/src/main/webapp/app/entities/encuesta/list/encuesta.component.html +++ b/src/main/webapp/app/entities/encuesta/list/encuesta.component.html @@ -36,13 +36,50 @@
-
+
+ +
+
    +
    +
  • + +
    • +
    +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
    +
    +
  • + +
    • +
    +
+
+
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 e1e40ae..5f4685b 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,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, faCalendarAlt } from '@fortawesome/free-solid-svg-icons'; +import { faShareAlt, faLock, faUnlock, faCalendarAlt, faEdit, faCopy, faFile, faTrashAlt, faPlus } from '@fortawesome/free-solid-svg-icons'; import * as $ from 'jquery'; @@ -37,6 +37,11 @@ export class EncuestaComponent implements OnInit, AfterViewInit { faLock = faLock; faUnlock = faUnlock; faCalendarAlt = faCalendarAlt; + faEdit = faEdit; + faCopy = faCopy; + faFile = faFile; + faTrashAlt = faTrashAlt; + faPlus = faPlus; account: Account | null = null; usuarioExtra: UsuarioExtra | null = null; @@ -99,6 +104,9 @@ export class EncuestaComponent implements OnInit, AfterViewInit { ngOnInit(): void { document.body.addEventListener('click', e => { + document.getElementById('contextmenu')!.classList.add('ds-contextmenu--closed'); + document.getElementById('contextmenu')!.classList.remove('ds-contextmenu--open'); + document.getElementById('contextmenu')!.style.maxHeight = '0%'; if (e.target) { if (!(e.target as HTMLElement).classList.contains('ds-list--entity')) { document.querySelectorAll('.ds-list--entity').forEach(e => { @@ -304,15 +312,31 @@ export class EncuestaComponent implements OnInit, AfterViewInit { document.querySelectorAll('.ds-list--entity').forEach(e => { e.classList.remove('active'); }); - if (event.target.classList.contains('ds-list--entity')) { - event.target.classList.add('active'); - } - // Open Context Menu - // Edit - // Delete - // Copy - // Rename - // Share + if (event.type === 'contextmenu') { + event.preventDefault(); + + document.getElementById('contextmenu-create--separator')!.style.display = 'block'; + document.getElementById('contextmenu-edit--separator')!.style.display = 'block'; + document.getElementById('contextmenu-delete--separator')!.style.display = 'block'; + document.getElementById('contextmenu-edit')!.style.display = 'block'; + document.getElementById('contextmenu-duplicate')!.style.display = 'block'; + document.getElementById('contextmenu-rename')!.style.display = 'block'; + document.getElementById('contextmenu-share')!.style.display = 'block'; + + if ((event.target as HTMLElement).classList.contains('ds-list')) { + document.getElementById('contextmenu-edit--separator')!.style.display = 'none'; + document.getElementById('contextmenu-delete--separator')!.style.display = 'none'; + } else if ((event.target as HTMLElement).classList.contains('ds-list--entity')) { + event.target.classList.add('active'); + document.getElementById('contextmenu-create--separator')!.style.display = 'none'; + } + + document.getElementById('contextmenu')!.style.top = event.layerY + 'px'; + document.getElementById('contextmenu')!.style.left = event.layerX + 'px'; + document.getElementById('contextmenu')!.classList.remove('ds-contextmenu--closed'); + document.getElementById('contextmenu')!.classList.add('ds-contextmenu--open'); + document.getElementById('contextmenu')!.style.maxHeight = '100%'; + } } } diff --git a/src/main/webapp/app/layouts/main/main.component.scss b/src/main/webapp/app/layouts/main/main.component.scss index 98938a5..ebfe953 100644 --- a/src/main/webapp/app/layouts/main/main.component.scss +++ b/src/main/webapp/app/layouts/main/main.component.scss @@ -2,3 +2,8 @@ .off-canvas-sidebar:after { background: #0f172a; } + +.main-panel { + height: 100vh !important; + overflow-y: auto; +} diff --git a/src/main/webapp/content/scss/paper-dashboard.scss b/src/main/webapp/content/scss/paper-dashboard.scss index 80db6c0..3eab78d 100644 --- a/src/main/webapp/content/scss/paper-dashboard.scss +++ b/src/main/webapp/content/scss/paper-dashboard.scss @@ -97,3 +97,4 @@ @import 'paper-dashboard/datasurvey-modal'; @import 'paper-dashboard/datasurvey-list'; @import 'paper-dashboard/datasurvey-table'; +@import 'paper-dashboard/datasurvey-contextmenu'; diff --git a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-contextmenu.scss b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-contextmenu.scss new file mode 100644 index 0000000..241512c --- /dev/null +++ b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-contextmenu.scss @@ -0,0 +1,70 @@ +.ds-contextmenu { + position: absolute; + background-color: #fff; + border-radius: 3px; + z-index: 100; + box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; + max-height: 0%; + overflow: hidden; + + /* Set our transitions up. */ + -webkit-transition: max-height 0.8s; + -moz-transition: max-height 0.8s; + transition: max-height 0.8s; + + ul { + padding: 0; + margin: 0; + + li { + list-style: none; + padding: 0.2rem 0; + text-align: left; + width: 100%; + + button { + border: none; + outline: 0; + background-color: transparent; + width: 100%; + text-align: left; + padding: 0.4rem 8rem 0.4rem 3rem; + color: #313747; + position: relative; + + &:hover { + background-color: #eeeeee; + } + + .contextmenu__icon { + font-size: 1rem; + color: #808080; + margin-right: 1rem; + position: absolute; + left: 0.8rem; + bottom: 0.25rem; + } + } + } + } + + .ds-contextmenu__divider { + padding: 0.25rem 0; + } + + .ds-contextmenu__divider--separator-top { + border-bottom: 1px solid #dadce0; + } + + .ds-contextmenu__divider--separator-bottom { + border-bottom: 1px solid #dadce0; + } + + &--open { + display: block; + } + + &--closed { + display: none; + } +} 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 ba1b97c..99874c8 100644 --- a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss +++ b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss @@ -19,9 +19,9 @@ width: 100%; user-select: none; box-sizing: border-box; + position: relative; .ds-list--entity { - position: relative; display: flex; flex-direction: column; justify-content: flex-end; @@ -31,7 +31,6 @@ padding: 0.5rem; margin: 1rem; word-wrap: break-word; - position: relative; *:not(div) { pointer-events: none; @@ -61,8 +60,8 @@ display: flex; justify-content: space-between; align-self: flex-start; - position: relative; width: 100%; + pointer-events: none; } .entity-share { From 982332d1548838e5f9598463bbd4ba52d82af925 Mon Sep 17 00:00:00 2001 From: Pablo Bonilla Date: Fri, 16 Jul 2021 22:31:25 -0600 Subject: [PATCH 7/8] Update context menu on survey list, from english to spanish --- .../entities/encuesta/list/encuesta.component.html | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 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 67fc551..73e36c6 100644 --- a/src/main/webapp/app/entities/encuesta/list/encuesta.component.html +++ b/src/main/webapp/app/entities/encuesta/list/encuesta.component.html @@ -49,27 +49,29 @@ data-toggle="modal" data-target="#crearEncuesta" > - Create + Crear
  • - +
  • - +
  • - +
  • - +
  • - +
    • From 5d2f9ef41de4077dd6d0f8804cb20fb4eb23a7ce Mon Sep 17 00:00:00 2001 From: Pablo Bonilla Date: Sat, 17 Jul 2021 21:58:54 -0600 Subject: [PATCH 8/8] 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" >
    -
    +
      {{ encuesta.nombre }} -   {{ encuesta.nombre }} -   {{ - encuesta.fechaCreacion | formatShortDatetime - }} - {{ encuesta.descripcion }} - {{ encuesta.categoria?.nombre | lowercase }} +
    +
    +   {{ encuesta.nombre | titlecase }} +
    +
    +   {{ encuesta.nombre | titlecase }} +
    +
    +   {{ + encuesta.fechaCreacion | formatShortDatetime | titlecase + }} +
    +
    + {{ encuesta.descripcion | titlecase }} +
    +
    + {{ encuesta.categoria?.nombre | lowercase }} +
    +
    + +
    +