Skip to content

K
kiaisoft_tuananh_nuxt
Commit 68c8f625 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 !14
parents 205c8dde e8dd1c73
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 5650 additions and 3334 deletions
components/DateDisplay.vue 0 → 100644
View file @ 68c8f625
<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
View file @ 68c8f625
...@@ -10,30 +10,44 @@ ...@@ -10,30 +10,44 @@
</v-card-text> </v-card-text>
<v-card-text class="white--text pt-0"> <v-card-text class="white--text pt-0">
Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet. Mauris cursus commodo interdum. Praesent ut Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet.
risus eget metus luctus accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim a sit amet dui. Mauris cursus commodo interdum. Praesent ut risus eget metus luctus
Duis commodo vitae velit et faucibus. Morbi vehicula lacinia malesuada. Nulla placerat augue vel ipsum ultrices, accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim a
cursus iaculis dui sollicitudin. Vestibulum eu ipsum vel diam elementum tempor vel ut orci. Orci varius natoque sit amet dui. Duis commodo vitae velit et faucibus. Morbi vehicula
penatibus et magnis dis parturient montes, nascetur ridiculus mus. 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-card-text>
<v-divider></v-divider> <v-divider />
<div class="footer-bottom"> <div class="footer-bottom">
<div class="footer-bottom-left"> <div class="footer-bottom-left">
<figure class="payment"> <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> </figure>
</div> </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="footer-bottom-right">
<div class="social-link"> <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"> <v-icon size="24px">
{{ icon }} {{ icon }}
</v-icon> </v-icon>
</v-btn> </v-btn>
</div> </div>
</div> </div>
</div> </div>
...@@ -44,13 +58,8 @@ ...@@ -44,13 +58,8 @@
<script> <script>
export default { export default {
data: () => ({ data: () => ({
icons: [ icons: ['mdi-facebook', 'mdi-twitter', 'mdi-linkedin', 'mdi-instagram']
'mdi-facebook', })
'mdi-twitter',
'mdi-linkedin',
'mdi-instagram',
],
}),
} }
</script> </script>
...@@ -58,7 +67,6 @@ export default { ...@@ -58,7 +67,6 @@ export default {
.footer-bottom-left { .footer-bottom-left {
position: absolute; position: absolute;
left: 0; left: 0;
} }
.footer-bottom-right { .footer-bottom-right {
...@@ -67,12 +75,10 @@ export default { ...@@ -67,12 +75,10 @@ export default {
} }
.copyright { .copyright {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
</style> </style>
\ No newline at end of file
components/Navbar.vue
View file @ 68c8f625
<!-- eslint-disable vue/multi-word-component-names -->
<template> <template>
<div> <div>
<v-toolbar <v-toolbar
...@@ -10,37 +11,74 @@ ...@@ -10,37 +11,74 @@
<v-toolbar-title> <v-toolbar-title>
<v-btn href="/users"> <v-btn href="/users">
<span>USER</span> <span>USER</span>
<v-icon dense>mdi-account</v-icon> <v-icon dense>
mdi-account
</v-icon>
</v-btn> </v-btn>
<v-btn href="/categories"> <v-btn href="/categories">
<span>CATEGORY</span> <span>CATEGORY</span>
<v-icon dense>mdi-heart</v-icon> <v-icon dense>
mdi-heart
</v-icon>
</v-btn> </v-btn>
<v-btn href="/products"> <v-btn href="/products">
<span>PRODUCT</span> <span>PRODUCT</span>
<v-icon dense> mdi-briefcase</v-icon> <v-icon dense>
mdi-briefcase
</v-icon>
</v-btn> </v-btn>
<v-btn href="/posts"> <v-btn href="/posts">
<span>POST</span> <span>POST</span>
<v-icon dense>mdi-newspaper</v-icon> <v-icon dense>
mdi-newspaper
</v-icon>
</v-btn> </v-btn>
</v-toolbar-title> </v-toolbar-title>
<v-spacer /> <v-spacer />
<v-toolbar-title>{{ $auth.$storage.getUniversal("userName") }}</v-toolbar-title> <v-toolbar-title class="profile">
{{ $auth.$storage.getUniversal("userName") }}
<v-btn icon @click="logout"> </v-toolbar-title>
<v-icon>mdi-export</v-icon> <div class="text-center">
</v-btn> <v-menu offset-y>
<template #activator="{ on, attrs }">
<v-btn
icon
dark
v-bind="attrs"
v-on="on"
>
<v-icon>mdi-menu-down</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item-group
color="primary"
>
<v-list-item
@click="logout()"
>
<v-list-item-icon>
<v-icon>
mdi-logout
</v-icon>
</v-list-item-icon>
<v-list-item-title>
Logout
</v-list-item-title>
</v-list-item>
</v-list-item-group>
</v-list>
</v-menu>
</div>
</v-toolbar> </v-toolbar>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
async logout () { async logout () {
...@@ -67,3 +105,12 @@ export default { ...@@ -67,3 +105,12 @@ export default {
} }
} }
</script> </script>
<style scoped>
.v-toolbar--prominent:not(.v-toolbar--bottom) .v-toolbar__title.profile {
align-self: baseline;
padding-top: 5px;
}
.v-application--is-ltr .v-list-item__action:first-child, .v-application--is-ltr .v-list-item__icon:first-child {
margin-right: 15px;
}
</style>
components/Shared/Header/Header.vue deleted 100644 → 0
View file @ 205c8dde
<template>
<div>
<!-- header top -->
<div class="header-top">
<div class="header-left">
<span class="welcome-message">This is a wellcome message!</span>
</div>
<div class="header-right">
<div class="dropdown">
<span class="mr-1">USD</span>
<b-icon icon="chevron-down" font-scale=".7"></b-icon>
<ul class="dropdown-box">
<li><a href="#USD">USD</a></li>
<li><a href="#EUR">EUR</a></li>
</ul>
</div>
<!-- End DropDown Menu -->
<div class="dropdown ml-4">
<span class="mr-1">ENG</span>
<b-icon icon="chevron-down" font-scale=".7"></b-icon>
<ul class="dropdown-box">
<li>
<a href="#USD">ENG</a>
</li>
<li>
<a href="#EUR">FRH</a>
</li>
</ul>
</div>
<!-- End DropDown Menu -->
<v-divider class="mx-4" vertical></v-divider>
<a href="#" class="contact">
<b-icon icon="geo-alt"></b-icon>
Contact
</a>
<a href="#" class="help">
<b-icon icon="info-circle"></b-icon>
Need Help
</a>
<a @click="openModal" v-b-modal.modal-login class="login-toggle link-to-tab d-md-show">
<b-icon icon="person" font-scale="1.3"></b-icon>
Sign in
</a>
<span class="delimiter">/</span>
<a href="#register" class="register-toggle link-to-tab d-md-show ml-0">Register</a>
</div>
</div>
<!-- end header top -->
<!-- header middle -->
<div class="header-middle d-flex">
<div class="header-left my-4">
<a href="#" class="logo">
<img src="~/assets/images/logo.png" alt="" srcset="" width="160px" />
</a>
<div class="header-search">
<form action="" class="form-input">
<input type="text" name="search" placeholder="Search..." class="form-control" />
<button type="submit" value="btn" class="btn btn-search">
<b-icon icon="search"></b-icon>
</button>
</form>
</div>
</div>
<div class="header-right">
<a href="#" class="hotline d-flex">
<b-icon icon="telephone" font-scale="2"></b-icon>
<div class="icon-box-content ml-2">
<span class="icon-box-title">Call Us Now:</span>
<h6>0(800) 123-456</h6>
</div>
</a>
<div class="d-flex" style="height: 30px">
<v-divider class="mx-3" vertical></v-divider>
</div>
<div class="wishlist">
<a href="#">
<b-icon icon="heart" font-scale="2"></b-icon>
</a>
</div>
<div class="d-flex" style="height: 30px">
<v-divider class="mx-3" vertical></v-divider>
</div>
<div class="cart">
<a href="#" class="d-flex">
<div class="cart-label">
<span class="cart-name">Shopping Cart:</span>
<p class="cart-price">$0.00</p>
</div>
<div class="icon-bag ml-2">
<b-icon icon="bag" font-scale="2.5"> </b-icon>
<span class="cart-count">2</span>
</div>
</a>
</div>
</div>
</div>
<!-- end header middle -->
<div class="header-bottom d-flex">
<div class="header-left">
<NavigationBar />
</div>
<div class="header-right">
</div>
</div>
</div>
</template>
<script>
import NavigationBar from "@/components/Shared/Header/NavigationBar"
import LoginForm from "@/components/Shared/Header/LoginForm"
export default {
name: "Header",
components: {
NavigationBar,
LoginForm,
},
methods: {
openModal() {
this.$bvModal.show('modal-login')
}
}
};
</script>
<style>
:root {
--color: #26c;
}
body {
color: rgb(99, 99, 99);
font-size: 0.8rem;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.header {
height: auto;
}
.header-top {
height: 40px;
width: 100%;
display: flex;
border-bottom: rgba(0, 0, 0, 0.12) 1px solid;
justify-content: space-between;
align-items: center;
}
.header-left {
display: flex;
margin-left: 70px;
align-items: center;
}
.header-left a {
margin-right: 3rem;
display: flex;
}
.header-right {
display: flex;
margin-right: 70px;
align-items: center;
}
.header-right a {
color: inherit;
padding: 0 0.5rem;
align-items: center;
}
.dropdown span {
margin-bottom: 10px;
cursor: pointer;
}
.dropdown:hover span {
color: var(--color);
}
.dropdown-box {
display: none;
position: absolute;
list-style: none;
width: inherit;
padding: 0 5px;
background-color: rgb(255, 255, 255);
box-shadow: 0 5px 30px 2px rgb(0 0 0 / 20%);
}
.dropdown-box li {
margin: 5px 0px;
}
.dropdown-box a {
color: inherit;
padding: 0.4rem 0.2rem;
}
.dropdown:hover .dropdown-box {
display: block;
}
.header-search {
position: relative;
min-width: 500px;
margin: 0 3rem 0 1rem;
}
.header-search .form-input {
display: flex;
position: relative;
}
.header-search .form-input input.form-control {
border: 2px solid var(--color);
font-size: 1rem;
}
.btn-search {
position: absolute;
right: 0px;
}
.header-middle .header-right {
color: #222;
}
.header-right .icon-box-content span {
font-size: 0.7rem;
}
a {
text-decoration: none;
color: #222;
}
a:hover {
text-decoration: none;
color: var(--color);
}
.header-right .cart-label p {
font-weight: bold;
margin-bottom: 0;
}
.header-right .cart .icon-bag {
width: fit-content;
height: fit-content;
}
.cart-count {
position: absolute;
margin-left: -0.7rem;
width: 1rem;
height: 1rem;
font-size: 0.7rem;
line-height: 1.4;
text-align: center;
border-radius: 50%;
background-color: var(--color);
color: #fff;
z-index: 1;
}
.navbar {
padding: 1rem 0;
}
.navbar a {
font-size: 1rem;
font-weight: bold;
margin-bottom: 10px;
}
.category-children {
padding: 5px 10px;
min-width: 10rem;
}
.category-children .category-child a {
margin: 0;
font-size: 0.9rem;
font-weight: normal;
}
.dropdown:hover .category-item>a {
color: var(--color);
}
</style>
\ No newline at end of file
components/Shared/Header/LoginForm.vue deleted 100644 → 0
View file @ 205c8dde
<template>
<b-modal id="modal-login" title="Create User" class="modal fade" v-if="showModal">
<p class="my-4">
<form>
<label>Name :</label>
<input type="text" class="form-control mb-2" placeholder="name" v-model="name" max="255" min="1" required />
<label>Email :</label>
<input type="email" class="form-control mb-2" placeholder="Email" v-model="email" required />
<label>Password :</label>
<input type="password" class="form-control mb-2" placeholder="password" v-model="password" required />
</form>
</p>
<template #modal-footer>
<button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-login')"
class="btn btn-danger btn-sm m-1">Close</button>
<button @click="" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
</template>
</b-modal>
</template>
<script>
export default {
name: 'LoginForm',
data() {
return {
}
},
methods: {
show() {
this.showModal = true
},
hide() {
this.showModal = false
}
}
}
</script>
\ No newline at end of file
components/Shared/Header/NavigationBar.vue deleted 100644 → 0
View file @ 205c8dde
<template>
<div>
<div class="navbar d-flex">
<a class="" href="#">Home</a>
<div class="dropdown" v-for="(item, index) in categories" :key="index">
<div class="category-item" v-if="item.ordering == 1">
<a href="">{{ item.name }}</a>
<ul class="category-children dropdown-box" v-if="item.children.length > 0">
<li class="category-child" v-for="(children, index) in item.children" :key="index">
<a href="">{{ children.name }}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'NavigationBar',
data() {
return {
categories: [],
}
},
mounted() {
this.getCategories()
},
methods: {
async getCategories() {
try {
const response = await axios.get(
'http://localhost:8000/api/categories'
)
console.log(response.data.data)
this.categories = response.data.data
} catch (error) {
console.error(error)
}
},
},
}
</script>
<style scoped>
</style>
\ No newline at end of file
layouts/admin.vue
View file @ 68c8f625
<template> <template>
<div> <v-app>
<NavBar /> <NavBar />
<nuxt /> <nuxt />
</div> </v-app>
</template> </template>
<script> <script>
......
middleware/auth.js
View file @ 68c8f625
export default function(context) { export default function (context) {
console.log('[LOG]: middleware is running ...') console.log('[LOG]: middleware is running ...')
} }
\ No newline at end of file
middleware/web.js
View file @ 68c8f625
export default ({ redirect }) => { export default ({ redirect, store }) => {
if (typeof localStorage !== 'undefined' && !localStorage.getItem('token')) { if (typeof localStorage !== 'undefined' && !localStorage.getItem('token')) {
return redirect('/login') return redirect('/login')
} }
......
nuxt.config.js
View file @ 68c8f625
...@@ -27,7 +27,10 @@ export default { ...@@ -27,7 +27,10 @@ export default {
], ],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins // 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 // Auto import components: https://go.nuxtjs.dev/config-components
components: true, components: true,
......
package-lock.json
View file @ 68c8f625
This diff is collapsed.
pages/categories/index.vue
View file @ 68c8f625
This diff is collapsed.
pages/login.vue
View file @ 68c8f625
...@@ -117,15 +117,19 @@ export default { ...@@ -117,15 +117,19 @@ export default {
password: this.password, password: this.password,
status: this.status status: this.status
}) })
localStorage.setItem("token", resp.data.data.bearer_token) }).then((response) => {
this.$auth.$storage.setUniversal("token", resp.data.data.bearer_token) return response.json()
this.$auth.$storage.setUniversal("userName", resp.data.data.name) })
this.$auth.$storage.setUniversal("loggedIn", "true") console.log(resp.status)
if (resp.status == "200") { localStorage.setItem('token', resp.data.bearer_token)
this.$toast.success("Successfully authenticated", { this.$auth.$storage.setUniversal('token', resp.data.bearer_token)
duration: 2000, this.$auth.$storage.setUniversal('userName', resp.data.name)
}); this.$auth.$storage.setUniversal('loggedIn', 'true')
this.$router.push("home"); if (resp.status == 'success') {
this.$toast.success('Successfully authenticated', {
duration: 2000
})
this.$router.push('home')
} }
} catch (e) { } catch (e) {
this.$toast.error("Username or Password not valid", { this.$toast.error("Username or Password not valid", {
......
pages/posts/index.vue
View file @ 68c8f625
This diff is collapsed.
pages/products/index.vue
View file @ 68c8f625
This diff is collapsed.
pages/users/index.vue
View file @ 68c8f625
This diff is collapsed.
plugins/formatTime.js 0 → 100644
View file @ 68c8f625
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
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('-')
},
keepToken () {
const TOKEN = localStorage.getItem('token')
this.$auth.$storage.setUniversal('token', TOKEN)
}
}
})
store/index.js
View file @ 68c8f625
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
modules: {
}
})
yarn.lock
View file @ 68c8f625
This diff is collapsed.
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