[9.x] Move listing into index page component

resources/js/pages/Index.vue

@@ -1,13 +1,23 @@
 <script setup>
-import { Head } from '@statamic/cms/inertia';
+import { Head, Link } from '@statamic/cms/inertia'
 import { ItemActions } from '@statamic/cms';
-import { Header, Dropdown, DropdownMenu, DropdownLabel, DropdownItem, DropdownSeparator, Button } from '@statamic/cms/ui';
-import RunwayListing from '../components/Listing.vue';
+import {
+    Header,
+    Dropdown,
+    DropdownMenu,
+    DropdownLabel,
+    DropdownItem,
+    DropdownSeparator,
+    Button,
+    Listing,
+    StatusIndicator,
+} from '@statamic/cms/ui'
+import { ref } from 'vue';
 
-defineProps({
+const props = defineProps({
     icon: { type: String, required: true },
     title: { type: String, required: true },
-    handle: { type: String, required: true },
+    resource: { type: String, required: true },
     canCreate: { type: Boolean, required: true },
     createUrl: { type: String, required: true },
     createLabel: { type: String, required: true },
@@ -21,6 +31,18 @@ defineProps({
     hasPublishStates: { type: Boolean, required: true },
     titleColumn: { type: String, required: true },
 });
+
+const preferencesPrefix = ref(`runway.${props.resource}`);
+const requestUrl = ref(cp_url(`runway/${props.resource}/listing-api`));
+const items = ref(null);
+const page = ref(null);
+const perPage = ref(null);
+
+function requestComplete({ items: newItems, parameters }) {
+    items.value = newItems;
+    page.value = parameters.page;
+    perPage.value = parameters.perPage;
+}
 </script>
 
 <template>
@@ -31,7 +53,7 @@ defineProps({
             <ItemActions
                 :url="actionUrl"
                 :actions="actions"
-                :item="handle"
+                :item="resource"
                 @started="actionStarted"
                 @completed="actionCompleted"
                 v-slot="{ actions }"
@@ -61,13 +83,30 @@ defineProps({
             <Button v-if="canCreate" variant="primary" :text="createLabel" :href="createUrl" />
         </Header>
 
-        <RunwayListing
-            :resource="handle"
+        <Listing
+            ref="listing"
+            :url="requestUrl"
             :columns
-            :filters
             :action-url="modelsActionUrl"
-            :title-column
-            :has-publish-states
-        />
+            :action-context="{ resource }"
+            :preferences-prefix
+            :filters
+            push-query
+            @request-completed="requestComplete"
+        >
+            <template v-slot:[`cell-${titleColumn}`]="{ row: model, isColumnVisible }">
+                <Link class="title-index-field" :href="model.edit_url" @click.stop>
+                    <StatusIndicator v-if="hasPublishStates && !isColumnVisible('status')" :status="model.status" />
+                    <span v-text="model[titleColumn]" />
+                </Link>
+            </template>
+            <template v-if="hasPublishStates" #cell-status="{ row: model }">
+                <StatusIndicator :status="model.status" show-label :show-dot="false" />
+            </template>
+            <template #prepended-row-actions="{ row: model }">
+                <DropdownItem v-if="model.viewable && model.permalink" :text="__('Visit URL')" :href="model.permalink" target="_blank" icon="eye" />
+                <DropdownItem v-if="model.editable" :text="__('Edit')" :href="model.edit_url" icon="edit" />
+            </template>
+        </Listing>
     </div>
 </template>

src/Http/Controllers/CP/ResourceController.php

@@ -41,7 +41,7 @@ public function index(IndexRequest $request, Resource $resource)
         return Inertia::render('runway::Index', [
             'icon' => $resource->icon(),
             'title' => $resource->name(),
-            'handle' => $resource->handle(),
+            'resource' => $resource->handle(),
             'canCreate' => User::current()->can('create', $resource)
                 && $resource->hasVisibleBlueprint()
                 && ! $resource->readOnly(),