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"><a @click="editProject(id)">Projekt bearbeiten</a></li>
+      <li class="popover-links__link">
+        <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>
@@ -26,25 +38,25 @@
 </template>
 
 <script>
-  import Ellipses from '@/components/icons/Ellipses.vue';
-  import WidgetPopover from '@/components/ui/WidgetPopover';
+import Ellipses from '@/components/icons/Ellipses.vue';
+import WidgetPopover from '@/components/ui/WidgetPopover';
 
-  import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
-  import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
-  import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
-  import UPDATE_PROJECT_SHARED_STATE_MUTATION from '@/graphql/gql/mutations/updateProjectSharedState.gql';
+import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
+import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
+import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
+import UPDATE_PROJECT_SHARED_STATE_MUTATION from '@/graphql/gql/mutations/updateProjectSharedState.gql';
 
-  export default {
+export default {
   props: ['id', 'final'],
 
   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,17 +112,17 @@
               store.writeQuery({query, variables, data});
             }
           }
-          }
+        },
       });
-      }
-    }
-  };
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/_helpers.scss";
+@import "~styles/_helpers.scss";
 
-  .project-actions {
+.project-actions {
   position: relative;
 
   &__more-link {
@@ -127,5 +139,5 @@
     fill: $color-charcoal-dark;
     margin-right: 15px;
   }
-  }
+}
 </style>