feat: seleceted facets functionality

src/sections/collection/collection-items-panel/CollectionItemsPanel.tsx

@@ -19,6 +19,7 @@ import { ItemsList } from './items-list/ItemsList'
 import { SearchPanel } from './search-panel/SearchPanel'
 import { ItemTypeChange } from './filter-panel/type-filters/TypeFilters'
 import { RemoveAddFacetFilter } from './filter-panel/facets-filters/FacetFilter'
+import { SelectedFacets } from './selected-facets/SelectedFacets'
 import styles from './CollectionItemsPanel.module.scss'
 
 interface CollectionItemsPanelProps {
@@ -62,8 +63,6 @@ export const CollectionItemsPanel = ({
     collectionQueryParams.filtersQuery
   )
 
-  console.log({ currentSearchCriteria })
-
   const [paginationInfo, setPaginationInfo] = useState<CollectionItemsPaginationInfo>(
     new CollectionItemsPaginationInfo()
   )
@@ -243,6 +242,9 @@ export const CollectionItemsPanel = ({
     }
   }
 
+  const showSelectedFacets =
+    currentSearchCriteria.filterQueries && currentSearchCriteria.filterQueries.length > 0
+
   useEffect(() => {
     setIsLoading(isLoadingItems)
   }, [isLoadingItems, setIsLoading])
@@ -268,21 +270,32 @@ export const CollectionItemsPanel = ({
           isLoadingCollectionItems={isLoadingItems}
         />
 
-        <ItemsList
-          parentCollectionAlias={collectionId}
-          items={accumulatedItems}
-          error={error}
-          accumulatedCount={accumulatedCount}
-          isLoadingItems={isLoadingItems}
-          areItemsAvailable={areItemsAvailable}
-          hasNextPage={hasNextPage}
-          isEmptyItems={isEmptyItems}
-          hasSearchValue={currentSearchCriteria.hasSearchText()}
-          itemsTypesSelected={currentSearchCriteria.itemTypes as CollectionItemType[]}
-          paginationInfo={paginationInfo}
-          onBottomReach={handleLoadMoreOnBottomReach}
-          ref={itemsListContainerRef}
-        />
+        <div>
+          {showSelectedFacets && facets.length > 0 && (
+            <SelectedFacets
+              onRemoveFacet={(filterQuery: FilterQuery) =>
+                handleFacetChange(filterQuery, RemoveAddFacetFilter.REMOVE)
+              }
+              selectedFilterQueries={currentSearchCriteria.filterQueries}
+            />
+          )}
+
+          <ItemsList
+            parentCollectionAlias={collectionId}
+            items={accumulatedItems}
+            error={error}
+            accumulatedCount={accumulatedCount}
+            isLoadingItems={isLoadingItems}
+            areItemsAvailable={areItemsAvailable}
+            hasNextPage={hasNextPage}
+            isEmptyItems={isEmptyItems}
+            hasSearchValue={currentSearchCriteria.hasSearchText()}
+            itemsTypesSelected={currentSearchCriteria.itemTypes as CollectionItemType[]}
+            paginationInfo={paginationInfo}
+            onBottomReach={handleLoadMoreOnBottomReach}
+            ref={itemsListContainerRef}
+          />
+        </div>
       </div>
     </section>
   )

src/sections/collection/collection-items-panel/selected-facets/SelectedFacets.module.scss

@@ -0,0 +1,33 @@
+@use 'sass:color';
+@import 'node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module';
+
+.selected-facets-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+
+  .selected-facet-btn {
+    display: flex;
+    align-items: center;
+    padding-right: 2px;
+    padding-block: 2px;
+    color: $dv-primary-color;
+    font-weight: 600;
+    font-size: 80%;
+    line-height: 1;
+    background-color: color.adjust($dv-primary-color, $lightness: 50%);
+
+    &:hover {
+      background-color: color.adjust($dv-primary-color, $lightness: 40%);
+    }
+
+    &:active {
+      color: $dv-primary-color;
+    }
+
+    svg {
+      min-width: fit-content;
+    }
+  }
+}

src/sections/collection/collection-items-panel/selected-facets/SelectedFacets.tsx

@@ -0,0 +1,30 @@
+import { Button } from '@iqss/dataverse-design-system'
+import { X as CloseIcon } from 'react-bootstrap-icons'
+import { FilterQuery } from '@/collection/domain/models/GetCollectionItemsQueryParams'
+import styles from './SelectedFacets.module.scss'
+
+interface SelectedFacetsProps {
+  selectedFilterQueries: FilterQuery[]
+  onRemoveFacet: (filterQuery: FilterQuery) => void
+}
+
+export const SelectedFacets = ({ selectedFilterQueries, onRemoveFacet }: SelectedFacetsProps) => {
+  return (
+    <div className={styles['selected-facets-container']}>
+      {selectedFilterQueries.map((filterQuery) => {
+        const [_facetName, labelName] = filterQuery.split(':')
+
+        return (
+          <Button
+            size="sm"
+            className={styles['selected-facet-btn']}
+            onClick={() => onRemoveFacet(filterQuery)}
+            aria-label={`Remove ${labelName} query filter`}
+            key={filterQuery}>
+            {labelName} <CloseIcon size={22} />
+          </Button>
+        )
+      })}
+    </div>
+  )
+}