Filter Box Set up

Projects/Governance/UI/Spaces/Reports-Space/FiltersHeader.js

@@ -0,0 +1,68 @@
+function newGovernanceReportsFiltersHeader() {
+    let thisObject = {
+        addFilterHeader: addFilterHeader,
+        detectEnterOnFiltersBox: detectEnterOnFiltersBox,
+        setFocusOnFiltersBox: setFocusOnFiltersBox,
+        render: render,
+        initialize: initialize,
+        finalize: finalize
+    }
+
+    return thisObject
+
+    function initialize() {
+
+    }
+
+    function finalize() {
+
+    }
+
+    function render() {
+        let HTML = ''
+        HTML = HTML + '<div id="governance-search-page-div">'
+        HTML = HTML + '<center><img src="Images/superalgos-logo.png" class="governance-image-logo-search" width=400></center>'
+        HTML = HTML + '<center><div class="governance-font-normal governance-search-box"><input class="governance-search-input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></input></div></center>'
+        HTML = HTML + '</div>'
+        let docsContentDiv = document.getElementById('governance-content-div')
+        docsContentDiv.innerHTML = HTML + UI.projects.education.spaces.docsSpace.footer.addFooter()
+
+        UI.projects.governance.spaces.reportsSpace.filtersHeader.detectEnterOnFiltersBox()
+        UI.projects.governance.spaces.reportsSpace.filtersHeader.setFocusOnFiltersBox()
+    }
+
+    function addFilterHeader() {
+        let HTML = ''
+        // Logo & Search Box
+        HTML = HTML + '<div class="governance-report-page-header">'
+        HTML = HTML + '<div class="governance-image-logo-report-page"><img src="Images/superalgos-logo.png" width=200></div>'
+        HTML = HTML + '<div class="governance-report-page-box">'
+        HTML = HTML + '<input class="governance-search-input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></input>'
+        HTML = HTML + '</div>'
+        HTML = HTML + '</div>'
+
+        return HTML
+    }
+
+    function detectEnterOnFiltersBox() {
+        const element = document.getElementsByClassName("governance-search-input")[0]
+        if (UI.projects.education.spaces.docsSpace.commandInterface.command !== undefined) {
+            element.value = UI.projects.education.spaces.docsSpace.commandInterface.command
+        }
+        element.addEventListener("keyup", function (event) {
+            if (event.key === "Enter" || event.keyCode === 13) {
+                UI.projects.education.spaces.docsSpace.exitEditMode()
+                UI.projects.education.spaces.docsSpace.currentBookBeingRendered = undefined
+                UI.projects.education.spaces.docsSpace.currentDocumentBeingRendered = undefined
+                UI.projects.education.spaces.docsSpace.contextMenu.removeContextMenuFromScreen()
+                UI.projects.education.spaces.docsSpace.commandInterface.command = element.value.trim()
+                UI.projects.education.spaces.docsSpace.commandInterface.detectCommands()
+            }
+        });
+    }
+
+    function setFocusOnFiltersBox() {
+        const element = document.getElementsByClassName("governance-search-input")[0]
+        element.focus()
+    }
+}

Projects/Governance/UI/Spaces/Reports-Space/ReportsPage.js

@@ -25,7 +25,7 @@ function newGovernanceReportsReportsPage() {
             const tabs = ['Profiles', 'Referrals', 'Supporters', 'Mentors', 'Pools', 'Assets', 'Features', 'Positions']
             let HTML = ''
             HTML = HTML + '<section id="governance-report-page-div" class="governance-search-page-container">'
-            HTML = HTML + UI.projects.education.spaces.docsSpace.mainSearchPage.addSearchHeader()
+            HTML = HTML + UI.projects.governance.spaces.reportsSpace.filtersHeader.addFilterHeader()
 
             // Tabs
             HTML = HTML + '<div class="governance-report-page-header-tabs-container">'
@@ -123,8 +123,8 @@ function newGovernanceReportsReportsPage() {
 
             docsContentDiv.innerHTML = HTML + UI.projects.governance.spaces.reportsSpace.footer.addFooter()
 
-            UI.projects.education.spaces.docsSpace.mainSearchPage.detectEnterOnSearchBox()
-            UI.projects.education.spaces.docsSpace.mainSearchPage.setFocusOnSearchBox()
+            UI.projects.governance.spaces.reportsSpace.filtersHeader.detectEnterOnFiltersBox()
+            UI.projects.governance.spaces.reportsSpace.filtersHeader.setFocusOnFiltersBox()
 
             // If there is a tabIndex we will switch to that tab here.
             if (tabIndex !== undefined) {

Projects/Governance/UI/Spaces/Reports-Space/ReportsSpace.js

@@ -6,6 +6,7 @@ function newGobernanceReportsSpace() {
         sidePanelTab: undefined,
         reportsPage: undefined,
         footer: undefined,
+        filtersHeader: undefined,
         userProfiles: undefined,
         referrals: undefined,
         supports: undefined,
@@ -52,6 +53,9 @@ function newGobernanceReportsSpace() {
         thisObject.footer.finalize()
         thisObject.footer = undefined
 
+        thisObject.filtersHeader.finalize()
+        thisObject.filtersHeader = undefined
+
         thisObject.userProfiles.finalize()
         thisObject.userProfiles = undefined
 
@@ -95,6 +99,7 @@ function newGobernanceReportsSpace() {
 
         thisObject.reportsPage = newGovernanceReportsReportsPage()
         thisObject.footer = newGovernanceReportsFooter()
+        thisObject.filtersHeader = newGovernanceReportsFiltersHeader()
         thisObject.userProfiles = newGovernanceReportsUserProfiles()
         thisObject.referrals = newGovernanceReportsReferrals()
         thisObject.supports = newGovernanceReportsSupports()
@@ -106,6 +111,7 @@ function newGobernanceReportsSpace() {
 
         thisObject.reportsPage.initialize()
         thisObject.footer.initialize()
+        thisObject.filtersHeader.initialize()
         thisObject.userProfiles.initialize()
         thisObject.referrals.initialize()
         thisObject.mentors.initialize()