Added collapsable categories to the main landing page.

src/assets/conf/resources-landing-page.json

@@ -1,12 +1,15 @@
 {
-  "grid-container": [
+  "grid-container": {
+    "Human Resources": [
       {
         "title": "Paycor",
         "description": "Clock in and out, request time off, review health benefits and access paystubs using the Paycor human-resources application.",
         "imagePath": "paycor-logo3-100x100.png",
         "urlText": "https://www.paycor.com/",
         "altText": "Paycor logo"
-    },
+      }
+    ],
+    "General": [
       {
         "title": "Gmail",
         "description": "Access your company e-mail and a suite of Google apps, including a calendar, instant messaging and cloud storage.",
@@ -147,13 +150,6 @@
         "urlText": "https://jdsfaulkner.workplace.com",
         "altText": "PDF icon"
       },
-    {
-      "title": "W-4 Form",
-      "description": "Fill out this form and submit to HR so that the company can withhold the correct federal income tax from your pay.",
-      "imagePath": "pdf-icon3-100x100.png",
-      "urlText": "https://jdsfaulkner.workplace.com",
-      "altText": "PDF icon"
-    },
       {
         "title": "Employment Application",
         "description": "Would you or someone you know like to apply for a position at JDSfaulkner? Submit this application to HR.",
@@ -167,6 +163,15 @@
         "imagePath": "pdf-icon3-100x100.png",
         "urlText": "https://jdsfaulkner.workplace.com",
         "altText": "Preview image"
+      }
+    ],
+    "Tax Documents": [
+      {
+        "title": "W-4 Form",
+        "description": "Fill out this form and submit to HR so that the company can withhold the correct federal income tax from your pay.",
+        "imagePath": "pdf-icon3-100x100.png",
+        "urlText": "https://jdsfaulkner.workplace.com",
+        "altText": "PDF icon"
       },
       {
         "title": "Client W-9 Form",
@@ -175,6 +180,6 @@
         "urlText": "https://jdsfaulkner.workplace.com",
         "altText": "PDF icon"
       }
-
     ]
+  }
 }

src/assets/pages/resources-landing-page.html

@@ -17,7 +17,9 @@
         <div class="container">
             <div class="row">
                 <div class="col-sm-8 col-md-7 py-4">
-                    <p class="text-success">You rely on a vast amount of resources to do your job. How can you keep track of them all? Explore ResourceFinder. From payroll to project-management, ResourceFinder can help you locate the tools you need.</p>
+                    <p class="text-success">You rely on a vast amount of resources to do your job. How can you keep
+                        track of them all? Explore ResourceFinder. From payroll to project-management, ResourceFinder
+                        can help you locate the tools you need.</p>
                 </div>
                 <div class="col-sm-4 offset-md-1 py-4">
                     <ul class="list-unstyled">
@@ -32,7 +34,8 @@
     <div class="navbar navbar-dark bg-primary shadow-sm">
         <div class="container d-flex justify-content-between">
             <a class="navbar-brand text-navbartext" href="#">
-                <img src="../images/jdsfaulkner-logo-lt-theme.png" height="50" class="d-inline-block align-middle" alt="JDSfaulkner logo">
+                <img src="../images/jdsfaulkner-logo-lt-theme.png" height="50" class="d-inline-block align-middle"
+                     alt="JDSfaulkner logo">
             </a>
             <div id="theme-toggle" class="theme-button mb-2"></div>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader"
@@ -46,16 +49,17 @@
 
 <main>
     <div class="album py-5 bg-secondary">
-
+        <a href="#Tax-Documents-collapser">CLICK HERE FOR TAX DOCUMENTS</a>
         <div class="container">
-            <input class="form-control form-control-dark w-100 bg-info border border-boxborder text-searchfont" placeholder="Search"
+            <input class="form-control form-control-dark w-100 bg-info border border-boxborder text-searchfont"
+                   placeholder="Search"
                    aria-label="Search">
         </div>
 
         <div class="album py-5 bg-secondary">
             <div class="container bg-secondary">
-<!--                div container-->
-                <div id="grid-container" class="row">
+                <!--                div container-->
+                <div id="grid-container">
                 </div>
             </div>
         </div>

src/assets/pages/styles/theme-base.scss

@@ -44,6 +44,10 @@ $enable-rounded: true !default;
   color: map-get($theme-colors, paragraphtextcolor);
 }
 
