update the search and filters and columns

Strides-Admin/src/views/feedback/FeedbackManagement.vue

@@ -1,48 +1,24 @@
 <template>
   <div class="app-container">
-    <!-- <div class="filter-container">
-      <el-form
-        :model="filter"
-        v-bind:inline="true"
-        label-position="left"
-        label-width="100px"
-        style="width: 100%;">
-        <el-row :gutter="20">
-          <el-col :span="7">
-            <el-form-item
-              label=""
-              class="flex-item">
-              <el-input
-                v-model="filter.criteria"
-                placeholder="Search by Provider Name/Address/Contact"
-                @keyup.enter.native="handleFilter" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-button
-              type="primary"
-              icon="el-icon-search"
-              @click="handleFilter">
-              Search
-            </el-button>
-          </el-col>
-          <el-col :span="6" :offset="3" style="text-align: right;">
-            <el-button
-              class="filter-item"
-              type="primary"
-              icon="el-icon-plus"
-              @click="addProvider">
-                Add Provider
-            </el-button>
-          </el-col>
-        </el-row>
-      </el-form>
-    </div> -->
+    <div class="filter-container">
+      <div class="filter-view">
+        <el-select
+          class="filter-view-item"
+          v-model="listQuery.pageVo.typeOfFeedback"
+          placeholder="Type of Feedbacks"
+          @change="handleFilter"
+          clearable>
+          <el-option
+            v-for="(item,index) in typeOptions"
+            :key="index"
+            :label="item.name"
+            :value="item.value" />
+        </el-select>
+      </div>
+    </div>
     <el-table
       v-loading="listLoading"
       :data="tableList"
-      fit
-      :row-class-name="({row})=>'read'+row.readStatus"
       style="width: 100%;">
       <el-table-column
         label="ID"
@@ -109,7 +85,7 @@
         :total="total"
         :page.sync="listQuery.pageNo"
         :limit.sync="listQuery.pageSize"
-        @pagination="handlePageChange" />
+        @pagination="getList" />
     </div>
   </div>
 </template>
@@ -129,31 +105,48 @@
           pageNo: 1,
           pageSize: 10,
           pageVo: {
-            criteria: ""
+            criteria: "",
+            typeOfFeedback: ""
           }
         },
