import from Fuelly complete

ui/src/components/nav-bar.vue

@@ -19,10 +19,10 @@ export default {
           title: () => 'Quick Entries',
           badge: () => this.unprocessedQuickEntries.length,
         },
-        // {
-        //   name: 'profile',
-        //   title: () => 'Logged in as ' + this.currentUser.name,
-        // },
+        {
+          name: 'import',
+          title: () => 'Import',
+        },
         {
           name: 'settings',
           title: 'Settings',

ui/src/router/routes.js

@@ -392,6 +392,24 @@ export default [
     },
     props: (route) => ({ user: store.state.auth.currentUser || {} }),
   },
+  {
+    path: '/import',
+    name: 'import',
+    component: () => lazyLoadView(import('@views/import.vue')),
+    meta: {
+      authRequired: true,
+    },
+    props: (route) => ({ user: store.state.auth.currentUser || {} }),
+  },
+  {
+    path: '/import/fuelly',
+    name: 'import-fuelly',
+    component: () => lazyLoadView(import('@views/import-fuelly.vue')),
+    meta: {
+      authRequired: true,
+    },
+    props: (route) => ({ user: store.state.auth.currentUser || {} }),
+  },
   {
     path: '/logout',
     name: 'logout',
@@ -399,9 +417,7 @@ export default [
       authRequired: true,
       beforeResolve(routeTo, routeFrom, next) {
         store.dispatch('auth/logOut').then((data) => {
-          const authRequiredOnPreviousRoute = routeFrom.matched.some(
-            (route) => route.meta.authRequired
-          )
+          const authRequiredOnPreviousRoute = routeFrom.matched.some((route) => route.meta.authRequired)
           // Navigate back to previous page, or home as a fallback
           next(authRequiredOnPreviousRoute ? { name: 'login' } : { ...routeFrom })
         })

ui/src/router/views/import-fuelly.unit.js

@@ -0,0 +1,7 @@
+import ImportFuelly from './import-fuelly'
+
+describe('@views/import-fuelly', () => {
+  it('is a valid view', () => {
+    expect(ImportFuelly).toBeAViewComponent()
+  })
+})

ui/src/router/views/import-fuelly.vue

@@ -0,0 +1,144 @@
+<script>
+import Layout from '@layouts/main.vue'
+import { mapState } from 'vuex'
+import axios from 'axios'
+
+export default {
+  page: {
+    title: 'Import Fuelly',
+    meta: [{ name: 'description', content: 'The Import Fuelly page.' }],
+  },
+  components: { Layout },
+  computed: {
+    ...mapState('utils', ['isMobile']),
+    uploadButtonLabel() {
+      if (this.isMobile) {
+        if (this.file == null) {
+          return 'Choose Photo'
+        } else {
+          return ''
+        }
+      } else {
+        if (this.file == null) {
+          return 'Choose CSV'
+        } else {
+          return ''
+        }
+      }
+    },
+  },
+  props: {
+    user: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: function() {
+    return {
+      file: null,
+      tryingToCreate: false,
+      errors: [],
+    }
+  },
+  methods: {
+    importFuelly() {
+      if (this.file == null) {
+        return
+      }
+      this.tryingToCreate = true
+      this.errorMessage = ''
+      const formData = new FormData()
+      formData.append('file', this.file, this.file.name)
+      axios
+        .post(`/api/import/fuelly`, formData)
+        .then((data) => {
+          this.$buefy.toast.open({
+            message: 'Data Imported Successfully',
+            type: 'is-success',
+            duration: 3000,
+          })
+          this.file = null
+        })
+        .catch((ex) => {
+          this.$buefy.toast.open({
+            duration: 5000,
+            message: 'There was some issue with importing the file. Please check the error message',
+            position: 'is-bottom',
+            type: 'is-danger',
+          })
+          if (ex.response && ex.response.data.errors) {
+            this.errors = ex.response.data.errors
+          }
+        })
+        .finally(() => {
+          this.tryingToCreate = false
+        })
+    },
+  },
+}
+</script>
+
+<template>
+  <Layout>
+    <div class="columns box">
+      <div class="column">
+        <h1 class="title">Import from Fuelly</h1>
+      </div>
+    </div>
+    <br />
+    <div class="columns">
+      <div class="column">
+        <p class="subtitle"> Steps to import data from Fuelly</p>
+        <ol>
+          <li
+            >Export your data from Fuelly in the CSV format. Steps to do that can be found
+            <a href="http://docs.fuelly.com/acar-import-export-center" target="_nofollow">here</a>.</li
+          >
+          <li>Make sure that you have already created the vehicles in Hammond platform.</li>
+          <li>Make sure that the Vehicle nickname in Hammond is exactly the same as the name on Fuelly CSV or the import will not work.</li>
+          <li
+            >Make sure that the <u>Currency</u> and <u>Distance Unit</u> are set correctly in Hammond. Import will not autodetect Currency from the
+            CSV but use the one set for the user.</li
+          >
+          <li>Similiarly, make sure that the <u>Fuel Unit</u> and <u>Fuel Type</u> are correctly set in the Vehicle.</li>
+          <li>Once you have checked all these points,just import the CSV below.</li>
+          <li><b>Make sure that you do not import the file again and that will create repeat entries.</b></li>
+        </ol>
+      </div>
+    </div>
+    <div class="section box">
+      <div class="columns">
+        <div class="column is-two-thirds"> <p class="subtitle">Choose the Fuelly CSV and press the import button.</p></div>
+        <div class="column is-one-third is-flex is-align-content-center">
+          <form @submit.prevent="importFuelly">
+            <div class="columns"
+              ><div class="column">
+                <b-field class="file is-primary" :class="{ 'has-name': !!file }">
+                  <b-upload v-model="file" class="file-label" accept=".csv">
+                    <span class="file-cta">
+                      <b-icon class="file-icon" icon="upload"></b-icon>
+                      <span class="file-label">{{ uploadButtonLabel }}</span>
+                    </span>
+                    <span v-if="file" class="file-name" :class="isMobile ? 'file-name-mobile' : 'file-name-desktop'">
+                      {{ file.name }}
+                    </span>
+                  </b-upload>
+                </b-field>
+              </div>
+              <div class="column">
+                <b-button tag="input" native-type="submit" :disabled="tryingToCreate" type="is-primary" value="Upload File" class="control">
+                  Import
+                </b-button>
+              </div></div
+            >
+          </form>
+        </div>
+      </div>
+    </div>
+    <b-message v-if="errors.length" type="is-danger">
+      <ul>
+        <li v-for="error in errors" :key="error">{{ error }}</li>
+      </ul>
+    </b-message>
+  </Layout>
+</template>

ui/src/router/views/import.unit.js

@@ -0,0 +1,7 @@
+import Import from './import'
+
+describe('@views/import', () => {
+  it('is a valid view', () => {
+    expect(Import).toBeAViewComponent()
+  })
+})

ui/src/router/views/import.vue

@@ -0,0 +1,37 @@
+<script>
+import Layout from '@layouts/main.vue'
+
+export default {
+  page: {
+    title: 'Import',
+    meta: [{ name: 'Import from other apps', content: 'The Import page.' }],
+  },
+  components: { Layout },
+  props: {
+    user: {
+      type: Object,
+      required: true,
+    },
+  },
+}
+</script>
+
+<template>
+  <Layout>
+    <div class="columns box"
+      ><div class="column">
+        <h1 class="title">Import data into Hammond</h1>
+        <p class="subtitle">Choose from the following options to import data into Fuelly</p>
+      </div></div
+    >
+    <br />
+    <div class="columns">
+      <div class="box column is-one-third" to="/import-fuelly">
+        <h1 class="title">Fuelly</h1>
+        <p>If you have been using Fuelly to store your vehicle data, export the CSV file from Fuelly and click here to import.</p>
+        <br />
+        <b-button type="is-primary" tag="router-link" to="/import/fuelly">Import</b-button>
+      </div>
+    </div>
+  </Layout>
+</template>