From 44f25bd11388cd564687708228b28d71f5d035d4 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 3 Aug 2021 15:12:09 +0200
Subject: [PATCH] Add read-only banner

---
 .../read-only/read-only-banner.spec.js        | 67 +++++++++++++++++++
 client/src/App.vue                            | 13 ++--
 client/src/components/ReadOnlyBanner.vue      | 41 ++++++++++++
 client/src/mixins/add-school-class.js         |  2 +-
 client/src/pages/instrumentOverview.vue       |  4 +-
 client/src/pages/joinClass.vue                |  9 +--
 client/src/pages/start.vue                    | 10 +--
 client/src/pages/submissions.vue              |  2 +-
 client/src/styles/_default-layout.scss        |  3 +-
 client/src/styles/_variables.scss             |  2 +
 server/schema.graphql                         | 25 +++++++
 11 files changed, 159 insertions(+), 19 deletions(-)
 create mode 100644 client/cypress/integration/frontend/read-only/read-only-banner.spec.js
 create mode 100644 client/src/components/ReadOnlyBanner.vue

diff --git a/client/cypress/integration/frontend/read-only/read-only-banner.spec.js b/client/cypress/integration/frontend/read-only/read-only-banner.spec.js
new file mode 100644
index 00000000..be0dc7d9
--- /dev/null
+++ b/client/cypress/integration/frontend/read-only/read-only-banner.spec.js
@@ -0,0 +1,67 @@
+const getOperations = ({readOnly, classReadOnly = false}) => ({
+  MeQuery: {
+    me: {
+      onboardingVisited: true,
+      readOnly,
+      isTeacher: true,
+      selectedClass: {
+        id: 'selectedClassId',
+        readOnly: classReadOnly
+      }
+    },
+  },
+  NewsTeasers: {
+    newsTeasers: {
+      edges: []
+    }
+  }
+});
+
+const checkReadOnly = (shouldBannerExist, text) => {
+    cy.visit('/');
+
+    cy.getByDataCy('start-page-heading').should('exist');
+    if (shouldBannerExist) {
+      cy.getByDataCy('read-only-banner').should('exist').should('contain', text);
+    } else {
+      cy.getByDataCy('read-only-banner').should('not.exist');
+    }
+};
+
+describe('Read Only Banner', () => {
+  beforeEach(() => {
+    cy.setup();
+  });
+
+  it('is not shown', () => {
+    cy.mockGraphqlOps({
+      operations: getOperations({readOnly: false}),
+    });
+    checkReadOnly(false);
+  });
+
+  it('is shown for expired license', () => {
+    cy.mockGraphqlOps({
+      operations: getOperations({readOnly: true}),
+    });
+    checkReadOnly(true, 'Lizenz');
+
+    // cy.visit('/');
+    //
+    // cy.getByDataCy('start-page-heading').should('exist');
+    // cy.getByDataCy('read-only-banner').should('exist').should('contain', 'nicht mehr aktiv');
+  });
+
+  it('is shown for inactive school class', () => {
+    cy.mockGraphqlOps({
+      operations: getOperations({readOnly: false, classReadOnly: true}),
+    });
+
+    checkReadOnly(true, 'Klasse');
+    //
+    // cy.visit('/');
+
+    // cy.getByDataCy('start-page-heading').should('exist');
+    // cy.getByDataCy('read-only-banner').should('exist').should('contain', 'nicht mehr aktiv');
+  });
+});
diff --git a/client/src/App.vue b/client/src/App.vue
index 0a7b186a..682d24bd 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -3,6 +3,7 @@
     :class="{'no-scroll': showModal || showMobileNavigation}"
     class="app"
     id="app">
+    <read-only-banner/>
     <scroll-up/>
     <component
       :is="showModalDeprecated"
@@ -40,11 +41,13 @@
   import SnapshotCreated from '@/components/modules/SnapshotCreated';
   import {mapGetters} from 'vuex';
   import ScrollUp from '@/components/ScrollUp';
