Add company search component to monorail theme

- Add browser component and marko wrapper.  Also add backend routes to support acctually looking up companeis by name at /__company-search route.

packages/marko-web-theme-monorail/browser/company-search.vue

@@ -0,0 +1,78 @@
+<template>
+  <div ref="companySearch" class="company-search">
+    <autocomplete
+      ref="autocomplete"
+      :search="searchCompanies"
+      :class="errorClass"
+      placeholder="Search Companies..."
+      aria-label="Search Companies..."
+      :get-result-value="getResultValue"
+      :debounce-time="500"
+      @submit="handleSubmit"
+    />
+  </div>
+</template>
+
+<script>
+import Autocomplete from '@trevoreyre/autocomplete-vue';
+
+const path = '/__company-search?searchQuery=';
+
+export default {
+  inject: ['EventBus'],
+  components: { Autocomplete },
+
+  data: () => ({
+    errorClass: '',
+  }),
+
+  methods: {
+    // We want to display the title
+    getResultValue(result) {
+      return result.shortName;
+    },
+    // Open the selected company in a new window
+    handleSubmit(result) {
+      // Handle when the result is an error or missing context link
+      if (!result.siteContext || !result.siteContext.path) {
+        this.$refs.autocomplete.value = '';
+        return;
+      }
+
+      this.emitAction();
+      window.location.href = result.siteContext.path;
+    },
+    searchCompanies(input) {
+      this.errorClass = '';
+      if (input.length < 3) {
+        return [];
+      }
+      return this.getCompanyResults(input);
+    },
+    async getCompanyResults(input) {
+      try {
+        const url = `${path}${encodeURI(input)}`;
+        const res = await fetch(url);
+        const json = await res.json();
+        if (!res.ok) throw new Error(json.message || res.statusText);
+        return json.nodes;
+      } catch (error) {
+        const errorNodes = [{
+          id: 'error',
+          shortName: error.message,
+        }];
+        this.errorClass = 'errors';
+        return errorNodes;
+      }
+    },
+    emitAction() {
+      const payload = {
+        category: 'Content Header Search',
+        action: 'Click',
+        label: 'Website Section Page',
+      };
+      this.EventBus.$emit('content-header-search', payload);
+    },
+  },
+};
+</script>

packages/marko-web-theme-monorail/browser/index.js

@@ -14,6 +14,7 @@ const InlineNewsletterForm = () => import(/* webpackChunkName: "theme-inline-new
 const MenuToggleButton = () => import(/* webpackChunkName: "theme-menu-toggle-button" */ './menu-toggle-button.vue');
 const NewsletterCloseButton = () => import(/* webpackChunkName: "theme-newsletter-close-button" */ './newsletter-close-button.vue');
 const NewsletterToggleButton = () => import(/* webpackChunkName: "theme-newsletter-toggle-button" */ './newsletter-toggle-button.vue');
+const CompanySearch = () => import(/* webpackChunkName: "theme-company-search" */ './company-search.vue');
 const SiteNewsletterMenu = () => import(/* webpackChunkName: "theme-site-newsletter-menu" */ './site-newsletter-menu.vue');
 const WufooForm = () => import(/* webpackChunkName: "theme-wufoo-form" */ './wufoo-form.vue');
 const TopStoriesMenu = () => import(/* webpackChunkName: "theme-top-stories-menu" */ './top-stories-menu.vue');
