Skip to content

Reattempt 1517: Ensure Inertia pages are children of AppLayout #1554

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed

Reattempt 1517: Ensure Inertia pages are children of AppLayout #1554

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2aef869
Ensure Inertia pages are children of AppLayout
mst101 Jul 15, 2024
bb45c57
Revert changes to .gitignore
SamuelMwangiW Dec 15, 2024
17ec9e5
Rename PageContainer to PageHeader and move it to Components folder
SamuelMwangiW Dec 15, 2024
24c9a9d
No need to wrap the entire page in the PageHeader component
SamuelMwangiW Dec 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions stubs/inertia/resources/js/Components/PageHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<script setup>
import { Head } from '@inertiajs/vue3';

defineProps({
title: String,
});
</script>

<template>
<Head :title="title" />

<!-- Page Heading -->
<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 />
</div>
</header>
</template>
15 changes: 1 addition & 14 deletions stubs/inertia/resources/js/Layouts/AppLayout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,13 @@
<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';
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) => {
Expand All @@ -29,8 +25,6 @@ const logout = () => {

<template>
<div>
<Head :title="title" />

<Banner />

<div class="min-h-screen bg-gray-100 dark:bg-gray-900">
Expand Down Expand Up @@ -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 />
Expand Down
33 changes: 18 additions & 15 deletions stubs/inertia/resources/js/Pages/API/Index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
<script setup>
import ApiTokenManager from '@/Pages/API/Partials/ApiTokenManager.vue';
import AppLayout from '@/Layouts/AppLayout.vue';
import PageHeader from "@/Components/PageHeader.vue";

defineOptions({
layout: AppLayout,
})

defineProps({
tokens: Array,
Expand All @@ -10,21 +15,19 @@ defineProps({
</script>

<template>
<AppLayout title="API Tokens">
<template #header>
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
API Tokens
</h2>
</template>
<PageHeader title="API Tokens">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
API Tokens
</h2>
</PageHeader>

<div>
<div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
<ApiTokenManager
:tokens="tokens"
:available-permissions="availablePermissions"
:default-permissions="defaultPermissions"
/>
</div>
<div>
<div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
<ApiTokenManager
:tokens="tokens"
:available-permissions="availablePermissions"
:default-permissions="defaultPermissions"
/>
</div>
</AppLayout>
</div>
</template>
27 changes: 15 additions & 12 deletions stubs/inertia/resources/js/Pages/Dashboard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,25 @@
<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import Welcome from '@/Components/Welcome.vue';
import PageHeader from "@/Components/PageHeader.vue";

defineOptions({
layout: AppLayout,
})
</script>

<template>
<AppLayout title="Dashboard">
<template #header>
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
Dashboard
</h2>
</template>
<PageHeader title="Dashboard">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
Dashboard
</h2>
</PageHeader>

<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">
<Welcome />
</div>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">
<Welcome />
</div>
</div>
</AppLayout>
</div>
</template>
67 changes: 35 additions & 32 deletions stubs/inertia/resources/js/Pages/Profile/Show.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 PageHeader from "@/Components/PageHeader.vue";

defineOptions({
layout: AppLayout,
})

defineProps({
confirmsTwoFactorAuthentication: Boolean,
Expand All @@ -14,44 +19,42 @@ defineProps({
</script>

<template>
<AppLayout title="Profile">
<template #header>
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
Profile
</h2>
</template>

<div>
<div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
<div v-if="$page.props.jetstream.canUpdateProfileInformation">
<UpdateProfileInformationForm :user="$page.props.auth.user" />

<SectionBorder />
</div>
<PageHeader title="Profile">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
Profile
</h2>
</PageHeader>

<div>
<div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
<div v-if="$page.props.jetstream.canUpdateProfileInformation">
<UpdateProfileInformationForm :user="$page.props.auth.user" />

<SectionBorder />
</div>

<div v-if="$page.props.jetstream.canUpdatePassword">
<UpdatePasswordForm class="mt-10 sm:mt-0" />
<div v-if="$page.props.jetstream.canUpdatePassword">
<UpdatePasswordForm class="mt-10 sm:mt-0" />

<SectionBorder />
</div>
<SectionBorder />
</div>

<div v-if="$page.props.jetstream.canManageTwoFactorAuthentication">
<TwoFactorAuthenticationForm
:requires-confirmation="confirmsTwoFactorAuthentication"
class="mt-10 sm:mt-0"
/>
<div v-if="$page.props.jetstream.canManageTwoFactorAuthentication">
<TwoFactorAuthenticationForm
:requires-confirmation="confirmsTwoFactorAuthentication"
class="mt-10 sm:mt-0"
/>

<SectionBorder />
</div>
<SectionBorder />
</div>

<LogoutOtherBrowserSessionsForm :sessions="sessions" class="mt-10 sm:mt-0" />
<LogoutOtherBrowserSessionsForm :sessions="sessions" class="mt-10 sm:mt-0" />

<template v-if="$page.props.jetstream.hasAccountDeletionFeatures">
<SectionBorder />
<template v-if="$page.props.jetstream.hasAccountDeletionFeatures">
<SectionBorder />

<DeleteUserForm class="mt-10 sm:mt-0" />
</template>
</div>
<DeleteUserForm class="mt-10 sm:mt-0" />
</template>
</div>
</AppLayout>
</div>
</template>
25 changes: 14 additions & 11 deletions stubs/inertia/resources/js/Pages/Teams/Create.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,23 @@
<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import CreateTeamForm from '@/Pages/Teams/Partials/CreateTeamForm.vue';
import PageHeader from "@/Components/PageHeader.vue";

defineOptions({
layout: AppLayout,
})
</script>

<template>
<AppLayout title="Create Team">
<template #header>
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
Create Team
</h2>
</template>
<PageHeader title="Create Team">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
Create Team
</h2>
</PageHeader>

<div>
<div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
<CreateTeamForm />
</div>
<div>
<div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
<CreateTeamForm />
</div>
</AppLayout>
</div>
</template>
45 changes: 24 additions & 21 deletions stubs/inertia/resources/js/Pages/Teams/Show.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 PageHeader from "@/Components/PageHeader.vue";

defineOptions({
layout: AppLayout,
})

defineProps({
team: Object,
Expand All @@ -13,30 +18,28 @@ defineProps({
</script>

<template>
<AppLayout title="Team Settings">
<template #header>
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
Team Settings
</h2>
</template>
<PageHeader title="Team Settings">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
Team Settings
</h2>
</PageHeader>

<div>
<div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
<UpdateTeamNameForm :team="team" :permissions="permissions" />
<div>
<div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
<UpdateTeamNameForm :team="team" :permissions="permissions" />

<TeamMemberManager
class="mt-10 sm:mt-0"
:team="team"
:available-roles="availableRoles"
:user-permissions="permissions"
/>
<TeamMemberManager
class="mt-10 sm:mt-0"
:team="team"
:available-roles="availableRoles"
:user-permissions="permissions"
/>

<template v-if="permissions.canDeleteTeam && ! team.personal_team">
<SectionBorder />
<template v-if="permissions.canDeleteTeam && ! team.personal_team">
<SectionBorder />

<DeleteTeamForm class="mt-10 sm:mt-0" :team="team" />
</template>
</div>
<DeleteTeamForm class="mt-10 sm:mt-0" :team="team" />
</template>
</div>
</AppLayout>
</div>
</template>
Loading