Update change visibility modal

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

@@ -44,6 +44,10 @@ describe('The Room Page', () => {
     },
   };
 
+  const checkRadioButton = () => {
+    cy.get('.base-input-container__input:checked + .base-input-container__radiobutton svg').should('have.length', 1);
+  };
+
   beforeEach(() => {
     cy.setup();
   });
@@ -107,8 +111,24 @@ describe('The Room Page', () => {
     cy.getByDataCy('toggle-room-actions-menu').click();
     cy.getByDataCy('change-visibility').click();
     cy.getByDataCy('modal-title').should('contain', 'Sichtbarkeit anpassen');
+    cy.get('.change-visibility__radio').should('have.length', 2);
+    cy.get('.change-visibility__radio--selected').should('have.length', 1);
+    checkRadioButton();
+    cy.get('.change-visibility__radio--selected').should('have.length', 1).should('contain', 'alle Lernenden');
+    checkRadioButton();
+    cy.getByDataCy('select-option').eq(0).click();
+    cy.get('.change-visibility__radio--selected').should('have.length', 1);
+    checkRadioButton();
     cy.getByDataCy('select-option').eq(1).click();
+    cy.getByDataCy('select-option').eq(1).click();
+    cy.get('.change-visibility__radio--selected').should('have.length', 1).should('contain', 'eigenen Beiträge');
+    checkRadioButton();
     cy.getByDataCy('modal-save-button').click();
     cy.getByDataCy('room-visibility-status').should('contain', 'eigenen Beiträge');
+    cy.getByDataCy('toggle-room-actions-menu').click();
+    cy.getByDataCy('change-visibility').click();
+    cy.getByDataCy('modal-title').should('contain', 'Sichtbarkeit anpassen');
+    cy.get('.change-visibility__radio--selected').should('have.length', 1).should('contain', 'eigenen Beiträge');
+    checkRadioButton();
   });
 });

client/src/components/rooms/ChangeVisibility.vue

@@ -10,12 +10,16 @@
     <div class="change-visibility__content">
       <radiobutton
         :checked="!restricted"
+        :class="{'change-visibility__radio--selected': !restricted}"
         data-cy="select-option"
+        class="change-visibility__radio"
         label="Raumeinträge sind für alle Lernenden sichtbar"
         @input="restrict(false)"/>
       <radiobutton
         :checked="restricted"
+        :class="{'change-visibility__radio--selected': restricted}"
         data-cy="select-option"
+        class="change-visibility__radio"
         label="Lernende sehen nur die eigenen Beiträge"
         @input="restrict(true)"/>
     </div>
@@ -44,7 +48,7 @@
 
     data() {
       return {
-        restricted: undefined
+        restricted: false
       };
     },
 
@@ -77,6 +81,11 @@
     &__content {
       display: flex;
       flex-direction: column;
+      padding: $medium-spacing 0;
+    }
+
+    &__radio:first-of-type {
+      margin-bottom: $medium-spacing;
     }
   }
 </style>

client/src/components/rooms/RoomActions.vue

@@ -49,7 +49,16 @@
   import PopoverLink from '@/components/ui/PopoverLink';
 
   export default {
-    props: ['id'],
+    props: {
+      id: {
+        type: String,
+        default: '',
+      },
+      restricted: {
+        type: Boolean,
+        default: false
+      }
+    },
 
     components: {
       PopoverLink,
@@ -94,7 +103,8 @@
         this.$router.push({name: 'edit-room', params: {id: this.id}});
       },
       changeVisibility() {
-        this.$modal.open('change-visibility', {restricted: false})
+        this.showMenu = false;
+        this.$modal.open('change-visibility', {restricted: this.restricted})
           .then((restricted) => {
             this.$apollo.mutate({
               mutation: UPDATE_ROOM_VISIBILITY_MUTATION,
@@ -107,7 +117,7 @@
             });
           })
           .catch(() => {
-            console.log('nay');
+
           });
       }
     },

client/src/components/rooms/RoomWidget.vue

@@ -13,7 +13,9 @@
     <widget-footer
       data-cy="widget-footer"
       v-if="canEditRoom">
-      <room-actions :id="id"/>
+      <room-actions
+        :restricted="restricted"
+        :id="id"/>
     </widget-footer>
   </div>
 </template>
@@ -28,7 +30,7 @@
   import {meQuery} from '@/graphql/queries';
 
   export default {
-    props: ['slug', 'title', 'entryCount', 'appearance', 'schoolClass', 'id'],
+    props: ['slug', 'title', 'entryCount', 'appearance', 'schoolClass', 'id', 'restricted'],
 
     components: {
       EntryCountWidget,

client/src/components/ui/BaseInput.vue

@@ -4,13 +4,15 @@
       :checked="checked"
       type="checkbox"
       class="base-input-container__input"
-      @change.prevent="$emit('input', $event.target.checked, item)"
+      @click.prevent="$emit('input', $event.target.checked, item)"
     >
     <span
       :class="{'base-input-container__checkbox': type==='checkbox', 'base-input-container__radiobutton': type === 'radiobutton'}"
       class="base-input-container__icon checkbox">
       <tick v-if="type === 'checkbox'"/>
-      <circle-icon v-if="type === 'radiobutton'"/>
+      <circle-icon
+        data-cy="circle-icon"
+        v-if="type === 'radiobutton'"/>
     </span>
     <span
       class="base-input-container__label"

client/src/pages/room.vue

@@ -8,6 +8,7 @@
     <div class="room__context-menu">
       <room-actions
         :id="room.id"
+        :restricted="room.restricted"
         class="room__actions"
         v-if="canEdit"/>
     </div>