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

plan list refactoring

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

213
resources/js/views/Admin/Plans.vue
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>