Refactoring, API Layer, Vuex, README

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-public/package-lock.json
+.DS_Store
+public/package-lock.json

README.md

@@ -39,7 +39,6 @@ Access the current deployed app at [FirebaseApp](https://mph-bali.firebaseapp.co
 If you would like to become a part of our team and be added to the repository, please contact Daria (piggydoughnut) or Nick Sarafa (nicksarafa).
 
 ---
-
 ## Front End with [Vue.js ❤](https://vuejs.org/)
 The frontend can be found in the *public* directory and was initialised using [Vue-CLI](https://github.com/vuejs/vue-cli/blob/dev/docs/README.md)  and the [vuetify/webpack](https://github.com/vuetifyjs/webpack) template.
 
@@ -59,6 +58,11 @@ The frontend can be found in the *public* directory and was initialised using [V
 - [ESLint](https://github.com/eslint/eslint) - Linting using [standard conf](https://github.com/standard/eslint-config-standard)
 - [Jest](https://facebook.github.io/jest/) - Testing
 
+### Style guides
+- [ES6](https://github.com/standard/eslint-config-standard)
+- [Vue](https://vuejs.org/v2/style-guide/)
+
+
 ---
 
 ## Back End

public/src/api/deliveries.js

@@ -0,0 +1,74 @@
+import { db } from '@/firebase'
+import { arrayToObjectById } from '@/utils'
+
+const fetchDailyList = async ({ date }) => {
+  try {
+    const response = await db.collection('delivery')
+      .where('timestamp', '>=', new Date(date))
+      .where('timestamp', '<=', new Date(date.endOf('day')))
+      .get()
+    const data = []
+    response.forEach(doc => data.push({ id: doc.id, ...doc.data() }))
+    return { success: true, data: arrayToObjectById(data) }
+  } catch (error) {
+    return { success: false, error }
+  }
+}
+
+const fetchItem = async ({ id }) => {
+  try {
+    const doc = await db.collection('delivery').doc(id).get()
+    return {
+      success: true,
+      data: {
+        id: doc.id,
+        ...doc.data()
+      }
+    }
+  } catch (error) {
+    return { success: false, error }
+  }
+}
+
+const deleteItem = async ({ id }) => {
+  try {
+    const result = await db.collection('delivery').doc(id).delete()
+    return {
+      success: true,
+      data: result
+    }
+  } catch (error) {
+    return {
+      success: false,
+      error
+    }
+  }
+}
+
+const createItem = async ({ form }) => {
+  try {
+    const result = await db.collection('delivery').add(form)
+    return { success: true, data: result }
+  } catch (error) {
+    return { success: false, error }
+  }
+}
+
+const updateItem = async ({ form }) => {
+  try {
+    const result = await db.collection('delivery')
+                           .doc(form.id)
+                           .set({ ...form })
+    return { success: true, data: result }
+  } catch (error) {
+    return { success: false, error }
+  }
+}
+
+export default {
+  fetchDailyList,
+  fetchItem,
+  deleteItem,
+  createItem,
+  updateItem
+}

public/src/api/index.js

@@ -0,0 +1,5 @@
+import Deliveries from './deliveries'
+
+export default {
+  Deliveries
+}

public/src/components/Manager/DailyLog.vue → public/src/components/DailyLog/DailyLog.vue

@@ -16,32 +16,48 @@
         </v-flex>
       </v-layout>
 
-      <daily-log-header action="/manager/delivery-form" title="Delivery" />
-      <delivery-table/>
+      <Header action="/manager/delivery-form" title="Delivery" />
+      <DeliveryTable/>
 
-      <daily-log-header class="mt-4" action="/manager/delivery-form" title="Material Kg" />
-      <delivery-table/>
+      <Header class="mt-4" action="/manager/delivery-form" title="Material Kg" />
+      <DeliveryTable/>
 
-      <daily-log-header class="mt-4" action="/manager/delivery-form" title="Stock Kg" />
-      <delivery-table/>
+      <Header class="mt-4" action="/manager/delivery-form" title="Stock Kg" />
+      <DeliveryTable/>
 
-      <daily-log-header class="mt-4" action="/manager/delivery-form" title="Sales IDR" />
-      <delivery-table/>
+      <Header class="mt-4" action="/manager/delivery-form" title="Sales IDR" />
+      <DeliveryTable/>
 
-      <daily-log-header class="mt-4" action="/manager/delivery-form" title="Expenses IDR" />
-      <delivery-table/>
+      <Header class="mt-4" action="/manager/delivery-form" title="Expenses IDR" />
+      <DeliveryTable/>
 
-      <daily-log-header class="mt-4" action="/manager/delivery-form" title="Workers Hours" />
-      <delivery-table/>
+      <Header class="mt-4" action="/manager/delivery-form" title="Workers Hours" />
+      <DeliveryTable/>
     </v-flex>
   </v-layout>
 </template>
 
 <script>
+import Header from './DailyLogHeader'
+import DeliveryTable from './DailyLogDeliveryTable'
+
 export default {
+  props: {
+    date: {
+      type: String,
+      required: false
+    }
+  },
+  components: {
+    Header, DeliveryTable
+  },
+  data () {
+    return {
+    }
+  },
   computed: {
     logDate () {
-      const date = this.$moment(this.$route.params.date)
+      const date = this.$moment(this.date)
       const today = this.$moment().startOf('day')
       return today > date ? date : today
     },

public/src/components/Manager/DeliveryTable.vue → public/src/components/DailyLog/DailyLogDeliveryTable.vue

@@ -1,7 +1,12 @@
 <template>
-  <v-data-table :loading="loading" :headers="headers" :items="deliveries" hide-actions class="elevation-1">
+  <v-data-table 
+    :loading="loading" 
+    :headers="headers" 
+    :items="deliveriesAsArray" 
+    hide-actions class="elevation-1"
+  >
     <template slot="items" slot-scope="props">
-      <td class="text-xs-center">{{ $moment(props.item.timestamp).format('hh:mmA') }}</td>
+      <td class="text-xs-center">{{ $moment(props.item.timestamp).format('hh:mm A') }}</td>
       <td class="text-xs-center">{{ parseInt(props.item.organic) + parseInt(props.item.anorganic) }}</td>
       <td class="text-xs-center">{{ props.item.organic }}</td>
       <td class="text-xs-center">{{ props.item.anorganic }}</td>
@@ -10,7 +15,7 @@
       <td>{{ props.item.banjar }}</td>
       <td>{{ props.item.comments }}</td>
       <td class="text-xs-center">
-        <v-btn icon @click="$router.push('/manager/delivery-form/' + props.item.id)">
+        <v-btn icon @click="$router.push({ name: 'Delivery Form', params: { id: props.item.id }})">
           <v-icon size="17px" color="primary">fa-edit</v-icon>
         </v-btn>
       </td>
@@ -19,26 +24,9 @@
 </template>
 
 <script>
-export default {
-  computed: {
-    deliveries () {
-      return this.$store.state.delivery.dailyList
-    },
-    logDate () {
-      const date = this.$moment(this.$route.params.date)
-      const today = this.$moment().startOf('day')
-      return today > date ? date : today
-    }
-  },
-  created () {
-    this.loading = true
+import { mapGetters, mapActions } from 'vuex'
 
-    // query part
-    this.$store
-      .dispatch('delivery/fetchDailyList', this.logDate)
-      .catch(err => console.log(err)) // make toast
-      .then(() => { this.loading = false })
-  },
+export default {
   data () {
     return {
       loading: false,
@@ -54,6 +42,33 @@ export default {
         { text: 'Actions', align: 'center', sortable: false, value: null }
       ]
     }
+  },
+  computed: {
+    ...mapGetters({
+      deliveries: 'delivery/getDailyList'
+    }),
+    deliveriesAsArray () {
+      return Object.keys(this.deliveries).map(id => this.deliveries[id])
+    },
+    logDate () {
+      const date = this.$moment(this.$route.params.date)
+      const today = this.$moment().startOf('day')
+      return today > date ? date : today
+    }
+  },
+  methods: {
+    ...mapActions({
+      fetchDeliveries: 'delivery/fetchDailyList'
+    })
+  },
+  async created () {
+    this.loading = true
+    const result = await this.fetchDeliveries({ date: this.logDate })
+    this.loading = false
+    if (!result.success) {
+      console.log(result.error)
+      // make toast
+    }
   }
 }
 </script>

public/src/components/Manager/DailyLogHeader.vue → public/src/components/DailyLog/DailyLogHeader.vue

@@ -14,6 +14,19 @@
 
 <script>
 export default {
-  props: ['title', 'action']
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    action: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+    }
+  }
 }
 </script>