ChargEco/Strides-Admin/src/components/DialogAssignment.vue

<template>
  <el-dialog
    :title="title"
    :visible="visible"
    :before-close="onHide"
    custom-class="assign-dialog">
    <div class="filter-container filter-view">
      <el-select
        style="min-width: 70px; max-width: 120px;"
        clearable
        v-model="filter.pageVo.assignmentStatus"
        placeholder="Status"
        @change="onSearch">
        <el-option
          v-for="(item, index) in statusOptions"
          :key="index"
          :label="item"
          :value="item"/>
      </el-select>
      <div style="flex: 1; min-width: 150px; max-width: 300px;">
        <el-input
          clearable
          v-model="filter.pageVo.criteria"
          placeholder="Search by Site Name or Service Provider"
          @keyup.enter.native="onSearch"/>
      </div>
      <el-button
        type="primary"
        @click="onSearch">
        Search
      </el-button>
    </div>
    <div class="assign-table-actions" v-if="isGroupAssign || isDyRateAssign">
      <el-button
        type="danger"
        :disabled="selectRow.length == 0"
        :loading="loading.unassign"
        @click="onClickUnassign">
        Batch Un-assign
      </el-button>
      <el-button
        type="accent"
        :disabled="selectRow.length == 0"
        :loading="loading.assign"
        @click="onClickAssign">
        Batch Assign
      </el-button>
    </div>
    <div class="table-view" v-loading="table.loading">
      <el-table
        :data="table.data"
        height="100%"
        class="no-border"
        @selection-change="changeSelection">
        <el-table-column
          align="center"
          label="Site Name"
          prop="siteName"
          min-width="120"/>
        <el-table-column
          align="center"
          label="Address"
          prop="address"
          min-width="120"/>
        <el-table-column
          align="center"
          label="Service Provider"
          min-width="120">
          <template slot-scope="{row}">
            <div v-for="item in row.serviceProviders" :key="item">{{item}}</div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="Assignment Status"
          prop="assignmentStatus"
          min-width="120"/>
        <el-table-column
          align="center"
          label="Select"
          type="selection"/>
      </el-table>
    </div>
    <div class="center" style="margin-bottom: -20px;">
      <Pagination
        v-show="table.total"
        :total="table.total"
        :page.sync="filter.pageNo"
        :limit.sync="filter.pageSize"
        @pagination="getTableData"/>
    </div>
  </el-dialog>
</template>

