Refactore form for creating many documents

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

@@ -0,0 +1,45 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import ActionInvoker from 'meiliadmin/lib/action-invoker';
+
+export default class AdminIndexesItemDocumentsNewController extends Controller {
+  @service router;
+  @service toaster;
+
+  @tracked errors = [];
+  @tracked isSaving;
+
+  constructor() {
+    super(...arguments);
+
+    this.invoker = new ActionInvoker();
+  }
+
+  @action
+  async save(value) {
+    this.errors = [];
+
+    this.isSaving = true;
+
+    try {
+      const task = await this.model.index.saveDocuments(JSON.parse(value));
+
+      this.isSaving = false;
+
+      this.toaster.taskToast(task);
+    } catch (error) {
+      this.errors = [error.error || error];
+    }
+  }
+
+  @action
+  cancel() {
+    const newRouteName = this.router.currentRouteName.replace(
+      /\.(new|edit|delete)$/,
+      ''
+    );
+    this.router.transitionTo(newRouteName);
+  }
+}

app/models/index.js

@@ -2,6 +2,8 @@ import query from '../utils/query';
 import Document from './document';
 import { dasherize } from '@ember/string';
 
+const uri = 'https://docs.meilisearch.com/reference/api/document';
+
 export default class Index {
   constructor(data = {}) {
     for (const key in data) {
@@ -18,16 +20,18 @@ export default class Index {
   }
 
   get documentSetting() {
-    const uri = 'https://docs.meilisearch.com/reference/api/documents';
-
     return {
-      uri: uri,
+      uri,
       fileMatch: [uri],
-      schema: {
-        $id: uri,
-        type: 'object',
-        required: [this.primaryKey],
-      },
+      schema: this.schema,
+    };
+  }
+
+  get schema() {
+    return {
+      $id: uri,
+      type: 'object',
+      required: [this.primaryKey],
     };
   }
 
@@ -52,6 +56,17 @@ export default class Index {
     });
   }
 
+  saveDocuments(documents) {
+    if (typeof documents === 'string') {
+      documents = JSON.parse(documents);
+    }
+
+    return query(`${this.path}/documents`, {
+      method: 'POST',
+      body: JSON.stringify(documents),
+    });
+  }
+
   deleteDocument(document) {
     const document_id = document[this.primaryKey];
 

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

@@ -1,15 +1,22 @@
 import Route from '@ember/routing/route';
-import Document from '../../../../../models/document';
 import { hash } from 'rsvp';
 
 export default class AdminIndexesItemDocumentsNewRoute extends Route {
-  templateName = 'admin.indexes.item.documents.document.edit';
-  controllerName = 'admin.indexes.item.documents.document.edit';
-
   model() {
     const index = this.modelFor('admin.indexes.item');
-    const document = new Document({ [index.primaryKey]: '' });
+    const documents = [{ [index.primaryKey]: '' }];
+    const uri = 'https://docs.meilisearch.com/reference/api/documents';
+    const schema = {
+      uri,
+      fileMatch: [uri],
+      schema: {
+        $id: uri,
+        type: 'array',
+        items: index.schema,
+        minItems: 1,
+      },
+    };
 
-    return hash({ index, document });
+    return hash({ index, documents, schema });
   }
 }

app/templates/admin/indexes/item.hbs

@@ -8,7 +8,7 @@
   <Tab @route='admin.indexes.item.delete' @text='Delete' />
   <Tab
     @route='admin.indexes.item.documents.new'
-    @text='Create new document'
+    @text='Create new documents'
     class='ml-auto'
   />
 </Tabs>

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

@@ -0,0 +1,22 @@
+<div class='mb-4'>
+  <Form::Element @errors={{this.errors}}>
+    <MonacoEditor
+      @value={{json-stringify @model.documents}}
+      @uri={{@model.schema.uri}}
+      @language='json'
+      @schema={{@model.schema}}
+      @sendValue={{this.save}}
+      @invoker={{this.invoker}}
+      @onDidValidation={{set this 'errors'}}
+    />
+  </Form::Element>
+
+  <Button
+    type='submit'
+    @text='Save'
+    @style='primary'
+    @onClick={{fn this.invoker.invoke 'invokeSendValue'}}
+    @state={{if this.isSaving 'pending'}}
+  />
+  <Button @text='Cancel' @onClick={{this.cancel}} />
+</div>