update

components/cards/LevelCard.vue

@@ -0,0 +1,146 @@
+<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>