Move project and room actions to own component

Also adds those actions to the detail pages of both entity types. Also refactors some code.

client/src/components/WidgetFooter.vue

@@ -1,41 +1,9 @@
 <template>
   <div class="widget-footer">
-    <a @click="toggleMenu"
+    <slot></slot>
-        class="widget-footer__more-link">
-      <ellipses></ellipses>
-    </a>
-    <widget-popover v-if="showMenu"
-                    @hide-me="showMenu = false">
-      <slot :hide="toggleMenu"></slot>
-    </widget-popover>
   </div>
 </template>
 
-<script>
-  import Ellipses from '@/components/icons/Ellipses.vue';
-  import WidgetPopover from '@/components/rooms/WidgetPopover';
-
-  export default {
-
-    components: {
-      Ellipses,
-      WidgetPopover
-    },
-
-    data() {
-      return {
-        showMenu: false
-      }
-    },
-
-    methods: {
-      toggleMenu: function () {
-        this.showMenu = !this.showMenu
-      }
-    }
-  }
-</script>
-
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
   @import "@/styles/_mixins.scss";
@@ -58,15 +26,5 @@
      * For IE10+
      */
     -ms-grid-row: 2;
-
-    &__more-link {
-      cursor: pointer;
-    }
-
-    svg {
-      width: 30px;
-      fill: $color-darkgrey-1;
-      margin-right: 15px;
-    }
   }
 </style>

client/src/components/portfolio/OwnerWidget.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="owner-widget">
-    <avatar class="owner-widget__avatar" :avatarUrl="avatarUrl" />
+    <avatar class="owner-widget__avatar" :avatarUrl="owner.avatarUrl" />
     <span>
         {{name}}
     </span>
@@ -11,10 +11,16 @@
   import Avatar from '@/components/profile/Avatar';
 
   export default {
-    props: ['name', 'avatarUrl'],
+    props: ['owner'],
 
     components: {
       Avatar
+    },
+
+    computed: {
+      name() {
+        return `${this.owner.firstName} ${this.owner.lastName}`
+      }
     }
   }
 </script>
