add library, tsconfig.base.json
This commit is contained in:
polv committed
1 parent
0348f84255
commit
ffbe5fed18
8 files changed
+758
-25
No files matched your search
+55
-9
@@ -26,6 +26,16 @@ export interface IEntry {
|
||||
tag: string[]
|
||||
}
|
||||
|
||||
export interface ILibrary {
|
||||
id: string
|
||||
title: string
|
||||
list: string[]
|
||||
type: IType
|
||||
description: string
|
||||
tag: string[]
|
||||
isShared?: boolean
|
||||
}
|
||||
|
||||
export type ILookup<T> = T & {
|
||||
offset?: number
|
||||
limit?: number
|
||||
@@ -48,9 +58,9 @@ class Api {
|
||||
async setWanikaniApiKey(apiKey?: string) {
|
||||
const setApiKey = () => {
|
||||
if (apiKey) {
|
||||
this.axios.defaults.headers.common.Authorization = `Bearer ${apiKey}`
|
||||
this.axios.defaults.headers.common['Authorization'] = `Bearer ${apiKey}`
|
||||
} else {
|
||||
delete this.axios.defaults.headers.common.Authorization
|
||||
delete this.axios.defaults.headers.common['Authorization']
|
||||
}
|
||||
}
|
||||
|
||||
@@ -99,20 +109,17 @@ class Api {
|
||||
return r
|
||||
}
|
||||
|
||||
async user_updateSettings(u: {
|
||||
levelMin?: number
|
||||
level_browser?: ILevelBrowser
|
||||
}) {
|
||||
async user_updateSettings(u: Omit<IUserSettings, 'identifier' | 'level'>) {
|
||||
return await this.axios.patch('/api/user', u)
|
||||
}
|
||||
|
||||
async quiz_getMany(params: {
|
||||
async quiz_getMany(payload: {
|
||||
entries: string[]
|
||||
select: string[]
|
||||
type?: string
|
||||
direction?: string
|
||||
}) {
|
||||
return await this.axios.post('/api/quiz/getMany', params).then(
|
||||
return await this.axios.post('/api/quiz/getMany', payload).then(
|
||||
(r) =>
|
||||
r.data as {
|
||||
result: {
|
||||
@@ -123,6 +130,18 @@ class Api {
|
||||
)
|
||||
}
|
||||
|
||||
async quiz_getSrsLevel(payload: { entries: string[]; type: IType }) {
|
||||
return await this.axios.post('/api/quiz/getSrsLevel', payload).then(
|
||||
(r) =>
|
||||
r.data as {
|
||||
result: {
|
||||
entry: string
|
||||
srsLevel: number
|
||||
}[]
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
async quiz_create(payload: { entries: string[]; type: IType }) {
|
||||
return await this.axios.put('/api/quiz', payload).then(
|
||||
(r) =>
|
||||
@@ -224,7 +243,9 @@ class Api {
|
||||
)
|
||||
}
|
||||
|
||||
async all_getLookup(params: ILookup<{ entry: string; type: IType }>) {
|
||||
async all_getLookup(
|
||||
params: ILookup<{ entry: string; type: IType; forced?: boolean }>
|
||||
) {
|
||||
params.offset = params.offset || 0
|
||||
params.limit = params.limit || 5
|
||||
|
||||
@@ -271,6 +292,12 @@ class Api {
|
||||
)
|
||||
}
|
||||
|
||||
async library_getQuery(params: ILookup<{ q: string }>) {
|
||||
return await this.axios
|
||||
.get('/api/library/q', { params })
|
||||
.then((r) => r.data as ILookupResult<ILibrary>)
|
||||
}
|
||||
|
||||
async library_getLevelList(payload: {
|
||||
type: ITypeLevel
|
||||
settings: ILevelBrowserByType
|
||||
@@ -285,6 +312,25 @@ class Api {
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
async library_create(payload: Omit<ILibrary, 'id'>) {
|
||||
return await this.axios.put('/api/library', payload).then(
|
||||
(r) =>
|
||||
r.data as {
|
||||
id: string
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
async library_update(payload: ILibrary) {
|
||||
return await this.axios.patch('/api/library', payload, {
|
||||
params: { id: payload.id },
|
||||
})
|
||||
}
|
||||
|
||||
async library_delete(params: { id: string }) {
|
||||
return await this.axios.delete('/api/library', { params })
|
||||
}
|
||||
}
|
||||
|
||||
export const api = new Api()
|
||||
+3
-3
@@ -45,7 +45,7 @@ export const doMapKeypress = (
|
||||
export function shuffle<T>(a: T[]) {
|
||||
for (let i = a.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1))
|
||||
;[a[i], a[j]] = [a[j], a[i]]
|
||||
;[a[i], a[j]] = [a[j]!, a[i]!]
|
||||
}
|
||||
return a
|
||||
}
|
||||
@@ -60,7 +60,7 @@ export function sample<T>(arr: T[], size: number): T[] {
|
||||
outN.push(...allN.splice(Math.floor(Math.random() * allN.length), 1))
|
||||
}
|
||||
|
||||
return outN.map((n) => arr[n])
|
||||
return outN.map((n) => arr[n]!)
|
||||
}
|
||||
|
||||
export function capitalize(s: string): string {
|
||||
@@ -72,7 +72,7 @@ export function capitalize(s: string): string {
|
||||
}
|
||||
|
||||
if (!s) return s
|
||||
return s[0].toLocaleUpperCase() + s.substr(1)
|
||||
return s[0]!.toLocaleUpperCase() + s.substr(1)
|
||||
}
|
||||
|
||||
export function jsonClone<T>(o: T): T {
|
||||
|
||||
@@ -0,0 +1,329 @@
|
||||
<template>
|
||||
<section>
|
||||
<div class="card">
|
||||
<header class="card-header" style="display: flex; flex-direction: row">
|
||||
<div class="card-header-title" style="flex-grow: 1">
|
||||
<p
|
||||
class="has-context"
|
||||
@click="
|
||||
(evt) => {
|
||||
selected = currentData
|
||||
$refs.context.open(evt)
|
||||
}
|
||||
"
|
||||
@contextmenu.prevent="
|
||||
(evt) => {
|
||||
selected = currentData
|
||||
$refs.context.open(evt)
|
||||
}
|
||||
"
|
||||
>
|
||||
{{ title }}
|
||||
</p>
|
||||
<div
|
||||
@click="isOpen = !isOpen"
|
||||
style="flex-grow: 1; height: 100%; cursor: pointer"
|
||||
></div>
|
||||
</div>
|
||||
<a
|
||||
v-if="isOpen"
|
||||
class="card-header-icon"
|
||||
role="button"
|
||||
@click="isList = !isList"
|
||||
>
|
||||
<b-icon :icon="isList ? 'th' : 'list-ul'"> </b-icon>
|
||||
</a>
|
||||
<a class="card-header-icon" role="button" @click="isOpen = !isOpen">
|
||||
<b-icon :icon="isOpen ? 'caret-down' : 'caret-up'"> </b-icon>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="card-content"
|
||||
:data-mode="isList ? 'list' : 'item'"
|
||||
>
|
||||
<div v-if="isList">
|
||||
<b-table
|
||||
:data="list"
|
||||
paginated
|
||||
:per-page="perPage"
|
||||
@page-change="(p) => makeList(p)"
|
||||
>
|
||||
<b-table-column field="entry" label="Entry" v-slot="props">
|
||||
<span
|
||||
:class="
|
||||
'tag clickable is-medium ' + getTagClass(props.row.entry)
|
||||
"
|
||||
@click.stop="
|
||||
(evt) => {
|
||||
selected = [props.row.entry]
|
||||
$refs.context.open(evt)
|
||||
}
|
||||
"
|
||||
@contextmenu.prevent="
|
||||
(evt) => {
|
||||
selected = [props.row.entry]
|
||||
$refs.context.open(evt)
|
||||
}
|
||||
"
|
||||
>
|
||||
{{ props.row.entry }}
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-for="t in props.row.alt || []"
|
||||
:key="t"
|
||||
:class="'tag clickable is-medium ' + getTagClass(t)"
|
||||
@click.stop="
|
||||
(evt) => {
|
||||
selected = [t]
|
||||
$refs.context.open(evt)
|
||||
}
|
||||
"
|
||||
@contextmenu.prevent="
|
||||
(evt) => {
|
||||
selected = [t]
|
||||
$refs.context.open(evt)
|
||||
}
|
||||
"
|
||||
>
|
||||
{{ t }}
|
||||
</span>
|
||||
</b-table-column>
|
||||
<b-table-column field="reading" label="Pinyin" v-slot="props">
|
||||
{{ (props.row.reading || []).join(' / ') }}
|
||||
</b-table-column>
|
||||
<b-table-column field="english" label="English" v-slot="props">
|
||||
<div
|
||||
class="no-scrollbar"
|
||||
style="max-width: 40vw; max-height: 200px"
|
||||
>
|
||||
{{ (props.row.english || []).join(' / ') }}
|
||||
</div>
|
||||
</b-table-column>
|
||||
|
||||
<template slot="empty">
|
||||
<div style="position: relative; height: 120px">
|
||||
<b-loading active :is-full-page="false"></b-loading>
|
||||
</div>
|
||||
</template>
|
||||
</b-table>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<span
|
||||
v-for="t in currentData"
|
||||
:key="t"
|
||||
:class="'tag clickable is-medium ' + getTagClass(t)"
|
||||
@click.stop="
|
||||
(evt) => {
|
||||
selected = [t]
|
||||
$refs.context.open(evt)
|
||||
}
|
||||
"
|
||||
@contextmenu.prevent="
|
||||
(evt) => {
|
||||
selected = [t]
|
||||
$refs.context.open(evt)
|
||||
}
|
||||
"
|
||||
>
|
||||
{{ t }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ContextMenu
|
||||
ref="context"
|
||||
:type="type"
|
||||
:entry="selected"
|
||||
:description="title + ' ' + description"
|
||||
:additional="additional"
|
||||
@quiz:added="(evt) => reload(evt.entries)"
|
||||
@quiz:removed="(evt) => reload(evt.entries)"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, Ref, Prop } from 'nuxt-property-decorator'
|
||||
import { api, IEntry, IType } from '~/assets/api'
|
||||
import ContextMenu from '../ContextMenu.vue'
|
||||
|
||||
type ILibraryEntry = Pick<
|
||||
IEntry,
|
||||
'entry' | 'reading' | 'translation' | 'type'
|
||||
> & {
|
||||
originalEntry: string
|
||||
}
|
||||
|
||||
@Component<LibraryCard>({
|
||||
components: {
|
||||
ContextMenu,
|
||||
},
|
||||
watch: {
|
||||
open() {
|
||||
this.isOpen = this.open
|
||||
},
|
||||
isList() {
|
||||
this.makeList()
|
||||
},
|
||||
isOpen() {
|
||||
this.reload(this.entries)
|
||||
},
|
||||
entries() {
|
||||
this.isList = false
|
||||
this.list = []
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.reload(this.entries)
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.isOpen = this.open
|
||||
},
|
||||
})
|
||||
export default class LibraryCard extends Vue {
|
||||
@Prop() title!: string
|
||||
@Prop() entries!: string[]
|
||||
@Prop() type!: IType
|
||||
@Prop({ default: '' }) description!: string
|
||||
@Prop({ default: false }) open!: boolean
|
||||
|
||||
@Prop({ default: () => [] }) additional!: {
|
||||
name: string
|
||||
handler: () => void
|
||||
}[]
|
||||
|
||||
@Ref() context!: ContextMenu
|
||||
|
||||
isOpen = false
|
||||
isList = false
|
||||
|
||||
list: ILibraryEntry[] = this.entries.map((el) => ({
|
||||
originalEntry: el,
|
||||
entry: [el],
|
||||
reading: [],
|
||||
translation: [],
|
||||
type: this.type,
|
||||
}))
|
||||
|
||||
perPage = 5
|
||||
|
||||
selected: string[] = []
|
||||
srsLevel: {
|
||||
[entry: string]: number
|
||||
} = {}
|
||||
|
||||
readonly tagClassMap = [
|
||||
(lv: number) => (lv > 2 ? 'is-success' : ''),
|
||||
(lv: number) => (lv > 0 ? 'is-warning' : ''),
|
||||
(lv: number) => (lv === 0 ? 'is-danger' : ''),
|
||||
]
|
||||
|
||||
async reload(entries: string[]) {
|
||||
if (!this.isOpen) {
|
||||
return
|
||||
}
|
||||
|
||||
if (entries.length > 0) {
|
||||
entries = [...new Set(entries)]
|
||||
|
||||
const { result } = await api.quiz_getSrsLevel({
|
||||
entries,
|
||||
type: this.type,
|
||||
})
|
||||
|
||||
entries.map((entry) => {
|
||||
delete this.srsLevel[entry]
|
||||
})
|
||||
|
||||
result.map(({ entry, srsLevel }) => {
|
||||
this.srsLevel[entry] = srsLevel
|
||||
})
|
||||
|
||||
this.$set(this, 'srsLevel', this.srsLevel)
|
||||
this.$forceUpdate()
|
||||
}
|
||||
}
|
||||
|
||||
async makeList(p = 1) {
|
||||
const offset = (p - 1) * this.perPage
|
||||
|
||||
const listMap = new Map<number, ILibraryEntry>()
|
||||
Array(this.perPage)
|
||||
.fill(null)
|
||||
.map((_, i) => {
|
||||
const el = this.list[offset + i]
|
||||
if (el && !el.reading.length) {
|
||||
listMap.set(offset + i, el)
|
||||
}
|
||||
})
|
||||
|
||||
await Promise.all(
|
||||
[...listMap].map(([k, v]) =>
|
||||
api
|
||||
.all_getLookup({
|
||||
entry: v.originalEntry,
|
||||
type: this.type,
|
||||
forced: true,
|
||||
limit: 1,
|
||||
})
|
||||
.then((r) =>
|
||||
listMap.set(k, {
|
||||
...r.result[0]!,
|
||||
...v,
|
||||
})
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
for (const [k, v] of listMap) {
|
||||
this.list = [...this.list.slice(0, k), v, ...this.list.slice(k + 1)]
|
||||
}
|
||||
|
||||
await this.reload([...listMap].flatMap(([, { entry }]) => entry))
|
||||
}
|
||||
|
||||
getTagClass(it: IEntry) {
|
||||
const srsLevel = Math.min(
|
||||
...it.entry.map((el) => this.srsLevel[el] || -Infinity)
|
||||
)
|
||||
|
||||
if (srsLevel === -Infinity) return 'is-light'
|
||||
|
||||
if (srsLevel === -1) {
|
||||
return 'is-info'
|
||||
}
|
||||
|
||||
for (const fn of this.tagClassMap) {
|
||||
const c = fn(srsLevel)
|
||||
if (c) {
|
||||
return c
|
||||
}
|
||||
}
|
||||
|
||||
return 'is-light'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tag {
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.card-content[data-mode='item'] {
|
||||
max-height: 400px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.has-context:hover {
|
||||
color: blue;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -257,7 +257,7 @@ export default class BrowseTab extends Vue {
|
||||
this.selected.reading = [
|
||||
await api
|
||||
.all_getReading({
|
||||
entry: this.selected.entry[0],
|
||||
entry: this.selected.entry[0]!,
|
||||
})
|
||||
.then((r) => r.result),
|
||||
]
|
||||
@@ -266,7 +266,7 @@ export default class BrowseTab extends Vue {
|
||||
if (!this.selected.translation.length) {
|
||||
this.selected.translation = await api
|
||||
.all_getMeaning({
|
||||
entry: this.selected.entry[0],
|
||||
entry: this.selected.entry[0]!,
|
||||
})
|
||||
.then((r) =>
|
||||
r.result.filter((r0) => !r0.entry).map((r0) => r0.meaning)
|
||||
@@ -360,7 +360,7 @@ export default class BrowseTab extends Vue {
|
||||
const o = jsonClone(row)
|
||||
this.selected = {
|
||||
...o,
|
||||
entry: o.entry[0],
|
||||
entry: o.entry[0]!,
|
||||
list: o.entry,
|
||||
}
|
||||
this.context.open(evt)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<section>
|
||||
<div class="HanziPage">
|
||||
<div class="CharacterTab">
|
||||
<form class="field" @submit.prevent="q = q0">
|
||||
<label for="q" class="label">
|
||||
Search
|
||||
@@ -29,7 +29,7 @@
|
||||
<div class="columns">
|
||||
<div class="column is-6 entry-display">
|
||||
<div
|
||||
class="hanzi-display clickable font-han"
|
||||
class="character-display clickable font-han"
|
||||
@click="(evt) => openContext(evt, current, 'character')"
|
||||
@contextmenu.prevent="
|
||||
(evt) => openContext(evt, current, 'character')
|
||||
@@ -278,12 +278,14 @@ import { Component, Prop, Ref, Vue, Watch } from 'nuxt-property-decorator'
|
||||
import ContextMenu from '@/components/ContextMenu.vue'
|
||||
import { api, IEntry } from '~/assets/api'
|
||||
|
||||
const TITLE = 'Kanji'
|
||||
|
||||
@Component<CharacterTab>({
|
||||
components: {
|
||||
ContextMenu,
|
||||
},
|
||||
async created() {
|
||||
this.$emit('title', 'Hanzi')
|
||||
this.$emit('title', TITLE)
|
||||
|
||||
this.q = this.query.q || ''
|
||||
|
||||
@@ -357,7 +359,7 @@ export default class CharacterTab extends Vue {
|
||||
|
||||
@Watch('q')
|
||||
async onQChange(q: string) {
|
||||
this.$emit('title', (q ? q + ' - ' : '') + 'Hanzi')
|
||||
this.$emit('title', (q ? q + ' - ' : '') + TITLE)
|
||||
|
||||
if (/\p{sc=Han}/u.test(q)) {
|
||||
const qs = q.split('').filter((h) => /\p{sc=Han}/u.test(h))
|
||||
@@ -381,7 +383,7 @@ export default class CharacterTab extends Vue {
|
||||
@Watch('current')
|
||||
load() {
|
||||
if (this.current) {
|
||||
this.loadHanzi()
|
||||
this.loadCharacter()
|
||||
this.loadVocab()
|
||||
this.loadSentences()
|
||||
} else {
|
||||
@@ -399,7 +401,7 @@ export default class CharacterTab extends Vue {
|
||||
}
|
||||
}
|
||||
|
||||
async loadHanzi() {
|
||||
async loadCharacter() {
|
||||
if (!/^\p{sc=Han}$/u.test(this.current)) {
|
||||
this.sub = []
|
||||
this.sup = []
|
||||
@@ -429,6 +431,7 @@ export default class CharacterTab extends Vue {
|
||||
} = await api.all_getLookup({
|
||||
entry: this.current,
|
||||
type: 'character',
|
||||
limit: 1,
|
||||
})
|
||||
|
||||
this.reading = r?.reading || []
|
||||
@@ -455,10 +458,9 @@ export default class CharacterTab extends Vue {
|
||||
.map((r) =>
|
||||
api
|
||||
.all_getLookup({ entry: r.entry, type: 'vocabulary', limit: 1 })
|
||||
.then((r) => r.result[0])
|
||||
.then((r) => r.result[0]!)
|
||||
)
|
||||
.filter((r) => r)
|
||||
.map((r) => r!)
|
||||
)
|
||||
}
|
||||
|
||||
@@ -478,10 +480,9 @@ export default class CharacterTab extends Vue {
|
||||
.map((r) =>
|
||||
api
|
||||
.all_getLookup({ entry: r.entry, type: 'sentence', limit: 1 })
|
||||
.then((r) => r.result[0])
|
||||
.then((r) => r.result[0]!)
|
||||
)
|
||||
.filter((r) => r)
|
||||
.map((r) => r!)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,285 @@
|
||||
<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 has-addons">
|
||||
<p class="control is-expanded">
|
||||
<input
|
||||
v-model="q0"
|
||||
class="input"
|
||||
type="search"
|
||||
name="q"
|
||||
placeholder="Type here to search"
|
||||
aria-label="search"
|
||||
/>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button
|
||||
class="button is-success"
|
||||
type="button"
|
||||
@click="openEditModal()"
|
||||
>
|
||||
Add new item
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="columns mt-4">
|
||||
<div class="column">
|
||||
<section class="card">
|
||||
<div class="card-content">
|
||||
<LibraryCard
|
||||
v-for="(it, i) in local.result"
|
||||
:id="it.id"
|
||||
:key="i"
|
||||
:title="it.title"
|
||||
:entries="it.entries"
|
||||
:type="it.type"
|
||||
:description="it.description"
|
||||
:additional="additionalContext(it)"
|
||||
/>
|
||||
|
||||
<b-pagination
|
||||
v-if="local.count > local.perPage"
|
||||
v-model="local.page"
|
||||
:total="local.count"
|
||||
:per-page="local.perPage"
|
||||
icon-prev="angle-left"
|
||||
icon-next="angle-right"
|
||||
@change="(p) => (local.page = p)"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b-modal v-model="isEditModal">
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<div v-if="!edited.id" class="card-header-title">New list</div>
|
||||
<div v-else class="card-header-title">Edit list</div>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<b-field label="Title">
|
||||
<b-input
|
||||
v-model="edited.title"
|
||||
placeholder="Must not be empty"
|
||||
></b-input>
|
||||
</b-field>
|
||||
<b-field label="Entries">
|
||||
<template slot="label">
|
||||
Entries
|
||||
<b-tooltip type="is-dark" label="Space or new-line separated">
|
||||
<b-icon size="is-small" icon="info-circle"></b-icon>
|
||||
</b-tooltip>
|
||||
</template>
|
||||
<b-input
|
||||
v-model="entryString"
|
||||
type="textarea"
|
||||
placeholder="Space or new-line separated, must not be empty"
|
||||
></b-input>
|
||||
</b-field>
|
||||
<b-field label="Description">
|
||||
<b-input v-model="edited.description" type="textarea"></b-input>
|
||||
</b-field>
|
||||
<b-field label="Tag">
|
||||
<b-taginput v-model="edited.tag"></b-taginput>
|
||||
</b-field>
|
||||
<b-field label="Additional options">
|
||||
<b-checkbox
|
||||
:value="edited.isShared"
|
||||
@input="(ev) => $set(edited, 'isShared', ev)"
|
||||
>
|
||||
Make it availble for others (shared library)
|
||||
</b-checkbox>
|
||||
</b-field>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<div class="card-footer-item">
|
||||
<button
|
||||
class="button is-success"
|
||||
type="button"
|
||||
@click="edited.id ? doUpdate() : doCreate()"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
class="button is-cancel"
|
||||
type="button"
|
||||
@click="isEditModal = false"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</b-modal>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Watch } from 'nuxt-property-decorator'
|
||||
import { api, ILibrary } from '~/assets/api'
|
||||
import LibraryCard from '../cards/LibraryCard.vue'
|
||||
|
||||
@Component<LibraryTab>({
|
||||
components: {
|
||||
LibraryCard,
|
||||
},
|
||||
created() {
|
||||
this.$emit('title', 'Library')
|
||||
this.updateLocal()
|
||||
},
|
||||
})
|
||||
export default class LibraryTab extends Vue {
|
||||
q = ''
|
||||
q0 = ''
|
||||
isEditModal = false
|
||||
|
||||
local: {
|
||||
result: ILibrary[]
|
||||
count: number
|
||||
page: number
|
||||
perPage: number
|
||||
} = {
|
||||
result: [],
|
||||
count: 0,
|
||||
page: 1,
|
||||
perPage: 10,
|
||||
}
|
||||
|
||||
edited: ILibrary = {
|
||||
id: '',
|
||||
title: '',
|
||||
list: [],
|
||||
type: 'vocabulary',
|
||||
description: '',
|
||||
tag: [],
|
||||
}
|
||||
|
||||
get entryString() {
|
||||
return this.edited.list.join('\n')
|
||||
}
|
||||
|
||||
set entryString(s) {
|
||||
this.edited.list = s
|
||||
.split('\n')
|
||||
.filter((s) => s.trim())
|
||||
.filter((a, i, r) => r.indexOf(a) === i)
|
||||
}
|
||||
|
||||
additionalContext(it: ILibrary) {
|
||||
if (!it.id) {
|
||||
return []
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
name: 'Edit list',
|
||||
handler: () => {
|
||||
this.openEditModal()
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Delete list',
|
||||
handler: () => {
|
||||
if (it.id) {
|
||||
this.doDelete(it.id)
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
openEditModal(it?: ILibrary) {
|
||||
this.edited = it || {
|
||||
id: '',
|
||||
title: '',
|
||||
list: [],
|
||||
type: 'vocabulary',
|
||||
description: '',
|
||||
tag: [],
|
||||
}
|
||||
|
||||
this.isEditModal = true
|
||||
}
|
||||
|
||||
@Watch('q')
|
||||
@Watch('local.page')
|
||||
async updateLocal() {
|
||||
const r = await api.library_getQuery({
|
||||
q: this.q,
|
||||
offset: this.local.page * this.local.perPage,
|
||||
limit: this.local.perPage,
|
||||
})
|
||||
|
||||
this.local = {
|
||||
...this.local,
|
||||
...r,
|
||||
result: r.result,
|
||||
}
|
||||
}
|
||||
|
||||
async doCreate() {
|
||||
await api.library_create(this.edited)
|
||||
|
||||
this.$buefy.snackbar.open(`Created list: ${this.edited.title}`)
|
||||
this.isEditModal = false
|
||||
|
||||
this.local.page = 1
|
||||
await this.updateLocal()
|
||||
}
|
||||
|
||||
async doUpdate() {
|
||||
const { id } = this.edited
|
||||
|
||||
if (id) {
|
||||
await api.library_update(this.edited)
|
||||
|
||||
this.$buefy.snackbar.open(`Updated list: ${this.edited.title}`)
|
||||
}
|
||||
|
||||
this.isEditModal = false
|
||||
|
||||
this.local.page = 1
|
||||
await this.updateLocal()
|
||||
}
|
||||
|
||||
async doDelete(id: string) {
|
||||
await api.library_delete({ id })
|
||||
|
||||
this.$buefy.snackbar.open(`Deleted list: ${this.edited.title}`)
|
||||
|
||||
this.local.page = 1
|
||||
await this.updateLocal()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
nav.pagination {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.button + .button {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.button.is-cancel {
|
||||
background-color: rgb(215, 217, 219);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,71 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
/* Visit https://aka.ms/tsconfig.json to read more about this file */
|
||||
|
||||
/* Basic Options */
|
||||
// "incremental": true, /* Enable incremental compilation */
|
||||
// "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
|
||||
// "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
|
||||
// "lib": [], /* Specify library files to be included in the compilation. */
|
||||
// "allowJs": true, /* Allow javascript files to be compiled. */
|
||||
// "checkJs": true, /* Report errors in .js files. */
|
||||
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
|
||||
// "declaration": true, /* Generates corresponding '.d.ts' file. */
|
||||
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
|
||||
// "sourceMap": true, /* Generates corresponding '.map' file. */
|
||||
// "outFile": "./", /* Concatenate and emit output to single file. */
|
||||
// "outDir": "./", /* Redirect output structure to the directory. */
|
||||
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
|
||||
// "composite": true, /* Enable project compilation */
|
||||
// "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
|
||||
// "removeComments": true, /* Do not emit comments to output. */
|
||||
// "noEmit": true, /* Do not emit outputs. */
|
||||
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
|
||||
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
|
||||
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
|
||||
|
||||
/* Strict Type-Checking Options */
|
||||
"strict": true, /* Enable all strict type-checking options. */
|
||||
"noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
|
||||
"strictNullChecks": true, /* Enable strict null checks. */
|
||||
"strictFunctionTypes": true, /* Enable strict checking of function types. */
|
||||
"strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
|
||||
"strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
|
||||
"noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
|
||||
"alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
|
||||
|
||||
/* Additional Checks */
|
||||
"noUnusedLocals": true, /* Report errors on unused locals. */
|
||||
"noUnusedParameters": true, /* Report errors on unused parameters. */
|
||||
"noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
|
||||
"noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
|
||||
"noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */
|
||||
"noPropertyAccessFromIndexSignature": true, /* Require undeclared properties from index signatures to use element accesses. */
|
||||
|
||||
/* Module Resolution Options */
|
||||
// "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
|
||||
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
|
||||
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
|
||||
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
|
||||
// "typeRoots": [], /* List of folders to include type definitions from. */
|
||||
// "types": [], /* Type declaration files to be included in compilation. */
|
||||
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
|
||||
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
|
||||
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
|
||||
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
|
||||
|
||||
/* Source Map Options */
|
||||
// "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
|
||||
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
|
||||
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
|
||||
|
||||
/* Experimental Options */
|
||||
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
|
||||
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
|
||||
|
||||
/* Advanced Options */
|
||||
"skipLibCheck": true, /* Skip type checking of declaration files. */
|
||||
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
{
|
||||
"extends": "./tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"target": "ES2018",
|
||||
"module": "ESNext",
|
||||
|
||||
Reference in new issue
Block a user