Skip to content

K
kiaisoft_tuananh_nuxt
Commit a6573e9a authored by TTS Kieu Tuan Anh's avatar TTS Kieu Tuan Anh
Browse files
Options

Merge branch 'feature/banner' into 'feature/deploy-to-aws' 

add banners

See merge request !30
parents 333e6b86 9c9d501d
Show whitespace changes
Inline Side-by-side
Showing with 460 additions and 10 deletions
components/Navbar.vue
View file @ a6573e9a
......@@ -107,15 +107,17 @@ export default {
icon: 'mdi-newspaper',
title: 'Posts',
to: '/posts'
},
{
icon: ' mdi-image-marker-outline',
title: 'Banners',
to: '/banners'
}
],
miniVariant: false,
title: 'Homepage'
}
},
mounted () {
console.log('123')
},
methods: {
async logout () {
try {
......
components/PageCarousels.vue
View file @ a6573e9a
......@@ -6,9 +6,9 @@
show-arrows-on-hover
>
<v-carousel-item
v-for="(slide, i) in slides"
:key="i"
:src="img[i]"
v-for="(item, index) in banners"
:key="index"
:src="item.image"
>
<v-row
class="fill-height"
......@@ -16,7 +16,7 @@
justify="center"
>
<div class="text-h2">
{{ slide }} Slide
{{ index +1 }}
</div>
</v-row>
</v-carousel-item>
......@@ -28,15 +28,37 @@ export default {
name: 'PageCarousels',
data () {
return {
img: [
'https://d-themes.com/html/riode/images/demos/demo1/slides/slide1.jpg',
'https://d-themes.com/html/riode/images/demos/demo1/slides/slide2.jpg'
bannerss: [
{ src: 'https://d-themes.com/html/riode/images/demos/demo1/slides/slide1.jpg', ordering: 0 },
{ src: 'https://d-themes.com/html/riode/images/demos/demo1/slides/slide2.jpg', ordering: 1 }
],
banners: [],
slides: [
'First',
'Second'
]
}
},
mounted () {
this.getBanners()
},
methods: {
async getBanners () {
await this.$axios
.get('guest/banners/get-active-banners', {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
}
})
.then((response) => {
this.banners = response.data.data
})
.catch(function (error) {
console.log(error)
})
}
}
}
</script>
......
pages/banners/index.vue 0 → 100644
View file @ a6573e9a
<template>
<v-app>
<div>
<div>
<v-breadcrumbs :item="items">
<template #divider>
<v-icon>mdi-chevron-right</v-icon>
</template>
</v-breadcrumbs>
</div>
<v-dialog
v-model="dialog"
persistent
max-width="600px"
lazy-validation
>
<v-card>
<v-card-title>
<span class="text-h5">EDIT BANNER</span>
</v-card-title>
<v-card-text>
<v-container>
<v-col cols="12">
<v-text-field
v-model="eOrdering"
label="Ordering"
type="number"
:rules="requiredRules"
required
/>
</v-col>
<v-row>
<v-col cols="12">
<v-file-input
v-model="eImage"
label="File input"
accept="image/*"
small-chips
dense
prepend-icon="mdi-camera"
@change="fileSelected"
/>
</v-col>
<v-col cols="12" class="v-image v-responsive theme--dark">
<img
v-if="file"
contain
style="width:100%;height:100%"
:src="file"
>
</v-col>
<v-col cols="12" text-align=" left">
<v-img
v-if="typeof eImages === 'string'"
contain
height="100px"
width="150px"
:src="eImages"
/>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn
color="blue darken-1"
text
@click="dialog = false; clearFile()"
>
Close
</v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog = false; updateBanner()"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-data-table
:headers="headers"
:items="banners"
sort-by="calories"
class="elevation-1 mt-5"
>
<template #top>
<v-toolbar flat>
<v-text-field
v-model="searchTable"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
/>
<v-spacer />
<v-toolbar-title style="float: right">
<v-dialog
v-model="dialog1"
persistent
max-width="600px"
lazy-validation
>
<template #activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">
CREATE NEW
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">Create Category</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12">
<v-text-field
v-model="ordering"
label="Ordering"
type="number"
:rules="numberRules"
required
/>
</v-col>
<v-col cols="12">
<v-file-input
v-model="image"
label="Image"
prepend-icon="mdi-camera"
@change="fileSelected"
/>
</v-col>
<v-col cols="12">
<img v-if="file" :src="file" style="width:100%;height:100%" contain>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn
color="blue darken-1"
text
@click="
dialog1 = false;
clearFile();
"
>
Close
</v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="
dialog1 = false;
createBanner();
"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar-title>
<v-dialog v-model="dialogDelete" max-width="500px">
<v-card>
<v-card-title class="text-h5">
Are you sure you want to delete this item?
</v-card-title>
<v-card-actions>
<v-spacer />
<v-btn color="blue darken-1" text @click="closeDelete">
Cancel
</v-btn>
<v-btn
color="blue darken-1"
text
@click="
deleteBanner();
dialogDelete = false
"
>
OK
</v-btn>
<v-spacer />
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
</template>
<template #[`item.index`]="{ index }">
{{ index + 1 }}
</template>
<template #[`item.image`]="{ item }">
<v-img :src="item.image" width="200" />
</template>
<template #[`item.status`]="{ item }">
<v-switch
v-model="item.status"
@click="switchStatus(item)"
/>
</template>
<template #[`item.actions`]="{ item }">
<v-icon :id="item.id" small @click="dialog=true; editBanner(item)">
mdi-pencil
</v-icon>
<v-icon :id="item.id" small @click="dialogDelete = true; getID(item)">
mdi-delete
</v-icon>
</template>
<template #no-data>
<v-btn color="primary" @click="initialize">
Reset
</v-btn>
</template>
</v-data-table>
</div>
</v-app>
</template>
<script>
export default {
layout: 'admin',
middleware: ['web'],
data: () => {
return {
headers: [
{
text: '#',
align: 'start',
value: 'index'
},
{ text: 'Image', value: 'image', groupable: false },
{ text: 'Ordering', value: 'ordering', filterable: true },
{ text: 'Status', value: 'status' },
{
text: 'Actions',
value: 'actions',
sortable: false
}
],
dialogDelete: false,
dialog: false,
dialog1: false,
image: null,
file: null,
ordering: '',
eImage: null,
eOrdering: '',
banners: [],
editedIndex: '',
editedItem: {
image: null,
ordering: '',
status: ''
},
numberRules: [
v => !!v || 'This field is required',
v => v > 0 || 'value must be a positive integer'
]
}
},
mounted () {
this.getBanners()
},
methods: {
getBanners () {
this.$axios
.get('/banners/', {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
}
})
.then((response) => {
this.banners = response.data.data
})
.catch(function (error) {
console.log(error)
})
},
createBanner () {
const self = this
const fd = new FormData()
fd.append('ordering', this.ordering)
if (this.image != null) {
fd.append('image', this.image)
}
this.$axios
.post('/banners/', fd, {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
.then((response) => {
self.$toast.success('banner created successfully!', {
duration: 3000
})
this.editedItem = response.data.data
this.banners.push(this.editedItem)
})
.catch((errors) => {
console.log(errors.response.data.message)
this.message = errors.response.data.message
self.$toast.error(this.message, {
duration: 3000
})
})
this.clearFile()
this.clearData()
},
editBanner (item) {
this.eID = item.id
this.editedIndex = this.banners.indexOf(item)
this.eImage = item.image
this.eOrdering = item.ordering
},
updateBanner () {
const self = this
const fd = new FormData()
fd.append('ordering', this.eOrdering)
if (typeof this.eImage !== 'string' && this.eImage != null) {
fd.append('image', this.eImage)
}
this.$axios
.post(`banners/update/${this?.eID}`, fd, {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
}
})
.then((response) => {
self.$toast.success('Category updated successfully!', {
duration: 3000
})
this.editedItem = response.data.data
Object.assign(this.banners[this.editedIndex], this.editedItem)
this.clearFile()
}).catch((errors) => {
this.message = errors.response.data.message
self.$toast.error(this.message, {
duration: 3000
})
})
},
switchStatus (item) {
const status = item.status ? 1 : 0
const self = this
const fd = new FormData()
fd.append('status', status)
this.$axios
.post(`/banners/update-status/${item.id}`,
fd, {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
}
)
.then((response) => {
self.$toast.success('Updated status successfully!', {
duration: 3000
})
})
.catch((error) => {
console.log(error)
self.$toast.error('ERR!', {
duration: 3000
})
})
},
fileSelected (event) {
if (event) {
this.file = URL.createObjectURL(event)
console.log(this.file)
} else {
this.file = null
}
},
clearFile () {
this.file = null
},
clearData () {
this.ordering = ''
this.image = null
},
deleteBanner () {
const self = this
try {
this.$axios
.delete(`/banners/${this.eID}`, {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
}
})
.then((response) => {
self.$toast.success('Category deleted successfully!', {
duration: 3000
})
this.getBanners()
})
} catch (error) {
console.log(error)
}
},
closeDelete () {
this.dialogDelete = false
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
})
},
getID (item) {
this.eID = item.id
this.editedIndex = this.banners.indexOf(item)
}
}
}
</script>
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