From 77761f5cf16fce0b0b05468f8b1e720e07764415 Mon Sep 17 00:00:00 2001
From: Stanislav Romanov <kaermorchen@gmail.com>
Date: Sat, 22 Oct 2022 17:56:53 +0300
Subject: [PATCH] Add search button

---
 app/components/button.js                      |  1 +
 app/components/index-setting.js               |  2 +-
 app/components/monaco-editor.js               | 38 +++++++++++++++----
 .../admin/indexes/item/documents/index.js     | 19 +++++++++-
 .../admin/indexes/item/documents/index.hbs    | 15 ++++++--
 app/utils/json-schema.js                      |  2 +
 6 files changed, 63 insertions(+), 14 deletions(-)

diff --git a/app/components/button.js b/app/components/button.js
index 26aec1c..8d5d980 100644
--- a/app/components/button.js
+++ b/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}}
         "
diff --git a/app/components/index-setting.js b/app/components/index-setting.js
index 86f7851..56a4ccb 100644
--- a/app/components/index-setting.js
+++ b/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 {
diff --git a/app/components/monaco-editor.js b/app/components/monaco-editor.js
index b241b26..a950d34 100644
--- a/app/components/monaco-editor.js
+++ b/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() {
diff --git a/app/controllers/admin/indexes/item/documents/index.js b/app/controllers/admin/indexes/item/documents/index.js
index a56f66d..dfe9b21 100644
--- a/app/controllers/admin/indexes/item/documents/index.js
+++ b/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];
+    });
+  }
 }
diff --git a/app/templates/admin/indexes/item/documents/index.hbs b/app/templates/admin/indexes/item/documents/index.hbs
index a34b3af..98438f6 100644
--- a/app/templates/admin/indexes/item/documents/index.hbs
+++ b/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 }}
diff --git a/app/utils/json-schema.js b/app/utils/json-schema.js
index a393568..cb67457 100644
--- a/app/utils/json-schema.js
+++ b/app/utils/json-schema.js
@@ -17,3 +17,5 @@ class Property {
 export const type = (type) => {
   return new Property(type);
 };
+
+export default { type };