Fix some bugs with the click outside directive

client/cypress/integration/frontend/portfolio/project-page.spec.js

@@ -25,7 +25,7 @@ describe('Project Page', () => {
             firstName: 'Rachel',
             lastName: 'Green',
             id: 'VXNlck5vZGU6NQ==',
-            avatarUrl: ''
+            avatarUrl: '',
           },
           entriesCount: 2,
         },
@@ -60,9 +60,9 @@ describe('Project Page', () => {
     AddProjectEntry: variables => ({
       addProjectEntry: {
         projectEntry: Object.assign({}, variables.input.projectEntry, {
-          created: createdLater
+          created: createdLater,
         }),
-        errors: null
+        errors: null,
       },
     }),
     UpdateProjectEntry: variables => ({
@@ -96,6 +96,14 @@ describe('Project Page', () => {
     });
   });
 
+  it('uses the menu', () => {
+    cy.visit('/portfolio/groot');
+    cy.getByDataCy('project-actions').click();
+    cy.getByDataCy('delete-project').should('exist');
+    cy.getByDataCy('edit-project').should('exist');
+    cy.getByDataCy('share-project').should('exist');
+  });
+
   describe('Project Entry', () => {
     it('should create a new project entry', () => {
       cy.visit('/portfolio');

client/src/components/MoreOptionsWidget.vue

@@ -3,7 +3,7 @@
     <a
       class="more-options__more-link"
       data-cy="more-options-link"
-      @click="showMenu = !showMenu">
+      @click.stop="showMenu = !showMenu">
       <ellipses class="more-options__ellipses"/>
     </a>
     <widget-popover

client/src/components/portfolio/ProjectActions.vue

@@ -4,21 +4,33 @@
     data-cy="project-actions">
     <a
       class="project-actions__more-link"
-      @click="toggleMenu">
+      @click.stop="toggleMenu">
       <ellipses/>
     </a>
     <widget-popover
       class="project-actions__popover"
       v-if="showMenu"
       @hide-me="showMenu = false">
-      <li class="popover-links__link"><a @click="deleteProject(id)">Projekt löschen</a></li>
+      <li class="popover-links__link">
-      <li class="popover-links__link"><a @click="editProject(id)">Projekt bearbeiten</a></li>
+        <a
+          data-cy="delete-project"
+          @click="deleteProject(id)">Projekt löschen</a>
+      </li>
+      <li class="popover-links__link">
+        <a
+          data-cy="edit-project"
+          @click="editProject(id)">Projekt bearbeiten</a>
+      </li>
       <li
         class="popover-links__link"
-        v-if="!final"><a @click="updateShareState(id, true)">Projekt teilen</a></li>
+        v-if="!final"><a
+          data-cy="share-project"
+          @click="updateShareState(id, true)">Projekt teilen</a></li>
       <li
         class="popover-links__link"
-        v-if="final"><a @click="updateShareState(id, false)">Projekt nicht mehr teilen</a>
+        v-if="final"><a
+          data-cy="unshare-project"
+          @click="updateShareState(id, false)">Projekt nicht mehr teilen</a>
       </li>
     </widget-popover>
   </div>
@@ -39,12 +51,12 @@
 
   components: {
     Ellipses,
-      WidgetPopover
+    WidgetPopover,
   },
 
   data() {
     return {
-        showMenu: false
+      showMenu: false,
     };
   },
 
@@ -60,8 +72,8 @@
         mutation: DELETE_PROJECT_MUTATION,
         variables: {
           input: {
-              id
+            id,
-            }
+          },
         },
         update(store, {data: {deleteProject: {success}}}) {
           if (success) {
@@ -72,7 +84,7 @@
               store.writeQuery({query: PROJECTS_QUERY, data});
             }
           }
-          }
+        },
       }).then(() => {
         this.$router.push('/portfolio');
       });
@@ -84,14 +96,14 @@
         variables: {
           input: {
             id: this.id,
-              shared: state
+            shared: state,
-            }
+          },
         },
         update(store, {data: {updateProjectSharedState: {shared, errors}}}) {
           if (!errors) {
             const query = PROJECT_QUERY;
             const variables = {
-                id: project.id
+              id: project.id,
             };
             const data = store.readQuery({query, variables});
 
@@ -100,10 +112,10 @@
               store.writeQuery({query, variables, data});
             }
           }
-          }
+        },
       });
-      }
+    },
-    }
+  },
 };
 </script>