FileMaster

Edit File: History.vue

<h2>{{ $root.labels.sms_history }}</h2>

<v-date-picker
        @input="filterData"
        v-model="params.dates"
        :is-double-paned="false"
        mode='range'
        popover-visibility="focus"
        popover-direction="bottom"
        tint-color='#1A84EE'
        :show-day-popover=false
        :input-props='{class: "el-input__inner"}'
        :is-expanded=false
        :is-required=true
        input-class="el-input__inner"
        :formats="vCalendarFormats"
    >
    </v-date-picker>

<div class="am-spinner am-section" v-if="!fetched">
      <img :src="$root.getUrl + 'public/img/spinner.svg'"/>
    </div>

<div class="am-sms-history-list" v-if="fetched && notifications.length > 0">

<div class="am-sms-history-list-head">
        <el-row>

<el-col :lg="3"><p>{{ $root.labels.date_colon }}</p></el-col>

<el-col :lg="2"><p>{{ $root.labels.time_colon }}</p></el-col>

<el-col :lg="4"><p>{{ $root.labels.phone_colon }}</p></el-col>

<el-col :lg="4"><p>{{ $root.labels.user_colon }}</p></el-col>

<el-col :lg="2"><p>{{ $root.labels.cost_colon }}</p></el-col>

<el-col :lg="3"><p>{{ $root.labels.segments_colon }}</p></el-col>

<el-col :lg="3"><p>{{ $root.labels.status_colon }}</p></el-col>

<el-col :lg="3"><p>{{ $root.labels.text_colon }}</p></el-col>

</el-row>
      </div>

<div class="am-sms-history-list-body">
        <el-collapse>
          <el-collapse-item
              v-for="notification in notifications"
              :key="notification.id"
              :name="notification.id"
              class="am-sms-message"
              :class="{ 'am-sms-message-failed': notification.status === 'failed', 'am-sms-message-queued': ['queued', 'loading'].includes(notification.status) || (['delivered', 'undelivered', 'sent'].includes(notification.status) && !notification.price)}"
          >

<template slot="title">
              <el-row class="am-sms-history-data" :gutter="10">

<el-col :lg="3" :md="8" :sm="12" :xs="12">
                  <p class="am-col-title">{{ $root.labels.date_colon }}</p>
                  <span>{{ getFrontedFormattedDate(notification.dateTime) }}</span>
                </el-col>

<el-col :lg="2" :md="8" :sm="12" :xs="12">
                  <p class="am-col-title">{{ $root.labels.time_colon }}</p>
                  <span>{{ getFrontedFormattedTimeFromDateTimeString(notification.dateTime) }}</span>
                </el-col>

<el-col :lg="4" :md="8" :sm="12" :xs="12">
                  <p class="am-col-title">{{ $root.labels.phone_colon }}</p>
                  <span class="am-three-dots">{{ notification.phone }}</span>
                </el-col>

<el-col :lg="4" :md="8" :sm="12" :xs="12">
                  <p class="am-col-title">{{ $root.labels.user_colon }}</p>
                  <span class="am-three-dots">{{ notification.userFullName }}</span>
                </el-col>

<el-col :lg="2" :md="8" :sm="12" :xs="12">
                  <p class="am-col-title">{{ $root.labels.cost_colon }}</p>
                  <span>{{ notification.price ? '$' + getFormattedMessagePrice(notification.price, false) : '-' }}</span>
                  <el-tooltip
                      placement="top"
                      v-if="['delivered', 'undelivered', 'sent'].includes(notification.status) && !notification.price && refreshSMSHistory.logId === null"
                  >
                    <div slot="content" v-html="$root.labels.refresh"></div>
                    <i class="el-icon-refresh am-tooltip-icon"
                       @click.stop
                       @click="refreshHistoryRow(notification)"
                    ></i>
                  </el-tooltip>
                </el-col>

<el-col :lg="3" :md="8" :sm="12" :xs="12">
                  <p class="am-col-title">{{ $root.labels.segments_colon }}</p>
                  <span>{{ notification.segments ? notification.segments : '-' }}</span>
                </el-col>

<el-col :lg="3" :md="8" :sm="12" :xs="12">
                  <p class="am-col-title">{{ $root.labels.status_colon }}</p>
                  <span>{{ $root.labels[notification.status] }}</span>
                  <el-tooltip
                      placement="top"
                      v-if="notification.status === 'queued' && refreshSMSHistory.logId === null"
                  >
                    <div slot="content" v-html="$root.labels.refresh"></div>
                    <i class="el-icon-refresh am-tooltip-icon"
                       @click.stop
                       @click="refreshHistoryRow(notification)"
                    ></i>
                  </el-tooltip>
                </el-col>

