Add displayed attributes

app/controllers/admin/indexes/item/settings.js

@@ -2,6 +2,7 @@ import Controller from '@ember/controller';
 import { action, get, set } from '@ember/object';
 import arrayEquals from 'meilisearch-admin/utils/array-equals';
 import { ContentSaveOutline, Check, CircleMedium } from 'ember-mdi/icons';
+import { TrackedArray } from 'tracked-built-ins';
 
 export default class AdminIndexesItemSettingsController extends Controller {
   emptyObj = {};
@@ -69,15 +70,29 @@ export default class AdminIndexesItemSettingsController extends Controller {
   }
 
   @action
-  setAttributeValue(arr, item) {
-    if (arr.length === 0 && arr[0] === '*') {
-      arr = [];
+  setAttributeValue(key, item) {
+    let arr = this.model[key];
+
+    if (arr.length === 1 && arr[0] === '*') {
+      arr = Array.from(this.model.index.fields);
     }
 
     if (arr.includes(item)) {
       arr = arr.filter((i) => i !== item);
     } else {
-      arr.push(item);
+      arr = arr.concat([item]);
     }
+
+    set(this.model, key, arr);
+  }
+
+  @action
+  update(key, value) {
+    this.model.index[key](value);
+  }
+
+  @action
+  reset(key) {
+    this.model.index[key]();
   }
 }

app/models/index.js

@@ -5,7 +5,9 @@ import { trackedFunction } from 'ember-resources/util/function';
 export default class Index {
   stats = trackedFunction(this, () => query(`${this.indexPath}/stats`));
   displayedAttributes = trackedFunction(this, () =>
-    query(`${this.indexPath}/settings/displayed-attributes`)
+    query(`${this.indexPath}/settings/displayed-attributes`).then(
+      (arr) => new TrackedArray(arr)
+    )
   );
 
   constructor(data) {
@@ -26,6 +28,23 @@ export default class Index {
     );
   }
 
+  getDisplayedAttributes() {
+    return query(`${this.indexPath}/settings/displayed-attributes`);
+  }
+
+  updateDisplayedAttributes(value) {
+    return query(`${this.indexPath}/settings/displayed-attributes`, {
+      method: 'POST',
+      body: JSON.stringify(value),
+    });
+  }
+
+  resetDisplayedAttributes() {
+    return query(`${this.indexPath}/settings/displayed-attributes`, {
+      method: 'DELETE',
+    });
+  }
+
   getSortableAttributes() {
     return query(`${this.indexPath}/settings/sortable-attributes`).then(
       (result) => new TrackedArray(result)

app/routes/admin/indexes/item/settings.js

@@ -37,26 +37,12 @@ class IndexAttribute {
 export default class AdminIndexesItemSettingsRoute extends Route {
   async model() {
     const index = this.modelFor('admin.indexes.item');
-    // const settings = index.getSettings();
     const stats = index.stats;
 
-    return hash({ index, stats });
-    // .then((result) => {
-    //   // Some settings properties may to be ["*"] (all attributes)
-    //   // this convert it to [attr1, attr2, ...]
-    //   ['displayedAttributes', 'searchableAttributes'].forEach((prop) => {
-    //     if (
-    //       result.settings[prop].length === 1 &&
-    //       result.settings[prop][0] === '*'
-    //     ) {
-    //       result.settings[prop] = Object.keys(result.stats.fieldDistribution);
-    //     }
-    //   });
-    //   result.attributes = Object.keys(result.stats.fieldDistribution).map(
-    //     (name) => new IndexAttribute(name, result.settings)
-    //   );
-
-    //   return result;
-    // });
+    return hash({
+      index,
+      stats,
+      displayedAttributes: index.getDisplayedAttributes(),
+    });
   }
 }

app/templates/admin/indexes/item/settings.hbs

@@ -2,12 +2,12 @@
 <label class="text-xl mb-2 block">
   Displayed attributes
 </label>
-<div class="mb-4">
+<div class="mb-2">
   {{#each @model.index.fields as |item|}}
     {{#let
       (or
-        @model.index.allAttributesAreDisplayed
-        (includes item @model.index.displayedAttributes.value)
+        (eq @model.displayedAttributes.firstObject '*')
+        (includes item @model.displayedAttributes)
       ) as |checked|
     }}
       <Badge
@@ -15,16 +15,22 @@
         @icon={{if checked this.Check this.CircleMedium}}
         @style={{if checked 'success'}}
         class="cursor-pointer"
-        {{on
-          'click'
-          (fn
-            this.setAttributeValue @model.index.displayedAttributes.value item
-          )
-        }}
+        {{on 'click' (fn this.setAttributeValue 'displayedAttributes' item)}}
       />
     {{/let}}
   {{/each}}
 </div>
+<div class="mb-4">
+  <Button
+    @text="Update"
+    @onClick={{fn
+      this.update
+      'updateDisplayedAttributes'
+      @model.displayedAttributes
+    }}
+  />
+  <Button @text="Reset" @onClick={{fn this.reset 'resetDisplayedAttributes'}} />
+</div>
 {{!--
 <RoyalTable @data={{@model.attributes}} as |Row data|>
   <Row as |Column|>