@internetarchive/collection-browser 2.7.7-alpha.2 → 2.7.8-alpha1

package/src/language-code-handler/language-code-handler.ts

@@ -50,7 +50,7 @@ export class LanguageCodeHandler implements LanguageCodeHandlerInterface {
   /** @inheritdoc */
   getCodeStringFromLanguageName(languageName: string): string {
     const languageCodes = Object.keys(codeToLanguageMap).filter(
-      code => codeToLanguageMap[code] === languageName,
+      code => codeToLanguageMap[code] === languageName
     );
     const stringifiedCodes = languageCodes?.join(this.delimeter);
     return stringifiedCodes;

package/src/manage/manage-bar.ts

@@ -2,13 +2,13 @@ import { msg } from '@lit/localize';
 import { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
+import {
+  ModalConfig,
+  type ModalManagerInterface,
+} from '@internetarchive/modal-manager';
+import type { ManageableItem } from '../models';
 import iaButtonStyle from '../styles/ia-button';
-
-export interface ManageableItem {
-  identifier: string;
-  title?: string;
-  dateStr?: string;
-}
+import './remove-items-modal-content';
 
 @customElement('manage-bar')
 export class ManageBar extends LitElement {
@@ -18,9 +18,19 @@ export class ManageBar extends LitElement {
   @property({ type: String }) label = msg('Select items to remove');
 
   /**
-   * Specifies the context in which the collection browser is being used
+   * The shared modal manager component for displaying modal dialogs on this page
    */
-  @property({ type: String }) pageContext?: string;
+  @property({ type: Object }) modalManager?: ModalManagerInterface;
+
+  /**
+   * Array of items that have been selected for management
+   */
+  @property({ type: Object }) selectedItems: Array<ManageableItem> = [];
+
+  /**
+   * Message shows as note in the modal when removing items
+   */
+  @property({ type: String }) manageViewModalMsg?: string;
 
   /**
    * Whether to show the "Select All" button (default false)
@@ -32,6 +42,11 @@ export class ManageBar extends LitElement {
    */
   @property({ type: Boolean }) showUnselectAll = false;
 
+  /**
+   * Whether to show "Item Manager the items" button (default false)
+   */
+  @property({ type: Boolean }) showItemManageButton = false;
+
   /**
    * Whether to active delete button for selectable items
    */
@@ -48,41 +63,38 @@ export class ManageBar extends LitElement {
           <button
             class="ia-button danger"
             ?disabled=${!this.removeAllowed}
-            @click=${this.removeClicked}
+            @click=${this.showRemoveItemsModal}
           >
-            ${msg('Remove selected items')}
+            ${msg('Remove selected items')} (${this.selectedItems.length})
           </button>
-          ${this.pageContext === 'search'
-            ? html`
-                <button
-                  class="ia-button warning"
-                  ?disabled=${!this.removeAllowed}
-                  @click=${this.itemsManagerClicked}
-                >
-                  ${msg('Item Manager the items')}
-                </button>
-              `
-            : ''}
+          ${when(
+            this.showItemManageButton,
+            () => html` <button
+              class="ia-button warning"
+              ?disabled=${!this.removeAllowed}
+              @click=${this.manageItemsClicked}
+            >
+              ${msg('Item Manager the items')} (${this.selectedItems.length})
+            </button>`
+          )}
           <div class="selection-buttons">
             ${when(
               this.showSelectAll,
-              () =>
-                html` <button
-                  class="ia-button link select-all-btn"
-                  @click=${this.selectAllClicked}
-                >
-                  ${msg('Select all')}
-                </button>`,
+              () => html` <button
+                class="ia-button link select-all-btn"
+                @click=${this.selectAllClicked}
+              >
+                ${msg('Select all')}
+              </button>`
             )}
             ${when(
               this.showUnselectAll,
-              () =>
-                html` <button
-                  class="ia-button link unselect-all-btn"
-                  @click=${this.unselectAllClicked}
-                >
-                  ${msg('Unselect all')}
-                </button>`,
+              () => html` <button
+                class="ia-button link unselect-all-btn"
+                @click=${this.unselectAllClicked}
+              >
+                ${msg('Unselect all')}
+              </button>`
             )}
           </div>
         </div>
@@ -94,12 +106,12 @@ export class ManageBar extends LitElement {
     this.dispatchEvent(new CustomEvent('cancel'));
   }
 
-  private removeClicked(): void {
+  private removeItemsClicked(): void {
     this.dispatchEvent(new CustomEvent('removeItems'));
   }
 
-  private itemsManagerClicked(): void {
-    this.dispatchEvent(new CustomEvent('itemsManager'));
+  private manageItemsClicked(): void {
+    this.dispatchEvent(new CustomEvent('manageItems'));
   }
 
   private selectAllClicked(): void {
@@ -110,6 +122,88 @@ export class ManageBar extends LitElement {
     this.dispatchEvent(new CustomEvent('unselectAll'));
   }
 
+  /**
+   * Shows a modal dialog confirming the list of items to be removed
+   * @param items Which items to list in the modal
+   */
+  private showRemoveItemsModal(): void {
+    const customModalContent = html`
+      <remove-items-modal-content
+        .items=${this.selectedItems}
+        .message=${this.manageViewModalMsg}
+        @confirm=${() => this.removeItemsClicked()}
+      ></remove-items-modal-content>
+    `;
+
+    const config = new ModalConfig({
+      showProcessingIndicator: false,
+      processingImageMode: 'processing',
+      bodyColor: '#fff',
+      headerColor: '#194880',
+      showHeaderLogo: false,
+      closeOnBackdropClick: true,
+      title: html`${msg('Are you sure you want to remove these items?')}`,
+    });
+
+    this.modalManager?.classList.add('remove-items');
+    this.modalManager?.showModal({
+      config,
+      customModalContent,
+      userClosedModalCallback: () => {
+        this.modalManager?.classList.remove('remove-items');
+      },
+    });
+  }
+
+  /**
+   * Shows a modal dialog indicating that item removal is being processed
+   */
+  showRemoveItemsProcessingModal(): void {
+    const config = new ModalConfig({
+      showProcessingIndicator: true,
+      processingImageMode: 'processing',
+      bodyColor: '#fff',
+      headerColor: '#194880',
+      showHeaderLogo: false,
+      closeOnBackdropClick: true,
+      title: html`${msg('Removing selected items...')}`,
+    });
+
+    this.modalManager?.classList.add('remove-items');
+    this.modalManager?.showModal({
+      config,
+      userClosedModalCallback: () => {
+        this.modalManager?.classList.remove('remove-items');
+      },
+    });
+  }
+
+  /**
+   * Shows a modal dialog indicating that an error occurred while removing items
+   */
+  showRemoveItemsErrorModal(): void {
+    const config = new ModalConfig({
+      showProcessingIndicator: false,
+      processingImageMode: 'processing',
+      bodyColor: '#fff',
+      headerColor: '#691916',
+      showHeaderLogo: false,
+      closeOnBackdropClick: true,
+      title: html`${msg('Error: unable to remove items')}`,
+      message: html`${msg(
+        'An error occurred while removing items. Please try again in a few minutes.'
+      )}`,
+    });
+
+    this.modalManager?.classList.add('remove-items');
+    this.modalManager?.showModal({
+      config,
+      userClosedModalCallback: () => {
+        this.modalManager?.classList.remove('remove-items');
+      },
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       ${iaButtonStyle}

package/src/manage/remove-items-modal-content.ts

@@ -0,0 +1,102 @@
+import { LitElement, html, css, nothing, TemplateResult, CSSResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
+import { map } from 'lit/directives/map.js';
+import type { ManageableItem } from '../models';
+
+@customElement('remove-items-modal-content')
+export class RemoveItemsModalContent extends LitElement {
+  @property({ type: Object }) items: ManageableItem[] = [];
+
+  @property({ type: String }) message?: string;
+
+  render(): TemplateResult {
+    return html`
+      <ul>
+        ${map(
+          this.items,
+          ({ title, date }) => html`
+            <li>
+              <span class="item-title">${title ?? '[untitled]'}</span>
+              <span class="item-date">${date ?? ''}</span>
+            </li>
+          `
+        )}
+      </ul>
+      ${this.message ? html`<p class="message">${this.message}</p>` : nothing}
+      <div class="button-bar">
+        <button class="remove-items-btn" @click=${this.removeItemsBtnClicked}>
+          ${msg('Remove items')}
+        </button>
+      </div>
+    `;
+  }
+
+  private removeItemsBtnClicked(): void {
+    this.dispatchEvent(
+      new CustomEvent<{ items: ManageableItem[] }>('confirm', {
+        detail: {
+          items: this.items,
+        },
+      })
+    );
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      ul {
+        margin: 0;
+        padding: 0 10px;
+        font-size: 1.4rem;
+        list-style-type: none;
+        max-height: min(400px, 40vh);
+        overflow-y: auto;
+      }
+
+      li {
+        display: flex;
+        justify-content: space-between;
+        padding: 2px 0;
+      }
+      li:not(:last-of-type) {
+        border-bottom: 1px solid rgb(232, 232, 232);
+      }
+
+      .item-title {
+        word-break: break-word;
+      }
+
+      .item-date {
+        white-space: nowrap;
+      }
+
+      .message {
+        font-size: 1.4rem;
+        padding: 5px 10px;
+      }
+
+      .button-bar {
+        display: flex;
+        justify-content: center;
+        margin: 10px 5px;
+      }
+
+      .remove-items-btn {
+        margin-bottom: 10px;
+        padding: 10px;
+        border: 1px solid var(--primaryErrorCTABorder, #d43f3a);
+        border-radius: 4px;
+        color: white;
+        background: var(--primaryErrorCTAFill, #d9534f);
+        appearance: none;
+        cursor: pointer;
+      }
+      .remove-items-btn:hover {
+        background: rgba(var(--primaryErrorCTAFillRGB, 229, 28, 38), 0.9);
+      }
+      .remove-items-btn:active {
+        background: rgba(var(--primaryErrorCTAFillRGB, 229, 28, 38), 0.7);
+      }
+    `;
+  }
+}

package/src/mediatype/mediatype-config.ts

@@ -13,7 +13,6 @@ import { videoIcon } from '../assets/img/icons/mediatype/video';
 import { webIcon } from '../assets/img/icons/mediatype/web';
 import { searchIcon } from '../assets/img/icons/mediatype/search';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const mediatypeConfig: { [key: string]: any } = {
   account: {
     color: '#000000',

package/src/models.ts

@@ -125,7 +125,7 @@ export class TileModel {
     this.description = result.description?.values.join('\n');
     this.favCount = result.num_favorites?.value ?? 0;
     this.href = collapseRepeatedQuotes(
-      result.review?.__href__ ?? result.__href__?.value,
+      result.review?.__href__ ?? result.__href__?.value
     );
     this.identifier = TileModel.cleanIdentifier(result.identifier);
     this.issue = result.issue?.value;
@@ -212,7 +212,7 @@ export class TileModel {
   }
 
   private static cleanIdentifier(
-    identifier: string | undefined,
+    identifier: string | undefined
   ): string | undefined {
     // Some identifiers (e.g., from Whisper) represent documents rather than items, and
     // are suffixed with values that need to be stripped. Those values are separated
@@ -463,7 +463,7 @@ export const SORT_OPTIONS: Record<SortField, SortOption> = {
 export function sortOptionFromAPIString(sortName?: string | null): SortOption {
   return (
     Object.values(SORT_OPTIONS).find(opt =>
-      opt.urlNames.some(name => sortName === name),
+      opt.urlNames.some(name => sortName === name)
     ) ?? SORT_OPTIONS[SortField.unrecognized]
   );
 }
@@ -675,3 +675,13 @@ export const suppressedCollections: Record<string, boolean> = {
   americana: true,
   toronto: true,
 };
+
+/**
+ * A record of manageable item
+ */
+export interface ManageableItem {
+  identifier: string;
+  title?: string;
+  dateStr?: string;
+  date?: string;
+}

package/src/restoration-state-handler.ts

@@ -87,7 +87,7 @@ export class RestorationStateHandler
 
   private persistQueryStateToUrl(
     state: RestorationState,
-    forceReplace = false,
+    forceReplace = false
   ) {
     const url = new URL(window.location.href);
     const oldParams = new URLSearchParams(url.searchParams);
@@ -145,9 +145,10 @@ export class RestorationStateHandler
 
     if (state.selectedFacets) {
       for (const [facetName, facetValues] of Object.entries(
-        state.selectedFacets,
+        state.selectedFacets
       )) {
         const facetEntries = Object.entries(facetValues);
+        // eslint-disable-next-line no-continue
         if (facetEntries.length === 0) continue;
         for (const [key, data] of facetEntries) {
           const notValue = data.state === 'hidden';
@@ -164,7 +165,7 @@ export class RestorationStateHandler
     if (state.minSelectedDate && state.maxSelectedDate) {
       newParams.append(
         'and[]',
-        `year:[${state.minSelectedDate} TO ${state.maxSelectedDate}]`,
+        `year:[${state.minSelectedDate} TO ${state.maxSelectedDate}]`
       );
     }
 
@@ -220,7 +221,7 @@ export class RestorationStateHandler
         facets: state.selectedFacets,
       },
       '',
-      url,
+      url
     );
   }
 
@@ -317,18 +318,18 @@ export class RestorationStateHandler
             if (minDate && maxDate) {
               restorationState.minSelectedDate = minDate.substring(
                 1,
-                minDate.length,
+                minDate.length
               );
               restorationState.maxSelectedDate = maxDate.substring(
                 0,
-                maxDate.length - 1,
+                maxDate.length - 1
               );
             } else {
               this.setSelectedFacetState(
                 restorationState.selectedFacets,
                 field as FacetOption,
                 value,
-                'selected',
+                'selected'
               );
             }
             break;
@@ -344,7 +345,7 @@ export class RestorationStateHandler
               restorationState.selectedFacets,
               field as FacetOption,
               value,
-              'selected',
+              'selected'
             );
         }
       });
@@ -357,7 +358,7 @@ export class RestorationStateHandler
           restorationState.selectedFacets,
           field as FacetOption,
           value,
-          'hidden',
+          'hidden'
         );
       });
     }
@@ -407,13 +408,13 @@ export class RestorationStateHandler
   private paramsMatch(
     searchParams1: URLSearchParams,
     searchParams2: URLSearchParams,
-    keys: string[],
+    keys: string[]
   ): boolean {
     return keys.every(key =>
       arrayEquals(
         searchParams1.getAll(key).sort(),
-        searchParams2.getAll(key).sort(),
-      ),
+        searchParams2.getAll(key).sort()
+      )
     );
   }
 
@@ -422,7 +423,7 @@ export class RestorationStateHandler
    * when loading state from the URL.
    */
   private removeRecognizedParams(
-    searchParams: URLSearchParams,
+    searchParams: URLSearchParams
   ): URLSearchParams {
     // Remove all of our standard params
     searchParams.delete('query');
@@ -463,7 +464,7 @@ export class RestorationStateHandler
     selectedFacets: SelectedFacets,
     field: FacetOption,
     value: string,
-    state: FacetState,
+    state: FacetState
   ): void {
     const facet = selectedFacets[field];
     if (!facet) return; // Unrecognized facet group, ignore it.

package/src/sort-filter-bar/alpha-bar.ts

@@ -33,18 +33,19 @@ export class AlphaBar extends LitElement {
       <section id="container" aria-label=${this.ariaLandmarkLabel ?? nothing}>
         <ul>
           ${this.alphabet.map(
-            letter => html`
-              <li
-                class=${letter === this.selectedUppercaseLetter
-                  ? 'selected'
-                  : nothing}
-                @mousemove=${this.handleMouseMove}
-                @mouseleave=${this.handleMouseLeave}
-              >
-                ${this.letterButtonTemplate(letter)}
-                ${this.tooltipTemplate(letter)}
-              </li>
-            `,
+            letter =>
+              html`
+                <li
+                  class=${letter === this.selectedUppercaseLetter
+                    ? 'selected'
+                    : nothing}
+                  @mousemove=${this.handleMouseMove}
+                  @mouseleave=${this.handleMouseLeave}
+                >
+                  ${this.letterButtonTemplate(letter)}
+                  ${this.tooltipTemplate(letter)}
+                </li>
+              `
           )}
         </ul>
       </section>
@@ -86,7 +87,7 @@ export class AlphaBar extends LitElement {
     this.dispatchEvent(
       new CustomEvent('letterChanged', {
         detail: { selectedLetter: this.selectedUppercaseLetter },
-      }),
+      })
     );
   }
 
@@ -126,10 +127,10 @@ export class AlphaBar extends LitElement {
     // (but not including any scrollbar).
     const bodyStyle = getComputedStyle(document.body);
     const bodyMarginLeft = parseFloat(
-      bodyStyle.getPropertyValue('margin-left'),
+      bodyStyle.getPropertyValue('margin-left')
     );
     const bodyMarginRight = parseFloat(
-      bodyStyle.getPropertyValue('margin-right'),
+      bodyStyle.getPropertyValue('margin-right')
     );
     const bodyWidthWithMargin =
       document.body.clientWidth + bodyMarginLeft + bodyMarginRight;
@@ -154,7 +155,7 @@ export class AlphaBar extends LitElement {
       left -= overflowAmt;
       this.tooltip.style.setProperty(
         '--tooltipArrowOffset',
-        `${overflowAmt}px`,
+        `${overflowAmt}px`
       );
     }
 

package/src/sort-filter-bar/sort-filter-bar.ts

@@ -228,7 +228,7 @@ export class SortFilterBar
 
     if (changed.has('resizeObserver') || changed.has('enableSortOptionsSlot')) {
       const oldObserver = changed.get(
-        'resizeObserver',
+        'resizeObserver'
       ) as SharedResizeObserverInterface;
       if (oldObserver) this.disconnectResizeObserver(oldObserver);
       this.setupResizeObserver();
@@ -239,12 +239,12 @@ export class SortFilterBar
     if (this.dropdownBackdropVisible) {
       document.addEventListener(
         'keydown',
-        this.boundSortBarSelectorEscapeListener,
+        this.boundSortBarSelectorEscapeListener
       );
     } else {
       document.removeEventListener(
         'keydown',
-        this.boundSortBarSelectorEscapeListener,
+        this.boundSortBarSelectorEscapeListener
       );
     }
   }
@@ -267,7 +267,7 @@ export class SortFilterBar
   }
 
   private disconnectResizeObserver(
-    resizeObserver: SharedResizeObserverInterface,
+    resizeObserver: SharedResizeObserverInterface
   ) {
     if (this.sortSelectorContainer) {
       resizeObserver.removeObserver({
@@ -430,7 +430,7 @@ export class SortFilterBar
       .filter(opt => opt.shownInSortBar)
       .filter(opt => this.showRelevance || opt.field !== SortField.relevance)
       .filter(
-        opt => this.showDateFavorited || opt.field !== SortField.datefavorited,
+        opt => this.showDateFavorited || opt.field !== SortField.datefavorited
       );
 
     return html`
@@ -439,11 +439,12 @@ export class SortFilterBar
         class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}
       >
         ${this.getSortDropdown({
-          displayName: html`${SORT_OPTIONS[this.finalizedSortField].displayName}`,
+          displayName: html`${SORT_OPTIONS[this.finalizedSortField]
+            .displayName}`,
           id: 'mobile-dropdown',
           selected: true,
           dropdownOptions: displayedOptions.map(opt =>
-            this.getDropdownOption(opt.field),
+            this.getDropdownOption(opt.field)
           ),
           selectedOption: this.finalizedSortField,
           onOptionSelected: this.mobileSortChanged,
@@ -451,7 +452,7 @@ export class SortFilterBar
             this.dropdownBackdropVisible = this.mobileDropdown.open;
             this.mobileDropdown.classList.toggle(
               'open',
-              this.mobileDropdown.open,
+              this.mobileDropdown.open
             );
           },
         })}
@@ -478,7 +479,7 @@ export class SortFilterBar
       displayName?: TemplateResult;
       selected?: boolean;
       onClick?: (e: Event) => void;
-    },
+    }
   ): TemplateResult {
     const isSelected =
       options?.selected ?? this.finalizedSortField === sortField;
@@ -758,7 +759,7 @@ export class SortFilterBar
   /** Toggles the current sort direction between 'asc' and 'desc' */
   private toggleSortDirection() {
     this.setSortDirection(
-      this.finalizedSortDirection === 'desc' ? 'asc' : 'desc',
+      this.finalizedSortDirection === 'desc' ? 'asc' : 'desc'
     );
   }
 
@@ -895,14 +896,14 @@ export class SortFilterBar
   }
 
   private titleLetterChanged(
-    e: CustomEvent<{ selectedLetter: string | undefined }>,
+    e: CustomEvent<{ selectedLetter: string | undefined }>
   ) {
     this.selectedTitleFilter = e.detail.selectedLetter ?? null;
     this.emitTitleLetterChangedEvent();
   }
 
   private creatorLetterChanged(
-    e: CustomEvent<{ selectedLetter: string | undefined }>,
+    e: CustomEvent<{ selectedLetter: string | undefined }>
   ) {
     this.selectedCreatorFilter = e.detail.selectedLetter ?? null;
     this.emitCreatorLetterChangedEvent();
@@ -913,7 +914,7 @@ export class SortFilterBar
       'titleLetterChanged',
       {
         detail: { selectedLetter: this.selectedTitleFilter },
-      },
+      }
     );
     this.dispatchEvent(event);
   }
@@ -923,7 +924,7 @@ export class SortFilterBar
       'creatorLetterChanged',
       {
         detail: { selectedLetter: this.selectedCreatorFilter },
-      },
+      }
     );
     this.dispatchEvent(event);
   }

package/src/tiles/grid/account-tile.ts

@@ -87,7 +87,7 @@ export class AccountTile extends BaseTileComponent {
     e.preventDefault();
     const event = new CustomEvent<{ x: number; y: number }>(
       'infoButtonPressed',
-      { detail: { x: e.clientX, y: e.clientY } },
+      { detail: { x: e.clientX, y: e.clientY } }
     );
     this.dispatchEvent(event);
   }