add support for sections index page table sorting

CHANGELOG-WIP.md

@@ -18,6 +18,7 @@
 ### Administration
 - All relation fields can now be selected as field layouts’ thumbnail providers. ([#15651](https://github.com/craftcms/cms/discussions/15651))
 - Added the “Markdown” field layout UI element type. ([#15674](https://github.com/craftcms/cms/pull/15674), [#15664](https://github.com/craftcms/cms/discussions/15664))
+- The Sections index table can now be sorted by Name, Handle, and Type. ([#15936](https://github.com/craftcms/cms/pull/15936))
 - Sections are no longer required to have unique names. ([#9829](https://github.com/craftcms/cms/discussions/9829))
 - Customize Sources modals now display native sources’ handles, when known.
 - Removed the “Show the Title field” entry type setting. The “Title” element can now be removed from the field layout instead. ([#15942](https://github.com/craftcms/cms/pull/15942))

src/controllers/SectionsController.php

@@ -213,4 +213,37 @@ public function actionDeleteSection(): Response
 
         return $this->asSuccess();
     }
+
+    /**
+     * Returns data formatted for AdminTable vue component
+     *
+     * @return Response
+     * @throws BadRequestHttpException
+     */
+    public function actionTableData(): Response
+    {
+        $this->requireAcceptsJson();
+
+        $entriesService = Craft::$app->getEntries();
+
+        $page = (int)$this->request->getParam('page', 1);
+        $limit = (int)$this->request->getParam('per_page', 100);
+        $searchTerm = $this->request->getParam('search');
+        $orderBy = match ($this->request->getParam('sort.0.field')) {
+            '__slot:handle' => 'handle',
+            'type' => 'type',
+            default => 'name',
+        };
+        $sortDir = match ($this->request->getParam('sort.0.direction')) {
+            'desc' => SORT_DESC,
+            default => SORT_ASC,
+        };
+
+        [$pagination, $tableData] = $entriesService->getSectionTableData($page, $limit, $searchTerm, $orderBy, $sortDir);
+
+        return $this->asSuccess(data: [
+            'pagination' => $pagination,
+            'data' => $tableData,
+        ]);
+    }
 }

src/models/Section.php

@@ -82,7 +82,7 @@ public static function get(int|string $id): ?static
     public ?string $handle = null;
 
     /**
-     * @var string|null Type
+     * @var self::TYPE_*|null Type
      */
     public ?string $type = null;
 

src/services/Entries.php

@@ -1203,6 +1203,100 @@ public function pruneDeletedField(): void
     {
     }
 
+    /**
+     * Returns data for the Sections index page in the control panel.
+     *
+     * @param int $page
+     * @param int $limit
+     * @param string|null $searchTerm
+     * @param string $orderBy
+     * @param int $sortDir
+     * @return array
+     * @since 5.5.0
+     */
+    public function getSectionTableData(
+        int $page,
+        int $limit,
+        ?string $searchTerm,
+        string $orderBy = 'name',
+        int $sortDir = SORT_ASC,
+    ): array {
+        [$results, $total] = $this->prepTableData($this->_createSectionQuery(), $page, $limit, $searchTerm, $orderBy, $sortDir);
+
+        /** @var Section[] $sections */
+        $sections = array_values(array_filter(
+            array_map(fn(array $result) => $this->_sections()->firstWhere('id', $result['id']), $results)
+        ));
+
+        $tableData = [];
+
+        foreach ($sections as $section) {
+            $label = $section->getUiLabel();
+            $tableData[] = [
+                'id' => $section->id,
+                'title' => $label,
+                'name' => $label,
+                'url' => $section->getCpEditUrl(),
+                'handle' => $section->handle,
+                'type' => match ($section->type) {
+                    Section::TYPE_SINGLE => Craft::t('app', 'Single'),
+                    Section::TYPE_CHANNEL => Craft::t('app', 'Channel'),
+                    Section::TYPE_STRUCTURE => Craft::t('app', 'Structure'),
+                    null => null,
+                },
+            ];
+        }
+
+        $pagination = AdminTable::paginationLinks($page, $total, $limit);
+
+        return [$pagination, $tableData];
+    }
+
+    /**
+     * Returns query results needed for the VueAdminTable accounting for the pagination, search terms and sorting options.
+     *
+     * @param Query $query
+     * @param int $page
+     * @param int $limit
+     * @param string|null $searchTerm
+     * @param string $orderBy
+     * @param int $sortDir
+     * @return array
+     * @since 5.5.0
+     */
+    private function prepTableData(
+        Query $query,
+        int $page,
+        int $limit,
+        ?string $searchTerm,
+        string $orderBy = 'name',
+        int $sortDir = SORT_ASC,
+    ): array {
+        $searchTerm = $searchTerm ? trim($searchTerm) : $searchTerm;
+
+        $offset = ($page - 1) * $limit;
+        $query = $query
+            ->orderBy([$orderBy => $sortDir]);
+
+        if ($orderBy === 'name') {
+            $query->addOrderBy(['name' => $sortDir]);
+        }
+
+        if ($searchTerm !== null && $searchTerm !== '') {
+            $searchParams = $this->_getSearchParams($searchTerm);
+            if (!empty($searchParams)) {
+                $query->where(['or', ...$searchParams]);
+            }
+        }
+
+        $total = $query->count();
+
+        $query->limit($limit);
+        $query->offset($offset);
+
+        return [$query->all(), $total];
+    }
+
     // Entry Types
     // -------------------------------------------------------------------------
 
@@ -1722,29 +1816,7 @@ public function getTableData(
         string $orderBy = 'name',
         int $sortDir = SORT_ASC,
     ): array {
-        $searchTerm = $searchTerm ? trim($searchTerm) : $searchTerm;
-
-        $offset = ($page - 1) * $limit;
-        $query = $this->_createEntryTypeQuery()
-            ->orderBy([$orderBy => $sortDir]);
-
-        if ($orderBy === 'name') {
-            $query->addOrderBy(['name' => $sortDir]);
-        }
-
-        if ($searchTerm !== null && $searchTerm !== '') {
-            $searchParams = $this->_getSearchParams($searchTerm);
-            if (!empty($searchParams)) {
-                $query->where(['or', ...$searchParams]);
-            }
-        }
-
-        $total = $query->count();
-
-        $query->limit($limit);
-        $query->offset($offset);
-
-        $results = $query->all();
+        [$results, $total] = $this->prepTableData($this->_createEntryTypeQuery(), $page, $limit, $searchTerm, $orderBy, $sortDir);
 
         /** @var EntryType[] $entryTypes */
         $entryTypes = array_values(array_filter(

src/templates/settings/sections/_index.twig

@@ -28,33 +28,21 @@
     <div id="sections-vue-admin-table"></div>
 {% endblock %}
 
-{% set tableData = [] %}
-{% for section in sections %}
-    {% set isSingle = section.type == 'single' and section.getEntryTypes()|length == 1 %}
-
-    {% set tableData = tableData|merge([{
-        id: section.id,
-        name: section.name|t('site')|e,
-        title: section.name|t('site'),
-        url: url('settings/sections/' ~ section.id),
-        handle: section.handle,
-        type: section.type|title|t('app')|e,
-    }]) %}
-{% endfor %}
-
 {% js %}
-    var columns = [
-        { name: '__slot:title', title: Craft.t('app', 'Name') },
-        { name: '__slot:handle', title: Craft.t('app', 'Handle') },
-        { name: 'type', title: Craft.t('app', 'Type') },
-    ];
-
-    new Craft.VueAdminTable({
-        columns: columns,
-        container: '#sections-vue-admin-table',
-        deleteAction: 'sections/delete-section',
-        deleteConfirmationMessage: Craft.t('app', "Are you sure you want to delete “{name}” and all its entries?"),
-        emptyMessage: Craft.t('app', 'No sections exist yet.'),
-        tableData: {{ tableData|json_encode|raw }}
-    });
+    (() => {
+        const columns = [
+            { name: '__slot:title', title: Craft.t('app', 'Name'), sortField: true },
+            { name: '__slot:handle', title: Craft.t('app', 'Handle'), sortField: true },
+            { name: 'type', title: Craft.t('app', 'Type'), sortField: true },
+        ];
+
+        new Craft.VueAdminTable({
+            columns,
+            container: '#sections-vue-admin-table',
+            deleteAction: 'sections/delete-section',
+            deleteConfirmationMessage: Craft.t('app', "Are you sure you want to delete “{name}” and all its entries?"),
+            emptyMessage: Craft.t('app', 'No sections exist yet.'),
+            tableDataEndpoint: 'sections/table-data',
+        });
+    })();
 {% endjs %}