<script>
import apiGroup from '@/http/api/group'
import apiRates from '@/http/api/rates'
import Pagination from '@/components/Pagination'
export default {
  name: "DialogAssignment",
  props: {
    title: {
      type: String,
      default: "ASSIGN SITES"
    },
    visible: {
      type: Boolean,
      default: false
    },
    group: {
      type: Object,
      default: () => ({})
    },
    rate: {
      type: Object,
      default: () => ({})
    }
  },
  components: {Pagination},
  data() {
    return {
      filter: {
        pageSize: 10,
        pageNo: 1,
        pageVo: {
          criteria: "",
          countryCode: "",
          assignmentStatus: ""
        }
      },
      table: {
        data: [],
        total: 0,
        loading: false
      },
      loading: {
        assign: false,
        unassign: false
      },
      statusOptions: [],
      selectRow: [],
      isGroupAssign: false,
      isDyRateAssign: false
    }
  },
  mounted() {
    this.getStatusOptions();
    //this.onSearch();
  },
  watch: {
    visible: {
      handler(n, o) {
        console.log("watch.visible", n, o);
        if (n) {
          if (this.group && this.group.groupPk) {
            this.isGroupAssign = true;
            this.isDyRateAssign = false;
            this.filter.pageVo.groupPk = this.group.groupPk
            this.filter.pageVo.countryCode = this.group.countryCode
            this.onSearch()
          } else if (this.rate && this.rate.dynamicRateId) {
            this.isGroupAssign = false;
            this.isDyRateAssign = true;
            this.filter.pageVo.countryCode = this.rate.countryCode
            this.filter.pageVo.dynamicRateId = this.rate.dynamicRateId
            this.onSearch()
          }
        }
      }
    }
  },
  methods: {
    onHide() {
      this.$emit("hide");
    },
    onSearch() {
      this.filter.pageNo = 1;
      this.getTableData();
    },
    getStatusOptions() {
      apiGroup.getAssignStatusOptions().then(res => {
        if (res.data) {
          this.statusOptions = res.data
        }
      }).catch(error => {
        this.$message({
          type: 'error',
          message: error
        })
      })
    },
    getTableData() {
      this.selectRow = []
      this.table.loading = true;
      const promise = this.isGroupAssign 
        ? apiGroup.getAssignSitesPages(this.filter)
        : apiRates.getAssignSitesPages(this.filter)
      promise.then(res => {
        if (res.total && res.data) {
          this.table.total = res.total;
          this.table.data = res.data;
        } else {
          this.table.total = 0;
          this.table.data = [];
        }
        this.table.loading = false;
      }).catch(error => {
        this.$message({
          type: 'error',
          message: error
        })
        this.table.total = 0;
        this.table.data = [];
        this.table.loading = false;
      })
    },
    changeSelection(val) {
      this.selectRow = val;
    },
    getSelectIds() {
      const ids = [];
      this.selectRow.forEach(item => {
        ids.push(item.sitePk)
      })
      return ids;
    },
    onClickAssign() {
      if (this.isGroupAssign) {
        this.assignSites();
      } else if (this.isDyRateAssign) {
        this.assignRates();
      }
    },
    onClickUnassign() {
      if (this.isGroupAssign) {
        this.unassignSites();
      } else if (this.isDyRateAssign) {
        this.unassignRates();
      }
    },
    assignSites() {
      const params = {
        groupPk: this.group.groupPk,
        sitePks: this.getSelectIds()
      }
      this.loading.assign = true;
      apiGroup.assignSite2Group(params).then(res => {
        this.$message({
          type: 'success',
          message: res.msg || "Success"
        })
        this.getTableData()
      }).catch(error => {
        this.$message({
          type: 'error',
          message: error
        })
      }).finally(() => {
        this.loading.assign = false;
      })
    },
    unassignSites() {
      const params = {
        groupPk: this.group.groupPk,
        sitePks: this.getSelectIds()
      }
      this.loading.unassign = true;
      apiGroup.unassignSite2Group(params).then(res => {
        this.$message({
          type: 'success',
          message: res.msg || "Success"
        })
        this.getTableData()
      }).catch(error => {
        this.$message({
          type: 'error',
          message: error
        })
      }).finally(() => {
        this.loading.unassign = false;
      })
    },
    assignRates() {
      const params = {
        dynamicRateId: this.rate.dynamicRateId,
        sitePks: this.getSelectIds()
      }
      this.loading.assign = true;
      apiRates.assignRate2Site(params).then(res => {
        this.$message({
          type: 'success',
          message: res.msg || "Success"
        })
        this.getTableData()
      }).catch(error => {
        this.$message({
          type: 'error',
          message: error
        })
      }).finally(() => {
        this.loading.assign = false;
      })
    },
    unassignRates() {
      const params = {
        dynamicRateId: this.rate.dynamicRateId,
        sitePks: this.getSelectIds()
      }
      this.loading.unassign = true;
      apiRates.unassignRate2Site(params).then(res => {
        this.$message({
          type: 'success',
          message: res.msg || "Success"
        })
        this.getTableData()
      }).catch(error => {
        this.$message({
          type: 'error',
          message: error
        })
      }).finally(() => {
        this.loading.unassign = false;
      })
    }
  }
}
</script>

<style>
  .assign-dialog {
    width: 65vw;
    height: 90vh;
    display: flex;
    max-width: 1200px;
    flex-direction: column;
    margin-top: 5vh !important;
  }
  .assign-dialog .el-dialog__header {
    padding: 20px 20px 0;
    font-weight: bold;
  }
  .assign-dialog .el-dialog__body {
    flex: 1;
    padding: 20px;
    display: flex;
    overflow: hidden;
    flex-direction: column;
  }
  .assign-table-actions {
    display: flex;
    padding-top: 5px;
    flex-wrap: wrap-reverse;
    align-items: center;
    justify-content: flex-end;
  }
  .table-view {
    flex: 1;
    overflow-y: auto;
    padding-top: 10px;
    margin-bottom: -10px;
  }
  @media screen and (max-width: 1200px) {
    .assign-dialog {
      width: 70vw;
    }
  }
  @media screen and (max-width: 1000px) {
    .assign-dialog {
      width: 80vw;
    }
  }
  @media screen and (max-width: 800px) {
    .assign-dialog {
      width: 90vw;
    }
  }
  @media screen and (max-width: 700px) {
    .assign-dialog {
      width: 99vw;
    }
  }
  @media screen and (max-width: 320px) {
    .assign-dialog {
      width: 100%;
      min-width: 300px;
    }
  }
</style>