<el-col :lg="3" :md="8">
                  <p class="am-col-title">&nbsp;</p>
                  <span class="am-link">
                    <img :src="$root.getUrl + 'public/img/sms-message.svg'"/> {{ documentWidth > xLargeMax || documentWidth < largeMin  ? $root.labels.view_message : $root.labels.view }}
                  </span>
                </el-col>

</el-row>

</template>

<div class="am-sms-message-text">
              <el-input v-model="notification.text" type="textarea" :rows="7" placeholder=""></el-input>
            </div>

</el-collapse-item>
        </el-collapse>
      </div>

<pagination-block
          :params="params"
          :count="options.countFiltered"
          :label="$root.labels.messages_lower"
          :visible="fetched && notifications.length !== 0"
          @change="getHistory"
      >
      </pagination-block>

</div>

<div class="am-empty-state am-section" v-show="fetched && notifications.length === 0">
      <img :src="$root.getUrl + 'public/img/emptystate.svg'"/>
      <p>{{ $root.labels.no_results }}</p>
    </div>

</div>
</template>
<script>
  import moment from 'moment'
  import Form from 'form-object'
  import dateMixin from '../../../../../js/common/mixins/dateMixin'
  import PaginationBlock from '../../../parts/PaginationBlock.vue'
  import notificationMixin from '../../../../../js/backend/mixins/notificationMixin'
  import responsiveMixin from '../../../../../js/common/mixins/responsiveMixin'
  import imageMixin from '../../../../../js/common/mixins/imageMixin'

export default {
    mixins: [dateMixin, notificationMixin, responsiveMixin, imageMixin],

props: {
      fetchedDashboard: {
        type: Boolean,
        default: false
      }
    },

data () {
      return {
        fetched: false,
        form: new Form(),
        notifications: [],
        options: {
          countFiltered: 0
        },
        params: {
          dates: this.getDatePickerNegativeInitRange(),
          page: 1
        },
        refreshSMSHistory: {
          logId: null,
          historyId: null
        }
      }
    },

created () {
      Form.defaults.axios = this.$http
    },

mounted () {
      this.getHistory()
    },

methods: {
      filterData () {
        this.params.page = 1
        this.getHistory()
      },

getHistory () {
        this.fetched = false

let params = JSON.parse(JSON.stringify(this.params))
        let dates = []

if (params.dates) {
          if (params.dates.start) {
            dates.push(moment(params.dates.start).format('YYYY-MM-DD'))
          }

if (params.dates.end) {
            dates.push(moment(params.dates.end).format('YYYY-MM-DD'))
          }

params.dates = dates
        }

Object.keys(params).forEach((key) => (!params[key] && params[key] !== 0) && delete params[key])

this.$http.get(`${this.$root.getAjaxUrl}/notifications/sms/history`, {
          params: this.getAppropriateUrlParams(params)
        }).then(response => {
          this.notifications = response.data.data.notifications
          this.options.countFiltered = response.data.data.countFiltered
          this.fetched = true
          this.$emit('fetchedHistory')
        }).catch(e => {
          console.log(e.message)
          this.fetched = true
        })
      },

refreshHistoryRow (notification) {
        this.refreshSMSHistory.logId = notification.logId
        this.refreshSMSHistory.historyId = notification.id
        notification.status = 'loading'
        this.sendAmeliaSmsApiRequest('refreshSMSHistory', this.onRefreshHistoryRowSuccess, this.onRefreshHistoryRowError)
      },

onRefreshHistoryRowSuccess (data) {
        this.form.post(
          `${this.$root.getAjaxUrl}/notifications/sms/history/${this.refreshSMSHistory.historyId}`, data.message
        ).then(() => {
          let notification = this.notifications.find(notification => notification.id === this.refreshSMSHistory.historyId)
          notification.status = data.message.status
          notification.price = data.message.price
          this.refreshSMSHistory = {
            logId: null,
            historyId: null
          }
        }).catch(() => {
          this.refreshSMSHistory = {
            logId: null,
            historyId: null
          }
        })
      },

onRefreshHistoryRowError (data) {
        console.log('error')
        console.log(data)
      }
    },

components: {
      PaginationBlock
    }
  }
</script>

Back