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 388fc7d..f0545aa 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,7 +35,177 @@ No encuestas found
-
+ +
+ +
+
    +
    +
  • + +
    • +
    +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
    +
    +
  • + +
    • +
    +
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+   {{ encuesta.nombre | titlecase }} +
+
+   {{ encuesta.nombre | titlecase }} +
+
+   {{ + encuesta.fechaCreacion | formatShortDatetime | titlecase + }} +
+
+ {{ encuesta.descripcion | titlecase }} +
+
+ {{ encuesta.categoria?.nombre | lowercase }} +
+
+ +
+
+ + +
+
+
+ + - - -
) => { 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; @@ -87,12 +115,18 @@ export class EncuestaComponent implements OnInit { } ngOnInit(): void { - this.loadAll(); - - // Call upon selecting a survey to edit - // this.updateForm(encuesta); - - this.loadRelationshipsOptions(); + 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 => { + e.classList.remove('active'); + }); + } + } + }); // this.activatedRoute.data.subscribe(({ encuesta }) => { // if (encuesta.id === undefined) { @@ -112,6 +146,8 @@ export class EncuestaComponent implements OnInit { 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'); @@ -125,6 +161,8 @@ export class EncuestaComponent implements OnInit { }); } + ngAfterViewInit(): void {} + trackId(index: number, item: IEncuesta): number { return item.id!; } @@ -259,4 +297,66 @@ 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']); + } + + selectSurvey(event: any): void { + document.querySelectorAll('.ds-list--entity').forEach(e => { + e.classList.remove('active'); + }); + if (event.target.classList.contains('ds-list--entity')) { + event.target.classList.add('active'); + } + } + + counter(i: number) { + return new Array(i); + } + + testMe(something: any) { + return 5 - something; + } + + openContextMenu(event: any): void { + document.querySelectorAll('.ds-list--entity').forEach(e => { + e.classList.remove('active'); + }); + + 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/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/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.scss b/src/main/webapp/content/scss/paper-dashboard.scss index 406620a..3eab78d 100644 --- a/src/main/webapp/content/scss/paper-dashboard.scss +++ b/src/main/webapp/content/scss/paper-dashboard.scss @@ -95,3 +95,6 @@ @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'; +@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-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..7bd5f80 --- /dev/null +++ b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss @@ -0,0 +1,133 @@ +@keyframes scaleIn { + from { + transform: scale(0.5, 0.5); + opacity: 0.5; + } + to { + transform: scale(2.5, 2.5); + opacity: 0; + } +} + +.ds-list { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: minmax(12.5rem, auto); + border: 2px dashed #f1f1f1; + border-radius: $border-radius-x-large; + padding: 2rem; + width: 100%; + user-select: none; + box-sizing: border-box; + position: relative; + + .ds-list--entity { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + border: 1px solid #dadce0; + border-radius: $border-radius-small; + padding: 0.5rem; + margin: 1rem; + word-wrap: break-word; + + *:not(div) { + pointer-events: none; + } + + .title { + color: rgba(0, 0, 0, 0.72); + font-size: 0.9rem; + display: flex; + align-items: center; + } + + .subtitle { + 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; + width: 100%; + pointer-events: none; + } + + .entity-body--row { + margin: 0.4rem 0; + } + + .entity-share { + border-radius: 50%; + background-color: #f1f5f9; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + transition: background-color 0.2s ease-in-out; + width: 25px; + height: 25px; + color: #313747; + } + + .entity-share:hover { + background-color: #e3e6e9; + } + + .entity-icon--access { + font-size: 0.8rem; + color: rgb(154, 156, 158); + } + + .entity-icon--star { + color: #ffcc47; + margin-right: 0.2rem; + } + + .entity-icon--star--off { + color: #d9dde0; + margin-right: 0.2rem; + } + + .entity-state { + border-radius: 50%; + width: 10px; + height: 10px; + position: absolute; + left: 0; + opacity: 0; + animation: scaleIn 4s infinite cubic-bezier(0.36, 0.11, 0.89, 0.32); + } + + .entity-state--container { + position: relative; + display: flex; + justify-content: center; + align-items: center; + } + + .entity-state--blue { + background-color: #2962ff; + } + .entity-state--green { + background-color: #3ead7f; + } + .entity-state--red { + background-color: #e73636; + } + } + + .active { + background-color: #e8f0fe !important; + } +} 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..5027151 100644 --- a/src/main/webapp/content/scss/paper-dashboard/_responsive.scss +++ b/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; @@ -506,6 +518,10 @@ } @media screen and (max-width: 576px) { + .ds-list { + grid-template-columns: repeat(1, 1fr) !important; + } + .navbar[class*='navbar-toggleable-'] .container { margin-left: 0; margin-right: 0;