Fix entity list highlighted instance focus & scroll

resources/js/entity-list/components/EntityList.vue

@@ -323,15 +323,32 @@
             )
     );
 
-    watch([sortableTableBody, () => props.highlightedInstanceId], () => {
-        if(sortableTableBody.value && props.highlightedInstanceId) {
-            const link = el.value?.querySelector(`[data-instance-row="${props.highlightedInstanceId}"] a`) as HTMLAnchorElement;
-            if(link) {
-                // link.scrollIntoView({ block: "center" });
-                link.focus();
-            }
+    function isHighlighted(item: EntityListInstance) {
+        return props.highlightedInstanceId != null
+            && props.highlightedInstanceId == props.entityList.instanceId(item);
+    }
+
+    async function focusHighlightedInstance() {
+        if(!sortableTableBody.value || props.highlightedInstanceId == null) {
+            return;
         }
-    });
+        const index = props.entityList.data.findIndex(item => isHighlighted(item));
+        if(index < 0 || !props.entityList.data[index]._meta.url) {
+            return;
+        }
+        if(index >= renderedCount.value) {
+            renderedCount.value = Math.ceil((index + 1) / renderedChunk) * renderedChunk;
+        }
+        // wait for the row to be rendered and for Inertia to reset the scroll after page swap
+        await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+        const link = el.value?.querySelector('[data-instance-row][data-highlighted] [data-row-link]') as HTMLElement;
+        if(link) {
+            link.closest('tr').scrollIntoView({ block: 'center' });
+            link.focus({ preventScroll: true });
+        }
+    }
+
+    watch([sortableTableBody, () => props.highlightedInstanceId], focusHighlightedInstance);
 </script>
 
 <template>
@@ -720,7 +737,7 @@
                                             <TableRow
                                                 class="group/row relative hover:bg-transparent has-[[data-row-action]:hover]:bg-muted/50 has-[[aria-expanded=true]]:bg-muted/50 group-data-reordering:cursor-move group-data-[reordering]:hover:bg-muted/50 group-[:has(.sortable-chosen)]:bg-background [&.sortable-chosen]:transition-none lg:*:first:pl-6 lg:*:last:pr-6 print:*:first:pl-0 print:*:last:pr-0"
                                                 :data-instance-row="entityList.instanceId(item)"
-                                                :data-highlighted="props.highlightedInstanceId && props.highlightedInstanceId == entityList.instanceId(item) ? true : null"
+                                                :data-highlighted="isHighlighted(item) ? true : null"
                                             >
                                                 <template v-if="selecting && selectedItems">
                                                     <TableCell>
@@ -804,6 +821,7 @@
                                                         <template v-if="fieldIndex === 0 && item._meta.url && !selecting && !reordering">
                                                             <Link class="absolute inset-0 ring-ring ring-inset focus-visible:outline-none focus-visible:ring-2 focus:group-data-highlighted/row:ring-2"
                                                                 data-row-action
+                                                                data-row-link
                                                                 :href="item._meta.url"
                                                             ></Link>
                                                         </template>

src/Http/Controllers/EntityListController.php

@@ -89,22 +89,23 @@ private function getEntitiesDataForEntityList(string $entityKey, SharpEntityList
         }
 
         return collect($entities)
-            ->map(function (EntityListEntity $listEntity, $key) {
+            ->map(function (EntityListEntity $listEntity, $key) use ($entityKey) {
                 $entity = $listEntity->getEntity();
-                $entityKey = $this->entityManager->entityKeyFor($entity);
+                $itemEntityKey = $this->entityManager->entityKeyFor($entity);
 
-                if (! $this->authorizationManager->isAllowed('create', $entityKey)) {
+                if (! $this->authorizationManager->isAllowed('create', $itemEntityKey)) {
                     return null;
                 }
 
                 return [
                     'key' => $key,
-                    'entityKey' => $entityKey,
+                    'entityKey' => $itemEntityKey,
                     'label' => $listEntity->getLabel() ?: $entity->getLabelOrFail(),
                     'icon' => app(IconManager::class)->iconToArray($listEntity->getIcon()),
                     'formCreateUrl' => route('code16.sharp.form.create', [
                         'parentUri' => sharp()->context()->breadcrumb()->getCurrentPath(),
-                        'entityKey' => $entityKey,
+                        'entityKey' => $itemEntityKey,
+                        'entity_list_key' => $entityKey,
                     ]),
                 ];
             })

src/Http/Controllers/FormController.php

@@ -56,6 +56,7 @@ public function create(string $globalFilter, string $parentUri, EntityKey $entit
                 'parentUri' => $parentUri,
                 'entityKey' => $entityKey,
                 'previous_page_url' => $this->getPreviousPageUrlFromReferer(),
+                'entity_list_key' => request()->query('entity_list_key'),
             ]),
         ]);
     }