+        typeOptions: []
       }
     },
     created() {
+      this.getTypeOptions();
       this.getList();
     },
     methods: {
       handleFilter() {
-        this.listLoading = true;
-        this.listQuery.page = 1;
+        this.listQuery.pageNo = 1;
         this.getList();
       },
-      handlePageChange() {
-        this.listLoading = true;
-        this.getList();
+      getTypeOptions() {
+        feedback.getFeedbackTypes().then(res => {
+          if (res.data) {
+            this.typeOptions = res.data
+          }
+        }).catch(err => {
+          this.$message({
+            message: error,
+            type: 'error'
+          })
+        })
       },
       getList() {
+        this.listLoading = true;
         feedback.getFeedbackPages(this.listQuery).then(res => {
           this.listLoading = false;
           this.total = res.total;
           this.tableList = res.data
         }).catch(err => {
           this.listLoading = false;
+          this.total = 0;
+          this.tableList = [];
+          this.$message({
+            message: error,
+            type: 'error'
+          })
         })
       },
       viewFeedback(row) {

Strides-Admin/src/views/financial/IdleFee.vue

@@ -1,64 +1,74 @@
 <template>
   <div class="app-container">
-    <el-form
-      :model="filter.pageVo"
-      class="filter-container"
-      label-position="right">
-      <div class="filter-view">
-        <el-form-item>
-          <el-input
-            clearable
-            v-model="filter.pageVo.criteria"
-            placeholder="Search by Number/Email"
-            @keyup.enter.native="handleFilter" />
-        </el-form-item>
-        <el-form-item>
-          <el-date-picker
-            v-model="filter.pageVo.date"
-            type="month"
-            format="yyyy-MM"
-            value-format="yyyy-MM"
-            placeholder="Filter Date"/>
-        </el-form-item>
-        <el-form-item>
-          <el-select
-            filterable
-            remote
-            clearable
-            v-model="filter.pageVo.sitePk"
-            :remote-method="(s) => getSiteOptions(s)"
-            placeholder="Filter by site"
-            @change="getStationOptions">
-            <el-option
-              v-for="(item, index) in siteOptions"
-              :key="index"
-              :label="item.siteName"
-              :value="item.sitePk"/>
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-select
-            clearable
-            v-model="filter.pageVo.chargeBoxId"
-            placeholder="Filter by Station ID"
-            v-loading="listLoading">
-            <el-option
-              v-for="(item, index) in stationOptions"
-              :key="index"
-              :label="item.stationId"
-              :value="item.stationId"/>
-          </el-select>
-        </el-form-item>
-        <div>
-          <el-button
-            type="primary"
-            icon="el-icon-search"
-            @click="getTableData">
-            Search
-          </el-button>
-        </div>
+    <div class="filter-container filter-view">
+      <el-select
+        class="filter-view-item"
+        v-model="filter.pageVo.userType"
+        placeholder="User Type"
+        @change="toSearch"
+        clearable>
+        <el-option
+          v-for="item in userTypeOptions"
+          :key="item"
+          :label="item"
+          :value="item" />
+      </el-select>
+      <div style="flex: 1; max-width: 420px;">
+        <el-input
+          clearable
+          class="filter-view-item"
+          prefix-icon="el-icon-search"
+          v-model="filter.pageVo.criteria"
+          placeholder="Station ID, Vehicle, Transaction ID, Email, Carpark Code"
+          @keyup.enter.native="toSearch"
+          @change="toSearch"/>
       </div>
-    </el-form>
+      <!-- <el-form-item>
+        <el-date-picker
+          v-model="filter.pageVo.date"
+          type="month"
+          format="yyyy-MM"
+          value-format="yyyy-MM"
+          placeholder="Filter Date"/>
+      </el-form-item>
+      <el-form-item>
+        <el-select
+          filterable
+          remote
+          clearable
+          v-model="filter.pageVo.sitePk"
+          :remote-method="(s) => getSiteOptions(s)"
+          placeholder="Filter by site"
+          @change="getStationOptions">
+          <el-option
+            v-for="(item, index) in siteOptions"
+            :key="index"
+            :label="item.siteName"
+            :value="item.sitePk"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-select
+          clearable
+          v-model="filter.pageVo.chargeBoxId"
+          placeholder="Filter by Station ID"
+          v-loading="listLoading">
+          <el-option
+            v-for="(item, index) in stationOptions"
+            :key="index"
+            :label="item.stationId"
+            :value="item.stationId"/>
+        </el-select>
+      </el-form-item> -->
+      <div>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          @click="getTableData">
+          Search
+        </el-button>
+      </div>
+    </div>
     <el-table
       :data="table.list"
       v-loading="loading">
@@ -77,6 +87,11 @@
         align="center"
         prop="chargeBoxId"
         min-width="100"/>
+      <el-table-column
+        label="Carpark Code"
+        prop="carParkCode"
+        align="center"
+        min-width="120"/>
       <el-table-column
         label="Start Date/Time"
         align="center"
@@ -117,6 +132,7 @@
 <script>
 import site from '@/http/api/site'
 import ocpp from '@/http/api/ocpp'
+import apiUser from '../../http/api/apiUser.js'
 import financial from '@/http/api/financial'
 import Pagination from '@/components/Pagination'
 export default {
@@ -126,6 +142,7 @@ export default {
       listLoading: false,
       siteOptions: [],
       stationOptions: [],
+      userTypeOptions: [],
       table: {
         list: [],
         total: 0
@@ -137,6 +154,7 @@ export default {
           date: "",
           sitePk: "",
           criteria: "",
+          userType: "",
           chargeBoxId: ""
         }
       },
@@ -144,10 +162,15 @@ export default {
   },
   components: { Pagination },
   created() {
-    this.getSiteOptions()
+    this.getUserTypeOption();
+    //this.getSiteOptions()
     this.getTableData()
   },
   methods: {
+    toSearch() {
+      this.filter.pageNo = 1;
+      this.getTableData();
+    },
     getSiteOptions(search) {
       site.getAllSiteList({siteName: search ?? ""}).then(res => {
         if (res.data && res.data.length > 0) {
@@ -172,6 +195,18 @@ export default {
         this.listLoading = false;
       })
     },
+    getUserTypeOption() {
+      apiUser.getUserTypeOptions().then(res => {
+        if (res.data) {
+          this.userTypeOptions = res.data
+        }
+      }).catch(err => {
+        this.$message({
+          message: error,
+          type: 'error'
+        })
+      })
+    },
     getTableData() {
       this.loading = true;
       financial.getIdleFeesPages(this.filter).then(res => {

Strides-Admin/src/views/financial/TopUp.vue

@@ -1,30 +1,51 @@
 <template>
   <div class="app-container">
-    <el-form
-      :model="filter.pageVo"
-      class="filter-container"
-      label-position="right">
       <div class="filter-view">
-        <el-form-item>
+        <el-date-picker
+          v-model="filter.pageVo.date"
+          type="month"
+          format="yyyy-MM"
+          value-format="yyyy-MM"
+          placeholder="Date"
+          @change="handleFilter"/>
+        <el-select
+          class="filter-view-item"
+          v-model="filter.pageVo.type"
+          placeholder="Top Up Type"
+          @change="handleFilter"
+          clearable>
+          <!-- <el-option
+            v-for="item in statusOptions"
+            :key="item"
+            :label="item"
+            :value="item" /> -->
+        </el-select>
+        <el-select
+          class="filter-view-item"
+          v-model="filter.pageVo.paymentStatus"
+          placeholder="Payment Status"
+          @change="handleFilter"
+          clearable>
+          <el-option
+            v-for="item in statusOptions"
+            :key="item"
+            :label="item"
+            :value="item" />
+        </el-select>
+        <div style="flex: 1; max-width: 250px;">
           <el-input
             clearable
             v-model="filter.pageVo.criteria"
-            placeholder="Search by Number/Email"
-            @keyup.enter.native="handleFilter" />
-        </el-form-item>
-        <el-form-item>
-          <el-date-picker
-            v-model="filter.pageVo.date"
-            type="month"
-            format="yyyy-MM"
-            value-format="yyyy-MM"
-            placeholder="Filter Date"/>
-        </el-form-item>
+            placeholder="Search by Email"
+            prefix-icon="el-icon-search"
+            @keyup.enter.native="handleFilter"
+            @change="handleFilter"/>
+        </div>
         <div>
           <el-button
             type="primary"
             icon="el-icon-search"
-            @click="getTableData">
+            @click="handleFilter">
             Search
           </el-button>
         </div>
@@ -34,10 +55,10 @@
       :data="table.list"
       v-loading="loading">
       <el-table-column
-        label="Transaction ID"
+        label="Payment ID"
         align="center"
         prop="creditHistoryPk"
-        min-width="120"/>
+        min-width="100"/>
       <el-table-column
         label="User ID"
         align="center"
@@ -127,6 +148,7 @@ export default {
       loading: false,
       listLoading: false,
       siteOptions: [],
+      statusOptions: [],
       stationOptions: [],
       table: {
         list: [],
@@ -139,17 +161,23 @@ export default {
           date: "",
           sitePk: "",
           criteria: "",
-          chargeBoxId: ""
+          chargeBoxId: "",
+          paymentStatus: ""
         }
-      },
+      }
     }
   },
   components: { Pagination },
   created() {
     //this.getSiteOptions()
+    this.getPaymentOptions();
     this.getTableData()
   },
   methods: {
+    handleFilter() {
+      this.filter.pageNo = 1;
+      this.getTableData();
+    },
     getSiteOptions(search) {
       site.getAllSiteList({siteName: search ?? ""}).then(res => {
         if (res.data && res.data.length > 0) {
@@ -174,6 +202,15 @@ export default {
         this.listLoading = false;
       })
     },
+    getPaymentOptions() {
+      financial.getPaymentOptions().then(res => {
+        if (res.data) {
+          this.statusOptions = res.data;
+        }
+      }).finally(() => {
+        this.listLoading = false;
+      })
+    },
     getTableData() {
       this.loading = true;
       financial.getTopUpPages(this.filter).then(res => {

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

@@ -1,82 +1,116 @@
 <template>
   <div class="app-container">
-    <el-form
-      :model="filter.pageVo"
-      class="filter-container"
-      label-position="right">
-      <div class="filter-view">
-        <el-form-item>
-          <el-input
-            clearable
-            v-model="filter.pageVo.criteria"
-            placeholder="Search by Number/Email"
-            @keyup.enter.native="getTableData" />
-        </el-form-item>
-        <el-form-item>
-          <el-date-picker
-            v-model="filter.pageVo.date"
-            type="month"
-            format="yyyy-MM"
-            value-format="yyyy-MM"
-            placeholder="Filter Date"/>
-        </el-form-item>
-        <el-form-item>
-          <el-select
-            filterable
-            remote
-            clearable
-            v-model="filter.pageVo.sitePk"
-            :remote-method="(s) => getSiteOptions(s)"
-            placeholder="Filter by site"
-            @change="getStationOptions">
-            <el-option
-              v-for="(item, index) in siteOptions"
-              :key="index"
-              :label="item.siteName"
-              :value="item.sitePk"/>
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-select
-            clearable
-            v-model="filter.pageVo.chargeBoxId"
-            placeholder="Filter by Station ID"
-            v-loading="listLoading">
-            <el-option
-              v-for="(item, index) in stationOptions"
-              :key="index"
-              :label="item.stationId"
-              :value="item.stationId"/>
-          </el-select>
-        </el-form-item>
-        <div>
-          <el-button
-            type="primary"
-            icon="el-icon-search"
-            @click="getTableData">
-            Search
-          </el-button>
-        </div>
+    <div class="filter-container filter-view">
+      <el-select
+        class="filter-view-item"
+        v-model="filter.pageVo.userType"
+        placeholder="User Type"
+        @change="toSearch"
+        clearable>
+        <el-option
+          v-for="item in userTypeOptions"
+          :key="item"
+          :label="item"
+          :value="item" />
+      </el-select>
+      <div style="flex: 1; max-width: 420px;">
+        <el-input
+          clearable
+          class="filter-view-item"
+          prefix-icon="el-icon-search"
+          v-model="filter.pageVo.criteria"
+          placeholder="Station ID, Vehicle, Transaction ID, Email, Carpark Code"
+          @keyup.enter.native="toSearch"
+          @change="toSearch"/>
       </div>
-    </el-form>
+      <!-- <el-date-picker
+        v-model="filter.pageVo.date"
+        class="filter-view-item"
+        type="month"
+        format="yyyy-MM"
+        value-format="yyyy-MM"
+        placeholder="Filter Date"/>
+      <el-select
+        filterable
+        remote
+        clearable
+        class="filter-view-item"
+        v-model="filter.pageVo.sitePk"
+        :remote-method="(s) => getSiteOptions(s)"
+        placeholder="Filter by site"
+        @change="getStationOptions">
+        <el-option
+          v-for="(item, index) in siteOptions"
+          :key="index"
+          :label="item.siteName"
+          :value="item.sitePk"/>
+      </el-select>
+      <el-select
+        clearable
+        class="filter-view-item"
+        v-model="filter.pageVo.chargeBoxId"
+        placeholder="Filter by Station ID"
+        v-loading="listLoading">
+        <el-option
+          v-for="(item, index) in stationOptions"
+          :key="index"
+          :label="item.stationId"
+          :value="item.stationId"/>
+      </el-select> -->
+      <div>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          @click="getTableData">
+          Search
+        </el-button>
+      </div>
+    </div>
     <el-table
       :data="table.list"
       v-loading="loading">
       <el-table-column
+        min-width="120"
         label="Transaction ID"
-        align="center"
-        prop="transactionPk"
-        min-width="120"/>
+        align="center">
+        <template slot-scope="{row}">
+          <span
+            class="link-type"
+            @click="viewTransiction(row)">
+            {{ row.transactionPk }}
+          </span>
+        </template>
+      </el-table-column>
       <el-table-column
         label="Site Name"
         align="center"
         prop="siteName"
-        min-width="100"/>
+        min-width="140"/>
       <el-table-column
         label="Station ID"
         align="center"
         prop="chargeBoxId"
-        min-width="100"/>
+        min-width="120"/>
+      <el-table-column
+        label="Vehicle"
+        align="center"
+        prop="vehicle"
+        min-width="120">
+        <template slot-scope="{row}" v-if="row.vehicles">
+          <span
+            v-for="(item, idx) in row.vehicles"
+            :key="idx"
+            style="display: block;"
+            :title="item">
+            {{item}}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="Carpark Code"
+        prop="carParkCode"
+        align="center"
+        min-width="120"/>
       <el-table-column
         label="Start Date/Time"
         align="center"
@@ -117,6 +151,7 @@
 <script>
 import site from '@/http/api/site'
 import ocpp from '@/http/api/ocpp'
+import apiUser from '../../http/api/apiUser.js'
 import financial from '@/http/api/financial'
 import Pagination from '@/components/Pagination'
 export default {
@@ -126,6 +161,7 @@ export default {
       listLoading: false,
       siteOptions: [],
       stationOptions: [],
+      userTypeOptions: [],
       table: {
         list: [],
         total: 0
@@ -137,6 +173,7 @@ export default {
           date: "",
           sitePk: "",
           criteria: "",
+          userType: "",
           chargeBoxId: ""
         }
       },
@@ -144,10 +181,15 @@ export default {
   },
   components: { Pagination },
   created() {
-    this.getSiteOptions()
+    this.getUserTypeOption();
+    //this.getSiteOptions()
     this.getTableData()
   },
   methods: {
+    toSearch() {
+      this.filter.pageNo = 1;
+      this.getTableData();
+    },
     getSiteOptions(search) {
       site.getAllSiteList({siteName: search ?? ""}).then(res => {
         if (res.data && res.data.length > 0) {
@@ -172,6 +214,18 @@ export default {
         this.listLoading = false;
       })
     },
+    getUserTypeOption() {
+      apiUser.getUserTypeOptions().then(res => {
+        if (res.data) {
+          this.userTypeOptions = res.data
+        }
+      }).catch(err => {
+        this.$message({
+          message: error,
+          type: 'error'
+        })
+      })
+    },
     getTableData() {
       this.loading = true;
       financial.getTransactionsPages(this.filter).then(res => {
@@ -187,6 +241,11 @@ export default {
           type: 'error'
         })
       })
+    },
+    viewTransiction(row) {
+      this.$router.push({
+        path: "/station-activities/transactions/" + row.transactionPk
+      })
     }
   }
 }

Strides-Admin/src/views/incident/connectivity.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <div class="radio-group">
+      <div class="radio-group" v-if="false">
         <el-radio-group
           v-model="params.pageVo.notification"
           @change="changeTab">
@@ -14,17 +14,33 @@
         </el-radio-group>
       </div>
       <div class="filter-view">
-        <div class="flex1" style="min-width: 200px; max-width: 350px;">
+        <el-select
+          class="filter-view-item"
+          v-model="params.pageVo.notification"
+          placeholder="Notification"
+          @change="toSearch"
+          clearable>
+          <el-option
+            v-for="(item,index) in typeTabs"
+            :key="index"
+            :label="item.name"
+            :value="item.value" />
+        </el-select>
+        <div class="flex1" style="max-width: 400px;">
           <el-input
             v-model="params.pageVo.criteria"
-            placeholder="Search by Site ID, Station ID"
-            @keyup.enter.native="getTableData" />
+            class="filter-view-item"
+            prefix-icon="el-icon-search"
+            placeholder="Search by Station Id, Carpark Code, Site 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>
@@ -37,7 +53,7 @@
       <el-table-column
         label="Site ID"
         align="center"
-        width="100">
+        min-width="80">
           <template slot-scope="{row}">
             <span>{{ row.sitePk }}</span>
           </template>
@@ -45,23 +61,32 @@
       <el-table-column
         label="Site Name"
         align="center"
-        prop="siteName"/>
+        prop="siteName"
+        min-width="120"/>
       <el-table-column
         label="Station ID"
         align="center"
-        prop="chargeBoxId"/>
+        prop="chargeBoxId"
+        min-width="100"/>
+      <el-table-column
+        label="Carpark Code"
+        prop="carParkCode"
+        align="center"
+        min-width="120"/>
       <el-table-column
         label="Timestamp"
         align="center"
-        prop="timestamp"/>
+        prop="timestamp"
+        min-width="120"/>
       <el-table-column
         label="Latest Notification"
         align="center"
-        prop="notification"/>
+        prop="notification"
+        min-width="180"/>
       <el-table-column
         label="Action"
         align="center"
-        width="100">
+        min-width="70">
           <template slot-scope="{row}">
             <el-dropdown
               class="action-dropdown"
@@ -119,6 +144,10 @@ export default {
     this.getTabList();
   },
   methods: {
+    toSearch() {
+      this.params.pageNo = 1;
+      this.getTableData();
+    },
     getTabList() {
       this.table.loading = true;
       api.getConnectivityTabs().then(res => {

Strides-Admin/src/views/incident/error_table.vue

@@ -2,11 +2,27 @@
   <div class="app-container">
     <div class="filter-container">
       <div class="filter-view">
-        <div class="flex1" style="min-width: 300px; max-width: 350px;">
+        <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>
+        <div class="flex2" style="max-width: 500px;">
           <el-input
-            v-model="filter.search"
-            placeholder="Search by Site ID, Station ID"
-            @keyup.enter.native="handleFilter" />
+            v-model="filter.pageVo.search"
+            class="filter-view-item"
+            prefix-icon="el-icon-search"
+            placeholder="Search by Site Name, Station ID, Carpark Code, Vendor Error Code"
+            @keyup.enter.native="handleFilter"
+            @change="handleFilter"
+            clearable/>
         </div>
         <div>
           <el-button
@@ -34,7 +50,7 @@
       <el-table-column
         label="Site"
         align="center"
-        class-name="fixed-width">
+        min-width="120">
           <template slot-scope="{row}">
             <span>{{ row.siteName }}</span>
           </template>
@@ -42,15 +58,20 @@
       <el-table-column
         label="Station ID"
         align="center"
-        class-name="fixed-width">
+        min-width="120">
           <template slot-scope="{row}">
             <span>{{ row.chargeBoxId }}</span>
           </template>
       </el-table-column>
+      <el-table-column
+        label="Carpark Code"
+        prop="carParkCode"
+        align="center"
+        min-width="120"/>
       <el-table-column
         label="Connector ID"
         align="center"
-        class-name="fixed-width">
+        min-width="120">
           <template slot-scope="{row}">
             <span>{{ row.connectorId }}</span>
           </template>
@@ -58,7 +79,7 @@
       <el-table-column
         label="Connector Status"
         align="center"
-        class-name="fixed-width">
+        min-width="140">
           <template slot-scope="{row}">
             <span>{{ row.status }}</span>
           </template>
@@ -66,7 +87,7 @@
       <el-table-column
         label="Error Code"
         align="center"
-        class-name="fixed-width">
+        min-width="100">
           <template slot-scope="{row}">
             <span>{{ row.errorCode }}</span>
           </template>
@@ -74,7 +95,7 @@
       <el-table-column
         label="Vendor Error Code"
         align="center"
-        class-name="fixed-width">
+        min-width="150">
           <template slot-scope="{row}">
             <span>{{ row.vendorErrorCode }}</span>
           </template>
@@ -82,7 +103,7 @@
       <el-table-column
         label="Timestamp"
         align="center"
-        class-name="fixed-width">
+        min-width="120">
           <template slot-scope="{row}">
             <span>{{ row.statusTimestamp }}</span>
           </template>
@@ -92,8 +113,8 @@
       <pagination
         v-show="total > 0"
         :total="total"
-        :page.sync="listQuery.page"
-        :limit.sync="listQuery.limit"
+        :page.sync="filter.pageNo"
+        :limit.sync="filter.pageSize"
         @pagination="handlePageChange" />
     </div>
   </div>
@@ -103,17 +124,24 @@
 import Pagination from '@/components/Pagination'
 import TableAction from '@/components/TableAction.vue'
 import api from '@/http/api/incident'
+import charge from '../../http/api/charge'
 
 export default {
   components: { Pagination, TableAction },
   data() {
     return {
       filter: {
-        search: "",
+        pageNo: 1,
+        pageSize: 10,
+        pageVo: {
+          search: "",
+          errorCode: "",
+        }
       },
       listLoading: true,
       logLoading: false,
       tableList: [],
+      errCodeOptions: [],
       total: 0,
       listQuery: {
         page: 1,
@@ -122,6 +150,7 @@ export default {
     }
   },
   created() {
+    this.getErrorCodeOptions();
     this.getList();
   },
   methods: {
@@ -130,6 +159,38 @@ export default {
       this.listQuery.page = 1;
       this.getList();
     },
+    getErrorCodeOptions() {
+      charge.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)
+      })
+    },
+    getList() {
+      this.listLoading = true
+      api.fetchErrorPages(this.filter).then((response) => {
+        const {success, data, total } = response
+        if (success) {
+          this.tableList = data
+          this.total = total
+        }
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: err
+        })
+      }).finally(() => {
+        this.listLoading = false
+      })
+    },
     handlePageChange() {
       this.listLoading = true;
       this.getList();
@@ -152,30 +213,6 @@ export default {
         this.logLoading = false
       })
     },
-    getList() {
-      this.listLoading = true
-      const params = {
-        pageSize: this.listQuery.limit,
-        pageNo: this.listQuery.page,
-        pageVo: {
-          criteria: this.filter.search,
-        },
-      }
-      api.fetchErrorPages(params).then((response) => {
-        const {success, data, total } = response
-        if (success) {
-          this.tableList = data
-          this.total = total
-        }
-      }).catch(err => {
-        this.$message({
-          type: 'error',
-          message: err
-        })
-      }).finally(() => {
-        this.listLoading = false
-      })
-    },
     downloadFile(res, fileName) {
       const blob = new Blob([res], {
         type: 'application/pdf;charset=utf-8'

Strides-Admin/src/views/limit/CreditLimit.vue

@@ -1,14 +1,38 @@
 <template>
   <div class="app-container">
-    <div class="filter-container right">
-      <el-button
-        v-if="!$route.meta.onlyView"
-        class="filter-item"
-        type="primary"
-        icon="el-icon-plus"
-        @click="addCreditLimit">
+    <div class="filter-container filter-view">
+      <el-select
+        class="filter-view-item"
+        v-model="filters.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>
+      <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="handleFilter"
+          @change="handleFilter"
+          clearable/>
+      </div>
+      <div class="filter-flex-button">
+        <el-button
+          v-if="!$route.meta.onlyView"
+          class="filter-item"
+          type="primary"
+          icon="el-icon-plus"
+          @click="addCreditLimit">
           Add Credit Limit
-      </el-button>
+        </el-button>
+      </div>
     </div>
     <el-table
       v-loading="listLoading"
@@ -30,6 +54,19 @@
         min-width="120">
         <template slot-scope="{row}">{{ row.groupName }}</template>
       </el-table-column>
+      <el-table-column
+        label="Service Provider"
+        align="center"
+        min-width="140">
+          <template slot-scope="{row}">
+            <span>{{ row.providerName }}</span>
+          </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="Country"
+        prop="country"
+        min-width="100"/>
       <el-table-column
         label="Monthly Credit Limit"
         align="center"
@@ -59,12 +96,32 @@
         align="center"
         min-width="140">
         <template slot-scope="{row}">
-          <TableAction
+          <!-- <TableAction
             :showEdit="!$route.meta.onlyView"
             :showView="$route.meta.onlyView"
             @edit="editLimit(row)"
             @delete="deleteLimit(row)"
-            @view="viewCreditLimit(row)"/>
+            @view="viewCreditLimit(row)"/> -->
+          <el-dropdown
+            class="action-dropdown"
+            @command="(v) => handleCommand(v, row)">
+            <i class="el-icon-more icon-action"></i>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                command="editLimit"
+                v-if="!$route.meta.onlyView">
+                Edit
+              </el-dropdown-item>
+              <el-dropdown-item
+                command="viewCreditLimit">
+                View
+              </el-dropdown-item>
+              <el-dropdown-item
+                command="deleteLimit">
+                Delete
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
         </template>
       </el-table-column>
     </el-table>
@@ -72,9 +129,9 @@
       <Pagination
         v-show="total > 0"
         :total="total"
-        :page.sync="listQuery.pageNo"
-        :limit.sync="listQuery.pageSize"
-        @pagination="handlePageChange" />
+        :page.sync="filters.pageNo"
+        :limit.sync="filters.pageSize"
+        @pagination="getList" />
     </div>
   </div>
 </template>
@@ -83,6 +140,7 @@
   import Pagination from '@/components/Pagination'
   import TableAction from '@/components/TableAction.vue'
   import limit from '../../http/api/limit.js'
+  import provider from '../../http/api/provider'
   export default {
     components: { Pagination, TableAction },
     data() {
@@ -90,35 +148,46 @@
         listLoading: false,
         tableList: [],
         total: 0,
-        listQuery: {
+        filters: {
           pageNo: 1,
           pageSize: 10,
           pageVo: {
-            criteria: ""
+            criteria: "",
+            providerPk: ""
           }
         },
+        providerOptions: []
       }
     },
     created() {
-      this.listLoading = true;
+      this.getAllProvider();
       this.getList();
     },
     methods: {
       handleFilter() {
-        this.listLoading = true;
-        this.listQuery.page = 1;
+        this.filters.pageNo = 1;
         this.getList();
       },
-      handlePageChange() {
-        this.listLoading = true;
-        this.getList();
+      getAllProvider() {
+        provider.getAllServiceProvider().then(res => {
+          if (res.data && res.data.length > 0) {
+            this.providerOptions = res.data
+          }
+        }).catch(err => {
+          this.$message.error(err);
+        });
       },
       getList() {
-        limit.getCreditLimitPages(this.listQuery).then(res => {
+        this.listLoading = true;
+        limit.getCreditLimitPages(this.filters).then(res => {
           this.listLoading = false;
           this.total = res.total;
           this.tableList = res.data
         }).catch(err => {
+          this.$message({
+            type: 'error',
+            message: err
+          })
           this.listLoading = false;
         });
       },
@@ -127,6 +196,9 @@
           path: '/partnership-management/monthly-credit-management/add'
         });
       },
+      handleCommand(cb, item) {
+        this[cb](item)
+      },
       editLimit(row) {
         //this.$store.commit('provider/SET_CreditLimit', row);
         this.$router.push({

Strides-Admin/src/views/limit/Detail.vue

@@ -1,79 +1,116 @@
 <template>
   <div class="card-container">
-    <div class="card-content">
-      <el-form
-        :model="creditLimitInfo"
-        v-loading="loading"
-        ref="creditLimitInfo"
-        label-position="right"
-        label-width="180px">
+    <el-form
+      :model="addForm"
+      v-loading="loading"
+      ref="addForm"
+      label-position="right"
+      label-width="180px">
+      <div class="card-content">
         <div class="section-title">Monthly Credit Limit:</div>
         <el-row :gutter="20">
           <el-col :xs="24" :md="12">
-            <el-form-item label="Group:">
-              <el-input
+            <el-form-item
+              label="Group:"
+              prop="groupPk">
+              <el-select
                 class="add-text"
-                v-model="creditLimit.groupName"
-                readonly/>
+                v-model="addForm.groupPk"
+                placeholder="Select with search"
+                disabled>
+                <el-option
+                  v-for="(item, index) in companyOptions"
+                  :key="index"
+                  :label="item.groupName"
+                  :value="item.groupPk"/>
+              </el-select>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :md="12">
-            <el-form-item label="Status:">
-              <el-input
+            <el-form-item
+              label="Status:"
+              prop="dataStatus">
+              <el-select
                 class="add-text"
-                v-model="creditLimit.creditLimitStatus"
-                readonly/>
+                v-model="addForm.dataStatus"
+                placeholder="Select"
+                disabled>
+                <el-option
+                  v-for="(item, index) in statusOptions"
+                  :key="index"
+                  :label="item.name"
+                  :value="item.value"/>
+              </el-select>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="20">
           <el-col :xs="24" :md="12">
-            <el-form-item label="Monthly Credit Limit:">
+            <el-form-item
+              label="Monthly Credit Limit:"
+              prop="creditLimitAmount">
               <span class="item-unit">(S$)</span>
               <el-input
                 class="add-text"
-                v-model="creditLimitInfo.creditLimitAmount"
+                v-model="addForm.creditLimitAmount"
+                placeholder="Add text"
                 readonly/>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :md="12">
-            <el-form-item label="Effective Start Date:">
-              <el-input
+            <el-form-item
+              label="Effective Start Date:"
+              prop="effectiveStartDate">
+              <el-date-picker
                 class="add-text"
-                v-model="creditLimitInfo.effectiveStartDate"
-                readonly/>
+                v-model="addForm.effectiveStartDate"
+                type="date"
+                format="yyyy-MM-dd"
+                value-format="yyyy-MM-dd"
+                placeholder="Select date"
+                disabled/>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="20">
           <el-col :xs="24" :md="12">
-            <el-form-item label="Used Credit Limit:">
+            <el-form-item
+              label="Used Credit Limit:">
               <span class="item-unit">(S$)</span>
               <el-input
                 class="add-text"
-                v-model="creditLimitInfo.usedCreditLimitAmount"
+                v-model="addForm.usedCreditLimitAmount"
+                placeholder="Add text"
+                maxlength="10"
                 readonly/>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :md="12">
-            <el-form-item label="Effective End Date:">
-              <el-input
+            <el-form-item
+              label="Effective End Date:"
+              prop="effectiveEndDate">
+              <el-date-picker
                 class="add-text"
-                v-model="creditLimitInfo.effectiveEndDate"
-                readonly/>
+                v-model="addForm.effectiveEndDate"
+                type="date"
+                format="yyyy-MM-dd"
+                value-format="yyyy-MM-dd"
+                placeholder="Select date"
+                disabled/>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="20">
           <el-col :xs="24" :md="12">
             <el-form-item
-              label="Remaining Credit Limit:"
-              prop="chargeBoxId">
+              label="Remaining Credit Limit:">
               <span class="item-unit">(S$)</span>
               <el-input
                 class="add-text"
-                v-model="creditLimitInfo.creditLimitRemainingAmount"
-                readonly/>
+                v-model="addForm.creditLimitRemainingAmount"
+                placeholder="Add text"
+                readonly
+                maxlength="10"/>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :md="12">
@@ -83,7 +120,8 @@
               <span class="item-unit">(S$)</span>
               <el-input
                 class="add-text"
-                v-model="creditLimitInfo.depositReceivedAmount"
+                v-model="addForm.depositReceivedAmount"
+                placeholder="Add text"
                 readonly/>
             </el-form-item>
           </el-col>
@@ -91,25 +129,24 @@
         <el-row :gutter="20">
           <el-col :xs="24" :md="12">
             <el-form-item
-              label="Service Provider:">
-              <el-input
-                class="add-text"
-                v-model="creditLimitInfo.providerPk"
-                readonly/>
-              <!-- <el-select
+              label="Service Provider:"
+              prop="providerPk">
+              <el-select
                 class="add-text"
                 v-model="addForm.providerPk"
-                placeholder="Select">
+                placeholder="Select"
+                disabled>
                 <el-option
                   v-for="(item, index) in providerOptions"
                   :key="index"
                   :label="item.providerName"
                   :value="''+item.providerPk"/>
-              </el-select> -->
+              </el-select>
             </el-form-item>
           </el-col>
         </el-row>
-        <div class="hr-full"/>
+      </div>
+      <div class="card-content flexcr">
         <div class="buttons">
           <el-button
             type="primary"
@@ -118,44 +155,74 @@
             Back
           </el-button>
         </div>
-      </el-form>
-    </div>
+        <div
+          class="flex1"
+          style="margin-left: 20px;"
+          v-if="isEdit">
+          <span
+            class="add-text"
+            :title='"CREATED BY " + addForm.createdBy + " ON " + addForm.createdOn'>
+            LAST UPDATED BY {{addForm.updatedBy}} TIMESTAMP: {{addForm.updatedOn}}
+          </span>
+        </div>
+      </div>
+    </el-form>
   </div>
 </template>
 
 <script>
-  import { mapState } from 'vuex'
   import limit from '../../http/api/limit.js'
+  import provider from '../../http/api/provider'
+  import group from '@/http/api/group'
   export default {
     data() {
       return {
         loading: false,
-        creditLimitInfo: {
-          creditLimitId: 0,
-          groupName: '',
+        companyOptions: [],
+        statusOptions: [],
+        providerOptions: [],
+        addForm: {
+          groupPk: '',
           creditLimitAmount: '',
           depositReceivedAmount: '',
           effectiveStartDate: "",
           effectiveEndDate: "",
-          creditLimitStatus: ""
-        }
+          dataStatus: "",
+          providerPk: "",
+          usedCreditLimitAmount: "0",
+          creditLimitRemainingAmount: '0'
+        },
+        companyParams: {
+          "pageSize": 20,
+          "pageNo": 1,
+          "pageVo": {
+            "criteria": ""
+          }
+        },
+        isEdit: false
       }
     },
-    computed: {
-      ...mapState('provider', ['creditLimit'])
-    },
     created() {
       this.loading = true;
-      this.getLimitInfo();
+      this.getCompanyList()
+      if (this.$route.params.id) {
+        this.isEdit = true;
+        this.getLimitInfo()
+      }
     },
     methods: {
+      clearWords() {
+        this.companyParams.pageVo.criteria = "";
+        this.getCompanyList();
+      },
+      filterCompany(word) {
+        this.companyParams.pageVo.criteria = word;
+        this.getCompanyList();
+      },
       getLimitInfo() {
-        var id = this.creditLimit.creditLimitId;
-        if (!id) id = this.$route.params.id;
-        limit.viewCreditLimit(id).then(res => {
-          this.loading = false;
+        limit.viewCreditLimit(this.$route.params.id).then(res => {
           if (res.data) {
-            this.creditLimitInfo = res.data
+            this.addForm = res.data
           }
         }).catch(err => {
           this.loading = false;
@@ -165,10 +232,92 @@
           })
         });
       },
+      getCompanyList() {
+        group.getGroupPages(this.companyParams).then(res => {
+          if (res.data) {
+            this.companyOptions = res.data
+          }
+        }).catch(err => {
+          this.$message({
+            message: err,
+            type: 'error'
+          })
+        }).finally(() => {
+          this.getLimitStatus();
+        });
+      },
+      getLimitStatus() {
+        limit.getLimitStatus().then(res => {
+          if (res.data) {
+            this.statusOptions = res.data
+          }
+        }).catch(err => {
+          this.$message({
+            message: err,
+            type: 'error'
+          })
+        }).finally(() => {
+          this.getAllProvider()
+        });
+      },
+      getAllProvider() {
+        provider.getAllServiceProvider().then(res => {
+          if (res.data && res.data.length > 0) {
+            this.providerOptions = res.data
+            if (!this.addForm.providerPk)
+              this.addForm.providerPk = res.data[0].providerPk + ""
+          }
+        }).finally(() => {
+          this.loading = false;
+        });
+      },
       handleClickCancleButton() {
-        this.$router.replace({
-          path: "/partnership-management/monthly-credit-management"
+        this.$nextTick(() => {
+          this.$router.push({
+            path: "/partnership-management/monthly-credit-management"
+          })
         })
+      },
+      handleClickSaveButton() {
+        this.$refs['addForm'].validate(result => {
+          if (result) {
+            this.isEdit ? this.updateLimites() : this.addLimites();
+          }
+        })
+      },
+      addLimites() {
+        this.loading = true;
+        limit.addCreditLimit(this.addForm).then(res => {
+          this.loading = false;
+          this.$message({
+            message: 'Add credit limit successfully',
+            type: 'success'
+          })
+          this.handleClickCancleButton();
+        }).catch(err => {
+          this.loading = false;
+          this.$message({
+            message: err,
+            type: 'error'
+          })
+        });
+      },
+      updateLimites() {
+        this.loading = true;
+        limit.updateCreditLimit(this.addForm).then(res => {
+          this.loading = false;
+          this.$message({
+            message: 'Update credit limit successfully',
+            type: 'success'
+          })
+          this.handleClickCancleButton();
+        }).catch(err => {
+          this.loading = false;
+          this.$message({
+            message: err,
+            type: 'error'
+          })
+        });
       }
     }
   }
@@ -184,7 +333,8 @@
     background-color: #F0F5FC;
   }
   .card-content {
-    padding: 15px 80px;
+    margin: 0 8px 16px;
+    padding: 15px 50px;
     border-radius: 6px;
     background-color: white;
   }
@@ -192,15 +342,16 @@
     color: #333;
     margin-top: 20px;
     margin-bottom: 30px;
-    font-size: 16px;
+    font-size: 15px;
     user-select: none;
     line-height: 24px;
-    font-weight: 500;
+    font-weight: 700;
     font-family: sans-serif;
     text-transform: uppercase;
   }
   .add-text {
     width: 100%;
+    font-size: 14px;
     max-width: 300px;
   }
   .add-text ::v-deep .el-textarea__inner {
@@ -232,7 +383,7 @@
   }
   .buttons {
     padding-top: 15px;
-    padding-bottom: 30px;
+    padding-bottom: 15px;
   }
   @media screen and (max-width: 500px) {
     .card-container {

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

@@ -72,13 +72,24 @@
       <el-table-column
         label="Action"
         align="center"
-        min-width="100">
+        min-width="70">
           <template slot-scope="{row}">
-            <TableAction
+            <!-- <TableAction
               :showDel="false"
               :showView="true"
               :showEdit="false"
-              @view="viewNotification(row)"/>
+              @view="viewNotification(row)"/> -->
+            <el-dropdown
+              class="action-dropdown"
+              @command="(v) => handleCommand(v, row)">
+              <i class="el-icon-more icon-action"></i>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item
+                  command="viewNotification">
+                  View
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
           </template>
       </el-table-column>
     </el-table>
@@ -134,6 +145,9 @@ export default {
         this.table.loading = false;
       })
     },
+    handleCommand(cb, item) {
+      this[cb](item)
+    },
     creatNotification() {
       this.$router.push({path: '/notification-management/in-app-notification/add'})
     },

Strides-Admin/src/views/ocpp/OCPPOperations.vue

@@ -3,16 +3,28 @@
     <div class="card-content">
       <div class="ocpp-content">
         <div class="section-title">Selected Stations</div>
-        <div class="flexc">
-          <span style="width: 200px;">Site: </span>
+        <div class="filter-view">
           <el-select
-            class="flex-item"
+            class="filter-view-item"
+            v-model="listQuery.pageVo.providerPk"
+            placeholder="Service Provider"
+            @change="changeSite"
+            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"
+            clearable
             filterable
             remote
             v-model="listQuery.pageVo.sitePk"
             :remote-method="filterSite"
             :loading="siteLoading"
-            placeholder="Select with search"
+            placeholder="Site Name"
             @change="changeSite">
             <el-option
               v-for="(item, index) in siteList"
@@ -331,6 +343,7 @@
   import site from '../../http/api/site'
   import ocpp from '../../http/api/ocpp'
   import util from './operationUtil'
+  import provider from '../../http/api/provider'
   const NOT_SPECIFIC = 'Not for a specific connector'
   export default {
     data() {
@@ -343,13 +356,15 @@
         siteList: [],
         siteKeyword: '',
         stationList: [],
+        providerOptions: [],
         total: 0,
         listQuery: {
           pageNo: 1,
           pageSize: 10,
           pageVo: {
             sitePk: '',
-            stationId: ''
+            stationId: '',
+            providerPk: ''
           }
         },
         operationInfo: {},
@@ -492,6 +507,7 @@
     },
     components: { Pagination },
     created() {
+      this.getAllProvider();
       this.getAllSite();
     },
     methods: {
@@ -503,9 +519,9 @@
       getAllSite() {
         site.getAllSiteList({siteName: this.siteKeyword}).then(res => {
           var list = []
-          if (this.siteKeyword == '') {
+          /*if (this.siteKeyword == '') {
             list = [{siteName: 'All', sitePk: ''}]
-          }
+          }*/
           if (res.data && res.data.length > 0) {
             this.siteList = list.concat(res.data)
           } else {
@@ -515,16 +531,34 @@
           this.changeSite();
         }).catch(err => {
           this.siteLoading = false;
+          this.$message({
+            message: error,
+            type: 'error'
+          })
+        });
+      },
+      getAllProvider() {
+        provider.getAllServiceProvider().then(res => {
+          if (res.data && res.data.length > 0) {
+            this.providerOptions = res.data
+          }
         });
       },
-      async changeSite() {
+      changeSite() {
         this.listLoading = true;
-        const res = await ocpp.getStationPages(this.listQuery);
-        if (res.success) {
-          this.total = res.total;
-          this.stationList = res.data;
-        }
-        this.listLoading = false;
+        const res = ocpp.getStationPages(this.listQuery).then(res => {
+          if (res.success) {
+            this.total = res.total;
+            this.stationList = res.data;
+          }
+        }).catch(err => {
+          this.$message({
+            message: error,
+            type: 'error'
+          })
+        }).finally(() => {
+          this.listLoading = false;
+        });
       },
       async changeOperation(index) {
         this.paramLoading = true;