ASSETS-88888 : Add 'Select All' button on Collections Details and Share Link Page

blocks/adp-collection-header/adp-collection-header.css

@@ -20,24 +20,47 @@
     z-index: 1;
 }
 
+
 .adp-collection-header-left .adp-collection-title {
-    margin-bottom: 12px;
+    margin-bottom: 12px; /* Keeps space between title and items */
+}
+
+.adp-collection-subinfo {
+    display: flex;
+    /* justify-content: space-between; /* Aligns items to the left and select all to the right */
+    align-items: center; /* Centers items vertically */
 }
 
 .adp-collection-stats {
     border: #E6E6E6 1px solid;
     border-radius: 6px;
     font: 11px/14px var(--body-font-family);
     padding: 6px 10px;
-    width: fit-content;
+    flex-shrink: 0;
+    margin-right: 20px; /* Adjust the 20px to whatever fixed space you want between the items and the checkbox */
+}
+
+.adp-collection-select-all {
+    display: flex;
+    align-items: center; /* This will vertically align the checkbox and label */
 }
 
+.adp-collection-select-all input[type="checkbox"] {
+    margin-right: 5px; /* Adds some space between the checkbox and the label */
+}
+
+
 .adp-collection-header-left .back-button .icon {
     height: 10px;
     width: 18px;
     vertical-align: text-bottom;
 }
 
