@mindful-web/marko-web-search 1.0.0

package/components/filters/load-website-sections.js

@@ -0,0 +1,69 @@
+const gql = require('graphql-tag');
+const { websiteSections } = require('@mindful-web/web-common/block-loaders');
+
+const selectedQueryFragment = gql`
+  fragment MarkoWebSearchSeletedWebsiteSectionFragment on WebsiteSection {
+    id
+    name
+    alias
+    isRoot
+    hierarchy {
+      id
+      name
+      alias
+    }
+    children(input: { pagination: { limit: 100 }, sort: { field: name, order: asc } }) {
+      edges {
+        node {
+          id
+          name
+          alias
+        }
+      }
+    }
+  }
+`;
+
+const queryFragment = gql`
+  fragment MarkoWebSearchWebsiteSectionFragment on WebsiteSection {
+    id
+    name
+  }
+`;
+
+module.exports = async ({ $markoWebSearch: search, apolloMindfulWebCMS } = {}) => {
+  const { assignedToWebsiteSectionIds: selectedIds } = search.input;
+  const { assignedToWebsiteSectionIds: configuredIds } = search.config;
+
+  // for now, only handle one selected section.
+  const selectedId = selectedIds && selectedIds.length ? selectedIds[0] : null;
+
+  const [selectedSection, configuredSections] = await Promise.all([
+    (async () => {
+      if (!selectedIds || !selectedIds.length) return null;
+      const { nodes } = await websiteSections(apolloMindfulWebCMS, {
+        includeIds: [selectedId],
+        limit: 1,
+        queryFragment: selectedQueryFragment,
+      });
+      const [node] = nodes;
+      node.hierarchyMap = node.hierarchy.reduce((map, section) => {
+        map.set(section.id, true);
+        return map;
+      }, new Map());
+      return node;
+    })(),
+
+    (async () => {
+      if (!configuredIds || !configuredIds.length) return [];
+      const { nodes } = await websiteSections(apolloMindfulWebCMS, {
+        includeIds: configuredIds,
+        limit: configuredIds.length,
+        sort: { field: 'name', order: 'asc' },
+        queryFragment,
+      });
+      return nodes;
+    })(),
+  ]);
+  return { selectedSection, configuredSections };
+};

package/components/filters/marko.json

@@ -0,0 +1,36 @@
+{
+  "taglib-imports": [
+    "./selected/marko.json"
+  ],
+  "<marko-web-search-content-types-filter>": {
+    "template": "./content-types.marko"
+  },
+  "<marko-web-search-filter-block>": {
+    "template": "./filter-block.marko",
+    "<title>": {},
+    "<item>": {
+      "<element>": {},
+      "@id-path": "string",
+      "@label-path": "string"
+    },
+    "<reset>": {
+      "@show": "boolean",
+      "@label": "string"
+    },
+    "@filter-key": "string",
+    "@items": "array",
+    "@modifiers": "array"
+  },
+  "<marko-web-search-filter-container>": {
+    "template": "./filter-container.marko",
+    "<title>": {
+      "@value": "string"
+    }
+  },
+  "<marko-web-search-website-sections-filter>": {
+    "template": "./website-sections.marko"
+  },
+  "<marko-web-search-website-sections-by-alias-filter>": {
+    "template": "./website-sections-by-alias.marko"
+  }
+}

package/components/filters/selected/index.marko

@@ -0,0 +1,51 @@
+import gql from "graphql-tag";
+import { get, getAsArray, getAsObject } from "@mindful-web/object-path";
+import { isFunction } from '@mindful-web/utils';
+
+$ const { $markoWebSearch: search, i18n } = out.global;
+$ const blockName = "marko-web-search-selected-filters";
+$ const { contentTypes, assignedToWebsiteSectionIds } = search.input;
+$ const { contentTypeObjectMap } = search.config;
+$ const i18nIsFunction = isFunction(i18n);
+$ const typePrefix = i18nIsFunction ? i18n("Type") : "Type";
+$ const sectionPrefix = i18nIsFunction? i18n("Section") : "Section";
+
+$ const queryFragment = gql`
+  fragment MarkoWebSearchSelectedWebsiteSectionFragment on WebsiteSection {
+    id
+    fullName
+  }
+`;
+
+$ const hasFilters = !search.isDefaultInputValueFor("contentTypes") || assignedToWebsiteSectionIds.length;
+
+<if(hasFilters)>
+  <marko-web-block name=blockName>
+    <if(!search.isDefaultInputValueFor("contentTypes"))>
+      <for|contentTypeId| of=contentTypes>
+        $ const contentType = contentTypeObjectMap.get(contentTypeId);
+        $ const typeLabel = i18nIsFunction? i18n(contentType.label) : contentType.label;
+        <marko-web-search-selected-filter
+          prefix=typePrefix
+          filter-key="contentTypes"
+          label=typeLabel
+          />
+      </for>
+    </if>
+    <if(assignedToWebsiteSectionIds.length)>
+      <marko-web-query-website-sections|{ nodes }|
+        include-ids=assignedToWebsiteSectionIds
+        limit=assignedToWebsiteSectionIds.length
+        query-fragment=queryFragment
+      >
+        <for|section| of=nodes>
+          <marko-web-search-selected-filter
+            prefix=sectionPrefix
+            filter-key="assignedToWebsiteSectionIds"
+            label=section.fullName
+          />
+        </for>
+      </marko-web-query-website-sections>
+    </if>
+  </marko-web-block>
+</if>

