add format time

components/DateDisplay.vue

+<template>
+  <span v-if="date">
+    {{ date.getMonth() + 1 }}/{{ date.getDate() }}/{{ date.getFullYear() }}
+  </span>
+</template>
+
+<script>
+export default {
+  props: ['date']
+
+}
+</script>
+
+<style>
+</style>

components/Footer.vue → components/FooterBar.vue

@@ -10,30 +10,44 @@
       </v-card-text>
 
       <v-card-text class="white--text pt-0">
-        Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet. Mauris cursus commodo interdum. Praesent ut
-        risus eget metus luctus accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim a sit amet dui.
-        Duis commodo vitae velit et faucibus. Morbi vehicula lacinia malesuada. Nulla placerat augue vel ipsum ultrices,
-        cursus iaculis dui sollicitudin. Vestibulum eu ipsum vel diam elementum tempor vel ut orci. Orci varius natoque
-        penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet.
+        Mauris cursus commodo interdum. Praesent ut risus eget metus luctus
+        accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim a
+        sit amet dui. Duis commodo vitae velit et faucibus. Morbi vehicula
+        lacinia malesuada. Nulla placerat augue vel ipsum ultrices, cursus
+        iaculis dui sollicitudin. Vestibulum eu ipsum vel diam elementum tempor
+        vel ut orci. Orci varius natoque penatibus et magnis dis parturient
+        montes, nascetur ridiculus mus.
       </v-card-text>
 
-      <v-divider></v-divider>
+      <v-divider />
 
       <div class="footer-bottom">
         <div class="footer-bottom-left">
           <figure class="payment">
-            <img src="~/assets/images/payment.png" alt="payment" width="159" height="29">
+            <img
+              src="~/assets/images/payment.png"
+              alt="payment"
+              width="159"
+              height="29"
+            >
           </figure>
         </div>
-        <p class="copyright">Riode eCommerce © 2022. All Rights Reserved</p>
+        <p class="copyright">
+          Riode eCommerce © 2022. All Rights Reserved
+        </p>
         <div class="footer-bottom-right">
           <div class="social-link">
-            <v-btn v-for="icon in icons" :key="icon" class="mx-4 white--text" icon>
+            <v-btn
+              v-for="icon in icons"
+              :key="icon"
+              class="mx-4 white--text"
+              icon
+            >
               <v-icon size="24px">
                 {{ icon }}
               </v-icon>
             </v-btn>
-
           </div>
         </div>
       </div>
@@ -44,13 +58,8 @@
 <script>
 export default {
   data: () => ({
-    icons: [
-      'mdi-facebook',
-      'mdi-twitter',
-      'mdi-linkedin',
-      'mdi-instagram',
-    ],
-  }),
+    icons: ['mdi-facebook', 'mdi-twitter', 'mdi-linkedin', 'mdi-instagram']
+  })
 }
 </script>
 
@@ -58,7 +67,6 @@ export default {
 .footer-bottom-left {
   position: absolute;
   left: 0;
-
 }
 
 .footer-bottom-right {
@@ -67,12 +75,10 @@ export default {
 }
 
 .copyright {
-
   position: absolute;
   left: 0;
   right: 0;
   margin-left: auto;
   margin-right: auto;
-
 }
-</style>
\ No newline at end of file
+</style>

nuxt.config.js

@@ -27,7 +27,10 @@ export default {
   ],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
-  plugins: ['~/plugins/axios.js'],
+  plugins: [
+    '~/plugins/axios.js',
+    '~/plugins/formatTime.js'
+  ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
   components: true,
@@ -46,7 +49,7 @@ export default {
     '@nuxtjs/axios',
     '@nuxtjs/auth-next',
     '@nuxtjs/toast',
-    '@pinia/nuxt',
+    '@pinia/nuxt'
   ],
 
   // Axios module configuration: https://go.nuxtjs.dev/config-axios
@@ -55,7 +58,7 @@ export default {
     baseURL: 'http://127.0.0.1:8000/api/',
     debug: false,
     proxyHeaders: true,
-    credentials: false,
+    credentials: false
   },
 
   // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify

pages/categories/index.vue

@@ -133,15 +133,8 @@
                   />
                 </v-col>
                 <v-col cols="12">
-                  <v-file-input
-                    v-model="eImage"
-                    accept="image/*"
-                    label="Image"
-                    prepend-icon="mdi-camera"
-                    readonly
-                  />
+                  <v-img v-if="typeof eImage === 'string'" :src="eImage" />
                 </v-col>
-                <v-img v-if="typeof eImage === 'string'" :src="eImage" />
               </v-row>
             </v-container>
             <small>*indicates required field</small>
@@ -289,6 +282,12 @@
             </v-dialog>
           </v-toolbar>
         </template>
+        <template #item.created_at="{ item }">
+          <span>{{ formatDate(item.created_at)}}</span>
+        </template>
+        <template #item.updated_at="{ item }">
+          <span>{{ formatDate(item.updated_at)}}</span>
+        </template>
         <template #item.actions="{ item }">
           <v-icon :id="item.id" small @click="dialog2 = true; editCategory(item)">
             mdi-pencil
@@ -310,6 +309,7 @@
   </v-app>
 </template>
 <script>
+
 export default {
   layout: 'admin',
   middleware: ['web'],
@@ -320,6 +320,7 @@ export default {
       ordering: '',
       image: null,
       error: '',
+      dialog: false,
       dialog1: false,
       dialog2: false,
       dialog3: false,
@@ -327,17 +328,17 @@ export default {
       options: [],
       headers: [
         {
-          text: 'Name',
+          text: 'ID',
           align: 'start',
-          sortable: false,
-          value: 'name'
+          value: 'id'
         },
-        { text: 'ID', value: 'id' },
+        { text: 'Name', value: 'name' },
         { text: 'Odering', value: 'ordering' },
         // { text: 'parent', value: 'parent_id', sortable: false },
         { text: 'Created', value: 'created_at' },
         { text: 'Updated', value: 'updated_at' },
-        { text: 'Actions', value: 'actions', sortable: false }
+        { text: 'Actions', value: 'actions', sortable: false },
+        { text: 'index', value: 'index', sortable: false }
       ],
       categories: [],
       eID: '',
@@ -562,6 +563,17 @@ export default {
         console.log(error)
       }
     }
+    // formatDate (date) {
+    //   const d = new Date(date)
+    //   let month = '' + (d.getMonth() + 1)
+    //   let day = '' + d.getDate()
+    //   const year = d.getFullYear()
+
+    //   if (month.length < 2) { month = '0' + month }
+    //   if (day.length < 2) { day = '0' + day }
+
+    //   return [year, month, day].join('-')
+    // }
   }
 }
 </script>

pages/products/index.vue

@@ -328,6 +328,7 @@
                   multiple
                 />
               </v-col>
+              <!-- <v-img v-if="typeof eImage === 'string'" :src="eImages" /> -->
               <v-col cols="12">
                 <v-btn
                   class="mx-2"
@@ -763,6 +764,7 @@ export default {
       color: '',
       size: '',
       quantity: '',
+      dialog: false,
       dialog1: false,
       dialog2: false,
       dialog3: false,

plugins/formatTime.js

+import Vue from 'vue'
+
+Vue.mixin({
+  methods: {
+    formatDate (date) {
+      const d = new Date(date)
+      let month = '' + (d.getMonth() + 1)
+      let day = '' + d.getDate()
+      const year = d.getFullYear()
+
+      if (month.length < 2) { month = '0' + month }
+      if (day.length < 2) { day = '0' + day }
+
+      return [year, month, day].join('-')
+    }
+  }
+})