<commit_before><template lang="pug">
  v-badge(v-if="isTranslating" v-model="isTranslating" left :color="color" class="translatable")
    v-icon(dark slot="badge" @click.capture.prevent="translate(i18n)") mode_edit
    slot
  div(v-else)
    slot
</template>

<script>
  import {
    mapMutations,
    mapState
  } from 'vuex'

  export default {
    name: 'Translatable',

    inheritAttrs: false,

    props: {
      i18n: {
        type: String,
        required: true
      }
    },

    computed: {
      ...mapState('translation', ['buttons', 'isTranslating']),
      status () {
        const state = this.buttons.find(b => b.key === this.i18n)
        return state ? state.status : 'unchanged'
      },
      color () {
        switch (this.status) {
          case 'updated': return 'warning'
          case 'missing': return 'error'
          case 'new': return 'success'
          default: return 'grey'
        }
      },
      locale () {
        return this.$i18n.locale
      }
    },
    watch: {
      value: {
        handler: 'fetchStatus',
        immediate: true
      },
      locale: {
        handler: 'fetchStatus'
      }
    },
    created () {
      this.isTranslating && this.registerBtn({ key: this.i18n, status: 'unchanged' })
    },
    beforeDestroy () {
      this.isTranslating && this.unregisterBtn({ key: this.i18n })
    },
    methods: {
      ...mapMutations('translation', {
        translate: 'TRANSLATE',
        registerBtn: 'REGISTER_BTN',
        unregisterBtn: 'UNREGISTER_BTN',
        updateBtn: 'UPDATE_BTN'
      }),
      async fetchStatus () {
        if (!this.isTranslating || this.i18n.length <= 0) return

        try {
          const msg = { locale: this.locale, key: this.i18n }
          const response = await this.$store.dispatch('translation/status', msg)

          if (response.status === 200 && response.data.status) {
            let status = response.data.status

            this.updateBtn({ key: this.i18n, status })
          }
        } catch (err) {
          // console.log(err)
          throw err
        }
      }
    }
  }
</script>

<style lang="stylus">
  .translatable
    cursor: pointer
</style>
<commit_msg>fix(translatable): fix 500 on build<commit_after><template lang="pug">
  v-badge(v-if="isTranslating" v-model="isTranslating" left :color="color" class="translatable")
    v-icon(dark slot="badge" @click.capture.prevent="translate(i18n)") mode_edit
    slot
  div(v-else)
    slot
</template>

<script>
  import {
    mapMutations,
    mapState
  } from 'vuex'

  export default {
    name: 'Translatable',

    inheritAttrs: false,

    props: {
      i18n: {
        type: String,
        required: true
      }
    },

    computed: {
      ...mapState('translation', ['buttons']),
      // $store becomes undefined when built
      isTranslating () {
        if (!this.$store) return false

        return this.$store.state.translation.isTranslating
      },
      status () {
        const state = this.buttons.find(b => b.key === this.i18n)
        return state ? state.status : 'unchanged'
      },
      color () {
        switch (this.status) {
          case 'updated': return 'warning'
          case 'missing': return 'error'
          case 'new': return 'success'
          default: return 'grey'
        }
      },
      locale () {
        return this.$i18n.locale
      }
    },

    watch: {
      value: {
        handler: 'fetchStatus',
        immediate: true
      },
      locale: {
        handler: 'fetchStatus'
      }
    },
    created () {
      this.isTranslating && this.registerBtn({ key: this.i18n, status: 'unchanged' })
    },
    beforeDestroy () {
      this.isTranslating && this.unregisterBtn({ key: this.i18n })
    },
    methods: {
      ...mapMutations('translation', {
        translate: 'TRANSLATE',
        registerBtn: 'REGISTER_BTN',
        unregisterBtn: 'UNREGISTER_BTN',
        updateBtn: 'UPDATE_BTN'
      }),
      async fetchStatus () {
        if (!this.isTranslating || this.i18n.length <= 0) return

        try {
          const msg = { locale: this.locale, key: this.i18n }
          const response = await this.$store.dispatch('translation/status', msg)

          if (response.status === 200 && response.data.status) {
            let status = response.data.status

            this.updateBtn({ key: this.i18n, status })
          }
        } catch (err) {
          // console.log(err)
          throw err
        }
      }
    }
  }
</script>

<style lang="stylus">
  .translatable
    cursor: pointer
</style>

{'fraction_non_alphanumeric': 0.13922942206654992, 'fraction_numerical': 0.010288966725043782, 'mean_word_length': 1.9572815533980583, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5527551', 'n_tokens_mistral': 1456, 'n_tokens_neox': 1414, 'n_words': 297}