+.no-overflow {
+  overflow: hidden;
+}
+
 html{
   height:100%
 }
@@ -51,3 +55,4 @@ html{
 body{
   height:100%;
 }
+

src/assets/views/card-category.mustache

@@ -0,0 +1,10 @@
+<html lang="en">
+<div>
+    <div id="{{{category-clean}}}-collapser" style="background-color:grey;">
+        <p class="text-white align-self-center">{{{category}}}</p>
+    </div>
+    <br>
+    <div id="{{{category-clean}}}-container" class="{{{category-clean}}}-collapse no-overflow row"></div>
+</div>
+<br>
+</html>

src/assets/views/web-card.mustache

@@ -1,5 +1,5 @@
 <html lang="en">
-<div class="col-md-4 web-card" id="{{{id}}}" >
+<div class="col-md-4 web-card" id="{{{id}}}">
     <div class="card mb-4 shadow-sm web-card-background">
         <div class="card-body  text-center">
             <h6 class="card-text text-header" style="text-align:center">{{title}}</h6>
@@ -12,3 +12,4 @@
         </div>
     </div>
 </div>
+</html>

src/ts_source/templates.ts

@@ -20,16 +20,14 @@ export function cacheTemplates() {
         });
 }
 
-export function loadTemplate(filename: string, objs: object[], cb: TemplateCallbackType) {
+export function loadTemplate(filename: string, obj: object, cb: TemplateCallbackType) {
     let contents = templateCache[filename];
     if (!contents) throw new Error("No such template: " + filename);
-    let results: string[] = []
-    for (let i = 0, l = objs.length; i < l; i++) {
-        let obj = objs[i]
     let rendered = Mustache.render(contents, obj)
-        results.push(rendered)
+    if(null !== cb){
+        cb(rendered)
     }
-    cb(results)
+    return rendered;
 }
 
 export function loadTemplateSingle(filename: string, cardModel: CardModel, cb: (content: string, id: string) => void) {

src/ts_source/viewFactory.ts

@@ -1,5 +1,5 @@
 import {Configurator, FileUtils} from './fileutils'
-import {loadTemplateSingle} from "./templates"
+import {loadTemplate, loadTemplateSingle} from "./templates"
 
 const shell = require('electron').shell;
 
@@ -40,17 +40,42 @@ export function buildFileCard(filePath: string, elem: Element, append: boolean =
 export function buildWebCardsFromConfig(configName: string) {
     let elementConfig = Configurator.loadAppConfig(configName);
     let $ = require('jquery')
-    let keys = Object.keys(elementConfig);
+    let containers = Object.keys(elementConfig);
+    for (let i = 0, l = containers.length; i < l; i++) {
+
+        let containerName = containers[i];
+        let containerObject = elementConfig[containerName];
+        let containerElem = $(`#${containerName}`);
+
+        let containerCategories = Object.keys(containerObject);
+        for (let j = 0, m = containerCategories.length; j < m; j++) {
+            let categoryName = containerCategories[j];
+            console.log(containerObject);
+            let contentList = containerObject[categoryName];//should be array of objects to render
+            let categoryClean = categoryName.replace(/ /ig, "-")
+            let categoryObject = {"category": categoryName, "category-clean":categoryClean};
+            let categoryWrapperRaw = loadTemplate("card-category.mustache", categoryObject, (x) => {
+            });
+            let categoryWrapper = $(categoryWrapperRaw);
+
+            containerElem.append(categoryWrapper);
 
+            let view = $(`#${categoryClean}-container`);
+            let collapseButton = $(`#${categoryClean}-collapser`);
 
-    for (let i = 0, l = keys.length; i < l; i++) {
-        let key = keys[i];
-        let contentList = elementConfig[key];
-        let element = $(`#${key}`);
+            collapseButton.on("click", () => {
+                let collapsable = $(`#${categoryClean}-container`);
+                if ("none" === collapsable.css('display')) {
+                    collapsable.css("display", "");
+                } else {
+                    collapsable.css("display", "none");
+                }
+            });
 
-        for (let j = 0, m = contentList.length; j<m;j++){
+            for (let j = 0, m = contentList.length; j < m; j++) {
                 let content = contentList[j];
-            buildWebCard(element, content, true, $);
+                buildWebCard(view, content, true, $);
+            }
         }
 
     }