Add field toggler for document table

app/components/form/checkbox.hbs

@@ -1,8 +1,8 @@
 <label class="flex items-center cursor-pointer" {{on "click" this.onChange}} ...attributes>
   {{#if @checked}}
-    <Icons::CheckboxOutline @size={{22}}/>
+    <Icons::CheckboxOutline @size={{22}} class="mr-1"/>
   {{else}}
-    <Icons::CheckboxBlankOutline @size={{22}}/>
+    <Icons::CheckboxBlankOutline @size={{22}} class="mr-1"/>
   {{/if}}
-  <span class="ml-1">{{@label}}</span>
+  {{@label}}
 </label>

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

@@ -9,6 +9,7 @@ export default class AdminIndexesItemDocumentsIndexController extends Controller
   @tracked page = 1;
   @tracked dataView = 'table';
   @tracked sort;
+  @tracked hiddenFields = [];
 
   queryParams = ['q', 'page', 'limit', 'sort'];
 
@@ -20,6 +21,17 @@ export default class AdminIndexesItemDocumentsIndexController extends Controller
     map: MapOutline,
   };
 
+  get attributes() {
+    if (
+      this.model.displayedAttributes.length > 1 &&
+      this.model.displayedAttributes[0] !== '*'
+    ) {
+      return this.model.displayedAttributes;
+    } else {
+      return Object.keys(this.model.stats.fieldDistribution);
+    }
+  }
+
   get fromHits() {
     return 1 + this.model.data.offset;
   }
@@ -58,6 +70,15 @@ export default class AdminIndexesItemDocumentsIndexController extends Controller
   //   return [primaryKey].concat(sortedArray);
   // }
 
+  @action
+  toggleHiddenField(name) {
+    if (this.hiddenFields.includes(name)) {
+      this.hiddenFields = this.hiddenFields.filter((item) => item !== name);
+    } else {
+      this.hiddenFields = this.hiddenFields.concat([name]);
+    }
+  }
+
   @action
   searchTextChanged(value) {
     this.q = value === '' ? null : value;

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

@@ -30,6 +30,7 @@ export default class AdminIndexesItemDocumentsIndexRoute extends Route {
       index,
       data: index.search(q, options),
       sortableAttributes: index.getSortableAttributes(),
+      displayedAttributes: index.getSetting('displayed-attributes'),
       stats: index.getStats(),
     });
   }

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

@@ -40,6 +40,32 @@
       </Listbox>
     </div>
   {{/if}}
+
+  <div class='inline relative mb-4 sm:ml-4'>
+    <Menu as |menu|>
+      <menu.Button as |menuButton|>
+        <Button @style='link' @onClick={{menuButton.toggleMenu}} class='w-auto'>
+          <Icons::DotsHorizontal />
+        </Button>
+      </menu.Button>
+      <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'
+      >
+        {{#each this.attributes as |item|}}
+          <div
+            class='flex items-center px-4 py-2 text-sm hover:bg-base-6 hover:text-base-1 cursor-pointer'
+          >
+            <Form::Checkbox
+              @checked={{not (includes item this.hiddenFields)}}
+              @label={{namelize item}}
+              @onChange={{fn this.toggleHiddenField item}}
+              class="w-full whitespace-nowrap"
+            />
+          </div>
+        {{/each}}
+      </menu.Items>
+    </Menu>
+  </div>
 </div>
 
 {{!-- <div class='flex items-center mb-4'>
@@ -62,20 +88,22 @@
     class='w-full'
     as |Column data|
   >
-    <Column
-      @name={{capitalize @model.index.primaryKey}}
-      @prop={{@model.index.primaryKey}}
-      @sortable={{includes @model.index.primaryKey @model.sortableAttributes}}
-    >
-      <LinkTo
-        @route='admin.indexes.item.documents.document'
-        @model={{get data @model.index.primaryKey}}
+    {{#if (not (includes @model.index.primaryKey this.hiddenFields))}}
+      <Column
+        @name={{capitalize @model.index.primaryKey}}
+        @prop={{@model.index.primaryKey}}
+        @sortable={{includes @model.index.primaryKey @model.sortableAttributes}}
       >
-        {{get data @model.index.primaryKey}}
-      </LinkTo>
-    </Column>
-    {{#each-in @model.stats.fieldDistribution as |field|}}
-      {{#if (not-eq field @model.index.primaryKey)}}
+        <LinkTo
+          @route='admin.indexes.item.documents.document'
+          @model={{get data @model.index.primaryKey}}
+        >
+          {{get data @model.index.primaryKey}}
+        </LinkTo>
+      </Column>
+    {{/if}}
+    {{#each this.attributes as |field|}}
+      {{#if (and (not-eq field @model.index.primaryKey) (not (includes field this.hiddenFields)))}}
         <Column
           @name={{capitalize field}}
           @prop={{field}}
@@ -86,7 +114,7 @@
           {{/let}}
         </Column>
       {{/if}}
-    {{/each-in}}
+    {{/each}}
     <Column class='relative'>
       {{#let
         (array @model.index.uid (get data @model.index.primaryKey))