ASSETS-88888 : Add 'Select All' button on Collections Details and Sha…

…re Link Page (#40) * Added Select All checkbox to adp-collection-header block component /blocks/adp-infinite-results-collection/adp-infinite-results-collection.js : Added the functions selectAllAsets() and deselectAllAssets() which is used in adp-collection-header.js * Initial checkin of new block component adp-share-header that will contain the Select All Items button * Added block component adp-share-header which has the Select All check box /blocks/adp-infinite-results-linkshare/adp-infinite-results-linkshare.js : Added the functions selectAllAssets() and deselectAllAssets() * Removed redundant CSS * Pull Request Review Changes /blocks/adp-collection-header/adp-collection-header.css : Removed Todo comment /blocks/adp-collection-header/adp-collection-header.js : Changed back to await deleteCollection(collectionId, collection.title); /blocks/adp-share-header/adp-share-header.css: Removed redundant CSS classes * Removed the confirm-dialog.js this was in the original code copied from the adp-collections-header.js * Added logic to un check the select-all-checkbox on event CLOSE_BANNER and Remove Item from Multi Select * /blocks/adp-collection-header/adp-collection-header.js => Added , to import statement and refactored select-all-checkbox event listener /blocks/adp-share-header/adp-share-header.js => Removed extra div, refactored select-all-checkbox event listener
hlxsites · Mar 7, 2024 · 4bc49ac · 4bc49ac
1 parent 7c06834
commit 4bc49ac
Show file tree

Hide file tree

Showing 8 changed files with 153 additions and 2 deletions.
diff --git a/blocks/adp-collection-header/adp-collection-header.css b/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%;

diff --git a/blocks/adp-collection-header/adp-collection-header.js b/blocks/adp-collection-header/adp-collection-header.js
@@ -3,6 +3,11 @@ import createConfirmDialog from '../../scripts/confirm-dialog.js';
 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 @@ function createCollectionInfoHeader(collectionInfoHeader, collection) {
             <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 @@ function createCollectionInfoHeader(collectionInfoHeader, collection) {
   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();

diff --git a/blocks/adp-infinite-results-collection/CollectionDatasource.js b/blocks/adp-infinite-results-collection/CollectionDatasource.js
@@ -88,6 +88,8 @@ export default class CollectionsDatasource {
         },
         removeItemFromMultiSelectionHandler: () => {
           infiniteResultsContainer.removeItemFromMultiSelection(assetId);
+          //Uncheck select all checkbox
+          document.getElementById('select-all-checkbox').checked = false;
         },
       },
     );

diff --git a/blocks/adp-infinite-results-collection/adp-infinite-results-collection.js b/blocks/adp-infinite-results-collection/adp-infinite-results-collection.js
@@ -16,6 +16,8 @@ export default async function decorate(block) {
     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 hasNextCard() {
 export function hasPreviousCard() {
   return infiniteResultsContainer.hasPreviousCard();
 }
+
+
+export function selectAllAssets() {
+  infiniteResultsContainer.selectAllItems();
+}
+
+export function deselectAllAssets() {
+  infiniteResultsContainer.deselectAllItems();
+}
diff --git a/blocks/adp-infinite-results-linkshare/LinkShareDatasource.js b/blocks/adp-infinite-results-linkshare/LinkShareDatasource.js
@@ -53,6 +53,8 @@ export default class LinkShareDatasource {
         },
         removeItemFromMultiSelectionHandler: () => {
           infiniteResultsContainer.removeItemFromMultiSelection(assetId);
+          //Uncheck select all checkbox
+          document.getElementById('select-all-checkbox').checked = false;
         },
       },
     );

diff --git a/blocks/adp-infinite-results-linkshare/adp-infinite-results-linkshare.js b/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();
+}
diff --git a/blocks/adp-share-header/adp-share-header.css b/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;
+}
diff --git a/blocks/adp-share-header/adp-share-header.js b/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);
+}