Add search button

app/components/button.js

@@ -30,6 +30,7 @@ export default class ButtonComponent extends Component {
       disabled={{this.disabled}}
       type={{this.type}}
       class="inline-flex items-center justify-center min-w-min whitespace-nowrap
+      disabled:opacity-75 disabled:cursor-not-allowed
         {{get sizes this.size}}
         {{get styles this.style}}
         "

app/components/index-setting.js

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import ActionInvoker from '../lib/action-invoker';
+import ActionInvoker from 'meiliadmin/lib/action-invoker';
 import { inject as service } from '@ember/service';
 
 export default class FormIndexSettingComponent extends Component {

app/components/monaco-editor.js

@@ -33,6 +33,8 @@ function getModel(value, language, uri, schema) {
       languages.json.jsonDefaults.setDiagnosticsOptions({
         validate: true,
         schemas: [schema],
+        schemaRequest: 'error',
+        schemaValidation: 'error',
       });
     }
   }
@@ -109,9 +111,9 @@ export default class MonacoEditorComponent extends Component {
       });
     }
 
+    // Autoresize height of element
     const minHeight = this.args.minHeight ?? 160;
     const maxHeight = this.args.maxHeight ?? 420;
-    // Autoresize height of element
     const onDidContentSizeChangeHandler = this.editor.onDidContentSizeChange(
       () => {
         const contentHeight = Math.min(
@@ -125,13 +127,33 @@ export default class MonacoEditorComponent extends Component {
     );
     registerDestructor(this, onDidContentSizeChangeHandler.dispose);
 
-    // Validation
-    const onDidChangeMarkersHandler = editor.onDidChangeMarkers(() => {
-      this.args.onDidValidation?.(
-        editor.getModelMarkers().map((item) => item.message)
+    // onDidChangeModelContent
+    if (this.args.onDidChangeModelContent) {
+      const onDidChangeModelContent = this.editor.onDidChangeModelContent(
+        () => {
+          this.args.onDidChangeModelContent(
+            this.editor.getValue(),
+            this.editor
+          );
+        }
       );
-    });
-    registerDestructor(this, onDidChangeMarkersHandler.dispose);
+      registerDestructor(this, onDidChangeModelContent.dispose);
+    }
+
+    // Validation
+    if (this.args.onDidValidation) {
+      const onDidChangeMarkersHandler = editor.onDidChangeMarkers(() => {
+        const model = this.editor.getModel();
+
+        this.args.onDidValidation(
+          editor
+            .getModelMarkers({ resource: model.uri })
+            .map((item) => item.message),
+          this.editor
+        );
+      });
+      registerDestructor(this, onDidChangeMarkersHandler.dispose);
+    }
   }
 
   @action
@@ -155,7 +177,7 @@ export default class MonacoEditorComponent extends Component {
 
   @action
   invokeSendValue() {
-    this.args.sendValue?.(this.editor.getValue());
+    this.args.sendValue?.(this.editor.getValue(), this.editor);
   }
 
   willDestroy() {

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

@@ -3,6 +3,7 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { Magnify, Table, /* MapOutline, */ CodeJson } from 'ember-mdi';
 import { inject as service } from '@ember/service';
+import ActionInvoker from 'meiliadmin/lib/action-invoker';
 
 export default class AdminIndexesItemDocumentsIndexController extends Controller {
   @service router;
@@ -16,6 +17,7 @@ export default class AdminIndexesItemDocumentsIndexController extends Controller
   @tracked hiddenFields = [];
   @tracked dataView = 'table';
   @tracked isAdvancedSearch = false;
+  @tracked errors;
 
   queryParams = ['q', 'limit', 'offset', 'sort', 'attributesToRetrieve'];
 
@@ -27,7 +29,13 @@ export default class AdminIndexesItemDocumentsIndexController extends Controller
     json: CodeJson,
   };
 
-  get search() {
+  constructor() {
+    super(...arguments);
+
+    this.invoker = new ActionInvoker();
+  }
+
+  get searchObject() {
     return this.queryParams.reduce((properties, item) => {
       properties[item] = this[item];
 
@@ -119,4 +127,13 @@ export default class AdminIndexesItemDocumentsIndexController extends Controller
   sortAttibutes(items) {
     this.attributesToRetrieve = items.filter(this.isItemChecked);
   }
+
+  @action
+  search(value) {
+    const obj = JSON.parse(value);
+
+    this.queryParams.forEach((item) => {
+      this[item] = obj[item];
+    });
+  }
 }

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

@@ -22,16 +22,23 @@
 {{#if this.isAdvancedSearch}}
   <Form::Element @errors={{this.errors}}>
     <MonacoEditor
-      @value={{json-stringify this.search}}
+      @value={{json-stringify this.searchObject}}
       @language='json'
       @uri={{@model.searchSchema.uri}}
       @schema={{@model.searchSchema}}
-      {{!-- @sendValue={{this.save}} --}}
-      {{!-- @invoker={{this.invoker}} --}}
+      @sendValue={{this.search}}
+      @invoker={{this.invoker}}
       @onDidValidation={{set this 'errors'}}
-      class='mb-4'
     />
   </Form::Element>
+
+  <Button
+    @text='Search'
+    @style='primary'
+    @onClick={{fn this.invoker.invoke 'invokeSendValue'}}
+    class='mb-4'
+    disabled={{or this.isValidating this.errors.length}}
+  />
 {{else}}
   <div class='sm:flex sm:flex-nowrap'>
     {{! q }}

app/utils/json-schema.js

@@ -17,3 +17,5 @@ class Property {
 export const type = (type) => {
   return new Property(type);
 };
+
+export default { type };