www/components/cards/LibraryCard.vue

<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, IDictionaryLookup, IType } from '~/assets/api'
import ContextMenu from '../ContextMenu.vue'

type ILibraryEntry = Pick<
  IDictionaryLookup,
  'list' | 'reading' | 'translation' | 'type'
> & {
  entry: 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) => ({
    entry: el,
    list: [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.allSettled(
      [...listMap].map(([k, v]) =>
        api
          .all_getLookup({
            entry: v.entry,
            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: IDictionaryLookup) {
    const srsLevel = Math.min(
      ...it.list.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>