From 348e9198b67145e92810144fdc2806a1e2add69d Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Sun, 10 Oct 2021 21:53:54 +0200
Subject: [PATCH] Add share link to project page

---
 .../frontend/portfolio/project-page.spec.js   |  1 -
 client/src/components/icons/ShareIcon.vue     | 10 ++++
 .../components/portfolio/ProjectActions.vue   | 55 ++++++++-----------
 client/src/components/portfolio/ShareLink.vue | 43 +++++++++++++++
 client/src/components/ui/WidgetPopover.vue    |  8 ++-
 .../src/graphql/gql/queries/projectQuery.gql  |  1 -
 .../src/mixins/update-project-share-state.js  | 32 +++++++++++
 client/src/pages/portfolio/project.vue        | 50 ++++++++++++-----
 8 files changed, 150 insertions(+), 50 deletions(-)
 create mode 100644 client/src/components/icons/ShareIcon.vue
 create mode 100644 client/src/components/portfolio/ShareLink.vue
 create mode 100644 client/src/mixins/update-project-share-state.js

diff --git a/client/cypress/integration/frontend/portfolio/project-page.spec.js b/client/cypress/integration/frontend/portfolio/project-page.spec.js
index e3e469e3..fefaff9e 100644
--- 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', () => {
diff --git a/client/src/components/icons/ShareIcon.vue b/client/src/components/icons/ShareIcon.vue
new file mode 100644
index 00000000..0a04014f
--- /dev/null
+++ 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>
diff --git a/client/src/components/portfolio/ProjectActions.vue b/client/src/components/portfolio/ProjectActions.vue
index a515cd2b..62a16ca2 100644
--- 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>
diff --git a/client/src/components/portfolio/ShareLink.vue b/client/src/components/portfolio/ShareLink.vue
new file mode 100644
index 00000000..124f1c0b
--- /dev/null
+++ 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>
diff --git a/client/src/components/ui/WidgetPopover.vue b/client/src/components/ui/WidgetPopover.vue
index 340a5beb..93e3a1c0 100644
--- 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');
diff --git a/client/src/graphql/gql/queries/projectQuery.gql b/client/src/graphql/gql/queries/projectQuery.gql
index dd601e64..8376172a 100644
--- 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
     }
-
   }
 }
diff --git a/client/src/mixins/update-project-share-state.js b/client/src/mixins/update-project-share-state.js
new file mode 100644
index 00000000..4ed97475
--- /dev/null
+++ 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});
+            }
+          }
+        },
+      });
+    }
+  }
+};
diff --git a/client/src/pages/portfolio/project.vue b/client/src/pages/portfolio/project.vue
index 53b453e4..e7b335bb 100644
--- 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;
     }