@@ -118,6 +119,7 @@ public function edit(string $globalFilter, string $parentUri, EntityKey $entityK
                 'entityKey' => $entityKey,
                 'instanceId' => $instanceId,
                 'previous_page_url' => $this->getPreviousPageUrlFromReferer(),
+                'entity_list_key' => request()->query('entity_list_key'),
             ]),
         ]);
     }
@@ -193,7 +195,8 @@ public function store(string $globalFilter, string $parentUri, EntityKey $entity
     private function previousUrlWithHighlightedQuery(string $url, EntityKey $entityKey, ?string $instanceId): string
     {
         return Uri::of($url)->when($instanceId)->withQuery([
-            'highlighted_entity_key' => $entityKey->baseKey(),
+            // the key of the entity list the instance was opened from (may differ from the instance entity key with an entity map)
+            'highlighted_entity_key' => request()->query('entity_list_key') ?: $entityKey->baseKey(),
             'highlighted_instance_id' => $instanceId,
         ]);
     }

src/Http/Controllers/HandlesEntityListItems.php

@@ -79,6 +79,7 @@ private function getItemUrl(array $item, string $entityKey, SharpEntity $entity,
                     'parentUri' => $breadcrumb->getCurrentPath(),
                     'entityKey' => $itemEntityKey,
                     'instanceId' => $item[$list->getInstanceIdAttribute()],
+                    'entity_list_key' => $entityKey,
                 ]);
             }
         }

src/Http/Middleware/HandleInertiaRequests.php

@@ -49,6 +49,7 @@ public function handle(Request $request, Closure $next)
                     'popstate',
                     'highlighted_entity_key',
                     'highlighted_instance_id',
+                    'entity_list_key',
                 ])
             )
                 ->after($request->schemeAndHttpHost())

tests/Http/Api/ApiEntityListControllerTest.php

@@ -259,6 +259,7 @@ public function getListData(): array|Arrayable
                     'parentUri' => 's-list/person/s-show/person/1',
                     'entityKey' => 'person',
                     'instanceId' => 1,
+                    'entity_list_key' => 'person',
                 ]))
                 ->where('_meta.authorizations.view', true)
                 ->where('_meta.authorizations.delete', true)
@@ -269,6 +270,7 @@ public function getListData(): array|Arrayable
                     'parentUri' => 's-list/person/s-show/person/1',
                     'entityKey' => 'person',
                     'instanceId' => 2,
+                    'entity_list_key' => 'person',
                 ]))
                 ->where('_meta.authorizations.view', true)
                 ->where('_meta.authorizations.delete', true)
@@ -317,6 +319,7 @@ public function buildListConfig(): void
                 'parentUri' => 's-list/person/s-show/person/1',
                 'entityKey' => 'person-chemist',
                 'instanceId' => 1,
+                'entity_list_key' => 'person',
             ]))
             ->where('data.1._meta.url', route('code16.sharp.show.show', [
                 'parentUri' => 's-list/person/s-show/person/1',
@@ -412,21 +415,21 @@ public function buildListConfig(): void
                 ->where('entityKey', 'person-chemist')
                 ->where('label', 'Chemist')
                 ->where('icon.name', 'testicon-car')
-                ->where('formCreateUrl', route('code16.sharp.form.create', ['parentUri' => 's-list/person/s-show/person/1', 'entityKey' => 'person-chemist']))
+                ->where('formCreateUrl', route('code16.sharp.form.create', ['parentUri' => 's-list/person/s-show/person/1', 'entityKey' => 'person-chemist', 'entity_list_key' => 'person']))
                 ->etc()
             )
             ->has('entities.1', fn (AssertableJson $json) => $json
                 ->where('key', 'physicist')
                 ->where('entityKey', 'person-physicist')
                 ->where('label', 'Physicist')
-                ->where('formCreateUrl', route('code16.sharp.form.create', ['parentUri' => 's-list/person/s-show/person/1', 'entityKey' => 'person-physicist']))
+                ->where('formCreateUrl', route('code16.sharp.form.create', ['parentUri' => 's-list/person/s-show/person/1', 'entityKey' => 'person-physicist', 'entity_list_key' => 'person']))
                 ->etc()
             )
             ->has('entities.2', fn (AssertableJson $json) => $json
                 ->where('key', 'unknown')
                 ->where('entityKey', 'person-unknown')
                 ->where('label', 'Unknown')
-                ->where('formCreateUrl', route('code16.sharp.form.create', ['parentUri' => 's-list/person/s-show/person/1', 'entityKey' => 'person-unknown']))
+                ->where('formCreateUrl', route('code16.sharp.form.create', ['parentUri' => 's-list/person/s-show/person/1', 'entityKey' => 'person-unknown', 'entity_list_key' => 'person']))
                 ->etc()
             )
             ->etc()

tests/Http/EntityListControllerTest.php

@@ -115,6 +115,7 @@ public function getListData(): array|Arrayable
                     'parentUri' => 's-list/person',
                     'entityKey' => 'person',
                     'instanceId' => 1,
+                    'entity_list_key' => 'person',
                 ]))
                 ->where('_meta.authorizations.view', true)
                 ->where('_meta.authorizations.delete', true)
