From fd20c204946792674fbfe1489aea067abfcc8471 Mon Sep 17 00:00:00 2001
From: Mark Thompson <mst101@users.noreply.github.com>
Date: Mon, 15 Jul 2024 08:35:50 +0000
Subject: [PATCH] Ensure Inertia pages are children of AppLayout
---
.gitignore | 1 +
src/Console/InstallCommand.php | 1 +
.../resources/js/Layouts/AppLayout.vue | 15 +-------------
.../inertia/resources/js/Pages/API/Index.vue | 9 +++++++--
.../inertia/resources/js/Pages/Dashboard.vue | 9 +++++++--
.../resources/js/Pages/PageContainer.vue | 20 +++++++++++++++++++
.../resources/js/Pages/Profile/Show.vue | 9 +++++++--
.../resources/js/Pages/Teams/Create.vue | 9 +++++++--
.../inertia/resources/js/Pages/Teams/Show.vue | 9 +++++++--
9 files changed, 58 insertions(+), 24 deletions(-)
create mode 100644 stubs/inertia/resources/js/Pages/PageContainer.vue
diff --git a/.gitignore b/.gitignore
index 35aa09ee6..5cf58d52e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ composer.lock
/phpunit.xml
/.phpunit.cache
.phpunit.result.cache
+.idea
diff --git a/src/Console/InstallCommand.php b/src/Console/InstallCommand.php
index 41c4cb6dc..24abd76a8 100644
--- a/src/Console/InstallCommand.php
+++ b/src/Console/InstallCommand.php
@@ -422,6 +422,7 @@ protected function installInertiaStack()
// Inertia Pages...
copy(__DIR__.'/../../stubs/inertia/resources/js/Pages/Dashboard.vue', resource_path('js/Pages/Dashboard.vue'));
+ copy(__DIR__.'/../../stubs/inertia/resources/js/Pages/PageContainer.vue', resource_path('js/Pages/PageContainer.vue'));
copy(__DIR__.'/../../stubs/inertia/resources/js/Pages/PrivacyPolicy.vue', resource_path('js/Pages/PrivacyPolicy.vue'));
copy(__DIR__.'/../../stubs/inertia/resources/js/Pages/TermsOfService.vue', resource_path('js/Pages/TermsOfService.vue'));
copy(__DIR__.'/../../stubs/inertia/resources/js/Pages/Welcome.vue', resource_path('js/Pages/Welcome.vue'));
diff --git a/stubs/inertia/resources/js/Layouts/AppLayout.vue b/stubs/inertia/resources/js/Layouts/AppLayout.vue
index 654a6f793..afe746b9f 100644
--- a/stubs/inertia/resources/js/Layouts/AppLayout.vue
+++ b/stubs/inertia/resources/js/Layouts/AppLayout.vue
@@ -1,6 +1,6 @@
<script setup>
import { ref } from 'vue';
-import { Head, Link, router } from '@inertiajs/vue3';
+import { Link, router } from '@inertiajs/vue3';
import ApplicationMark from '@/Components/ApplicationMark.vue';
import Banner from '@/Components/Banner.vue';
import Dropdown from '@/Components/Dropdown.vue';
@@ -8,10 +8,6 @@ import DropdownLink from '@/Components/DropdownLink.vue';
import NavLink from '@/Components/NavLink.vue';
import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
-defineProps({
- title: String,
-});
-
const showingNavigationDropdown = ref(false);
const switchToTeam = (team) => {
@@ -29,8 +25,6 @@ const logout = () => {
<template>
<div>
- <Head :title="title" />
-
<Banner />
<div class="min-h-screen bg-gray-100 dark:bg-gray-900">
@@ -273,13 +267,6 @@ const logout = () => {
</div>
</nav>
- <!-- Page Heading -->
- <header v-if="$slots.header" class="bg-white dark:bg-gray-800 shadow">
- <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
- <slot name="header" />
- </div>
- </header>
-
<!-- Page Content -->
<main>
<slot />
diff --git a/stubs/inertia/resources/js/Pages/API/Index.vue b/stubs/inertia/resources/js/Pages/API/Index.vue
index a7d9c0b42..5a6b41227 100644
--- a/stubs/inertia/resources/js/Pages/API/Index.vue
+++ b/stubs/inertia/resources/js/Pages/API/Index.vue
@@ -1,6 +1,11 @@
<script setup>
import ApiTokenManager from '@/Pages/API/Partials/ApiTokenManager.vue';
import AppLayout from '@/Layouts/AppLayout.vue';
+import PageContainer from "@/Pages/PageContainer.vue";
+
+defineOptions({
+ layout: AppLayout,
+})
defineProps({
tokens: Array,
@@ -10,7 +15,7 @@ defineProps({
</script>
<template>
- <AppLayout title="API Tokens">
+ <PageContainer title="API Tokens">
<template #header>
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
API Tokens
@@ -26,5 +31,5 @@ defineProps({
/>
</div>
</div>
- </AppLayout>
+ </PageContainer>
</template>
diff --git a/stubs/inertia/resources/js/Pages/Dashboard.vue b/stubs/inertia/resources/js/Pages/Dashboard.vue
index d2c067ff1..1be5ce4de 100644
--- a/stubs/inertia/resources/js/Pages/Dashboard.vue
+++ b/stubs/inertia/resources/js/Pages/Dashboard.vue
@@ -1,10 +1,15 @@
<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import Welcome from '@/Components/Welcome.vue';
+import PageContainer from "@/Pages/PageContainer.vue";
+
+defineOptions({
+ layout: AppLayout,
+})
</script>
<template>
- <AppLayout title="Dashboard">
+ <PageContainer title="Dashboard">
<template #header>
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
Dashboard
@@ -18,5 +23,5 @@ import Welcome from '@/Components/Welcome.vue';
</div>
</div>
</div>
- </AppLayout>
+ </PageContainer>
</template>
diff --git a/stubs/inertia/resources/js/Pages/PageContainer.vue b/stubs/inertia/resources/js/Pages/PageContainer.vue
new file mode 100644
index 000000000..6a5e1dff9
--- /dev/null
+++ b/stubs/inertia/resources/js/Pages/PageContainer.vue
@@ -0,0 +1,20 @@
+<script setup>
+import { Head } from '@inertiajs/vue3';
+
+defineProps({
+ title: String,
+});
+</script>
+
+<template>
+ <Head :title="title" />
+
+ <!-- Page Heading -->
+ <header v-if="$slots.header" class="bg-white dark:bg-gray-800 shadow">
+ <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+ <slot name="header" />
+ </div>
+ </header>
+
+ <slot />
+</template>
diff --git a/stubs/inertia/resources/js/Pages/Profile/Show.vue b/stubs/inertia/resources/js/Pages/Profile/Show.vue
index 1d4a4ae4d..fc0bdbea4 100644
--- a/stubs/inertia/resources/js/Pages/Profile/Show.vue
+++ b/stubs/inertia/resources/js/Pages/Profile/Show.vue
@@ -6,6 +6,11 @@ import SectionBorder from '@/Components/SectionBorder.vue';
import TwoFactorAuthenticationForm from '@/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue';
import UpdatePasswordForm from '@/Pages/Profile/Partials/UpdatePasswordForm.vue';
import UpdateProfileInformationForm from '@/Pages/Profile/Partials/UpdateProfileInformationForm.vue';
+import PageContainer from "@/Pages/PageContainer.vue";
+
+defineOptions({
+ layout: AppLayout,
+})
defineProps({
confirmsTwoFactorAuthentication: Boolean,
@@ -14,7 +19,7 @@ defineProps({
</script>
<template>
- <AppLayout title="Profile">
+ <PageContainer title="Profile">
<template #header>
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
Profile
@@ -53,5 +58,5 @@ defineProps({
</template>
</div>
</div>
- </AppLayout>
+ </PageContainer>
</template>
diff --git a/stubs/inertia/resources/js/Pages/Teams/Create.vue b/stubs/inertia/resources/js/Pages/Teams/Create.vue
index 8cdd4526f..a8b7ab6f4 100644
--- a/stubs/inertia/resources/js/Pages/Teams/Create.vue
+++ b/stubs/inertia/resources/js/Pages/Teams/Create.vue
@@ -1,10 +1,15 @@
<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import CreateTeamForm from '@/Pages/Teams/Partials/CreateTeamForm.vue';
+import PageContainer from "@/Pages/PageContainer.vue";
+
+defineOptions({
+ layout: AppLayout,
+})
</script>
<template>
- <AppLayout title="Create Team">
+ <PageContainer title="Create Team">
<template #header>
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
Create Team
@@ -16,5 +21,5 @@ import CreateTeamForm from '@/Pages/Teams/Partials/CreateTeamForm.vue';
<CreateTeamForm />
</div>
</div>
- </AppLayout>
+ </PageContainer>
</template>
diff --git a/stubs/inertia/resources/js/Pages/Teams/Show.vue b/stubs/inertia/resources/js/Pages/Teams/Show.vue
index d22fe0ecc..27e719f69 100644
--- a/stubs/inertia/resources/js/Pages/Teams/Show.vue
+++ b/stubs/inertia/resources/js/Pages/Teams/Show.vue
@@ -4,6 +4,11 @@ import DeleteTeamForm from '@/Pages/Teams/Partials/DeleteTeamForm.vue';
import SectionBorder from '@/Components/SectionBorder.vue';
import TeamMemberManager from '@/Pages/Teams/Partials/TeamMemberManager.vue';
import UpdateTeamNameForm from '@/Pages/Teams/Partials/UpdateTeamNameForm.vue';
+import PageContainer from "@/Pages/PageContainer.vue";
+
+defineOptions({
+ layout: AppLayout,
+})
defineProps({
team: Object,
@@ -13,7 +18,7 @@ defineProps({
</script>
<template>
- <AppLayout title="Team Settings">
+ <PageContainer title="Team Settings">
<template #header>
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
Team Settings
@@ -38,5 +43,5 @@ defineProps({
</template>
</div>
</div>
- </AppLayout>
+ </PageContainer>
</template>