feat(list): create navbar list and basic fetching

Author: dvcol

src/components/common/list/ListScroll.model.ts

@@ -1,8 +1,14 @@
 import type { NVirtualList, VirtualListInst } from 'naive-ui';
-
 import type { Ref } from 'vue';
 
 export type VirtualListRef = VirtualListInst & typeof NVirtualList;
+export type VirtualListProps = {
+  itemSize?: number;
+  visibleItemsTag?: string | ObjectConstructor;
+  visibleItemsProps?: ObjectConstructor;
+  paddingTop?: string | number;
+  paddingBottom?: string | number;
+};
 
 export type OnScroll = (listRef: Ref<VirtualListRef | undefined>) => void;
 export type OnUpdated = (listRef: Ref<VirtualListRef | undefined>) => void;

src/components/common/list/ListScroll.vue

@@ -5,7 +5,10 @@ import { ref, toRefs } from 'vue';
 
 import type { PropType, Ref, Transition } from 'vue';
 
-import type { VirtualListRef } from '~/components/common/list/ListScroll.model';
+import type {
+  VirtualListProps,
+  VirtualListRef,
+} from '~/components/common/list/ListScroll.model';
 import type { TraktClientPagination } from '~/models/trakt/trakt-client.model';
 
 import ListEmpty from '~/components/common/list/ListEmpty.vue';
@@ -29,6 +32,10 @@ const props = defineProps({
     type: Number,
     required: false,
   },
+  listOptions: {
+    type: Object as PropType<VirtualListProps>,
+    required: false,
+  },
 });
 
 const emits = defineEmits<{
@@ -59,14 +66,14 @@ const onUpdatedHandler = () => {
       v-if="items.length || loading"
       ref="virtualList"
       class="list-scroll"
-      :item-size="80"
       :data-length="items.length"
       :data-page-size="pageSize"
+      :item-size="listOptions?.itemSize ?? 80"
       :items="items"
-      :visible-items-tag="NTimeline"
-      :visible-items-tag-props="{ size: 'large' }"
-      :padding-top="56"
-      :padding-bottom="16"
+      :visible-items-tag="listOptions?.visibleItemsTag ?? NTimeline"
+      :visible-items-props="{ size: 'large', ...listOptions?.visibleItemsProps }"
+      :padding-top="listOptions?.paddingTop ?? 56"
+      :padding-bottom="listOptions?.paddingBottom ?? 16"
       @scroll="onScrollHandler"
       @vue:updated="onUpdatedHandler"
     >

src/components/common/navbar/NavbarComponent.vue

@@ -17,7 +17,13 @@ const navigate = (to: Route) => {
   router.push(to);
 };
 
-const routes = [Route.Progress, Route.Calendar, Route.History, Route.List, Route.Search];
+const routes = [
+  Route.Progress,
+  Route.Calendar,
+  Route.History,
+  Route.Watchlist,
+  Route.Search,
+];
 
 const isHover = ref(false);
 const isFocus = ref(false);

src/components/common/navbar/NavbarPageSizeSelect.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { NSelect, NTooltip, type SelectOption } from 'naive-ui';
+
+import { onMounted, ref, toRefs, watch } from 'vue';
+
+import { useI18n } from '~/utils';
+
+const i18n = useI18n('navbar');
+
+const props = defineProps({
+  parentElement: {
+    type: HTMLElement,
+    required: false,
+  },
+  pageSize: {
+    type: Number,
+    required: true,
+  },
+});
+
+const emit = defineEmits<{
+  (e: 'update:pageSize', value: number): void;
+}>();
+
+const pageSizeOptions: SelectOption[] = [
+  { label: '50', value: 50 },
+  { label: '100', value: 100 },
+  { label: '200', value: 200 },
+  { label: '500', value: 500 },
+  { label: '1000', value: 1000 },
+];
+
+const { pageSize } = toRefs(props);
+const innerValue = ref(pageSize.value);
+
+onMounted(() => {
+  watch(innerValue, () => emit('update:pageSize', innerValue.value));
+});
+</script>
+
+<template>
+  <NTooltip
+    :show-arrow="false"
+    placement="bottom"
+    :delay="1000"
+    trigger="hover"
+    :to="parentElement"
+  >
+    <span> {{ i18n('page_size') }} </span>
+    <template #trigger>
+      <NSelect
+        v-model:value="innerValue"
+        class="page-select"
+        :options="pageSizeOptions"
+        :to="parentElement"
+      />
+    </template>
+  </NTooltip>
+</template>
+
+<style scoped lang="scss">
+.page-select {
+  flex: 0 0 5rem;
+}
+</style>

src/components/container/ContainerComponent.ce.vue

@@ -99,7 +99,19 @@ const root = ref<HTMLElement>();
   }
 
   @media (prefers-color-scheme: dark) {
-    @include mixin.hover-background(rgb(0 0 0 / 80%), rgb(0 0 0 / 90%));
+    @include mixin.hover-background(var(--bg-black-80), var(--bg-black-90));
+  }
+}
+
+.n-select-menu {
+  @include mixin.hover-background(var(--bg-red-20), var(--bg-red-80));
+
+  @media (prefers-color-scheme: light) {
+    @include mixin.hover-background(var(--bg-red-20), var(--bg-red-80));
+  }
+
+  @media (prefers-color-scheme: dark) {
+    @include mixin.hover-background(var(--bg-black-20), var(--bg-black-80));
   }
 }
 

src/components/views/history/HistoryItem.vue

