Update room visibility modal with a save button

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

@@ -79,6 +79,6 @@ describe('The Room Page', () => {
     cy.getByDataCy('change-visibility').click();
     cy.getByDataCy('modal-title').should('contain', 'Sichtbarkeit anpassen');
     cy.getByDataCy('select-option').eq(1).click();
-    cy.getByDataCy('save').click();
+    cy.getByDataCy('modal-save-button').click();
   });
 });

client/src/components/rooms/ChangeVisibility.vue

@@ -10,13 +10,25 @@
     <div class="change-visibility__content">
       <radiobutton
         :checked="!restricted"
+        data-cy="select-option"
         label="Raumeinträge sind für alle Lernenden sichtbar"
         @input="restrict(false)"/>
       <radiobutton
         :checked="restricted"
+        data-cy="select-option"
         label="Lernende sehen nur die eigenen Beiträge"
         @input="restrict(true)"/>
     </div>
+    <div slot="footer">
+      <a
+        class="button button--primary"
+        data-cy="modal-save-button"
+        @click="confirm">Speichern</a>
+      <a
+        class="button"
+        @click="cancel">Abbrechen</a>
+    </div>
+
   </modal>
 </template>
 
@@ -41,8 +53,14 @@
     },
 
     methods: {
-      select(restricted) {
+      restrict(restricted) {
         this.restricted = restricted;
+      },
+      confirm() {
+        this.$modal.confirm(this.restricted);
+      },
+      cancel() {
+        this.$modal.cancel();
       }
     }
   };

client/src/components/rooms/RoomActions.vue

@@ -94,8 +94,8 @@
       changeVisibility() {
         console.log('changeVisibility');
         this.$modal.open('change-visibility', {restricted: false})
-          .then(() => {
-            console.log('yay');
+          .then((res) => {
+            console.log('yay', res);
           })
           .catch(() => {
             console.log('nay');

client/src/plugins/modal.js

@@ -38,9 +38,9 @@ const ModalPlugin = {
           this._reject = reject;
         });
       },
-      confirm: () => {
+      confirm: (res) => {
         reset();
-        this._resolve();
+        this._resolve(res);
       },
       cancel: () => {
         reset();