refactor order list component and update

harryho · Apr 11, 2018 · 8c4a386 · 8c4a386
1 parent e6abe3d
commit 8c4a386
Show file tree

Hide file tree

Showing 23 changed files with 948 additions and 456 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+    "editor.formatOnSave": false,
+    "prettier.eslintIntegration": false,
+    "prettier.printWidth": 100,
+    "prettier.trailingComma": "es5",
+    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
+}
diff --git a/db/db.json b/db/db.json
@@ -259,8 +259,8 @@
         }
       ],
       "amount": 89.99,
-      "orderDate": "2017-01-01",
-      "shippedDate": "2017-01-01",
+      "orderDate": "2017-01-12",
+      "shippedDate": "2017-01-10",
       "shipAddress": {
         "address": "Gran Vía, 0123",
         "city": "Madrid",
@@ -616,13 +616,6 @@
       "unitInStock": null,
       "unitPrice": 4.5
     },
-    {
-      "categoryId": 3,
-      "productName": "aaa",
-      "unitPrice": 22,
-      "unitInStock": 2323,
-      "id": 25
-    },
     {
       "categoryId": 3,
       "productName": "Product ABCD",
@@ -632,10 +625,10 @@
     },
     {
       "id": 27,
-      "productName": "sasasasd",
+      "productName": "asdasd",
       "categoryId": 3,
-      "unitInStock": "23",
-      "unitPrice": "222"
+      "unitInStock": "22",
+      "unitPrice": "234"
     }
   ],
   "categories": [

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue2crm",
-  "version": "1.5.4",
+  "version": "1.6.1",
   "description": "Simle reusalbe CRM starter built on Vue 2 PWA template and Vuetify UI",
   "author": "harryho",
   "private": true,
@@ -18,6 +18,7 @@
   "dependencies": {
     "axios": "^0.16.2",
     "chart.js": "^2.7.2",
+    "lodash": "^4.17.5",
     "vue": "^2.5.15",
     "vue-chartjs": "^2.6.5",
     "vue-progressbar": "^0.7.4",

diff --git a/src/App.vue b/src/App.vue
@@ -73,12 +73,12 @@
           </v-layout>
         </v-container>
       </v-content>
-      <canvas id="canvas"></canvas>
+      <!-- <canvas id="canvas"></canvas> -->
       <v-footer :inset="true" style="justify-content:center; text-align: center" app>
         <span >&copy; Vue-CRM 2018</span>
       </v-footer>
-        </template>
-    <v-dialog v-model="dialog" persistent max-width="290">
+    </template>
+    <!-- <v-dialog v-model="dialog" persistent max-width="290">
       <v-card>
         <v-card-title>{{dialogTitle}}</v-card-title>
         <v-card-text>{{dialogText}}</v-card-text>
@@ -87,7 +87,7 @@
           <v-btn class="orange--text darken-1" flat="flat" @click.native="onCancel">Cancel</v-btn>
         </v-card-actions>
       </v-card>
-    </v-dialog>
+    </v-dialog> -->
   </v-app>
 
 </template>
@@ -204,35 +204,35 @@ export default {
         name: item.title
       });
     },
