130 lines
3.1 KiB
Vue
130 lines
3.1 KiB
Vue
<template>
|
|
<section>
|
|
<div class="LibraryPage">
|
|
<form @submit.prevent="q = q0">
|
|
<label for="q" class="label">
|
|
Search
|
|
<b-tooltip label="How to?" position="is-right">
|
|
<a
|
|
href="https://github.com/zhquiz/zhquiz/wiki/How-to-search-or-filter"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<b-icon icon="info-circle"></b-icon>
|
|
</a>
|
|
</b-tooltip>
|
|
</label>
|
|
<div class="field">
|
|
<p class="control is-expanded">
|
|
<input
|
|
v-model="q0"
|
|
class="input"
|
|
type="search"
|
|
name="q"
|
|
placeholder="Type here to search"
|
|
aria-label="search"
|
|
/>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="columns mt-4">
|
|
<div class="column">
|
|
<section class="card">
|
|
<div class="card-content">
|
|
<b-table
|
|
paginated
|
|
backend-pagination
|
|
:total="count"
|
|
:per-page="perPage"
|
|
@page-change="(p) => (page = p)"
|
|
:data="result"
|
|
>
|
|
<b-table-column field="entry" label="Entry" v-slot="props">
|
|
<span
|
|
:class="'tag clickable is-medium '"
|
|
@click.stop="
|
|
(evt) => {
|
|
selected = props.row
|
|
$refs.context.open(evt)
|
|
}
|
|
"
|
|
@contextmenu.prevent="
|
|
(evt) => {
|
|
selected = props.row
|
|
$refs.context.open(evt)
|
|
}
|
|
"
|
|
>
|
|
{{ props.row.entry }}
|
|
</span>
|
|
</b-table-column>
|
|
<b-table-column
|
|
field="type"
|
|
label="Type"
|
|
width="100"
|
|
v-slot="props"
|
|
>
|
|
{{ props.row.type }}
|
|
</b-table-column>
|
|
</b-table>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ContextMenu ref="context" :type="selected.type" :entry="selected.entry" />
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue, Watch } from 'nuxt-property-decorator'
|
|
import { api } from '~/assets/api'
|
|
import ContextMenu from '../ContextMenu.vue'
|
|
|
|
@Component<SearchTab>({
|
|
components: {
|
|
ContextMenu,
|
|
},
|
|
created() {
|
|
this.$emit('title', 'Search')
|
|
},
|
|
})
|
|
export default class SearchTab extends Vue {
|
|
q = ''
|
|
q0 = ''
|
|
|
|
result: {
|
|
entry: string
|
|
type: string
|
|
}[] = []
|
|
count = 0
|
|
page = 1
|
|
perPage = 10
|
|
|
|
selected = {
|
|
entry: '',
|
|
type: 'vocabulary',
|
|
}
|
|
|
|
@Watch('q')
|
|
setQ() {
|
|
this.page = 1
|
|
}
|
|
|
|
@Watch('q')
|
|
@Watch('page')
|
|
async doSearch() {
|
|
const r = await api.all_getQuery({
|
|
q: this.q,
|
|
offset: (this.page - 1) * this.perPage,
|
|
limit: this.perPage,
|
|
})
|
|
|
|
this.result = r.result
|
|
this.count = r.count
|
|
}
|
|
}
|
|
</script>
|