exchange/resources/assets/js/components/LocaleDropdown.vue

<template>
<div>
  <ul class="nav navbar-nav">
    <!-- <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" role="button"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        {{ locales[locale] }}
      </a>
      <div class="dropdown-menu">
        <a v-for="(value, key) in locales" :key="key" class="dropdown-item" href="#"
          @click.prevent="setLocale(key)">
          {{ value }}
        </a>
      </div>
    </li> -->
    <ul class="navbar-nav">
      <li v-if="(user && role == 'admin')" class="nav-item">
        <el-popover placement="top" width="300" v-model="UpdateRatePopoverVisible">
            <div align="center">
              <p>Today's Rate</p>
              <p>X1 : Cash: {{rate.x1_cash}} Cheque: {{rate.x1_cheque}} BA: {{rate.x1_ba}}</p>
              <p>X2 : Cash: {{rate.x2_cash}} Cheque: {{rate.x2_cheque}} BA: {{rate.x2_ba}}</p>
            </div>
            <div style="text-align: center; margin: 0">
              <el-button type="primary" size="mini" @click="UpdateRatePopoverVisible = false; UpdateRateDialogVisible = true">Update rate</el-button>
            </div>
            <a class="nav-link" href="#" role="button" slot="reference">Update Rate</a>
        </el-popover>
      </li>
    </ul>
      <li v-if="(user && role == 'admin')" class="nav-item">
        <router-link :to="{ name: 'admin.transaction-history' }" class="nav-link">
          {{ $t('Transaction History') }}
        </router-link>
      </li>
      <!-- TODO: remove entirely including controller and routes <li v-if="(user && role == 'admin')" class="nav-item">
        <router-link :to="{ name: 'admin.complete' }" class="nav-link">
          {{ $t('Completed Orders') }}
        </router-link>
      </li> -->
  </ul>
<!-- update rate dialog start -->
 <el-dialog align="center" :visible.sync="UpdateRateDialogVisible" width="900px">
    <el-form :inline="true" align="center" ref="rate" :model="rate" :rules="rules">

        <el-form-item prop="x1_cash" >X1: &nbsp;&nbsp;&nbsp;Cash : <el-input v-model="rate.x1_cash" style=width:60% ></el-input></el-form-item>
        <el-form-item prop="x1_cheque" >Cheque : <el-input  v-model="rate.x1_cheque" style=width:60%></el-input></el-form-item>
        <el-form-item prop="x1_ba">BA : <el-input v-model="rate.x1_ba" style=width:60%></el-input></el-form-item>
        <br>
        <el-form-item prop="x2_cash" >X2: &nbsp;&nbsp;&nbsp;Cash : <el-input  v-model="rate.x2_cash" style=width:60% ></el-input></el-form-item>
        <el-form-item prop="x2_cheque" >Cheque : <el-input  v-model="rate.x2_cheque" style=width:60%></el-input></el-form-item>
        <el-form-item prop="x2_ba" >BA : <el-input  v-model="rate.x2_ba" style=width:60%></el-input></el-form-item>
    </el-form>
    <br>
    <div align="center">
        <el-button type="text" @click="UpdateRateDialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="updateRate('rate'); UpdateRateDialogVisible = false; DoneUpdateRateDialogVisible = true" >Save</el-button>
    </div>
  </el-dialog> 
<!-- update rate dialog done -->

  <el-dialog align="center" :visible.sync="DoneUpdateRateDialogVisible" width="30%">
    <span>Rate Successfully Updated</span><br><br>
    <div align="center">
        <el-button type="primary" @click="DoneUpdateRateDialogVisible = false">OK</el-button>
    </div>
  </el-dialog>
<!-- update rate dialog done end -->
 </div> 
</template>

<script>
import { mapGetters } from 'vuex'
import { loadMessages } from '~/plugins/i18n'
import axios from 'axios'

export default {
  data() {
    return {
        UpdateRatePopoverVisible: false,
        UpdateRateDialogVisible: false,
        DoneUpdateRateDialogVisible: false,
        rate: {
          x1_ba: null,
          x1_cheque: null,
          x1_cash: null,
          x2_ba: null,
          x2_cash: null,
          x2_cheque: null,
        },
      rules: {
        x1_cash: [
          { required: true, message: 'Please input rate for X1 Cash', trigger: 'change'},
         ],
        x1_cheque: [
          { required: true, message: 'Please input rate for X1 Cheque', trigger: 'change'},
          ],
        x1_ba: [
          { required: true, message: 'Please input rate for X1 BA', trigger: 'change'},
        ],
        x2_cash: [
          { required: true, message: 'Please input rate for X2 Cash', trigger: 'change'},
          ],
        x2_cheque: [
          { required: true, message: 'Please input rate for X2 Cheque', trigger: 'change'},
          ],
        x2_ba: [
          { required: true, message: 'Please input rate for X2 BA', trigger: 'change'},
        ]
       }
      }
  },
  computed: mapGetters({
    locale: 'lang/locale',
    locales: 'lang/locales',
    user: 'auth/user',
    role: 'auth/role'
  }),
  mounted () {
    this.getRate();
  },
  methods: {
    setLocale (locale) {
      if (this.$i18n.locale !== locale) {
        loadMessages(locale)

        this.$store.dispatch('lang/setLocale', { locale })
      }
    },
    getRate() {
      let $this = this
      axios.get('/api/rate').then(response => {
        this.rate = response.data
      })
    },
    createRate: function () { // TODO : we do not have create rate, only update rate. Delete this ? 
      this.loading = true,
      this.dialogFormVisible1 = true
          let newRate = {
            x1_cash: this.rateForm.x1_cash,
            x1_cheque: this.rateForm.x1_cheque,
            x1_ba: this.rateForm.x1_ba,
            x2_cash: this.rateForm.x2_cash,
            x2_cheque: this.rateForm.x2_cheque,
            x2_ba: this.rateForm.x2_ba
          }

          axios.post('/api/update-rate', newRate)
            .then((response) => {
              this.loading = false
              this.rate = response.data
            })
            .catch((error) => {
              console.log(error)
              this.loading = false
              this.$message({
                showClose: true,
                message: 'Error : All rate must be inserted',
                type: 'error',
                duration: 10000
              })
            })        
    },

    updateRate(formName) {
        this.loading = true
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let newRate = {
            x1_cash: this.rate.x1_cash,
            x1_cheque: this.rate.x1_cheque,
            x1_ba: this.rate.x1_ba,
            x2_cash: this.rate.x2_cash,
            x2_cheque: this.rate.x2_cheque,
            x2_ba: this.rate.x2_ba,
            }

            axios.post('/api/update-rate', newRate)
            .then((response) => {
              this.loading = false
              this.rate = response.data

            })
            .catch((error) => {
              this.loading = false
              this.$message({
                showClose: true,
                message: 'Error : All rate must be inserted',
                type: 'error',
                duration: 10000
              })
            })
          } else {
            this.loading = false
            DoneUpdateRateDialogVisible = false
            UpdateRateDialogVisible = true
            this.$message({
                  showClose: true,
                  message: 'Please fill the form',
                  type: 'error',
                  duration: 10000
                })
           }
        })

      },

  }
   
}
</script>