@@ -125,6 +126,7 @@ public function getListData(): array|Arrayable
                     'parentUri' => 's-list/person',
                     'entityKey' => 'person',
                     'instanceId' => 2,
+                    'entity_list_key' => 'person',
                 ]))
                 ->where('_meta.authorizations.view', true)
                 ->where('_meta.authorizations.delete', true)
@@ -170,6 +172,7 @@ public function buildListConfig(): void
                     'parentUri' => 's-list/person',
                     'entityKey' => 'person-chemist',
                     'instanceId' => 1,
+                    'entity_list_key' => 'person',
                 ]))
                 ->etc()
             )
@@ -454,21 +457,21 @@ public function buildListConfig(): void
                 ->where('entityKey', 'person-chemist')
                 ->where('label', 'Chemist')
                 ->where('icon.name', 'testicon-car')
-                ->where('formCreateUrl', route('code16.sharp.form.create', ['parentUri' => 's-list/person', 'entityKey' => 'person-chemist']))
+                ->where('formCreateUrl', route('code16.sharp.form.create', ['parentUri' => 's-list/person', 'entityKey' => 'person-chemist', 'entity_list_key' => 'person']))
                 ->etc()
             )
             ->has('entityList.entities.1', fn (Assert $config) => $config
                 ->where('key', 'physicist')
                 ->where('entityKey', 'person-physicist')
                 ->where('label', 'Physicist')
-                ->where('formCreateUrl', route('code16.sharp.form.create', ['parentUri' => 's-list/person', 'entityKey' => 'person-physicist']))
+                ->where('formCreateUrl', route('code16.sharp.form.create', ['parentUri' => 's-list/person', 'entityKey' => 'person-physicist', 'entity_list_key' => 'person']))
                 ->etc()
             )
             ->has('entityList.entities.2', fn (Assert $config) => $config
                 ->where('key', 'unknown')
                 ->where('entityKey', 'person-unknown')
                 ->where('label', 'Unknown')
-                ->where('formCreateUrl', route('code16.sharp.form.create', ['parentUri' => 's-list/person', 'entityKey' => 'person-unknown']))
+                ->where('formCreateUrl', route('code16.sharp.form.create', ['parentUri' => 's-list/person', 'entityKey' => 'person-unknown', 'entity_list_key' => 'person']))
                 ->etc()
             )
         );

tests/Http/Form/FormControllerTest.php

@@ -13,6 +13,7 @@
 use Code16\Sharp\Form\Layout\FormLayout;
 use Code16\Sharp\Form\Layout\FormLayoutColumn;
 use Code16\Sharp\Form\SharpForm;
+use Code16\Sharp\Tests\Fixtures\Entities\PersonChemistEntity;
 use Code16\Sharp\Tests\Fixtures\Entities\PersonEntity;
 use Code16\Sharp\Tests\Fixtures\Entities\SinglePersonEntity;
 use Code16\Sharp\Tests\Fixtures\Sharp\PersonForm;
@@ -171,6 +172,32 @@ public function buildFormLayout(FormLayout $formLayout): void
         ->assertRedirectContains('highlighted_instance_id=1');
 });
 
+it('highlights the instance with the entity list key it was opened from', function () {
+    sharp()->config()->declareEntity(PersonChemistEntity::class);
+
+    $this->get('/sharp/root/s-list/person/s-show/person/1/s-form/person-chemist/2?entity_list_key=person')
+        ->assertOk()
+        ->assertInertia(fn (Assert $page) => $page
+            ->where('endpointUrl', fn ($url) => str_contains($url, 'entity_list_key=person'))
+            ->where('cancelUrl', fn ($url) => str_contains($url, 'highlighted_entity_key=person&')
+                && str_contains($url, 'highlighted_instance_id=2')
+            )
+        );
+
+    $this
+        ->post('/sharp/root/s-list/person/s-show/person/1/s-form/person-chemist/2?entity_list_key=person', [
+            'name' => 'Stephen Hawking',
+        ])
+        ->assertRedirectContains('/sharp/root/s-list/person/s-show/person/1')
+        ->assertRedirectContains('highlighted_entity_key=person&');
+
+    $this
+        ->post('/sharp/root/s-list/person/s-show/person/1/s-form/person-chemist?entity_list_key=person', [
+            'name' => 'Stephen Hawking',
+        ])
+        ->assertRedirectContains('highlighted_entity_key=person&');
+});
+
 it('redirects to the show after an update', function () {
     $this->get('/sharp/root/s-list/person/s-show/person/1/s-form/person/1');