feat(panel): load selected lists on show panel open

Author: dvcol

src/components/views/panel/ShowPanel.vue

@@ -23,6 +23,7 @@ import {
   useListStore,
 } from '~/stores/data/list.store';
 import { useShowStore } from '~/stores/data/show.store';
+import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
 import { useLinksStore } from '~/stores/settings/links.store';
 import { useI18n } from '~/utils/i18n.utils';
 
@@ -163,9 +164,20 @@ const collectionProgressEntity = computed(() => {
   return collectionProgress.value;
 });
 
-const { lists } = useListsStoreRefs();
-const { isListTypeLoading, isItemInList, addToOrRemoveFromList, isItemListLoading } =
-  useListStore();
+const { myLists } = useListsStoreRefs();
+const {
+  isListTypeLoading,
+  isItemInList,
+  addToOrRemoveFromList,
+  isItemListLoading,
+  fetchAll,
+} = useListStore();
+const { loadLists, loadListsPageSize } = useExtensionSettingsStoreRefs();
+
+const shouldFetchLists = computed(() => {
+  if (!myLists.value?.length) return false;
+  return loadLists.value;
+});
 
 const listLoading = computed(
   () =>
@@ -208,7 +220,7 @@ const activeLists = computed(() => {
   const _id = activeItem?.value?.ids?.trakt;
   const _type = panelType.value;
   if (_id === undefined || !_type) return;
-  return lists.value
+  return myLists.value
     ?.filter(list => isItemInList(list.id, _type, _id).value)
     .map(list => list.id);
 });
@@ -231,7 +243,7 @@ const releaseDate = computed(() => activeItem.value?.first_aired);
 
 const onListUpdate = async (value: ListEntity['id'], remove: boolean) => {
   if (!panelType.value || !activeItem.value?.ids) return;
-  const _list = lists.value.find(list => list.id === value);
+  const _list = myLists.value.find(list => list.id === value);
   if (!_list) return;
 
   await addToOrRemoveFromList({
@@ -302,6 +314,17 @@ onMounted(() => {
           fetchShowEpisode(_showId, _seasonNb, _episodeNb);
         }
       }
+
+      if (shouldFetchLists.value) {
+        fetchAll(
+          myLists.value.filter(
+            _active => loadLists.value?.find(_list => _list.id === _active.id),
+          ),
+          {
+            limit: loadListsPageSize.value,
+          },
+        );
+      }
     },
     { immediate: true },
   );

src/components/views/panel/ShowPanelButtons.vue

@@ -179,23 +179,21 @@ const collectionOptions = computed(() => {
   return _options;
 });
 
-const { lists, listsLoading } = useListsStoreRefs();
+const { myLists, listsLoading } = useListsStoreRefs();
 const { fetchLists, getIcon } = useListsStore();
 
 const listLoading = computed(() => {
   return listsLoading.value || activeLoading.value;
 });
 
 const listOptions = computed(() => {
-  return lists.value
-    ?.filter(list => [ListType.List, ListType.Watchlist].map(String).includes(list.type))
-    .map(list => {
-      return {
-        label: list.type === ListType.Watchlist ? i18n(list.name) : list.name,
-        value: list.id,
-        icon: getIcon(list),
-      };
-    });
+  return myLists.value?.map(list => {
+    return {
+      label: list.type === ListType.Watchlist ? i18n(list.name) : list.name,
+      value: list.id,
+      icon: getIcon(list),
+    };
+  });
 });
 
 onMounted(() => {

src/components/views/settings/SettingsTabs.vue

@@ -1,13 +1,19 @@
 <script lang="ts" setup>
-import { NSelect, NSwitch } from 'naive-ui';
+import { NIcon, NSelect, NSwitch, type SelectOption } from 'naive-ui';
 
-import { computed, ref } from 'vue';
+import { type Component, computed, h, onBeforeMount, ref } from 'vue';
 
 import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
 import { pageSizeOptions } from '~/models/page-size.model';
 import { Route } from '~/models/router.model';
 import { useHistoryStoreRefs } from '~/stores/data/history.store';
-import { useListStoreRefs } from '~/stores/data/list.store';
+import {
+  type ListEntity,
+  ListType,
+  useListsStore,
+  useListsStoreRefs,
+  useListStoreRefs,
+} from '~/stores/data/list.store';
 import { useSearchStoreRefs } from '~/stores/data/search.store';
 import {
   useExtensionSettingsStore,
@@ -17,10 +23,53 @@ import { useI18n } from '~/utils/i18n.utils';
 
 const i18n = useI18n('settings', 'tabs');
 
-const { enabledTabs, restoreRoute, routeDictionary, restorePanel, defaultTab } =
-  useExtensionSettingsStoreRefs();
 const { toggleTab } = useExtensionSettingsStore();
 
+const {
+  enabledTabs,
+  restoreRoute,
+  routeDictionary,
+  restorePanel,
+  defaultTab,
+  loadLists,
+  loadListsPageSize,
+} = useExtensionSettingsStoreRefs();
+
+const { getIcon, fetchLists } = useListsStore();
+const { myLists, listsLoading } = useListsStoreRefs();
+
+const selectedLists = computed({
+  get: () => loadLists.value.map(({ id }) => id),
+  set: selected => {
+    loadLists.value = myLists.value.filter(({ id }) => selected.includes(id));
+  },
+});
+
+type ListOption = SelectOption & { source: ListEntity; icon: Component };
+const listOptions = computed<ListOption[]>(() =>
+  myLists.value.map((list, i) => ({
+    label: list.type === ListType.Watchlist ? i18n(list.name, 'list') : list.name,
+    value: list.id,
+    source: list,
+    icon: getIcon(list),
+  })),
+);
+
+const renderLabel = (option: ListOption) => [
+  h(NIcon, {
+    style: {
+      verticalAlign: '-0.2em',
+      marginRight: '0.7em',
+    },
+    component: option.icon,
+  }),
+  option.label?.toString(),
+];
+
+onBeforeMount(() => {
+  fetchLists();
+});
+
 const { pageSize: historyPageSize } = useHistoryStoreRefs();
 const { pageSize: listPageSize } = useListStoreRefs();
 const { pageSize: searchPageSize } = useSearchStoreRefs();
@@ -52,6 +101,22 @@ const container = ref();
       />
     </SettingsFormItem>
 
+    <!--  Load lists in panel  -->
+    <SettingsFormItem :label="i18n('label_load_lists')">
+      <NSelect
+        v-model:value="selectedLists"
+        class="list-select"
+        :to="container"
+        :options="listOptions"
+        :loading="listsLoading"
+        :disabled="listsLoading"
+        :render-label="renderLabel"
+        :max-tag-count="1"
+        :ellipsis-tag-popover-props="{ disabled: true }"
+        multiple
+      />
+    </SettingsFormItem>
+
     <!--  Restore tab  -->
     <SettingsFormItem :label="i18n('label_restore_tab')">
       <NSwitch v-model:value="restoreRoute" class="form-switch">
@@ -91,6 +156,16 @@ const container = ref();
     </SettingsFormItem>
 
     <!--  Page Size  -->
+    <SettingsFormItem :label="i18n('label_load_lists_page_size')">
+      <NSelect
+        v-model:value="loadListsPageSize"
+        :disabled="!loadLists.length"
+        class="form-select"
+        :to="container"
+        :options="pageSizeOptions"
+      />
+    </SettingsFormItem>
+
     <SettingsFormItem :label="i18n('label_history_page_size')">
       <NSelect
         v-model:value="historyPageSize"
@@ -143,7 +218,8 @@ const container = ref();
   min-width: 5.5rem;
 }
 
-.default-tab {
-  min-width: 7rem;
+.default-tab,
+.list-select {
+  width: 12.5rem;
 }
 </style>

src/components/views/watchlist/WatchlistNavbar.vue

@@ -49,12 +49,12 @@ const listOptions = computed<ListOption[]>(() =>
     label: [ListType.Collection, ListType.Watchlist, ListType.Favorites]
       .map(String)
       .includes(list.type)
-      ? i18n(list.name)
+      ? i18n(list.name, 'list')
       : list.name,
     value: list.id,
     source: list,
     icon: getIcon(list),
-    disabled: listLoading.value || listLoading.value,
+    disabled: listLoading.value,
   })),
 );
 

src/i18n/en/list/list.json

@@ -22,5 +22,21 @@
   "list__item__placeholder_empty": {
     "message": "Nothing on this day.",
     "description": "Empty placeholder for list item."
+  },
+  "list__list_type__watchlist": {
+    "message": "Watchlist",
+    "description": "Label for the watchlist list type"
+  },
+  "list__list_type__favorites": {
+    "message": "Favorites",
+    "description": "Label for the favorites list type"
+  },
+  "list__list_type__collection_movie": {
+    "message": "Movie collection",
+    "description": "Label for the movie collection list type"
+  },
+  "list__list_type__collection_show": {
+    "message": "Show collection",
+    "description": "Label for the show collection list type"
   }
 }

src/i18n/en/navbar/navbar-list.json

@@ -46,5 +46,13 @@
   "settings__tabs__label_search_page_size": {
     "message": "Search page size",
     "description": "Label for the 'Search page size' setting"
+  },
+  "settings__tabs__label_load_lists": {
+    "message": "Lists to load when opening panels",
+    "description": "Label for the 'Load lists' setting"
+  },
+  "settings__tabs__label_load_lists_page_size": {
+    "message": "Page size for lists",
+    "description": "Label for the 'Page size for lists' setting"
   }
 }

