ChargEco/Strides-Admin/src/views/financial/CreditAmendment.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-view">
        <el-date-picker
          v-model="filters.pageCriteria.dateRange"
          type="daterange"
          value-format="yyyy-MM-dd"
          start-placeholder="Start Date"
          end-placeholder="End Date"
          clearable
          class="filter-view-item"
          @change="toSearch"/>
        <el-select
          class="filter-view-item"
          v-model="filters.pageCriteria.creditActionType"
          placeholder="Credit Action"
          @change="toSearch"
          clearable>
          <el-option
            v-for="item in options.action"
            :key="item"
            :label="item"
            :value="item" />
        </el-select>
        <el-select
          class="filter-view-item"
          v-model="filters.pageCriteria.creditActionStatus"
          placeholder="Status"
          @change="toSearch"
          clearable>
          <el-option
            v-for="item in options.status"
            :key="item"
            :label="item"
            :value="item" />
        </el-select>
        <el-input
          v-model="filters.pageCriteria.criteria"
          placeholder="E-mail, Request ID"
          prefix-icon="el-icon-search"
          style="max-width: 300px;"
          @change="toSearch"
          @keyup.enter.native="toSearch"
          clearable/>
        <div class="filter-flex-button">
          <el-button
            type="primary"
            @click="onClickAdd"
            v-if="!$route.meta.onlyView">
            Amend Credit
          </el-button>
        </div>
      </div>
    </div>
    <el-table
      v-loading="table.loading"
      :data="table.list">
      <el-table-column
        align="center"
        label="Request ID"
        prop="entityName"
        min-width="170">
        <template slot-scope="{row}">
          <div
            class="link-type"
            @click="onClickEdit(row)">
            {{row.creditActionId}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="User E-mail"
        prop="userEmail"
        min-width="150"/>
      <el-table-column
        align="center"
        label="Current Balance"
        prop="currentBalance"
        min-width="150"/>
      <el-table-column
        align="center"
        label="Credit Action"
        prop="creditActionType"
        min-width="150"/>
      <el-table-column
        align="center"
        label="Amount"
        prop="creditActionAmount"
        min-width="150"/>
      <el-table-column
        align="center"
        label="Remarks"
        prop="creditActionRemarks"
        min-width="150"/>
      <el-table-column
        align="center"
        label="Status"
        prop="creditActionStatus"
        min-width="150">
        <template slot-scope="{row}">
          <div
            :class="'action-status ' + row.creditActionStatus"
            @click="onClickEdit(row)">
            {{row.creditActionStatus}}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="right">
      <pagination
        v-show="table.total > 0"
        :total="table.total"
        :page.sync="filters.pageNum"
        :limit.sync="filters.pageSize"
        @pagination="getTableData" />
    </div>
    <CreditActionDialog
      v-bind="dialog"
      @hide="hideDialog"/>
  </div>
</template>

<script>
import financial from '@/http/api/financial';
import Pagination from '@/components/Pagination';
import CreditActionDialog from './CreditActionDialog.vue';
export default {
  data() {
    return {
      filters: {
        pageNum: 1,
        pageSize: 10,
        pageCriteria: {
          criteria: "",
          dateRange: [],
          creditActionType: "",
          creditActionStatus: ""
        }
      },
      table: {
        list: [],
        total: 0,
        loading: false
      },
      options: {
        action: [],
        status: []
      },
      dialog: {
        visible: false,
        request: ""
      }
    };
  },
  components: {Pagination, CreditActionDialog},
  created() {
    this.getActionOptions();
    this.getStatusOptions();
    this.toSearch();
  },
  methods: {
    toSearch() {
      this.filters.pageNum = 1
      this.getTableData()
    },
    getActionOptions() {
      financial.getCreditActionTypeOptions().then(res => {
        if (res.data) {
          this.options.action = res.data
        } else {
          this.options.action = []
        }
      }).catch(err => {
        this.$message({
          message: err,
          type: 'error'
        })
        this.options.action = []
      })
    },
    getStatusOptions() {
      financial.getCreditStatusOptions().then(res => {
        if (res.data) {
          this.options.status = res.data
        } else {
          this.options.status = []
        }
      }).catch(err => {
        this.$message({
          message: err,
          type: 'error'
        })
        this.options.status = []
      })
    },
    getTableData() {
      this.table.loading = true;
      financial.getCreaitActionPages(this.filters).then(res => {
        if (res.data.totalRow && res.data.records) {
          this.table.total = res.data.totalRow;
          this.table.list = res.data.records;
        } else {
          this.table.total = 0;
          this.table.list = [];
        }
      }).catch(err => {
        this.$message({
          type: 'error',
          message: err
        })
        this.table.total = 0;
        this.table.list = [];
      }).finally(() => {
        this.table.loading = false;
      })
    },
    onClickAdd() {
      this.dialog.request = "";
      this.dialog.visible = true;
    },
    onClickEdit(row) {
      this.dialog.request = row.creditActionId;
      this.dialog.visible = true;
    },
    hideDialog(e) {
      this.dialog.request = "";
      this.dialog.visible = false;
      if (e) {
        this.toSearch();
      }
    }
  }
}
</script>

<style scoped>
.action-status {
  color: #F8A300;
  font-size: 13px;
  cursor: pointer;
  display: inline-block;
  text-decoration: underline;
}
.action-status.Approved {
 color: #1ABD00;
}
.action-status.Rejected {
  color: #ED3F3F;
}
</style>