Show entry type icons on the index page

brandonkelly · brandonkelly · commit e40778a18a65 · 2024-02-01T06:12:30.000-08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Added support for inline field creation and editing within field layout designers. ([#14260](https://github.com/craftcms/cms/pull/14260))
 - Layout elements within field layout designers now have action menus. ([#14260](https://github.com/craftcms/cms/pull/14260))
 - Improved the performance of control panel screens that include field layout designers.
+- The Entry Types index page now shows entry type icons.
 - Added `craft\base\FieldLayoutComponent::hasSettings()`.
 - Added `craft\helpers\Cp::layoutElementSelectorHtml()`.
 - `craft\helpers\App::parseEnv()` now returns `null` when a missing environment variable name is passed to it. ([#14253](https://github.com/craftcms/cms/pull/14253))
diff --git a/packages/craftcms-vue/admintable/App.vue b/packages/craftcms-vue/admintable/App.vue
@@ -114,7 +114,16 @@
                 v-on:removeCheck="removeCheck"
               ></admin-table-checkbox>
             </template>
-            <template slot="title" slot-scope="props">
+            <div
+              slot="title"
+              slot-scope="props"
+              class="flex flex-nowrap gap-xs"
+            >
+              <span
+                v-if="props.rowData.icon"
+                :class="['cp-icon', props.rowData.iconColor]"
+                v-html="props.rowData.icon"
+              ></span>
               <span
                 v-if="props.rowData.status"
                 class="status"
@@ -129,7 +138,7 @@
               <span :class="{'cell-bold': !props.rowData.status}" v-else>{{
                 props.rowData.title
               }}</span>
-            </template>
+            </div>
 
             <template slot="handle" slot-scope="props">
               <admin-table-copy-text-button
diff --git a/src/services/Entries.php b/src/services/Entries.php
@@ -24,6 +24,7 @@
 use craft\events\SectionEvent;
 use craft\helpers\AdminTable;
 use craft\helpers\ArrayHelper;
+use craft\helpers\Cp;
 use craft\helpers\Db;
 use craft\helpers\Json;
 use craft\helpers\ProjectConfig as ProjectConfigHelper;
@@ -1662,6 +1663,7 @@ public function getTableData(int $page, int $limit, ?string $searchTerm): array
 
         $results = $query->all();
 
+        /** @var EntryType[] $entryTypes */
         $entryTypes = array_values(array_filter(
             array_map(fn(array $result) => $this->_entryTypes()->firstWhere('id', $result['id']), $results)
         ));
@@ -1677,6 +1679,8 @@ public function getTableData(int $page, int $limit, ?string $searchTerm): array
             $tableData[] = [
                 'id' => $entryType->id,
                 'title' => Craft::t('site', $entryType->name),
+                'icon' => $entryType->icon ? Cp::iconSvg($entryType->icon) : null,
+                'iconColor' => $entryType->color?->value,
                 'url' => $entryType->getCpEditUrl(),
                 'name' => Craft::t('site', $entryType->name),
                 'handle' => $entryType->handle,
diff --git a/src/templates/settings/entry-types/index.twig b/src/templates/settings/entry-types/index.twig
@@ -5,8 +5,8 @@
 
 {% do view.registerTranslations('app', [
     'Are you sure you want to delete “{name}” and all entries of that type?',
+    'Entry Type',
     'Handle',
-    'Name',
     'No entry types exist yet.',
     'No results.',
     'Used by',
@@ -31,7 +31,7 @@
 
 {% js %}
 var columns = [
-    { name: '__slot:title', title: Craft.t('app', 'Name') },
+    { name: '__slot:title', title: Craft.t('app', 'Entry Type') },
     { name: '__slot:handle', title: Craft.t('app', 'Handle') },
     {
         name: 'usages',
diff --git a/src/web/assets/admintable/README.md b/src/web/assets/admintable/README.md
@@ -214,7 +214,7 @@ There are a few special column type that provide extra functionality. To use any
 
 #### Title
 
-The title column allows the use of `status`, `title` and `url` in the data to create a column similar to that of the title column in element index tables.
+The title column allows the use of `icon`, `iconColor`, `status`, `title` and `url` in the data to create a column similar to that of the title column in element index tables.
 
 ```javascript
 var data = [
diff --git a/src/web/assets/admintable/dist/js/app.js b/src/web/assets/admintable/dist/js/app.js
diff --git a/src/web/assets/admintable/dist/js/app.js.map b/src/web/assets/admintable/dist/js/app.js.map