@@ -26,7 +32,6 @@
   .owner-widget {
     display: flex;
     align-items: center;
-    margin-top: $small-spacing;
 
     &__avatar {
       width: 30px;

client/src/components/portfolio/ProjectActions.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="project-actions">
+    <a @click="toggleMenu"
+       class="project-actions__more-link">
+      <ellipses></ellipses>
+    </a>
+    <widget-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 v-if="!final" class="popover-links__link"><a @click="updateShareState(id, true)">Projekt teilen</a></li>
+      <li v-if="final" class="popover-links__link"><a @click="updateShareState(id, false)">Projekt nicht mehr teilen</a>
+      </li>
+    </widget-popover>
+  </div>
+
+</template>
+
+<script>
+  import Ellipses from '@/components/icons/Ellipses.vue';
+  import WidgetPopover from '@/components/rooms/WidgetPopover';
+
+  import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
+  import PROJECT_QUERY from '@/graphql/gql/projectQuery.gql';
+  import PROJECTS_QUERY from '@/graphql/gql/allProjects.gql';
+  import UPDATE_PROJECT_SHARED_STATE_MUTATION from '@/graphql/gql/mutations/updateProjectSharedState.gql';
+
+  export default {
+    props: ['id', 'final'],
+
+    components: {
+      Ellipses,
+      WidgetPopover
+    },
+
+    data() {
+      return {
+        showMenu: false
+      }
+    },
+
+    methods: {
+      toggleMenu: function () {
+        this.showMenu = !this.showMenu
+      },
+      editProject(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) {
+              const data = store.readQuery({query: PROJECTS_QUERY});
+
+              if (data) {
+                data.projects.edges.splice(data.projects.edges.findIndex(edge => edge.node.id === id), 1);
+                store.writeQuery({query: PROJECTS_QUERY, data});
+              }
+            }
+          }
+        }).then(() => {
+          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>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .project-actions {
+    &__more-link {
+      cursor: pointer;
+    }
+
+    svg {
+      width: 30px;
+      fill: $color-darkgrey-1;
+      margin-right: 15px;
+    }
+  }
+</style>

client/src/components/portfolio/ProjectWidget.vue

@@ -1,24 +1,21 @@
 <template>
   <div class="project-widget" :class="widgetClass">
-    <router-link :to="{name: 'project', params: {slug: slug}}" tag="div" class="project-widget__content" data-cy="project-link">
+    <router-link :to="{name: 'project', params: {slug: slug}}" tag="div" class="project-widget__content"
+                 data-cy="project-link">
       <h3 class="project-widget__title">{{title}}</h3>
 
       <entry-count-widget :entry-count="entriesCount"></entry-count-widget>
-      <owner-widget :name="owner" :avatarUrl="student.avatarUrl"></owner-widget>
+      <owner-widget class="project-widget__owner" :owner="student"></owner-widget>
     </router-link>
     <widget-footer v-if="isOwner" class="project-widget__footer">
-      <template slot-scope="scope">
+      <project-actions :id="id" :final="final"></project-actions>
-          <li class="popover-links__link"><a @click="$emit('delete', id)">Projekt löschen</a></li>
-          <li class="popover-links__link"><a @click="$emit('edit', id)">Projekt bearbeiten</a></li>
-          <li v-if="!final" class="popover-links__link"><a @click="share(scope)">Projekt teilen</a></li>
-          <li v-if="final" class="popover-links__link"><a @click="unshare(scope)">Projekt nicht mehr teilen</a></li>
-      </template>
     </widget-footer>
   </div>
 </template>
 
 <script>
   import OwnerWidget from '@/components/portfolio/OwnerWidget';
+  import ProjectActions from '@/components/portfolio/ProjectActions';
   import EntryCountWidget from '@/components/rooms/EntryCountWidget';
   import WidgetFooter from '@/components/WidgetFooter';
 
@@ -28,33 +25,19 @@
     components: {
       WidgetFooter,
       EntryCountWidget,
-      OwnerWidget
+      OwnerWidget,
+      ProjectActions
     },
 
     computed: {
-      widgetClass () {
+      widgetClass() {
         return `project-widget--${this.appearance}`;
       },
-      isOwner () {
+      isOwner() {
         return this.student.id === this.userId;
       },
-      owner () {
-        return `${this.student.firstName} ${this.student.lastName}`
-      }
-    },
 
-    methods: {
+    },
-      share: function (scope) {
-        this.updateShare(scope, true);
-      },
-      unshare: function (scope) {
-        this.updateShare(scope, false);
-      },
-      updateShare: function (scope, state) {
-        scope.hide();
-        this.$emit('updateShare', this.id, state);
-      }
-    }
   }
 </script>
 
@@ -68,6 +51,7 @@
     background-color: $color-accent-4;
     @include widget-shadow;
     box-sizing: border-box;
+    position: relative;
 
     display: -ms-grid;
     margin-bottom: $large-spacing;
@@ -106,6 +90,10 @@
       font-weight: 600;
     }
 
+    &__owner {
+      margin-top: $small-spacing;
+    }
+
     &__footer {
       -ms-grid-row: 2;
     }

client/src/components/rooms/RoomActions.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="room-actions">
+    <a @click="toggleMenu"
+       class="room-actions__more-link">
+      <ellipses></ellipses>
+    </a>
+    <widget-popover v-if="showMenu"
+                    @hide-me="showMenu = false">
+      <li class="popover-links__link"><a @click="deleteRoom()">Raum löschen</a></li>
+      <li class="popover-links__link"><a @click="editRoom()">Raum bearbeiten</a></li>
+    </widget-popover>
+  </div>
+</template>
+
+<script>
+  import Ellipses from '@/components/icons/Ellipses.vue';
+  import WidgetPopover from '@/components/rooms/WidgetPopover';
+
+  import DELETE_ROOM_MUTATION from '@/graphql/gql/mutations/deleteRoom.gql';
+  import ROOMS_QUERY from '@/graphql/gql/roomsQuery.gql';
+
+  export default {
+    props: ['id'],
+
+    components: {
+      Ellipses,
+      WidgetPopover
+    },
+
+    data() {
+      return {
+        showMenu: false
+      }
+    },
+
+    methods: {
+      toggleMenu: function () {
+        this.showMenu = !this.showMenu
+      },
+      deleteRoom() {
+        const theId = this.id;
+        this.$apollo.mutate({
+          mutation: DELETE_ROOM_MUTATION,
+          variables: {
+            input: {
+              id: theId
+            }
+          },
+          update(store, {data: {deleteRoom: {success}}}) {
+            if (success) {
+              const data = store.readQuery({query: ROOMS_QUERY});
+              if (data) {
+                data.rooms.edges.splice(data.rooms.edges.findIndex(edge => edge.node.id === theId), 1);
+                store.writeQuery({query: ROOMS_QUERY, data});
+              }
+            }
+          }
+        })
+      },
+      editRoom() {
+        this.$router.push({name: 'edit-room', params: {id: this.id}});
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .room-actions {
+    &__more-link {
+      cursor: pointer;
+    }
+
+    svg {
+      width: 30px;
+      fill: $color-darkgrey-1;
+      margin-right: 15px;
+    }
+  }
+</style>

client/src/components/rooms/RoomWidget.vue

@@ -6,19 +6,17 @@
       <entry-count-widget :entryCount="entryCount"></entry-count-widget>
     </router-link>
     <widget-footer v-if="canEditRoom">
-      <li class="popover-links__link"><a @click="deleteRoom()">Raum löschen</a></li>
+      <room-actions :id="this.id"></room-actions>
-      <li class="popover-links__link"><a @click="editRoom()">Raum bearbeiten</a></li>
     </widget-footer>
   </div>
 </template>
 
 <script>
-  import DELETE_ROOM_MUTATION from '@/graphql/gql/mutations/deleteRoom.gql';
-  import ROOMS_QUERY from '@/graphql/gql/roomsQuery.gql';
 
   import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
   import EntryCountWidget from '@/components/rooms/EntryCountWidget';
   import WidgetFooter from '@/components/WidgetFooter';
+  import RoomActions from '@/components/rooms/RoomActions';
 
   import {meQuery} from '@/graphql/queries';
 
@@ -28,7 +26,8 @@
     components: {
       EntryCountWidget,
       RoomGroupWidget,
-      WidgetFooter
+      WidgetFooter,
+      RoomActions
     },
 
     data() {
@@ -52,32 +51,6 @@
     apollo: {
       me: meQuery
     },
-
-    methods: {
-      deleteRoom() {
-        const theId = this.id
-        this.$apollo.mutate({
-          mutation: DELETE_ROOM_MUTATION,
-          variables: {
-            input: {
-              id: theId
-            }
-          },
-          update(store, {data: {deleteRoom: {success}}}) {
-            if (success) {
-              const data = store.readQuery({query: ROOMS_QUERY});
-              if (data) {
-                data.rooms.edges.splice(data.rooms.edges.findIndex(edge => edge.node.id === theId), 1);
-                store.writeQuery({query: ROOMS_QUERY, data});
-              }
-            }
-          }
-        })
-      },
-      editRoom() {
-        this.$router.push({name: 'edit-room', params: {id: this.id}});
-      }
-    }
   }
 </script>
 

client/src/components/rooms/WidgetPopover.vue

@@ -11,7 +11,7 @@
     methods: {
       hidePopover() {
         this.$emit('hide-me');
-      }
+      },
     }
   }
 </script>

client/src/graphql/gql/mutations/updateProjectSharedState.gql

@@ -0,0 +1,7 @@
+mutation UpdateProjectShareState($input: UpdateProjectSharedStateInput!) {
+  updateProjectSharedState(input: $input) {
+    errors
+    success
+    shared
+  }
+}

client/src/pages/portfolio.vue

@@ -7,9 +7,6 @@
         v-for="project in projects"
         v-bind="project"
         :userId="userId"
-        @delete="deleteProject"
-        @updateShare="updateShareState"
-        @edit="editProject"
         :key="project.id"
         class="portfolio__project"
       ></project-widget>
@@ -23,8 +20,6 @@
 
   import ME_QUERY from '@/graphql/gql/meQuery.gql';
   import PROJECTS_QUERY from '@/graphql/gql/allProjects.gql';
-  import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
-  import UPDATE_PROJECT_MUTATION from '@/graphql/gql/mutations/updateProject.gql';
 
   export default {
     components: {
@@ -57,50 +52,6 @@
         return this.me.id;
       }
     },
-
-    methods: {
-      deleteProject(id) {
-        this.$apollo.mutate({
-          mutation: DELETE_PROJECT_MUTATION,
-          variables: {
-            input: {
-              id
-            }
-          },
-          update(store, {data: {deleteProject: {success}}}) {
-            if (success) {
-              const data = store.readQuery({query: PROJECTS_QUERY});
-
-              if (data) {
-                data.projects.edges.splice(data.projects.edges.findIndex(edge => edge.node.id === id), 1);
-                store.writeQuery({query: PROJECTS_QUERY, data});
-              }
-            }
-          }
-        })
-      },
-      editProject(id) {
-        this.$router.push({name: 'edit-project', params: {id}});
-      },
-      updateShareState(id, state) {
-        const project = this.projects.filter(project => project.id === id)[0];
-        this.$apollo.mutate({
-          mutation: UPDATE_PROJECT_MUTATION,
-          variables: {
-            input: {
-              project: {
-                id: project.id,
-                title: project.title,
-                description: project.description,
-                appearance: project.appearance,
-                objectives: project.objectives,
-                final: state
-              }
-            }
-          }
-        })
-      }
-    }
   }
 </script>
 

client/src/pages/project.vue

@@ -11,9 +11,16 @@
         <li class="project__objective" :key="index" v-for="(objective, index) in objectives">{{objective}}</li>
       </ul>
 
+      <div class="project__meta">
+        <project-actions :id="this.project.id"></project-actions>
+        <owner-widget :owner="this.project.student"></owner-widget>
+        <entry-count-widget :entry-count="projectEntryCount"></entry-count-widget>
+      </div>
+
     </div>
     <div class="project__content">
-      <add-project-entry v-if="isOwner" class="project__add-entry" data-cy="add-project-entry" :project="project.id"></add-project-entry>
+      <add-project-entry v-if="isOwner" class="project__add-entry" data-cy="add-project-entry"
+                         :project="project.id"></add-project-entry>
       <project-entry v-bind="entry" v-for="(entry, index) in project.entries" :key="index"></project-entry>
     </div>
   </div>
@@ -21,7 +28,10 @@
 
 <script>
   import ProjectEntry from '@/components/portfolio/ProjectEntry';
+  import ProjectActions from '@/components/portfolio/ProjectActions';
   import AddProjectEntry from '@/components/portfolio/AddProjectEntry';
+  import EntryCountWidget from '@/components/rooms/EntryCountWidget';
+  import OwnerWidget from '@/components/portfolio/OwnerWidget';
 
   import ME_QUERY from '@/graphql/gql/meQuery.gql';
   import PROJECT_QUERY from '@/graphql/gql/projectQuery.gql';
@@ -31,7 +41,10 @@
 
     components: {
       AddProjectEntry,
-      ProjectEntry
+      ProjectEntry,
+      ProjectActions,
+      EntryCountWidget,
+      OwnerWidget
     },
 
     computed: {
@@ -44,7 +57,10 @@
       },
       isOwner() {
         return this.me.id === this.project.student.id;
-        }
+      },
+      projectEntryCount() {
+        return this.project.entries ? this.project.entries.length : 0;
+      }
     },
 
     apollo: {
@@ -129,12 +145,33 @@
       line-height: 1.5;
     }
 
