nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-28 11:00:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

plan pages refactoring

Browse Source
This commit is contained in:
Čarodej
2021-11-25 09:35:12 +01:00
parent 936af4497b
commit d8f1f396d5
9 changed files with 346 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/views/Admin/Plans/Plan.vue
+52 -124
View File
@@ -1,48 +1,21 @@
<template>
<div id="single-page">
<div id="page-content" v-if="! isLoading">
<MobileHeader :title="$t($router.currentRoute.meta.title)"/>
<PageHeader :can-back="true" :title="$t($router.currentRoute.meta.title)"/>
<div>
<div class="card shadow-card pb-0 sticky top-0 z-10">
<div class="content-page">
<div class="mb-2">
<h1 class="font-bold text-xl">
{{ plan.attributes.name }}
</h1>
<small class="text-sm font-bold text-gray-500">
{{ plan.attributes.price }} / {{ $t(`interval.${plan.attributes.interval}`) }}
</small>
</div>
<!--Page Tab links-->
<div class="menu-list-wrapper horizontal">
<router-link replace :to="{name: 'PlanSettings', params: {id: plan.id}}"
class="menu-list-item link link border-bottom-theme">
<div class="icon text-theme">
<settings-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('admin_page_plans.tabs.settings') }}
</div>
</router-link>
<CardNavigation :pages="pages" class="-mx-3.5" />
</div>
<router-link replace :to="{name: 'PlanSubscribers', params: {id: plan.id}}"
class="menu-list-item link link border-bottom-theme">
<div class="icon text-theme">
<users-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('admin_page_plans.tabs.subscribers') }}
</div>
</router-link>
<router-view v-if="! isLoading" :plan="plan" />
<router-link replace :to="{name: 'PlanDelete', params: {id: plan.id}}"
class="menu-list-item link link border-bottom-theme">
<div class="icon text-theme">
<trash2-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('admin_page_plans.tabs.delete') }}
</div>
</router-link>
</div>
<!--Router Content-->
<router-view :plan="plan"/>
</div>
</div>
<div id="loader" v-if="isLoading">
<Spinner></Spinner>
</div>
@@ -50,89 +23,44 @@
</template>
<script>
import {UsersIcon, SettingsIcon, Trash2Icon} 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 Spinner from '/resources/js/components/FilesView/Spinner'
import axios from 'axios'
import CardNavigation from "../../../components/Admin/CardNavigation"
import Spinner from '/resources/js/components/FilesView/Spinner'
import axios from 'axios'
export default {
name: 'Plan',
components: {
UsersIcon,
Trash2Icon,
SettingsIcon,
SectionTitle,
MobileHeader,
PageHeader,
Spinner,
},
data() {
return {
isLoading: true,
plan: undefined,
}
},
created() {
axios.get('/api/admin/plans/' + this.$route.params.id)
.then(response => {
this.plan = response.data.data
this.isLoading = false
})
}
}
export default {
name: 'Plan',
components: {
CardNavigation,
Spinner,
},
data() {
return {
isLoading: true,
plan: undefined,
pages: [
{
title: this.$t('admin_page_plans.tabs.settings'),
route: 'PlanSettings',
},
{
title: this.$t('admin_page_plans.tabs.subscribers'),
route: 'PlanSubscribers',
},
{
title: this.$t('admin_page_plans.tabs.delete'),
route: 'PlanDelete',
},
]
}
},
created() {
axios.get('/api/subscription/plans/' + this.$route.params.id)
.then(response => {
this.plan = response.data.data
})
.finally(() => {
this.isLoading = false
})
}
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.user-thumbnail {
display: flex;
align-items: center;
cursor: pointer;
.avatar {
margin-right: 20px;
img {
line-height: 0;
width: 62px;
height: 62px;
border-radius: 12px;
}
}
.info {
.name {
display: block;
@include font-size(17);
line-height: 1;
}
.email {
color: $text-muted;
@include font-size(14);
}
}
}
@media only screen and (max-width: 960px) {
}
.dark {
.user-thumbnail {
.info {
.email {
color: $dark_mode_text_secondary;
}
}
}
}
</style>