[6.x] Make actions available in a collection tree view

resources/js/components/actions/ItemActions.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, useTemplateRef, watch } from 'vue';
+import { ref, computed, useTemplateRef, watch, onMounted } from 'vue';
 import useActions from './Actions.js';
 import ConfirmableAction from './ConfirmableAction.vue';
 import useSkeletonDelay from '@/composables/skeleton-delay.js';
@@ -11,6 +11,7 @@ const props = defineProps({
     context: { type: Object, default: () => ({}) },
     item: { required: true },
     isDirty: { type: Boolean, default: false },
+    autoLoad: { type: Boolean, default: false },
 });
 
 const emit = defineEmits(['started', 'completed']);
@@ -24,6 +25,10 @@ const loading = ref(false);
 const shouldShowSkeleton = useSkeletonDelay(loading);
 let loadActionsRequest = null;
 
+onMounted(() => {
+    if (props.autoLoad) loadActions();
+});
+
 watch(
     () => props.actions,
     () => {

resources/js/pages/collections/Show.vue

@@ -153,6 +153,36 @@
                     variant="destructive"
                     @click="deleteTreeBranch(branch, removeBranch)"
                 />
+                <ItemActions
+                    v-if="branch.entry"
+                    :url="entriesActionUrl"
+                    :context="{ view: 'tree' }"
+                    :item="branch.entry"
+                    auto-load
+                    v-slot="{ actions, shouldShowSkeleton }"
+                >
+                    <template v-if="shouldShowSkeleton">
+                        <DropdownSeparator />
+                        <div v-for="index in 3" :key="index" class="contents">
+                            <Skeleton class="m-1 size-5" />
+                            <Skeleton
+                                class="mx-2 my-1.5 h-5"
+                                :class="index === 1 ? 'w-28' : index === 2 ? 'w-36' : 'w-24'"
+                            />
+                        </div>
+                    </template>
+                    <template v-else-if="branchTreeActions(actions).length">
+                        <DropdownSeparator />
+                        <DropdownItem
+                            v-for="action in branchTreeActions(actions)"
+                            :key="action.handle"
+                            :text="__(action.title)"
+                            :icon="action.icon"
+                            :variant="action.dangerous ? 'destructive' : undefined"
+                            @click="action.run()"
+                        />
+                    </template>
+                </ItemActions>
             </template>
         </page-tree>
 
@@ -190,7 +220,7 @@ import DeleteLocalizationConfirmation from '@/components/collections/DeleteLocal
 import CollectionCalendar from '@/components/entries/calendar/Calendar.vue';
 import SiteSelector from '@/components/SiteSelector.vue';
 import { defineAsyncComponent } from 'vue';
-import { Dropdown, DropdownItem, DropdownLabel, DropdownMenu, DropdownSeparator, Header, Button, ToggleGroup, ToggleItem } from '@/components/ui';
+import { Dropdown, DropdownItem, DropdownLabel, DropdownMenu, DropdownSeparator, Header, Button, Skeleton, ToggleGroup, ToggleItem } from '@/components/ui';
 import ItemActions from '@/components/actions/ItemActions.vue';
 import Head from '@/pages/layout/Head.vue';
 import { router } from '@inertiajs/vue3';
@@ -206,6 +236,7 @@ export default {
         Dropdown,
         Header,
         Button,
+        Skeleton,
         ToggleGroup,
         ToggleItem,
         PageTree: defineAsyncComponent(() => import('@/components/structures/PageTree.vue')),
@@ -397,6 +428,10 @@ export default {
             return branch.redirect != null;
         },
 
+        branchTreeActions(actions) {
+            return (actions || []).filter((action) => action.handle !== 'delete');
+        },
+
         createEntry(blueprint, parent) {
             let url = `${this.createUrl}?blueprint=${blueprint}`;
             if (parent) url += '&parent=' + parent;

src/Structures/TreeBuilder.php

@@ -91,22 +91,23 @@ protected function transformTreeForController($tree)
             $page = $item['page'];
             $collection = $page->mountedCollection();
             $referenceExists = $page->referenceExists();
+            $entry = $referenceExists ? $page->entry() : null;
 
             return [
                 'id' => $page->id(),
                 'entry' => $page->reference(),
                 'title' => $page->hasCustomTitle() ? $page->title() : null,
-                'entry_title' => $referenceExists ? $page->entry()->value('title') : null,
-                'entry_blueprint' => $referenceExists ? [
-                    'handle' => $page->entry()->blueprint()->handle(),
-                    'title' => $page->entry()->blueprint()->title(),
+                'entry_title' => $entry ? $entry->value('title') : null,
+                'entry_blueprint' => $entry ? [
+                    'handle' => $entry->blueprint()->handle(),
+                    'title' => $entry->blueprint()->title(),
                 ] : null,
                 'url' => $page->url(),
                 'edit_url' => $page->editUrl(),
-                'can_delete' => $referenceExists ? User::current()->can('delete', $page->entry()) : true,
+                'can_delete' => $entry ? User::current()->can('delete', $entry) : true,
                 'slug' => $page->slug(),
                 'status' => $referenceExists ? $page->status() : null,
-                'redirect' => $referenceExists ? $page->entry()->get('redirect') : null,
+                'redirect' => $entry ? $entry->get('redirect') : null,
                 'collection' => ! $collection ? null : [
                     'handle' => $collection->handle(),
                     'title' => $collection->title(),