From be97c9f4bc88209e414adc5838e72bcf95db109f Mon Sep 17 00:00:00 2001 From: Pablo Bonilla Date: Wed, 14 Jul 2021 00:23:05 -0600 Subject: [PATCH 01/14] 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 @@ - - - -
+
{{ 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 06/14] 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 07/14] 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 08/14] 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 }} +
    +
    + +
    +