Add action menu and delete method to objectives

client/src/components/ContentBlock.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="content-block__container hideable-element" :class="{'hideable-element--hidden': hidden}">
     <div class="content-block" :class="specialClass">
-      <div class="content-block__actions" v-if="canEditContentBlock && editModule">
+      <div class="block-actions" v-if="canEditContentBlock && editModule">
-        <user-widget v-bind="me" class="content-block__user-widget"></user-widget>
+        <user-widget v-bind="me" class="block-actions__user-widget content-block__user-widget"></user-widget>
         <more-options-widget>
           <li class="popover-links__link"><a @click="deleteContentBlock(contentBlock)">Löschen</a></li>
           <li class="popover-links__link"><a @click="editContentBlock(contentBlock)">Bearbeiten</a></li>
@@ -254,22 +254,12 @@
       @include regular-text();
     }
 
-    &__actions {
+    &__action-button {
-      position: absolute;
+      cursor: pointer;
-      top: 10px;
-      right: -85px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
     }
 
     &__user-widget {
       margin-right: 0;
-      margin-bottom: $small-spacing;
-    }
-
-    &__action-button {
-      cursor: pointer;
     }
 
     &--base_communication {

client/src/components/UserWidget.vue

@@ -86,6 +86,7 @@
     justify-content: space-between;
     align-items: center;
     position: relative;
+    // todo: do we need the margin right always? just do it where needed --> content block actions and objecives override this
     margin-right: $medium-spacing;
 
     &__popover {

client/src/components/objective-groups/Objective.vue

@@ -1,9 +1,14 @@
 <template>
   <li class="objective hideable-element" :class="{'hideable-element--hidden': hidden}">
-
     <visibility-action
       v-if="editModule"
       :block="objective"></visibility-action>
+    <div class="block-actions" v-if="editModule && canEdit">
+      <user-widget class="block-actions__user-widget objective__user-widget" v-bind="me"></user-widget>
+      <more-options-widget>
+        <div class="popover-links__link"><a @click="deleteObjective(objective)">Löschen</a></div>
+      </more-options-widget>
+    </div>
     <div>
       {{objective.text}}
     </div>
@@ -13,22 +18,83 @@
 
 <script>
   import VisibilityAction from '@/components/visibility/VisibilityAction';
+  import UserWidget from '@/components/UserWidget';
+  import MoreOptionsWidget from '@/components/MoreOptionsWidget';
 
   import {mapGetters} from 'vuex';
   import {isHidden} from '@/helpers/content-block';
+  import {meQuery} from '@/graphql/queries';
+  import DELETE_OBJECTIVE_MUTATION from '@/graphql/gql/mutations/deleteObjective.gql';
+  import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
 
   export default {
     props: ['objective', 'schoolClass'],
 
     components: {
-      VisibilityAction
+      MoreOptionsWidget,
+      VisibilityAction,
+      UserWidget
     },
 
     computed: {
       ...mapGetters(['editModule']),
       hidden() {
         return isHidden(this.objective, this.schoolClass)
+      },
+      canEdit() {
+        return this.objective.mine;
+      }
+    },
+
+    methods: {
+      deleteObjective(objective) {
+        this.$apollo.mutate({
+          mutation: DELETE_OBJECTIVE_MUTATION,
+          variables: {
+            input: {
+              id: objective.id
+            }
+          },
+          refetchQueries: [{
+            query: MODULE_DETAILS_QUERY,
+            variables: {
+              slug: this.$route.params.slug
+            }
+          }]
+          // todo: make update work here also
+          // update(store, {data: {deleteObjective: {success}}}) {
+          //   if (success) {
+          //     const query = MODULE_DETAILS_QUERY;
+          //     const variables = {slug: this.$route.params.slug};
+          //     const data = store.readQuery({query, variables});
+          //     if (data) {
+          //       data.module.objectiveGroups.edges.
+          //       data.rooms.edges.splice(data.rooms.edges.findIndex(edge => edge.node.id === theId), 1);
+          //       store.writeQuery({query, variables, data});
+          //     }
+          //   }
+          // }
+        });
+      }
+    },
+
+    apollo: {
+      me: meQuery
+    },
+
+    data() {
+      return {
+        me: {}
       }
     }
   }
 </script>
+
+<style scoped lang="scss">
+  .objective {
+    min-height: 50px;
+    &__user-widget {
+      margin-right: 0;
+    }
+  }
+</style>

client/src/graphql/gql/fragments/objectiveParts.gql

@@ -1,6 +1,7 @@
 fragment ObjectiveParts on ObjectiveNode {
   id
   text
+  mine
   userCreated
   hiddenFor {
     edges {

client/src/graphql/gql/mutations/deleteObjective.gql

@@ -0,0 +1,11 @@
+mutation DeleteObjective($input: DeleteObjectiveInput!) {
+  deleteObjective(input: $input) {
+    success
+  }
+}
+
+#{
+#  "input": {
+#    "id": "Um9vbU5vZGU6MjY="
+#  }
+#}

client/src/graphql/gql/objectiveGroupQuery.gql

@@ -7,6 +7,22 @@ query ObjectiveGroupQuery($id: ID!) {
         node {
           id
           text
+          hiddenFor {
+            edges {
+              node {
+                id
+                name
+              }
+            }
+          }
+          visibleFor {
+            edges {
+              node {
+                id
+                name
+              }
+            }
+          }
         }
       }
     }

client/src/styles/_actions.scss

@@ -2,3 +2,16 @@
   width: 30px;
   fill: $color-silver-dark;
 }
+
+.block-actions {
+  position: absolute;
+  top: 10px;
+  right: -85px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &__user-widget {
+    margin-bottom: $small-spacing;
+  }
+}

server/objectives/mutations.py

@@ -83,6 +83,28 @@ class AddObjective(relay.ClientIDMutation):
         return cls(objective=objective)
 
 
+class DeleteObjective(relay.ClientIDMutation):
+    class Input:
+        id = graphene.ID(required=True)
+
+    success = graphene.Boolean()
+
+    @classmethod
+    def mutate_and_get_payload(cls, root, info, **kwargs):
+        id = kwargs.get('id')
+
+        objective = get_object(Objective, id)
+        user = info.context.user
+
+        if not user.has_perm('users.can_manage_school_class_content'):
+            raise PermissionDenied('Missing permissions')
+        if objective.owner.pk != user.pk:
+            raise PermissionDenied('Permission denied: Not owner')
+
+        objective.delete()
+        return cls(success=True)
+
+
 
 class AddObjectiveGroup(relay.ClientIDMutation):
     class Input:
@@ -152,5 +174,6 @@ class ObjectiveMutations:
     update_objective_progress = UpdateObjectiveProgress.Field()
     update_objective_visibility = UpdateObjectiveVisibility.Field()
     add_objective = AddObjective.Field()
+    delete_objective = DeleteObjective.Field()
     add_objective_group = AddObjectiveGroup.Field()
     update_objective_group = UpdateObjectiveGroup.Field()

server/objectives/schema.py

@@ -45,6 +45,7 @@ class ObjectiveGroupNode(DjangoObjectType):
 class ObjectiveNode(DjangoObjectType):
     pk = graphene.Int()
     user_created = graphene.Boolean()
+    mine = graphene.Boolean()
 
     class Meta:
         model = Objective
@@ -57,6 +58,8 @@ class ObjectiveNode(DjangoObjectType):
     def resolve_user_created(self, info, **kwargs):
         return self.owner is not None
 
+    def resolve_mine(self, info, **kwargs):
+        return self.owner is not None and self.owner.pk == info.context.user.pk
 
 class ObjectiveProgressStatusNode(DjangoObjectType):
     pk = graphene.Int()