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>
@@ -26,106 +38,106 @@
 </template>
 
 <script>
-  import Ellipses from '@/components/icons/Ellipses.vue';
+import Ellipses from '@/components/icons/Ellipses.vue';
-  import WidgetPopover from '@/components/ui/WidgetPopover';
+import WidgetPopover from '@/components/ui/WidgetPopover';
 
-  import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
+import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
-  import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
+import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
-  import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
+import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
-  import UPDATE_PROJECT_SHARED_STATE_MUTATION from '@/graphql/gql/mutations/updateProjectSharedState.gql';
+import UPDATE_PROJECT_SHARED_STATE_MUTATION from '@/graphql/gql/mutations/updateProjectSharedState.gql';
 
-  export default {
+export default {
-    props: ['id', 'final'],
+  props: ['id', 'final'],
 
-    components: {
+  components: {
-      Ellipses,
+    Ellipses,
-      WidgetPopover
+    WidgetPopover,
+  },
+
+  data() {
+    return {
+      showMenu: false,
+    };
+  },
+
+  methods: {
+    toggleMenu: function () {
+      this.showMenu = !this.showMenu;
     },
-
+    editProject(id) {
-    data() {
+      this.$router.push({name: 'edit-project', params: {id}});
-      return {
-        showMenu: false
-      };
     },
-
+    deleteProject(id) {
-    methods: {
+      this.$apollo.mutate({
-      toggleMenu: function () {
+        mutation: DELETE_PROJECT_MUTATION,
-        this.showMenu = !this.showMenu;
+        variables: {
-      },
+          input: {
-      editProject(id) {
+            id,
-        this.$router.push({name: 'edit-project', params: {id}});
-      },
-      deleteProject(id) {
-        this.$apollo.mutate({
-          mutation: DELETE_PROJECT_MUTATION,
-          variables: {
-            input: {
-              id
-            }
           },
-          update(store, {data: {deleteProject: {success}}}) {
+        },
-            if (success) {
+        update(store, {data: {deleteProject: {success}}}) {
-              const data = store.readQuery({query: PROJECTS_QUERY});
+          if (success) {
+            const data = store.readQuery({query: PROJECTS_QUERY});
 
-              if (data) {
+            if (data) {
-                data.projects.edges.splice(data.projects.edges.findIndex(edge => edge.node.id === id), 1);
+              data.projects.edges.splice(data.projects.edges.findIndex(edge => edge.node.id === id), 1);
-                store.writeQuery({query: PROJECTS_QUERY, data});
+              store.writeQuery({query: PROJECTS_QUERY, data});
-              }
             }
           }
-        }).then(() => {
+        },
-          this.$router.push('/portfolio');
+      }).then(() => {
-        });
+        this.$router.push('/portfolio');
-      },
+      });
-      updateShareState(id, state) {
+    },
-        const project = this;
+    updateShareState(id, state) {
-        this.$apollo.mutate({
+      const project = this;
-          mutation: UPDATE_PROJECT_SHARED_STATE_MUTATION,
+      this.$apollo.mutate({
-          variables: {
+        mutation: UPDATE_PROJECT_SHARED_STATE_MUTATION,
-            input: {
+        variables: {
-              id: this.id,
+          input: {
-              shared: state
+            id: this.id,
-            }
+            shared: state,
           },
-          update(store, {data: {updateProjectSharedState: {shared, errors}}}) {
+        },
-            if (!errors) {
+        update(store, {data: {updateProjectSharedState: {shared, errors}}}) {
-              const query = PROJECT_QUERY;
+          if (!errors) {
-              const variables = {
+            const query = PROJECT_QUERY;
-                id: project.id
+            const variables = {
-              };
+              id: project.id,
-              const data = store.readQuery({query, variables});
+            };
+            const data = store.readQuery({query, variables});
 
-              if (data) {
+            if (data) {
-                data.project.final = shared;
+              data.project.final = shared;
-                store.writeQuery({query, variables, data});
+              store.writeQuery({query, variables, data});
-              }
             }
           }
-        });
+        },
-      }
+      });
-    }
+    },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/_helpers.scss";
+@import "~styles/_helpers.scss";
 
-  .project-actions {
+.project-actions {
-    position: relative;
+  position: relative;
 
-    &__more-link {
+  &__more-link {
-      cursor: pointer;
+    cursor: pointer;
-    }
-
-    &__popover {
-      @include popover-defaults();
-      min-width: 200px;
-    }
-
-    svg {
-      width: 30px;
-      fill: $color-charcoal-dark;
-      margin-right: 15px;
-    }
   }
+
+  &__popover {
+    @include popover-defaults();
+    min-width: 200px;
+  }
+
+  svg {
+    width: 30px;
+    fill: $color-charcoal-dark;
+    margin-right: 15px;
+  }
+}
 </style>