71 lines
1.9 KiB
Vue
71 lines
1.9 KiB
Vue
<script lang="ts">
|
|
import {Options, Vue} from 'vue-class-component';
|
|
import {Prop} from 'vue-property-decorator';
|
|
import MangaListTable from '@/components/manga/MangaListTable.vue';
|
|
import type {AniListMangaListEntry} from '@/data/models/anilist/AniListMangaListEntry';
|
|
import type {AniListMedia} from '@/data/models/anilist/AniListMedia';
|
|
import type {AniListMangaList} from '@/data/models/anilist/AniListMangaList';
|
|
import type {MangaUpdatesRelation} from '@/data/models/mangaupdates/MangaUpdatesRelation';
|
|
import type {MangaUpdatesSeries} from '@/data/models/mangaupdates/MangaUpdatesSeries';
|
|
import type {MangaUpdatesChapter} from '@/data/models/mangaupdates/MangaUpdatesChapter';
|
|
|
|
export type ViewList = {
|
|
list: AniListMangaList,
|
|
entries: ViewEntry[],
|
|
}
|
|
export type ViewEntry = {
|
|
entry: AniListMangaListEntry,
|
|
media: AniListMedia | null,
|
|
relation: MangaUpdatesRelation | null,
|
|
series: MangaUpdatesSeries | null,
|
|
chapters: MangaUpdatesChapter[],
|
|
newChapters: number,
|
|
};
|
|
|
|
@Options({
|
|
name: 'MangaList',
|
|
components: {MangaListTable},
|
|
})
|
|
export default class MangaList extends Vue {
|
|
@Prop({required: true})
|
|
readonly viewList!: ViewList;
|
|
|
|
get localeListName(): string {
|
|
const key = 'manga.status.' + this.viewList.list.name.toLocaleLowerCase();
|
|
const res = this.$t(key);
|
|
return res == 'key' ? this.viewList.list.name : res;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="card manga-list">
|
|
<h3 class="card-title manga-list-title mb-0">{{ localeListName }}</h3>
|
|
<MangaListTable :viewList="viewList"/>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import 'bootstrap/scss/functions';
|
|
@import 'bootstrap/scss/variables';
|
|
@import 'bootstrap/scss/mixins/breakpoints';
|
|
|
|
@include media-breakpoint-down(sm) {
|
|
.manga-list {
|
|
border: 0 !important;
|
|
|
|
.manga-list-title {
|
|
padding: 0.25rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
.manga-list {
|
|
.manga-list-title {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|