delete quick entry and some stats

ui/src/router/views/quickEntries.vue

@@ -40,6 +40,12 @@ export default {
     markProcessed(entry) {
       store.dispatch('vehicles/setQuickEntryAsProcessed', { id: entry.id }).then((data) => {})
     },
+    deleteQuickEntry(entry) {
+      var sure = confirm('This will delete this Quick Entry. This step cannot be reversed. Are you sure?')
+      if (sure) {
+        store.dispatch('vehicles/deleteQuickEntry', { id: entry.id }).then((data) => {})
+      }
+    },
     imageModal(url) {
       const h = this.$createElement
       const vnode = h('p', { class: 'image' }, [h('img', { attrs: { src: url } })])
@@ -86,8 +92,10 @@ export default {
               <router-link v-if="entry.processDate === null && vehicles.length" :to="`/vehicles/${vehicles[0].id}/expense`" class="card-footer-item"
                 >Create Expense</router-link
               >
+
               <a v-if="entry.processDate === null" class="card-footer-item" @click="markProcessed(entry)">Mark Processed</a>
-              <p v-else>Processed on {{ parseAndFormatDateTime(entry.processDate) }}</p>
+              <p v-else class="card-footer-item">Processed on {{ parseAndFormatDateTime(entry.processDate) }}</p>
+              <a class="card-footer-item" type="is-danger" @click="deleteQuickEntry(entry)"> Delete</a>
             </footer>
           </div>
         </div>

ui/src/router/views/settings.vue

@@ -181,7 +181,7 @@ export default {
         <table class="table is-hoverable">
           <tr>
             <td>Current Version</td>
-            <td>2021.07.23</td>
+            <td>2021.08.13</td>
           </tr>
           <tr>
             <td>Website</td>

ui/src/router/views/vehicle.vue

@@ -2,10 +2,13 @@
 import Layout from '@layouts/main.vue'
 import { parseAndFormatDate } from '@utils/format-date'
 import { mapState } from 'vuex'
+import { addDays, addMonths } from 'date-fns'
 import axios from 'axios'
 import currencyFormtter from 'currency-formatter'
 import store from '@state/store'
 import ShareVehicle from '@components/shareVehicle.vue'
+import MileageChart from '@components/mileageChart.vue'
+
 export default {
   page() {
     return {
@@ -18,7 +21,7 @@ export default {
       ],
     }
   },
-  components: { Layout },
+  components: { Layout, MileageChart },
   props: {
     vehicle: {
       type: Object,
@@ -36,6 +39,15 @@ export default {
       title: '',
       stats: null,
       users: [],
+      dateRangeOptions: [
+        { label: 'This week', value: 'this_week' },
+        { label: 'This month', value: 'this_month' },
+        { label: 'Past 30 days', value: 'past_30_days' },
+        { label: 'Past 3 months', value: 'past_3_months' },
+        { label: 'This year', value: 'this_year' },
+        { label: 'All Time', value: 'all_time' },
+      ],
+      dateRangeOption: 'past_30_days',
     }
   },
   computed: {
@@ -80,6 +92,7 @@ export default {
       })
     },
   },
+
   mounted() {
     this.fetchFillups()
     this.fetchExpenses()
@@ -105,6 +118,7 @@ export default {
         })
         .catch((err) => console.log(err))
     },
+
     fetchExpenses() {
       axios
         .get(`/api/vehicles/${this.vehicle.id}/expenses`)
@@ -245,6 +259,33 @@ export default {
         },
       })
     },
+    getStartDate() {
+      const toDate = new Date()
+      switch (this.dateRangeOption) {
+        case 'this_week':
+          var currentDayOfWeek = toDate.getDay()
+          var toSubtract = 0
+          if (currentDayOfWeek === 0) {
+            toSubtract = -6
+          }
+          if (currentDayOfWeek > 1) {
+            toSubtract = -1 * (currentDayOfWeek - 1)
+          }
+          return addDays(toDate, toSubtract)
+        case 'this_month':
+          return new Date(toDate.getFullYear(), toDate.getMonth(), 1)
+        case 'past_30_days':
+          return addDays(toDate, -30)
+        case 'past_3_months':
+          return addMonths(toDate, -3)
+        case 'this_year':
+          return new Date(toDate.getFullYear(), 0, 1)
+        case 'all_time':
+          return new Date(1969, 4, 20)
+        default:
+          return new Date(1969, 4, 20)
+      }
+    },
   },
 }
 </script>
@@ -477,5 +518,18 @@ export default {
         <template v-slot:empty> No Attachments so far</template>
       </b-table>
     </div>
+    <div class="box">
+      <div class="columns">
+        <div class="column" :class="isMobile ? 'has-text-centered' : ''"> <h1 class="title">Stats</h1></div>
+        <div class="column">
+          <b-select v-model="dateRangeOption" class="is-pulled-right is-medium">
+            <option v-for="option in dateRangeOptions" :key="option.value" :value="option.value">
+              {{ option.label }}
+            </option>
+          </b-select></div
+        >
+      </div>
+      <MileageChart :vehicle="vehicle" :since="getStartDate()" :user="me" :height="300" />
+    </div>
   </Layout>
 </template>