Add editor

app/components/button-group.hbs

@@ -1,7 +1,3 @@
-<div class="flex items-center -space-x-px" role="group" ...attributes>
-  {{yield
-    (hash
-      Button=(component "button" group=this)
-    )
-  }}
+<div class='flex items-center -space-x-px mb-4' role='group' ...attributes>
+  {{yield}}
 </div>

app/components/button-group.js

@@ -1,13 +0,0 @@
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-
-export default class ButtonGroupComponent extends Component {
-  @action
-  buttonPressed(value) {
-    if (typeof this.args.onClick !== 'function') {
-      return;
-    }
-
-    this.args.onClick(value);
-  }
-}

app/components/button.js

@@ -14,8 +14,8 @@ export const sizes = {
 
 export const iconSizes = {
   sm: 18,
-  md: 20,
-  lg: 22,
+  md: 24,
+  lg: 26,
 };
 
 export const styles = {

app/controllers/admin/indexes/item/documents/index.js

@@ -11,6 +11,7 @@ export default class AdminIndexesItemDocumentsIndexController extends Controller
   @tracked limit = 20;
   @tracked page = 1;
   @tracked dataView = 'table';
+  @tracked isAdvancedSearch = false;
   @tracked sort;
   @tracked hiddenFields = [];
   @tracked attributesToRetrieve = [];

app/routes/admin/indexes/item/documents/index.js

@@ -1,6 +1,46 @@
 import Route from '@ember/routing/route';
 import { hash } from 'rsvp';
 
+const uri = 'https://docs.meilisearch.com/reference/api/search';
+const searchSchema = {
+  name: 'search',
+  uri,
+  fileMatch: [uri],
+  schema: {
+    $id: uri,
+    type: 'object',
+    properties: {
+      q: {
+        type: 'string',
+      },
+      // minWordSizeForTypos: {
+      //   type: 'object',
+      //   properties: {
+      //     oneTypo: { type: 'integer' },
+      //     twoTypos: { type: 'integer' },
+      //   },
+      //   additionalProperties: false,
+      // },
+      // disableOnWords: {
+      //   type: 'array',
+      //   items: {
+      //     type: 'string',
+      //   },
+      //   uniqueItems: true,
+      // },
+      // disableOnAttributes: {
+      //   type: 'array',
+      //   items: {
+      //     type: 'string',
+      //   },
+      //   uniqueItems: true,
+      // },
+    },
+    additionalProperties: false,
+    required: ['q'],
+  },
+};
+
 export default class AdminIndexesItemDocumentsIndexRoute extends Route {
   queryParams = {
     q: { refreshModel: true },
@@ -25,6 +65,8 @@ export default class AdminIndexesItemDocumentsIndexRoute extends Route {
 
     return hash({
       index,
+      searchSchema,
+      search: { q: '' },
       data: index.search(q, options),
       sortableAttributes: index.getSortableAttributes(),
       displayedAttributes: index.getSetting('displayed-attributes'),

app/templates/admin/indexes/item/documents/index.hbs

@@ -1,34 +1,70 @@
-<div class='sm:flex sm:flex-nowrap'>
-  {{! q }}
-  <Form::Input
-    @placeholder='Search'
-    @prefixIcon={{this.Magnify}}
-    @value={{this.q}}
-    @onChange={{this.searchTextChanged}}
-    class='sm:grow'
-  />
+<div class='flex items-center'>
+  <ButtonGroup>
+    {{#each-in this.views as |key icon|}}
+      <Button
+        @icon={{icon}}
+        @onClick={{set this 'dataView'}}
+        @value={{key}}
+        class='w-auto rounded-none first:rounded-l last:rounded-r
+          {{if (eq this.dataView key) "text-primary"}}'
+      />
+    {{/each-in}}
+  </ButtonGroup>
 
-  {{! sort }}
-  {{#if this.sortValues.length}}
+  <Button
+    class='mb-4 ml-4 {{if this.isAdvancedSearch "text-primary"}}'
+    @onClick={{toggle-action 'isAdvancedSearch' this}}
+  >
+    Advanced search
+  </Button>
+</div>
+
+{{#if this.isAdvancedSearch}}
+  <Form::Element @errors={{this.errors}}>
+    <MonacoEditor
+      @value={{json-stringify @model.search}}
+      @language='json'
+      @uri={{@model.searchSchema.uri}}
+      @schema={{@model.searchSchema}}
+      {{!-- @sendValue={{this.save}} --}}
+      {{!-- @invoker={{this.invoker}} --}}
+      @onDidValidation={{set this 'errors'}}
+      class='mb-4'
+    />
+  </Form::Element>
+{{else}}
+  <div class='sm:flex sm:flex-nowrap'>
+    {{! q }}
+    <Form::Input
+      @placeholder='Search'
+      @prefixIcon={{this.Magnify}}
+      @value={{this.q}}
+      @onChange={{this.searchTextChanged}}
+      class='sm:grow'
+    />
+
+    {{! sort }}
+    {{#if this.sortValues.length}}
+      <Form::Listbox
+        @prefixValue={{'Sort: '}}
+        @value={{nu-co this.sort 'none'}}
+        @values={{this.sortValues}}
+        @onChange={{set this 'sort'}}
+        @allowClear={{true}}
+        class='sm:ml-4 sm:flex-none'
+      />
+    {{/if}}
+
+    {{! limit }}
     <Form::Listbox
-      @prefixValue={{'Sort: '}}
-      @value={{nu-co this.sort 'none'}}
-      @values={{this.sortValues}}
-      @onChange={{set this 'sort'}}
-      @allowClear={{true}}
+      @prefixValue={{'Limit: '}}
+      @value={{nu-co this.limit 'none'}}
+      @values={{array 20 50 100 500}}
+      @onChange={{set this 'limit'}}
       class='sm:ml-4 sm:flex-none'
     />
-  {{/if}}
-
-  {{! limit }}
-  <Form::Listbox
-    @prefixValue={{'Limit: '}}
-    @value={{nu-co this.limit 'none'}}
-    @values={{array 20 50 100 500}}
-    @onChange={{set this 'limit'}}
-    class='sm:ml-4 sm:flex-none'
-  />
-</div>
+  </div>
+{{/if}}
 
 {{!-- <div class='flex items-center mb-4'>
   <div class='flex items-center ml-auto'>
@@ -43,18 +79,6 @@
 </div> --}}
 
 {{#if (gt @model.data.estimatedTotalHits 0)}}
-  <div class='flex items-center -space-x-px mb-4' role='group'>
-    {{#each-in this.views as |key icon|}}
-      <Button
-        @icon={{icon}}
-        @onClick={{set this 'dataView'}}
-        @value={{key}}
-        class='w-auto rounded-none first:rounded-l last:rounded-r
-          {{if (eq this.dataView key) "text-primary"}}'
-      />
-    {{/each-in}}
-  </div>
-
   {{#if (eq this.dataView 'table')}}
     <SimpleTable
       @data={{@model.data.hits}}
@@ -142,7 +166,6 @@
       {{/let}}
     </SimpleTable>
   {{else if (eq this.dataView 'json')}}
-
     {{#each @model.data.hits as |data|}}
       <MonacoEditor
         @value={{json-stringify data}}