Add custom context menu on survey list (implemented Create)

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

@@ -36,13 +36,50 @@
   </div>
 
   <!-- Lista de Encuestas del Usuario -->
-  <div class="ds-list" oncontextmenu="return false;">
+  <div class="ds-list" (contextmenu)="openContextMenu($event)">
+    <!-- Context Menu -->
+    <div class="ds-contextmenu ds-contextmenu--closed" id="contextmenu">
+      <ul id="ds-context-menu__list">
+        <div class="ds-contextmenu__divider ds-contextmenu__divider--separator-bottom" id="contextmenu-create--separator">
+          <li>
+            <button
+              *ngIf="!isAdmin() && isAuthenticated()"
+              type="button"
+              (click)="resetForm()"
+              data-toggle="modal"
+              data-target="#crearEncuesta"
+            >
+              <fa-icon class="contextmenu__icon" [icon]="faPlus"></fa-icon>Create
+            </button>
+          </li>
+        </div>
+        <div class="ds-contextmenu__divider ds-contextmenu__divider--separator-bottom" id="contextmenu-edit--separator">
+          <li class="d-justify justify-content-start">
+            <button type="button" id="contextmenu-edit"><fa-icon class="contextmenu__icon" [icon]="faEdit"></fa-icon>Edit</button>
+          </li>
+          <li>
+            <button type="button" id="contextmenu-duplicate"><fa-icon class="contextmenu__icon" [icon]="faCopy"></fa-icon>Duplicate</button>
+          </li>
+          <li>
+            <button type="button" id="contextmenu-rename"><fa-icon class="contextmenu__icon" [icon]="faFile"></fa-icon>Rename</button>
+          </li>
+          <li>
+            <button type="button" id="contextmenu-share"><fa-icon class="contextmenu__icon" [icon]="faShareAlt"></fa-icon>Share</button>
+          </li>
+        </div>
+        <div class="ds-contextmenu__divider" id="contextmenu-delete--separator">
+          <li>
+            <button type="button"><fa-icon class="contextmenu__icon" [icon]="faTrashAlt"></fa-icon>Delete</button>
+          </li>
+        </div>
+      </ul>
+    </div>
+
     <div
       class="ds-list--entity"
       *ngFor="let encuesta of encuestas; trackBy: trackId"
       (dblclick)="openSurvey($event)"
       (click)="selectSurvey($event)"
-      (contextmenu)="openContextMenu($event)"
       [attr.data-id]="encuesta.id"
     >
       <div class="entity-header">

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
+    if (event.type === 'contextmenu') {
-    // Edit
+      event.preventDefault();
-    // Delete
+
-    // Copy
+      document.getElementById('contextmenu-create--separator')!.style.display = 'block';
-    // Rename
+      document.getElementById('contextmenu-edit--separator')!.style.display = 'block';
-    // Share
+      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%';
+    }
   }
 }

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;
+}

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';

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;
+  }
+}

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 {