WEBDEV-7757 Adjust sort options shown for TV searches (#494)

* Adjust sort bar to make list of sort options configurable

* Adjust sort bar template with new display logic

* Improve template readability/consistency a bit

* Add dom.iterable to tsconfig

* Add & update unit tests

* Better organize sort option templates

* Update unit tests

* Switch views/date sort display type depending on available options

* Simplify views/date sort availability

Author: latonv

src/collection-browser.ts

@@ -47,6 +47,9 @@ import {
   tvFacetDisplayOrder,
   TvClipFilterType,
   TileBlurOverrideState,
+  defaultSortAvailability,
+  favoritesSortAvailability,
+  tvSortAvailability,
 } from './models';
 import {
   RestorationStateHandlerInterface,
@@ -802,14 +805,37 @@ export class CollectionBrowser
   private get sortFilterBarTemplate(): TemplateResult | typeof nothing {
     if (this.suppressSortBar) return nothing;
 
+    // Determine the set of sortable fields that should be shown in the sort bar
+    let defaultViewSort = SortField.weeklyview;
+    let defaultDateSort = SortField.date;
+    let sortFieldAvailability = defaultSortAvailability;
+
+    // We adjust the sort options for a couple of special cases...
+    if (this.withinCollection?.startsWith('fav-')) {
+      // When viewing a fav- collection, we include the Date Favorited option and show
+      // it as the default in the date dropdown.
+      defaultDateSort = SortField.datefavorited;
+      sortFieldAvailability = favoritesSortAvailability;
+    } else if (!this.withinCollection && this.searchType === SearchType.TV) {
+      // When viewing TV search results, we default the views dropdown to All-time Views
+      // and exclude several of the usual date sort options.
+      defaultViewSort = SortField.alltimeview;
+      defaultDateSort = SortField.datearchived;
+      sortFieldAvailability = tvSortAvailability;
+    }
+
+    // We only show relevance sort if a search query is currently defined
+    sortFieldAvailability.relevance = this.isRelevanceSortAvailable;
+
     return html`
       <sort-filter-bar
         .defaultSortField=${this.defaultSortField}
         .defaultSortDirection=${this.defaultSortDirection}
+        .defaultViewSort=${defaultViewSort}
+        .defaultDateSort=${defaultDateSort}
         .selectedSort=${this.selectedSort}
         .sortDirection=${this.sortDirection}
-        .showRelevance=${this.isRelevanceSortAvailable}
-        .showDateFavorited=${this.withinCollection?.startsWith('fav-')}
+        .sortFieldAvailability=${sortFieldAvailability}
         .displayMode=${this.displayMode}
         .selectedTitleFilter=${this.selectedTitleFilter}
         .selectedCreatorFilter=${this.selectedCreatorFilter}

src/models.ts

@@ -322,6 +322,27 @@ export enum SortField {
   'creator' = 'creator',
 }
 
+/**
+ * Views-related sort fields
+ */
+export const ALL_VIEWS_SORT_FIELDS = [
+  SortField.weeklyview,
+  SortField.alltimeview,
+] as const;
+export type ViewsSortField = (typeof ALL_VIEWS_SORT_FIELDS)[number];
+
+/**
+ * Date-related sort fields
+ */
+export const ALL_DATE_SORT_FIELDS = [
+  SortField.datefavorited,
+  SortField.date,
+  SortField.datearchived,
+  SortField.datereviewed,
+  SortField.dateadded,
+] as const;
+export type DateSortField = (typeof ALL_DATE_SORT_FIELDS)[number];
+
 export interface SortOption {
   /**
    * The SortField enum member corresponding to this option.
@@ -532,6 +553,33 @@ export function sortOptionFromAPIString(sortName?: string | null): SortOption {
   );
 }
 
+export const defaultSortAvailability: Record<SortField, boolean> = {
+  [SortField.relevance]: true,
+  [SortField.weeklyview]: true,
+  [SortField.alltimeview]: true,
+  [SortField.title]: true,
+  [SortField.datefavorited]: false,
+  [SortField.date]: true,
+  [SortField.datearchived]: true,
+  [SortField.datereviewed]: true,
+  [SortField.dateadded]: true,
+  [SortField.creator]: true,
+  [SortField.default]: false,
+  [SortField.unrecognized]: false,
+};
+
+export const favoritesSortAvailability: Record<SortField, boolean> = {
+  ...defaultSortAvailability,
+  [SortField.datefavorited]: true,
+};
+
+export const tvSortAvailability: Record<SortField, boolean> = {
+  ...defaultSortAvailability,
+  [SortField.date]: false,
+  [SortField.datereviewed]: false,
+  [SortField.dateadded]: false,
+};
+
 export const defaultProfileElementSorts: Record<
   string,
   Exclude<SortField, SortField.default>