[6.x] Multisite - entry grouping

resources/css/components/fieldtypes/grid.css

@@ -101,6 +101,58 @@
         }
     }
 
+    /* GRID FIELDTYPE / SECTIONED MODIFIER
+    =================================================== */
+    /* Grid whose column headers double as the enclosing publish section's header.
+      - e.g. A site group in `cp/sites`
+      - the table and its headers go transparent so the headers sit on the section background
+      - the rows take over the card background, border and corners
+      - headers stay real table headers, so they keep aligning with their columns
+    */
+    .grid-table--sectioned {
+        @apply rounded-none border-0 bg-transparent shadow-none dark:bg-transparent;
+
+        thead th {
+            @apply static border-b-0 bg-transparent dark:bg-transparent;
+            &:first-child {
+                @apply rounded-ss-none;
+            }
+            &:last-child {
+                @apply rounded-se-none;
+            }
+        }
+
+        > tbody > tr {
+            > td {
+                @apply bg-white dark:bg-gray-900;
+
+                &:first-child {
+                    @apply border-s dark:border-s-gray-700;
+                }
+
+                &:last-child {
+                    @apply border-e dark:border-e-gray-700;
+                }
+            }
+
+            &:first-child > td {
+                @apply border-t dark:border-t-gray-700;
+
+                &:first-child {
+                    @apply rounded-ss-[7px];
+                }
+
+                &:last-child {
+                    @apply rounded-se-[7px];
+                }
+            }
+
+            &:last-child > td {
+                @apply border-b dark:border-b-gray-700;
+            }
+        }
+    }
+
     .grid-item-header {
         @apply flex cursor-move items-center justify-between border-b bg-gray-200 px-4 py-2 text-sm outline-hidden;
     }

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/SiteSelector.vue

@@ -1,23 +1,69 @@
 <script setup>
-import { Select } from '@/components/ui';
+import { computed } from 'vue';
+import { Icon, Select, Subheading } from '@/components/ui';
+import {
+    flatOptionsFromSiteGroups,
+    groupItemsBySiteGroup,
+    hasNamedSiteGroups,
+    selectedSiteGroupLabel,
+} from '@/util/site-groups.js';
 
-defineProps({
+const props = defineProps({
     sites: { type: Array, required: true },
     modelValue: { type: String, required: true },
 });
 
 defineEmits(['update:modelValue']);
+
+const hasNamedGroups = computed(() => hasNamedSiteGroups(props.sites));
+
+const options = computed(() => {
+    if (!hasNamedGroups.value) {
+        return props.sites;
+    }
+
+    return flatOptionsFromSiteGroups(groupItemsBySiteGroup(props.sites));
+});
+
+function groupLabel(option) {
+    return selectedSiteGroupLabel(option, hasNamedGroups.value);
+}
 </script>
 
 <template>
     <Select
-        class="w-36"
-        :options="sites"
+        class="w-60"
+        :options="options"
         option-label="name"
         option-value="handle"
         align="end"
         :adaptive-width="true"
+        :virtualize="!hasNamedGroups"
         :model-value="modelValue"
         @update:model-value="$emit('update:modelValue', $event)"
-    />
+    >
+        <template #selected-option="{ option }">
+            <span v-if="option" class="flex min-w-0 items-center gap-1.5">
+                <template v-if="groupLabel(option)">
+                    <span class="truncate">{{ groupLabel(option) }}</span>
+                    <Icon name="chevron-right" class="size-3.5! shrink-0 text-gray-700 dark:text-white/70" aria-hidden="true" />
+                </template>
+                <span class="truncate">{{ __(option.name) }}</span>
+            </span>
+        </template>
+
+        <template v-if="hasNamedGroups" #before-option="option">
+            <div
+                v-if="option._showGroupSeparator"
+                class="mx-2 mb-2.25 mt-0.75 border-t border-gray-200 dark:border-gray-700"
+                role="separator"
+            />
+            <Subheading
+                v-if="option._groupLabel"
+                size="sm"
+                class="px-2.5 pb-1 pt-1.5 font-semibold uppercase tracking-wide text-gray-950 text-2xs dark:text-gray-300"
+                :text="option._groupLabel"
+            />
+        </template>
+    </Select>
 </template>

resources/js/components/entries/PublishForm.vue

@@ -169,6 +169,7 @@
                                 v-if="showLocalizationSelector"
                                 :localizations
                                 :localizing="localizing !== null"
+                                :confirming-switch="!!pendingLocalization"
                                 @selected="localizationSelected"
                             />
                         </div>
@@ -234,7 +235,63 @@
         >
             <div class="publish-fields">
                 <ui-field class="form-group field-w-100" :label="__('Origin')" :instructions="__('messages.entry_origin_instructions')">
-                    <Select class="w-full" v-model="selectedOrigin" :options="originOptions" placeholder="" />
+                    <Select
+                        class="w-full"
+                        v-model="selectedOrigin"
+                        :options="originOptions"
+                        :virtualize="!originHasNamedGroups"
+                        placeholder=""
+                    >
+                        <template #selected-option="{ option }">
+                            <span class="flex min-w-0 items-center gap-1.5">
+                                <span
+                                    class="little-dot shrink-0"
+                                    :class="{
+                                        'bg-green-600': option.published,
+                                        'bg-gray-500': !option.published,
+                                        'bg-red-500': !option.exists,
+                                    }"
+                                />
+                                <template v-if="selectedOriginGroupLabel(option)">
+                                    <span class="truncate">{{ selectedOriginGroupLabel(option) }}</span>
+                                    <Icon name="chevron-right" class="size-3.5! text-gray-700 dark:text-white/70" aria-hidden="true" />
+                                </template>
+                                <span class="truncate">{{ __(option.label) }}</span>
+                                <Badge v-if="option.origin" class="ms-1.5" size="sm" color="orange" :text="__('Origin')" />
+                            </span>
+                        </template>
+
+                        <template #before-option="option">
+                            <div
+                                v-if="option._showGroupSeparator"
+                                class="mx-2 mb-2.25 mt-0.75 border-t border-gray-200 dark:border-gray-700"
+                                role="separator"
+                            />
+                            <Subheading
+                                v-if="option._groupLabel"
+                                size="sm"
+                                class="px-2.5 pb-1 pt-1.5 font-semibold uppercase tracking-wide text-gray-950 text-2xs dark:text-gray-300"
+                                :text="option._groupLabel"
+                            />
+                        </template>
+
+                        <template #option="option">
+                            <div class="flex min-w-0 items-center gap-x-2">
+                                <div class="flex min-w-0 items-center">
+                                    <span
+                                        class="little-dot me-2 shrink-0"
+                                        :class="{
+                                            'bg-green-600': option.published,
+                                            'bg-gray-500': !option.published,
+                                            'bg-red-500': !option.exists,
+                                        }"
+                                    />
+                                    <span class="truncate">{{ __(option.label) }}</span>
+                                </div>
+                                <Badge v-if="option.origin" class="ms-2" size="sm" color="orange" :text="__('Origin')" />
+                            </div>
+                        </template>
+                    </Select>
                 </ui-field>
             </div>
         </confirmation-modal>
