plan list refactoring

This commit is contained in:
Čarodej
2021-11-25 07:41:09 +01:00
parent 2fb3cff98b
commit 936af4497b
3 changed files with 107 additions and 150 deletions
+37 -6
View File
@@ -33,7 +33,7 @@
"/chunks/contact-us.js": "/chunks/contact-us.js?id=3d0bbcd0c36d74bf739a",
"/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js": "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js?id=65ee559ca803555be568",
"/chunks/create-new-password.js": "/chunks/create-new-password.js?id=55135fff8801bdf735c4",
"/chunks/dashboard.js": "/chunks/dashboard.js?id=6215349bfe593c9d97e0",
"/chunks/dashboard.js": "/chunks/dashboard.js?id=d2f7592e42f8fd34fe80",
"/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~5475de6f.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~5475de6f.js?id=c5c36cfe8a9f7e56aa25",
"/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plans.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plans.js?id=d62ce026c0c13d14242f",
"/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.js": "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.js?id=7c627ccb1eb284aee632",
@@ -49,17 +49,17 @@
"/chunks/homepage.js": "/chunks/homepage.js?id=b89dd81804b8a0bd3f0b",
"/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=1579259e826aa89fb00a",
"/chunks/invitation.js": "/chunks/invitation.js?id=c9cd3541ee362ae8d5f7",
"/chunks/invoices.js": "/chunks/invoices.js?id=78fcd51a8a763766fd5f",
"/chunks/invoices.js": "/chunks/invoices.js?id=55183ce2f1ac6f308b3d",
"/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=ea129760157c8e44f324",
"/chunks/not-found.js": "/chunks/not-found.js?id=034287ee0ecb036320d3",
"/chunks/page-edit.js": "/chunks/page-edit.js?id=d116a63e3c59bc0a5133",
"/chunks/pages.js": "/chunks/pages.js?id=c3bb5975ae17947872be",
"/chunks/pages.js": "/chunks/pages.js?id=57cb88433843d50803cc",
"/chunks/plan.js": "/chunks/plan.js?id=052940a7395f559b7c60",
"/chunks/plan-create.js": "/chunks/plan-create.js?id=c1ad8299871917f21f8e",
"/chunks/plan-delete.js": "/chunks/plan-delete.js?id=a4db8cc9a98a81eed8d1",
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=b3287cc8a37898410410",
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=6c052021e0f162f6942d",
"/chunks/plans.js": "/chunks/plans.js?id=85ae6e573a4d322752af",
"/chunks/plans.js": "/chunks/plans.js?id=ba0fd1ca9218342819b7",
"/chunks/platform.js": "/chunks/platform.js?id=dc3c6677ab43d4475b66",
"/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=e64e3b67ccb89de9dd55",
"/chunks/platform~chunks/shared~chunks/shared-with-me~chunks/team-folders.js": "/chunks/platform~chunks/shared~chunks/shared-with-me~chunks/team-folders.js?id=7d983dfdc91de607d737",
@@ -102,7 +102,7 @@
"/chunks/user-password.js": "/chunks/user-password.js?id=ce6c12a5b038f5481bd1",
"/chunks/user-storage.js": "/chunks/user-storage.js?id=71b90f0987d1ebe7ead6",
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=e0a857f37b2bc6df43ca",
"/chunks/users.js": "/chunks/users.js?id=f725bb798eb8da710ca7",
"/chunks/users.js": "/chunks/users.js?id=a8c2b20dde8afaeea0c3",
"/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~24b428d3.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~24b428d3.js?id=ee89932f7ee76e74483e",
"/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b505e62a.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b505e62a.js?id=8163e0eab55c50f8afb8",
"/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js": "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js?id=37ce1e1ab9968c100712",
@@ -230,5 +230,36 @@
"/chunks/admin.395f3f63ae78b853df8a.hot-update.js": "/chunks/admin.395f3f63ae78b853df8a.hot-update.js",
"/chunks/admin.573a6e1ca9bd529a5c8d.hot-update.js": "/chunks/admin.573a6e1ca9bd529a5c8d.hot-update.js",
"/chunks/admin.0c0cac7fa6eaaddd78a7.hot-update.js": "/chunks/admin.0c0cac7fa6eaaddd78a7.hot-update.js",
"/chunks/admin.983a61bebc862cbccb59.hot-update.js": "/chunks/admin.983a61bebc862cbccb59.hot-update.js"
"/chunks/admin.983a61bebc862cbccb59.hot-update.js": "/chunks/admin.983a61bebc862cbccb59.hot-update.js",
"/chunks/plans.67cf1c817b91e6090415.hot-update.js": "/chunks/plans.67cf1c817b91e6090415.hot-update.js",
"/chunks/plans.66302f070bd7c649dcc6.hot-update.js": "/chunks/plans.66302f070bd7c649dcc6.hot-update.js",
"/chunks/plans.01d85e631004252f8dde.hot-update.js": "/chunks/plans.01d85e631004252f8dde.hot-update.js",
"/chunks/users.070c2250f8e0834ab63b.hot-update.js": "/chunks/users.070c2250f8e0834ab63b.hot-update.js",
"/chunks/plans.6aa57e14520e4d749c5a.hot-update.js": "/chunks/plans.6aa57e14520e4d749c5a.hot-update.js",
"/chunks/plans.acacfdd4e1d309e36d97.hot-update.js": "/chunks/plans.acacfdd4e1d309e36d97.hot-update.js",
"/chunks/plans.cde7a05f8fc5dee1e318.hot-update.js": "/chunks/plans.cde7a05f8fc5dee1e318.hot-update.js",
"/chunks/plans.c8f0a47cdecfa7736ee7.hot-update.js": "/chunks/plans.c8f0a47cdecfa7736ee7.hot-update.js",
"/chunks/plans.767f7d1c836059a6920a.hot-update.js": "/chunks/plans.767f7d1c836059a6920a.hot-update.js",
"/chunks/plans.44b4ea0dade7c1a7cbfa.hot-update.js": "/chunks/plans.44b4ea0dade7c1a7cbfa.hot-update.js",
"/chunks/plans.7f3608c457e2c262caa2.hot-update.js": "/chunks/plans.7f3608c457e2c262caa2.hot-update.js",
"/chunks/plans.dcaca8ba564be56b8660.hot-update.js": "/chunks/plans.dcaca8ba564be56b8660.hot-update.js",
"/chunks/plans.b177bdbbdee655318305.hot-update.js": "/chunks/plans.b177bdbbdee655318305.hot-update.js",
"/chunks/plans.c108b861003ce05be5ce.hot-update.js": "/chunks/plans.c108b861003ce05be5ce.hot-update.js",
"/chunks/plans.c961613fd95fab2e6d0c.hot-update.js": "/chunks/plans.c961613fd95fab2e6d0c.hot-update.js",
"/chunks/plans.162ff835fe7b00c2f040.hot-update.js": "/chunks/plans.162ff835fe7b00c2f040.hot-update.js",
"/chunks/plans.ed987c55d7ec9d95ca6b.hot-update.js": "/chunks/plans.ed987c55d7ec9d95ca6b.hot-update.js",
"/chunks/plans.5857b536c372900257e0.hot-update.js": "/chunks/plans.5857b536c372900257e0.hot-update.js",
"/chunks/plans.6229b2be3a1618d32a20.hot-update.js": "/chunks/plans.6229b2be3a1618d32a20.hot-update.js",
"/chunks/plans.0b9eb869c39de1feaccc.hot-update.js": "/chunks/plans.0b9eb869c39de1feaccc.hot-update.js",
"/chunks/plans.46438560404ae93671e3.hot-update.js": "/chunks/plans.46438560404ae93671e3.hot-update.js",
"/chunks/plans.4497f10f73da31fa4372.hot-update.js": "/chunks/plans.4497f10f73da31fa4372.hot-update.js",
"/chunks/plans.7ecfd4cbf042d4890347.hot-update.js": "/chunks/plans.7ecfd4cbf042d4890347.hot-update.js",
"/chunks/plans.c65887d5d408b03cf213.hot-update.js": "/chunks/plans.c65887d5d408b03cf213.hot-update.js",
"/chunks/plans.1c07c846e30a0a08e56f.hot-update.js": "/chunks/plans.1c07c846e30a0a08e56f.hot-update.js",
"/js/main.89d8f120d38967a5eb28.hot-update.js": "/js/main.89d8f120d38967a5eb28.hot-update.js",
"/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~b00a1a94.js": "/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~b00a1a94.js?id=2c1cd2ab8a9eed8031f0",
"/chunks/plans.89d8f120d38967a5eb28.hot-update.js": "/chunks/plans.89d8f120d38967a5eb28.hot-update.js",
"/chunks/plans.eee36b9b18b21d73ef75.hot-update.js": "/chunks/plans.eee36b9b18b21d73ef75.hot-update.js",
"/chunks/plans.7d790c6d4cfd916c23ef.hot-update.js": "/chunks/plans.7d790c6d4cfd916c23ef.hot-update.js",
"/chunks/plans.c7644df05e70a501dce0.hot-update.js": "/chunks/plans.c7644df05e70a501dce0.hot-update.js"
}
+69 -144
View File
@@ -1,71 +1,63 @@
<template>
<div id="single-page">
<div>
<div class="card shadow-card">
<div class="mb-6">
<router-link :to="{name: 'PlanCreate'}">
<MobileActionButton icon="plus">
{{ $t('admin_page_plans.create_plan_button') }}
</MobileActionButton>
</router-link>
</div>
<!--Stripe plans-->
<div id="page-content" v-show="stripeConfiguredWithPlans">
<MobileHeader :title="$t($router.currentRoute.meta.title)"/>
<PageHeader :title="$t($router.currentRoute.meta.title)"/>
<div class="content-page" v-if="config.stripe_public_key">
<div class="table-tools">
<div class="buttons">
<router-link :to="{name: 'PlanCreate'}">
<MobileActionButton icon="plus">
{{ $t('admin_page_plans.create_plan_button') }}
</MobileActionButton>
</router-link>
</div>
<div class="searching">
</div>
</div>
<DatatableWrapper @data="plans = $event" @init="isLoading = false" api="/api/admin/plans" :paginator="false" :columns="columns" class="table table-users">
<template slot-scope="{ row }">
<tr>
<td style="max-width: 80px">
<span class="cell-item">
<SwitchInput @input="changeStatus($event, row.data.id)" class="switch" :state="row.data.attributes.status"/>
</span>
</td>
<td class="name" style="min-width: 120px">
<router-link :to="{name: 'PlanSettings', params: {id: row.data.id}}" class="cell-item" tag="div">
<span>{{ row.data.attributes.name }}</span>
<!--Datatable-->
<DatatableWrapper @data="plans = $event" @init="isLoading = false" api="/api/subscription/plans" :paginator="true" :columns="columns">
<template slot-scope="{ row }">
<tr class="border-b dark:border-opacity-5 border-light border-dashed">
<td class="py-4">
<SwitchInput @input="changeStatus($event, row.data.id)" class="switch" :state="row.data.attributes.visible"/>
</td>
<td>
<span class="text-sm font-bold">
{{ row.data.attributes.name }}
</span>
</td>
<td>
<span class="text-sm font-bold">
{{ row.data.attributes.price }}
</span>
</td>
<td>
<span class="text-sm font-bold capitalize">
{{ row.data.attributes.interval }}
</span>
</td>
<td>
<span class="text-sm font-bold">
{{ row.data.attributes.subscribers }}
</span>
</td>
<td>
<span class="text-sm font-bold">
{{ row.data.attributes.features.max_storage_amount }} GB
</span>
</td>
<td>
<div class="flex space-x-2 w-full justify-end">
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'PlanSettings', params: {id: row.data.id}}">
<Edit2Icon size="15" class="opacity-75" />
</router-link>
</td>
<td>
<span class="cell-item">
{{ row.data.attributes.subscribers }}
</span>
</td>
<td>
<span class="cell-item">
{{ row.data.attributes.price_formatted }}
</span>
</td>
<td>
<span class="cell-item">
{{ row.data.attributes.capacity_formatted }}
</span>
</td>
<td>
<div class="action-icons">
<router-link :to="{name: 'PlanSettings', params: {id: row.data.id}}">
<edit-2-icon size="15" class="icon icon-edit"></edit-2-icon>
</router-link>
<router-link :to="{name: 'PlanDelete', params: {id: row.data.id}}">
<trash2-icon size="15" class="icon icon-trash"></trash2-icon>
</router-link>
</div>
</td>
</tr>
</template>
</DatatableWrapper>
</div>
</div>
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-red-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'PlanDelete', params: {id: row.data.id}}">
<Trash2Icon size="15" class="opacity-75" />
</router-link>
</div>
</td>
</tr>
</template>
</DatatableWrapper>
</div>
<!--Stripe configured but has empty plans-->
<EmptyPageContent
<!--<EmptyPageContent
v-if="isEmptyPlans"
icon="file"
:title="$t('admin_page_plans.empty.title')"
@@ -74,10 +66,10 @@
<router-link :to="{name: 'PlanCreate'}" tag="p">
<ButtonBase button-style="theme">{{ $t('admin_page_plans.empty.button') }}</ButtonBase>
</router-link>
</EmptyPageContent>
</EmptyPageContent>-->
<!--Stripe is Not Configured-->
<EmptyPageContent
<!--<EmptyPageContent
v-if="stripeIsNotConfigured"
icon="settings"
:title="$t('activation.stripe.title')"
@@ -86,7 +78,7 @@
<router-link :to="{name: 'AppPayments'}">
<ButtonBase button-style="theme">{{ $t('activation.stripe.button') }}</ButtonBase>
</router-link>
</EmptyPageContent>
</EmptyPageContent>-->
<!--Spinner-->
<div id="loader" v-if="isLoading">
@@ -100,15 +92,10 @@
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
import EmptyPageContent from '/resources/js/components/Others/EmptyPageContent'
import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
import SectionTitle from '/resources/js/components/Others/SectionTitle'
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
import {Trash2Icon, Edit2Icon} from "vue-feather-icons";
import PageHeader from '/resources/js/components/Others/PageHeader'
import ColorLabel from '/resources/js/components/Others/ColorLabel'
import Spinner from '/resources/js/components/FilesView/Spinner'
import { mapGetters } from 'vuex'
import axios from 'axios'
export default {
name: 'Plans',
@@ -116,13 +103,9 @@
MobileActionButton,
EmptyPageContent,
DatatableWrapper,
SectionTitle,
MobileHeader,
SwitchInput,
Trash2Icon,
PageHeader,
ButtonBase,
ColorLabel,
Edit2Icon,
Spinner,
},
@@ -144,27 +127,32 @@
plans: [],
columns: [
{
label: this.$t('admin_page_plans.table.status'),
label: this.$t('Visibility'),
field: 'data.attributes.status',
sortable: false
},
{
label: this.$t('admin_page_plans.table.name'),
label: this.$t('Name'),
field: 'data.attributes.name',
sortable: false
},
{
label: this.$t('admin_page_plans.table.subscribers'),
label: this.$t('Price'),
field: 'data.attributes.subscribers',
sortable: false
},
{
label: this.$t('admin_page_plans.table.price'),
label: this.$t('Interval'),
field: 'data.attributes.price',
sortable: false
},
{
label: this.$t('admin_page_plans.table.storage_capacity'),
label: this.$t('admin_page_plans.table.subscribers'),
field: 'data.attributes.capacity',
sortable: false
},
{
label: this.$t('Storage'),
field: 'data.attributes.capacity',
sortable: false
},
@@ -177,7 +165,7 @@
},
methods: {
changeStatus(val, id) {
this.$updateText('/admin/plans/' + id, 'is_active', val)
this.$updateText('/subscription/plans/' + id, 'visible', val)
}
},
created() {
@@ -186,66 +174,3 @@
}
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.table-tools {
background: white;
display: flex;
justify-content: space-between;
padding: 15px 0 10px;
position: sticky;
top: 40px;
z-index: 9;
}
.table {
.cell-item {
@include font-size(15);
white-space: nowrap;
}
.name {
font-weight: 700;
cursor: pointer;
}
}
@media only screen and (max-width: 690px) {
.table-tools {
padding: 0 0 5px;
}
}
.dark {
.table-tools {
background: $dark_mode_background;
}
.action-icons {
.icon {
cursor: pointer;
circle, path, line, polyline {
stroke: $dark_mode_text_primary;
}
}
}
.user-thumbnail {
.info {
.email {
color: $dark_mode_text_secondary;
}
}
}
}
</style>
+1
View File
@@ -8,6 +8,7 @@
</MobileActionButton>
</router-link>
</div>
<!--Datatable-->
<DatatableWrapper @init="isLoading = false" api="/api/admin/users" :paginator="true" :columns="columns" class="table table-users">
<template slot-scope="{ row }">