Skip to content

K
kiaisoft_tuananh_nuxt
Commit 6f198a23 authored by Le Dinh Trung's avatar Le Dinh Trung
Browse files
Options

Merge branch 'feature/UI-vuetify' into 'dev' 

Feature/ui vuetify

See merge request !19
parents 68c8f625 4b0a2154
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 687 additions and 570 deletions
components/Navbar.vue
View file @ 6f198a23
...@@ -9,28 +9,28 @@ ...@@ -9,28 +9,28 @@
<v-app-bar-nav-icon /> <v-app-bar-nav-icon />
<v-toolbar-title> <v-toolbar-title>
<v-btn href="/users"> <v-btn to="/users">
<span>USER</span> <span>USER</span>
<v-icon dense> <v-icon dense>
mdi-account mdi-account
</v-icon> </v-icon>
</v-btn> </v-btn>
<v-btn href="/categories"> <v-btn to="/categories">
<span>CATEGORY</span> <span>CATEGORY</span>
<v-icon dense> <v-icon dense>
mdi-heart mdi-heart
</v-icon> </v-icon>
</v-btn> </v-btn>
<v-btn href="/products"> <v-btn to="/products">
<span>PRODUCT</span> <span>PRODUCT</span>
<v-icon dense> <v-icon dense>
mdi-briefcase mdi-briefcase
</v-icon> </v-icon>
</v-btn> </v-btn>
<v-btn href="/posts"> <v-btn to="/posts">
<span>POST</span> <span>POST</span>
<v-icon dense> <v-icon dense>
mdi-newspaper mdi-newspaper
...@@ -86,7 +86,7 @@ export default { ...@@ -86,7 +86,7 @@ export default {
const resp = await this.$axios.post('/logout', { const resp = await this.$axios.post('/logout', {
token: this.$auth.$storage.getUniversal('token') token: this.$auth.$storage.getUniversal('token')
}) })
if (resp.status == '200') { if (resp.status === 200) {
this.$toast.success('Logout!', { this.$toast.success('Logout!', {
duration: 2000 duration: 2000
}) })
......
middleware/web.js
View file @ 6f198a23
export default ({ redirect, store }) => { export default ({ redirect, store, $auth }) => {
if (typeof localStorage !== 'undefined' && !localStorage.getItem('token')) { if (!$auth.$storage.getLocalStorage('token')) {
return redirect('/login') return redirect('/login')
} }
} }
pages/categories/index.vue
View file @ 6f198a23
This diff is collapsed.
pages/home.vue
View file @ 6f198a23
...@@ -79,6 +79,6 @@ ...@@ -79,6 +79,6 @@
<script> <script>
export default { export default {
layout: 'admin', layout: 'admin',
middleware: ['web'], middleware: ['web']
} }
</script> </script>
pages/login.vue
View file @ 6f198a23
...@@ -109,10 +109,15 @@ export default { ...@@ -109,10 +109,15 @@ export default {
this.password = '' this.password = ''
this.checkbox = false this.checkbox = false
}, },
async login() { async login () {
try { try {
const resp = await this.$axios.post('/login', const resp = await fetch('http://127.0.0.1:8000/api/login', {
{ method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json'
},
body: JSON.stringify({
email: this.email, email: this.email,
password: this.password, password: this.password,
status: this.status status: this.status
...@@ -121,7 +126,7 @@ export default { ...@@ -121,7 +126,7 @@ export default {
return response.json() return response.json()
}) })
console.log(resp.status) console.log(resp.status)
localStorage.setItem('token', resp.data.bearer_token) localStorage.setItem('token', resp.data.bearer_token)
this.$auth.$storage.setUniversal('token', resp.data.bearer_token) this.$auth.$storage.setUniversal('token', resp.data.bearer_token)
this.$auth.$storage.setUniversal('userName', resp.data.name) this.$auth.$storage.setUniversal('userName', resp.data.name)
this.$auth.$storage.setUniversal('loggedIn', 'true') this.$auth.$storage.setUniversal('loggedIn', 'true')
...@@ -132,13 +137,13 @@ export default { ...@@ -132,13 +137,13 @@ export default {
this.$router.push('home') this.$router.push('home')
} }
} catch (e) { } catch (e) {
this.$toast.error("Username or Password not valid", { this.$toast.error('Username or Password not valid', {
duration: 2000, duration: 2000
}); })
this.$router.push("/login"); this.$router.push('/login')
} }
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
......
pages/posts/index.vue
View file @ 6f198a23
This diff is collapsed.
pages/products/index.vue
View file @ 6f198a23
This diff is collapsed.
pages/users/index.vue
View file @ 6f198a23
...@@ -18,29 +18,30 @@ ...@@ -18,29 +18,30 @@
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-container> <v-container>
<v-row> <v-form ref="formEdit">
<v-col cols="12" sm="6" md="4"> <v-row>
<v-text-field v-model="eName" label="Legal name*" :rules="nameRules" required /> <v-col cols="12" sm="6" md="4">
</v-col> <v-text-field v-model="eName" label="Legal name*" :rules="nameRules" required />
<v-col cols="12"> </v-col>
<v-text-field v-model="eEmail" label="Email*" :rules="emailRules" required /> <v-col cols="12">
</v-col> <v-text-field v-model="eEmail" label="Email*" :rules="emailRules" required />
<v-col cols="12"> </v-col>
<v-text-field <v-col cols="12">
v-model="ePassword" <v-text-field
label="Password*" v-model="ePassword"
type="password" label="Password*"
:rules="passwordRules" type="password"
required :rules="passwordRules"
/> required
</v-col> />
</v-row> </v-col>
</v-row>
</v-form>
</v-container> </v-container>
<small>*indicates required field</small>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-spacer /> <v-spacer />
<v-btn color="blue darken-1" text @click="dialog2 = false"> <v-btn color="blue darken-1" text @click="dialog2 = false; clearData();">
Close Close
</v-btn> </v-btn>
<v-btn <v-btn
...@@ -48,8 +49,9 @@ ...@@ -48,8 +49,9 @@
text text
type="submit" type="submit"
@click=" @click="
dialog2 = false; // dialog2 = false;
updateUser(); updateUser();
validateForm();
" "
> >
Save Save
...@@ -85,25 +87,30 @@ ...@@ -85,25 +87,30 @@
<v-data-table <v-data-table
:headers="headers" :headers="headers"
:items="users" :items="users"
:search="searchTable"
sort-by="calories" sort-by="calories"
class="elevation-1" class="elevation-1"
> >
<template #top> <template #top>
<v-toolbar flat> <v-toolbar flat>
<v-toolbar-title>User Manage</v-toolbar-title> <v-text-field
<v-divider class="mx-4" inset vertical /> v-model="searchTable"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
/>
<v-spacer /> <v-spacer />
<v-toolbar-title style="float: right"> <v-toolbar-title style="float: right">
<v-dialog <v-dialog
v-model="dialog1" v-model="dialog1"
persistent persistent
max-width="600px" max-width="600px"
@submit.prevent="createUser"
lazy-validation lazy-validation
> >
<template #activator="{ on, attrs }"> <template #activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on"> <v-btn color="primary" dark v-bind="attrs" v-on="on">
New USER CREATE NEW
</v-btn> </v-btn>
</template> </template>
<v-card> <v-card>
...@@ -112,35 +119,36 @@ ...@@ -112,35 +119,36 @@
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-container> <v-container>
<v-row> <v-form ref="form">
<v-col cols="12" sm="6" md="4"> <v-row>
<v-text-field <v-col cols="12" sm="6" md="4">
v-model="name" <v-text-field
label="Legal name*" v-model="name"
:rules="nameRules" label="Legal name*"
required :rules="nameRules"
/> required
</v-col> />
<v-col cols="12"> </v-col>
<v-text-field <v-col cols="12">
v-model="email" <v-text-field
label="Email*" v-model="email"
:rules="emailRules" label="Email*"
required :rules="emailRules"
/> required
</v-col> />
<v-col cols="12"> </v-col>
<v-text-field <v-col cols="12">
v-model="password" <v-text-field
label="Password*" v-model="password"
type="password" label="Password*"
:rules="passwordRules" type="password"
required :rules="passwordRules"
/> required
</v-col> />
</v-row> </v-col>
</v-row>
</v-form>
</v-container> </v-container>
<small>*indicates required field</small>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-spacer /> <v-spacer />
...@@ -152,8 +160,9 @@ ...@@ -152,8 +160,9 @@
text text
type="submit" type="submit"
@click=" @click="
dialog1 = false; // dialog1 = false;
createUser(); createUser();
validateForm()
" "
> >
Save Save
...@@ -167,10 +176,10 @@ ...@@ -167,10 +176,10 @@
<template #[`item.index`]="{ index }"> <template #[`item.index`]="{ index }">
{{ index + 1 }} {{ index + 1 }}
</template> </template>
<template #item.created_at="{ item }"> <template #[`item.created_at`]="{ item }">
<span>{{ formatDate(item.created_at) }}</span> <span>{{ formatDate(item.created_at) }}</span>
</template> </template>
<template #item.updated_at="{ item }"> <template #[`item.updated_at`]="{ item }">
<span>{{ formatDate(item.updated_at) }}</span> <span>{{ formatDate(item.updated_at) }}</span>
</template> </template>
<template #[`item.actions`]="{ item }"> <template #[`item.actions`]="{ item }">
...@@ -211,6 +220,8 @@ export default { ...@@ -211,6 +220,8 @@ export default {
middleware: ['web'], middleware: ['web'],
data: () => { data: () => {
return { return {
searchTable: '',
valid: true,
email: '', email: '',
name: '', name: '',
password: '', password: '',
...@@ -224,9 +235,8 @@ export default { ...@@ -224,9 +235,8 @@ export default {
align: 'start', align: 'start',
value: 'index' value: 'index'
}, },
{ text: 'Name', value: 'name' }, { text: 'Name', value: 'name', sortable: false },
{ text: 'email', value: 'email' }, { text: 'email', value: 'email' },
{ text: 'status', value: 'id', sortable: false },
{ text: 'created', value: 'created_at' }, { text: 'created', value: 'created_at' },
{ text: 'updated', value: 'updated_at' }, { text: 'updated', value: 'updated_at' },
{ text: 'Actions', value: 'actions', sortable: false } { text: 'Actions', value: 'actions', sortable: false }
...@@ -378,6 +388,7 @@ export default { ...@@ -378,6 +388,7 @@ export default {
} }
) )
.then((response) => { .then((response) => {
this.dialog1 = false
self.$toast.success('User created successfully!', { self.$toast.success('User created successfully!', {
duration: 3000 duration: 3000
}) })
...@@ -385,8 +396,11 @@ export default { ...@@ -385,8 +396,11 @@ export default {
this.editedItem = response.data.data this.editedItem = response.data.data
console.log(this.editedItem) console.log(this.editedItem)
this.users.push(this.editedItem) this.users.push(this.editedItem)
this.clearData()
}) })
.catch((errors) => { .catch((errors) => {
this.dialog1 = true
this.validate()
console.log(errors.response.data.message) console.log(errors.response.data.message)
this.message = errors.response.data.message this.message = errors.response.data.message
self.$toast.error('something went wrong while trying create!', { self.$toast.error('something went wrong while trying create!', {
...@@ -443,6 +457,7 @@ export default { ...@@ -443,6 +457,7 @@ export default {
} }
) )
.then((response) => { .then((response) => {
this.dialog2 = false
self.$toast.success('User updated successfully!', { self.$toast.success('User updated successfully!', {
duration: 3000 duration: 3000
}) })
...@@ -460,6 +475,21 @@ export default { ...@@ -460,6 +475,21 @@ export default {
getID (item) { getID (item) {
this.eID = item.id this.eID = item.id
this.editedIndex = this.users.indexOf(item) this.editedIndex = this.users.indexOf(item)
},
clearData () {
this.name = ''
this.email = ''
this.password = ''
},
async validate (name) {
const { valid } = await this.$refs.form.validate()
if (valid) { alert('Form is valid') }
},
async validateForm (name) {
const { valid } = await this.$refs.formEdit.validate()
if (valid) { alert('Form is valid') }
} }
} }
} }
......
plugins/axios.js
View file @ 6f198a23
...@@ -12,6 +12,13 @@ export default function ({ $axios }, inject, redirect) { ...@@ -12,6 +12,13 @@ export default function ({ $axios }, inject, redirect) {
} }
}) })
$axios.onError((error) => {
const code = parseInt(error.response && error.response.status)
if (code === 403) {
redirect('/login')
}
})
const api = $axios.create({ const api = $axios.create({
headers: { headers: {
common: { common: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment