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 @@ ...@@ -10120,6 +10120,21 @@
"vue-style-loader": "^4.1.0" "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": { "vue-style-loader": {
"version": "4.1.2", "version": "4.1.2",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
......
package.json
...@@ -29,5 +29,8 @@ ...@@ -29,5 +29,8 @@
"tailwindcss": "^0.7.4", "tailwindcss": "^0.7.4",
"vue": "^2.6.6", "vue": "^2.6.6",
"vue-template-compiler": "^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' ...@@ -28,6 +28,7 @@ import Logo from '@/Shared/Logo'
import TextInput from '@/Shared/TextInput' import TextInput from '@/Shared/TextInput'
export default { export default {
metaInfo: { title: 'Login' },
components: { components: {
LoadingButton, LoadingButton,
Logo, Logo,
...@@ -46,9 +47,6 @@ export default { ...@@ -46,9 +47,6 @@ export default {
}, },
} }
}, },
mounted() {
document.title = 'Login | Ping CRM'
},
methods: { methods: {
submit() { submit() {
this.sending = true this.sending = true
......
resources/js/Pages/Contacts/Create.vue
<template> <template>
<layout title="Create Contact"> <div>
<h1 class="mb-8 font-bold text-3xl"> <h1 class="mb-8 font-bold text-3xl">
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('contacts')">Contacts</inertia-link> <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 <span class="text-indigo-light font-medium">/</span> Create
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
</div> </div>
</form> </form>
</div> </div>
</layout> </div>
</template> </template>
<script> <script>
...@@ -40,8 +40,9 @@ import SelectInput from '@/Shared/SelectInput' ...@@ -40,8 +40,9 @@ import SelectInput from '@/Shared/SelectInput'
import TextInput from '@/Shared/TextInput' import TextInput from '@/Shared/TextInput'
export default { export default {
metaInfo: { title: 'Create Contact' },
layout: (h, page) => h(Layout, [page]),
components: { components: {
Layout,
LoadingButton, LoadingButton,
SelectInput, SelectInput,
TextInput, TextInput,
......
resources/js/Pages/Contacts/Edit.vue
<template> <template>
<layout :title="`${form.first_name} ${form.last_name}`"> <div>
<h1 class="mb-8 font-bold text-3xl"> <h1 class="mb-8 font-bold text-3xl">
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('contacts')">Contacts</inertia-link> <inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('contacts')">Contacts</inertia-link>
<span class="text-indigo-light font-medium">/</span> <span class="text-indigo-light font-medium">/</span>
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
</div> </div>
</form> </form>
</div> </div>
</layout> </div>
</template> </template>
<script> <script>
...@@ -46,8 +46,13 @@ import TextInput from '@/Shared/TextInput' ...@@ -46,8 +46,13 @@ import TextInput from '@/Shared/TextInput'
import TrashedMessage from '@/Shared/TrashedMessage' import TrashedMessage from '@/Shared/TrashedMessage'
export default { export default {
metaInfo() {
return {
title: `${this.form.first_name} ${this.form.last_name}`,
}
},
layout: (h, page) => h(Layout, [page]),
components: { components: {
Layout,
LoadingButton, LoadingButton,
SelectInput, SelectInput,
TextInput, TextInput,
......
resources/js/Pages/Contacts/Index.vue
<template> <template>
<layout title="Contacts"> <div>
<h1 class="mb-8 font-bold text-3xl">Contacts</h1> <h1 class="mb-8 font-bold text-3xl">Contacts</h1>
<div class="mb-6 flex justify-between items-center"> <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"> <search-filter v-model="form.search" class="w-full max-w-sm mr-4" @reset="reset">
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
</table> </table>
</div> </div>
<pagination :links="contacts.links" /> <pagination :links="contacts.links" />
</layout> </div>
</template> </template>
<script> <script>
...@@ -70,9 +70,10 @@ import Pagination from '@/Shared/Pagination' ...@@ -70,9 +70,10 @@ import Pagination from '@/Shared/Pagination'
import SearchFilter from '@/Shared/SearchFilter' import SearchFilter from '@/Shared/SearchFilter'
export default { export default {
metaInfo: { title: 'Contacts' },
layout: (h, page) => h(Layout, [page]),
components: { components: {
Icon, Icon,
Layout,
Pagination, Pagination,
SearchFilter, SearchFilter,
}, },
......
resources/js/Pages/Dashboard/Index.vue
<template> <template>
<layout title="Dashboard"> <div>
<h1 class="mb-8 font-bold text-3xl">Dashboard</h1> <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> <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> <div>
<inertia-link class="btn-indigo" href="/500">500 error</inertia-link> <inertia-link class="btn-indigo" href="/500">500 error</inertia-link>
<inertia-link class="btn-indigo" href="/404">404 error</inertia-link> <inertia-link class="btn-indigo" href="/404">404 error</inertia-link>
</div> </div>
</layout> </div>
</template> </template>
<script> <script>
import Layout from '@/Shared/Layout' import Layout from '@/Shared/Layout'
export default { export default {
components: { metaInfo: { title: 'Dashboard' },
Layout, layout: Layout,
},
} }
</script> </script>
resources/js/Pages/Organizations/Create.vue
<template> <template>
<layout title="Create Organization"> <div>
<h1 class="mb-8 font-bold text-3xl"> <h1 class="mb-8 font-bold text-3xl">
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('organizations')">Organizations</inertia-link> <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 <span class="text-indigo-light font-medium">/</span> Create
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
</div> </div>
</form> </form>
</div> </div>
</layout> </div>
</template> </template>
<script> <script>
...@@ -35,8 +35,9 @@ import SelectInput from '@/Shared/SelectInput' ...@@ -35,8 +35,9 @@ import SelectInput from '@/Shared/SelectInput'
import TextInput from '@/Shared/TextInput' import TextInput from '@/Shared/TextInput'
export default { export default {
metaInfo: { title: 'Create Organization' },
layout: (h, page) => h(Layout, [page]),
components: { components: {
Layout,
LoadingButton, LoadingButton,
SelectInput, SelectInput,
TextInput, TextInput,
......
resources/js/Pages/Organizations/Edit.vue
<template> <template>
<layout :title="form.name"> <div>
<h1 class="mb-8 font-bold text-3xl"> <h1 class="mb-8 font-bold text-3xl">
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('organizations')">Organizations</inertia-link> <inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('organizations')">Organizations</inertia-link>
<span class="text-indigo-light font-medium">/</span> <span class="text-indigo-light font-medium">/</span>
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
</tr> </tr>
</table> </table>
</div> </div>
</layout> </div>
</template> </template>
<script> <script>
...@@ -78,9 +78,12 @@ import TextInput from '@/Shared/TextInput' ...@@ -78,9 +78,12 @@ import TextInput from '@/Shared/TextInput'
import TrashedMessage from '@/Shared/TrashedMessage' import TrashedMessage from '@/Shared/TrashedMessage'
export default { export default {
metaInfo() {
return { title: this.form.name }
},
layout: (h, page) => h(Layout, [page]),
components: { components: {
Icon, Icon,
Layout,
LoadingButton, LoadingButton,
SelectInput, SelectInput,
TextInput, TextInput,
......
resources/js/Pages/Organizations/Index.vue
<template> <template>
<layout title="Organizations"> <div>
<h1 class="mb-8 font-bold text-3xl">Organizations</h1> <h1 class="mb-8 font-bold text-3xl">Organizations</h1>
<div class="mb-6 flex justify-between items-center"> <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"> <search-filter v-model="form.search" class="w-full max-w-sm mr-4" @reset="reset">
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
</table> </table>
</div> </div>
<pagination :links="organizations.links" /> <pagination :links="organizations.links" />
</layout> </div>
</template> </template>
<script> <script>
...@@ -62,9 +62,10 @@ import Pagination from '@/Shared/Pagination' ...@@ -62,9 +62,10 @@ import Pagination from '@/Shared/Pagination'
import SearchFilter from '@/Shared/SearchFilter' import SearchFilter from '@/Shared/SearchFilter'
export default { export default {
metaInfo: { title: 'Organizations' },
layout: (h, page) => h(Layout, [page]),
components: { components: {
Icon, Icon,
Layout,
Pagination, Pagination,
SearchFilter, SearchFilter,
}, },
......
resources/js/Pages/Reports/Index.vue
<template> <template>
<layout title="Reports"> <div>
<h1 class="mb-8 font-bold text-3xl">Reports</h1> <h1 class="mb-8 font-bold text-3xl">Reports</h1>
</layout> </div>
</template> </template>
<script> <script>
import Layout from '@/Shared/Layout' import Layout from '@/Shared/Layout'
export default { export default {
components: { metaInfo: { title: 'Reports' },
Layout, layout: (h, page) => h(Layout, [page]),
},
} }
</script> </script>
resources/js/Pages/Users/Create.vue
<template> <template>
<layout title="Create User"> <div>
<h1 class="mb-8 font-bold text-3xl"> <h1 class="mb-8 font-bold text-3xl">
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('users')">Users</inertia-link> <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 <span class="text-indigo-light font-medium">/</span> Create
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</div> </div>
</form> </form>
</div> </div>
</layout> </div>
</template> </template>
<script> <script>
...@@ -33,8 +33,9 @@ import TextInput from '@/Shared/TextInput' ...@@ -33,8 +33,9 @@ import TextInput from '@/Shared/TextInput'
import FileInput from '@/Shared/FileInput' import FileInput from '@/Shared/FileInput'
export default { export default {
metaInfo: { title: 'Create User' },
layout: (h, page) => h(Layout, [page]),
components: { components: {
Layout,
LoadingButton, LoadingButton,
SelectInput, SelectInput,
TextInput, TextInput,
......
resources/js/Pages/Users/Edit.vue
<template> <template>
<layout :title="`${form.first_name} ${form.last_name}`"> <div>
<div class="mb-8 flex justify-start max-w-lg"> <div class="mb-8 flex justify-start max-w-lg">
<h1 class="font-bold text-3xl"> <h1 class="font-bold text-3xl">
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('users')">Users</inertia-link> <inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('users')">Users</inertia-link>
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
</div> </div>
</form> </form>
</div> </div>
</layout> </div>
</template> </template>
<script> <script>
...@@ -42,8 +42,13 @@ import FileInput from '@/Shared/FileInput' ...@@ -42,8 +42,13 @@ import FileInput from '@/Shared/FileInput'
import TrashedMessage from '@/Shared/TrashedMessage' import TrashedMessage from '@/Shared/TrashedMessage'
export default { export default {
metaInfo() {
return {
title: `${this.form.first_name} ${this.form.last_name}`,
}
},
layout: (h, page) => h(Layout, [page]),
components: { components: {
Layout,
LoadingButton, LoadingButton,
SelectInput, SelectInput,
TextInput, TextInput,
......
resources/js/Pages/Users/Index.vue
<template> <template>
<layout title="Users"> <div>
<h1 class="mb-8 font-bold text-3xl">Users</h1> <h1 class="mb-8 font-bold text-3xl">Users</h1>
<div class="mb-6 flex justify-between items-center"> <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"> <search-filter v-model="form.search" class="w-full max-w-sm mr-4" @reset="reset">
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
</tr> </tr>
</table> </table>
</div> </div>
</layout> </div>
</template> </template>
<script> <script>
...@@ -67,9 +67,10 @@ import Layout from '@/Shared/Layout' ...@@ -67,9 +67,10 @@ import Layout from '@/Shared/Layout'
import SearchFilter from '@/Shared/SearchFilter' import SearchFilter from '@/Shared/SearchFilter'
export default { export default {
metaInfo: { title: 'Users' },
layout: (h, page) => h(Layout, [page]),
components: { components: {
Icon, Icon,
Layout,
SearchFilter, SearchFilter,
}, },
props: { props: {
......
resources/js/Shared/Layout.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div> <div>
<portal-target name="dropdown" slim /> <portal-target name="dropdown" slim />
<div class="flex flex-col"> <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="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"> <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="/"> <inertia-link class="mt-1" href="/">
...@@ -33,11 +33,9 @@ ...@@ -33,11 +33,9 @@
</dropdown> </dropdown>
</div> </div>
</div> </div>
<div class="flex flex-grow"> <div class="flex flex-grow overflow-hidden">
<div class="bg-indigo-darker flex-no-shrink w-56 p-12 hidden md:block"> <main-menu class="bg-indigo-darker flex-no-shrink w-56 p-12 hidden md:block overflow-y-auto" />
<main-menu /> <div class="w-full overflow-hidden px-4 py-8 md:p-12 overflow-y-auto" scroll-region>
</div>
<div class="w-full overflow-hidden px-4 py-8 md:p-12">
<flash-messages /> <flash-messages />
<slot /> <slot />
</div> </div>
...@@ -62,23 +60,12 @@ export default { ...@@ -62,23 +60,12 @@ export default {
Logo, Logo,
MainMenu, MainMenu,
}, },
props: {
title: String,
},
data() { data() {
return { return {
showUserMenu: false, showUserMenu: false,
accounts: null, accounts: null,
} }
}, },
watch: {
title: {
immediate: true,
handler(title) {
document.title = title ? `${title} | Ping CRM` : 'Ping CRM'
},
},
},
methods: { methods: {
hideDropdownMenus() { hideDropdownMenus() {
this.showUserMenu = false this.showUserMenu = false
......
resources/js/app.js
import { InertiaApp } from '@inertiajs/inertia-vue'
import PortalVue from 'portal-vue'
import Vue from '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.config.productionTip = false
Vue.mixin({ methods: { route: window.route } }) Vue.mixin({ methods: { route: window.route } })
Vue.use(InertiaApp) Vue.use(InertiaApp)
Vue.use(PortalVue) Vue.use(PortalVue)
Vue.use(VueMeta)
let app = document.getElementById('app') let app = document.getElementById('app')
new Vue({ new Vue({
metaInfo: {
title: 'Loading…',
titleTemplate: '%s | Ping CRM',
},
render: h => h(InertiaApp, { render: h => h(InertiaApp, {
props: { props: {
initialPage: JSON.parse(app.dataset.page), 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!