Nymph Query Editor - collaborative app data

Nymph is an object data store that is easy to use in JavaScript and PHP.

Installation

You can install Nymph Query Editor with NPM.

npm install --save nymph-query-editor

This repository is the JavaScript query editor widget built with Svelte. For more information, you can see the main Nymph repository.

Setting up Nymph Query Editor

(with UMD in Vanilla ES 5)

npm install --save nymph-query-editor

To use, include Locutus' strtotime and the files from the lib folder, and instantiate with a target and list of Nymph entity classes:

<!-- Locutus strtotime (loading it manually) -->
<script type="text/javascript">
  if (typeof module !== "undefined") _module = module;
  module = {};
</script>
<script src="node_modules/locutus/php/datetime/strtotime.js"></script>
<script type="text/javascript">
  strtotime = module.exports;
  delete module;
  if (typeof _module !== "undefined") module = _module;
</script>
<!-- Query Editor JS -->
<script src="node_modules/nymph-query-editor/lib/ValueEditor.js"></script>
<script src="node_modules/nymph-query-editor/lib/SelectorEditor.js"></script>
<script src="node_modules/nymph-query-editor/lib/QueryEditor.js"></script>
<script type="text/javascript">
  ((global, QueryEditor) => {
    const myQueryEditor = new QueryEditor({
      target: document.querySelector('query-editor'),
      data: {
        supportedClasses: [
          MyFirstEntity,
          MySecondEntity
        ],
        options: {
          "class": MyFirstEntity.class
        },
        selectors: [
          {
            "type": "&",
            "gte": ["cdate", null, "-1 week"]
          }
        ]
      }
    });
  })(this, QueryEditor.default);
</script>

Then you can get the query by the options and selectors:

const {options, selectors} = myQueryEditor.get();
const query = [options, ...selectors];

For a thorough step by step guide to setting up Nymph on your own server, visit the Setup Guide.

API Docs

Check out the API Docs in the wiki.