Show site groups in listing Site columns

Render Group ▸ Site in index views so entry listings match Working In and site selectors when sites are grouped.

Author: jaygeorge

resources/js/bootstrap/fieldtypes.js

@@ -28,6 +28,7 @@ import FieldsFieldtype from '../components/fieldtypes/grid/FieldsFieldtype.vue';
 import FilesFieldtype from '../components/fieldtypes/FilesFieldtype.vue';
 import FloatFieldtype from '../components/fieldtypes/FloatFieldtype.vue';
 import Sites from '../components/globals/Sites.vue';
+import SitesIndexFieldtype from '../components/fieldtypes/SitesIndexFieldtype.vue';
 import Grid from '../components/fieldtypes/grid/Grid.vue';
 import GridIndex from '../components/fieldtypes/grid/GridIndex.vue';
 import GroupFieldtype from '../components/fieldtypes/GroupFieldtype.vue';
@@ -102,6 +103,7 @@ export default function registerFieldtypes(app) {
     app.component('files-fieldtype', FilesFieldtype);
     app.component('float-fieldtype', FloatFieldtype);
     app.component('global_set_sites-fieldtype', Sites);
+    app.component('sites-fieldtype-index', SitesIndexFieldtype);
     app.component('grid-fieldtype', Grid);
     app.component('grid-fieldtype-index', GridIndex);
     app.component('group-fieldtype', GroupFieldtype);

resources/js/components/fieldtypes/SitesIndexFieldtype.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="flex flex-wrap gap-x-3 gap-y-1">
+        <ItemLabel
+            v-for="(item, index) in items"
+            :key="index"
+            :item="item"
+            :group-label="groupLabel(item)"
+        />
+    </div>
+</template>
+
+<script>
+import IndexFieldtype from './IndexFieldtype.vue';
+import ItemLabel from '../inputs/relationship/ItemLabel.vue';
+import {
+    hasNamedSiteGroups,
+    selectedSiteGroupLabel,
+} from '@/util/site-groups.js';
+
+export default {
+    mixins: [IndexFieldtype],
+
+    components: {
+        ItemLabel,
+    },
+
+    computed: {
+        items() {
+            if (!this.value) {
+                return [];
+            }
+
+            return Array.isArray(this.value) ? this.value : [this.value];
+        },
+
+        namedGroupsExist() {
+            return hasNamedSiteGroups(Statamic.$config.get('sites') || []);
+        },
+    },
+
+    methods: {
+        groupLabel(item) {
+            return selectedSiteGroupLabel(item, this.namedGroupsExist);
+        },
+    },
+};
+</script>

src/Fieldtypes/Sites.php

@@ -7,7 +7,7 @@
 
 class Sites extends Relationship
 {
-    protected $indexComponent = 'text';
+    protected $indexComponent = 'sites';
 
     protected function authorizeItemData($id): bool
     {
@@ -64,6 +64,14 @@ public function preProcessIndex($data)
             $items = collect([$items]);
         }
 
-        return $items->map->name()->join(', ');
+        return $items
+            ->filter()
+            ->map(fn ($site) => [
+                'title' => $site->name(),
+                'group' => $site->group(),
+                'group_handle' => $site->groupHandle(),
+            ])
+            ->values()
+            ->all();
     }
 }

tests/Fieldtypes/SitesTest.php

@@ -0,0 +1,79 @@
+<?php
+
+namespace Tests\Fieldtypes;
+
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Fields\Field;
+use Statamic\Fieldtypes\Sites;
+use Tests\TestCase;
+
+class SitesTest extends TestCase
+{
+    #[Test]
+    public function it_preprocesses_index_values_with_site_groups()
+    {
+        $this->setSites([
+            'en' => [
+                'name' => 'English',
+                'locale' => 'en_US',
+                'url' => '/',
+                'group' => 'UK',
+                'group_handle' => 'uk',
+            ],
+            'fr' => [
+                'name' => 'French',
+                'locale' => 'fr_FR',
+                'url' => '/fr/',
+                'group' => 'EU',
+                'group_handle' => 'eu',
+            ],
+        ]);
+
+        $this->assertEquals([
+            [
+                'title' => 'English',
+                'group' => 'UK',
+                'group_handle' => 'uk',
+            ],
+        ], $this->fieldtype(['max_items' => 1])->preProcessIndex('en'));
+
+        $this->assertEquals([
+            [
+                'title' => 'English',
+                'group' => 'UK',
+                'group_handle' => 'uk',
+            ],
+            [
+                'title' => 'French',
+                'group' => 'EU',
+                'group_handle' => 'eu',
+            ],
+        ], $this->fieldtype()->preProcessIndex(['en', 'fr']));
+    }
+
+    #[Test]
+    public function it_preprocesses_index_values_without_site_groups()
+    {
+        $this->setSites([
+            'en' => ['name' => 'English', 'locale' => 'en_US', 'url' => '/'],
+            'fr' => ['name' => 'French', 'locale' => 'fr_FR', 'url' => '/fr/'],
+        ]);
+
+        $this->assertEquals([
+            [
+                'title' => 'English',
+                'group' => null,
+                'group_handle' => null,
+            ],
+        ], $this->fieldtype(['max_items' => 1])->preProcessIndex('en'));
+    }
+
+    private function fieldtype($config = [])
+    {
+        $field = new Field('test', array_merge([
+            'type' => 'sites',
+        ], $config));
+
+        return (new Sites)->setField($field);
+    }
+}