@orangelogic/orange-dam-content-browser-sdk 2.1.55 → 2.2.0-alpha

package/src/components/ControlBar/ControlBar.tsx

@@ -0,0 +1,528 @@
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { SortOrder } from '@/types/assets';
+import { Filter, GridView, SortDirection } from '@/types/search';
+import {
+  CxChangeEvent, CxDropdown, CxInput, CxRemoveEvent, CxSelectEvent, CxSelectionChangeEvent,
+} from '@/web-component';
+
+import { sortDirections, views } from './ControlBar.constants';
+import { Container } from './ControlBar.styled';
+import Facet from './Facet';
+
+const TYPE = {
+  type: 'type',
+  visibilityClass: 'visibilityClass',
+  status: 'status',
+  extension: 'extension',
+};
+
+type Props = {
+  allowSorting: boolean;
+  currentCount: number;
+  loading: boolean;
+  extensions: string[];
+  facets?: Record<string, Record<string, number>>;
+  isMobile: boolean;
+  isSeeThrough: boolean;
+  mediaTypes: string[];
+  searchValue: string;
+  sortDirection?: 'ascending' | 'descending';
+  sortOrder: string;
+  sortOrders?: Record<string, SortOrder[]>;
+  statuses: string[];
+  totalCount: number;
+  view: GridView;
+  visibilityClasses: string[];
+  onSearchChange: (value: string) => void;
+  onSettingChange: (
+    setting: string,
+    value: GridView | SortDirection | Filter | string | boolean | string[]
+  ) => void;
+  onChangeNewlySelectedFacet: (value: string) => void;
+};
+
+const ControlBar: FC<Props> = ({
+  allowSorting,
+  currentCount,
+  loading,
+  extensions,
+  facets,
+  isMobile,
+  isSeeThrough,
+  mediaTypes,
+  searchValue: searchText,
+  sortDirection,
+  sortOrder,
+  sortOrders,
+  statuses,
+  totalCount,
+  view,
+  visibilityClasses,
+  onSearchChange,
+  onSettingChange,
+  onChangeNewlySelectedFacet,
+}) => {
+  const [isDefined, setIsDefined] = useState(false);
+  const [newlyChangedOption, setNewlyChangedOption] = useState<{
+    type?: string;
+    value?: string;
+  }>({
+    type: undefined,
+    value: undefined,
+  });
+  const searchRef = useRef<CxInput>(null);
+  const filterDropdownRef = useRef<CxDropdown>(null);
+  const viewDropdownRef = useRef<CxDropdown>(null);
+  const sortDropdownRef = useRef<CxDropdown>(null);
+
+  useEffect(() => {
+    Promise.all([
+      customElements.whenDefined('cx-input'),
+      customElements.whenDefined('cx-checkbox'),
+      customElements.whenDefined('cx-dropdown'),
+    ]).then(() => setIsDefined(true));
+  }, []);
+
+  useEffect(() => {
+    const onSearchInput = (e: CxChangeEvent) => {
+      const value = (e.target as CxInput).value;
+      if (searchText !== value) {
+        onSearchChange(value);
+      }
+    };
+    const searchInput = searchRef.current;
+    searchInput?.addEventListener('cx-change', onSearchInput);
+    return () => {
+      searchInput?.removeEventListener('cx-change', onSearchInput);
+    };
+  }, [isDefined, searchText, onSearchChange]);
+
+  useEffect(() => {
+    const onViewSelect = (e: CxSelectEvent) => {
+      const value = e.detail.item.value;
+
+      if (value === 'see-thru') {
+        onSettingChange('isSeeThrough', !isSeeThrough);
+      } else {
+        onSettingChange('view', value ?? GridView.Medium);
+      }
+    };
+    const viewDropdown = viewDropdownRef.current;
+    viewDropdown?.addEventListener('cx-select', onViewSelect);
+    return () => {
+      viewDropdown?.removeEventListener('cx-select', onViewSelect);
+    };
+  }, [isDefined, isSeeThrough, onSettingChange]);
+
+  useEffect(() => {
+    const onFilterRemove = (e: CxRemoveEvent) => {
+      const target = e.target as HTMLElement;
+      const type = target.dataset.type;
+      const value = target.dataset.value;
+      onChangeNewlySelectedFacet('');
+
+      if (!value) {
+        return;
+      }
+
+      let newMediaTypes = mediaTypes;
+      let newVisibilityClasses = visibilityClasses;
+      let newStatuses = statuses;
+      let newExtensions = extensions;
+
+      switch (type) {
+        case TYPE.type:
+          newMediaTypes = mediaTypes.filter((item) => item !== value);
+          break;
+        case TYPE.visibilityClass:
+          newVisibilityClasses = visibilityClasses.filter((item) => item !== value);
+          break;
+        case TYPE.status:
+          newStatuses = statuses.filter((item) => item !== value);
+          break;
+        case TYPE.extension:
+          newExtensions = extensions.filter((item) => item !== value);
+          break;
+        default:
+          break;
+      }
+
+      onSettingChange('filter', {
+        mediaTypes: newMediaTypes,
+        visibilityClasses: newVisibilityClasses,
+        statuses: newStatuses,
+        extensions: newExtensions,
+      });
+    };
+    const onFilterSelectionChange = (e: CxSelectionChangeEvent) => {
+      const facet = (e.target as HTMLElement).dataset.facet;
+      setNewlyChangedOption({
+        type: 'filter',
+        value: facet,
+      });
+      onChangeNewlySelectedFacet(facet ?? '');
+
+      const newSelection = e.detail.selection.reduce(
+        (acc, item) => {
+          const type = item.dataset.type;
+          const value = item.dataset.value;
+          
+          if (!value) {
+            return acc;
+          }
+
+          switch (type) {
+            case TYPE.type:
+              acc.mediaTypes.push(value);
+              break;
+            case TYPE.visibilityClass:
+              acc.visibilityClasses.push(value);
+              break;
+            case TYPE.status:
+              acc.statuses.push(value);
+              break;
+            case TYPE.extension:
+              acc.extensions.push(value);
+              break;
+            default:
+              break;
+          }
+
+          return acc;
+        }, {
+          extensions: facet === TYPE.extension ? [] as string[] : extensions,
+          mediaTypes: facet === TYPE.type ? [] as string[] : mediaTypes,
+          visibilityClasses: facet === TYPE.visibilityClass ? [] as string[] : visibilityClasses,
+          statuses: facet === TYPE.status ? [] as string[] : statuses,
+        },
+      );
+
+      onSettingChange('filter', newSelection);
+    };
+    const onSortSelect = (e: CxSelectEvent) => {
+      const type = e.detail.item.dataset.type;
+      const value = e.detail.item.value;
+
+      if (!value) {
+        return;
+      }
+
+      if (type === 'sort-direction') {
+        setNewlyChangedOption({
+          type: 'sortDirection',
+          value,
+        });
+        onSettingChange('sortDirection', value as 'ascending' | 'descending');
+      } else if (type === 'sort-order') {
+        setNewlyChangedOption({
+          type: 'sortOrder',
+          value,
+        });
+        onSettingChange('sortOrder', value);
+      }
+    };
+    const filterDropdown = filterDropdownRef.current;
+    const sortDropdown = sortDropdownRef.current;
+    filterDropdown?.addEventListener('cx-selection-change', onFilterSelectionChange);
+    filterDropdown?.addEventListener('cx-remove', onFilterRemove);
+    sortDropdown?.addEventListener('cx-select', onSortSelect);
+    return () => {
+      filterDropdown?.removeEventListener('cx-selection-change', onFilterSelectionChange);
+      filterDropdown?.removeEventListener('cx-remove', onFilterRemove);
+      sortDropdown?.removeEventListener('cx-select', onSortSelect);
+    };
+  }, [isDefined, extensions, mediaTypes, statuses, visibilityClasses, onSettingChange, onChangeNewlySelectedFacet]);
+
+  const selectedView = useMemo(() => views.find((item) => item.value === view), [view]);
+
+  const renderAppliedFilters = useCallback(() => {
+    const appliedFilersCount = mediaTypes.length + visibilityClasses.length + statuses.length + extensions.length;
+
+    return (
+      <cx-details
+        open
+        className={`filter-details ${appliedFilersCount === 0 ? 'filter-details--empty' : ''}`.trim()}
+      >
+        <cx-space
+          slot="summary"
+          align-items="center"
+          spacing="x-small"
+          wrap="nowrap"
+        >
+          <span>Applied filters {appliedFilersCount > 0 ? ` (${appliedFilersCount})` : ''}</span>
+          {loading && newlyChangedOption.type === 'filter' && <cx-spinner></cx-spinner>}
+        </cx-space>
+        <cx-space direction="horizontal" spacing="small">
+          {mediaTypes.map((item) => (
+            <cx-tag
+              key={item}
+              removable
+              data-value={item}
+              data-type={TYPE.type}
+              size='small'
+            >
+              {item.toLowerCase()}
+            </cx-tag>
+          ))}
+          {visibilityClasses.map((item) => (
+            <cx-tag
+              key={item}
+              removable
+              data-value={item}
+              data-type={TYPE.visibilityClass}
+              size='small'
+            >
+              {item.toLowerCase()}
+            </cx-tag>
+          ))}
+          {statuses.map((item) => (
+            <cx-tag
+              key={item}
+              removable
+              data-value={item}
+              data-type={TYPE.status}
+              size='small'
+            >
+              {item.toLowerCase()}
+            </cx-tag>
+          ))}
+          {extensions.map((item) => (
+            <cx-tag
+              key={item}
+              removable
+              data-value={item}
+              data-type={TYPE.extension}
+              size='small'
+            >
+              {item.toLowerCase()}
+            </cx-tag>
+          ))}
+        </cx-space>
+        {appliedFilersCount > 0 && (
+          <cx-button 
+            variant="text"
+            className='clear-all-button'
+            onClick={() => {
+              onChangeNewlySelectedFacet('');
+              onSettingChange('filter', {
+                mediaTypes: [],
+                visibilityClasses: [],
+                statuses: [],
+                extensions: [],
+              });
+            }}
+          >
+            Clear all
+            <cx-icon slot="prefix" name="clear" label="Clear"></cx-icon>
+          </cx-button>
+        )}
+      </cx-details>
+    );
+  }, [
+    extensions,
+    loading,
+    mediaTypes,
+    newlyChangedOption.type,
+    statuses,
+    visibilityClasses,
+    onChangeNewlySelectedFacet,
+    onSettingChange,
+  ]);
+
+  return (
+    <Container>
+      <cx-space
+        align-items="center"
+        spacing="x-small"
+        wrap="nowrap"
+        style={{
+          flex: 1,
+        }}
+      >
+        <cx-input
+          ref={searchRef}
+          value={searchText}
+          placeholder="Search..."
+          clearable
+          className="search-input"
+        >
+          <cx-icon
+            name="search"
+            slot="prefix"
+            className="icon--large"
+          ></cx-icon>
+        </cx-input>
+        <cx-dropdown ref={filterDropdownRef}>
+          <div slot="trigger">
+            <cx-tooltip content="Filter">
+              <cx-icon-button
+                name="filter_alt"
+                label="Filter"
+                outline
+              ></cx-icon-button>
+            </cx-tooltip>
+          </div>
+          {renderAppliedFilters()}
+          <Facet
+            key={TYPE.type}
+            facet={facets?.type ?? {}}
+            displayName="Type"
+            type={TYPE.type}
+            collections={mediaTypes}
+          />
+          <Facet
+            key={TYPE.visibilityClass}
+            facet={facets?.visibilityClass ?? {}}
+            displayName="Visibility class"
+            type={TYPE.visibilityClass}
+            collections={visibilityClasses}
+          />
+          <Facet
+            key={TYPE.status}
+            facet={facets?.status ?? {}}
+            displayName="Status"
+            type={TYPE.status}
+            collections={statuses}
+          />
+          <Facet
+            key={TYPE.extension}
+            facet={facets?.extension ?? {}}
+            type={TYPE.extension}
+            displayName="Extension"
+            collections={extensions}
+            capitalize={false}
+          />
+        </cx-dropdown>
+      </cx-space>
+      <cx-space
+        align-items="center"
+        spacing="x-small"
+        wrap="nowrap"
+        style={{ marginLeft: 'auto' }}
+      >
+        <cx-line-clamp lines={1}>
+          <cx-typography variant="body3">
+            {currentCount} of {totalCount}
+          </cx-typography>
+        </cx-line-clamp>
+        <cx-dropdown
+          ref={viewDropdownRef}
+          auto-width-factor={0.6}
+          stay-open-on-select
+          placement="bottom-end"
+          skidding={isMobile ? 40 : 0}
+        >
+          <div slot="trigger">
+            <cx-tooltip content="View">
+              <cx-icon-button
+                name="dashboard"
+                label="View"
+                outline
+              ></cx-icon-button>
+            </cx-tooltip>
+          </div>
+          <cx-menu>
+            <cx-menu-label>View</cx-menu-label>
+            <cx-menu-item class={selectedView ? 'selected' : ''}>
+              Grid ({selectedView?.label})
+              <cx-menu slot="submenu">
+                {views.map((item) => (
+                  <cx-menu-item
+                    key={item.value}
+                    value={item.value.toString()}
+                    class={item.value === view ? 'selected' : ''}
+                  >
+                    {item.label}
+                    {
+                      <cx-icon
+                        slot="prefix"
+                        name={view === item.value ? 'check' : ''}
+                      ></cx-icon>
+                    }
+                  </cx-menu-item>
+                ))}
+              </cx-menu>
+              <cx-icon slot="prefix" name="grid_view"></cx-icon>
+            </cx-menu-item>
+            <cx-divider></cx-divider>
+            <cx-menu-item value="see-thru" className="menu-item--switch">
+              <cx-line-clamp lines={1}>See-thru</cx-line-clamp>
+              <cx-switch
+                checked={isSeeThrough}
+                onClick={(e) => e.preventDefault()}
+              ></cx-switch>
+            </cx-menu-item>
+          </cx-menu>
+        </cx-dropdown>
+        <cx-dropdown
+          ref={sortDropdownRef}
+          auto-width-factor={0.5}
+          stay-open-on-select
+        >
+          <div slot="trigger">
+            <cx-tooltip content="Sort">
+              <cx-icon-button name="sort" label="Sort" outline></cx-icon-button>
+            </cx-tooltip>
+          </div>
+          <cx-menu>
+            {(sortOrders ? sortDirections
+              .map(
+                (item) => {
+                  const label = sortOrders[sortOrder]?.find(
+                    (sort) => sort.sortDirection.toLowerCase() === item.value.toLowerCase(),
+                  )?.sortDirectionDisplayName;
+
+                  return {
+                    ...item,
+                    label: label ?? item.value,
+                  };
+                },
+              ) : sortDirections)
+              .map((item) => (
+                <cx-menu-item
+                  key={item.value}
+                  data-type="sort-direction"
+                  disabled={!allowSorting}
+                  value={item.value}
+                  class={allowSorting && sortDirection === item.value ? 'selected' : ''}
+                >
+                  {item.label.replace(/\b\w/g, (char) => char.toUpperCase())}
+                  {loading &&
+                  newlyChangedOption.type === 'sortDirection' &&
+                  newlyChangedOption.value === item.value ? (
+                    <cx-spinner slot="prefix"></cx-spinner>
+                    ) : (
+                    <item.icon></item.icon>
+                    )}
+                </cx-menu-item>
+              ))}
+            <cx-divider></cx-divider>
+            {Object.keys(sortOrders ?? {}).map((item) => (
+              <cx-menu-item
+                key={item}
+                data-type="sort-order"
+                value={item}
+                class={sortOrder === item ? 'selected' : ''}
+              >
+                {item.replace(/\b\w/g, (char) => char.toUpperCase())}
+                {loading &&
+                newlyChangedOption.type === 'sortOrder' &&
+                newlyChangedOption.value === item ? (
+                  <cx-spinner slot="prefix"></cx-spinner>
+                  ) : (
+                  <cx-icon
+                    slot="prefix"
+                    name={sortOrder === item ? 'check' : ''}
+                  ></cx-icon>
+                  )}
+              </cx-menu-item>
+            ))}
+          </cx-menu>
+        </cx-dropdown>
+      </cx-space>
+    </Container>
+  );
+};
+
+export default ControlBar;

