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

<template>
  <div class="feedback__submission submission-form-container">
    <div class="submission-form-container__inputs">
      <submission-input
        :input-text="userInput.text"
        :saved="saved"
        :readonly="isReadOnly"
        :placeholder="placeholder"
        @input="saveInput"
      />
    </div>

    <div
      class="submission-form-container__actions"
      v-if="!isReadOnly">
      <button
        class="submission-form-container__submit button button--primary button--white-bg"
        data-cy="submission-form-submit"
        @click="$emit('turnIn')"
      >{{ action }}
      </button>
      <button
        class="submission-form-container__submit submission-form-container__spellcheck button button--primary button--white-bg"
        v-if="showSpellcheckButton"
        @click="$emit('spellcheck')"
      >{{ spellcheckText }}
      </button>
      <div v-if="userInput.document">
        <document-block
          :value="{url: userInput.document}"
          show-trash-icon
          @trash="changeDocumentUrl('')"
        />
      </div>

      <simple-file-upload
        :value="userInput.document"
        class="submission-form-container__document"
        v-if="allowsDocuments"
        @link-change-url="changeDocumentUrl"
      />
      <slot/>
    </div>

    <final-submission
      :user-input="userInput"
      :shared-msg="sharedMsg"
      :show-reopen="!readOnly"
      v-if="isFinalOrReadOnly"
      @reopen="$emit('reopen')"/>
  </div>
</template>

<script>
  import SubmissionInput from '@/components/content-blocks/assignment/SubmissionInput';
  import FinalSubmission from '@/components/content-blocks/assignment/FinalSubmission';
  import SimpleFileUpload from '@/components/SimpleFileUpload';
  import DocumentBlock from '@/components/content-blocks/DocumentBlock';

  export default {
    props: {
      userInput: Object,
      saved: Boolean,
      placeholder: String,
      action: String,
      reopen: Function,
      document: String,
      readOnly: {
        type: Boolean,
        default: false
      },
      spellcheck: {
        type: Boolean,
        default: false
      },
      spellcheckLoading: {
        type: Boolean,
        default: false
      },
      sharedMsg: String
    },

    components: {
      SubmissionInput,
      FinalSubmission,
      SimpleFileUpload,
      DocumentBlock
    },

    computed: {
      final() {
        return !!this.userInput && this.userInput.final;
      },
      isFinalOrReadOnly() {
        return this.final || this.readOnly;
      },
      allowsDocuments() {
        return 'document' in this.userInput;
      },
      showSpellcheckButton() {
        return this.spellcheck && process.env.VUE_APP_ENABLE_SPELLCHECK;
      },
      spellcheckText() {
        if (!this.spellcheckLoading) {
          return 'Rechtschreibung prüfen';
        } else {
          return 'Wird geprüft...';
        }
      }
    },

    methods: {
      reopenSubmission() {
        this.$emit('reopen');
      },
      saveInput(input) {
        this.$emit('saveInput', input);
      },
      changeDocumentUrl(documentUrl) {
        this.$emit('changeDocumentUrl', documentUrl);
      }
    },

  };
</script>

<style scoped lang="scss">
  @import '~styles/helpers';

  .submission-form-container {

    @include input-box-shadow;
    background-color: $color-white;
    border-radius: $input-border-radius;
    border: 1px solid $color-silver;
    padding: $medium-spacing;
    margin-bottom: $medium-spacing;

    &__inputs {
      margin-bottom: 12px;
    }

    &__submit {
      margin-right: $medium-spacing;
    }

    &__actions {
      display: flex;
      align-items: center;
    }

    &__document {
      &:hover {
        cursor: pointer;
      }
    }

    &__spellcheck {
      /* so the button does not change size when changing the text */
      width: 235px;
      text-align: center;
      display: inline-block;
    }
  }

</style>