AnnotatedSubmissionBottomToolbar.vue

<!-- TODO: remove inline stylings -->

<template>
  <v-container class="bottom-container">
    <v-layout wrap>
      <v-flex sm4 md4 lg2>
        <v-tooltip top v-if="skippable">
          <v-btn slot="activator" outline round
          id="skip-submission"
          color="grey darken-2"
          @click="skipSubmission">Skip</v-btn>
          <span>Skip this submission</span>
        </v-tooltip>
        <v-spacer />
      </v-flex>
      <v-flex>
        <v-layout wrap class="score-submit-container">
          <v-flex xs5 class="score-flex">
            <span class="mr-2">Score:</span>
            <input class="score-text-field"
            id="score-input"
            type="number"
            step="0.5"
            v-model="score"
            @input="validateScore"
            @change="validateScore" />
            <span>&nbsp;/ {{fullScore}}</span>
            <v-btn outline round flat
            id="score-zero"
            class="score-button"
            @click="score=0"
            color="red lighten-1">0
            </v-btn>
            <v-btn outline round flat
            id="score-full"
            @click="score=fullScore"
            color="blue darken-3"
            class="score-button">{{fullScore}}
            </v-btn>
          </v-flex>
          <v-flex class="submit-flex" xs3 sm3>
            <v-layout>
              <v-flex xs4>
                <v-tooltip top v-if="showFinalCheckbox">
                  <v-toolbar-items class="final-container"
                  slot="activator">
                    <label>Final</label>
                    <v-checkbox slot="activator"
                    v-model="isFinal"
                    class="final-checkbox" />
                  </v-toolbar-items>
                  <span>If unchecked this submission will be marked for review by the lecturer</span>
                </v-tooltip>
              </v-flex>
              <v-flex xs>
                <v-tooltip top>
                  <v-btn color="success"
                  id="submit-feedback"
                  slot="activator"
                  :loading="loading"
                  @click="submit">Submit
                    <v-icon>chevron_right</v-icon>
                  </v-btn>
                  <span>Submit and continue</span>
                </v-tooltip>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-layout>
      </v-flex>
      <v-flex v-if="scoreError">
        <v-alert class="score-alert ma-3"
        color="error"
        icon="warning"
        :value="scoreError">{{ scoreError }}</v-alert>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import { SubmissionNotes } from '@/store/modules/submission-notes'
import { Authentication } from '@/store/modules/authentication'
import { Subscriptions } from '@/store/modules/subscriptions'

export default {
  name: 'annotated-submission-bottom-toolbar',
  data () {
    return {
      scoreError: '',
      isFinal: this.initialFinalStatus()
    }
  },
  props: {
    fullScore: {
      type: Number,
      required: true
    },
    loading: {
      type: Boolean,
      required: true
    },
    skippable: {
      type: Boolean,
      default: false
    },
    feedback: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    score: {
      get: function () {
        return SubmissionNotes.score
      },
      set: function (score) {
        SubmissionNotes.UPDATE_FEEDBACK_SCORE(Number(score))
      }
    },
    showFinalCheckbox () {
      return !SubmissionNotes.isFeedbackCreation || Authentication.isReviewer
    }
  },
  watch: {
    feedback: {
      handler: function (val) {
        this.isFinal = this.initialFinalStatus()
      },
      deep: true
    }
  },
  methods: {
    initialFinalStatus () {
      if (this.$route.name === 'subscription') {
        return !SubmissionNotes.isFeedbackCreation || Authentication.isReviewer
      } else {
        if (this.feedback.hasOwnProperty('isFinal')) {
          return this.feedback.isFinal
        } else {
          return !SubmissionNotes.isFeedbackCreation || Authentication.isReviewer
        }
      }
    },
    emitScoreError (error, duration) {
      this.scoreError = error
      setTimeout(() => { this.scoreError = '' }, duration)
    },
    validateScore () {
      if (this.score < 0) {
        this.score = 0
        this.emitScoreError('Score must be 0 or greater.', 2000)
      } else if (this.score > this.fullScore) {
        this.score = this.fullScore
        this.emitScoreError(`Score must be less or equal to ${this.fullScore}`, 2000)
      } else {
        return true
      }
      return false
    },
    submit () {
      this.$emit('submitFeedback', { isFinal: this.isFinal })
    },
    skipSubmission () {
      if (this.skippable) {
        Subscriptions.skipAssignment().catch(() => {
          this.$notify({
            title: 'Unable to skip submission',
            type: 'error'
          })
        })
      } else {
        throw new Error("Can't skip submission when skippable is false for AnnotatedSubmissionBottomToolbar.")
      }
    }
  }
}
</script>

<style scoped>
  .bottom-container {
    padding: 0px;
  }
  .bottom-toolbar {
    font-size: large;
  }
  .score-text-field {
    max-width: 50px;
    box-sizing: border-box;
    border: 1px solid grey;
    border-radius: 2px;
    padding: 3px;
  }
  .score-alert {
    max-height: 40px;
  }
  .score-button {
    min-width: 0px;
  }
  .final-container {
    margin-top: 15px;
    height: 10px;
  }
  .final-checkbox {
    margin-left: 10px;
    padding-top: 0;
    margin-top: 0;
  }
  .submit-flex {
    min-width: 190px;
    margin-left: 10px;
  }
  .score-flex {
    margin-left: 10px;
    min-width: 250px;

  }
  .score-submit-container {
    justify-content: space-between;
  }
</style>