@@ -261,6 +318,7 @@ import HasActions from '../publish/HasActions';
 import striptags from 'striptags';
 import clone from '@/util/clone.js';
 import {
+    Badge,
     Button,
     Card,
     CardPanel,
@@ -285,6 +343,13 @@ import {
 	Stack,
 } from '@ui';
 import resetValuesFromResponse from '@/util/resetValuesFromResponse.js';
+import {
+    flatOptionsFromSiteGroups,
+    groupItemsBySiteGroup,
+    hasNamedSiteGroups,
+    preferredOriginHandle,
+    selectedSiteGroupLabel,
+} from '@/util/site-groups.js';
 import { computed, ref } from 'vue';
 import { Pipeline, Request, BeforeSaveHooks, AfterSaveHooks, PipelineStopped } from '@ui/Publish/SavePipeline.js';
 import { router } from '@inertiajs/vue3';
@@ -293,6 +358,7 @@ export default {
     mixins: [HasPreferences, HasActions],
 
     components: {
+        Badge,
         Button,
         Card,
         CardPanel,
@@ -513,13 +579,32 @@ export default {
             return this.getPreference('after_save') ?? 'listing';
         },
 
+        defaultOriginHandle() {
+            return preferredOriginHandle(
+                this.localizations,
+                this.localizing || null,
+                this.originBehavior,
+            );
+        },
+
         originOptions() {
-            return this.localizations
+            const existing = this.localizations
                 .filter((localization) => localization.exists)
                 .map((localization) => ({
                     value: localization.handle,
                     label: localization.name,
+                    group: localization.group,
+                    group_handle: localization.group_handle,
+                    published: localization.published,
+                    exists: localization.exists,
+                    origin: localization.handle === this.defaultOriginHandle,
                 }));
+
+            return flatOptionsFromSiteGroups(groupItemsBySiteGroup(existing));
+        },
+
+        originHasNamedGroups() {
+            return hasNamedSiteGroups(this.originOptions);
         },
 
         direction() {
@@ -654,6 +739,11 @@ export default {
             this.$dirty.remove(this.publishContainer);
 
             this.localizing = localization;
+            this.selectedOrigin = preferredOriginHandle(
+                this.localizations,
+                localization,
+                this.originBehavior,
+            );
 
             if (localization.exists) {
                 this.editLocalization(localization);
@@ -724,6 +814,10 @@ export default {
             this.localizing = false;
         },
 
+        selectedOriginGroupLabel(option) {
+            return selectedSiteGroupLabel(option, this.originHasNamedGroups);
+        },
+
         localizationStatusText(localization) {
             if (!localization.exists) return 'This entry does not exist for this site.';
 
@@ -877,10 +971,11 @@ export default {
     created() {
         window.history.replaceState({}, document.title, document.location.href.replace('created=true', ''));
 
-        this.selectedOrigin =
-            this.originBehavior === 'active'
-                ? this.localizations.find((l) => l.active)?.handle
-                : this.localizations.find((l) => l.root)?.handle;
+        this.selectedOrigin = preferredOriginHandle(
+            this.localizations,
+            this.localizations.find((localization) => localization.active),
+            this.originBehavior,
+        );
     },
 
     beforeUnmount() {

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>