-    &__content {
+    &__meta {
-      background-color: $color-grey--lighter;
       display: flex;
       flex-direction: column;
-      max-width: 840px;
+      @include desktop {
-      align-content: center;
+        flex-direction: row-reverse;
+      }
+      justify-content: start;
+      position: relative;
+      align-items: center;
+
+      & > :first-child {
+        margin-left: $large-spacing;
+      }
+
+      & > :nth-child(2) {
+        margin-left: $large-spacing;
+      }
+    }
+
+    &__content {
+      background-color: rgba($color-darkgrey-1, 0.18);
+      display: flex;
+      flex-direction: column;
+      /*max-width: 840px;*/
+      width: 100%;
+      min-height: 75vh;
+      align-content: start;
       margin: 0 auto;
       @supports (display: grid) {
         display: grid;

client/src/pages/room.vue

@@ -6,6 +6,7 @@
         {{room.description}}
       </p>
       <div class="room__meta">
+        <room-actions :id="this.room.id"></room-actions>
         <room-group-widget v-bind="room.schoolClass"></room-group-widget>
         <entry-count-widget :entry-count="roomEntryCount"></entry-count-widget>
       </div>
@@ -29,6 +30,7 @@
   import RoomEntry from '@/components/rooms/RoomEntry.vue';
   import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
   import EntryCountWidget from '@/components/rooms/EntryCountWidget';
+  import RoomActions from '@/components/rooms/RoomActions';
 
   export default {
     props: ['slug'],
@@ -37,7 +39,8 @@
       EntryCountWidget,
       RoomGroupWidget,
       AddRoomEntryButton,
-      RoomEntry
+      RoomEntry,
+      RoomActions
     },
 
     beforeDestroy() {
@@ -115,9 +118,14 @@
         flex-direction: row-reverse;
       }
       justify-content: start;
+      position: relative;
 
       & > :first-child {
-        margin-right: 45px;
+        margin-left: $large-spacing;
+      }
+
+      & > :nth-child(2) {
+        margin-left: $large-spacing;
       }
     }
 

server/portfolio/mutations.py

@@ -143,6 +143,38 @@ class DeleteProjectEntry(relay.ClientIDMutation):
         return cls(success=True)
 
 
+class UpdateProjectSharedState(relay.ClientIDMutation):
+    class Input:
+        id = graphene.ID()
+        shared = graphene.Boolean()
+
+    success = graphene.Boolean()
+    shared = graphene.Boolean()
+    errors = graphene.List(graphene.String)
+
+    @classmethod
+    def mutate_and_get_payload(cls, root, info, **args):
+        try:
+            id = args.get('id')
+            shared = args.get('shared')
+            user = info.context.user
+
+            project = get_object(Project, id)
+            if project.student != user:
+                raise PermissionError()
+            project.final = shared
+            project.save()
+
+            return cls(success=True, shared=shared)
+
+        except PermissionError:
+            errors = ["You don't have the permission to do that."]
+        except Exception as e:
+            errors = ['Error: {}'.format(e)]
+
+        return cls(success=False, shared=None, errors=errors)
+
+
 class PortfolioMutations:
     add_project = AddProject.Field()
     update_project = UpdateProject.Field()
@@ -150,3 +182,4 @@ class PortfolioMutations:
     add_project_entry = AddProjectEntry.Field()
     update_project_entry = UpdateProjectEntry.Field()
     delete_project_entry = DeleteProjectEntry.Field()
+    update_project_shared_state = UpdateProjectSharedState.Field()