-    openDialog (
-      dialogText,
-      dialogTitle,
-      confirmCallback,
-      canelCallbak
-    ) {
-      this.dialog = true;
-      this.dialogText = dialogText;
-      this.dialogTitle = dialogTitle;
-      if (confirmCallback) this.confirmCallback = confirmCallback;
-      if (canelCallbak) this.cancelCallback = canelCallbak;
-    },
-    confirmCallback () {},
-    cancelCallback () {},
-    onConfirm () {
-      this.dialog = false;
-      this.dialogText = "";
-      this.dialogTitle = "";
-      this.confirmCallback();
-      this.confirmCallback = () => {};
-    },
-    onCancel () {
-      this.dialog = false;
-      this.dialogText = "";
-      this.dialogTitle = "";
-      this.cancelCallback();
-      this.cancelCallback = () => {};
-      console.log("Cancelled");
-    }
+    // openDialog (
+    //   dialogText,
+    //   dialogTitle,
+    //   confirmCallback,
+    //   canelCallbak
+    // ) {
+    //   this.dialog = true;
+    //   this.dialogText = dialogText;
+    //   this.dialogTitle = dialogTitle;
+    //   if (confirmCallback) this.confirmCallback = confirmCallback;
+    //   if (canelCallbak) this.cancelCallback = canelCallbak;
+    // },
+    // confirmCallback () {},
+    // cancelCallback () {},
+    // onConfirm () {
+    //   this.dialog = false;
+    //   this.dialogText = "";
+    //   this.dialogTitle = "";
+    //   this.confirmCallback();
+    //   this.confirmCallback = () => {};
+    // },
+    // onCancel () {
+    //   this.dialog = false;
+    //   this.dialogText = "";
+    //   this.dialogTitle = "";
+    //   this.cancelCallback();
+    //   this.cancelCallback = () => {};
+    //   console.log("Cancelled");
+    // }
   },
   mounted () {
     this.$Progress.finish();

diff --git a/src/components/Login.vue b/src/components/Login.vue
@@ -1,27 +1,26 @@
 <template>
 <v-container fill-height justify-center align-center >
   <!-- <v-layout row > -->
-    <v-flex xs12 sm3>
-      <!-- <h1> &nbsp;</h1> -->
+    <v-flex xs12 sm5 md4 lg3>
       <v-card class="mt-0 pt-0">
           <v-card-title class="blue darken-1">
             <h4 style="color:white">Vue-CRM</h4>
           </v-card-title>
           <v-card-text>
               <form @submit.prevent="login">
-                <v-layout row>
-                  <v-flex xs4>
+                <v-layout row wrap>
+                  <v-flex xs12 md4 >
                     <v-subheader>User ID</v-subheader>
                   </v-flex>
-                  <v-flex xs8>
+                  <v-flex  xs12 md8>
                     <v-text-field class="input-group--focused" name="email" v-model="email" label="email" value="Input text"></v-text-field>
                   </v-flex>
                 </v-layout>
-                <v-layout row>
-                  <v-flex xs4>
+                <v-layout row wrap>
+                  <v-flex  xs12 md4>
                     <v-subheader>Password</v-subheader>
                   </v-flex>
-                  <v-flex xs8>
+                  <v-flex  xs12 md8>
                     <v-text-field class="input-group--focused" name="password" type="password" v-model="pass" label="password" value="Input text"></v-text-field>
                   </v-flex>
                 </v-layout>

diff --git a/src/components/SearchPanel.vue b/src/components/SearchPanel.vue
@@ -2,11 +2,11 @@
 
 <v-navigation-drawer right v-model="rightDrawer" :disable-resize-watcher="true" fixed>
   <v-list>
-    <v-list-tile-title>&nbsp;</v-list-tile-title>
-    <v-list-tile>
-      <v-list-tile-title class="title">Search Panel</v-list-tile-title>
+    <!-- <v-list-tile-title>&nbsp;</v-list-tile-title> -->
+    <v-list-tile class="my-2">
+      <v-list-tile-title class="title">Advanced Search</v-list-tile-title>
     </v-list-tile>
-    <v-list-tile-title>&nbsp;</v-list-tile-title>
+    <!-- <v-list-tile-title>&nbsp;</v-list-tile-title> -->
     <slot></slot>
 
     <v-layout class="pl-1 pt-3 ml-1" row>

diff --git a/src/components/Table.vue b/src/components/Table.vue
@@ -4,21 +4,19 @@
 
       <template slot="headers" slot-scope="props">
           <tr>
-            <th v-for="header in props.headers" :key="header.text"
-            :class="['column', 'subheading' , 'text-xs-left']">
+            <th v-for="(header, index) in props.headers" :key="header.text"
+            :class="['column', 'subheading' , index === 0? 'text-xs-left': 'text-xs-center']">
               {{ header.text }}
             </th>
-            <th>
-                <v-text-field append-icon="search" label="Quick Search" single-line hide-details v-model="search"></v-text-field>
-              </th>
+            <th>                
+            </th>
           </tr>
     </template>
 
     <template class="body-2" slot="items" slot-scope="props">
-      <td class="text-xs-left body-2" v-for="(header, index) in headers" :key="index" v-if="header.value!==''">
+      <td  v-for="(header, index) in headers" :key="index" :class="[ index === 0? 'text-xs-left': 'text-xs-center', 'body-2']" v-if="header.value!==''">
         {{renderData(props.item, header)}}
       </td>
-
         <td class="text-xs-right">
         <v-btn class="teal" fab small dark @click.native="$emit('edit', props.item)">
           <v-icon>edit</v-icon>
@@ -34,7 +32,7 @@
       </span>
     </template>
   </v-data-table>
-  <div class="text-xs-center pt-2">
+  <div class="text-xs-center pt-2" v-if="isNotEmpty">
     <v-pagination v-model="pagination.page" :length="pagination.pages" :total-visible="5" circle></v-pagination>
   </div>
 </div>
@@ -48,7 +46,7 @@ export default {
   },
   data () {
     return {
-      search: "",
+      search: ""
     }
   },
   methods: {
@@ -62,10 +60,9 @@ export default {
     }
   },
   computed: {
-  },
-  mounted () {
-    // this.$nextTick(() => {
-    // })
+    isNotEmpty () {
+      return this.items && this.items.length > 0;
+    }
   }
 }
 </script>
diff --git a/src/models/category.js → src/models/Category.js b/src/models/category.js → src/models/Category.js
diff --git a/src/models/customer.js → src/models/Customer.js b/src/models/customer.js → src/models/Customer.js
diff --git a/src/models/Order.js b/src/models/Order.js
@@ -0,0 +1,18 @@
+export class Order {
+    constructor () {
+        this.id = "";
+        this.reference = "";
+        this.customerId = "";
+        this.customer = "";
+        this.products = [];
+        this.amount = 0;
+        this.orderDate = null;
+        this.shippedDate =  null;
+        this.shipAddress = {
+            address: "",
+            city: "",
+            zipcode: "",
+            country: ""
+        }
+    }
+}
diff --git a/src/models/product.js → src/models/Product.js b/src/models/product.js → src/models/Product.js
diff --git a/src/models/index.js b/src/models/index.js
@@ -1,5 +1,6 @@
-export * from './customer'
-export * from './product'
-export *  from './category'
+export * from './Customer'
+export * from "./Product";
+export *  from './Category'
+export * from './Order'
 // export *  from './user'
 
diff --git a/src/models/order.js b/src/models/order.js
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
@@ -2,11 +2,11 @@
     <v-container id="dashboard" fluid   grid-list-lg class="mx-0 pa-0">
         <v-layout  row wrap>
             <v-flex md3 sm6 xs12 v-for="(stat, key) in stats.monthlyStats" :key="key">
-                <v-card :class="stat.bgColor"   light>
-                    <v-container fluid grid-list-sm light>
+                <v-card :class="stat.bgColor"   dark>
+                    <v-container fluid grid-list-sm dark>
                         <v-layout class="mt-0 mb-0" row wrap>
                             <v-flex d-flex xs3>
-                                <v-icon class="mx-0" x-large light>{{stat.icon}}</v-icon>
+                                <v-icon class="mx-0" x-large dark>{{stat.icon}}</v-icon>
                             </v-flex>
                             <v-flex d-flex xs9 >
                                 <v-layout class="mt-2 mb-0 pa-0" row wrap>