Add read only mode for class and team management

client/cypress/integration/frontend/read-only/assignment-feedback-read-only.teacher.spec.js

@@ -1,4 +1,4 @@
-import mocks from '../../fixtures/mocks';
+import mocks from '../../../fixtures/mocks';
 
 const myText = 'Mein Feedback';
 

client/cypress/integration/frontend/read-only/assignment-read-only.student.spec.js

@@ -1,5 +1,5 @@
-import mocks from '../../fixtures/mocks';
+import mocks from '../../../fixtures/mocks';
-import minimalModule from '../../fixtures/module.minimal';
+import minimalModule from '../../../fixtures/module.minimal';
 
 const module = {
   ...minimalModule,

client/cypress/integration/frontend/read-only/read-only-navigation.spec.js

@@ -1,5 +1,5 @@
-import mocks from '../../fixtures/mocks';
+import mocks from '../../../fixtures/mocks';
-import minimalModule from '../../fixtures/module.minimal';
+import minimalModule from '../../../fixtures/module.minimal';
 
 const getOperations = ({readOnly}) => ({
   MeQuery: {

client/cypress/integration/frontend/read-only/school-class-team-read-only.spec.js

@@ -0,0 +1,81 @@
+import mocks from '../../../fixtures/mocks';
+
+const selectedClassName = 'My Class';
+
+const getOperations = ({readOnly}) => ({
+  MeQuery: {
+    me: {
+      onboardingVisited: true,
+      readOnly,
+      isTeacher: true,
+    },
+  },
+  MySchoolClassQuery: {
+    me: {
+      readOnly,
+      isTeacher: true,
+      selectedClass: {
+        name: selectedClassName,
+        code: 'XXXX',
+        members: [
+          {
+            id: 'id',
+            firstName: 'Me',
+            lastName: 'Myson',
+            isTeacher: true,
+            active: true,
+            isMe: true,
+          },
+        ],
+      },
+    },
+  },
+});
+
+Cypress.Commands.add('checkSchoolClassTeamReadOnly', (readOnly) => {
+  cy.mockGraphqlOps({
+    operations: getOperations({readOnly}),
+  });
+
+  const exist = readOnly ? 'not.exist' : 'exist';
+  cy.visit('me/class');
+  cy.getByDataCy('group-list-name').should('exist').should('contain', selectedClassName);
+  cy.getByDataCy('show-code-button').should(exist);
+  cy.getByDataCy('edit-group-name-link').should(exist);
+  cy.openSidebar();
+  cy.getByDataCy('class-selection').click(); ``;
+  cy.getByDataCy('current-class-name').should('exist');
+  cy.getByDataCy('create-class-link').should(exist);
+});
+
+describe('School Class and Team Management - Read only', () => {
+  beforeEach(() => {
+    cy.fakeLogin('rahel.cueni', 'test');
+    cy.server();
+    cy.task('getSchema').then(schema => {
+      cy.mockGraphql({
+        schema,
+        mocks,
+      });
+    });
+  });
+
+  it('can see menu items', () => {
+    cy.checkSchoolClassTeamReadOnly(false);
+    // cy.visit('me/class');
+    // cy.getByDataCy('group-list-name').should('exist').should('contain', selectedClassName);
+    // cy.getByDataCy('show-code-button').should('exist');
+    // cy.getByDataCy('edit-group-name-link').should('exist');
+    // cy.openSidebar();
+    // cy.getByDataCy('class-selection').click();
+    // cy.getByDataCy('current-class-name').should('exist');
+    // cy.getByDataCy('create-class-link').should('exist');
+  });
+
+  it('can not see menu items', () => {
+    // cy.mockGraphqlOps({
+    //   operations: getOperations({readOnly: true}),
+    // });
+    cy.checkSchoolClassTeamReadOnly(true);
+  });
+});

client/cypress/support/commands.js

@@ -202,3 +202,7 @@ Cypress.Commands.add('isSubmissionReadOnly', (myText) => {
   cy.get('@textarea').should('have.attr', 'readonly');
   cy.getByDataCy('submission-form-submit').should('not.exist');
 });
+
+Cypress.Commands.add('openSidebar', () => {
+    cy.getByDataCy('user-widget-avatar').click();
+});

client/cypress/support/index.d.ts

@@ -27,5 +27,7 @@ declare namespace Cypress {
     canReopen(exists: boolean): void
 
     isSubmissionReadOnly(myText: string): void
+
+    openSidebar(): void
   }
 }

client/src/components/profile/GroupList.vue

@@ -6,7 +6,8 @@
     <router-link
       :to="showCodeRoute"
       class="group-list__code-link button button--primary"
-      v-if="showCode">Zugangscode anzeigen
+      data-cy="show-code-button"
+      v-if="showCode && !readOnly">Zugangscode anzeigen
     </router-link>
 
     <div class="group-list__content">
@@ -14,7 +15,7 @@
         class="group-list__name"
         data-cy="group-list-name">{{ name }}</span>
         <edit-group-name
-          v-if="canEdit"
+          v-if="canEdit && !readOnly"
           @edit="$emit('edit')"/>
       </h2>
       <div class="group-list__members group-list-members">
@@ -85,6 +86,10 @@
         type: Object,
         default: () => ({}),
       },
+      readOnly: {
+        type: Boolean,
+        default: false
+      },
       activeMembers: {
         type: Array,
         default: () => [],

client/src/components/school-class/ClassSelectionWidget.vue

@@ -27,12 +27,13 @@
       <li
         class="popover-links__link popover-links__link--large popover-links__divider"
         data-cy="create-class-link"
-        v-if="me.isTeacher"
+        v-if="me.isTeacher && !me.readOnly"
         @click="closeSidebar">
         <router-link
           :to="{name: 'create-class'}"
           tag="span"
-          class="popover-links__link-with-icon">
+          class="popover-links__link-with-icon"
+        >
           <add-icon class="popover-links__icon"/>
           <span>Klasse erfassen</span>
         </router-link>

client/src/graphql/gql/queries/mySchoolClass.gql

@@ -2,6 +2,7 @@ query MySchoolClassQuery {
   me {
     id
     isTeacher
+    readOnly
     selectedClass {
       id
       name

client/src/mixins/selected-class.js

@@ -4,9 +4,6 @@ export default {
   apollo: {
       me: {
         query: MY_SCHOOL_CLASS_QUERY,
-        update(data) {
-          return this.$getRidOfEdges(data).me;
-        }
       }
     },
 

client/src/pages/myClass.vue

@@ -6,6 +6,7 @@
       :inactive-members="me.selectedClass.members.filter(member => !member.active)"
       :show-code="me.isTeacher"
       :show-code-route="showCodeRoute"
+      :read-only="me.readOnly"
       :can-edit="me.isTeacher"
       :enable-deactivate="true"
       title="Klassenliste"