Skip to content
This repository has been archived by the owner on Feb 26, 2020. It is now read-only.

Commit

Permalink
update dashboard and customer for better responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@harryho
harryho committed May 27, 2018
1 parent 2e1d783 commit c59bb3b
Show file tree
Hide file tree
Showing 4 changed files with 191 additions and 186 deletions.
2 changes: 1 addition & 1 deletion .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ module.exports = {
"block-spacing": "off",
"object-property-newline": "off",
"operator-linebreak":"off",
// "space-before-function-paren": "off",
"space-before-function-paren": "off",
"eol-last":"off",
// allow paren-less arrow functions
'arrow-parens': 0,
Expand Down
8 changes: 7 additions & 1 deletion src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<router-view></router-view>
</template>
<template v-if="loggedIn">
<v-navigation-drawer class="blue lighten-5" width="250" light fixed :mini-variant.sync="mini" v-model="drawer" app>
<v-navigation-drawer class="blue lighten-5" width="250" light :mini-variant.sync="mini" v-model="drawer" app>
<!-- mini-variant.sync="true" -->
<v-list class="pa-0">
<v-list-tile avatar tag="div">
Expand Down Expand Up @@ -63,6 +63,12 @@
<v-icon large color="grey">mail</v-icon>
</v-badge>
</div>
<v-btn light flat href="https://github.com/harryho/vue2crm" target="_blank">
<svg height="30" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
</svg>
<span style="margin-left:0.4rem;">GitHub</span>
</v-btn>
</v-toolbar>
<v-content>
<v-container fluid fill-height>
Expand Down
159 changes: 79 additions & 80 deletions src/pages/CustomerForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,114 +13,113 @@
<v-icon>save</v-icon>
</v-btn>
</v-card-title>
<v-card-text v-if="loading !== true" >
<v-card-text v-if="loading !== true">
<v-container fluid grid-list-sm>
<v-layout row wrap >
<v-flex sm2 xs12>
<img v-if="customer.avatar" class="profile" v-bind:src="customer.avatar"/>
</v-flex>
<v-flex sm10 xs12>
<v-layout row wrap>
<v-flex md3 sm12 >
<img v-if="customer.avatar" class="profile" v-bind:src="customer.avatar" />
</v-flex>
<v-flex md9 sm12>
<v-container fluid grid-list-sm>
<v-layout row wrap >
<v-flex md3 sm6 xs12 class="mx-1 px-0">
<v-text-field name="firstName" label="First Name" hint="Last name is required" value="Input text" v-model="customer.firstName" class="input-group--focused" required></v-text-field>
</v-flex>
<v-flex md3 sm6 xs12 class="mx-1 px-0">
<v-text-field name="lastName" label="Last Name" maxlength="10" hint="Last name is required" value="Input text" v-model="customer.lastName" class="input-group--focused" required></v-text-field>
</v-flex>
<v-flex md3 sm6 xs12 class="mx-1 px-0">
<v-text-field name="email" type="email" label="Email" value="Input text" v-model="customer.email"
v-bind:rules="rules.email" class="input-group--focused" required></v-text-field>
</v-flex>
<v-flex md3 sm6 xs12 class="mx-1 px-0">
<v-text-field name="mobile" type="text" label="Mobile"
v-model="customer.mobile" class="input-group--focused" required></v-text-field>
</v-flex>
<v-flex md3 sm6 xs12 class="mx-1 px-0">
<v-text-field name="workphone" type="text" label="Work Phone"
v-model="customer.workphone" class="input-group--focused" required></v-text-field>
</v-flex>
<v-flex md3 sm6 xs12 class="mx-1 px-0">
<v-text-field name="rewards" type="number" label="Rewards" hint="Number between 0 and 9999"
v-bind:rules="rules.rewards"
v-model="customer.rewards" class="input-group--focused" required></v-text-field>
</v-flex>
<v-flex md3 sm6 xs12 class="mx-1 px-0">
<v-switch label="Membership" v-model="customer.membership" light></v-switch>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex md4 sm12 xs12 class="mx-1 px-0">
<v-text-field name="firstName" label="First Name" hint="Last name is required" value="Input text" v-model="customer.firstName"
class="input-group--focused" required></v-text-field>
</v-flex>
<v-flex md4 sm12 class="mx-1 px-0">
<v-text-field name="lastName" label="Last Name" maxlength="10" hint="Last name is required" value="Input text" v-model="customer.lastName"
class="input-group--focused" required></v-text-field>
</v-flex>
<v-flex md4 sm12 xs12 class="mx-1 px-0">
<v-text-field name="email" type="email" label="Email" value="Input text" v-model="customer.email" v-bind:rules="rules.email"
class="input-group--focused" required></v-text-field>
</v-flex>
<v-flex md4 sm12 xs12 class="mx-1 px-0">
<v-text-field name="mobile" type="text" label="Mobile" v-model="customer.mobile" class="input-group--focused" required></v-text-field>
</v-flex>
<v-flex md4 sm12 class="mx-1 px-0">
<v-text-field name="workphone" type="text" label="Work Phone" v-model="customer.workphone" class="input-group--focused" required></v-text-field>
</v-flex>
<v-flex md4 sm12 xs12 class="mx-1 px-0">
<v-text-field name="rewards" type="number" label="Rewards" hint="Number between 0 and 9999" v-bind:rules="rules.rewards"
v-model="customer.rewards" class="input-group--focused" required></v-text-field>
</v-flex>
<v-flex md6 sm12 class="mx-1 px-0">
<v-switch label="Membership" v-model="customer.membership" light></v-switch>
</v-flex>
</v-layout>
</v-container>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-container>
</v-card-text>
</v-card>
</v-flex>
</v-container>
</template>
<script>
/* global Store */
import { mapState, dispatch } from 'vuex'
export default {
data () {
return {
title: '',
rules: {
rewards: [() => {
if (this.customer && (this.customer.rewards < 0 || this.customer.rewards > 9999)){
return 'Reward is required. It must be bewteen 0 and 9999'
}
return true;
}],
email: [() => {
/* global Store */
import { mapState, dispatch } from 'vuex'
export default {
data() {
return {
title: '',
rules: {
rewards: [() => {
if (this.customer && (this.customer.rewards < 0 || this.customer.rewards > 9999)) {
return 'Reward is required. It must be bewteen 0 and 9999'
}
return true;
}],
email: [() => {
/* eslint-disable no-useless-escape */
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
if (this.customer && !re.test(this.customer.email)) return 'Email is invalid.'
return true;
}]
}]
}
}
}
},
computed: {
...mapState('customers', {
},
computed: {
...mapState('customers', {
orders: 'orders',
customer: 'customer',
loading: 'loading',
mode: 'mode',
snackbar: 'snackbar',
notice: 'notice',
}),
},
methods: {
save () {
const customer = { ...this.customer }
},
methods: {
save() {
const customer = { ...this.customer }
// delete order.customer
console.log(customer)
Store.dispatch('customers/saveCustomer', customer)
.then(() => {
Store.dispatch("customers/closeSnackBar", 2000)
})
.then(() => {
Store.dispatch("customers/closeSnackBar", 2000)
})
},
cancel() {
this.$router.push({ name: 'Customers' })
},
closeSnackbar() {
Store.commit("customers/setSnackbar", { snackbar: false });
Store.commit("customers/setNotice", { notice: "" });
},
},
cancel () {
this.$router.push({name: 'Customers'})
created() {
Store.dispatch('customers/getCustomerById', this.$route.params.id)
},
closeSnackbar () {
Store.commit("customers/setSnackbar", { snackbar: false });
Store.commit("customers/setNotice", { notice: "" });
},
},
created () {
Store.dispatch('customers/getCustomerById', this.$route.params.id)
},
mounted () {
if (this.$route.params.id) {
this.title = 'Edit Customer'
} else this.title = 'New Customer'
mounted() {
if (this.$route.params.id) {
this.title = 'Edit Customer'
} else this.title = 'New Customer'
}
}
}
</script>
<style>
.profile {
max-width:160px;
}
.profile {
max-width: 160px;
}
</style>
Loading

0 comments on commit c59bb3b

Please sign in to comment.