doccano/frontend/components/containers/annotation/ApproveButton.vue

<template>
  <v-tooltip bottom>
    <template v-slot:activator="{ on }">
      <v-btn
        v-shortkey.once="['enter']"
        :disabled="disabled"
        class="text-capitalize ps-1 pe-1"
        min-width="36"
        outlined
        v-on="on"
        @shortkey="approveNextPage"
        @click="approveDocument"
      >
        <v-icon v-if="approved">
          mdi-check
        </v-icon>
        <v-icon v-else>
          mdi-close
        </v-icon>
      </v-btn>
    </template>
    <span v-if="approved">{{ $t('annotation.checkedTooltip') }}</span>
    <span v-else>{{ $t('annotation.notCheckedTooltip') }}</span>
  </v-tooltip>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  props: {
    approved: {
      type: Boolean,
      default: false,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: Number,
      default: 1,
      required: true
    },
    length: {
      type: Number,
      default: 1,
      required: true
    }
  },

  methods: {
    ...mapActions('documents', ['approve']),
    approveDocument() {
      this.approve({
        projectId: this.$route.params.id
      })
    },
    /** Approves document and moves to the next page */
    approveNextPage() {
      const page = Math.min(this.value + 1, this.length)
      this.$emit('input', page)
      this.approveDocument()
    }
  }
}
</script>