settings page refactor

This commit is contained in:
Čarodej
2021-11-22 10:47:24 +01:00
parent 0a4d5dea8a
commit d16a37f2ed
85 changed files with 794 additions and 779 deletions

View File

@@ -1,110 +1,84 @@
<template>
<div id="single-page">
<div id="page-content">
<MobileHeader :title="$t($router.currentRoute.meta.title)"/>
<PageHeader :can-back="true" :title="$t($router.currentRoute.meta.title)"/>
<div class="pr-6 w-full overflow-x-hidden relative" style="background: rgba(244, 245, 246, 0.6)">
<!--Page Tab links-->
<div class="card shadow-card py-0 lg:mt-6 mt-4 sticky top-0 z-10">
<router-link
class="inline-block text-sm font-bold px-4 py-5 border-b-2 border-transparent border-bottom-theme"
:class="{'text-theme': $router.currentRoute.name === page.route, 'text-gray-600': $router.currentRoute.name !== page.route}"
v-for="(page, i) in pages"
:to="{name: page.route}"
:key="i"
replace
>
{{ page.title }}
</router-link>
</div>
<div class="content-page">
<!--Page Tab links-->
<div class="menu-list-wrapper horizontal">
<router-link replace :to="{name: 'AppOthers'}"
class="menu-list-item link border-bottom-theme">
<div class="icon text-theme">
<settings-icon size="17" />
</div>
<div class="label text-theme ">
{{ $t('admin_settings.tabs.others') }}
</div>
</router-link>
<router-link replace :to="{name: 'AppAppearance'}"
class="menu-list-item link link border-bottom-theme">
<div class="icon text-theme">
<eye-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('admin_settings.tabs.appearance') }}
</div>
</router-link>
<router-link v-if="config.isSaaS" replace :to="{name: 'AppBillings'}"
class="menu-list-item link link border-bottom-theme">
<div class="icon text-theme">
<file-text-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('admin_settings.tabs.billings') }}
</div>
</router-link>
<router-link v-if="config.isSaaS" replace :to="{name: 'AppPayments'}"
class="menu-list-item link link border-bottom-theme">
<div class="icon text-theme">
<credit-card-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('admin_settings.tabs.payments') }}
</div>
</router-link>
<router-link replace :to="{name: 'AppIndex'}" class="menu-list-item link link border-bottom-theme">
<div class="icon text-theme">
<home-icon size="17" />
</div>
<div class="label text-theme">
Homepage
</div>
</router-link>
<router-link replace :to="{name: 'AppEmail'}"
class="menu-list-item link link border-bottom-theme">
<div class="icon text-theme">
<mail-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('admin_settings.tabs.email') }}
</div>
</router-link>
</div>
<!--Router Content-->
<router-view/>
</div>
</div>
<!--Router Content-->
<router-view class="" />
</div>
</template>
<script>
import {UsersIcon, SettingsIcon, Trash2Icon, EyeIcon, FileTextIcon, CodeIcon, MailIcon, CreditCardIcon, HomeIcon} from 'vue-feather-icons'
import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
import SectionTitle from '/resources/js/components/Others/SectionTitle'
import PageHeader from '/resources/js/components/Others/PageHeader'
import {mapGetters} from 'vuex'
import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
import SectionTitle from '/resources/js/components/Others/SectionTitle'
import PageHeader from '/resources/js/components/Others/PageHeader'
import {mapGetters} from 'vuex'
export default {
name: 'AppSettings',
components: {
HomeIcon,
CreditCardIcon,
CodeIcon,
MailIcon,
FileTextIcon,
EyeIcon,
UsersIcon,
Trash2Icon,
SettingsIcon,
SectionTitle,
MobileHeader,
PageHeader,
},
computed: {
...mapGetters(['config']),
},
}
export default {
name: 'AppSettings',
components: {
HomeIcon,
CreditCardIcon,
CodeIcon,
MailIcon,
FileTextIcon,
EyeIcon,
UsersIcon,
Trash2Icon,
SettingsIcon,
SectionTitle,
MobileHeader,
PageHeader,
},
computed: {
...mapGetters(['config']),
},
data() {
return {
pages: [
{
title: this.$t('admin_settings.tabs.others'),
route: 'AppOthers',
},
{
title: this.$t('admin_settings.tabs.appearance'),
route: 'AppAppearance',
},
{
title: this.$t('admin_settings.tabs.billings'),
route: 'AppBillings',
},
{
title: this.$t('admin_settings.tabs.payments'),
route: 'AppPayments',
},
{
title: 'Homepage',
route: 'AppIndex',
},
{
title: this.$t('admin_settings.tabs.email'),
route: 'AppEmail',
},
]
}
}
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
@import '/resources/sass/vuefilemanager/_mixins';
</style>