Enhance Fleet Management

Strides-APP/android/app/version.properties

@@ -1,2 +1,2 @@
-#Sat May 06 18:20:32 CST 2023
-VERSION_CODE=219
+#Tue May 09 11:19:52 CST 2023
+VERSION_CODE=220

Strides-Admin/src/http/api/fleetCompany.js

@@ -1,47 +1,46 @@
 import { get, post } from '../http'
 
-// {
-//   "pageSize": 10,
-//   "pageNo": 1,
-//   "pageVo": {
-//     "criteria": ""
-//   }
-// }
-export function fetchFleetCompanyPages(data) {
-  return post('fleetCompany/getFleetCompanyPages', data)
+const fleet = {
+  // {
+  //   "pageSize": 10,
+  //   "pageNo": 1,
+  //   "pageVo": {
+  //     "criteria": ""
+  //   }
+  // }
+  fetchFleetCompanyPages(data) {
+    return post('fleetCompany/getFleetCompanyPages', data)
+  },
+  // {
+  //   "fleetCompanyName": "fleetCompanyName123",
+  //   "fleetCompanyType": "Private",
+  //   "contactPerson": "contactPerson",
+  //   "contactNumber": "8008208820"
+  // }
+  addFleetCompany(data) {
+    return post('fleetCompany/addFleetCompany', data)
+  },
+  // {
+  //   "fleetCompanyId": 2,
+  //   "fleetCompanyName": "fleetCompanyName",
+  //   "fleetCompanyType": "Private",
+  //   "contactPerson": "contactPerson",
+  //   "contactNumber": "8008208820"
+  // }
+  updateFleetCompany(data) {
+    return post('fleetCompany/updateFleetCompany', data)
+  },
+  // fleetCompanyId
+  fetchFleetCompanyDetail(params) {
+    return get('fleetCompany/getFleetCompany', params)
+  },
+  // fleetCompanyId
+  deleteFleetCompany(params) {
+    return get('fleetCompany/delFleetCompany', params)
+  },
+  fetchFleetCompanyType() {
+    return get('fleetCompany/getFleetCompanyType')
+  }
 }
 
-// {
-//   "fleetCompanyName": "fleetCompanyName123",
-//   "fleetCompanyType": "Private",
-//   "contactPerson": "contactPerson",
-//   "contactNumber": "8008208820"
-// }
-export function addFleetCompany(data) {
-  return post('fleetCompany/addFleetCompany', data)
-}
-
-// {
-//   "fleetCompanyId": 2,
-//   "fleetCompanyName": "fleetCompanyName",
-//   "fleetCompanyType": "Private",
-//   "contactPerson": "contactPerson",
-//   "contactNumber": "8008208820"
-// }
-export function updateFleetCompany(data) {
-  return post('fleetCompany/updateFleetCompany', data)
-}
-
-// fleetCompanyId
-export function fetchFleetCompanyDetail(params) {
-  return get('fleetCompany/getFleetCompany', params)
-}
-
-// fleetCompanyId
-export function deleteFleetCompany(params) {
-  return get('fleetCompany/delFleetCompany', params)
-}
-
-export function fetchFleetCompanyType() {
-  return get('fleetCompany/getFleetCompanyType')
-}
+export default fleet;

Strides-Admin/src/views/fleetCompany/FleetCompanyDetail.vue

@@ -1,28 +1,28 @@
 <template>
-  <div class="container">
-    <div class="content">
-      <el-form
-        :model="form"
-        :rules="rules"
-        ref="form"
-        label-position="left"
-        label-width="200px"
-      >
+  <div class="container" v-loading="loading">
+    <el-form
+      :model="form"
+      :rules="rules"
+      ref="form"
+      label-position="right"
+      label-width="180px">
+      <div class="content">
+        <div class="section-title">Fleet Company</div>
         <el-form-item
           prop="fleetCompanyName"
-          label="Fleet Company Name:"
-        >
+          label="Fleet Company Name:">
           <el-input
             v-model="form.fleetCompanyName"
+            class="add-text"
             placeholder=""
-          ></el-input>
+            maxlength="100"/>
         </el-form-item>
         <el-form-item
           prop="fleetCompanyType"
-          label="Fleet Type:"
-        >
+          label="Fleet Type:">
           <el-select
             v-model="form.fleetCompanyType"
+            class="add-text"
             placeholder="">
             <el-option
               v-for="item in options.fleetCompanyType"
@@ -34,76 +34,113 @@
         </el-form-item>
         <el-form-item
           prop="contactPerson"
-          label="Contact Person:"
-        >
+          label="Contact Person:">
           <el-input
             v-model="form.contactPerson"
+            class="add-text"
             placeholder=""
-          ></el-input>
+            maxlength="80"/>
         </el-form-item>
         <el-form-item
           prop="contactNumber"
-          label="Contact Number:"
-        >
+          label="Contact Number:">
           <el-input
             v-model="form.contactNumber"
+            class="add-text"
             placeholder=""
-          ></el-input>
+            maxlength="20"/>
         </el-form-item>
-      </el-form>
-      <el-divider></el-divider>
-      <div class="buttons">
-        <el-button
-          @click="onClickCancelButton"
-          type="primary"
-          class="cancel-button"
-        >
-          Cancel
-        </el-button>
-        <el-button
-          @click="onClickConfirmButton"
-          type="primary"
-          :loading="confirmButtonLoading"
-        >
-          Save
-        </el-button>
+        <el-form-item
+          label="Login ID:">
+          <el-input
+            v-model="form.loginId"
+            class="add-text"
+            placeholder=""
+            maxlength="50"/>
+        </el-form-item>
+        <el-form-item
+          label="Password Set:">
+          <el-input
+            v-model="form.password"
+            class="add-text"
+            type="password"
+            maxlength="20"/>
+        </el-form-item>
+        <el-form-item
+          label="Country:">
+          <el-select
+            v-model="form.countryCode"
+            class="add-text"
+            placeholder="">
+            <el-option
+              v-for="item in options.countryOptions"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </div>
+      <div class="content flexcr">
+        <div class="buttons">
+          <el-button
+            @click="onClickCancelButton"
+            type="primary"
+            class="cancel-button">
+            Cancel
+          </el-button>
+          <el-button
+            @click="onClickConfirmButton"
+            type="primary">
+            Save
+          </el-button>
+        </div>
+        <div
+          class="update-by"
+          v-if="isEdit">
+          <span
+            class="add-text"
+            :title='"CREATED BY " + form.createdBy + " ON " + form.createdOn'>
+            LAST UPDATED BY {{form.updatedBy}} TIMESTAMP: {{form.updatedOn}}
+          </span>
+        </div>
       </div>
-    </div>
+    </el-form>
   </div>
 </template>
 
 <script>
-import {
-  addFleetCompany,
-  fetchFleetCompanyDetail,
-  fetchFleetCompanyType,
-  updateFleetCompany
-} from '@/http/api/fleetCompany'
-
+import site from '@/http/api/site'
+import api from '@/http/api/fleetCompany'
+import setting from '../../settings.js'
 export default {
   name: "FleetCompanyDetail",
   data() {
     return {
+      loading: false,
       form: {
         fleetCompanyId: "",
         fleetCompanyName: "",
         fleetCompanyType: "",
         contactPerson: "",
         contactNumber: "",
+        loginId: "",
+        password: "",
+        countryCode: setting.defaultCountry
       },
       options: {
-        fleetCompanyType: [],
+        countryOptions: [],
+        fleetCompanyType: []
       },
-      confirmButtonLoading: false,
-
+      isEdit: false,
       rules: { 
         fleetCompanyType: [{
-          message: "required",
+          message: "Please select company type",
           trigger: "blur",
           required: true,
         }],
         fleetCompanyName: [{
-          message: "required",
+          message: "Please input company name",
           trigger: "blur",
           required: true,
         }],
@@ -120,117 +157,151 @@ export default {
       }
     }
   },
-  computed: {
-    isEdit() {
-      return !!this.$route.query.id
+  created() {
+    this.getCountryList()
+    this.getFleetCompanyType()
+    if (this.$route.query.id) {
+      this.isEdit = true;
+      this.getFleetCompanyDetail()
     }
   },
   methods: {
+    getCountryList() {
+      site.getCountryList().then(({ data }) => {
+        this.options.countryOptions = data
+      })
+    },
+    getFleetCompanyType() {
+      this.loading = true;
+      api.fetchFleetCompanyType().then(res => {
+        if (res.data) {
+          this.options.fleetCompanyType = res.data
+          if (!this.isEdit) {
+            const defaultType = this.options.fleetCompanyType[0].value
+            this.form.fleetCompanyType = defaultType
+          }
+        }
+      }).catch(error => {
+        this.$message({
+          message: error,
+          type: 'error'
+        })
+      }).finally(() => {
+        this.loading = false;
+      })
+    },
+    getFleetCompanyDetail() {
+      api.fetchFleetCompanyDetail({
+        fleetCompanyId: this.$route.query.id,
+      }).then(res => {
+        if (res.data) {
+          this.form = res.data
+        }
+      }).catch(err => {
+        this.$message({
+          message: err,
+          type: 'error'
+        })
+      })
+    },
     onClickCancelButton() {
-      this.$router.back()
+      this.$router.push({
+        path: "/fleetCompany"
+      })
     },
     onClickConfirmButton() {
       this.$refs.form.validate(async (valid, fields) => {
         if (valid) {
-          this.confirmButtonLoading = true
-          try {
-            let result
-            if (this.isEdit) {
-              result = await updateFleetCompany({ ...this.form })
-            } else {
-              result = await addFleetCompany({ ...this.form })
-            }
-            if (result.success) {
-              this.$notify.success(result.msg)
-              this.$router.back()
-            }
-          } catch (error) {
-            this.$notify.error(error)
-          }
-          this.confirmButtonLoading = false
-        } else {
-          this.$notify.warning(fields[Object.keys(fields)[0]][0].message)
+          this.loading = true
+          this.isEdit ? this.onUpdateCompany() : this.onAddCompany();
         }
       })
     },
-
-    getFleetCompanyId() {
-      if (this.isEdit) {
-        return this.$route.query.id
-      }
-      return ''
-    },
-    async getFleetCompanyDetail() {
-      if (this.isEdit) {
-        const id = this.getFleetCompanyId()
-        const params = { fleetCompanyId: id }
-        try {
-          const { success, data } = await fetchFleetCompanyDetail(params)
-          if (success) {
-            this.form.fleetCompanyId = data.fleetCompanyId
-            this.form.fleetCompanyName = data.fleetCompanyName
-            this.form.fleetCompanyType = data.fleetCompanyType
-            this.form.contactNumber = data.contactNumber
-            this.form.contactPerson = data.contactPerson
-          }
-        } catch (error) {
-          this.$notify.error(error)
-        }
-      }
+    onAddCompany() {
+      api.addFleetCompany(this.form).then(res => {
+        this.$message({
+          type: 'success',
+          message: "Add successfully!"
+        })
+        this.onClickCancelButton()
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: err
+        })
+      }).finally(() => {
+        this.loading = false;
+      })
     },
-    async getFleetCompanyType() {
-      try {
-        const { success, data } = await fetchFleetCompanyType()
-        if (success) {
-          this.options.fleetCompanyType = data
-          if (!this.isEdit) {
-            const defaultType = this.options.fleetCompanyType[0].value
-            this.form.fleetCompanyType = defaultType
-          }
-        }
-      } catch (error) {
-        this.$notify.error(error)
-      }
+    onUpdateCompany() {
+      api.updateFleetCompany(this.form).then(res => {
+        this.$message({
+          type: 'success',
+          message: "Update successfully!"
+        })
+        this.onClickCancelButton()
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: err
+        })
+      }).finally(() => {
+        this.loading = false;
+      })
     }
-  },
-  async created() {
-    await this.getFleetCompanyType()
-    await this.getFleetCompanyDetail()
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
 @import '../../styles/variables.scss';
   .container {
     width: 100%;
-    padding: 20px 50px;
+    padding: 20px 60px;
+    min-height: $mainAppMinHeight;
     background-color: #F0F5FC;
   }
   .content {
-    padding: 45px 0px;
+    margin: 0 8px 16px;
+    padding: 15px 80px;
     border-radius: 6px;
-    min-height: calc(#{$mainAppMinHeight} - (2 * 20px));
     background-color: white;
-    .el-select {
-      width: 100%;
-    }
-    .el-form {
-      padding: 0 45px;
-    }
-    ::v-deep .el-divider {
-      margin: 80px 0 60px;
+  }
+  
+  .section-title {
+    color: #333;
+    margin-top: 20px;
+    margin-bottom: 30px;
+    font-size: 15px;
+    user-select: none;
+    line-height: 24px;
+    font-weight: bold;
+    font-family: sans-serif;
+    text-transform: uppercase;
+  }
+  .add-text {
+    width: 100%;
+    max-width: 300px;
+  }
+  .add-text ::v-deep .el-textarea__inner {
+    font-family: sans-serif;
+  }
+  .hr {
+    height: 2px;
+    margin: 10px -40px;
+    background-color: #F0F5FC;
+  }
+  .buttons {
+    padding-top: 15px;
+    padding-bottom: 15px;
+  }
+  @media screen and (max-width: 500px) {
+    .container {
+      padding: 0px;
     }
-    .buttons {
-      padding: 0 45px;
-      .cancelButton {
-        color: #555;
-        background: #FFFFFF;
-        border: 1px solid #001489;
-        box-sizing: border-box;
-        border-radius: 4px;
-      }
+    .content {
+      padding: 15px 30px;
     }
   }
+  
 </style>>

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

@@ -1,114 +1,92 @@
 <template>
-  <div class="container">
-    <div class="content">
+  <div class="app-container">
+    <div class="filter-container">
       <el-form class="form" ref="form" :model="form" label-width="80px">
-        <el-row :gutter="12">
-          <el-col :span="6">
+        <div class="filter-view">
+          <div style="flex: 1; min-width: 180px; max-width: 300px;">
             <el-input
               v-model="form.criteria"
               clearable
               placeholder="Search by Fleet Company Name"></el-input>
-          </el-col>
-          <el-col :span="3">
+          </div>
+          <div>
             <el-button 
               @click="onClickSearch"
               icon="el-icon-search"
-              type="primary"
-            >
+              type="primary">
               Search
             </el-button>
-          </el-col>
-          <el-col :offset="12" :span="3" >
+          </div>
+          <div class="flex1"></div>
+          <div>
             <el-button
               icon="el-icon-plus"
               type="primary"
-              @click="onClickAdd"
-            >
+              @click="onClickAdd">
               Add Company
             </el-button>
-          </el-col>
-        </el-row>
+          </div>
+        </div>
       </el-form>
-      <el-table :data="table.list">
-        <el-table-column
-          align="center"
-          label="Fleet Co ID"
-          prop="fleetCompanyId"
-        ></el-table-column>
-        <el-table-column
-          align="center"
-          label="Name"
-          prop="fleetCompanyName"
-        ></el-table-column>
-        <el-table-column
-          align="center"
-          label="Type"
-          prop="fleetCompanyType"
-        ></el-table-column>
-        <el-table-column
-          align="center"
-          label="No. Of Drivers"
-          prop="noOfDrivers"
-        ></el-table-column>
-        <el-table-column
-          align="center"
-          label="Action"
-          width="180"
-        >
-          <template v-slot="{ row }">
-            <el-row
-              :gutter="10"
-              type="flex"
-              justify="space-between"
-              align="middle"
-              class="action"
-            >
-              <el-col :span="11">
-                <el-button
-                  icon='el-icon-edit'
-                  class="editButton"
-                  type="text"
-                  @click="onClickEditButton(row)"
-                >
-                  Edit
-                </el-button>
-              </el-col>
-              <el-divider
-                direction="vertical"
-              ></el-divider>
-              <el-col :span="11">
-                <el-button
-                  class="deleteButton"
-                  icon="el-icon-delete"
-                  type="text"
-                  @click="onClickDeleteButton(row)"
-                >
-                  Delete
-                </el-button>
-              </el-col>
-            </el-row>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div class="right">
-        <pagination
-          v-show="table.total > 0"
-          :total="table.total"
-          :page.sync="table.pageNo"
-          :limit.sync="table.pageSize"
-          @pagination="handlePageChange" />
-      </div>
+    </div>
+    <el-table :data="table.list">
+      <el-table-column
+        align="center"
+        label="Fleet Co ID"
+        prop="fleetCompanyId"
+      ></el-table-column>
+      <el-table-column
+        align="center"
+        label="Name"
+        prop="fleetCompanyName"
+      ></el-table-column>
+      <el-table-column
+        align="center"
+        label="Type"
+        prop="fleetCompanyType"
+      ></el-table-column>
+      <el-table-column
+        align="center"
+        label="Approved"
+        prop="approvedCount"/>
+      <el-table-column
+        align="center"
+        label="Pending"
+        prop="pendingCount"/>
+      <!-- <el-table-column
+        align="center"
+        label="No. Of Drivers"
+        prop="noOfDrivers"/> -->
+      <el-table-column
+        align="center"
+        label="Action"
+        width="180">
+        <template v-slot="{ row }">
+          <TableAction
+            @edit="onClickEditButton(row)"
+            @delete="onClickDeleteButton(row)"/>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="right">
+      <pagination
+        v-show="table.total > 0"
+        :total="table.total"
+        :page.sync="table.pageNo"
+        :limit.sync="table.pageSize"
+        @pagination="handlePageChange" />
     </div>
   </div>
 </template>
 
 <script>
+import TableAction from '@/components/TableAction.vue'
 import Pagination from '@/components/Pagination' 
-import { deleteFleetCompany, fetchFleetCompanyPages } from '@/http/api/fleetCompany'
+import api from '@/http/api/fleetCompany'
 
 export default {
   name: "FleetCompanyList",
-  components: { Pagination },
+  components: { Pagination, TableAction },
   data() {
     return {
       form: {
@@ -135,7 +113,7 @@ export default {
         success,
         data,
         total,
-      } = await fetchFleetCompanyPages(params)
+      } = await api.fetchFleetCompanyPages(params)
       if (success) {
         this.table.list = data
         this.table.total = total
@@ -149,18 +127,14 @@ export default {
     onClickAdd() {
       this.$router.push({ name : "AddFleetCompany" })
     },
-    async onClickDeleteButton(fleetCompany) {
-      try {
-        const { success, msg } = await deleteFleetCompany({
-          fleetCompanyId: fleetCompany.fleetCompanyId
-        })
-        if (success) {
-          this.$notify.success(msg)
-          this.getFleetCompanyPages()
-        }
-      } catch (error) {
-        this.$notify.error(error)
-      }
+    onClickDeleteButton(fleetCompany) {
+      this.$confirm('Are you sure you want to delete this company?', 'Delete', {
+        confirmButtonText: 'OK',
+        cancelButtonText: 'Cancel',
+        type: 'warning'
+      }).then(res => {
+        this.onDeleteCompany(fleetCompany);
+      })
     },
     onClickEditButton(fleetCompany) {
       this.$router.push({
@@ -168,7 +142,24 @@ export default {
         query: { id: fleetCompany.fleetCompanyId },
       })
     },
-
+    onDeleteCompany(fleetCompany) {
+      api.deleteFleetCompany({
+        fleetCompanyId: fleetCompany.fleetCompanyId
+      }).then(res => {
+        if (success) {
+          this.$message({
+            type: 'success',
+            message: 'Delete success!'
+          })
+          this.getFleetCompanyPages()
+        }
+      }).then(error => {
+        this.$message({
+          type: 'error',
+          message: error
+        })
+      })
+    },
     handlePageChange() {
       this.listLoading = true;
       this.getFleetCompanyPages()
@@ -181,33 +172,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/variables.scss';
-  .container {
-    width: 100%;
-    padding: 20px 50px;
-    background-color: #F0F5FC;
-  }
-  .content {
-    padding: 45px 45px;
-    border-radius: 6px;
-    min-height: calc(#{$mainAppMinHeight} - (2 * 20px));
-    background-color: white;
-    .form {
-      margin-bottom: 30px;
-    }
-    .action {
-      .editButton {
-        color: #3179E4;
-      }
-      .deleteButton {
-        color: #ED3F3F;
-      }
-    }
-  }
-  .el-button {
-    width: 100%;
-  }
-  .el-input {
-    width: 100%;
-  }
+
 </style>

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

@@ -180,7 +180,7 @@
 <script>
   import limit from '../../http/api/limit.js'
   import provider from '../../http/api/provider'
-  import { fetchFleetCompanyPages } from '../../http/api/fleetCompany';
+  import fleet from '../../http/api/fleetCompany.js'
   export default {
     data() {
       return {
@@ -285,7 +285,7 @@
         });
       },
       getCompanyList() {
-        fetchFleetCompanyPages(this.companyParams).then(res => {
+        fleet.fetchFleetCompanyPages(this.companyParams).then(res => {
           if (res.data) {
             this.companyOptions = res.data
           }

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

@@ -126,7 +126,6 @@
 <script>
   import { mapState } from 'vuex'
   import limit from '../../http/api/limit.js'
-  import { fetchFleetCompanyPages } from '../../http/api/fleetCompany';
   export default {
     data() {
       return {

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

@@ -148,7 +148,7 @@
 <script>
   import { mapState } from 'vuex'
   import limit from '../../http/api/limit.js'
-  import { fetchFleetCompanyPages } from '../../http/api/fleetCompany';
+  import fleet from '../../http/api/fleetCompany.js'
   export default {
     data() {
       return {
@@ -241,7 +241,7 @@
         this.getCompanyList();
       },
       getCompanyList() {
-        fetchFleetCompanyPages(this.companyParams).then(res => {
+        fleet.fetchFleetCompanyPages(this.companyParams).then(res => {
           if (res.data) {
             this.companyOptions = res.data
           }

Strides-Admin/src/views/site/SiteManagement.vue

@@ -255,22 +255,19 @@ export default {
           type: 'warning'
         },
       ).then(res => {
-        deleteSite({ sitePk: row.sitePk })
-          .then(() => {
-            this.$notify({
-              title: 'Success',
-              message: `delete site success ${row.siteName}`,
-              type: 'success',
-              duration: 2000
-            })
-            this.list.splice(index, 1)
-          }).catch(() => {
-            this.$notify({
-              title: 'Failed',
-              message: `Delete site error: ${error}`,
-              type: 'error',
-              duration: 5000
-            })
+        deleteSite({ sitePk: row.sitePk }).then(() => {
+          this.$message({
+            message: `delete site success ${row.siteName}`,
+            type: "success",
+            duration: 3000,
+          })
+          this.list.splice(index, 1)
+        }).catch(error => {
+          this.$message({
+            message: error,
+            type: "error",
+            duration: 3000,
+          })
         })
       })
     },