Calendar view feature branch into RC

blocks/gmo-program-details/gmo-program-details.js

@@ -3,6 +3,7 @@ import { executeQuery } from '../../scripts/graphql.js';
 import { filterArray, getProductMapping, checkBlankString, dateFormat, statusMapping, getMappingArray } from '../../scripts/shared-program.js';
 import { getBaseConfigPath } from '../../scripts/site-config.js';
 import { searchAsset } from '../../scripts/assets.js';
+import { buildCalendar } from '../../scripts/program-calendar.js';
 
 let blockConfig;
 const queryVars = extractQueryVars();
@@ -88,12 +89,14 @@ export default async function decorate(block) {
     const audiences = buildAudienceList(program).outerHTML;
     const artifactLinks = buildArtifactLinks(program).outerHTML;
 
+    const currentYear = new Date().getFullYear();
+
     // Inject the additional HTML content
     block.querySelector('.main-body-wrapper').innerHTML += `
         <div class="tab-wrapper">
             <div id="tab1toggle" data-target="tab1" class="tabBtn active">Overview</div>
             <div id="tab2toggle" data-target="tab2" class="tabBtn">Deliverables</div>
-            <div id="tab3toggle" data-target="tab3" class="tabBtn inactive">Calendar</div>
+            <div id="tab3toggle" data-target="tab3" class="tabBtn">Calendar</div>
         </div>
         <div id="tab1" class="two-column overview tab">
             <div class="overview-wrapper">
@@ -177,6 +180,32 @@ export default async function decorate(block) {
                 </div>
             </div>
         </div>
+        <div id="tab3" class="calendar tab inactive">
+            <div class="control-wrapper">
+                <div class="inc-dec-wrapper">
+                    <div class="year-switch">
+                        <div id="dec-year" class="year-toggle">
+                            <img class="left" data-direction="left" src="/icons/chevron-right.svg"></img>
+                        </div>
+                        <div id="inc-year" class="year-toggle">
+                            <img class="right" data-direction="right" src="/icons/chevron-right.svg"></img>
+                        </div>
+                    </div>
+                    <div class="current-year" data-quarter="1" data-year="${currentYear}">${currentYear}</div>
+                </div>
+                <div class="right-controls">
+                    <div class="today-button">Today</div>
+                    <div class="filter-dropdown-wrapper">
+                        <div class="filter-dropdown-button">
+                            <div class="label">Selected View: Year</div>
+                            <span class="icon icon-chevronDown"></span>
+                            <span class="icon icon-chevronUp inactive"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
     `;
 
     // Wait for deliverables data
@@ -227,7 +256,7 @@ export default async function decorate(block) {
     });
 
     decorateIcons(block);
-
+    buildCalendar(await deliverables, block, "year", await deliverableMappings);
 }
 
 function enableBackBtn(block, blockConfig) {
@@ -249,7 +278,7 @@ function buildHeader(program, queryVars) {
     const headerWrapper = document.createElement('div');
     headerWrapper.classList.add('details-header-wrapper');
     const date = program && program.launchDate ? `<div class="header-row3"><span class="icon icon-calendar">` +
-        `</span><span class="date-tooltip">Launch date</span><span class="campaign-date">${formatDate(program.launchDate)}</span></div>` : "";
+        `</span><span class="date-tooltip">Proposed Launch Date</span><span class="campaign-date">${formatDate(program.launchDate)}</span></div>` : "";
     const programName = program ? program.programName : queryVars.programName;
     const campaignName = program && program.campaignName ? '<div class="header-row2"><span class="subtitle">' + program.campaignName + '</span></div> ': "";
 
@@ -260,6 +289,18 @@ function buildHeader(program, queryVars) {
       driverField=buildDriverField(driver).outerHTML;
     }
 
+    const releaseTier = `
+        <div class="header-row3">
+            <span class="icon-release-tier"></span>
+            <span class="release-tier">Release Tier: ${program.releaseTier || "Not Available"}</span>
+        </div>`;
+
+    const productGroup = `
+        <div class="header-row3">
+            <span class="icon-productGroup"></span>
+            <span class="productGroup">${program.productGroup && program.productGroup.length > 0 ? program.productGroup.join(', ') : "Not Available"}</span>
+        </div>`;
+
     headerWrapper.innerHTML = `
         <div class="campaign-img">
         </div>
@@ -271,6 +312,8 @@ function buildHeader(program, queryVars) {
             <div class="header-row3">
               ${date}
               ${driverField}
+              ${releaseTier}
+              ${productGroup}
             </div>
         </div>
     `

blocks/gmo-program-list/gmo-program-list.js

@@ -17,7 +17,7 @@ const headerConfig = [
         'sortable': false
     },
     {
-        'name': 'Launch Date',
+        'name': 'Proposed Launch Date',
         'attribute': 'launch',
         'sortable': true,
         'type': 'date'

blocks/gmo-redirect/gmo-redirect.js

@@ -0,0 +1,36 @@
+import {
+  readBlockConfig
+} from '../../scripts/lib-franklin.js';
+/**
+ *
+ * @param {HTMLElement} block
+ */
+
+export default async function decorate(block) {
+  // Takes a config name as a string to be used as a regex and redirects to the value's location.
+  // Groups can be named using (?<name>...) and referenced in the redirect using {name}
+  // Example:
+  // regex1        | /share/(?<shareid>[a-z0-9]{8}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{12})
+  // redirect1     | https://experience.adobe.com/?repoId=delivery-p108396-e1046543.adobeaemcloud.com#/@wfadoberm/assets/contenthub/shares/{shareid} 
+  const config = readBlockConfig(block);
+  const path = window.location.pathname + window.location.hash;
+
+  for(let reg in config){
+    if(reg.startsWith('regex')){
+      const regex = new RegExp(config[reg]);
+      let redirect = config[reg.replace('regex', 'redirect')];
+      const match = path.match(regex);
+      if(match){
+        for(let key in match.groups){
+          redirect = redirect.replace(`{${key}}`, match.groups[key]);
+        }
+        console.info('redirecting to', redirect);
+        window.location.href = redirect;
+        return;
+      }
+    }
+  }
+  block.innerHTML = '';
+}
+
+

fstab.yaml

@@ -6,5 +6,5 @@ folders:
   /share/: /share/default
   /qa/share/: /qa/share/default
   /collection/: /collection/default
-  /qa/collection/: /collection/default
+  /qa/collection/: /qa/collection/default