Code cleanup (#98)

* platforms mapping with graphql - also cleaned up extraneous/defunct code * refactor chevrons for column sort * add title attribs * remove kpi column * rename blocks * cleaning up redundant code * continuing cleanup * fix pagination bug * fix css bug in audience card
hlxsites · May 29, 2024 · 10c7408 · 10c7408
1 parent f956a85
commit 10c7408
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 100 deletions.
diff --git a/...campaign-details/gmo-campaign-details.css → ...o-program-details/gmo-program-details.css b/...campaign-details/gmo-campaign-details.css → ...o-program-details/gmo-program-details.css
@@ -23,7 +23,7 @@ body {
         font-weight: bold;
     }
 }
-.gmo-campaign-details.block {
+.gmo-program-details.block {
     & .h1 {
         font: normal normal bold 18px/27px Adobe Clean;
     }
@@ -361,6 +361,7 @@ body {
         & > .heading-wrapper {
             display: flex;
             margin-left: 15px;
+            align-items: center;
             &.subheading {
                 margin-left: 25px;
             }

diff --git a/...-campaign-details/gmo-campaign-details.js → ...mo-program-details/gmo-program-details.js b/...-campaign-details/gmo-campaign-details.js → ...mo-program-details/gmo-program-details.js
@@ -1,8 +1,7 @@
 import { decorateIcons, readBlockConfig } from '../../scripts/lib-franklin.js';
 import { getQueryVariable } from '../../scripts/shared.js';
 import { getProgramInfo } from '../../scripts/graphql.js';
-import { resolveMappings, filterArray, getProductMapping } from '../../scripts/shared-mappings.js';
-import { checkBlankString } from '../gmo-campaign-list/gmo-campaign-list.js'
+import { resolveMappings, filterArray, getProductMapping, checkBlankString } from '../../scripts/shared-program.js';
 import { getBaseConfigPath } from '../../scripts/site-config.js';
 import { searchAsset } from '../../scripts/assets.js';
 
@@ -105,45 +104,11 @@ export default async function decorate(block) {
                     </div>
                 </div>
                 ${artifactLinks}
-                <div class="links-wrapper inactive">
-                    <span class="h3">Links to Important Artifacts</span>
-                    <div class="links">
-                        <a href="#" class="campaign-link">Creative Architecture</a>
-                        <a href="#" class="campaign-link">E2E Journeys</a>
-                        <a href="#" class="campaign-link">GTM-S</a>
-                        <a href="#" class="campaign-link">GTM-P</a>
-                        <a href="#" class="campaign-link">Marketing Brief</a>
-                        <a href="#" class="campaign-link">Messaging Doc</a>
-                    </div>
-                </div>
             </div>
             <div class="infocards-wrapper">
-                <div class="card milestones inactive">
-                    <div class="card-heading h3">Milestones</div>
-                    <div class="milestone">
-                        <span class="icon icon-trophy"></span>
-                        Milestone 1
-                    </div>
-                    <div class="milestone">
-                        <span class="icon icon-trophy"></span>
-                        Milestone 2
-                    </div>
-                    <div class="milestone">
-                        <span class="icon icon-trophy"></span>
-                        Milestone 3
-                    </div>
-                </div>
                 <div class="card products">
                     <div class="card-heading h3">Products</div>
                 </div>
-                <div class="card scope inactive">
-                    <div class="card-heading h3">Feature Scope</div>
-                    <ul>
-                        <li>Text to image</li>
-                        <li>Generative fill</li>
-                        <li>Text effects</li>
-                    </ul>
-                </div>
                 <div class="card audiences">
                     <div class="card-heading h3">Audiences</div>
                     ${audiences}
@@ -153,14 +118,6 @@ export default async function decorate(block) {
         <div id="tab2" class="deliverables tab inactive">
             <div class="page-heading">
                 ${artifactLinks}
-                <div class="artifacts-wrapper inactive">
-                    <span class="h3">Links to Important Artifacts</span>
-                    <div class="links">
-                        <a href="#" class="campaign-link">Creative Architecture</a>
-                        <a href="#" class="campaign-link">E2E Journeys</a>
-                        <a href="#" class="campaign-link">Marketing Brief</a>
-                    </div>
-                </div>
                 <div class="total-assets">
                     <div class="h3">Total Assets</div>
                     <span id="totalassets" class="description"></span>
@@ -173,7 +130,6 @@ export default async function decorate(block) {
                     <div class="header table-column column3">Platforms</div>
                     <div class="header table-column column4">Review Link</div>
                     <div class="header table-column column5">Final Asset</div>
-                    <div class="header table-column column6">KPI</div>
                     <div class="header table-column column7">Status Update</div>
                     <div class="header table-column column8">Completion Date</div>
                     <div class="header table-column column9">Project Owner</div>
@@ -182,8 +138,6 @@ export default async function decorate(block) {
                 </div>
             </div>
         </div>
-        <div id="tab3" class="calendar tab inactive">
-        </div>
     </div>
     `;
     buildProductCard(program);
@@ -220,7 +174,6 @@ export default async function decorate(block) {
     buildFieldScopes('deliverable-type',uniqueDeliverableTypes, block);
     buildFieldScopes('platforms',uniquePlatforms, block);
     const table = await buildTable(await deliverables).then(async (rows) => {
-        await decorateIcons(rows);
         return rows;
     })
     const tableRoot = block.querySelector('.table-content');
@@ -388,7 +341,7 @@ function createAudience(audience) {
     const audienceDiv = document.createElement('div');
     audienceDiv.classList.add('audience', 'card-content');
     audienceDiv.innerHTML = `
-        <span class="icon icon-gear"></span>
+        <img class="icon icon-gear" src="/icons/gear.svg"></img>
         ${text}
     `;
     return audienceDiv;
@@ -415,7 +368,7 @@ function formatDate(dateString) {
 
 async function buildTable(jsonResponse) {
     const deliverableList = jsonResponse.data.deliverableList.items;
-    const programKpi = jsonResponse.data.programList.items.primaryKpi;
+    const programKpi = jsonResponse.data.programList?.items.primaryKpi;
     const rows = document.createElement('div');
     const uniqueCategories = getUniqueItems(deliverableList, 'deliverableType');
     let emptyCategory = false;
@@ -444,7 +397,7 @@ async function buildTable(jsonResponse) {
     });
     //sort the rows
     sortRows(rows);
-    await decorateIcons(rows);
+    //await decorateIcons(rows);
     return rows;
 }
 
@@ -492,8 +445,8 @@ async function buildHeaderRow(category, headerType, isInactive, matchCount) {
     if (isInactive) headerRow.classList.add('inactive');
     headerRow.innerHTML = `
         ${divopen}
-            <span class="icon icon-next"></span>
-            <span class="icon icon-collapse inactive"></span>
+            <img class="icon-next" src="/icons/next.svg"></img>
+            <img class="icon-collapse inactive" src="/icons/collapse.svg"></img>
             <div class="headertext">${typeLabel} (${matchCount})</div>
         </div>`;
     return headerRow;
@@ -516,7 +469,6 @@ async function buildTableRow(deliverableJson, kpi, createHidden) {
         </div>
         <div class='property table-column column5'>
         </div>
-        <div class='property table-column column6 kpi'>${checkBlankString(kpi)}</div>
         <div class='property table-column column7 justify-center'>
             <div class='status-wrapper'>
                 <div class='status-heading'>

diff --git a/...o-campaign-header/gmo-campaign-header.css → ...gmo-program-header/gmo-program-header.css b/...o-campaign-header/gmo-campaign-header.css → ...gmo-program-header/gmo-program-header.css
@@ -6,7 +6,6 @@
 .inputs-wrapper {
     display: flex;
     height: 50px;
-    padding-left: 10px;
 }
 .search-wrapper {
     background-color: #FFF;

diff --git a/...mo-campaign-header/gmo-campaign-header.js → .../gmo-program-header/gmo-program-header.js b/...mo-campaign-header/gmo-campaign-header.js → .../gmo-program-header/gmo-program-header.js
@@ -1,5 +1,6 @@
 import { decorateIcons } from '../../scripts/lib-franklin.js';
 import { graphqlQueryNameList, graphqlCampaignByName } from '../../scripts/graphql.js';
+import { statusMapping, productList } from '../../scripts/shared-program.js';
 
 // Declared at the top of the file, making it accessible to all functions within this file.
 let allProducts = [];
@@ -153,12 +154,13 @@ async function initializeDropdowns() {
     populateDropdown(businessLines, 'dropdownBusinessOptions', 'businessLine');
 
     // Status List
-    const statusResponse = await graphqlQueryNameList('getStatusList');
+    const statusResponse = await statusMapping;
     const statuses = statusResponse.data.jsonByPath.item.json.options;
     populateDropdown(statuses, 'dropdownStatusOptions', 'status');
 
     // Product List
-    const productResponse = await graphqlQueryNameList('getProductList');
+    //const productResponse = await graphqlQueryNameList('getProductList');
+    const productResponse = await productList;
     allProducts = productResponse.data.jsonByPath.item.json.options;
     populateDropdown(allProducts, 'dropdownProductOptions', 'productOffering');
 

diff --git a/...s/gmo-campaign-list/gmo-campaign-list.css → blocks/gmo-program-list/gmo-program-list.css b/...s/gmo-campaign-list/gmo-campaign-list.css → blocks/gmo-program-list/gmo-program-list.css
diff --git a/...ks/gmo-campaign-list/gmo-campaign-list.js → blocks/gmo-program-list/gmo-program-list.js b/...ks/gmo-campaign-list/gmo-campaign-list.js → blocks/gmo-program-list/gmo-program-list.js
@@ -1,7 +1,7 @@
 import { readBlockConfig } from '../../scripts/lib-franklin.js';
 import { decorateIcons } from '../../scripts/lib-franklin.js';
-import { graphqlAllCampaignsFilter, graphqlCampaignCount, generateFilterJSON, getMappingInfo } from '../../scripts/graphql.js';
-import { getProductMapping } from '../../scripts/shared-mappings.js'
+import { graphqlAllCampaignsFilter, graphqlCampaignCount, generateFilterJSON, graphqlQueryNameList } from '../../scripts/graphql.js';
+import { getProductMapping, checkBlankString, statusMapping } from '../../scripts/shared-program.js'
 import { getBaseConfigPath } from '../../scripts/site-config.js';
 import { searchAsset } from '../../scripts/assets.js';
 
@@ -42,9 +42,10 @@ let currentGraphqlFilter = {};
 //Get Campaign Count for pagination
 let campaignCount = await graphqlCampaignCount();
 let blockConfig;
-let statusMapping = await getMappingInfo("getStatusList");
+//let statusMapping = await getMappingInfo("getStatusList");
+//let statusMapping = await graphqlQueryNameList('getStatusList');
 
-//Custom event gmoCampaignListBlock to allow the gmo-campaign-header to trigger the gmo-campaign-list to update
+//Custom event gmoCampaignListBlock to allow the gmo-campaign-header to trigger the gmo-program-list to update
 document.addEventListener('gmoCampaignListBlock', async function() {
     //Build graphq filter that is passed to the graphql persisted queries
     const graphQLFilterArray = getFilterValues();
@@ -55,7 +56,7 @@ document.addEventListener('gmoCampaignListBlock', async function() {
     }
 
     currentGraphqlFilter= generateFilterJSON(graphQLFilterArray);
-    const block = document.querySelector('.gmo-campaign-list.block');
+    const block = document.querySelector('.gmo-program-list.block');
     //Get Campaign Count for pagination
     campaignCount = await graphqlCampaignCount(currentGraphqlFilter);
     //Trigger loading the gmo-campaign-block
@@ -389,7 +390,7 @@ function repaginate(dropdown) {
     currentNumberPerPage = dropdown.value;
     //Reset current page to 1
     currentPage = 1;
-    const block = document.querySelector('.gmo-campaign-list.block');
+    const block = document.querySelector('.gmo-program-list.block');
     //Reset cursor to ''
     decorate(block, currentNumberPerPage, '', false, false);
 }
@@ -398,7 +399,7 @@ function nextPage(nextBtn) {
     if (currentPageInfo.hasNextPage) {
       //Calculate Next Page
       currentPage++;
-      const block = document.querySelector('.gmo-campaign-list.block');
+      const block = document.querySelector('.gmo-program-list.block');
       decorate( block, currentNumberPerPage, currentPageInfo.nextCursor, false, true,currentGraphqlFilter);
       if (!(nextBtn.classList.contains('active'))) {
           return;
@@ -411,7 +412,7 @@ function nextPage(nextBtn) {
 function prevPage(prevBtn) {
     if (currentPageInfo.hasPreviousPage) {
       currentPage--;
-      const block = document.querySelector('.gmo-campaign-list.block');
+      const block = document.querySelector('.gmo-program-list.block');
       const currentCursor = currentPageInfo.currentCursor;
       //Calculate cursor for previous page
       const indexCursor = cursorArray.indexOf(currentCursor) - currentNumberPerPage;
@@ -469,13 +470,4 @@ function sortColumn(dir, property) {
     sortArray.forEach(({ row }, index) => {
         container.appendChild(row);
     });
-}
-
-// supply dummy data if none present
-export function checkBlankString(string) {
-    if (string == undefined || string == '' ) {
-        return 'Not Available';
-    } else {
-        return string;
-    }
-}
+}
diff --git a/icons/collapse.svg b/icons/collapse.svg
diff --git a/scripts/graphql.js b/scripts/graphql.js
@@ -252,6 +252,7 @@ export async function getProgramInfo(programName, queryType) {
   });
 }
 
+/*
 export async function getMappingInfo(queryType) {
   const baseApiUrl = `${await getGraphqlEndpoint()}/graphql/execute.json`;
   const projectId = 'gmo';
@@ -276,4 +277,5 @@ export async function getMappingInfo(queryType) {
       console.error('Error fetching data: ', error);
       throw error; // Rethrow or handle error as appropriate
   });
-}
+}
+*/
diff --git a/scripts/shared-mappings.js → scripts/shared-program.js b/scripts/shared-mappings.js → scripts/shared-program.js
@@ -1,8 +1,15 @@
-import { getMappingInfo } from "./graphql.js";
+import { graphqlQueryNameList } from "./graphql.js";
 import { getProductIconMapping, getBaseConfigPath } from './site-config.js';
 
+let iconMapping;
+export let statusMapping = await graphqlQueryNameList('getStatusList');
+export let productList = await graphqlQueryNameList('getProductList');
+
+/*
+*   Executes graphql query for 'friendly' labels and returns array of the results
+*/
 export async function resolveMappings(mappingType) {
-    const response = await getMappingInfo(mappingType);
+    const response = await graphqlQueryNameList(mappingType);
     const mappingArray = response.data.jsonByPath.item.json.options;
     return mappingArray;
 }
@@ -18,15 +25,29 @@ export function filterArray(array, key, value) {
 export async function getProductMapping(product) {
     const configPath = getBaseConfigPath();
     const defaultIcon = configPath + '/logo/products/default-app-icon.svg';
-    const iconMapping = await getProductIconMapping();
+    if (iconMapping == undefined) iconMapping = await getProductIconMapping();
+
     const iconMatch = filterArray(iconMapping, 'Product-offering', product);
     const icon = iconMatch ? configPath + iconMatch[0]['Icon-path'] : defaultIcon;
 
-    const productsMatch = filterArray(await resolveMappings("getProductList"), 'value', product);
+    if (productList == undefined) productList = await graphqlQueryNameList('getProductList');
+    const productsArray = productList.data.jsonByPath.item.json.options;
+    const productsMatch = filterArray(productsArray, 'value', product);
     const productsText = productsMatch ? productsMatch[0].text : product;
 
     return {
         label: productsText,
         icon: icon
     }
-}
+}
+
+/*
+*   Check for undefined/blank property and supply 'Not Available' if no data
+*/
+export function checkBlankString(string) {
+    if (string == undefined || string == '' ) {
+        return 'Not Available';
+    } else {
+        return string;
+    }
+}
diff --git a/scripts/site-config.js b/scripts/site-config.js
@@ -373,5 +373,6 @@ export async function getLicenseAgreementText() {
 export async function getProductIconMapping() {
   const response = await getConfig('site-config.json');
   //return response;
+  // account for bad return here somehow
   return response['product-icons'].data;
 }