Add mutation to frontend

client/cypress/integration/frontend/rooms/room-page.spec.js

@@ -4,15 +4,18 @@ describe('The Room Page', () => {
   const entryText = 'something should be here';
   const entryTitle = 'some title';
   const slug = 'ein-historisches-festival';
+  const id = btoa('RoomNode:1');
+  const room = {
+    id,
+    slug,
+    restricted: false,
+    roomEntries: {
+      edges: [],
+    },
+  };
 
   const RoomEntriesQuery = {
-    room: {
+    room
-      slug,
-      restricted: false,
-      roomEntries: {
-        edges: [],
-      },
-    },
   };
 
   const operations = {
@@ -68,7 +71,16 @@ describe('The Room Page', () => {
     });
     const operations = {
       MeQuery,
-      RoomEntriesQuery
+      RoomEntriesQuery,
+      UpdateRoomVisibility: {
+        updateRoomVisibility: {
+          success: true,
+          room: {
+            ...room,
+            restricted: true
+          }
+        }
+      }
     };
 
     cy.mockGraphqlOps({

client/src/components/rooms/RoomActions.vue

@@ -39,7 +39,9 @@
   import Ellipses from '@/components/icons/Ellipses.vue';
   import WidgetPopover from '@/components/ui/WidgetPopover';
 
-  import DELETE_ROOM_MUTATION from '@/graphql/gql/mutations/deleteRoom.gql';
+  import DELETE_ROOM_MUTATION from 'gql/mutations/rooms/deleteRoom.gql';
+  import UPDATE_ROOM_VISIBILITY_MUTATION from 'gql/mutations/rooms/updateRoomVisibility.gql';
+
   import ROOMS_QUERY from '@/graphql/gql/queries/roomsQuery.gql';
   import PenIcon from '@/components/icons/PenIcon';
   import TrashIcon from '@/components/icons/TrashIcon';
@@ -92,10 +94,17 @@
         this.$router.push({name: 'edit-room', params: {id: this.id}});
       },
       changeVisibility() {
-        console.log('changeVisibility');
         this.$modal.open('change-visibility', {restricted: false})
-          .then((res) => {
+          .then((restricted) => {
-            console.log('yay', res);
+            this.$apollo.mutate({
+              mutation: UPDATE_ROOM_VISIBILITY_MUTATION,
+              variables: {
+                input: {
+                  id: this.id,
+                  restricted
+                }
+              }
+            });
           })
           .catch(() => {
             console.log('nay');

client/src/components/rooms/RoomVisibilityWidget.vue

@@ -1,13 +1,14 @@
 <template>
   <div class="room-visibility-widget">
     <template v-if="restricted">
-      <eye-icon class="room-visibility-widget__icon"/>
-      <span class="room-visibility-widget__text">Raumeinträge sind für alle Lernenden sichtbar</span>
-    </template>
-    <template v-else>
       <closed-eye-icon class="room-visibility-widget__icon"/>
       <span class="room-visibility-widget__text">Lernende sehen nur die eigenen Beiträge</span>
     </template>
+    <template v-else>
+      <eye-icon class="room-visibility-widget__icon"/>
+      <span class="room-visibility-widget__text">Raumeinträge sind für alle Lernenden sichtbar</span>
+    </template>
+
   </div>
 </template>
 
@@ -18,7 +19,7 @@
 
   export default {
     props: {
-      visibility: {
+      restricted: {
         type: Boolean,
         default: false
       }

client/src/graphql/gql/mutations/rooms/addRoom.gql

@@ -1,4 +1,4 @@
-#import "../fragments/roomParts.gql"
+#import "../../fragments/roomParts.gql"
 mutation AddRoom($input: AddRoomInput!){
   addRoom(input: $input) {
     room {

client/src/graphql/gql/mutations/rooms/addRoomEntry.gql

@@ -1,4 +1,4 @@
-#import "../fragments/roomEntryParts.gql"
+#import "../../fragments/roomEntryParts.gql"
 mutation AddRoomEntry($input: AddRoomEntryInput!){
   addRoomEntry(input: $input) {
     roomEntry {

client/src/graphql/gql/mutations/rooms/updateRoom.gql

@@ -1,4 +1,4 @@
-#import "../fragments/roomParts.gql"
+#import "../../fragments/roomParts.gql"
 mutation UpdateRoom($input: UpdateRoomInput!){
   updateRoom(input: $input) {
     room {

client/src/graphql/gql/mutations/rooms/updateRoomEntry.gql

@@ -1,4 +1,4 @@
-#import "../fragments/roomEntryParts.gql"
+#import "../../fragments/roomEntryParts.gql"
 mutation UpdateRoomEntry($input: UpdateRoomEntryInput!){
   updateRoomEntry(input: $input) {
     roomEntry {

client/src/graphql/gql/mutations/rooms/updateRoomVisibility.gql

@@ -3,6 +3,7 @@ mutation UpdateRoomVisibility($input: UpdateRoomVisibilityInput!) {
     success
     room {
       id
+      slug
       restricted
     }
   }

client/src/pages/room.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="room">
     <div class="room__back">
-
       <back-link
         type="room"
         title="Zurück zur Übersicht"/>
@@ -20,7 +19,7 @@
       <div class="room__meta">
         <room-visibility-widget
           :restricted="room.restricted"
-          data-cy="room-visibility-status" />
+          data-cy="room-visibility-status"/>
         <room-group-widget v-bind="room.schoolClass"/>
         <entry-count-widget :entry-count="roomEntryCount"/>
       </div>

server/schema.graphql

@@ -441,6 +441,7 @@ type CustomMutation {
   deleteRoomEntry(input: DeleteRoomEntryInput!): DeleteRoomEntryPayload
   updateRoomEntry(input: UpdateRoomEntryInput!): UpdateRoomEntryPayload
   addComment(input: AddCommentInput!): AddCommentPayload
+  updateRoomVisibility(input: UpdateRoomVisibilityInput!): UpdateRoomVisibilityPayload
   mutateContentBlock(input: MutateContentBlockInput!): MutateContentBlockPayload
   addContentBlock(input: AddContentBlockInput!): AddContentBlockPayload
   deleteContentBlock(input: DeleteContentBlockInput!): DeleteContentBlockPayload
@@ -1447,6 +1448,18 @@ type UpdateRoomPayload {
   clientMutationId: String
 }
 
+input UpdateRoomVisibilityInput {
+  id: ID!
+  restricted: Boolean!
+  clientMutationId: String
+}
+
+type UpdateRoomVisibilityPayload {
+  success: Boolean
+  room: RoomNode
+  clientMutationId: String
+}
+
 input UpdateSchoolClassInput {
   id: ID!
   name: String