FileMaster

Edit File: Dashboard.vue

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

<div v-show="fetched && fetchedUserInfo">

<div class="am-sms-dashboard-header">

<div class="am-sms-logo">
          <img :src="$root.getUrl + 'public/img/amelia-sms.svg'"/> {{ $root.labels.amelia_sms }}
        </div>

<div class="am-sms-loggedin-user">

<div>
            <span>{{ $root.labels.user_colon }}</span>
            <p class="am-sms-user-email">{{ user.email }}</p>
          </div>

<el-button type="default" size="small" @click="navigationActive = 'user'">
            {{ $root.labels.view_profile }}
          </el-button>

</div>

<div class="am-sms-balance">

<img v-show="documentWidth > largeMax" :src="$root.getUrl + 'public/img/sms-balance.svg'"/>

<div>
            <span>{{ $root.labels.balance_colon }}</span>
            <p class="am-sms-user-email">${{ user.balance }}</p>
          </div>

<el-button type="primary" size="small" @click="dialogRechargeBalance = true">
            {{ $root.labels.recharge_balance }}
          </el-button>

</div>

</div>

<div class="am-sms-dashboard-body">

<div class="am-sms-dashboard-nav">

<div
              class="am-sms-dashboard-nav-item"
              :class="[ navigationActive === 'history' ? 'active' : '' ]"
              @click="navigationActive = 'history'"
          >
            {{ $root.labels.sms_history }}
          </div>

<div
              class="am-sms-dashboard-nav-item"
              :class="[ navigationActive === 'customize' ? 'active' : '' ]"
              @click="navigationActive = 'customize'"
          >
            {{ $root.labels.customize_sms }}
          </div>

<div
              class="am-sms-dashboard-nav-item"
              :class="[ navigationActive === 'pricing' ? 'active' : '' ]"
              @click="navigationActive = 'pricing'"
          >
            {{ $root.labels.pricing }}
          </div>

<div
              class="am-sms-dashboard-nav-item"
              :class="[ navigationActive === 'payments' ? 'active' : '' ]"
              @click="navigationActive = 'payments'"
          >
            {{ $root.labels.payment_history }}
          </div>

<div
              class="am-sms-dashboard-nav-item"
              :class="[ navigationActive === 'user' ? 'active' : '' ]"
              @click="navigationActive = 'user'"
          >
            {{ $root.labels.user_profile }}
          </div>

</div>

<div
            class="am-sms-dashboard-content"
            :class="{ 'am-no-padding': navigationActive === 'customize', 'am-no-min-height': navigationActive === 'customize' }"
        >

<transition name="fadeIn">
            <history
                v-if="navigationActive === 'history'"
                :fetchedDashboard="fetched"
                @fetchedHistory="fetched = true"
            >
            </history>
          </transition>

<transition name="fadeIn">
            <customize-notifications
                v-if="navigationActive === 'customize'"
                :notifications="notifications"
                :categories="categories"
                :customFields="customFields"
                :coupons="coupons"
                :events="events"
                :user="user"
                type="sms"
                :pageUrl="getPageUrl()"
                :languagesData="languagesData"
                :passed-used-languages="passedUsedLanguages"
                @manageLanguages="manageLanguages()"
            ></customize-notifications>
          </transition>

<transition name="fadeIn">
            <pricing
                v-if="navigationActive === 'pricing'"
            >
            </pricing>
          </transition>

<transition name="fadeIn">
            <payments
                v-if="navigationActive === 'payments'"
            >
            </payments>
          </transition>

<transition name="fadeIn">
            <user-profile
                v-if="navigationActive === 'user'"
                :user="user"
                :notificationsSettings="notificationsSettings"
                @logout="logout"
            >
            </user-profile>
          </transition>

</div>

</div>

</div>

<transition name="slide">
      <el-dialog
          class="am-side-dialog am-dialog-sms-money"
          :visible.sync="dialogRechargeBalance"
          :show-close="false"
          v-if="dialogRechargeBalance"
      >
        <dialog-recharge-balance
            :user="user"
            @recharged="increaseBalance"
            @closeDialogRechargeBalance="dialogRechargeBalance = false"
        >
        </dialog-recharge-balance>
      </el-dialog>
    </transition>

</div>
</template>

export default {
    mixins: [durationMixin, notificationMixin, helperMixin, notifyMixin, responsiveMixin],

props: {
      categories: {
        default: () => [],
        type: Array
      },
      customFields: {
        default: () => [],
        type: Array
      },
      coupons: {
        default: () => [],
        type: Array
      },
      events: {
        default: () => [],
        type: Array
      },
      notifications: {
        default: () => [],
        type: Array
      },
      passedUsedLanguages: {
        default: () => [],
        type: Array
      },
      languagesData: {
        default: () => {},
        type: Object
      }
    },

data () {
      return {
        dialogRechargeBalance: false,
        fetched: false,
        fetchedUserInfo: false,
        navigationActive: 'history',
        notificationsSettings: {},
        paymentComplete: {
          amount: null,
          payerId: null,
          paymentId: null
        },
        user: {
          balance: 0,
          email: ''
        }
      }
    },

mounted () {
      let urlParams = this.getUrlQueryParams(window.location.href)

this.getSettings()

// If Reset Password URL is clicked and the user is already logged in remove URL params
      if ('notificationTab' in urlParams && 'token' in urlParams && 'email') {
        let redirectURL = this.removeURLParameter(window.location.href, 'notificationTab')
        redirectURL = this.removeURLParameter(redirectURL, 'token')
        redirectURL = this.removeURLParameter(redirectURL, 'email')
        history.pushState(null, null, redirectURL + '#/notifications')
      }

this.getUserInfo()
    },

methods: {
      getPageUrl () {
        return location.href.substring(0, location.href.lastIndexOf('?')).substring(0, location.href.substring(0, location.href.lastIndexOf('?')).lastIndexOf('/')) + '/'
      },

getSettings () {
        this.$http.get(
          `${this.$root.getAjaxUrl}/settings`
        ).then(response => {
          this.notificationsSettings = response.data.data.settings.notifications
        }).catch(e => {
          console.log(e.message)
          this.fetched = true
        })
      },

getUserInfo () {
        this.sendAmeliaSmsApiRequest('getUserInfo', this.onGetUserInfoSuccess, this.onGetUserInfoError)
      },

onGetUserInfoSuccess (data) {
        this.user = data.user
        this.user.balance = this.getFormattedMessagePrice(this.user.balance)
        this.fetchedUserInfo = true
      },

onGetUserInfoError () {
        this.$root.settings.notifications.smsSignedIn = false
      },

logout () {
        this.fetched = false

this.notificationsSettings.smsSignedIn = false
        this.notificationsSettings.smsApiToken = ''

this.$http.post(`${this.$root.getAjaxUrl}/settings`, {
          notifications: this.notificationsSettings
        }).then(() => {
          this.$root.settings.notifications.smsSignedIn = false
        }).catch(() => {
          this.$root.settings.notifications.smsSignedIn = false
        })
      },

increaseBalance (amount) {
        this.user.balance = this.getFormattedMessagePrice(parseFloat(this.user.balance.replace(',', '.')) + parseInt(amount))
        this.dialogRechargeBalance = false
      },

manageLanguages () {
        this.$emit('manageLanguages')
      }
    },

components: {
      History,
      CustomizeNotifications,
      Pricing,
      Payments,
      UserProfile,
      DialogRechargeBalance,
      quillEditor
    }
  }
</script>

Back