Elastic

blueprint-example.yml

title: Example Blueprint

fields:
  elastic:
    label: Search
    type: elastic

index.css

.k-elastic-field-results {
  padding-top: .5rem;
}
.k-elastic-field-results ul {
  padding-top: .5rem;
}
.k-elastic-field-results li {
  padding: .5rem;
  background: #fff;
  margin-bottom: 2px;
}

index.js

panel.plugin("demo/search", {
  fields: {
    elastic: {
      // declare everything all
      // options that you want to
      // implement from the blueprint
      props: {
        label: String,
        value: String,
        // endpoints are passed automatically
        // and can be used to make field api requests
        endpoints: Object
      },
      // field data that will change
      data() {
        return {
          query: this.value,
          result: []
        };
      },
      // you can use watchers to
      // react to changes on field data
      watch: {
        // the query is updated whenever
        // the value changes. This needs
        // to be implemented to change the
        // query when the "Revert" button is
        // pushed in the panel
        value(value) {
          this.query = value;
        },
        // whenever the query changes
        // run a search. This is a more
        // complex watcher with an option
        // and a handler
        query: {
          handler() {
            // send an input event when the
            // query changes. This will be picked
            // up by the panel and the query will
            // be stored when the form is saved
            this.$emit("input", this.query);
            this.search();
          },
          // run this as soon as the component
          // has been created
          immediate: true
        }
      },
      // define custom field methods
      methods: {
        search() {

          if (this.query.length === 0) {
            this.results = [];
            return;
          }

          // create a api request
          // with help from the endpoints
          // object. endpoints.field points
          // to the field api, defined in the php file
          this.$api
            .get(this.endpoints.field + "/search")
            .then(response => {
              // update the results once the api
              // request has finished. This will
              // automatically update the template
              this.result = response;
            })
        }
      },
      template: `
        <k-field class="k-elastic-field" :label="label">
          <k-input
            v-model="query"
            type="text"
            theme="field"
            icon="search"
          />

          <div class="k-elastic-field-results" v-if="query.length">
            Results:
            <ul>
              <li v-for="item in result">{{ item }}</li>
            </ul>
          </div>
        </k-field>
      `
    }
  }
});

index.php

<?php

Kirby::plugin('demo/search', [
    'fields' => [
        'elastic' => [
            // each field can have a custom
            // api function that returns custom api routes
            // for the field. Those are scoped and
            // can be used for pretty much anything in the backend.
            'api' => function () {
                return [
                    [
                        'pattern' => 'search',
                        'action' => function () {
                            // put your elastic search here.

                            // simulating some results
                            return [
                                Str::random(4),
                                Str::random(4),
                                Str::random(4)
                            ];
                        }
                    ]
                ];
            }
        ]
    ]
]);