147 lines
3.0 KiB
Vue
147 lines
3.0 KiB
Vue
<template>
|
|
<section>
|
|
<div class="LevelPage container">
|
|
<div class="field">
|
|
<label class="label">Filter</label>
|
|
<b-field>
|
|
<b-radio-button
|
|
v-model="whatToShow"
|
|
native-value="all"
|
|
type="is-success"
|
|
>
|
|
Show all
|
|
</b-radio-button>
|
|
<b-radio-button
|
|
v-model="whatToShow"
|
|
native-value="learning"
|
|
type="is-warning"
|
|
>
|
|
Learning
|
|
</b-radio-button>
|
|
<b-radio-button
|
|
v-model="whatToShow"
|
|
native-value="all-quiz"
|
|
type="is-info"
|
|
>
|
|
All quiz
|
|
</b-radio-button>
|
|
</b-field>
|
|
</div>
|
|
|
|
<section class="card">
|
|
<div class="card-content">
|
|
<LibraryCard
|
|
v-for="{ level, entries } in sublist"
|
|
:key="level"
|
|
:title="`Level ${level}`"
|
|
:entries="entries.map((entry) => ({ entry }))"
|
|
:type="type"
|
|
:open="true"
|
|
/>
|
|
|
|
<b-pagination
|
|
class="mt-4"
|
|
v-if="list.length > perPage"
|
|
v-model="page"
|
|
:total="list.length"
|
|
:per-page="perPage"
|
|
icon-prev="angle-left"
|
|
icon-next="angle-right"
|
|
@change="(p) => (page = p)"
|
|
/>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
|
|
import { api, ILevelBrowser, ITypeLevel } from '~/assets/api'
|
|
|
|
@Component<LevelCard>({
|
|
created() {
|
|
this.init()
|
|
},
|
|
})
|
|
export default class LevelCard extends Vue {
|
|
@Prop() type!: ITypeLevel
|
|
|
|
isLoading = true
|
|
|
|
list: {
|
|
level: number
|
|
entries: string[]
|
|
}[] = []
|
|
|
|
settings: ILevelBrowser = {
|
|
character: {
|
|
whatToShow: ['all'],
|
|
},
|
|
vocabulary: {
|
|
whatToShow: ['all'],
|
|
},
|
|
}
|
|
page = 1
|
|
perPage = 5
|
|
|
|
get sublist() {
|
|
return this.list.slice(
|
|
(this.page - 1) * this.perPage,
|
|
this.page * this.perPage
|
|
)
|
|
}
|
|
|
|
async init() {
|
|
const r = await api.user_getSettings({
|
|
select: ['level_browser'],
|
|
})
|
|
|
|
if (r?.level_browser) {
|
|
this.settings = r.level_browser
|
|
}
|
|
|
|
await this.setCurrentData()
|
|
this.isLoading = false
|
|
}
|
|
|
|
async setCurrentData() {
|
|
const { result } = await api.library_getLevelList({
|
|
type: this.type,
|
|
settings: this.settings[this.type],
|
|
})
|
|
|
|
const allData = new Map<number, string[]>()
|
|
|
|
result.map(({ entry, level }) => {
|
|
const levelData = allData.get(level) || []
|
|
levelData.push(entry)
|
|
allData.set(level, levelData)
|
|
})
|
|
|
|
this.list = Array.from(allData)
|
|
.sort(([lv1], [lv2]) => lv1 - lv2)
|
|
.map(([level, entries]) => ({ level, entries }))
|
|
}
|
|
|
|
@Watch('settings')
|
|
async onSettingsChanged() {
|
|
this.page = 1
|
|
this.setCurrentData()
|
|
await api.user_updateSettings({
|
|
level_browser: this.settings,
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tag {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.b-table {
|
|
margin-bottom: 2rem;
|
|
}
|
|
</style>
|