Skip to content

Письменов Дмитрий Иванович / yourroomads

Go to a project
Commit e3e57b47 by Jonathan Reinink
Options

Use new persistent layouts and Vue Meta plugin

1 parent 424aeff3
Inline Side-by-side
Showing with 85 additions and 59 deletions
package-lock.json
......@@ -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",
......
package.json
......@@ -29,5 +29,8 @@
"tailwindcss": "^0.7.4",
"vue": "^2.6.6",
"vue-template-compiler": "^2.6.6"
},
"dependencies": {
"vue-meta": "^2.2.2"
}
}
resources/js/Pages/Auth/Login.vue
......@@ -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
......
resources/js/Pages/Contacts/Create.vue
<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,
......
resources/js/Pages/Contacts/Edit.vue
<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,
......
resources/js/Pages/Contacts/Index.vue
<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,
},
......
resources/js/Pages/Dashboard/Index.vue
<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>
resources/js/Pages/Organizations/Create.vue
<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,
......
resources/js/Pages/Organizations/Edit.vue
<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,
......
resources/js/Pages/Organizations/Index.vue
<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,
},
......
resources/js/Pages/Reports/Index.vue
<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>
resources/js/Pages/Users/Create.vue
<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,
......
resources/js/Pages/Users/Edit.vue
<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,
......
resources/js/Pages/Users/Index.vue
<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: {
......
resources/js/Shared/Layout.vue
......@@ -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
......
resources/js/app.js
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),
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!