update the search and filters and columns

Strides-Admin/src/components/DialogAssignment.vue

@@ -65,7 +65,7 @@
         <el-table-column
           align="center"
           label="Service Provider"
-          min-width="120">
+          min-width="140">
           <template slot-scope="{row}">
             <div v-for="item in row.serviceProviders" :key="item">{{item}}</div>
           </template>

Strides-Admin/src/views/Reports.vue

@@ -3,7 +3,6 @@
     <div
       class="filter-container"
       v-loading="loading">
-      <div class="section-title">Report</div>
       <el-form
         label-width="130px"
         :model="reportFilter">
@@ -134,8 +133,7 @@
         label="Service Provider"
         prop="providerName"
         align="center"
-        min-width="170"
-      >
+        min-width="160">
           <template slot-scope="{row}">
             <span>{{ row.providerName }}</span>
           </template>

Strides-Admin/src/views/access/DialogDetail.vue

@@ -159,7 +159,7 @@ import provider from '@/http/api/provider'
 import settings from '../../settings.js'
 import {getCountryList} from '../../utils/index.js'
 export default {
-  name: "",
+  name: "DialogDetail",
   props: {
     visible: {
       type: Boolean,
@@ -172,6 +172,10 @@ export default {
     id: {
       type: String|Number,
       default: ''
+    },
+    roleOptions: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
@@ -236,7 +240,6 @@ export default {
         }
       },
       siteOptions: [],
-      roleOptions: [],
       groupOptions: [],
       callingOptions: [],
       providerOptions: []
@@ -284,12 +287,6 @@ export default {
       getCountryList(list => {
         this.callingOptions = list
       });
-      api.getRoleOptions().then(res => {
-        if (res.data) {
-          this.roleOptions = res.data
-          this.init();
-        }
-      });
       provider.getAllServiceProvider().then(res => {
         if (res.data) {
           this.providerOptions = res.data
@@ -309,6 +306,7 @@ export default {
         } else {
           this.siteOptions = []
         }
+        this.init();
       }).catch(err => {
         this.$message({
           type: 'error',

Strides-Admin/src/views/access/index.vue

@@ -2,17 +2,32 @@
   <div class="app-container">
     <div class="filter-container">
       <div class="filter-view">
-        <div class="flex1" style="min-width: 200px; max-width: 350px;">
+        <el-select
+          v-model="params.pageVo.roleName"
+          class="filter-view-item"
+          @change="toSearch"
+          clearable>
+          <el-option
+            v-for="(item, index) in dialogAction.roleOptions"
+            :key="index"
+            :label="item.roleDesc"
+            :value="item.roleName"/>
+        </el-select>
+        <div class="flex1" style="max-width: 350px;">
           <el-input
             v-model="params.pageVo.criteria"
-            placeholder="Search by Name, Email, Contact"
-            @keyup.enter.native="getTableData" />
+            class="filter-view-item"
+            prefix-icon="el-icon-search"
+            placeholder="Search by Name"
+            @keyup.enter.native="toSearch"
+            @change="toSearch"
+            clearable/>
         </div>
         <div>
           <el-button
             type="primary"
             icon="el-icon-search"
-            @click="getTableData">
+            @click="toSearch">
             Search
           </el-button>
         </div>
@@ -105,7 +120,8 @@ export default {
         pageNo: 1,
         pageSize: 10,
         pageVo: {
-          criteria: ""
+          criteria: "",
+          roleName: ""
         }
       },
       table: {
@@ -115,15 +131,28 @@ export default {
       },
       dialogAction: {
         isEdit: false,
-        visible: false
+        visible: false,
+        roleOptions: []
       }
     }
   },
   components: { Pagination,TableAction,DialogDetail },
   created() {
+    this.getRoleOptions();
     this.getTableData()
   },
   methods: {
+    toSearch() {
+      this.params.pageNo = 1;
+      this.getTableData();
+    },
+    getRoleOptions() {
+      api.getRoleOptions().then(res => {
+        if (res.data) {
+          this.dialogAction.roleOptions = res.data
+        }
+      });
+    },
     getTableData() {
       this.table.loading = true;
       api.getAccessPages(this.params).then(res => {

Strides-Admin/src/views/charge/Connectors.vue

@@ -1,64 +1,65 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-form
-        :model="filter"
-        v-bind:inline="true"
-        label-position="right"
-        label-width="90px"
-        style="width: 100%;">
-        <div class="filter-view">
-          <div
-            v-if="sitePk"
-            class="back-icon"
-            @click="goBack">
-            <i class="el-icon el-icon-back"></i>
-          </div>
-          <el-form-item
-            label="Station ID:"
-            class="flex-item">
-            <el-input
-              v-model="filter.criteria"
-              placeholder="Search by Site Name,Station ID Service Provider"
-              @keyup.enter.native="handleFilter" />
-          </el-form-item>
-          <el-form-item
-            label="Status:"
-            class="flex-item"
-            label-width="70px">
-            <el-select
-              v-model="filter.status"
-              placeholder="Select"
-              @change="handleFilter">
-              <el-option
-                v-for="(item, index) in statusOptions"
-                :key="index"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </el-form-item>
-          <div>
-            <el-button
-              v-waves
-              type="primary"
-              icon="el-icon-search"
-              @click="handleFilter">
-              Search
-            </el-button>
-          </div>
+      <div class="filter-view">
+        <div
+          v-if="sitePk"
+          class="back-icon"
+          @click="goBack">
+          <i class="el-icon el-icon-back"></i>
         </div>
-      </el-form>
+        <el-select
+          v-model="filter.pageVo.errorCode"
+          placeholder="Error Code"
+          @change="handleFilter"
+          class="filter-view-item"
+          clearable>
+          <el-option
+            v-for="(item,index) in errCodeOptions"
+            :key="index"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+        <el-select
+          v-model="filter.pageVo.status"
+          placeholder="Status"
+          @change="handleFilter"
+          class="filter-view-item"
+          clearable>
+          <el-option
+            v-for="(item,index) in statusOptions"
+            :key="index"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+        <div class="flex1" style="max-width: 500px;">
+          <el-input
+            class="filter-view-item"
+            v-model="filter.pageVo.criteria"
+            prefix-icon="el-icon-search"
+            placeholder="Search by Station ID, Site Name, Carpark Code, Vendor Error Code"
+            @keyup.enter.native="handleFilter"
+            @change="handleFilter"
+            clearable/>
+        </div>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          @click="handleFilter">
+          Search
+        </el-button>
+      </div>
     </div>
     <el-table
       v-loading="listLoading"
       :data="connectorList"
-      fit
       class="no-border"
       style="width: 100%;min-height: 65vh;">
       <el-table-column
         label="Station ID"
         prop="sitePk"
-        align="center">
+        align="center"
+        min-width="120">
           <template slot-scope="{row}">
             <span>{{ row.chargeBoxId }}</span>
           </template>
@@ -66,11 +67,17 @@
       <el-table-column
         label="Site Name"
         prop="sitePk"
-        align="center">
+        align="center"
+        min-width="120">
           <template slot-scope="{row}">
             <span>{{ row.siteName }}</span>
           </template>
       </el-table-column>
+      <el-table-column
+        label="Carpark Code"
+        prop="carParkCode"
+        align="center"
+        min-width="120"/>
       <!--el-table-column
         label="Service Provider"
         prop="sitePk"
@@ -83,7 +90,8 @@
       <el-table-column
         label="Connector ID"
         prop="sitePk"
-        align="center">
+        align="center"
+        min-width="120">
           <template slot-scope="{row}">
             <span>{{ row.connectorId }}</span>
           </template>
@@ -91,7 +99,8 @@
       <el-table-column
         label="Last Status Update"
         prop="sitePk"
-        align="center">
+        align="center"
+        min-width="150">
           <template slot-scope="{row}">
             <span>{{ row.dateTime }}</span>
           </template>
@@ -99,7 +108,8 @@
       <el-table-column
         label="Status"
         prop="sitePk"
-        align="center">
+        align="center"
+        min-width="80">
           <template slot-scope="{row}">
             <span>{{ row.status }}</span>
           </template>
@@ -107,7 +117,8 @@
       <el-table-column
         label="Error Code"
         prop="sitePk"
-        align="center">
+        align="center"
+        min-width="100">
           <template slot-scope="{row}">
             <span>{{ row.errorCode }}</span>
           </template>
@@ -115,7 +126,8 @@
       <el-table-column
         label="Vendor Error Code"
         prop="sitePk"
-        align="center">
+        align="center"
+        min-width="150">
           <template slot-scope="{row}">
             <span>{{ row.vendorErrorCode }}</span>
           </template>
@@ -124,7 +136,7 @@
         label="Action"
         prop="sitePk"
         align="center"
-        width="100">
+        width="70">
         <template slot-scope="{row}">
           <!-- <TableAction /> -->
           <el-dropdown
@@ -169,9 +181,9 @@
       <pagination
         v-show="total > 0"
         :total="total"
-        :page.sync="listQuery.page"
-        :limit.sync="listQuery.limit"
-        @pagination="handlePageChange" />
+        :page.sync="filter.pageNo"
+        :limit.sync="filter.pageSize"
+        @pagination="getConnectorList" />
     </div>
     <ConnectorTags
       :visible="printConnector.visible"
@@ -195,20 +207,19 @@
     data() {
       return {
         filter: {
-          criteria: '',
-          status: ''
+          pageNo: 1,
+          pageSize: 10,
+          pageVo: {
+            criteria: '',
+            status: '',
+            errorCode: ''
+          }
         },
         listLoading: true,
         connectorList: [],
         total: 0,
-        statusOptions: [{
-          name: 'All',
-          value: ''
-        }],
-        listQuery: {
-          page: 1,
-          limit: 10,
-        },
+        statusOptions: [],
+        errCodeOptions: [],
         printConnector: {
           qrCode: "",
           visible: false
@@ -226,6 +237,7 @@
         this.filter.sitePk = this.sitePk = this.$route.params.id;
       }
       this.getStatusOption();
+      this.getErrorCodeOptions();
     },
     methods: {
       goBack() {
@@ -234,12 +246,7 @@
         })
       },
       handleFilter() {
-        this.listLoading = true;
-        this.listQuery.page = 1;
-        this.getConnectorList();
-      },
-      handlePageChange() {
-        this.listLoading = true;
+        this.filter.pageNo = 1;
         this.getConnectorList();
       },
       getStatusOption() {
@@ -254,20 +261,32 @@
           }
           this.getConnectorList();
         }).catch(err => {
-
+          this.$message.error(err)
+        })
+      },
+      getErrorCodeOptions() {
+        api.getErrorCodeOption().then(res => {
+          if (res.data.length > 0) {
+            res.data.forEach(item => {
+              this.errCodeOptions.push({
+                name: item,
+                value: item
+              })
+            })
+          }
+          this.getConnectorList();
+        }).catch(err => {
+          this.$message.error(err)
         })
       },
       getConnectorList() {
-        const params = {
-          pageSize: this.listQuery.limit,
-          pageNo: this.listQuery.page,
-          pageVo: this.filter
-        }
-        api.getConnectorList(params).then(res => {
+        this.listLoading = true;
+        api.getConnectorList(this.filter).then(res => {
           this.listLoading = false;
           this.total = res.total;
           this.connectorList = res.data;
         }).catch(err => {
+          this.$message.error(err)
           this.listLoading = false;
         })
       },
@@ -370,7 +389,6 @@
         })*/
       },
       hideConnectorQR() {
-        console.log('hide');
         this.printConnector.visible = false;
       },
       hideActionDialog() {

Strides-Admin/src/views/charge/RegisteredChargeStations.vue

@@ -1,88 +1,89 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-form
-        :model="filter"
-        v-bind:inline="true"
-        label-position="right"
-        label-width="100px"
-        style="width: 100%;">
-        <div class="filter-view">
-          <div
-            v-if="sitePk"
-            class="back-icon"
-            @click="goBack">
-            <i class="el-icon el-icon-back"></i>
-          </div>
-          <el-form-item
-            label=""
-            class="flex-item">
-            <el-input
-              v-model="filter.criteria"
-              placeholder="Search by Station ID/Site Name/Service Provider"
-              @keyup.enter.native="handleFilter" />
-          </el-form-item>
-          <div>
-            <el-button
-              type="primary"
-              icon="el-icon-search"
-              @click="handleFilter">
-              Search
-            </el-button>
-          </div>
-          <el-form-item
-            label-width="130px"
-            label="Heartbeat Period:"
-            class="flex-item">
-            <el-select
-              v-model="filter.heartbeatPeriod"
-              placeholder="Select"
-              @change="handleFilter">
-              <el-option
-                v-for="(item, index) in heartOptions"
-                :key="index"
-                :value="item.value"
-                :label="item.name"/>
-            </el-select>
-          </el-form-item>
-          <el-form-item
-            label-width="130px"
-            label="Station Status:"
-            class="flex-item"
-            v-if="sitePk">
-            <el-select
-              v-model="filter.dataStatus"
-              placeholder="Select"
-              @change="handleFilter">
-              <el-option
-                v-for="(item, index) in statusOptions"
-                :key="index"
-                :value="item.value"
-                :label="item.name"/>
-            </el-select>
-          </el-form-item>
-          <div class="filter-flex-button">
-            <el-button
-              v-if="!$route.meta.onlyView"
-              type="primary"
-              icon="el-icon-plus"
-              @click="addStation">
-                Add Station
-            </el-button>
-          </div>
+      <div class="filter-view">
+        <div
+          v-if="sitePk"
+          class="back-icon"
+          @click="goBack">
+          <i class="el-icon el-icon-back"></i>
         </div>
-      </el-form>
+        <el-select
+          class="filter-view-item"
+          v-model="filter.pageVo.providerPk"
+          placeholder="Service Provider"
+          @change="handleFilter"
+          clearable>
+          <el-option
+            v-for="(item, index) in providerOptions"
+            :key="index"
+            :label="item.providerName"
+            :value="item.providerPk"/>
+        </el-select>
+        <el-select
+          class="filter-view-item"
+          v-model="filter.pageVo.heartbeatPeriod"
+          placeholder="Heartbeat Period"
+          @change="handleFilter"
+          clearable>
+          <el-option
+            v-for="(item, index) in heartOptions"
+            :key="index"
+            :value="item.value"
+            :label="item.name"/>
+        </el-select>
+        <el-select
+          class="filter-view-item"
+          clearable
+          v-model="filter.pageVo.dataStatus"
+          placeholder="Station Status"
+          @change="handleFilter"
+          v-if="sitePk">
+          <el-option
+            v-for="(item, index) in statusOptions"
+            :key="index"
+            :value="item.value"
+            :label="item.name"/>
+        </el-select>
+        <div class="flex1" style="max-width: 350px;">
+          <el-input
+            class="filter-view-item"
+            v-model="filter.pageVo.criteria"
+            prefix-icon="el-icon-search"
+            placeholder="Station ID, Site Name, Carpark Code"
+            @keyup.enter.native="handleFilter"
+            @change="handleFilter"
+            clearable/>
+        </div>
+        <div>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            @click="handleFilter">
+            Search
+          </el-button>
+        </div>
+          
+        <div class="filter-flex-button">
+          <el-button
+            v-if="!$route.meta.onlyView"
+            type="primary"
+            icon="el-icon-plus"
+            @click="addStation">
+              Add Station
+          </el-button>
+        </div>
+      </div>
     </div>
     <el-table
       v-loading="listLoading"
       :data="stationList"
-      fit
       class="no-border"
       style="width: 100%;min-height: 65vh;">
       <el-table-column
         label="Station ID"
         align="center"
-        class-name="fixed-width">
+        min-width="150">
           <template slot-scope="{row}">
             <span>{{ row.chargeBoxId }}</span>
           </template>
@@ -90,15 +91,20 @@
       <el-table-column
         label="Site Name"
         align="center"
-        class-name="fixed-width">
+        min-width="150">
           <template slot-scope="{row}">
             <span>{{ row.siteName }}</span>
           </template>
       </el-table-column>
+      <el-table-column
+        label="Carpark Code"
+        prop="carParkCode"
+        align="center"
+        min-width="120"/>
       <el-table-column
         label="Service Provider"
         align="center"
-        class-name="fixed-width">
+        min-width="140">
           <template slot-scope="{row}">
             <span>{{ row.providerName }}</span>
           </template>
@@ -106,7 +112,7 @@
       <el-table-column
         label="Last Heartbeat"
         align="center"
-        class-name="fixed-width">
+        min-width="150">
           <template slot-scope="{row}">
             <span>{{ row.lastHeartbeat }}</span>
           </template>
@@ -114,8 +120,7 @@
       <el-table-column
         label="Connector"
         align="center"
-        width="100px"
-        class-name="fixed-width">
+        min-width="100">
         <template slot="header" slot-scope="scope">
           <div>Connector</div>
           <div style="font-size: 0.8em; margin-top: -5px;">(In Use/Total)</div>
@@ -127,15 +132,14 @@
       <el-table-column
         label="Status"
         align="center"
-        width="120px"
         prop="dataStatus"
-        class-name="fixed-width"/>
+        min-width="90"/>
       <el-table-column
         v-if="!$route.meta.onlyView"
         label="Action"
         align="center"
-        width="80">
-          <template slot-scope="{row}">
+        min-width="70">
+          <template slot-scope="{row}" v-if="row.dataStatus != 'Inactive'">
             <el-dropdown
               class="action-dropdown"
               @command="(v) => handleCommand(v, row)">
@@ -169,9 +173,9 @@
       <Pagination
         v-show="total > 0"
         :total="total"
-        :page.sync="listQuery.page"
-        :limit.sync="listQuery.limit"
-        @pagination="handlePageChange" />
+        :page.sync="filter.pageNo"
+        :limit.sync="filter.pageSize"
+        @pagination="getList" />
     </div>
   </div>
 </template>
@@ -181,24 +185,27 @@ import Pagination from '@/components/Pagination'
 import TableAction from '@/components/TableAction.vue'
 import api from '../../http/api/charge'
 import ocpp from '../../http/api/ocpp'
+import provider from '../../http/api/provider'
 export default {
   components: { Pagination, TableAction },
   data() {
     return {
       filter: {
-        criteria: '',
-        dataStatus: '',
-        heartbeatPeriod: 'ALL'
+        pageNo: 1,
+        pageSize: 10,
+        pageVo: {
+          criteria: '',
+          dataStatus: '',
+          providerPk: '',
+          heartbeatPeriod: 'ALL'
+        }
       },
       listLoading: true,
       stationList: [],
       heartOptions: [],
       statusOptions: [],
+      providerOptions: [],
       total: 1,
-      listQuery: {
-        page: 1,
-        limit: 10,
-      },
       sitePk: ""
     }
   },
@@ -207,6 +214,7 @@ export default {
       this.filter.sitePk = this.sitePk = this.$route.params.id;
       this.getStatusOptions();
     }
+    this.getAllProvider();
     this.getHeartbeatOptions();
     this.getList();
   },
@@ -217,8 +225,7 @@ export default {
       })
     },
     handleFilter() {
-      this.listLoading = true;
-      this.listQuery.page = 1;
+      this.filter.pageNo = 1;
       this.getList();
     },
     handlePageChange() {
@@ -227,37 +234,39 @@ export default {
     },
     getHeartbeatOptions() {
       api.getHeartbeatPeriodList().then(res => {
-        console.log('data', res);
         this.heartOptions = res.data;
       }).catch(err => {
-        console.error('data', err);
+        this.$message.error(err);
       });
     },
     getStatusOptions() {
       api.getStatusOptions().then(res => {
-        console.log('data', res);
         this.statusOptions = res.data;
-        this.statusOptions.unshift({
+        /*this.statusOptions.unshift({
           name: "All",
           value: ""
-        })
+        })*/
+      }).catch(err => {
+        this.$message.error(err);
+      });
+    },
+    getAllProvider() {
+      provider.getAllServiceProvider().then(res => {
+        if (res.data && res.data.length > 0) {
+          this.providerOptions = res.data
+        }
       }).catch(err => {
-        console.error('data', err);
+        this.$message.error(err);
       });
     },
     getList() {
-      const params = {
-        pageSize: this.listQuery.limit,
-        pageNo: this.listQuery.page,
-        pageVo: this.filter
-      }
-      api.getStationPages(params).then(res => {
-        console.log('data', res);
+      this.listLoading = true;
+      api.getStationPages(this.filter).then(res => {
         this.listLoading = false;
         this.total = res.total;
         this.stationList = res.data;
       }).catch(err => {
-        console.error('data', err);
+        this.$message.error(err);
         this.listLoading = false;
         this.total = 0;
         this.stationList = [];
@@ -289,7 +298,9 @@ export default {
           stationIds: [row.chargeBoxId]
         }
         this.resetStation(params);
-      })
+      }).catch(err => {
+        this.$message.error(err);
+      });
     },
     hardReset(row) {
       this.$confirm("Confirm hard reset?", "Reset",  {
@@ -302,7 +313,9 @@ export default {
           stationIds: [row.chargeBoxId]
         }
         this.resetStation(params);
-      })
+      }).catch(err => {
+        this.$message.error(err);
+      });
     },
     resetStation(params) {
       this.listLoading = true;
@@ -327,7 +340,9 @@ export default {
         type: 'warning'
       }).then(res => {
         this.deleteStation(row.chargeBoxPk)
-      })
+      }).catch(err => {
+        this.$message.error(err);
+      });
     },
     deleteStation(id) {
       api.deleteStation({chargeBoxPk: id}).then(res => {

Strides-Admin/src/views/charging/ChargingProfiles.vue

@@ -1,7 +1,19 @@
 <template>
   <div class="app-container">
-    <div class="filter-container">
-      <div class="right">
+    <div class="filter-container filter-view">
+      <el-select
+        class="filter-view-item"
+        v-model="listQuery.pageVo.providerPk"
+        placeholder="Service Provider"
+        @change="toSearch"
+        clearable>
+        <el-option
+          v-for="(item, index) in providerOptions"
+          :key="index"
+          :label="item.providerName"
+          :value="item.providerPk"/>
+      </el-select>
+      <div class="filter-flex-button">
         <el-button
           type="primary"
           icon="el-icon-plus"
@@ -13,7 +25,6 @@
     <el-table
       v-loading="listLoading"
       :data="tableList"
-      fit
       style="width: 100%;">
       <el-table-column
         :label="item.label"
@@ -23,10 +34,26 @@
         :key="index"
         :min-width="item.width">
         <template slot-scope="{row}">
-          <TableAction
+          <el-dropdown
+            class="action-dropdown"
+            @command="(v) => handleCommand(v, row)"
+            v-if="item.action">
+            <i class="el-icon-more icon-action"></i>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                command="editProfile">
+                Edit
+              </el-dropdown-item>
+              <el-dropdown-item
+                command="delProfile">
+                Delete
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <!-- <TableAction
             @edit="editProfile(row)"
             @delete="delProfile(row)"
-            v-if="item.action"/>
+            v-if="item.action"/> -->
           <span v-else>{{ row[item.key] }}</span>
         </template>
       </el-table-column>
@@ -37,7 +64,7 @@
         :total="total"
         :page.sync="listQuery.pageNo"
         :limit.sync="listQuery.pageSize"
-        @pagination="handlePageChange" />
+        @pagination="getList" />
     </div>
   </div>
 </template>
@@ -45,23 +72,27 @@
   import Pagination from '@/components/Pagination'
   import TableAction from '@/components/TableAction.vue'
   import api from '../../http/api/chargingProfile.js'
+  import provider from '../../http/api/provider'
   export default {
     data() {
       return {
         listLoading: true,
-        tableList: [{
-          chargingPk: 6,
-          level: 1
-        }],
+        tableList: [],
         total: 0,
         listQuery: {
           pageNo: 1,
           pageSize: 10,
-          pageVo: {}
+          pageVo: {
+            providerPk: ""
+          }
         },
         columns: [{
           key: 'chargingProfilePk',
           label: 'Charging Profile ID',
+          width: 150
+        },{
+          key: 'providerName',
+          label: 'Service Provider',
           width: 140
         },{
           width: 100,
@@ -90,22 +121,32 @@
         },{
           action: true,
           label: 'Action',
-          width: 150
-        }]
+          width: 70
+        }],
+        providerOptions: []
       }
     },
     components: { Pagination, TableAction },
     created() {
+      this.getAllProvider();
       this.getList();
     },
     methods: {
       toAddPage() {
         this.$router.push({path: '/smart-energy-management/charging-profiles/add'})
       },
-      handlePageChange() {
-        this.listLoading = true;
+      toSearch() {
+        this.listQuery.pageNo = 1;
         this.getList();
       },
+      getAllProvider() {
+        this.listLoading = true;
+        provider.getAllServiceProvider().then(res => {
+          if (res.data && res.data.length > 0) {
+            this.providerOptions = res.data
+          }
+        });
+      },
       getList() {
         api.getChargingProfilePages(this.listQuery).then(res => {
           this.listLoading = false;
@@ -117,6 +158,9 @@
           this.tableList = [];
         })
       },
+      handleCommand(cb, item) {
+        this[cb](item)
+      },
       editProfile(row) {
         this.$store.commit('charge/SET_ProfileId', row.chargingProfilePk)
         this.$router.push({path: '/smart-energy-management/charging-profiles/edit'});

Strides-Admin/src/views/charging/ConfigureStations.vue

@@ -2,17 +2,33 @@
   <div class="app-container">
     <div class="filter-container">
       <div class="filter-view">
-        <el-input
-          clearable
-          style="max-width: 400px;"
-          v-model="filter.pageVo.criteria"
-          placeholder="Search by Station ID/Site Name"
-          @keyup.enter.native="getTableData" />
+        <el-select
+          class="filter-view-item"
+          v-model="filter.pageVo.providerPk"
+          placeholder="Service Provider"
+          @change="toSearch"
+          clearable>
+          <el-option
+            v-for="(item, index) in providerOptions"
+            :key="index"
+            :label="item.providerName"
+            :value="item.providerPk"/>
+        </el-select>
+        <div class="flex1" style="max-width: 350px;">
+          <el-input
+            clearable
+            class="filter-view-item"
+            v-model="filter.pageVo.criteria"
+            prefix-icon="el-icon-search"
+            placeholder="Search by Station ID, Site Name, Carpark Code"
+            @keyup.enter.native="toSearch"
+            @change="toSearch"/>
+        </div>
         <div>
           <el-button
             type="primary"
             icon="el-icon-search"
-            @click="getTableData">
+            @click="toSearch">
             Search
           </el-button>
         </div>
@@ -35,7 +51,17 @@
         label="Site Name"
         align="center"
         prop="siteName"
-        min-width="100"/>
+        min-width="140"/>
+      <el-table-column
+        label="Carpark Code"
+        prop="carParkCode"
+        align="center"
+        min-width="125"/>
+      <el-table-column
+        label="Service Provider"
+        prop="providerName"
+        align="center"
+        min-width="140"/>
       <el-table-column
         label="Description"
         align="center"
@@ -109,6 +135,7 @@
 <script>
 import api from '../../http/api/chargingProfile.js'
 import ocpp from '../../http/api/ocpp'
+import provider from '../../http/api/provider'
 import Pagination from '@/components/Pagination'
 import DialogSetProfiles from './components/DialogSetProfiles.vue'
 import DialogClearProfiles from './components/DialogClearProfiles.vue'
@@ -124,7 +151,8 @@ export default {
         pageNo: 1,
         pageSize: 10,
         pageVo: {
-          criteria: ""
+          criteria: "",
+          providerPk: ""
         }
       },
       actionDialog: {
@@ -132,14 +160,28 @@ export default {
         isEdit: false,
         isClear: false,
         visible: false
-      }
+      },
+      providerOptions: []
     }
   },
   components: { Pagination, DialogSetProfiles, DialogClearProfiles },
   created() {
+    this.getAllProvider();
     this.getTableData();
   },
   methods: {
+    toSearch() {
+      this.filter.pageNo = 1;
+      this.getTableData();
+    },
+    getAllProvider() {
+      this.listLoading = true;
+      provider.getAllServiceProvider().then(res => {
+        if (res.data && res.data.length > 0) {
+          this.providerOptions = res.data
+        }
+      });
+    },
     getTableData() {
       this.loading = true;
       api.getConfigureChargingProfilePages(this.filter).then(res => {

Strides-Admin/src/views/charging/components/DialogSetProfiles.vue

@@ -20,12 +20,12 @@
       </div>
       <div class="form-row" v-if="isEdit">
         <div class="label">CURRENT CHARGING PROFILE:</div>
-        <div
-          class="underline"
+        <span
+          class="link-type"
           v-if="item.description"
           @click="viewProfiles">
           {{item.description}}
-        </div>
+        </span>
       </div>
       <div class="form-row">
         <div class="label">{{isEdit ? "CHANGE CHARGING PROFILE TO:" : "CHARGING PROFILE:"}}</div>

Strides-Admin/src/views/company/index.vue

@@ -1,36 +1,63 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-form class="form" ref="form" :model="form" label-width="80px">
-        <div class="filter-view">
-          <div style="flex: 1; min-width: 180px; max-width: 300px;">
-            <el-input
-              v-model="form.criteria"
-              clearable
-              placeholder="Search by Group Name"></el-input>
-          </div>
-          <div>
-            <el-button 
-              @click="onClickSearch"
-              icon="el-icon-search"
-              type="primary">
-              Search
-            </el-button>
-          </div>
-          <div class="filter-flex-button" v-if="!$route.meta.onlyView">
-            <el-button
-              icon="el-icon-plus"
-              type="primary"
-              @click="onClickAdd">
-              Add Group
-            </el-button>
-          </div>
+      <div class="filter-view">
+        <el-select
+          class="filter-view-item"
+          v-model="filters.pageVo.groupType"
+          placeholder="Group Type"
+          @change="onClickSearch"
+          clearable>
+          <el-option
+            v-for="item in groupTypes"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value" />
+        </el-select>
+        <el-select
+          class="filter-view-item"
+          v-model="filters.pageVo.countryCode"
+          placeholder="Country"
+          @change="onClickSearch"
+          clearable>
+          <el-option
+            v-for="item in countryList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value" />
+        </el-select>
+        <div style="flex: 1; max-width: 300px;">
+          <el-input
+            v-model="filters.pageVo.criteria"
+            class="filter-view-item"
+            prefix-icon="el-icon-search"
+            placeholder="Search by Group Name"
+            @keyup.enter.native="onClickSearch"
+            @change="onClickSearch"
+            clearable/>
         </div>
-      </el-form>
+        <div>
+          <el-button 
+            @click="onClickSearch"
+            icon="el-icon-search"
+            type="primary">
+            Search
+          </el-button>
+        </div>
+        <div class="filter-flex-button" v-if="!$route.meta.onlyView">
+          <el-button
+            icon="el-icon-plus"
+            type="primary"
+            @click="onClickAdd">
+            Add Group
+          </el-button>
+        </div>
+      </div>
     </div>
     <el-table
       :data="table.list"
-      class="no-border">
+      class="no-border"
+      v-loading="table.loading">
       <!-- <el-table-column
         align="center"
         label="Group ID"
@@ -56,8 +83,12 @@
         align="center"
         label="Type"
         prop="groupType"
-        min-width="120"
-      ></el-table-column>
+        min-width="120"/>
+      <el-table-column
+        align="center"
+        label="Country"
+        prop="country"
+        min-width="100"/>
       <el-table-column
         align="center"
         label="Approved"
@@ -128,7 +159,7 @@
         :total="table.total"
         :page.sync="table.pageNo"
         :limit.sync="table.pageSize"
-        @pagination="handlePageChange" />
+        @pagination="getTableData" />
     </div>
     <DialogAssignment
       :visible="assign.visible"
@@ -143,48 +174,88 @@ import TableAction from '@/components/TableAction.vue'
 import Pagination from '@/components/Pagination'
 import DialogAssignment from '@/components/DialogAssignment'
 import api from '@/http/api/group'
+import site from '@/http/api/site'
 
 export default {
   components: { Pagination, TableAction, DialogAssignment },
   data() {
     return {
-      form: {
-        criteria: ''
+      filters: {
+        pageNo: 1,
+        pageSize: 10,
+        pageVo: {
+          criteria: '',
+          groupType: '',
+          countryCode: '',
+        }
       },
       table: {
         list: [],
         total: 0,
-        pageNo: 1,
-        pageSize: 10,
+        loading: false
       },
       assign: {
         item: {},
         visible: false
-      }
+      },
+      groupTypes: [],
+      countryList: []
     }
   },
+  created() {
+    this.getGroupTypeOptions();
+    this.getCountryList();
+    this.getTableData()
+  },
   methods: {
-    async getGroupPages() {
-      const params = {
-        pageSize: this.table.pageSize,
-        pageNo: this.table.pageNo,
-        pageVo: {
-          criteria: this.form.criteria,
-        },
-      }
-      const {
-        success,
-        data,
-        total,
-      } = await api.getGroupPages(params)
-      if (success) {
-        this.table.list = data
-        this.table.total = total
-      }
-    },
     onClickSearch() {
-      this.table.pageNo = 1
-      this.getGroupPages()
+      this.filters.pageNo = 1;
+      this.getTableData();
+    },
+    getGroupTypeOptions() {
+      api.getUserGroupType().then(res => {
+        if (res.data) {
+          this.groupTypes = res.data
+        }
+      }).catch(err => {
+        this.$message({
+          message: error,
+          type: 'error'
+        })
+      })
+    },
+    getCountryList() {
+      site.getCountryList().then(res => {
+        if (res.data) {
+          this.countryList = res.data
+        }
+      }).catch(err => {
+        this.$message({
+          message: error,
+          type: 'error'
+        })
+      })
+    },
+    getTableData() {
+      this.table.loading = true;
+      api.getGroupPages(this.filters).then(res => {
+        if (res.data && res.total) {
+          this.table.total = res.total;
+          this.table.list = res.data;
+        } 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.$router.push({
@@ -198,6 +269,11 @@ export default {
         type: 'warning'
       }).then(res => {
         this.onDeleteCompany(row);
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: err
+        })
       })
     },
     handleCommand(cb, item) {
@@ -235,14 +311,7 @@ export default {
           message: error
         })
       })
-    },
-    handlePageChange() {
-      this.listLoading = true;
-      this.getGroupPages()
-    },
-  },
-  created() {
-    this.getGroupPages()
+    }
   }
 }
 </script>