Add visibility widget for room

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

@@ -6,13 +6,13 @@ describe('The Room Page', () => {
   const slug = 'ein-historisches-festival';
 
   const RoomEntriesQuery = {
-      room: {
+    room: {
-        slug,
+      slug,
-        roomEntries: {
+      roomEntries: {
-          edges: [],
+        edges: [],
-        },
       },
-    };
+    },
+  };
 
   const operations = {
     MeQuery: getMinimalMe({}),
@@ -61,7 +61,7 @@ describe('The Room Page', () => {
     cy.get('.room-entry__content:first').should('contain', entryText).should('contain', 'Rachel Green');
   });
 
-  it('changes visibility of a room', () => {
+  it.only('changes visibility of a room', () => {
     const MeQuery = getMinimalMe({
       isTeacher: true
     });
@@ -75,10 +75,12 @@ describe('The Room Page', () => {
     });
 
     cy.visit(`/room/${slug}`);
+    cy.getByDataCy('room-visibility-status').should('contain', 'alle Beiträge');
     cy.getByDataCy('toggle-room-actions-menu').click();
     cy.getByDataCy('change-visibility').click();
     cy.getByDataCy('modal-title').should('contain', 'Sichtbarkeit anpassen');
     cy.getByDataCy('select-option').eq(1).click();
     cy.getByDataCy('modal-save-button').click();
+    cy.getByDataCy('room-visibility-status').should('contain', 'eigenen Beiträge');
   });
 });

client/src/components/rooms/EntryCountWidget.vue

@@ -18,12 +18,13 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_mixins.scss";
+  @import "~styles/helpers";
 
   .entry-count-widget {
     display: flex;
     align-items: center;
     opacity: 0.6;
+    margin-right: $medium-spacing;
 
     svg {
       width: 30px;

client/src/components/rooms/RoomGroupWidget.vue

@@ -20,7 +20,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_mixins.scss";
+  @import "~styles/helpers";
 
   .room-group-widget {
     display: flex;

client/src/components/rooms/RoomVisibilityWidget.vue

@@ -0,0 +1,53 @@
+<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>
+  </div>
+</template>
+
+<script>
+
+  import EyeIcon from '@/components/icons/EyeIcon';
+  import ClosedEyeIcon from '@/components/icons/ClosedEyeIcon';
+
+  export default {
+    props: {
+      visibility: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    components: {
+      ClosedEyeIcon,
+      EyeIcon
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  @import "~styles/helpers";
+
+  .room-visibility-widget {
+    display: flex;
+    align-items: center;
+    opacity: 0.6;
+
+    &__icon {
+      width: 30px;
+      fill: $color-charcoal-dark;
+      margin-right: 15px;
+    }
+
+    & > span {
+      @include room-widget-text-style;
+    }
+  }
+
+</style>

client/src/pages/room.vue

@@ -18,6 +18,7 @@
         {{ room.description }}
       </p>
       <div class="room__meta">
+        <room-visibility-widget />
         <room-group-widget v-bind="room.schoolClass"/>
         <entry-count-widget :entry-count="roomEntryCount"/>
       </div>
@@ -44,11 +45,12 @@
   import room from '@/mixins/room';
   import me from '@/mixins/me';
   import BackLink from '@/components/BackLink';
+  import RoomVisibilityWidget from '@/components/rooms/RoomVisibilityWidget';
 
   export default {
     props: ['slug'],
     mixins: [room, me],
-    components: {BackLink},
+    components: {RoomVisibilityWidget, BackLink},
 
     computed: {
       canEdit() {