Make assignments read only in client

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

@@ -16,7 +16,6 @@ const module = {
               },
               id: 'bla-123',
             },
-
             {
               type: 'assignment',
               value: {
@@ -35,10 +34,11 @@ const module = {
 
 const myText = 'submission text';
 
-const operations = {
+const getOperations = ({final, readOnly}) => ({
   MeQuery: {
     me: {
       onboardingVisited: true,
+      readOnly
     },
   },
   ModuleDetailsQuery: {
@@ -48,13 +48,17 @@ const operations = {
     assignment: {
       submission: {
         text: myText,
-        final: false,
+        final,
         document: '',
         submissionFeedback: null
       },
     },
   },
-};
+});
+
+Cypress.Commands.add('canNotReopen', () => {
+  cy.getByDataCy('final-submission-reopen').should('not.exist');
+});
 
 describe('Assignments read-only - Student', () => {
   beforeEach(() => {
@@ -63,20 +67,58 @@ describe('Assignments read-only - Student', () => {
     cy.task('getSchema').then(schema => {
       cy.mockGraphql({
         schema,
-        mocks,
-        operations,
+        mocks
       });
     });
   });
 
-  it('can not edit', () => {
+  it('can edit and turn in', () => {
+    cy.mockGraphqlOps({
+      operations: getOperations({final: false, readOnly: false})
+    });
     cy.visit('module/module-with-assignment');
 
-    cy.get('.submission-form__textarea').invoke('val').should('contain', myText);
-    cy.getByDataCy('submission-form-submit').should('not.exist');
+    cy.get('.submission-form__textarea').as('textarea');
+
+    cy.get('@textarea').invoke('val').should('contain', myText);
+    cy.get('@textarea').clear().type('Hello');
+    cy.get('@textarea').should('not.have.attr', 'readonly');
+
+    cy.getByDataCy('submission-form-submit').should('exist');
   });
 
-  it('can not turn in', () => {
-    cy.get('.not-implemented');
+  it('can not edit or turn in', () => {
+    cy.mockGraphqlOps({
+      operations: getOperations({final: false, readOnly: true})
+    });
+    cy.visit('module/module-with-assignment');
+
+    cy.get('.submission-form__textarea--readonly').as('textarea');
+
+    cy.get('@textarea').invoke('val').should('contain', myText);
+    cy.get('@textarea').should('have.attr', 'readonly');
+
+    cy.getByDataCy('submission-form-submit').should('not.exist');
+    cy.canNotReopen();
+  });
+
+  it('can revoke turn in', () => {
+    cy.mockGraphqlOps({
+      operations: getOperations({final: true, readOnly: false})
+    });
+
+    cy.visit('module/module-with-assignment');
+    cy.getByDataCy('final-submission').should('exist');
+    cy.getByDataCy('final-submission-reopen').should('exist');
+  });
+
+  it('can not revoke turn in', () => {
+    cy.mockGraphqlOps({
+      operations: getOperations({final: true, readOnly: true})
+    });
+
+    cy.visit('module/module-with-assignment');
+    cy.getByDataCy('final-submission').should('exist');
+    cy.canNotReopen();
   });
 });

client/src/components/content-blocks/assignment/Assignment.vue

@@ -16,6 +16,7 @@
         :spellcheck-loading="spellcheckLoading"
         :saved="!unsaved"
         :spellcheck="true"
+        :read-only="me.readOnly"
         placeholder="Ergebnis erfassen"
         action="Ergebnis mit Lehrperson teilen"
         shared-msg="Das Ergebnis wurde mit der Lehrperson geteilt."

client/src/components/content-blocks/assignment/FinalSubmission.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="final-submission">
+  <div
+    class="final-submission"
+    data-cy="final-submission">
     <document-block
       :value="{url: userInput.document}"
       class="final-submission__document"
@@ -10,6 +12,8 @@
       <span class="final-submission__explanation-text">{{ sharedMsg }}</span>
       <a
         class="final-submission__reopen"
+        data-cy="final-submission-reopen"
+        v-if="showReopen"
         @click="$emit('reopen')">Bearbeiten</a>
     </div>
   </div>
@@ -21,7 +25,20 @@
   import {newLineToParagraph} from '@/helpers/text';
 
   export default {
-    props: ['userInput', 'sharedMsg'],
+    props: {
+      userInput: {
+        type: Object,
+        default: () => ({})
+      },
+      showReopen: {
+        type: Boolean,
+        default: true
+      },
+      sharedMsg: {
+        type: String,
+        default: ''
+      }
+    },
 
     components: {
       InfoIcon,
@@ -37,9 +54,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
-  @import "@/styles/_functions.scss";
+  @import "~styles/helpers";
 
   .final-submission {
     &__text {
@@ -66,18 +81,21 @@
       display: flex;
       align-items: center;
     }
+
     &__explanation-icon {
       width: 40px;
       height: 40px;
       fill: $color-brand;
       margin-right: 8px;
     }
+
     &__explanation-text {
       color: $color-brand;
       font-family: $sans-serif-font-family;
       font-weight: $font-weight-regular;
       margin-right: $medium-spacing;
     }
+
     &__reopen {
       @include small-text;
       cursor: pointer;

client/src/components/content-blocks/assignment/SubmissionForm.vue

@@ -4,16 +4,15 @@
       <submission-input
         :input-text="userInput.text"
         :saved="saved"
-        :final="final"
+        :readonly="isReadOnly"
         :placeholder="placeholder"
-        :reopen="reopenSubmission"
         @input="saveInput"
       />
     </div>
 
     <div
       class="submission-form-container__actions"
-      v-if="!final">
+      v-if="!isReadOnly">
       <button
         class="submission-form-container__submit button button--primary button--white-bg"
         data-cy="submission-form-submit"
@@ -46,7 +45,8 @@
     <final-submission
       :user-input="userInput"
       :shared-msg="sharedMsg"
-      v-if="final"
+      :show-reopen="!readOnly"
+      v-if="isReadOnly"
       @reopen="$emit('reopen')"/>
   </div>
 </template>
@@ -65,6 +65,10 @@
       action: String,
       reopen: Function,
       document: String,
+      readOnly: {
+        type: Boolean,
+        default: false
+      },
       spellcheck: {
         type: Boolean,
         default: false
@@ -87,6 +91,9 @@
       final() {
         return !!this.userInput && this.userInput.final;
       },
+      isReadOnly() {
+        return this.final || this.readOnly;
+      },
       allowsDocuments() {
         return 'document' in this.userInput;
       },
@@ -118,7 +125,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import '@/styles/_mixins.scss';
+  @import '~styles/helpers';
 
   .submission-form-container {
 

client/src/components/content-blocks/assignment/SubmissionInput.vue

@@ -3,8 +3,9 @@
     <textarea
       v-auto-grow
       :placeholder="placeholder"
-      :readonly="final"
+      :readonly="readonly"
       :value="inputText"
+      :class="{'submission-form__textarea--readonly': readonly}"
       rows="1"
       class="submission-form__textarea"
       @input="$emit('input', $event.target.value)"
@@ -30,7 +31,7 @@
     props: {
       inputText: String,
       saved: Boolean,
-      final: Boolean,
+      readonly: Boolean,
       placeholder: {
         type: String,
         default: 'Ergebnis erfassen'