+.adp-collection-header-collection-info {
+    display: flex;
+    flex-direction: column; /* Stack the title and sub-info vertically */
+}
+
 .adp-collection-header .adp-collection-title {
     font: var(--collection-heading-font);
     width: 100%;

blocks/adp-collection-header/adp-collection-header.js

@@ -3,6 +3,11 @@
 import { decorateIcons } from '../../scripts/lib-franklin.js';
 import { createLinkHref, navigateTo } from '../../scripts/scripts.js';
 
+import {
+  selectAllAssets, deselectAllAssets,
+} from '../adp-infinite-results-collection/adp-infinite-results-collection.js';
+
+
 function createCollectionInfoHeader(collectionInfoHeader, collection) {
   // include back to collections listing similar to hide filters button
   collectionInfoHeader.innerHTML = `
@@ -14,6 +19,10 @@
             <div class="adp-collection-title"></div>
             <div class="adp-collection-subinfo">
               <div class="adp-collection-stats"></div>
+              <div class="adp-collection-select-all">
+                <input type="checkbox" id="select-all-checkbox"/>
+                <label for="select-all-checkbox">Select All</label>
+              </div>
             </div>
           </div>
         </div>
@@ -28,6 +37,10 @@
   const backButton = collectionInfoHeader.querySelector('.back-button a');
   backButton.href = createLinkHref(backButton.href);
 
+  document.getElementById('select-all-checkbox').addEventListener('click', (event) => {
+      event.target.checked ? selectAllAssets() : deselectAllAssets();
+  });
+
   collectionInfoHeader.querySelector('.action-collection-delete').addEventListener('click', async (e) => {
     e.preventDefault();
     const collectionId = getCollectionIdFromURL();

blocks/adp-infinite-results-collection/CollectionDatasource.js

@@ -88,6 +88,8 @@
         },
         removeItemFromMultiSelectionHandler: () => {
           infiniteResultsContainer.removeItemFromMultiSelection(assetId);
+          //Uncheck select all checkbox
+          document.getElementById('select-all-checkbox').checked = false;
         },
       },
     );

blocks/adp-infinite-results-collection/adp-infinite-results-collection.js

@@ -16,6 +16,8 @@
     infiniteResultsContainer.deselectItem(e.detail.assetId);
   });
   addEventListener(EventNames.CLOSE_BANNER, () => {
+    //Uncheck select all checkbox
+    document.getElementById('select-all-checkbox').checked = false;
     infiniteResultsContainer.clearAllSelections();
   });
 }
@@ -39,3 +41,12 @@
 export function hasPreviousCard() {
   return infiniteResultsContainer.hasPreviousCard();
 }
+
+
+export function selectAllAssets() {
+  infiniteResultsContainer.selectAllItems();
+}
+
+export function deselectAllAssets() {
+  infiniteResultsContainer.deselectAllItems();
+}

blocks/adp-infinite-results-linkshare/LinkShareDatasource.js

@@ -53,6 +53,8 @@
         },
         removeItemFromMultiSelectionHandler: () => {
           infiniteResultsContainer.removeItemFromMultiSelection(assetId);
+          //Uncheck select all checkbox
+          document.getElementById('select-all-checkbox').checked = false;
         },
       },
     );

blocks/adp-infinite-results-linkshare/adp-infinite-results-linkshare.js

@@ -8,10 +8,13 @@ export default async function decorate(block) {
   const instantSearchDatasource = new LinkShareDatasource();
   infiniteResultsContainer = new InfiniteResultsContainer(block, instantSearchDatasource);
   infiniteResultsContainer.render();
+
   addEventListener(EventNames.ASSET_QUICK_PREVIEW_CLOSE, (e) => {
     infiniteResultsContainer.deselectItem(e.detail.assetId);
   });
   addEventListener(EventNames.CLOSE_BANNER, () => {
+    //Uncheck select all checkbox
+    document.getElementById('select-all-checkbox').checked = false;
     infiniteResultsContainer.clearAllSelections();
   });
 }
@@ -21,3 +24,11 @@ export function openLinkShare(id) {
   // change the url
   window.history.pushState({}, '', url);
 }
+
+export function selectAllAssets() {
+  infiniteResultsContainer.selectAllItems();
+}
+
+export function deselectAllAssets() {
+  infiniteResultsContainer.deselectAllItems();
+}

blocks/adp-share-header/adp-share-header.css

@@ -0,0 +1,55 @@
+
+.adp-share-header {
+    display: flex;
+    height: 62px;
+}
+
+.adp-share-header-left {
+    display: flex;
+    gap: 15px;
+    align-items: center;
+    width: 100%;
+    font-size: var(--header-font-size);
+    padding: 0;
+    top: 0.01rem;
+    padding-top: 0.88rem;
+    padding-bottom: 0.88rem;
+    z-index: 1;
+}
+
+.adp-share-subinfo {
+    display: flex;
+    /* justify-content: space-between; /* Aligns items to the left and select all to the right */
+    align-items: center; /* Centers items vertically */
+}
+
+.adp-share-select-all {
+    display: flex;
+    align-items: center; /* This will vertically align the checkbox and label */
+}
+
+.adp-share-select-all input[type="checkbox"] {
+    margin-right: 5px; /* Adds some space between the checkbox and the label */
+}
+
+.adp-share-header-share-info {
+    display: flex;
+    flex-direction: column; /* Stack the title and sub-info vertically */
+}
+
+.adp-share-header {
+    font: var(--collection-heading-font);
+    width: 100%;
+}
+
+.adp-share-header .actions .adp-action {
+    text-wrap: nowrap;
+    align-items: center;
+}
+
+.adp-share-header .actions {
+    /* vertically align center */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

blocks/adp-share-header/adp-share-header.js

@@ -0,0 +1,34 @@
+import { decorateIcons } from '../../scripts/lib-franklin.js';
+import { createLinkHref, navigateTo } from '../../scripts/scripts.js';
+
+import {
+  selectAllAssets, deselectAllAssets
+} from '../adp-infinite-results-linkshare/adp-infinite-results-linkshare.js';
+
+function createShareInfoHeader(shareInfoHeader) {
+
+  shareInfoHeader.innerHTML = `
+        <div class="adp-share-header-left">
+          <div class="adp-share-header-share-info">
+            <div class="adp-share-subinfo">
+              <div class="adp-share-select-all">
+                <input type="checkbox" id="select-all-checkbox"/>
+                <label for="select-all-checkbox">Select All</label>
+              </div>
+            </div>
+          </div>
+        </div>
+    `;
+
+  document.getElementById('select-all-checkbox').addEventListener('click', (event) => {
+      event.target.checked ? selectAllAssets() : deselectAllAssets();
+  });
+
+  decorateIcons(shareInfoHeader);
+  return shareInfoHeader;
+}
+
+export default async function decorate(block) {
+  block.innerHTML = '';
+  createShareInfoHeader(block);
+}