+  import ReadOnlyBanner from '@/components/ReadOnlyBanner';
 
   export default {
     name: 'App',
 
     components: {
+      ReadOnlyBanner,
       ScrollUp,
       DefaultLayout,
       SimpleLayout,
@@ -68,7 +71,7 @@
       FullscreenInfographic,
       FullscreenVideo,
       DeactivatePerson,
-      SnapshotCreated
+      SnapshotCreated,
     },
 
     computed: {
@@ -77,17 +80,17 @@
       },
       ...mapGetters({
         showModalDeprecated: 'showModal', // don't use this any more todo: remove this
-        showMobileNavigation: 'showMobileNavigation'
+        showMobileNavigation: 'showMobileNavigation',
       }),
       showModal() {
         return this.$modal.state.component;
-      }
+      },
     },
   };
 </script>
 
 <style lang="scss">
-  @import "styles/main.scss";
+  @import "~styles/main.scss";
 
   body {
     overflow-y: auto;
@@ -100,6 +103,8 @@
     min-height: 100vh;
     /*for IE10+*/
     display: flex;
+    flex-direction: column;
+
   }
 
   .no-scroll {
diff --git a/client/src/components/ReadOnlyBanner.vue b/client/src/components/ReadOnlyBanner.vue
new file mode 100644
index 00000000..7327381f
--- /dev/null
+++ b/client/src/components/ReadOnlyBanner.vue
@@ -0,0 +1,41 @@
+<template>
+  <div
+    class="read-only-banner"
+    data-cy="read-only-banner"
+    v-if="me.readOnly || me.selectedClass.readOnly">
+    <p class="read-only-banner__text">
+      {{ readOnlyText }} Sie können Inhalte lesen, aber nicht
+      bearbeiten.
+    </p>
+  </div>
+</template>
+
+<script>
+  import me from '@/mixins/me';
+
+  export default {
+    mixins: [me],
+
+    computed: {
+      readOnlyText() {
+        return this.me.readOnly ? 'Sie besitzen keine aktive Lizenz.' : 'Sie sind in dieser Klasse nicht mehr aktiv.';
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .read-only-banner {
+    background-color: $color-brand-light;
+    display: flex;
+    justify-content: center;
+
+    &__text {
+      padding: $small-spacing 0;
+      @include regular-text;
+      max-width: $screen-width;
+    }
+  }
+</style>
diff --git a/client/src/mixins/add-school-class.js b/client/src/mixins/add-school-class.js
index e1e39966..f9cc4120 100644
--- a/client/src/mixins/add-school-class.js
+++ b/client/src/mixins/add-school-class.js
@@ -5,7 +5,7 @@ export default {
     addSchoolClass(store, schoolClass) {
       const query = ME_QUERY;
       if (schoolClass) {
-        console.log('updating school class');
+        this.$log.debug('updating school class', schoolClass);
         const data = store.readQuery({query});
         if (data) {
           data.me.schoolClasses.edges = [
diff --git a/client/src/pages/instrumentOverview.vue b/client/src/pages/instrumentOverview.vue
index 0ed95fe1..c28387de 100644
--- a/client/src/pages/instrumentOverview.vue
+++ b/client/src/pages/instrumentOverview.vue
@@ -76,7 +76,7 @@
     }
 
     &__title {
-      max-width: 1200px;
+      max-width: $screen-width;
       line-height: 1.2;
       margin-bottom: 0;
     }
@@ -87,7 +87,7 @@
 
     &__list {
       padding: $large-spacing 0;
-      max-width: 1200px;
+      max-width: $screen-width;
       width: 100%;
       display: flex;
       flex-direction: column;
diff --git a/client/src/pages/joinClass.vue b/client/src/pages/joinClass.vue
index 7676acaf..655e9154 100644
--- a/client/src/pages/joinClass.vue
+++ b/client/src/pages/joinClass.vue
@@ -34,7 +34,7 @@
         this.error = '';
       },
       joinClass(code) {
-        let self = this;
+        this.$log.debug('joining class');
         this.$apollo.mutate({
             mutation: JOIN_CLASS_MUTATION,
             variables: {
@@ -42,9 +42,10 @@
                 code,
               },
             },
-            update(store, {data: {joinClass: {schoolClass}}}) {
-              self.addSchoolClass(store, schoolClass);
-              self.$router.push({name: 'my-class'});
+            update: (store, {data: {joinClass: {schoolClass}}}) => {
+              this.addSchoolClass(store, schoolClass);
+              this.$log.debug('added school class');
+              this.$router.push({name: 'my-class'});
             },
             refetchQueries: [{query: MY_SCHOOL_CLASS_QUERY}],
           })
diff --git a/client/src/pages/start.vue b/client/src/pages/start.vue
index bdd3948a..5143b104 100644
--- a/client/src/pages/start.vue
+++ b/client/src/pages/start.vue
@@ -4,7 +4,9 @@
       <div
         class="start-page__modules start-sections"
         data-cy="start-modules-list">
-        <h2 class="start-page__heading">Letzte Module</h2>
+        <h2
+          class="start-page__heading"
+          data-cy="start-page-heading">Letzte Module</h2>
         <h3
           class="start-page__no-modules"
           data-cy="no-modules-yet"
@@ -109,9 +111,7 @@
 </script>
 
 <style scoped lang="scss">
-
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+  @import "~styles/helpers";
 
   .start-page {
     display: flex;
@@ -151,7 +151,7 @@
       box-sizing: border-box;
       max-width: 100%;
       @include desktop {
-        max-width: 1200px;
+        max-width: $screen-width;
         margin: 0 auto;
       }
     }
diff --git a/client/src/pages/submissions.vue b/client/src/pages/submissions.vue
index 0bc7097b..cc7e55b7 100644
--- a/client/src/pages/submissions.vue
+++ b/client/src/pages/submissions.vue
@@ -56,7 +56,7 @@
   .submissions-page {
     display: grid;
     width: 100%;
-    max-width: 1200px;
+    max-width: $screen-width;
 
     grid-template-rows: auto 1fr;
 
diff --git a/client/src/styles/_default-layout.scss b/client/src/styles/_default-layout.scss
index e01d12a1..864f2acb 100644
--- a/client/src/styles/_default-layout.scss
+++ b/client/src/styles/_default-layout.scss
@@ -1,5 +1,4 @@
-@import "@/styles/_variables.scss";
-@import "@/styles/_mixins.scss";
+@import "~styles/helpers";
 
 .layout {
   $footer-height: 287px;
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index 0ee65d82..278749dd 100644
--- a/client/src/styles/_variables.scss
+++ b/client/src/styles/_variables.scss
@@ -80,3 +80,5 @@ $popover-default-bottom: -110px;
 
 $footer-width: 800px;
 $news-width: 550px;
+
+$screen-width: 1200px;
diff --git a/server/schema.graphql b/server/schema.graphql
index c56be316..b058420b 100644
--- a/server/schema.graphql
+++ b/server/schema.graphql
@@ -426,6 +426,7 @@ type CustomMutation {
 }
 
 type CustomQuery {
+  newsTeasers(offset: Int, before: String, after: String, first: Int, last: Int, date: Date): NewsTeaserNodeConnection
   survey(id: ID): SurveyNode
   surveys(offset: Int, before: String, after: String, first: Int, last: Int): SurveyNodeConnection
   project(id: ID, slug: String): ProjectNode
@@ -458,6 +459,8 @@ type CustomQuery {
   _debug: DjangoDebug
 }
 
+scalar Date
+
 scalar DateTime
 
 input DeleteContentBlockInput {
@@ -692,6 +695,28 @@ type MutateContentBlockPayload {
   clientMutationId: String
 }
 
+type NewsTeaserNode implements Node {
+  id: ID!
+  imageUrl: String
+  title: String!
+  description: String
+  date: Date
+  orderId: Int!
+  newsArticleUrl: String
+  imageSource: String!
+  displayDate: String
+}
+
+type NewsTeaserNodeConnection {
+  pageInfo: PageInfo!
+  edges: [NewsTeaserNodeEdge]!
+}
+
+type NewsTeaserNodeEdge {
+  node: NewsTeaserNode
+  cursor: String!
+}
+
 interface Node {
   id: ID!
 }