Add attributesToRetrieve

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

@@ -10,7 +10,7 @@ export default class AdminIndexesItemDocumentsIndexController extends Controller
   @tracked dataView = 'table';
   @tracked sort;
   @tracked hiddenFields = [];
-  @tracked attributes;
+  @tracked attributesToRetrieve = [];
 
   queryParams = ['q', 'page', 'limit', 'sort'];
 
@@ -22,6 +22,25 @@ export default class AdminIndexesItemDocumentsIndexController extends Controller
     map: MapOutline,
   };
 
+  get attributes() {
+    if (this.attributesToRetrieve.length > 0) {
+      return this.attributesToRetrieve;
+    } else {
+      return this.originalAttributes;
+    }
+  }
+
+  get originalAttributes() {
+    if (
+      this.model.displayedAttributes.length > 0 &&
+      this.model.displayedAttributes[0] !== '*'
+    ) {
+      return this.model.displayedAttributes;
+    } else {
+      return Object.keys(this.model.stats.fieldDistribution);
+    }
+  }
+
   get fromHits() {
     return 1 + this.model.data.offset;
   }
@@ -41,11 +60,13 @@ export default class AdminIndexesItemDocumentsIndexController extends Controller
   }
 
   @action
-  toggleHiddenField(name) {
-    if (this.hiddenFields.includes(name)) {
-      this.hiddenFields = this.hiddenFields.filter((item) => item !== name);
+  toggleAttribute(name) {
+    if (this.attributes.includes(name)) {
+      this.attributesToRetrieve = this.attributes.filter(
+        (item) => item !== name
+      );
     } else {
-      this.hiddenFields = this.hiddenFields.concat([name]);
+      this.attributesToRetrieve = this.attributes.concat([name]);
     }
   }
 

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

@@ -3,21 +3,14 @@ import { hash } from 'rsvp';
 
 export default class AdminIndexesItemDocumentsIndexRoute extends Route {
   queryParams = {
-    q: {
-      refreshModel: true,
-    },
-    limit: {
-      refreshModel: true,
-    },
-    page: {
-      refreshModel: true,
-    },
-    sort: {
-      refreshModel: true,
-    },
+    q: { refreshModel: true },
+    limit: { refreshModel: true },
+    page: { refreshModel: true },
+    sort: { refreshModel: true },
+    attributesToRetrieve: { refreshModel: true },
   };
 
-  async model({ q, page, limit, sort }) {
+  async model({ q, page, limit, sort, attributesToRetrieve }) {
     const offset = limit * --page;
     const index = this.modelFor('admin.indexes.item');
     const options = { offset, limit };
@@ -26,6 +19,10 @@ export default class AdminIndexesItemDocumentsIndexRoute extends Route {
       options.sort = [sort];
     }
 
+    if (attributesToRetrieve.length > 0) {
+      options.attributesToRetrieve = attributesToRetrieve;
+    }
+
     return hash({
       index,
       data: index.search(q, options),
@@ -35,23 +32,27 @@ export default class AdminIndexesItemDocumentsIndexRoute extends Route {
     });
   }
 
-  setupController(controller, model) {
-    super.setupController(controller, model);
+  // setupController(controller, model) {
+  //   super.setupController(controller, model);
 
-    if (
-      model.displayedAttributes.length > 1 &&
-      model.displayedAttributes[0] !== '*'
-    ) {
-      controller.attributes = model.displayedAttributes;
-    } else {
-      controller.attributes = Object.keys(model.stats.fieldDistribution);
-    }
-  }
+  // if (controller.attributesToRetrieve.length === 0) {
+  //   if (
+  //     model.displayedAttributes.length > 1 &&
+  //     model.displayedAttributes[0] !== '*'
+  //   ) {
+  //     controller.attributes = model.displayedAttributes;
+  //   } else {
+  //     controller.attributes = Object.keys(model.stats.fieldDistribution);
+  //   }
+  // }
+  // }
 
   resetController(controller, isExiting) {
+    // console.log('resetController', isExiting);
     if (isExiting) {
       controller.q = null;
       controller.page = 1;
+      // controller.attributes = [];
     }
 
     window.scrollTo(0, 0);

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

@@ -18,13 +18,14 @@
 
   {{! sort }}
   {{#if this.sortValues.length}}
-    <div class='relative mb-4 sm:flex-none'>
+    <div class='relative mb-4 sm:ml-4 sm:flex-none'>
       <Listbox @value={{this.sort}} @onChange={{set this 'sort'}} as |listbox|>
         <listbox.Button
           class='inline-flex items-center px-3 py-2 border rounded cursor-pointer'
         >
-          {{!-- <Icons::Sort class='mr-1' /> --}}
-          Sort: {{if this.sort this.sort 'none'}}
+          {{! <Icons::Sort class='mr-1' /> }}
+          Sort:
+          {{if this.sort this.sort 'none'}}
         </listbox.Button>
         <listbox.Options
           class='absolute z-dropdown right-0 w-28 min-w-min mt-2 py-1 origin-top-right bg-base-7 border rounded shadow-sm outline-none'
@@ -60,7 +61,8 @@
       <listbox.Button
         class='inline-flex items-center px-3 py-2 border rounded cursor-pointer'
       >
-        Limit: {{this.limit}}
+        Limit:
+        {{this.limit}}
       </listbox.Button>
       <listbox.Options
         class='absolute z-dropdown right-0 w-28 min-w-min mt-2 py-1 origin-top-right bg-base-7 border rounded shadow-sm outline-none'
@@ -90,7 +92,7 @@
 
       <menu.Items
         class='absolute z-dropdown right-0 w-28 min-w-min mt-2 py-1 origin-top-right bg-base-7 border rounded shadow-sm outline-none'
-        {{sortable-group onChange=(set this 'attributes')}}
+        {{sortable-group onChange=(set this 'attributesToRetrieve')}}
       >
         {{#each this.attributes as |item|}}
           <div
@@ -102,13 +104,30 @@
               class='mr-2 cursor-move'
             />
             <Form::Checkbox
-              @checked={{not (includes item this.hiddenFields)}}
+              @checked={{includes item this.attributes}}
               @label={{namelize item}}
-              @onChange={{fn this.toggleHiddenField item}}
+              @onChange={{fn this.toggleAttribute item}}
               class='w-full whitespace-nowrap'
             />
           </div>
         {{/each}}
+        {{#each this.originalAttributes as |item|}}
+          {{#if (not (includes item this.attributes))}}
+            <div
+              class='flex items-center px-4 py-2 text-sm hover:bg-base-6 hover:text-base-1 cursor-pointer'
+            >
+              <Icons::DragHorizontal
+                class='mr-2 cursor-not-allowed'
+              />
+              <Form::Checkbox
+                @checked={{includes item this.attributes}}
+                @label={{namelize item}}
+                @onChange={{fn this.toggleAttribute item}}
+                class='w-full whitespace-nowrap'
+              />
+            </div>
+          {{/if}}
+        {{/each}}
       </menu.Items>
     </Menu>
   </div>