Use new persistent layouts and Vue Meta plugin
This commit is contained in:
Jonathan Reinink
parent
424aeff322
commit
e3e57b4716
|
|
@ -10120,6 +10120,21 @@
|
|||
"vue-style-loader": "^4.1.0"
|
||||
}
|
||||
},
|
||||
"vue-meta": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-meta/-/vue-meta-2.2.2.tgz",
|
||||
"integrity": "sha512-aSzjfc5xV3szxPZMsSk6JeoHUqwrVHNPzpMciTCek56LDd2xKWCv+Ch4IGWL5EIxVyfxA+krsD7T11PTyLY4TQ==",
|
||||
"requires": {
|
||||
"deepmerge": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"deepmerge": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.0.0.tgz",
|
||||
"integrity": "sha512-YZ1rOP5+kHor4hMAH+HRQnBQHg+wvS1un1hAOuIcxcBy0hzcUf6Jg2a1w65kpoOUnurOfZbERwjI1TfZxNjcww=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-style-loader": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
|
||||
|
|
|
|||
|
|
@ -29,5 +29,8 @@
|
|||
"tailwindcss": "^0.7.4",
|
||||
"vue": "^2.6.6",
|
||||
"vue-template-compiler": "^2.6.6"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue-meta": "^2.2.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ import Logo from '@/Shared/Logo'
|
|||
import TextInput from '@/Shared/TextInput'
|
||||
|
||||
export default {
|
||||
metaInfo: { title: 'Login' },
|
||||
components: {
|
||||
LoadingButton,
|
||||
Logo,
|
||||
|
|
@ -46,9 +47,6 @@ export default {
|
|||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.title = 'Login | Ping CRM'
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.sending = true
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<layout title="Create Contact">
|
||||
<div>
|
||||
<h1 class="mb-8 font-bold text-3xl">
|
||||
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('contacts')">Contacts</inertia-link>
|
||||
<span class="text-indigo-light font-medium">/</span> Create
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -40,8 +40,9 @@ import SelectInput from '@/Shared/SelectInput'
|
|||
import TextInput from '@/Shared/TextInput'
|
||||
|
||||
export default {
|
||||
metaInfo: { title: 'Create Contact' },
|
||||
layout: (h, page) => h(Layout, [page]),
|
||||
components: {
|
||||
Layout,
|
||||
LoadingButton,
|
||||
SelectInput,
|
||||
TextInput,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<layout :title="`${form.first_name} ${form.last_name}`">
|
||||
<div>
|
||||
<h1 class="mb-8 font-bold text-3xl">
|
||||
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('contacts')">Contacts</inertia-link>
|
||||
<span class="text-indigo-light font-medium">/</span>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -46,8 +46,13 @@ import TextInput from '@/Shared/TextInput'
|
|||
import TrashedMessage from '@/Shared/TrashedMessage'
|
||||
|
||||
export default {
|
||||
metaInfo() {
|
||||
return {
|
||||
title: `${this.form.first_name} ${this.form.last_name}`,
|
||||
}
|
||||
},
|
||||
layout: (h, page) => h(Layout, [page]),
|
||||
components: {
|
||||
Layout,
|
||||
LoadingButton,
|
||||
SelectInput,
|
||||
TextInput,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<layout title="Contacts">
|
||||
<div>
|
||||
<h1 class="mb-8 font-bold text-3xl">Contacts</h1>
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<search-filter v-model="form.search" class="w-full max-w-sm mr-4" @reset="reset">
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
</table>
|
||||
</div>
|
||||
<pagination :links="contacts.links" />
|
||||
</layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -70,9 +70,10 @@ import Pagination from '@/Shared/Pagination'
|
|||
import SearchFilter from '@/Shared/SearchFilter'
|
||||
|
||||
export default {
|
||||
metaInfo: { title: 'Contacts' },
|
||||
layout: (h, page) => h(Layout, [page]),
|
||||
components: {
|
||||
Icon,
|
||||
Layout,
|
||||
Pagination,
|
||||
SearchFilter,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,20 +1,19 @@
|
|||
<template>
|
||||
<layout title="Dashboard">
|
||||
<div>
|
||||
<h1 class="mb-8 font-bold text-3xl">Dashboard</h1>
|
||||
<p class="mb-12 leading-normal">Hey there! Welcome to Ping CRM, a demo app designed to help illustrate how <a class="text-indigo underline hover:text-orange-dark" href="https://github.com/inertiajs">Inertia.js</a> works.</p>
|
||||
<div>
|
||||
<inertia-link class="btn-indigo" href="/500">500 error</inertia-link>
|
||||
<inertia-link class="btn-indigo" href="/404">404 error</inertia-link>
|
||||
</div>
|
||||
</layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Layout from '@/Shared/Layout'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Layout,
|
||||
},
|
||||
metaInfo: { title: 'Dashboard' },
|
||||
layout: Layout,
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<layout title="Create Organization">
|
||||
<div>
|
||||
<h1 class="mb-8 font-bold text-3xl">
|
||||
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('organizations')">Organizations</inertia-link>
|
||||
<span class="text-indigo-light font-medium">/</span> Create
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -35,8 +35,9 @@ import SelectInput from '@/Shared/SelectInput'
|
|||
import TextInput from '@/Shared/TextInput'
|
||||
|
||||
export default {
|
||||
metaInfo: { title: 'Create Organization' },
|
||||
layout: (h, page) => h(Layout, [page]),
|
||||
components: {
|
||||
Layout,
|
||||
LoadingButton,
|
||||
SelectInput,
|
||||
TextInput,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<layout :title="form.name">
|
||||
<div>
|
||||
<h1 class="mb-8 font-bold text-3xl">
|
||||
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('organizations')">Organizations</inertia-link>
|
||||
<span class="text-indigo-light font-medium">/</span>
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -78,9 +78,12 @@ import TextInput from '@/Shared/TextInput'
|
|||
import TrashedMessage from '@/Shared/TrashedMessage'
|
||||
|
||||
export default {
|
||||
metaInfo() {
|
||||
return { title: this.form.name }
|
||||
},
|
||||
layout: (h, page) => h(Layout, [page]),
|
||||
components: {
|
||||
Icon,
|
||||
Layout,
|
||||
LoadingButton,
|
||||
SelectInput,
|
||||
TextInput,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<layout title="Organizations">
|
||||
<div>
|
||||
<h1 class="mb-8 font-bold text-3xl">Organizations</h1>
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<search-filter v-model="form.search" class="w-full max-w-sm mr-4" @reset="reset">
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
</table>
|
||||
</div>
|
||||
<pagination :links="organizations.links" />
|
||||
</layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -62,9 +62,10 @@ import Pagination from '@/Shared/Pagination'
|
|||
import SearchFilter from '@/Shared/SearchFilter'
|
||||
|
||||
export default {
|
||||
metaInfo: { title: 'Organizations' },
|
||||
layout: (h, page) => h(Layout, [page]),
|
||||
components: {
|
||||
Icon,
|
||||
Layout,
|
||||
Pagination,
|
||||
SearchFilter,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
<template>
|
||||
<layout title="Reports">
|
||||
<div>
|
||||
<h1 class="mb-8 font-bold text-3xl">Reports</h1>
|
||||
</layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Layout from '@/Shared/Layout'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Layout,
|
||||
},
|
||||
metaInfo: { title: 'Reports' },
|
||||
layout: (h, page) => h(Layout, [page]),
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<layout title="Create User">
|
||||
<div>
|
||||
<h1 class="mb-8 font-bold text-3xl">
|
||||
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('users')">Users</inertia-link>
|
||||
<span class="text-indigo-light font-medium">/</span> Create
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -33,8 +33,9 @@ import TextInput from '@/Shared/TextInput'
|
|||
import FileInput from '@/Shared/FileInput'
|
||||
|
||||
export default {
|
||||
metaInfo: { title: 'Create User' },
|
||||
layout: (h, page) => h(Layout, [page]),
|
||||
components: {
|
||||
Layout,
|
||||
LoadingButton,
|
||||
SelectInput,
|
||||
TextInput,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<layout :title="`${form.first_name} ${form.last_name}`">
|
||||
<div>
|
||||
<div class="mb-8 flex justify-start max-w-lg">
|
||||
<h1 class="font-bold text-3xl">
|
||||
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('users')">Users</inertia-link>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -42,8 +42,13 @@ import FileInput from '@/Shared/FileInput'
|
|||
import TrashedMessage from '@/Shared/TrashedMessage'
|
||||
|
||||
export default {
|
||||
metaInfo() {
|
||||
return {
|
||||
title: `${this.form.first_name} ${this.form.last_name}`,
|
||||
}
|
||||
},
|
||||
layout: (h, page) => h(Layout, [page]),
|
||||
components: {
|
||||
Layout,
|
||||
LoadingButton,
|
||||
SelectInput,
|
||||
TextInput,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<layout title="Users">
|
||||
<div>
|
||||
<h1 class="mb-8 font-bold text-3xl">Users</h1>
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<search-filter v-model="form.search" class="w-full max-w-sm mr-4" @reset="reset">
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -67,9 +67,10 @@ import Layout from '@/Shared/Layout'
|
|||
import SearchFilter from '@/Shared/SearchFilter'
|
||||
|
||||
export default {
|
||||
metaInfo: { title: 'Users' },
|
||||
layout: (h, page) => h(Layout, [page]),
|
||||
components: {
|
||||
Icon,
|
||||
Layout,
|
||||
SearchFilter,
|
||||
},
|
||||
props: {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div>
|
||||
<portal-target name="dropdown" slim />
|
||||
<div class="flex flex-col">
|
||||
<div class="min-h-screen flex flex-col" @click="hideDropdownMenus">
|
||||
<div class="h-screen flex flex-col" @click="hideDropdownMenus">
|
||||
<div class="md:flex">
|
||||
<div class="bg-indigo-darkest md:flex-no-shrink md:w-56 px-6 py-4 flex items-center justify-between md:justify-center">
|
||||
<inertia-link class="mt-1" href="/">
|
||||
|
|
@ -33,11 +33,9 @@
|
|||
</dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-grow">
|
||||
<div class="bg-indigo-darker flex-no-shrink w-56 p-12 hidden md:block">
|
||||
<main-menu />
|
||||
</div>
|
||||
<div class="w-full overflow-hidden px-4 py-8 md:p-12">
|
||||
<div class="flex flex-grow overflow-hidden">
|
||||
<main-menu class="bg-indigo-darker flex-no-shrink w-56 p-12 hidden md:block overflow-y-auto" />
|
||||
<div class="w-full overflow-hidden px-4 py-8 md:p-12 overflow-y-auto" scroll-region>
|
||||
<flash-messages />
|
||||
<slot />
|
||||
</div>
|
||||
|
|
@ -62,23 +60,12 @@ export default {
|
|||
Logo,
|
||||
MainMenu,
|
||||
},
|
||||
props: {
|
||||
title: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showUserMenu: false,
|
||||
accounts: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
title: {
|
||||
immediate: true,
|
||||
handler(title) {
|
||||
document.title = title ? `${title} | Ping CRM` : 'Ping CRM'
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hideDropdownMenus() {
|
||||
this.showUserMenu = false
|
||||
|
|
|
|||
|
|
@ -1,15 +1,21 @@
|
|||
import { InertiaApp } from '@inertiajs/inertia-vue'
|
||||
import PortalVue from 'portal-vue'
|
||||
import Vue from 'vue'
|
||||
import VueMeta from 'vue-meta'
|
||||
import PortalVue from 'portal-vue'
|
||||
import { InertiaApp } from '@inertiajs/inertia-vue'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.mixin({ methods: { route: window.route } })
|
||||
Vue.use(InertiaApp)
|
||||
Vue.use(PortalVue)
|
||||
Vue.use(VueMeta)
|
||||
|
||||
let app = document.getElementById('app')
|
||||
|
||||
new Vue({
|
||||
metaInfo: {
|
||||
title: 'Loading…',
|
||||
titleTemplate: '%s | Ping CRM',
|
||||
},
|
||||
render: h => h(InertiaApp, {
|
||||
props: {
|
||||
initialPage: JSON.parse(app.dataset.page),
|
||||
|
|
|
|||
Loading…
Reference in New Issue