@@ -17,6 +17,7 @@ defineProps({
 
 const getTitle = (media: TraktHistory) => {
   if ('movie' in media) return media.movie.title;
+  if (!media.episode) return media.show?.title;
   const number = media.episode?.number?.toString().padStart(2, '0');
   return `${media.episode?.season}x${number} - ${media?.episode?.title}`;
 };

src/components/views/history/HistoryNavbar.vue

@@ -1,28 +1,27 @@
 <script setup lang="ts">
-import { NDatePicker, NFlex, NIcon, NInput, NSelect, NTooltip } from 'naive-ui';
-import { computed, defineProps, ref, watch } from 'vue';
+import { NDatePicker, NFlex, NIcon, NInput } from 'naive-ui';
 
-import type { SelectOption } from 'naive-ui';
+import { computed, defineProps, ref, watch } from 'vue';
 
+import NavbarPageSizeSelect from '~/components/common/navbar/NavbarPageSizeSelect.vue';
 import IconLoop from '~/components/icons/IconLoop.vue';
+
 import { useHistoryStore, useHistoryStoreRefs } from '~/stores/data/history.store';
+import { useI18n } from '~/utils';
 import { debounce } from '~/utils/debounce.utils';
 
+const i18n = useI18n('navbar');
+
 const { searchHistory, historyEnd, historyStart, pageSize } = useHistoryStoreRefs();
 const { setHistoryRange } = useHistoryStore();
 
 const debouncedSearch = ref(searchHistory.value);
 
-const pageSizeOptions: SelectOption[] = [
-  { label: '50', value: 50 },
-  { label: '100', value: 100 },
-  { label: '200', value: 200 },
-  { label: '500', value: 500 },
-  { label: '1000', value: 1000 },
-];
-
 defineProps({
-  parentElement: HTMLElement,
+  parentElement: {
+    type: HTMLElement,
+    required: false,
+  },
 });
 
 watch(searchHistory, () => {
@@ -51,9 +50,9 @@ const onDateChange = debounce((values?: [number, number]) => {
 </script>
 
 <template>
-  <NFlex class="row" align="center" justify="center" :vertical="false">
+  <NFlex class="row" align="center" justify="space-evenly" :vertical="false">
     <NDatePicker
-      class="picker"
+      class="date-picker"
       type="daterange"
       :to="parentElement"
       :default-value="[Date.now(), Date.now()]"
@@ -67,7 +66,7 @@ const onDateChange = debounce((values?: [number, number]) => {
     />
     <NInput
       v-model:value="debouncedSearch"
-      class="input"
+      class="search-input"
       placeholder="Search"
       autosize
       clearable
@@ -76,42 +75,21 @@ const onDateChange = debounce((values?: [number, number]) => {
         <NIcon :component="IconLoop" />
       </template>
     </NInput>
-    <NTooltip
-      :show-arrow="false"
-      placement="bottom"
-      :delay="500"
-      trigger="hover"
-      :to="parentElement"
-    >
-      <span> Page size </span>
-      <template #trigger>
-        <NSelect
-          v-model:value="pageSize"
-          class="empty select"
-          :options="pageSizeOptions"
-          :to="parentElement"
-        />
-      </template>
-    </NTooltip>
+    <NavbarPageSizeSelect v-model:page-size="pageSize" :parent-element="parentElement" />
   </NFlex>
 </template>
 
 <style lang="scss" scoped>
-@use '~/styles/mixin' as mixin;
-
 .row {
   width: 100%;
+  padding: 0 0.5rem;
 
-  .picker {
-    flex: 0 1 47%;
-  }
-
-  .input {
-    flex: 0 1 calc(47% - 5rem);
+  .date-picker {
+    flex: 0 1 50%;
   }
 
-  .select {
-    flex: 0 1 5rem;
+  .search-input {
+    flex: 1 1 calc(46% - 5rem);
   }
 }
 </style>

src/components/views/list/ListComponent.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import type { TraktClientPagination } from '~/models/trakt/trakt-client.model';
+import type { TraktWatchlist } from '~/models/trakt/trakt-watchlist.model';
+
+import ListScroll from '~/components/common/list/ListScroll.vue';
+import HistoryItem from '~/components/views/history/HistoryItem.vue';
+
+import { TraktService } from '~/services/trakt.service';
+import { useUserSettingsStoreRefs } from '~/stores/settings/user.store';
+
+const { user } = useUserSettingsStoreRefs();
+
+const list = ref<TraktWatchlist[]>([]);
+const pagination = ref<TraktClientPagination>();
+const loading = ref(true);
+const pageSize = 100;
+
+onMounted(() => {
+  console.info('This is a list component');
+  TraktService.traktClient.sync.collection.get.cached({ type: 'movies' });
+  TraktService.traktClient.sync.collection.get.cached({ type: 'shows' });
+  TraktService.traktClient.sync.watchlist.get.cached().then(async res => {
+    list.value = await res.json();
+    pagination.value = res.pagination;
+    loading.value = false;
+  });
+  TraktService.traktClient.users.lists.get.cached({ id: user.value });
+  TraktService.traktClient.users.lists.collaborations.cached({ id: user.value });
+});
+</script>
+
+<template>
+  <ListScroll
+    :items="list"
+    :loading="loading"
+    :pagination="pagination"
+    :page-size="pageSize"
+    :list-options="{ itemSize: 51 }"
+  >
+    <template #default="{ item, index }">
+      <HistoryItem :item="item" :index="index" />
+    </template>
+  </ListScroll>
+</template>