SEECBC/FrontEnd/components/learning/ExerciseRecords.vue

<template>
  <v-card outlined flat>
    <v-simple-table>
      <caption class="title pa-4">
        {{
          $t('learning.exercise.record.title')
        }}
      </caption>
      <thead>
        <tr>
          <th>
            <strong class="body-1">{{ $t('learning.exercise.record.commitDate') }}</strong>
          </th>
          <th>
            <strong class="body-1">{{ $t('learning.exercise.record.score') }}</strong>
          </th>
          <th />
        </tr>
      </thead>

      <tbody>
        <tr v-if="commitTime === 0">
          <td colspan="3" class="text-center body-1 grey--text">
            {{ $t('learning.exercise.record.noCommitMsg') }}
          </td>
        </tr>
        <tr v-for="r in records" :key="r.id">
          <td>{{ r.commitDate }}</td>
          <td>{{ r.score }}</td>
          <td>
            <!-- link to detail page of which the route is 'learning/:chapter/:level/exercise/detail?recordId=id' -->
            <v-btn
              text
              :to="{ path: 'record-detail', query: { recordId: r.id } }"
              nuxt
              append
              color="primary"
            >
              {{ $t('learning.exercise.record.seeDetail') }}
            </v-btn>
          </td>
        </tr>
      </tbody>
    </v-simple-table>
    <v-divider />
    <div class="pa-4 body-1 primary--text">
      {{
        $t('learning.exercise.record.commitTime', { commitTime: commitTime, total: commitLimit })
      }}
    </div>
  </v-card>
</template>

<script lang="ts">
import Vue, { PropOptions } from 'vue'
import { CommitRecord } from './types'

export default Vue.extend({
  props: {
    records: {
      type: Array,
      default: [] as CommitRecord[]
    } as PropOptions<CommitRecord[]>,
    commitLimit: {
      type: Number,
      default: 0
    }
  },
  computed: {
    commitTime(): number {
      return this.records.length || 0
    }
  }
})
</script>

<style scoped></style>