package/components/filters/selected/index.marko.js

@@ -0,0 +1,113 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-search$1.0.0/components/filters/selected/index.marko",
+    marko_component = require("./index.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_gql = require("graphql-tag"),
+    gql = module_gql.default || module_gql,
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    get = module_objectPath_module.get,
+    getAsArray = module_objectPath_module.getAsArray,
+    getAsObject = module_objectPath_module.getAsObject,
+    module_utils_module = require("@mindful-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    isFunction = module_utils_module.isFunction,
+    marko_forOf = require("marko/dist/runtime/helpers/for-of"),
+    marko_web_search_selected_filter_template = require("./item.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_search_selected_filter_tag = marko_loadTag(marko_web_search_selected_filter_template),
+    marko_web_query_website_sections_template = require("@mindful-web/marko-core/components/queries/website-sections.marko"),
+    marko_web_query_website_sections_tag = marko_loadTag(marko_web_query_website_sections_template),
+    marko_web_block_template = require("@mindful-web/marko-web/components/element/block.marko"),
+    marko_web_block_tag = marko_loadTag(marko_web_block_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { $markoWebSearch: search, i18n } = out.global;
+
+  const blockName = "marko-web-search-selected-filters";
+
+  const { contentTypes, assignedToWebsiteSectionIds } = search.input;
+
+  const { contentTypeObjectMap } = search.config;
+
+  const i18nIsFunction = isFunction(i18n);
+
+  const typePrefix = i18nIsFunction ? i18n("Type") : "Type";
+
+  const sectionPrefix = i18nIsFunction? i18n("Section") : "Section";
+
+  const queryFragment = gql`
+  fragment MarkoWebSearchSelectedWebsiteSectionFragment on WebsiteSection {
+    id
+    fullName
+  }
+`;
+
+  const hasFilters = !search.isDefaultInputValueFor("contentTypes") || assignedToWebsiteSectionIds.length;
+
+  if (hasFilters) {
+    marko_web_block_tag({
+        name: blockName,
+        tag: "div",
+        renderBody: function(out) {
+          if (!search.isDefaultInputValueFor("contentTypes")) {
+            var $for$0 = 0;
+
+            marko_forOf(contentTypes, function(contentTypeId) {
+              const contentType = contentTypeObjectMap.get(contentTypeId);
+
+              const typeLabel = i18nIsFunction? i18n(contentType.label) : contentType.label;
+
+              var $keyScope$0 = "[" + (($for$0++) + "]");
+
+              marko_web_search_selected_filter_tag({
+                  prefix: typePrefix,
+                  filterKey: "contentTypes",
+                  label: typeLabel
+                }, out, __component, "1" + $keyScope$0);
+            });
+          }
+
+          if (assignedToWebsiteSectionIds.length) {
+            marko_web_query_website_sections_tag({
+                includeIds: assignedToWebsiteSectionIds,
+                limit: assignedToWebsiteSectionIds.length,
+                queryFragment: queryFragment,
+                renderBody: function(out, { nodes }) {
+                  var $for$1 = 0;
+
+                  marko_forOf(nodes, function(section) {
+                    var $keyScope$1 = "[" + (($for$1++) + "]");
+
+                    marko_web_search_selected_filter_tag({
+                        prefix: sectionPrefix,
+                        filterKey: "assignedToWebsiteSectionIds",
+                        label: section.fullName
+                      }, out, __component, "3" + $keyScope$1);
+                  });
+                }
+              }, out, __component, "2");
+          }
+        }
+      }, out, __component, "0");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-search$1.0.0/components/filters/selected/index.marko",
+    component: "./index.marko",
+    tags: [
+      "./item.marko",
+      "@mindful-web/marko-core/components/queries/website-sections.marko",
+      "@mindful-web/marko-web/components/element/block.marko"
+    ]
+  };

package/components/filters/selected/item.marko

@@ -0,0 +1,27 @@
+import { get } from "@mindful-web/object-path";
+
+$ const { $markoWebSearch: search } = out.global;
+$ const blockName = "marko-web-search-selected-filter";
+$ const { prefix } = input;
+$ const path = get(search, "config.rootAlias");
+
+<marko-web-block name=blockName>
+  <marko-web-element block-name=blockName name="label">
+    <if(prefix)>
+      ${input.prefix}: ${input.label}
+    </if>
+    <else>
+      ${input.label}
+    </else>
+  </marko-web-element>
+  <if(input.filterKey === "assignedToWebsiteSectionIds" && path !== "search")>
+    <marko-web-search-reset-filter-link name=input.filterKey path=path class=`${blockName}__reset`>
+      <marko-web-icon name="x" modifiers=[blockName] />
+    </marko-web-search-reset-filter-link>
+  </if>
+  <else>
+    <marko-web-search-reset-filter-link name=input.filterKey class=`${blockName}__reset`>
+      <marko-web-icon name="x" modifiers=[blockName] />
+    </marko-web-search-reset-filter-link>
+  </else>
+</marko-web-block>

package/components/filters/selected/item.marko.js

@@ -0,0 +1,101 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-search$1.0.0/components/filters/selected/item.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    get = module_objectPath_module.get,
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    marko_web_element_template = require("@mindful-web/marko-web/components/element/index.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_element_tag = marko_loadTag(marko_web_element_template),
+    marko_web_icon_template = require("@mindful-web/marko-web-icons/components/icon.marko"),
+    marko_web_icon_tag = marko_loadTag(marko_web_icon_template),
+    marko_web_search_reset_filter_link_template = require("../../links/reset-filter.marko"),
+    marko_web_search_reset_filter_link_tag = marko_loadTag(marko_web_search_reset_filter_link_template),
+    marko_web_block_template = require("@mindful-web/marko-web/components/element/block.marko"),
+    marko_web_block_tag = marko_loadTag(marko_web_block_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { $markoWebSearch: search } = out.global;
+
+  const blockName = "marko-web-search-selected-filter";
+
+  const { prefix } = input;
+
+  const path = get(search, "config.rootAlias");
+
+  marko_web_block_tag({
+      name: blockName,
+      tag: "div",
+      renderBody: function(out) {
+        marko_web_element_tag({
+            name: "label",
+            tag: "div",
+            blockName: blockName,
+            renderBody: function(out) {
+              if (prefix) {
+                out.w(marko_escapeXml(input.prefix) +
+                  ": " +
+                  marko_escapeXml(input.label));
+              } else {
+                out.w(marko_escapeXml(input.label));
+              }
+            }
+          }, out, __component, "1");
+
+        if ((input.filterKey === "assignedToWebsiteSectionIds") && (path !== "search")) {
+          marko_web_search_reset_filter_link_tag({
+              name: input.filterKey,
+              path: path,
+              class: blockName + "__reset",
+              renderBody: function(out) {
+                marko_web_icon_tag({
+                    blockName: "marko-web-icon",
+                    tag: "span",
+                    name: "x",
+                    modifiers: [
+                        blockName
+                      ]
+                  }, out, __component, "3");
+              }
+            }, out, __component, "2");
+        } else {
+          marko_web_search_reset_filter_link_tag({
+              name: input.filterKey,
+              class: blockName + "__reset",
+              renderBody: function(out) {
+                marko_web_icon_tag({
+                    blockName: "marko-web-icon",
+                    tag: "span",
+                    name: "x",
+                    modifiers: [
+                        blockName
+                      ]
+                  }, out, __component, "5");
+              }
+            }, out, __component, "4");
+        }
+      }
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-search$1.0.0/components/filters/selected/item.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/index.marko",
+      "@mindful-web/marko-web-icons/components/icon.marko",
+      "../../links/reset-filter.marko",
+      "@mindful-web/marko-web/components/element/block.marko"
+    ]
+  };

package/components/filters/selected/marko.json

@@ -0,0 +1,8 @@
+{
+  "<marko-web-search-selected-filters>": {
+    "template": "./index.marko"
+  },
+  "<marko-web-search-selected-filter>": {
+    "template": "./item.marko"
+  }
+}

package/components/filters/website-sections-by-alias.marko

@@ -0,0 +1,46 @@
+import { getAsArray } from "@mindful-web/object-path";
+import { isFunction } from '@mindful-web/utils';
+import loadWebsiteSections from "./load-website-sections";
+
+$ const { $markoWebSearch, apollo, i18n } = out.global;
+$ const filterKey = "assignedToWebsiteSectionIds";
+$ const title = isFunction(i18n) ? i18n("Website Sections") : "Website Sections";
+
+<marko-web-resolve|{ resolved }| promise=loadWebsiteSections({
+  $markoWebSearch,
+  apolloMindfulWebCMS: apollo,
+})>
+  $ const { selectedSection, configuredSections } = resolved;
+  <marko-web-search-filter-block filter-key=filterKey items=configuredSections>
+    <@title value=title />
+    <@item|{ node, blockName }|>
+      <if(selectedSection && selectedSection.hierarchyMap.has(node.id))>
+        $ // loop through hierarchy to create "breadcrumb" links
+        $ const { hierarchy } = selectedSection;
+        <marko-web-element block-name=blockName name="item" modifiers=["breadcrumbs"]>
+          <for|section| of=hierarchy>
+            <marko-web-search-set-filter-value-link path=section.alias name=filterKey value=section.id reset-class=`${blockName}__clear-item`>
+              ${section.name}
+            </marko-web-search-set-filter-value-link>
+          </for>
+        </marko-web-element>
+
+        $ // then display children
+        $ const children = getAsArray(selectedSection, "children.edges").map(edge => edge.node);
+        <marko-web-search-filter-block filter-key=filterKey items=children modifiers=["children"]>
+          <@item|{ node: child, blockName }|>
+            <marko-web-search-set-filter-value-link path=child.alias name=filterKey reset-class=`${blockName}__clear-item`>
+              ${child.name}
+            </marko-web-search-set-filter-value-link>
+          </@item>
+        </marko-web-search-filter-block>
+      </if>
+      <else>
+        $ // display the "normal" section
+        <marko-web-search-set-filter-value-link path=node.alias name=filterKey>
+          ${node.name}
+        </marko-web-search-set-filter-value-link>
+      </else>
+    </@item>
+  </marko-web-search-filter-block>
+</marko-web-resolve>

package/components/filters/website-sections-by-alias.marko.js

@@ -0,0 +1,139 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-search$1.0.0/components/filters/website-sections-by-alias.marko",
+    marko_component = require("./website-sections-by-alias.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    getAsArray = module_objectPath_module.getAsArray,
+    module_utils_module = require("@mindful-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    isFunction = module_utils_module.isFunction,
+    module_loadWebsiteSections = require("./load-website-sections"),
+    loadWebsiteSections = module_loadWebsiteSections.default || module_loadWebsiteSections,
+    marko_forOf = require("marko/dist/runtime/helpers/for-of"),
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    marko_web_search_set_filter_value_link_template = require("../links/set-filter-value.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_search_set_filter_value_link_tag = marko_loadTag(marko_web_search_set_filter_value_link_template),
+    marko_web_element_template = require("@mindful-web/marko-web/components/element/index.marko"),
+    marko_web_element_tag = marko_loadTag(marko_web_element_template),
+    marko_web_search_filter_block_template = require("./filter-block.marko"),
+    marko_web_search_filter_block_tag = marko_loadTag(marko_web_search_filter_block_template),
+    marko_web_resolve_template = require("@mindful-web/marko-core/components/resolve.marko"),
+    marko_web_resolve_tag = marko_loadTag(marko_web_resolve_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { $markoWebSearch, apollo, i18n } = out.global;
+
+  const filterKey = "assignedToWebsiteSectionIds";
+
+  const title = isFunction(i18n) ? i18n("Website Sections") : "Website Sections";
+
+  marko_web_resolve_tag({
+      promise: loadWebsiteSections({
+          $markoWebSearch: $markoWebSearch,
+          apolloMindfulWebCMS: apollo
+        }),
+      renderBody: function(out, { resolved }) {
+        const { selectedSection, configuredSections } = resolved;
+
+        marko_web_search_filter_block_tag({
+            filterKey: filterKey,
+            items: configuredSections,
+            title: {
+                value: title
+              },
+            item: {
+                renderBody: function(out, { node, blockName }) {
+                  if (selectedSection && selectedSection.hierarchyMap.has(node.id)) {
+                    // loop through hierarchy to create "breadcrumb" links
+
+                    const { hierarchy } = selectedSection;
+
+                    marko_web_element_tag({
+                        name: "item",
+                        tag: "div",
+                        blockName: blockName,
+                        modifiers: [
+                            "breadcrumbs"
+                          ],
+                        renderBody: function(out) {
+                          var $for$0 = 0;
+
+                          marko_forOf(hierarchy, function(section) {
+                            var $keyScope$0 = "[" + (($for$0++) + "]");
+
+                            marko_web_search_set_filter_value_link_tag({
+                                path: section.alias,
+                                name: filterKey,
+                                value: section.id,
+                                resetClass: blockName + "__clear-item",
+                                renderBody: function(out) {
+                                  out.w(marko_escapeXml(section.name));
+                                }
+                              }, out, __component, "5" + $keyScope$0);
+                          });
+                        }
+                      }, out, __component, "4");
+
+                    // then display children
+
+                    const children = getAsArray(selectedSection, "children.edges").map(edge => edge.node);
+
+                    marko_web_search_filter_block_tag({
+                        filterKey: filterKey,
+                        items: children,
+                        modifiers: [
+                            "children"
+                          ],
+                        item: {
+                            renderBody: function(out, { node: child, blockName }) {
+                              marko_web_search_set_filter_value_link_tag({
+                                  path: child.alias,
+                                  name: filterKey,
+                                  resetClass: blockName + "__clear-item",
+                                  renderBody: function(out) {
+                                    out.w(marko_escapeXml(child.name));
+                                  }
+                                }, out, __component, "8");
+                            }
+                          }
+                      }, out, __component, "6");
+                  } else {
+                    // display the "normal" section
+
+                    marko_web_search_set_filter_value_link_tag({
+                        path: node.alias,
+                        name: filterKey,
+                        renderBody: function(out) {
+                          out.w(marko_escapeXml(node.name));
+                        }
+                      }, out, __component, "9");
+                  }
+                }
+              }
+          }, out, __component, "1");
+      }
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-search$1.0.0/components/filters/website-sections-by-alias.marko",
+    component: "./website-sections-by-alias.marko",
+    tags: [
+      "../links/set-filter-value.marko",
+      "@mindful-web/marko-web/components/element/index.marko",
+      "./filter-block.marko",
+      "@mindful-web/marko-core/components/resolve.marko"
+    ]
+  };

package/components/filters/website-sections.marko

@@ -0,0 +1,42 @@
+import { getAsArray } from "@mindful-web/object-path";
+import { isFunction } from '@mindful-web/utils';
+import loadWebsiteSections from "./load-website-sections";
+
+$ const { $markoWebSearch, apollo, i18n } = out.global;
+$ const filterKey = "assignedToWebsiteSectionIds";
+$ const title = isFunction(i18n) ? i18n("Website Sections") : "Website Sections";
+
+<marko-web-resolve|{ resolved }| promise=loadWebsiteSections({
+  $markoWebSearch,
+  apolloMindfulWebCMS: apollo,
+})>
+  $ const { selectedSection, configuredSections } = resolved;
+  <marko-web-search-filter-block filter-key=filterKey items=configuredSections>
+    <@title value=title />
+    <@item|{ node, blockName }|>
+      <if(selectedSection && selectedSection.hierarchyMap.has(node.id))>
+        <!-- loop through hierarchy to create "breadcrumb" links -->
+        $ const { hierarchy } = selectedSection;
+        <marko-web-element block-name=blockName name="item" modifiers=["breadcrumbs"]>
+          <for|section| of=hierarchy>
+            <marko-web-search-set-filter-value-link name=filterKey value=section.id reset-class=`${blockName}__clear-item`>
+              ${section.name}
+            </marko-web-search-set-filter-value-link>
+          </for>
+        </marko-web-element>
+
+        <!-- then display children -->
+        $ const children = getAsArray(selectedSection, "children.edges").map(edge => edge.node);
+        <marko-web-search-filter-block filter-key=filterKey items=children modifiers=["children"]>
+          <@item label-path="name" />
+        </marko-web-search-filter-block>
+      </if>
+      <else>
+        <!-- display the "normal" section -->
+        <marko-web-search-set-filter-value-link name=filterKey value=node.id>
+          ${node.name}
+        </marko-web-search-set-filter-value-link>
+      </else>
+    </@item>
+  </marko-web-search-filter-block>
+</marko-web-resolve>