Add share link to project page

2021-10-10 21:53:54 +02:00 · 2021-10-10 21:53:54 +02:00 · 348e9198b6
parent 74234b45c3
commit 348e9198b6
8 changed files with 150 additions and 50 deletions
--- a/client/cypress/integration/frontend/portfolio/project-page.spec.js
+++ b/client/cypress/integration/frontend/portfolio/project-page.spec.js
@ -101,7 +101,6 @@ describe('Project Page', () => {
    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', () => {
--- a/client/src/components/icons/ShareIcon.vue
+++ b/client/src/components/icons/ShareIcon.vue
@ -0,0 +1,10 @@
+<template>
+  <svg
+    viewBox="0 0 50 50"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M2.26316 47.5385C2.16211 47.5385 2.06105 47.5385 1.96 47.4884C1.40421 47.3382 1 46.8377 1 46.2871C1 25.0637 9.28632 15.3529 27.7789 14.9525V3.23957C27.7789 2.73902 28.0821 2.23847 28.5874 2.0883C29.0926 1.88808 29.6484 2.03824 30.0021 2.43869L48.6968 23.9124C49.1011 24.3629 49.1011 25.0637 48.6968 25.5642L30.0021 47.0379C29.6484 47.4384 29.0926 47.5885 28.5874 47.3883C28.0821 47.1881 27.7789 46.7376 27.7789 46.237V34.0235C16.8653 34.424 7.41684 39.3795 3.37474 46.8877C3.17263 47.2882 2.71789 47.5385 2.26316 47.5385ZM29.0421 31.5208C29.7495 31.5208 30.3053 32.0714 30.3053 32.7722V42.7832L46.0695 24.6632L30.3053 6.59327V16.2039C30.3053 16.9047 29.7495 17.4553 29.0421 17.4553C12.4695 17.4553 4.68842 24.8634 3.67789 41.9823C9.08421 35.4251 18.3811 31.5208 29.0421 31.5208Z"
+      fill="#333333"/>
+  </svg>
+</template>
--- a/client/src/components/portfolio/ProjectActions.vue
+++ b/client/src/components/portfolio/ProjectActions.vue
@ -23,14 +23,14 @@
      </li>
      <li
        class="popover-links__link"
-        v-if="!final"><a
+        v-if="!final && shareButtons"><a
          data-cy="share-project"
-          @click="updateShareState(id, true)">Projekt teilen</a></li>
+          @click="updateProjectShareState(id, true)">Projekt teilen</a></li>
      <li
        class="popover-links__link"
-        v-if="final"><a
+        v-if="final && shareButtons"><a
          data-cy="unshare-project"
-          @click="updateShareState(id, false)">Projekt nicht mehr teilen</a>
+          @click="updateProjectShareState(id, false)">Projekt nicht mehr teilen</a>
      </li>
    </widget-popover>
  </div>
@ -42,12 +42,27 @@ 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 updateProjectShareState from '@/mixins/update-project-share-state';

 export default {
-  props: ['id', 'final'],
+  props: {
+    id: {
+      type: String,
+      default: '',
+    },
+    final: {
+      type: Boolean,
+      default: false,
+    },
+    shareButtons: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  mixins: [updateProjectShareState],

  components: {
    Ellipses,
@ -89,32 +104,6 @@ export default {
        this.$router.push('/portfolio');
      });
    },
-    updateShareState(id, state) {
-      const project = this;
-      this.$apollo.mutate({
-        mutation: UPDATE_PROJECT_SHARED_STATE_MUTATION,
-        variables: {
-          input: {
-            id: this.id,
-            shared: state,
-          },
-        },
-        update(store, {data: {updateProjectSharedState: {shared, errors}}}) {
-          if (!errors) {
-            const query = PROJECT_QUERY;
-            const variables = {
-              id: project.id,
-            };
-            const data = store.readQuery({query, variables});
-
-            if (data) {
-              data.project.final = shared;
-              store.writeQuery({query, variables, data});
-            }
-          }
-        },
-      });
-    },
  },
 };
 </script>
--- a/client/src/components/portfolio/ShareLink.vue
+++ b/client/src/components/portfolio/ShareLink.vue
@ -0,0 +1,43 @@
+<template>
+  <a class="share-icon">
+    <share-icon class="share-icon__icon"/>
+    <span class="share-icon__text">
+      <template v-if="final">Mit Lehrperson teilen</template>
+      <template v-else>Nicht mehr teilen</template>
+    </span>
+  </a>
+</template>
+
+<script>
+  import ShareIcon from '@/components/icons/ShareIcon';
+
+  export default {
+    props: {
+      final: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    components: {ShareIcon},
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .share-icon {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &__icon {
+      width: 20px;
+      height: 20px;
+      margin-right: $small-spacing;
+    }
+
+    &__text {
+      @include large-link;
+    }
+  }
+</style>
--- a/client/src/components/ui/WidgetPopover.vue
+++ b/client/src/components/ui/WidgetPopover.vue
@ -11,7 +11,13 @@

 <script>
  export default {
-    props: ['mobile'],
+    props: {
+      mobile: {
+        type: Boolean,
+        default: false
+      }
+    },
+
    methods: {
      hidePopover() {
        this.$emit('hide-me');
--- a/client/src/graphql/gql/queries/projectQuery.gql
+++ b/client/src/graphql/gql/queries/projectQuery.gql
@ -7,6 +7,5 @@ query ProjectQuery($id: ID, $slug: String){
      ...ProjectEntryParts
      created
    }
-
  }
 }
--- a/client/src/mixins/update-project-share-state.js
+++ b/client/src/mixins/update-project-share-state.js
@ -0,0 +1,32 @@
+import UPDATE_PROJECT_SHARED_STATE_MUTATION from '@/graphql/gql/mutations/updateProjectSharedState.gql';
+import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
+
+export default {
+  methods: {
+    updateProjectShareState(id, shared) {
+      this.$apollo.mutate({
+        mutation: UPDATE_PROJECT_SHARED_STATE_MUTATION,
+        variables: {
+          input: {
+            id: id,
+            shared,
+          },
+        },
+        update(store, {data: {updateProjectSharedState: {shared, errors}}}) {
+          if (!errors) {
+            const query = PROJECT_QUERY;
+            const variables = {
+              id: id,
+            };
+            const data = store.readQuery({query, variables});
+
+            if (data) {
+              data.project.final = shared;
+              store.writeQuery({query, variables, data});
+            }
+          }
+        },
+      });
+    }
+  }
+};
--- a/client/src/pages/portfolio/project.vue
+++ b/client/src/pages/portfolio/project.vue
@ -8,12 +8,19 @@
        title="Zurück zur Übersicht"
        type="portfolio"/>

-      <a class="link">Mit Lehrperson teilen</a>
+      <div class="project__actions">
+        <share-link
+          :final="project.final"
+          class="project__share"
+          @click.native="updateProjectShareState(project.id, !project.final)" />

-      <project-actions
-        :id="project.id"
-        class="project__actions"
-        v-if="!me.readOnly && !me.selectedClass.readOnly"/>
+        <project-actions
+          :id="project.id"
+          :share-buttons="false"
+          class="project__more"
+          v-if="!me.readOnly && !me.selectedClass.readOnly"/>
+
+      </div>

      <h1
        class="project__title"
@ -53,29 +60,37 @@
  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
  import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
  import BackLink from '@/components/BackLink';
+  import ShareIcon from '@/components/icons/ShareIcon';
+  import ShareLink from '@/components/portfolio/ShareLink';
+
+  import updateProjectShareState from '@/mixins/update-project-share-state';

  export default {
    props: ['slug'],

+    mixins: [updateProjectShareState],
+
    components: {
+      ShareLink,
+      ShareIcon,
      BackLink,
      AddProjectEntry,
      ProjectEntry,
      ProjectActions,
      EntryCountWidget,
-      OwnerWidget
+      OwnerWidget,
    },

    data() {
      return {
        project: {
          student: {
-            id: ' '
-          }
+            id: ' ',
+          },
        },
        me: {
-          id: ''
-        }
+          id: '',
+        },
      };
    },

@ -92,7 +107,7 @@
      },
      projectEntryCount() {
        return this.project.entries ? this.project.entries.length : 0;
-      }
+      },
    },

    apollo: {
@ -100,14 +115,14 @@
        query: PROJECT_QUERY,
        variables() {
          return {
-            slug: this.slug
+            slug: this.slug,
          };
        },
        pollInterval: 5000,
      },
      me: {
-        query: ME_QUERY
-      }
+        query: ME_QUERY,
+      },
    },

  };
@ -135,12 +150,19 @@

    &__actions {
      grid-area: a;
+      display: flex;

      justify-self: end;
    }
+
+    &__share {
+      margin-right: $medium-spacing;
+    }
+
    &__title {
      grid-area: t;
    }
+
    &__description {
      grid-area: d;
    }