src/i18n/en/settings/settings-tabs.json

@@ -185,6 +185,13 @@ export const useListsStore = defineStore(ListsStoreConstants.Store, () => {
     }
   };
 
+  /** Filter favorites and collections out  */
+  const myLists = computed(() => {
+    return lists.value?.filter(list => {
+      return [ListType.List, ListType.Watchlist].map(String).includes(list.type);
+    });
+  });
+
   const initListsStore = async () => {
     await restoreState();
 
@@ -193,7 +200,7 @@ export const useListsStore = defineStore(ListsStoreConstants.Store, () => {
     });
   };
 
-  return { listsLoading: loading, lists, activeList, fetchLists, clearState, initListsStore, getIcon };
+  return { listsLoading: loading, lists, myLists, activeList, fetchLists, clearState, initListsStore, getIcon };
 });
 
 export const useListsStoreRefs = () => storeToRefs(useListsStore());
@@ -209,6 +216,9 @@ type ListErrorDictionary = Partial<Record<ListEntity['type'], ErrorDictionary>>;
 type ListTypeLoading = Partial<Record<ListTypes, boolean>>;
 type ListDictionaryItemLoading = Partial<Record<ListTypes, Partial<Record<ListItemTypes, Record<string, boolean>>>>>;
 
+type ListItemQuery = TraktWatchlistGetQuery | TraktFavoriteGetQuery | TraktCollectionGetQuery | TraktListItemsGetQuery;
+type ListQuery = { page?: number; limit?: number; list?: ListEntity };
+
 const ListStoreConstants = {
   Store: 'data.list',
   LocalPageSize: 'data.list.page-size',
@@ -280,10 +290,7 @@ export const useListStore = defineStore(ListStoreConstants.Store, () => {
 
   const { user } = useUserSettingsStoreRefs();
 
-  const fetchItems = async (
-    list: ListEntity,
-    query: TraktWatchlistGetQuery | TraktFavoriteGetQuery | TraktCollectionGetQuery | TraktListItemsGetQuery,
-  ) => {
+  const fetchItems = async (list: ListEntity, query: ListItemQuery = {}) => {
     let _query = { ...query };
     let response;
 
@@ -314,20 +321,16 @@ export const useListStore = defineStore(ListStoreConstants.Store, () => {
     return response;
   };
 
-  const fetchListItems = async ({
-    page,
-    limit = pageSize.value,
-    list = activeList.value,
-  }: { page?: number; limit?: number; list?: ListEntity } = {}) => {
-    if (!firstLoad.value && loading.value) {
+  const fetchListItems = async ({ page, limit = pageSize.value, list = activeList.value }: ListQuery = {}, parallel = false) => {
+    if (!firstLoad.value && !parallel && loading.value) {
       logger.warn('Already fetching list');
       return;
     }
     if (firstLoad.value) firstLoad.value = false;
 
     logger.debug('Fetching List', { list, page, limit });
 
-    loading.value = true;
+    if (!parallel) loading.value = true;
     typeLoading[list.type] = true;
     listDictionaryLoading[list.id.toString()] = true;
     const timeout = debounceLoading(listItems, loadingPlaceholder, !page);
@@ -348,12 +351,19 @@ export const useListStore = defineStore(ListStoreConstants.Store, () => {
       throw e;
     } finally {
       clearTimeout(timeout);
-      loading.value = false;
+      if (!parallel) loading.value = false;
       typeLoading[list.type] = false;
       listDictionaryLoading[list.id.toString()] = false;
     }
   };
 
+  const fetchAll = async (lists: ListEntity[], query?: Omit<ListQuery, 'list'>) => {
+    if (!lists.length) return;
+    loading.value = true;
+    await Promise.all(lists.map(list => fetchListItems({ list, ...query }, true)));
+    loading.value = false;
+  };
+
   const i18n = useI18n('common', 'notification');
 
   const { fetchActivity } = useActivityStore();
@@ -475,6 +485,7 @@ export const useListStore = defineStore(ListStoreConstants.Store, () => {
     belowThreshold,
     loadingPlaceholder,
     fetchListItems,
+    fetchAll,
     filteredListItems,
     initListStore,
     isListLoading,