gistfile1.txt

// componente botão que exibe um data table com os detalhes do bulk send.
<template>
  <v-dialog v-model="bulkSendDialog" max-width="650px">
    <v-btn
      small
      class="mr-2"
      slot="activator"
      @click="requestBulkSendInformation(bulkSendId)"
    >
      {{ t('more_info') }}
    </v-btn>
    <v-card>
      <v-card-title>
            <span class="headline">
              <div class="mgov-medium">
                {{t('sends_status')}}
              </div>
            </span>
      </v-card-title>
      <article>
        <header>
          <v-card-text>
            <p>{{ t('bulk_send_info_text') }}.</p>
            <p style="color: red;">{{ t('bulk_send_info_text_status_rejected') }}.</p>
          </v-card-text>
        </header>
        <v-data-table
          :headers="headers"
          :items="list"
          :total-items="list.length"
          hide-actions
          v-if="list"
        >
          <template slot="items" slot-scope="props">
            <tr>
              <td> <span v-if="props.item.contactName">{{ uppercase(props.item.contactName) }}</span></td>
              <td> <span v-if="props.item.contactPhone"> {{ props.item.contactPhone }}</span></td>
              <td> {{ props.item.message }} </td>
              <td> <v-chip
                :color="getStatusColor(props.item.status)"
                text-color="white"
              >{{ getTranslatedStatus(uppercase(props.item.status)) }} </v-chip></td>
            </tr>
          </template>
        </v-data-table>
      </article>
    </v-card>
  </v-dialog>
</template>
<script>
  import FormatterMixin from '../mixins/formatter'
  export default {
    data () {
      return {
        bulkSendDialog: false,
        headers: [],
        list: []
      }
    },
    props: ['bulkSendId'],
    mixins: [FormatterMixin],
    mounted () {
      this.headers = [
        {text: this.t('mainContactName'), sortable: true},
        {text: this.t('phone'), sortable: false},
        {text: this.t('message'), sortable: false},
        {text: this.t('status'), sortable: true}
      ]
    },
    methods: {
      requestBulkSendInformation (bulkSendId) {
        this.$http.get(`${this.$store.getters.api_url}bulk_send/${bulkSendId}/sends/info`, {
          headers: {
            'Authorization': `Bearer ${this.$store.getters.token}`
          }
        }).then((response) => {
          this.$store.commit('addsBulkSendSends', response.body.sends)
          this.list = [...response.body.sends]
        }).then(function () {
          this.$emit('error')
        })
      },
      getStatusColor (status) {
        if (this.uppercase(status) === 'DELIVERED') {
          return '#28a745'
        }
        if (this.uppercase(status) === 'REJECTED') {
          return '#dc3545'
        }
        if (this.uppercase(status) === 'PENDING') {
          return '#ffc107'
        }
      },
      getTranslatedStatus (status) {
        if (this.uppercase(status) === 'DELIVERED') {
          return this.t('status_sent')
        }
        if (this.uppercase(status) === 'REJECTED') {
          return this.t('status_rejected')
        }
        if (this.uppercase(status) === 'PENDING') {
          return this.t('status_pending')
        }
      }
    }
  }
</script>