From ab98bbdb3f23ab4d60299c7f054ec124ecfd545a Mon Sep 17 00:00:00 2001
From: Stanislav Romanov <kaermorchen@gmail.com>
Date: Tue, 18 Oct 2022 09:10:56 +0300
Subject: [PATCH] Move table settings to table header

---
 app/components/form/table-settings.hbs        | 29 +++---
 app/components/simple-table/column.hbs        |  4 +-
 .../admin/indexes/item/documents/index.hbs    | 93 ++++++++++---------
 3 files changed, 61 insertions(+), 65 deletions(-)

diff --git a/app/components/form/table-settings.hbs b/app/components/form/table-settings.hbs
index 14a751d..52a6e61 100644
--- a/app/components/form/table-settings.hbs
+++ b/app/components/form/table-settings.hbs
@@ -1,15 +1,7 @@
-<Form::Element
-  @label={{@label}}
-  @for={{this.id}}
-  @required={{@required}}
-  @helper={{@helper}}
-  ...attributes
->
+<div class='relative'>
   <Menu as |menu|>
-    <menu.Button as |menuButton|>
-      <Button @onClick={{menuButton.toggleMenu}} class='w-auto'>
-        <Icons::CogOutline />
-      </Button>
+    <menu.Button>
+      <Icons::CogOutline class='mt-1' />
     </menu.Button>
 
     <menu.Items
@@ -17,18 +9,21 @@
       {{sortable-group onChange=@onChangeSort}}
     >
       {{#each @items as |item|}}
-        {{!-- @ts-ignore --}}
+        {{! @ts-ignore }}
         <div
           class='flex items-center px-4 py-2 text-sm hover:bg-base-6 hover:text-base-1 cursor-pointer'
           {{sortable-item model=item}}
         >
-          <Icons::DragVertical {{sortable-handle}} class='mr-2 fill-base-3 cursor-move' />
-          <span class="whitespace-nowrap mr-3">
+          <Icons::DragVertical
+            {{sortable-handle}}
+            class='mr-2 fill-base-3 cursor-move'
+          />
+          <span class='whitespace-nowrap mr-3'>
             {{namelize item}}
           </span>
           {{! @ts-ignore }}
-          {{!-- template-lint-disable no-args-paths --}}
-          {{!-- argument action doesn't work like helper with @ --}}
+          {{! template-lint-disable no-args-paths }}
+          {{! argument action doesn't work like helper with @ }}
           <Form::Checkbox
             @checked={{this.args.isItemChecked item}}
             @onChange={{fn @onToggleItem item}}
@@ -41,4 +36,4 @@
       {{/each}}
     </menu.Items>
   </Menu>
-</Form::Element>
+</div>
diff --git a/app/components/simple-table/column.hbs b/app/components/simple-table/column.hbs
index 22a0b24..a257864 100644
--- a/app/components/simple-table/column.hbs
+++ b/app/components/simple-table/column.hbs
@@ -9,8 +9,8 @@
     {{on 'click' this.handleSort}}
   >
     <span class='inline-flex items-center'>
-      {{#if (has-block 'name')}}
-        {{yield to='name'}}
+      {{#if (has-block 'head')}}
+        {{yield to='head'}}
       {{else if @headComponent}}
         <@headComponent @data={{@data}} />
       {{else if @name}}
diff --git a/app/templates/admin/indexes/item/documents/index.hbs b/app/templates/admin/indexes/item/documents/index.hbs
index dca65b7..d4a1e14 100644
--- a/app/templates/admin/indexes/item/documents/index.hbs
+++ b/app/templates/admin/indexes/item/documents/index.hbs
@@ -36,15 +36,6 @@
     @onChange={{set this 'limit'}}
     class='sm:ml-4 sm:flex-none'
   />
-
-  {{! table settings }}
-  <Form::TableSettings
-    @onChangeSort={{this.sortAttibutes}}
-    @items={{this.allAttributes}}
-    @isItemChecked={{this.isItemChecked}}
-    @onToggleItem={{this.toggleAttribute}}
-    class='sm:ml-4 sm:flex-none'
-  />
 </div>
 
 {{!-- <div class='flex items-center mb-4'>
@@ -107,44 +98,54 @@
           {{/if}}
         {{/each}}
         <Column class='relative'>
-          {{#let
-            'flex items-center px-4 py-2 text-inherit no-underline text-sm hover:bg-base-6 hover:text-base-1'
-            as |linkClasses|
-          }}
-            <Menu as |menu|>
-              <menu.Button class='inline-flex items-center'>
-                <Icons::DotsHorizontal />
-              </menu.Button>
-              <menu.Items
-                class='absolute z-dropdown right-0 w-28 mt-2 py-1 origin-top-right bg-base-7 border rounded shadow-sm outline-none'
-              >
-                <LinkTo
-                  @route='admin.indexes.item.documents.document.index'
-                  @models={{models}}
-                  class={{linkClasses}}
+          <:head>
+            <Form::TableSettings
+              @onChangeSort={{this.sortAttibutes}}
+              @items={{this.allAttributes}}
+              @isItemChecked={{this.isItemChecked}}
+              @onToggleItem={{this.toggleAttribute}}
+            />
+          </:head>
+          <:default>
+            {{#let
+              'flex items-center px-4 py-2 text-inherit no-underline text-sm hover:bg-base-6 hover:text-base-1'
+              as |linkClasses|
+            }}
+              <Menu as |menu|>
+                <menu.Button class='inline-flex items-center'>
+                  <Icons::DotsHorizontal />
+                </menu.Button>
+                <menu.Items
+                  class='absolute z-dropdown right-0 w-28 mt-2 py-1 origin-top-right bg-base-7 border rounded shadow-sm outline-none'
                 >
-                  <Icons::FileDocumentOutline @size={{18}} class='mr-1' />
-                  View
-                </LinkTo>
-                <LinkTo
-                  @route='admin.indexes.item.documents.document.edit'
-                  @models={{models}}
-                  class={{linkClasses}}
-                >
-                  <Icons::PencilOutline @size={{18}} class='mr-1' />
-                  Edit
-                </LinkTo>
-                <LinkTo
-                  @route='admin.indexes.item.documents.document.delete'
-                  @models={{models}}
-                  class={{linkClasses}}
-                >
-                  <Icons::TrashCanOutline @size={{18}} class='mr-1' />
-                  Delete
-                </LinkTo>
-              </menu.Items>
-            </Menu>
-          {{/let}}
+                  <LinkTo
+                    @route='admin.indexes.item.documents.document.index'
+                    @models={{models}}
+                    class={{linkClasses}}
+                  >
+                    <Icons::FileDocumentOutline @size={{18}} class='mr-1' />
+                    View
+                  </LinkTo>
+                  <LinkTo
+                    @route='admin.indexes.item.documents.document.edit'
+                    @models={{models}}
+                    class={{linkClasses}}
+                  >
+                    <Icons::PencilOutline @size={{18}} class='mr-1' />
+                    Edit
+                  </LinkTo>
+                  <LinkTo
+                    @route='admin.indexes.item.documents.document.delete'
+                    @models={{models}}
+                    class={{linkClasses}}
+                  >
+                    <Icons::TrashCanOutline @size={{18}} class='mr-1' />
+                    Delete
+                  </LinkTo>
+                </menu.Items>
+              </Menu>
+            {{/let}}
+          </:default>
         </Column>
       {{/let}}
     </SimpleTable>