@@ -111,6 +112,9 @@ export default (Browser, config = {
   Browser.register('ThemeNewsletterToggleButton', NewsletterToggleButton, {
     provide: { EventBus },
   });
+  Browser.register('ThemeCompanySearch', CompanySearch, {
+    provide: { EventBus },
+  });
   Browser.register('ThemeTopStoriesMenu', TopStoriesMenu);
   Browser.register('WufooForm', WufooForm);
   Browser.register('RevealAdHandler', RevealAdHandler);

packages/marko-web-theme-monorail/components/blocks/company-search.marko

@@ -0,0 +1 @@
+<marko-web-browser-component name="ThemeCompanySearch" />

packages/marko-web-theme-monorail/components/blocks/marko.json

@@ -19,6 +19,9 @@
     "@consent-checkboxes": "array",
     "@initially-expanded": "boolean"
   },
+  "<theme-company-search-block>": {
+    "template": "./company-search.marko"
+  },
   "<theme-full-width-native-ad-block>": {
     "template": "./full-width-native-ad.marko"
   },

packages/marko-web-theme-monorail/graphql/fragments/company-search.js

@@ -0,0 +1,13 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment CompanySearchFragment on Content {
+  id
+  shortName
+  siteContext {
+    path
+  }
+}
+
+`;

packages/marko-web-theme-monorail/package.json

@@ -32,6 +32,7 @@
     "@parameter1/base-cms-object-path": "^3.0.0",
     "@parameter1/base-cms-utils": "^3.0.0",
     "@parameter1/base-cms-web-common": "^3.0.0",
+    "@trevoreyre/autocomplete-vue": "^2.2.0",
     "bootstrap": "4.3.1",
     "cheerio": "^1.0.0-rc.10",
     "graphql-tag": "^2.12.5",

packages/marko-web-theme-monorail/routes/company-search.js

@@ -0,0 +1,27 @@
+const loader = require('@parameter1/base-cms-marko-web-search/loaders/search');
+const jsonErrorHandler = require('@parameter1/base-cms-marko-web/express/json-error-handler');
+const { asyncRoute } = require('@parameter1/base-cms-utils');
+
+const queryFragment = require('../graphql/fragments/company-search');
+
+module.exports = (app) => {
+  app.get('/__company-search', asyncRoute(async (req, res) => {
+    const { searchQuery } = req.query;
+    const { apollo, $baseBrowse } = res.locals;
+
+    const response = await loader(
+      {
+        apolloBaseCMS: apollo,
+        apolloBaseBrowse: $baseBrowse,
+      },
+      {
+        status: 1,
+        contentTypes: ['COMPANY'],
+        assignedToWebsiteSiteIds: [req.app.locals.config.websiteContext.id],
+        searchQuery,
+        queryFragment,
+      },
+    );
+    res.json(response);
+  }), jsonErrorHandler());
+};

packages/marko-web-theme-monorail/scss/components/blocks/_company-search.scss

@@ -0,0 +1,55 @@
+.company-search {
+  position: relative;
+  &__title {
+    margin-bottom: 18px;
+    font-size: 18px;
+    font-weight: 800;
+    text-transform: uppercase;
+  }
+  .autocomplete-input{
+    display: block;
+    width: 100%;
+    height: calc(1.5em + .75rem + 2px);
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: 0;
+    outline: none;
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    &:focus {
+      border-color: #ebebeb;
+      box-shadow: none;
+    }
+  }
+  .autocomplete-result-list {
+    @include box-shadow($theme-card-box-shadow);
+    position: absolute;
+    z-index: 2;
+    width: 100%;
+    max-height: 10em;
+    padding: map-get($spacers, 2);
+    overflow: scroll;
+    list-style: none;
+    background: $white;
+    border: 1px solid #ebebeb;
+    li {
+      color: $primary;
+      cursor: pointer;
+      .autocomplete-result-error {
+        font-size: 40px;
+        font-weight: 700;
+
+      }
+    }
+  }
+  .errors {
+    li {
+      cursor: initial;
+    }
+  }
+}

yarn.lock

@@ -3063,6 +3063,27 @@
     "@octokit/openapi-types" "^2.2.0"
     "@types/node" ">= 8"
 
+"@parameter1/base-cms-marko-web-reveal-ad@^2.75.1":
+  version "2.75.1"
+  resolved "https://registry.yarnpkg.com/@parameter1/base-cms-marko-web-reveal-ad/-/base-cms-marko-web-reveal-ad-2.75.1.tgz#6df390011c4d6d109d86645ccca5d768a9ec0f46"
+  integrity sha512-wcT2R0HE84QZs6x18j5Fi0GgPL0wrX9McskGPnsEUveCwI22FTMY045N2BZS/+9MDy52FE0L9UBk173Yeg4+Mw==
+  dependencies:
+    "@parameter1/base-cms-object-path" "^2.75.1"
+    "@parameter1/base-cms-utils" "^2.75.1"
+
+"@parameter1/base-cms-object-path@^2.75.1":
+  version "2.75.1"
+  resolved "https://registry.yarnpkg.com/@parameter1/base-cms-object-path/-/base-cms-object-path-2.75.1.tgz#169c55bc7199954e46ff48e298cf5073468e2ed6"
+  integrity sha512-v9+QjzBAjqZMxdjpmZLcKukmokMxJPE1o/AOt12RWaxkvThyiHG/kqctuZjA20Eoi3DGvX5xepl1KrggH5oZiQ==
+  dependencies:
+    "@parameter1/base-cms-utils" "^2.75.1"
+    object-path "^0.11.8"
+
+"@parameter1/base-cms-utils@^2.75.1":
+  version "2.75.1"
+  resolved "https://registry.yarnpkg.com/@parameter1/base-cms-utils/-/base-cms-utils-2.75.1.tgz#1a630b97cfa8362eb47c99459407e735aac65b71"
+  integrity sha512-i2oeoufTx6CRga00pGIwQAI4A8R6VwDLQokv6MasbAEorIKYegbPVaUEPZg8XOBMnEyzKlSJaGfCX58Zt3dNkA==
+
 "@parameter1/joi@^1.2.10":
   version "1.2.10"
   resolved "https://registry.yarnpkg.com/@parameter1/joi/-/joi-1.2.10.tgz#d5ea00deffa8c48fd1d707eb39858b69aa5bfdb4"
@@ -3191,6 +3212,11 @@
   resolved "https://registry.yarnpkg.com/@soda/get-current-script/-/get-current-script-1.0.2.tgz#a53515db25d8038374381b73af20bb4f2e508d87"
   integrity sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==
 
+"@trevoreyre/autocomplete-vue@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@trevoreyre/autocomplete-vue/-/autocomplete-vue-2.2.0.tgz#db1fd94bc001ccba296cdd370fdae122117b311e"
+  integrity sha512-A5j986nM6htTbCpEW9BbwlqCobIMD4+uicAYGCSI8DM1ojK8meCyVI23jK+gAxi+vjhraCBneKI+vbwB8sL0ig==
+
 "@trysound/[email protected]":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.1.1.tgz#3348564048e7a2d7398c935d466c0414ebb6a669"