mirror of https://github.com/Kylart/KawAnime.git
122 lines
2.8 KiB
Vue
122 lines
2.8 KiB
Vue
<template lang="pug">
|
|
v-dialog(v-model='searchShow', width='650', lazy, absolute)
|
|
v-btn(icon, slot='activator')
|
|
v-icon search
|
|
v-card.pr-4
|
|
v-card-title.headline Which anime are you looking for?
|
|
v-card-text
|
|
v-layout(wrap, justify-center)
|
|
v-flex(xs6)
|
|
v-text-field(
|
|
name='search-name',
|
|
label='Anime name',
|
|
v-model='searchTerm',
|
|
dark
|
|
)
|
|
v-flex(xs12)
|
|
v-layout(row, wrap, justify-center)
|
|
template(v-if='results.length', v-for='item in results')
|
|
v-flex.elem(xs3, @click='search(item.name)')
|
|
v-layout.elem-content.elevation-3(
|
|
wrap,
|
|
justify-center,
|
|
v-ripple='true',
|
|
@click.all='search(item.name)'
|
|
)
|
|
v-flex(xs8)
|
|
img.elem-picture(:src='item.image_url', height='140')
|
|
v-flex.elem-name(xs10) {{ item.name }}
|
|
v-card-actions
|
|
v-spacer
|
|
v-btn.blue--text.darken-1.close-button(flat, @click='searchShow = false') Close
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios'
|
|
import _ from 'lodash'
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
searchShow: false,
|
|
searchTerm: '',
|
|
results: []
|
|
}
|
|
},
|
|
methods: {
|
|
async search (name) {
|
|
this.searchTerm = name
|
|
|
|
if (this.$store.state.info.info.title === name) {
|
|
this.$store.commit('showInfo', true)
|
|
this.searchShow = false
|
|
} else {
|
|
this.searchShow = false
|
|
|
|
this.$store.dispatch('searchInfoFromName', name)
|
|
}
|
|
},
|
|
quickSearch: _.debounce(
|
|
async function () {
|
|
const term = this.searchTerm
|
|
|
|
if (term.length > 2) {
|
|
try {
|
|
const {data, status} = await axios.get(`searchTermOnMal?term=${term}`)
|
|
|
|
if (status === 200) {
|
|
this.results = data.categories[0].items
|
|
}
|
|
} catch (e) {
|
|
console.log((new Date()).toLocaleTimeString() + e.message)
|
|
this.$store.commit('setInfoSnackbar', e.message)
|
|
}
|
|
} else {
|
|
this.results = []
|
|
}
|
|
},
|
|
300)
|
|
},
|
|
watch: {
|
|
async searchTerm () {
|
|
this.quickSearch()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.close-button
|
|
{
|
|
margin-right: 10px !important;
|
|
}
|
|
|
|
.elem
|
|
{
|
|
margin-top: 10px;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.elem-content
|
|
{
|
|
margin: 0;
|
|
height: 100%;
|
|
position: relative;
|
|
margin-left: 10%;
|
|
width: 100%;
|
|
background-color: rgb(60, 60, 60);
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.elem-name
|
|
{
|
|
font-size: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.elem-picture
|
|
{
|
|
max-width: 90%;
|
|
}
|
|
</style>
|