ensure there's a country selection to assign for CPO, FLEET, USER, PHV USER, SITE.

Strides-Admin/src/router/ProviderRouter.js

@@ -22,8 +22,8 @@ export default {
     },
     {
       path: '/service-provider-management/add',
-      component: () => import('@/views/provider/addProvider'),
-      name: 'add-service-provider-management',
+      component: () => import('@/views/provider/detail'),
+      name: 'add-service-provider',
       meta: {
         title: 'Add New Provider',
         activeMenu: '/service-provider-management/index'
@@ -31,9 +31,9 @@ export default {
       hidden: true
     },
     {
-      path: 'edit',
-      component: () => import('@/views/provider/editProvider'),
-      name: 'edit-service-provider-management',
+      path: '/service-provider-management/edit/:id',
+      component: () => import('@/views/provider/detail/'),
+      name: 'edit-service-provider',
       meta: {
         title: 'Edit Provider',
         activeMenu: '/service-provider-management/index'

Strides-Admin/src/router/fleetCompany.js

@@ -24,11 +24,11 @@ export default {
       hidden: true
     },
     {
-      path: 'fleet-company-detail',
+      path: '/fleetCompany/add',
       component: () => import('@/views/fleetCompany/FleetCompanyDetail'),
       name: 'AddFleetCompany',
       meta: {
-        title: 'Add New Fleet Company',
+        title: 'Add Fleet Company',
         icon: 'sidebar-submenu-item',
         activeIcon: 'sidebar-submenu-item-active',
         affix: true,
@@ -38,11 +38,11 @@ export default {
       hidden: true
     },
     {
-      path: 'fleet-company-detail',
+      path: '/fleetCompany/edit/:id',
       component: () => import('@/views/fleetCompany/FleetCompanyDetail'),
       name: 'EditFleetCompany',
       meta: {
-        title: 'Edit New Fleet Company',
+        title: 'Edit Fleet Company',
         icon: 'sidebar-submenu-item',
         activeIcon: 'sidebar-submenu-item-active',
         affix: true,

Strides-Admin/src/views/Reports.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="view-container">
+  <div class="app-container">
     <div
-      class="view-content"
+      class="filter-container"
       v-loading="loading">
       <div class="section-title">Report</div>
       <el-form
@@ -20,8 +20,10 @@
               />
             </el-select>
           </el-form-item>
-
-          <el-form-item label="Service Provider:" v-if="reportFilter.reportType !== 'MTU' && reportFilter.reportType !== 'MAF'">
+          <el-form-item
+            label="Service Provider:"
+            v-if="reportFilter.reportType !== 'MTU' && reportFilter.reportType !== 'MAF'"
+            class="row-item">
             <el-select v-model="reportFilter.providerPk">
               <el-option
                 v-for="serviceProvider in serviceProviderOptions"
@@ -33,9 +35,9 @@
           </el-form-item>
           <el-form-item
             label="Site:"
+            class="row-item"
             v-if="reportFilter.reportType == 'MAF'">
             <el-select
-              class="add-text"
               filterable
               remote
               v-model="reportFilter.sitePk"
@@ -103,77 +105,76 @@
           </el-button>
         </div>
       </el-form>
-
-      <el-table
-        :data="reports"
-        fit
-        style="width: 100%;">
-        <el-table-column
-          label="File Name"
-          prop="fileName"
-          align="center"
-          min-width="400"
-          >
+    </div>
+    <el-table
+      :data="reports"
+      fit
+      style="width: 100%;">
+      <el-table-column
+        label="File Name"
+        prop="fileName"
+        align="center"
+        min-width="400"
+        >
+        <template slot-scope="{row}">
+          <span>{{ row.fileName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="Month"
+        prop="monthStr"
+        align="center"
+        min-width="90"
+      >
           <template slot-scope="{row}">
-            <span>{{ row.fileName }}</span>
+            <span>{{ row.monthStr }}</span>
           </template>
-        </el-table-column>
-        <el-table-column
-          label="Month"
-          prop="monthStr"
-          align="center"
-          min-width="90"
-        >
-            <template slot-scope="{row}">
-              <span>{{ row.monthStr }}</span>
-            </template>
-        </el-table-column>
-        <el-table-column
-          label="Service Provider"
-          prop="providerName"
-          align="center"
-          min-width="170"
-        >
-            <template slot-scope="{row}">
-              <span>{{ row.providerName }}</span>
-            </template>
-        </el-table-column>
-        <el-table-column
-          label="Creation Date/Time"
-          prop="createDateTime"
-          align="center"
-          min-width="180"
-        >
-            <template slot-scope="{row}">
-              <span>{{ row.createDateTime }}</span>
-            </template>
-        </el-table-column>
-        <el-table-column
-          v-if="!$route.meta.onlyView"
-          label="Action"
-          align="center"
-          min-width="160"
-        >
-            <template slot-scope="{row}">
-              <el-button
-                :loading="row.loading"
-                icon="el-icon-download"
-                class="export-button"
-                @click="handleExportExcel(row)"
-              >
-                Export
-              </el-button>
-            </template>
-        </el-table-column>
-      </el-table>
-      <div class="right">
-        <pagination
-          v-show="total > 0"
-          :total="total"
-          :page.sync="pagination.page"
-          :limit.sync="pagination.limit"
-          @pagination="handlePageChange" />
-      </div>
+      </el-table-column>
+      <el-table-column
+        label="Service Provider"
+        prop="providerName"
+        align="center"
+        min-width="170"
+      >
+          <template slot-scope="{row}">
+            <span>{{ row.providerName }}</span>
+          </template>
+      </el-table-column>
+      <el-table-column
+        label="Creation Date/Time"
+        prop="createDateTime"
+        align="center"
+        min-width="180"
+      >
+          <template slot-scope="{row}">
+            <span>{{ row.createDateTime }}</span>
+          </template>
+      </el-table-column>
+      <el-table-column
+        v-if="!$route.meta.onlyView"
+        label="Action"
+        align="center"
+        min-width="160"
+      >
+          <template slot-scope="{row}">
+            <el-button
+              :loading="row.loading"
+              icon="el-icon-download"
+              class="export-button"
+              @click="handleExportExcel(row)"
+            >
+              Export
+            </el-button>
+          </template>
+      </el-table-column>
+    </el-table>
+    <div class="right">
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="pagination.page"
+        :limit.sync="pagination.limit"
+        @pagination="handlePageChange" />
     </div>
   </div>
 </template>
@@ -427,23 +428,29 @@ export default {
 
   .section-title {
     color: #333;
+    padding-left: 30px;
     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;
   }
 
   .row {
     display: flex;
+    flex-wrap: wrap;
   }
 
   .row-item {
     position: relative;
-    margin-right: 66px;
+    margin-right: 20px;
+  }
+  
+  .row-item > * {
+    width: 100%;
   }
 
   .generate-button {
@@ -454,5 +461,9 @@ export default {
   .export-button {
     background-color: #fff;
   }
-
+  @media screen and (max-width: 500px) {
+    .view-content {
+      padding: 15px 30px;
+    }
+  }
 </style>

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

@@ -160,7 +160,7 @@ export default {
   created() {
     this.getCountryList()
     this.getFleetCompanyType()
-    if (this.$route.query.id) {
+    if (this.$route.params.id) {
       this.isEdit = true;
       this.getFleetCompanyDetail()
     }
@@ -192,10 +192,10 @@ export default {
     },
     getFleetCompanyDetail() {
       api.fetchFleetCompanyDetail({
-        fleetCompanyId: this.$route.query.id,
+        fleetCompanyId: this.$route.params.id,
       }).then(res => {
         if (res.data) {
-          this.form = res.data
+          this.form = Object.assign(this.form, res.data)
         }
       }).catch(err => {
         this.$message({

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

@@ -125,7 +125,9 @@ export default {
       this.getFleetCompanyPages()
     },
     onClickAdd() {
-      this.$router.push({ name : "AddFleetCompany" })
+      this.$router.push({
+        path: "/fleetCompany/add"
+      })
     },
     onClickDeleteButton(fleetCompany) {
       this.$confirm('Are you sure you want to delete this company?', 'Delete', {
@@ -136,10 +138,9 @@ export default {
         this.onDeleteCompany(fleetCompany);
       })
     },
-    onClickEditButton(fleetCompany) {
+    onClickEditButton(row) {
       this.$router.push({
-        name : "EditFleetCompany",
-        query: { id: fleetCompany.fleetCompanyId },
+        path: "/fleetCompany/edit/" + row.fleetCompanyId
       })
     },
     onDeleteCompany(fleetCompany) {

Strides-Admin/src/views/provider/ServiceProviderManagement.vue

@@ -144,8 +144,10 @@
         this.$router.push({path: '/service-provider-management/add'})
       },
       editProvider(row) {
-        this.$store.commit('provider/SET_ProviderInfo', row)
-        this.$router.push({path: '/service-provider-management/edit'})
+        //this.$store.commit('provider/SET_ProviderInfo', row)
+        this.$router.push({
+          path: '/service-provider-management/edit/' + row.providerPk,
+        });
       },
       deleteProvider(row) {
         this.$confirm('Are you sure you want to delete this service provider?', 'Delete', {

Strides-Admin/src/views/provider/detail.vue

@@ -0,0 +1,346 @@
+<template>
+  <div class="container" v-loading="loading">
+    <el-form
+      :model="form"
+      :rules="rule"
+      ref="form"
+      label-position="right"
+      label-width="150px"
+      style="width: 100%;">
+      <div class="content">
+        <div class="section-title">Service Provider</div>
+        <el-form-item
+          label="Provider Name:"
+          prop="providerName">
+          <el-input
+            class="add-text"
+            maxlength="30"
+            v-model="form.providerName"
+            placeholder="Add text"/>
+        </el-form-item>
+        <el-form-item
+          label="Contact Person:">
+          <el-input
+            class="add-text"
+            maxlength="50"
+            v-model="form.providerAddress"
+            placeholder="Add text"/>
+        </el-form-item>
+        <el-form-item
+          label="Login ID:"
+          prop="loginId">
+          <el-input
+            class="add-text"
+            maxlength="50"
+            v-model="form.loginId"
+            placeholder="Add text"/>
+        </el-form-item>
+        <el-form-item
+          label="Password Set:">
+          <el-input
+            class="add-text"
+            maxlength="50"
+            v-model="form.password"
+            type="password"
+            placeholder="Add text"/>
+        </el-form-item>
+        <el-form-item
+          label="Contact Number:">
+          <el-input
+            class="add-text"
+            maxlength="15"
+            v-model="form.providerContact"
+            placeholder="Add text"/>
+        </el-form-item>
+        <el-form-item
+          label="Country:">
+          <el-select
+            v-model="form.countryCode"
+            class="add-text"
+            placeholder="">
+            <el-option
+              v-for="item in countryOptions"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="Provider Logo:">
+          <el-upload
+            class="logo-upload"
+            action
+            :limit="1"
+            :show-file-list="false"
+            :on-remove="file => removeLogo(file)"
+            :http-request="file => uploadLogo(file)"
+            accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
+            v-loading="uploading">
+            <el-image
+              v-if="logos.length > 0"
+              :src="logos[0].url"
+              title="Click to update logo"/>
+            <i v-else
+              class="el-icon-plus avatar-uploader-icon"
+              title="Click to select file"/>
+          </el-upload>
+        </el-form-item>
+      </div>
+      <div class="content flexcr">
+        <div class="buttons">
+          <el-button
+            type="primary"
+            class="cancel-button"
+            @click="handleClickCancleButton">
+            Cancel
+          </el-button>
+          <el-button
+            style="margin-left: 20px;"
+            type="primary"
+            native-type="submit"
+            @click="onSaveClick">
+            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>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  import site from '@/http/api/site'
+  import {baseURL} from '../../http/http'
+  import provider from '../../http/api/provider'
+  import setting from '../../settings.js'
+  export default {
+    data() {
+      return {
+        loading: false,
+        uploading: false,
+        rule: {
+          providerName: {
+            required: true,
+            trigger: 'blur',
+            message: 'Please type provider name'
+          },
+          loginId: {
+            required: true,
+            trigger: 'blur',
+            message: 'Please type login id'
+          }
+        },
+        form: {
+          loginId: '',
+          password: "",
+          providerName: '',
+          providerAddress: '',
+          providerContact: '',
+          providerLogo: '',
+          countryCode: setting.defaultCountry
+        },
+        logos: [],
+        imgAddress: baseURL,
+        countryOptions: [],
+        isEdit: false
+      }
+    },
+    created() {
+      this.loading = true;
+      this.getCountryList()
+      if (this.$route.params.id) {
+        this.isEdit = true;
+        this.getProviderInfo()
+      }
+    },
+    methods: {
+      getCountryList() {
+        site.getCountryList().then(({ data }) => {
+          this.countryOptions = data
+        }).finally(() => {
+          this.loading = false
+        })
+      },
+      getProviderInfo() {
+        provider.getServiceProviderInfo({
+          providerPk: this.$route.params.id
+        }).then(res => {
+          if (res.data) {
+            this.form = Object.assign(this.form, res.data);
+            if (this.form.providerLogo) {
+              this.logos.push({
+                path: this.form.providerLogo,
+                url: this.imgAddress + this.form.providerLogo
+              });
+            }
+          }
+        })
+      },
+      uploadLogo(file) {
+        this.uploading = true;
+        const formData = new FormData()
+        formData.append('file', file.file)
+        provider.uploadLogo(formData).then(res => {
+          //console.log("upload", res);
+          if (this.logos.length == 0) {
+            this.logos.push({
+              url: ""
+            })
+          }
+          this.logos[0] = ({
+            path: res.data.picturePath,
+            url: this.imgAddress + res.data.picturePath
+          })
+        }).catch(err => {
+          this.$message({
+            message: err,
+            type: 'error'
+          })
+        }).finally(() => {
+          this.uploading = false;
+        })
+      },
+      removeLogo(file) {
+        this.logos = []
+        this.form.providerLogo = ""
+      },
+      onSaveClick() {
+        this.$refs['form'].validate(result => {
+          if (result) {
+            if (this.logos.length > 0) {
+              this.form.providerLogo = this.logos[0].path
+            } else {
+              this.form.providerLogo = "";
+            }
+            this.isEdit ? this.updateProvider() : this.addProvider();
+          }
+        })
+      },
+      addProvider() {
+        this.loading = true;
+        provider.addServiceProvider(this.form).then(res => {
+          this.$message({
+            message: 'Add service provider successfully',
+            type: 'success'
+          })
+          this.handleClickCancleButton()
+        }).catch(err => {
+          this.loading = false;
+          this.$message({
+            message: err,
+            type: 'error'
+          })
+        });
+      },
+      updateProvider() {
+        this.loading = true;
+        provider.updateServiceProvider(this.form).then(res => {
+          this.$message({
+            message: 'Update service provider successfully',
+            type: 'success'
+          })
+          this.handleClickCancleButton()
+        }).catch(err => {
+          this.loading = false;
+          this.$message({
+            message: err,
+            type: 'error'
+          })
+        });
+      },
+      handleClickCancleButton() {
+        this.loading = false;
+        this.$router.push("/service-provider-management/index")
+      }
+    }
+  }
+</script>
+
+<style scoped="scoped" lang='scss'>
+  @import '../../styles/variables.scss';
+
+  .container {
+    width: 100%;
+    padding: 20px 60px;
+    min-height: $mainAppMinHeight;
+    background-color: #F0F5FC;
+  }
+  
+  .content {
+    margin: 0 8px 16px;
+    padding: 15px 80px;
+    border-radius: 6px;
+    background-color: white;
+  }
+  
+  .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;
+    }
+    .content {
+      padding: 15px 30px;
+    }
+  }
+  
+  .logo-upload {
+    width: 148px;
+    height: 148px;
+    position: relative;
+    ::v-deep .el-image {
+      width: 148px;
+      height: 148px;
+      border-radius: 6px;
+    }
+  }
+  
+  .avatar-uploader-icon {
+    width: 148px;
+    height: 148px;
+    color: #8c939d;
+    cursor: pointer;
+    font-size: 28px;
+    text-align: center;
+    line-height: 148px;
+    border-radius: 6px;
+    border: 1px dashed #d9d9d9;
+  }
+</style>