From 20aceaf16217df902cff16ec29386eb9fe45d270 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 26 Aug 2021 17:53:18 +0200
Subject: [PATCH] Update room visibility modal with a save button

---
 .../frontend/rooms/room-page.spec.js          |  2 +-
 .../src/components/rooms/ChangeVisibility.vue | 20 ++++++++++++++++++-
 client/src/components/rooms/RoomActions.vue   |  4 ++--
 client/src/plugins/modal.js                   |  4 ++--
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/client/cypress/integration/frontend/rooms/room-page.spec.js b/client/cypress/integration/frontend/rooms/room-page.spec.js
index b296d6bb..2edb349e 100644
--- a/client/cypress/integration/frontend/rooms/room-page.spec.js
+++ b/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();
   });
 });
diff --git a/client/src/components/rooms/ChangeVisibility.vue b/client/src/components/rooms/ChangeVisibility.vue
index 63a0687b..8dc8bf60 100644
--- a/client/src/components/rooms/ChangeVisibility.vue
+++ b/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();
       }
     }
   };
diff --git a/client/src/components/rooms/RoomActions.vue b/client/src/components/rooms/RoomActions.vue
index d9591d68..b9f34529 100644
--- a/client/src/components/rooms/RoomActions.vue
+++ b/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');
diff --git a/client/src/plugins/modal.js b/client/src/plugins/modal.js
index 2a658c2c..b11072a5 100644
--- a/client/src/plugins/modal.js
+++ b/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();