package/src/components/ControlBar/Facet/Facet.tsx

@@ -0,0 +1,113 @@
+import _capitalize from 'lodash-es/capitalize';
+import { FC } from 'react';
+
+type Props = {
+  facet: Record<string, number>;
+  type: string;
+  displayName: string;
+  collections: string[];
+  capitalize?: boolean;
+  loading?: boolean;
+};
+
+const Facet: FC<Props> = ({
+  facet,
+  type,
+  displayName,
+  collections,
+  capitalize = true,
+  loading = false,
+}) => {
+  if (!facet || Object.values(facet).length === 0) {
+    return null;
+  }
+
+  /* 
+    The current facet value is flat. If a facet includes the ">>" character, it means it's a subtype, and the parent type is the value before ">>". We need to group them.
+    For example, "contact >> email", "contact >> phone", and "contact >> address" should be grouped as "contact" => { email: 10, phone: 5, address: 3 }
+    The "all" key will contain the total count of all subtypes for that parent type.
+    Sometimes there are some asset belongs to the parent type but not to any subtype. In that case, we need to add the parent type to the result as well.
+    For example, "contact" => { all: 12, email: 5, phone: 3 } means that 5 of them are emails, 3 are phones, and 2 are just contacts that are directly of the parent's type.
+  */
+
+  const mappedSubtypes = Object.entries(facet).reduce((acc, [key, value]) => {
+    const [parent, subtype] = key.split('>>');
+    
+    if (!acc[parent] || typeof acc[parent] !== 'object') {
+      if (acc[parent]) {
+        acc[parent] = {
+          'all': acc[parent],
+        };
+      } else {
+        acc[parent] = {};
+      }
+    }
+    if (subtype) {
+      acc[parent][subtype] = value;
+    }
+    acc[parent].all =  (acc[parent].all || 0) + value;
+
+    return acc;
+  }, {} as Record<string, Record<string, number> | number>);
+  
+  return (
+    <cx-details open className="filter-details">
+      <cx-space
+        slot="summary"
+        align-items="center"
+        spacing="x-small"
+        wrap="nowrap"
+      >
+        <span>{displayName}</span>
+        {loading && <cx-spinner></cx-spinner>}
+      </cx-space>
+      <cx-space direction="vertical">
+        <cx-tree selection="multiple" data-facet={type}>
+          {Object.entries(mappedSubtypes).map(([key, value]) => {
+            if (typeof value === 'object') {
+              const selected = collections.includes(key);
+
+              const { all, ...rest } = value;
+
+              return (
+                <cx-tree-item
+                  key={key}
+                  data-value={key}
+                  data-type={type}
+                  readonly={loading}
+                  selected={selected}
+                >
+                  {capitalize ? _capitalize(key) : key} {!!all && `(${all})`}
+                  {Object.entries(rest).map(([subtype, count]) => (
+                    <cx-tree-item
+                      key={subtype}
+                      data-value={`${key}>>${subtype}`}
+                      data-type={type}
+                      readonly={loading}
+                      selected={collections.includes(`${key}>>${subtype}`)}
+                    >
+                      {capitalize ? _capitalize(subtype) : subtype} ({count})
+                    </cx-tree-item>
+                  ))}
+                </cx-tree-item>
+              );
+            }
+            return (
+              <cx-tree-item
+                key={key}
+                data-value={key}
+                data-type={type}
+                readonly={loading}
+                selected={collections.includes(key)}
+              >
+                {capitalize ? _capitalize(key) : key} ({value})
+              </cx-tree-item>
+            );
+          })}
+        </cx-tree>
+      </cx-space>
+    </cx-details>
+  );
+};
+
+export default Facet;

package/src/components/ControlBar/Facet/index.ts

@@ -0,0 +1 @@
+export { default } from './Facet';