- ${text}
- `;
+ //const audienceDiv = document.createElement('div');
+ //audienceDiv.classList.add('audience', 'card-content');
+ //audienceDiv.innerHTML = `
+ // ';
- }
- */
if (isInactive) headerRowDiv.classList.add('inactive');
- /*
- headerRow.innerHTML = `
- ${divOpen}
- 
- 
-
`;
- */
return headerRowDiv;
}
@@ -1061,23 +1004,29 @@ async function buildTableRow(deliverable, createHidden) {
const status = (deliverable.deliverableStatusUpdate == null) ? "Not Available" : deliverable.deliverableStatusUpdate + "%";
const statusPct = (deliverable.deliverableStatusUpdate == null) ? "0%" : deliverable.deliverableStatusUpdate + "%";
- const dataRowDiv = div({ class: 'row datarow' },
+ const dataRowDiv = div(
+ { class: 'row datarow' },
div({ class: 'property table-column column1 deliverable-name' }, checkBlankString(deliverable.deliverableName)),
div({ class: 'property table-column column2 deliverable-type' }, checkBlankString(typeLabel)),
div({ class: 'property table-column column3 platforms' }),
- div({ class: 'property table-column column4 qa-files' },
+ div(
+ { class: 'property table-column column4 qa-files' },
deliverable.reviewLink
? a({ class: 'campaign-link', target: '_blank', href: deliverable.reviewLink }, 'QA Files')
: 'Not Available'
),
div({ class: 'property table-column column5' }, assetLinks),
- div({ class: 'property table-column column7 justify-center' },
- div({ class: 'status-wrapper '},
- div({ class: 'status-heading' },
+ div(
+ { class: 'property table-column column7 justify-center' },
+ div(
+ { class: 'status-wrapper '},
+ div(
+ { class: 'status-heading' },
div({ class: 'status-label' }, 'Progress'),
div({ class: 'status-percent' }, status),
),
- div({ class: 'status-bar-wrapper' },
+ div(
+ { class: 'status-bar-wrapper' },
div({ class: 'status-bar-underlay' }),
div({ class: 'status-bar', style: `width: ${statusPct}` }),
),
@@ -1092,42 +1041,6 @@ async function buildTableRow(deliverable, createHidden) {
div({ class: 'property table-column column9' }, checkBlankString(deliverable.driver)),
);
if (createHidden) dataRowDiv.classList.add('inactive');
-
-/*
- const dataRow = document.createElement('div');
- dataRow.classList.add('row', 'datarow');
- if (createHidden) dataRow.classList.add('inactive');
-
-
- dataRow.innerHTML = `
-
-
- ${typeLabel} (${matchCount})
- ${checkBlankString(deliverable.deliverableName)}
- ${checkBlankString(typeLabel)}
-
-
- ${deliverable.reviewLink ? 'QA Files ': "Not Available"}
-
-
- ${assetLinks.outerHTML}
-
-
-
-
-
-
-
-
- Progress
- ${status}
-
-
- ${dateFormat(deliverable.taskCompletionDate)}
- ${deliverable.previousTaskCompletionDate ? 'Revised from ' + deliverable.previousTaskCompletionDate + '
': ""}
- ${checkBlankString(deliverable.driver)}
- `;
- */
createPlatformString(deliverable.platforms, dataRowDiv);
return dataRowDiv;
}
@@ -1197,12 +1110,10 @@ function parseProgramCollectionLink(collectionString) {
'name': collectionName,
'link': collectionLink,
}
-
return parsedCollection;
}
function parseCollectionLink(collectionString) {
- // example: FY2582_And it also snowed;https://experience.adobe.com/?repoId=delivery-p108396-e1046543.adobeaemcloud.com#/@wfadoberm/assets/contenthub/collections/urn:cid:aem:4ff35fe0-88c9-48f7-92cd-6400d8001791
let collectionName, collectionPlatform, collectionCategory, collectionLink;
const fullNameSplit = collectionString.split(';');
const splitString = collectionString.split(' | ');
@@ -1226,7 +1137,6 @@ function parseCollectionLink(collectionString) {
'link': collectionLink,
'fullName': fullName
}
-
return parsedCollection;
}
@@ -1423,11 +1333,6 @@ async function buildCalendar(dataObj, block, type, mappingArray, period) {
const widthOfGroup = (endPosition - startPosition); // width of group = start position + (day duration)
// calculate the duration of the group as that helps set the width of its members
const groupDuration = Math.floor((latestEndDate.getTime() - earliestStartDate.getTime()) / (1000 * 60 * 60 * 24));
-
- //const itemWrapper = document.createElement('div');
- //itemWrapper.classList.add('group-content');
-
- //
const itemWrapperDiv = div({ class: 'group-content' });
for (const item of matchedItems) {
@@ -1440,23 +1345,20 @@ async function buildCalendar(dataObj, block, type, mappingArray, period) {
let daysDifference = Math.floor((itemStartDate.getTime() - earliestStartDate.getTime()) / (1000 * 60 * 60 * 24));
const startPctDiff = ((daysDifference / groupDuration) * 100).toFixed(2);
- /*
- let itemEl = document.createElement('div');
- itemEl.classList.add('item');
- itemEl.style.marginLeft = startPctDiff + '%';
- */
-
-
// Find the corresponding color code from the taskStatusMappings array
const itemStatusMapping = await getTaskStatusMapping(item.taskStatus);
const { text: statusText = 'Unknown Status', 'color-code': colorCode = 'green' } = itemStatusMapping;
+ // Create a placeholder for the thumbnail
const itemElDiv = div({ class: 'item', style: `margin-left: ${startPctDiff}%;width: ${itemDurationPct}%`},
div({ class: 'color-tab'}),
- div({ class: 'item-content' },
- div({ class: 'content-row' },
- div({ class: 'info' },
+ div(
+ { class: 'item-content' },
+ div(
+ { class: 'content-row' },
+ div(
+ { class: 'info' },
div({ class: 'thumbnail' }),
div({ class: 'name', title: item.deliverableName}, item.deliverableName),
div({ class: 'item-status', 'data-status': checkBlankString(item.taskStatus),
@@ -1464,56 +1366,24 @@ async function buildCalendar(dataObj, block, type, mappingArray, period) {
}),
),
),
- div({ class: 'content-row bottom' },
+ div(
+ { class: 'content-row bottom' },
itemEndDateStr
? div({ class: 'start-date', title: `Task Planned End Date: ${itemEndDateStr}`}, `End Date: ${itemEndDateStr}`)
: '',
- div({ class: 'link' },
+ div(
+ { class: 'link' },
a({ href: item.reviewLink, target: '_blank' }, 'QA Files'),
)
)
)
);
- // Create a placeholder for the thumbnail
- /*
- itemEl.innerHTML = `
-
-
-
- `;
- itemEl.style.width = itemDurationPct + '%';
- */
-
// Call the new function to fetch and add the thumbnail, ensuring sequential execution
- /*await addThumbnailToItem(itemEl, item.programName, item.campaignName,item.deliverableType);
- itemWrapper.appendChild(itemEl);
- */
await addThumbnailToItem(itemElDiv, item.programName, item.campaignName,item.deliverableType);
- //itemWrapper.appendChild(itemElDiv);
itemWrapperDiv.appendChild(itemElDiv);
-
};
- //await lookupType(category, 'deliverable-type');
-
const groupElDiv = div({ class: `calendar-group color${groupIndex}`,
style: `margin-left: ${startPosition}%;width: ${widthOfGroup}%`},
div({ class: 'group-header'},
@@ -1526,25 +1396,7 @@ async function buildCalendar(dataObj, block, type, mappingArray, period) {
div({ class: 'right-block' }),
),
);
- /*
- const groupEl = document.createElement('div');
- groupEl.classList.add('calendar-group', `color${groupIndex}`);
- groupEl.style.marginLeft = startPosition + '%';
- groupEl.style.width = widthOfGroup + '%';
- groupEl.innerHTML = `
-
-
-
-
-
- ${item.deliverableName}
-
-
-
- ${itemEndDateStr ? '
- End Date: ' + itemEndDateStr + '
' : ''}
-
- QA Files
-
-
-
- `;
- */
- //groupElDiv.appendChild(itemWrapper);
+
groupElDiv.appendChild(itemWrapperDiv);
groupElDiv.querySelectorAll('.group-controls').forEach((arrow) => {
arrow.addEventListener('click', showHideGroup);
@@ -1558,22 +1410,13 @@ async function buildCalendar(dataObj, block, type, mappingArray, period) {
block.querySelector('.calendar.tab').appendChild(calendarEl);
// populate "filter" dropdown
- //const filterDropdown = document.createElement('div');
- //filterDropdown.classList.add('filter-dropdown-content');
const filterDropdown = div({ class: 'filter-dropdown-content'});
const uniqueYears = getUniqueYears(calendarDeliverables);
- //const yearOptionLabel = document.createElement('div');
- //yearOptionLabel.classList.add('filter-label');
- //yearOptionLabel.textContent = 'Year';
const yearOptionLabel = div({ class: 'filter-label' }, 'Year');
- //const quarterOptionLabel = document.createElement('div');
- //quarterOptionLabel.classList.add('filter-label');
- //quarterOptionLabel.textContent = 'Quarter';
const quarterOptionLabel = div({ class: 'filter-label' }, 'Quarter');
filterDropdown.appendChild(yearOptionLabel);
// when choosing 'Quarter' the top left controls change to control the quarter in focus
- // its kind of a zoomed in view.
uniqueYears.forEach((year) => {
const yearOption = document.createElement('div');
yearOption.classList.add('filter-option');
@@ -1586,10 +1429,6 @@ async function buildCalendar(dataObj, block, type, mappingArray, period) {
const quarters = [ 1, 2, 3, 4 ];
quarters.forEach((quarter) => {
const quarterOption = div({ class: 'filter-option', 'data-period': quarter }, quarter);
- //const quarterOption = document.createElement('div');
- //quarterOption.classList.add('filter-option');
- //quarterOption.dataset.period = quarter;
- //quarterOption.textContent = quarter;
quarterOption.addEventListener('click', (event) => filterDropdownSelection(event, viewStartYear, years.length));
filterDropdown.appendChild(quarterOption);
})
@@ -1609,18 +1448,15 @@ async function buildCalendar(dataObj, block, type, mappingArray, period) {
const totalDaysInMonth = new Date((new Date(currentYear, currentMonth, 1)) - 1).getDate();
const percentOfMonth = (currentDate.getUTCDate() / totalDaysInMonth).toFixed(2) * 100;
const monthEl = block.querySelector(`.month-wrapper[data-year='${currentYear}'] .month[data-num='${currentMonth}']`);
+
// account for view not including current date
if (monthEl) {
monthEl.classList.add('current');
// use direct style for line offset
const lineEl = div({ class: 'calendar-indicator', style: `margin-right: ${((-2 * percentOfMonth) + 100)}%` })
- //const lineEl = document.createElement('div');
- //lineEl.classList.add('calendar-indicator');
- //lineEl.style.marginRight = ((-2 * percentOfMonth) + 100) + '%';
monthEl.appendChild(lineEl);
}
-
// close dropdown listener for clicks outside open dropdown
document.querySelector('.gmo-program-details.block').addEventListener('click', dismissDropdown);
block.querySelectorAll('.year-switch > .year-toggle').forEach((control) => {
@@ -1645,8 +1481,6 @@ async function buildCalendar(dataObj, block, type, mappingArray, period) {
});
}
-// calendar view supporting functions
-
// Helper function to get task status mapping
async function getTaskStatusMapping(taskStatus) {
const taskStatusArray = await taskStatusMappings;
@@ -1675,11 +1509,6 @@ async function addThumbnailToItem(itemEl, programName, campaignName, deliverable
if (imageObject && imageObject.imageUrl) {
const thumbnailDiv = itemEl.querySelector('.thumbnail');
const imgEl = img({ src: imageObject.imageUrl, alt: imageObject.imageAltText, loading: 'lazy' });
- //const imgElement = document.createElement('img');
- //imgElement.src = imageObject.imageUrl;
- //imgElement.alt = imageObject.imageAltText;
- //imgElement.loading = 'lazy';
- //thumbnailDiv.appendChild(imgElement);
thumbnailDiv.appendChild(imgEl);
} else {
console.error("Image Object does not have a valid imageUrl");
@@ -1857,30 +1686,25 @@ function calendarYears(startYear, endYear) {
}
function buildYearCal(years) {
- //const calendarEl = document.createElement('div');
- //calendarEl.classList.add('calendar-wrapper');
const calendarEl = div({ class: 'calendar-wrapper' });
if (years.length > 1) calendarEl.classList.add('multiyear');
- //const backgroundEl = document.createElement('div');
- //backgroundEl.classList.add('calendar-background');
- //backgroundEl.style.width = (years.length * 100) + '%';
const backgroundEl = div({ class: 'calendar-background', style: `width: ${(years.length * 100)}%` });
years.forEach((year) => {
- //const yearWrapper = document.createElement('div');
- //yearWrapper.dataset.year = year;
- //yearWrapper.classList.add('year-wrapper');
- //yearWrapper.style.width = (100 / years.length) + '%';
- const yearWrapper = div({ class: 'year-wrapper', style: `width: ${(100 / years.length)}%`, 'data-year': year },
- div({ class: 'header-wrapper' },
- div({ class: 'quarter-header' },
+ const yearWrapper = div(
+ { class: 'year-wrapper', style: `width: ${(100 / years.length)}%`, 'data-year': year },
+ div(
+ { class: 'header-wrapper' },
+ div(
+ { class: 'quarter-header' },
div({ class: 'quarter' }, `Q1 ${year}`),
div({ class: 'quarter' }, `Q2 ${year}`),
div({ class: 'quarter' }, `Q3 ${year}`),
div({ class: 'quarter' }, `Q4 ${year}`),
),
),
- div({ class: 'month-wrapper', 'data-year': year },
+ div(
+ { class: 'month-wrapper', 'data-year': year },
div({ class: 'month', 'data-num': '1'},
div({ class: 'label' }, 'Jan'),
),
@@ -1919,39 +1743,6 @@ function buildYearCal(years) {
),
)
);
- //const calendarHeader = document.createElement('div');
- //calendarHeader.classList.add('header-wrapper');
- //const calendarHeader = div({ class: 'header-wrapper' });
- //const quartersHeader = document.createElement('div');
- //quartersHeader.classList.add('quarter-header');
- /*quartersHeader.innerHTML = `
-
- 
-
-
-
-
- ${groupType}
- ${matchedItems.length}
-
-
- Q1 ${year}
- Q2 ${year}
- Q3 ${year}
- Q4 ${year}
- `;
- calendarHeader.appendChild(quartersHeader);
-
- const monthsWrapper = document.createElement('div');
- monthsWrapper.classList.add('month-wrapper');
- monthsWrapper.dataset.year = year;
- monthsWrapper.innerHTML = `
- Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
Fiscal Q1 ${year}
- // Fiscal Q2 ${year}
- // Fiscal Q3 ${year}
- // Fiscal Q4 ${year}
- //`;
- //calendarHeader.appendChild(quartersHeader);
-
- /*
- const monthsWrapper = document.createElement('div');
- monthsWrapper.classList.add('month-wrapper');
- monthsWrapper.dataset.year = year;
- monthsWrapper.innerHTML = `
- Dec Q1
Jan Q1
Feb Q1
Mar Q2
Apr Q2
May Q2
Jun Q3
Jul Q3
Aug Q3
Sep Q4
Oct Q4
Nov Q4