mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 16:22:14 +00:00
subscription detail page
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -1,13 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="progress-wrapper">
|
<div class="progress-wrapper">
|
||||||
<div class="chart">
|
<div class="chart rounded">
|
||||||
<div v-for="(chart, i) in data" :key="i" :style="{width: chart.progress + '%'}" class="chart-wrapper">
|
<div v-for="(chart, i) in data" :key="i" :style="{width: chart.progress + '%'}" class="chart-wrapper">
|
||||||
<!--<DotLabel class="label" :class="{'offset-top': chart.progress < 5}" :color="chart.color" :title="chart.value" />-->
|
<!--<DotLabel class="label" :class="{'offset-top': chart.progress < 5}" :color="chart.color" :title="chart.value" />-->
|
||||||
<span :class="['chart-progress', chart.color]"></span>
|
<span :class="['chart-progress', chart.color]"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<footer>
|
<footer>
|
||||||
<DotLabel v-for="(chart, i) in data" :key="i" :color="chart.color" :title="chart.title" />
|
<DotLabel v-for="(chart, i) in data" :key="i" :color="chart.color" :title="chart.title" v-if="chart && chart.title" />
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -35,6 +35,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
|
background: #e1e1ef;
|
||||||
|
|
||||||
.chart-wrapper {
|
.chart-wrapper {
|
||||||
|
|
||||||
|
|||||||
@@ -1,114 +1,122 @@
|
|||||||
<template>
|
<template>
|
||||||
<PageTab :is-loading="isLoading" class="form-fixed-width">
|
<PageTab :is-loading="isLoading">
|
||||||
<PageTabGroup v-if="subscription && !isLoading">
|
<div v-if="subscription" class="card shadow-card">
|
||||||
<FormLabel>
|
<div class="md:flex md:space-x-10 mb-8">
|
||||||
{{ $t('user_subscription.title') }}
|
<div class="md:mb-0 mb-6">
|
||||||
</FormLabel>
|
<b class="block leading-5 text-lg">
|
||||||
|
{{ status }}
|
||||||
|
</b>
|
||||||
|
<small class="text-gray-500">
|
||||||
|
{{ $t('We will send you a notification upon Subscription expiration') }}
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<b class="block leading-5 text-lg">
|
||||||
|
{{ price }}
|
||||||
|
</b>
|
||||||
|
<small class="text-gray-500">
|
||||||
|
{{ subscription.relationships.plan.data.attributes.name }}
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!--Info about active subscription-->
|
<div v-for="(limit, i) in limitations" :key="i" class="mb-6">
|
||||||
<div v-if="! subscription.attributes.canceled" class="state active">
|
<b class="mb-3 block text-sm text-gray-400">
|
||||||
<ListInfo class="list-info">
|
{{ limit.message }}
|
||||||
<ListInfoItem class="list-item" :title="$t('user_subscription.plan')"
|
</b>
|
||||||
:content="subscription.attributes.name + ' - ' + subscription.attributes.capacity_formatted"/>
|
<ProgressLine :data="limit.distribution" />
|
||||||
<ListInfoItem class="list-item" :title="$t('user_subscription.billed')" :content="$t('admin_page_user.subscription.interval_mo')"/>
|
</div>
|
||||||
<ListInfoItem class="list-item" :title="$t('user_subscription.status')" :content="status"/>
|
</div>
|
||||||
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.created_at')" :content="subscription.attributes.created_at"/>
|
|
||||||
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.renews_at')" :content="subscription.attributes.ends_at"/>
|
|
||||||
</ListInfo>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--Info about canceled subscription-->
|
<div v-if="! subscription && !isLoading" class="card shadow-card">
|
||||||
<div v-if="subscription.attributes.canceled" class="state canceled">
|
<InfoBox style="margin-bottom: 0">
|
||||||
<ListInfo class="list-info">
|
<p>{{ $t("User don't have any subscription") }}</p>
|
||||||
<ListInfoItem class="list-item" :title="$t('user_subscription.plan')" :content="subscription.attributes.name + ' - ' + subscription.attributes.capacity_formatted"/>
|
</InfoBox>
|
||||||
<ListInfoItem class="list-item" :title="$t('user_subscription.status')" :content="status"/>
|
</div>
|
||||||
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.canceled_at')" :content="subscription.attributes.canceled_at"/>
|
|
||||||
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.ends_at')" :content="subscription.attributes.ends_at"/>
|
|
||||||
</ListInfo>
|
|
||||||
</div>
|
|
||||||
</PageTabGroup>
|
|
||||||
<PageTabGroup v-if="! subscription && !isLoading">
|
|
||||||
<InfoBox>
|
|
||||||
<p>{{ $t('admin_page_user.subscription.empty') }}</p>
|
|
||||||
</InfoBox>
|
|
||||||
</PageTabGroup>
|
|
||||||
</PageTab>
|
</PageTab>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
|
|
||||||
import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
|
|
||||||
import ListInfoItem from '/resources/js/components/Others/ListInfoItem'
|
|
||||||
import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
|
|
||||||
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
|
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
|
||||||
import PageTab from '/resources/js/components/Others/Layout/PageTab'
|
import ProgressLine from "../../../../components/Admin/ProgressLine"
|
||||||
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
|
import PageTab from '/resources/js/components/Others/Layout/PageTab'
|
||||||
import ListInfo from '/resources/js/components/Others/ListInfo'
|
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
|
||||||
import {ExternalLinkIcon} from "vue-feather-icons"
|
import axios from 'axios'
|
||||||
import {mapGetters} from 'vuex'
|
|
||||||
import {events} from '/resources/js/bus'
|
|
||||||
import axios from 'axios'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'UserSubscription',
|
name: 'UserSubscription',
|
||||||
components: {
|
props: [
|
||||||
ExternalLinkIcon,
|
'user'
|
||||||
DatatableWrapper,
|
],
|
||||||
ListInfoItem,
|
components: {
|
||||||
PageTabGroup,
|
ProgressLine,
|
||||||
ButtonBase,
|
ButtonBase,
|
||||||
FormLabel,
|
InfoBox,
|
||||||
ListInfo,
|
PageTab,
|
||||||
InfoBox,
|
},
|
||||||
PageTab,
|
computed: {
|
||||||
},
|
status() {
|
||||||
computed: {
|
return {
|
||||||
status() {
|
'active': `Active until ${this.subscription.attributes.renews_at}`,
|
||||||
if (this.subscription.attributes.incomplete) {
|
'cancelled': `Active until ${this.subscription.attributes.ends_at}`,
|
||||||
return this.$t('global.incomplete')
|
}[this.subscription.attributes.status]
|
||||||
}
|
},
|
||||||
if (this.subscription.attributes.canceled) {
|
price() {
|
||||||
return this.$t('global.canceled')
|
return {
|
||||||
}
|
'month': `${this.subscription.relationships.plan.data.attributes.price} Per Month`,
|
||||||
if (this.subscription.attributes.active) {
|
'year': `${this.subscription.relationships.plan.data.attributes.price} Per Year`,
|
||||||
return this.$t('global.active')
|
}[this.subscription.relationships.plan.data.attributes.interval]
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
data() {
|
||||||
data() {
|
return {
|
||||||
return {
|
subscription: undefined,
|
||||||
subscription: undefined,
|
isLoading: true,
|
||||||
isLoading: true,
|
limitations: [],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
axios.get('/api/admin/users/' + this.$route.params.id + '/subscription')
|
axios.get(`/api/subscription/users/${this.$route.params.id}/subscription`)
|
||||||
.then(response => {
|
.then(response => {
|
||||||
this.subscription = response.data.data
|
this.subscription = response.data.data
|
||||||
this.isLoading = false
|
|
||||||
}).catch(error => {
|
Object
|
||||||
if (error.response.status == 404) {
|
.entries(this.user.data.meta.limitations)
|
||||||
this.isLoading = false
|
.map(([key, item]) => {
|
||||||
}
|
|
||||||
})
|
let payload = {
|
||||||
}
|
color: {
|
||||||
}
|
'max_storage_amount': 'warning',
|
||||||
|
'max_team_members': 'purple',
|
||||||
|
},
|
||||||
|
message: {
|
||||||
|
'max_storage_amount': `Total ${item.use} of ${item.total} Used`,
|
||||||
|
'max_team_members': `Total ${item.use} of ${item.total} Members`,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
'max_storage_amount': `Storage`,
|
||||||
|
'max_team_members': `Team Members`,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.limitations.push({
|
||||||
|
message: payload.message[key],
|
||||||
|
distribution: [
|
||||||
|
{
|
||||||
|
progress: item.percentage,
|
||||||
|
color: payload.color[key],
|
||||||
|
title: payload.title[key],
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
this.isLoading = false
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
if (error.response.status === 404)
|
||||||
|
this.isLoading = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import '/resources/sass/vuefilemanager/_variables';
|
|
||||||
@import '/resources/sass/vuefilemanager/_mixins';
|
|
||||||
|
|
||||||
.cancel-plan {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-info {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.list-item {
|
|
||||||
flex: 0 0 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -124,14 +124,14 @@
|
|||||||
title: this.$t('menu.profile'),
|
title: this.$t('menu.profile'),
|
||||||
route: 'Profile',
|
route: 'Profile',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: this.$t('menu.storage'),
|
|
||||||
route: 'Storage',
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: this.$t('menu.password'),
|
title: this.$t('menu.password'),
|
||||||
route: 'Password',
|
route: 'Password',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: this.$t('menu.storage'),
|
||||||
|
route: 'Storage',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: this.$t('menu.subscription'),
|
title: this.$t('menu.subscription'),
|
||||||
route: 'Subscription',
|
route: 'Subscription',
|
||||||
|
|||||||
@@ -1,244 +1,230 @@
|
|||||||
<template>
|
<template>
|
||||||
<PageTab :is-loading="isLoading">
|
<PageTab :is-loading="isLoading">
|
||||||
<PageTabGroup v-if="subscription && !isLoading">
|
<div v-if="subscription" class="card shadow-card">
|
||||||
<FormLabel>
|
<div class="md:flex md:space-x-10 mb-8">
|
||||||
{{ $t('user_subscription.title') }}
|
<div class="md:mb-0 mb-6">
|
||||||
</FormLabel>
|
<b class="block leading-5 text-lg">
|
||||||
|
{{ status }}
|
||||||
|
</b>
|
||||||
|
<small class="text-gray-500">
|
||||||
|
{{ $t('We will send you a notification upon Subscription expiration') }}
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<b class="block leading-5 text-lg">
|
||||||
|
{{ price }}
|
||||||
|
</b>
|
||||||
|
<small class="text-gray-500">
|
||||||
|
{{ subscription.relationships.plan.data.attributes.name }}
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!--Info about active subscription-->
|
<div v-for="(limit, i) in limitations" :key="i" class="mb-6">
|
||||||
<div v-if="! subscription.data.attributes.canceled" class="state active">
|
<b class="mb-3 block text-sm text-gray-400">
|
||||||
<ListInfo class="list-info">
|
{{ limit.message }}
|
||||||
<ListInfoItem class="list-item" :title="$t('user_subscription.plan')"
|
</b>
|
||||||
:content="subscription.data.attributes.name + ' - ' + subscription.data.attributes.capacity_formatted"/>
|
<ProgressLine :data="limit.distribution" />
|
||||||
<ListInfoItem class="list-item" :title="$t('user_subscription.billed')" :content="$t('admin_page_user.subscription.interval_mo')"/>
|
</div>
|
||||||
<ListInfoItem class="list-item" :title="$t('user_subscription.status')" :content="status"/>
|
|
||||||
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.created_at')" :content="subscription.data.attributes.created_at"/>
|
|
||||||
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.renews_at')" :content="subscription.data.attributes.ends_at"/>
|
|
||||||
</ListInfo>
|
|
||||||
<div class="plan-action">
|
|
||||||
<ButtonBase
|
|
||||||
:disabled="isDeleting"
|
|
||||||
@click.native="cancelSubscription"
|
|
||||||
:button-style="cancelButtonStyle"
|
|
||||||
class="confirm-button">
|
|
||||||
{{ cancelButtonText }}
|
|
||||||
</ButtonBase>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--Info about canceled subscription-->
|
<div class="flex space-x-4 mt-8">
|
||||||
<div v-if="subscription.data.attributes.canceled" class="state canceled">
|
<ButtonBase class="popup-button" button-style="secondary">
|
||||||
<ListInfo class="list-info">
|
{{ $t('Cancel Subscription') }}
|
||||||
<ListInfoItem class="list-item" :title="$t('user_subscription.plan')" :content="subscription.data.attributes.name + ' - ' + subscription.data.attributes.capacity_formatted"/>
|
</ButtonBase>
|
||||||
<ListInfoItem class="list-item" :title="$t('user_subscription.status')" :content="status"/>
|
<ButtonBase @click.native="$openUpgradeOptions" class="popup-button" button-style="theme">
|
||||||
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.canceled_at')" :content="subscription.data.attributes.canceled_at"/>
|
{{ $t('Upgrade Plan') }}
|
||||||
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.ends_at')" :content="subscription.data.attributes.ends_at"/>
|
</ButtonBase>
|
||||||
</ListInfo>
|
</div>
|
||||||
<div class="plan-action">
|
</div>
|
||||||
<ButtonBase
|
|
||||||
:disabled="isResuming"
|
<div v-if="! subscription && !isLoading" class="card shadow-card">
|
||||||
@click.native="resumeSubscription"
|
<InfoBox style="margin-bottom: 0">
|
||||||
:button-style="resumeButtonStyle"
|
<p>{{ $t("You don't have any subscription") }}</p>
|
||||||
class="confirm-button">
|
</InfoBox>
|
||||||
{{ resumeButtonText }}
|
</div>
|
||||||
</ButtonBase>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</PageTabGroup>
|
|
||||||
<InfoBox v-if="! subscription && !isLoading">
|
|
||||||
<p>{{ $t('user_subscription.empty') }}</p>
|
|
||||||
</InfoBox>
|
|
||||||
</PageTab>
|
</PageTab>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
|
import ProgressLine from "../../components/Admin/ProgressLine";
|
||||||
import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
|
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
|
||||||
import ListInfoItem from '/resources/js/components/Others/ListInfoItem'
|
import PageTab from '/resources/js/components/Others/Layout/PageTab'
|
||||||
import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
|
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
|
||||||
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
|
import {mapGetters} from 'vuex'
|
||||||
import PageTab from '/resources/js/components/Others/Layout/PageTab'
|
import {events} from '/resources/js/bus'
|
||||||
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
|
import axios from 'axios'
|
||||||
import ListInfo from '/resources/js/components/Others/ListInfo'
|
|
||||||
import {ExternalLinkIcon} from "vue-feather-icons"
|
|
||||||
import {mapGetters} from 'vuex'
|
|
||||||
import {events} from '/resources/js/bus'
|
|
||||||
import axios from 'axios'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'UserSubscription',
|
name: 'UserSubscription',
|
||||||
components: {
|
components: {
|
||||||
ExternalLinkIcon,
|
ProgressLine,
|
||||||
DatatableWrapper,
|
ButtonBase,
|
||||||
ListInfoItem,
|
InfoBox,
|
||||||
PageTabGroup,
|
PageTab,
|
||||||
ButtonBase,
|
},
|
||||||
FormLabel,
|
computed: {
|
||||||
ListInfo,
|
...mapGetters([
|
||||||
InfoBox,
|
'user',
|
||||||
PageTab,
|
]),
|
||||||
},
|
status() {
|
||||||
computed: {
|
return {
|
||||||
cancelButtonText() {
|
'active': `Active until ${this.subscription.attributes.renews_at}`,
|
||||||
return this.isConfirmedCancel ? this.$t('popup_share_edit.confirm') : this.$t('user_subscription.cancel_plan')
|
'cancelled': `Active until ${this.subscription.attributes.ends_at}`,
|
||||||
},
|
}[this.subscription.attributes.status]
|
||||||
cancelButtonStyle() {
|
},
|
||||||
return this.isConfirmedCancel ? 'danger-solid' : 'secondary'
|
price() {
|
||||||
},
|
return {
|
||||||
resumeButtonText() {
|
'month': `${this.subscription.relationships.plan.data.attributes.price} Per Month`,
|
||||||
return this.isConfirmedResume ? this.$t('popup_share_edit.confirm') : this.$t('user_subscription.resume_plan')
|
'year': `${this.subscription.relationships.plan.data.attributes.price} Per Year`,
|
||||||
},
|
}[this.subscription.relationships.plan.data.attributes.interval]
|
||||||
resumeButtonStyle() {
|
},
|
||||||
return this.isConfirmedResume ? 'theme-solid' : 'secondary'
|
},
|
||||||
},
|
data() {
|
||||||
status() {
|
return {
|
||||||
if (this.subscription.data.attributes.incomplete) {
|
subscription: undefined,
|
||||||
return this.$t('global.incomplete')
|
limitations: [],
|
||||||
}
|
isConfirmedCancel: false,
|
||||||
if (this.subscription.data.attributes.canceled) {
|
isConfirmedResume: false,
|
||||||
return this.$t('global.canceled')
|
isDeleting: false,
|
||||||
}
|
isResuming: false,
|
||||||
if (this.subscription.data.attributes.active) {
|
isLoading: true,
|
||||||
return this.$t('global.active')
|
}
|
||||||
}
|
},
|
||||||
}
|
methods: {
|
||||||
},
|
cancelSubscription() {
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
subscription: undefined,
|
|
||||||
isConfirmedCancel: false,
|
|
||||||
isConfirmedResume: false,
|
|
||||||
isDeleting: false,
|
|
||||||
isResuming: false,
|
|
||||||
isLoading: true,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
cancelSubscription() {
|
|
||||||
|
|
||||||
// Set confirm button
|
// Set confirm button
|
||||||
if (!this.isConfirmedCancel) {
|
if (!this.isConfirmedCancel) {
|
||||||
this.isConfirmedCancel = true
|
this.isConfirmedCancel = true
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// Start deleting spinner button
|
// Start deleting spinner button
|
||||||
this.isDeleting = true
|
this.isDeleting = true
|
||||||
this.isLoading = true
|
this.isLoading = true
|
||||||
|
|
||||||
// Send delete request
|
// Send delete request
|
||||||
axios
|
axios
|
||||||
.post('/api/user/subscription/cancel')
|
.post('/api/user/subscription/cancel')
|
||||||
.then(() => {
|
.then(() => {
|
||||||
|
|
||||||
// Update user data
|
// Update user data
|
||||||
this.$store.dispatch('getAppData').then(() => {
|
this.$store.dispatch('getAppData').then(() => {
|
||||||
this.fetchSubscriptionDetail()
|
this.fetchSubscriptionDetail()
|
||||||
})
|
})
|
||||||
|
|
||||||
events.$emit('alert:open', {
|
events.$emit('alert:open', {
|
||||||
emoji: '👍',
|
emoji: '👍',
|
||||||
title: this.$t('popup_subscription_cancel.title'),
|
title: this.$t('popup_subscription_cancel.title'),
|
||||||
message: this.$t('popup_subscription_cancel.message'),
|
message: this.$t('popup_subscription_cancel.message'),
|
||||||
buttonStyle: 'theme',
|
buttonStyle: 'theme',
|
||||||
button: this.$t('popup_subscription_cancel.button')
|
button: this.$t('popup_subscription_cancel.button')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
events.$emit('alert:open', {
|
events.$emit('alert:open', {
|
||||||
title: this.$t('popup_error.title'),
|
title: this.$t('popup_error.title'),
|
||||||
message: this.$t('popup_error.message'),
|
message: this.$t('popup_error.message'),
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
|
|
||||||
// End deleting spinner button
|
// End deleting spinner button
|
||||||
this.isDeleting = false
|
this.isDeleting = false
|
||||||
this.isLoading = false
|
this.isLoading = false
|
||||||
this.isConfirmedCancel = false
|
this.isConfirmedCancel = false
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
resumeSubscription() {
|
resumeSubscription() {
|
||||||
|
|
||||||
// Set confirm button
|
// Set confirm button
|
||||||
if (! this.isConfirmedResume) {
|
if (!this.isConfirmedResume) {
|
||||||
this.isConfirmedResume = true
|
this.isConfirmedResume = true
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// Start deleting spinner button
|
// Start deleting spinner button
|
||||||
this.isResuming = true
|
this.isResuming = true
|
||||||
this.isLoading = true
|
this.isLoading = true
|
||||||
|
|
||||||
// Send delete request
|
// Send delete request
|
||||||
axios
|
axios
|
||||||
.post('/api/user/subscription/resume')
|
.post('/api/user/subscription/resume')
|
||||||
.then(() => {
|
.then(() => {
|
||||||
|
|
||||||
// Update user data
|
// Update user data
|
||||||
this.$store.dispatch('getAppData').then(() => {
|
this.$store.dispatch('getAppData').then(() => {
|
||||||
this.fetchSubscriptionDetail()
|
this.fetchSubscriptionDetail()
|
||||||
})
|
})
|
||||||
|
|
||||||
events.$emit('alert:open', {
|
events.$emit('alert:open', {
|
||||||
emoji: '👍',
|
emoji: '👍',
|
||||||
title: this.$t('popup_subscription_resumed.title'),
|
title: this.$t('popup_subscription_resumed.title'),
|
||||||
message: this.$t('popup_subscription_resumed.message'),
|
message: this.$t('popup_subscription_resumed.message'),
|
||||||
buttonStyle: 'theme',
|
buttonStyle: 'theme',
|
||||||
button: this.$t('popup_subscription_resumed.button')
|
button: this.$t('popup_subscription_resumed.button')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
events.$emit('alert:open', {
|
events.$emit('alert:open', {
|
||||||
title: this.$t('popup_error.title'),
|
title: this.$t('popup_error.title'),
|
||||||
message: this.$t('popup_error.message'),
|
message: this.$t('popup_error.message'),
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
|
|
||||||
// End deleting spinner button
|
// End deleting spinner button
|
||||||
this.isResuming = false
|
this.isResuming = false
|
||||||
this.isLoading = false
|
this.isLoading = false
|
||||||
this.isConfirmedResume = false
|
this.isConfirmedResume = false
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
fetchSubscriptionDetail() {
|
fetchSubscriptionDetail() {
|
||||||
axios.get('/api/user/subscription')
|
axios.get('/api/subscription/detail')
|
||||||
.then(response => {
|
.then(response => {
|
||||||
|
|
||||||
if (response.status == 204) {
|
this.subscription = response.data.data
|
||||||
this.subscription = undefined
|
|
||||||
}
|
|
||||||
|
|
||||||
if (response.status == 200) {
|
Object
|
||||||
this.subscription = response.data
|
.entries(this.user.data.meta.limitations)
|
||||||
}
|
.map(([key, item]) => {
|
||||||
|
|
||||||
}).finally(() => {
|
let payload = {
|
||||||
this.isLoading = false
|
color: {
|
||||||
})
|
'max_storage_amount': 'warning',
|
||||||
}
|
'max_team_members': 'purple',
|
||||||
},
|
},
|
||||||
created() {
|
message: {
|
||||||
this.fetchSubscriptionDetail()
|
'max_storage_amount': `Total ${item.use} of ${item.total} Used`,
|
||||||
}
|
'max_team_members': `Total ${item.use} of ${item.total} Members`,
|
||||||
}
|
},
|
||||||
|
title: {
|
||||||
|
'max_storage_amount': `Storage`,
|
||||||
|
'max_team_members': `Team Members`,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.limitations.push({
|
||||||
|
message: payload.message[key],
|
||||||
|
distribution: [
|
||||||
|
{
|
||||||
|
progress: item.percentage,
|
||||||
|
color: payload.color[key],
|
||||||
|
title: payload.title[key],
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
this.isLoading = false
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.isLoading = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.fetchSubscriptionDetail()
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import '/resources/sass/vuefilemanager/_variables';
|
|
||||||
@import '/resources/sass/vuefilemanager/_mixins';
|
|
||||||
|
|
||||||
.plan-action {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-info {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.list-item {
|
|
||||||
flex: 0 0 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -742,6 +742,16 @@ class SetupDevEnvironment extends Command
|
|||||||
'name' => 'Finance Documents',
|
'name' => 'Finance Documents',
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
collect([$companyProjectFolder, $financeDocumentsFolder])
|
||||||
|
->each(function ($folder) use ($user) {
|
||||||
|
DB::table('team_folder_members')
|
||||||
|
->insert([
|
||||||
|
'parent_id' => $folder->id,
|
||||||
|
'user_id' => $user->id,
|
||||||
|
'permission' => 'owner',
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
// Attach members
|
// Attach members
|
||||||
$members = User::whereNotIn('email', ['howdy@hi5ve.digital'])
|
$members = User::whereNotIn('email', ['howdy@hi5ve.digital'])
|
||||||
->get();
|
->get();
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
namespace App\Users\Models;
|
namespace App\Users\Models;
|
||||||
|
|
||||||
use ByteUnits\Metric;
|
use ByteUnits\Metric;
|
||||||
@@ -92,7 +93,7 @@ class User extends Authenticatable implements MustVerifyEmail
|
|||||||
{
|
{
|
||||||
$is_storage_limit = get_settings('storage_limitation') ?? 1;
|
$is_storage_limit = get_settings('storage_limitation') ?? 1;
|
||||||
|
|
||||||
if (! $is_storage_limit) {
|
if (!$is_storage_limit) {
|
||||||
return [
|
return [
|
||||||
'used' => $this->usedCapacity,
|
'used' => $this->usedCapacity,
|
||||||
'used_formatted' => Metric::bytes($this->usedCapacity)->format(),
|
'used_formatted' => Metric::bytes($this->usedCapacity)->format(),
|
||||||
@@ -100,20 +101,48 @@ class User extends Authenticatable implements MustVerifyEmail
|
|||||||
}
|
}
|
||||||
|
|
||||||
return [
|
return [
|
||||||
'used' => (float) get_storage_fill_percentage($this->usedCapacity, $this->limitations->max_storage_amount),
|
'used' => (float)get_storage_fill_percentage($this->usedCapacity, $this->limitations->max_storage_amount),
|
||||||
'used_formatted' => get_storage_fill_percentage($this->usedCapacity, $this->limitations->max_storage_amount) . '%',
|
'used_formatted' => get_storage_fill_percentage($this->usedCapacity, $this->limitations->max_storage_amount) . '%',
|
||||||
'capacity' => $this->limitations->max_storage_amount,
|
'capacity' => $this->limitations->max_storage_amount,
|
||||||
'capacity_formatted' => format_gigabytes($this->limitations->max_storage_amount),
|
'capacity_formatted' => format_gigabytes($this->limitations->max_storage_amount),
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO: caching & refactoring
|
||||||
|
public function accountLimitations(): array
|
||||||
|
{
|
||||||
|
$members = \DB::table('team_folder_members')
|
||||||
|
->where('user_id', $this->id)
|
||||||
|
->pluck('parent_id');
|
||||||
|
|
||||||
|
$membersUse = \DB::table('team_folder_members')
|
||||||
|
->where('user_id', '!=', $this->id)
|
||||||
|
->whereIn('parent_id', $members)
|
||||||
|
->pluck('user_id')
|
||||||
|
->unique()
|
||||||
|
->count();
|
||||||
|
|
||||||
|
return [
|
||||||
|
'max_storage_amount' => [
|
||||||
|
'use' => Metric::bytes($this->usedCapacity)->format(),
|
||||||
|
'total' => format_gigabytes($this->limitations->max_storage_amount),
|
||||||
|
'percentage' => (float)get_storage_fill_percentage($this->usedCapacity, $this->limitations->max_storage_amount),
|
||||||
|
],
|
||||||
|
'max_team_members' => [
|
||||||
|
'use' => $membersUse,
|
||||||
|
'total' => (int)$this->limitations->max_team_members,
|
||||||
|
'percentage' => ($membersUse / $this->limitations->max_team_members) * 100,
|
||||||
|
],
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get user used storage capacity in bytes
|
* Get user used storage capacity in bytes
|
||||||
*/
|
*/
|
||||||
public function getUsedCapacityAttribute(): int
|
public function getUsedCapacityAttribute(): int
|
||||||
{
|
{
|
||||||
return $this->filesWithTrashed
|
return $this->filesWithTrashed
|
||||||
->map(fn ($item) => $item->getRawOriginal())->sum('filesize');
|
->map(fn($item) => $item->getRawOriginal())->sum('filesize');
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -44,6 +44,9 @@ class UserResource extends JsonResource
|
|||||||
'subscription' => new SubscriptionResource($this->subscription),
|
'subscription' => new SubscriptionResource($this->subscription),
|
||||||
]),
|
]),
|
||||||
],
|
],
|
||||||
|
'meta' => [
|
||||||
|
'limitations' => $this->accountLimitations(),
|
||||||
|
],
|
||||||
],
|
],
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user