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

subscription detail page

Browse Source
This commit is contained in:
Čarodej
2021-11-24 10:31:37 +01:00
parent 913bdf70ad
commit 7fe576ba26
8 changed files with 562 additions and 1817 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1678
public/mix-manifest.json
View File

File diff suppressed because it is too large Load Diff

5
resources/js/components/Admin/ProgressLine.vue
View File

@@ -1,13 +1,13 @@
<template>
<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">
<!--<DotLabel class="label" :class="{'offset-top': chart.progress < 5}" :color="chart.color" :title="chart.value" />-->
<span :class="['chart-progress', chart.color]"></span>
</div>
</div>
<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>
</div>
</template>
@@ -35,6 +35,7 @@
display: flex;
align-items: center;
margin-bottom: 14px;
background: #e1e1ef;
.chart-wrapper {

216
resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
View File

@@ -1,114 +1,122 @@
<template>
<PageTab :is-loading="isLoading" class="form-fixed-width">
<PageTabGroup v-if="subscription && !isLoading">
<FormLabel>
{{ $t('user_subscription.title') }}
</FormLabel>
<PageTab :is-loading="isLoading">
<div v-if="subscription" class="card shadow-card">
<div class="md:flex md:space-x-10 mb-8">
<div class="md:mb-0 mb-6">
<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-if="! subscription.attributes.canceled" class="state active">
<ListInfo class="list-info">
<ListInfoItem class="list-item" :title="$t('user_subscription.plan')"
:content="subscription.attributes.name + ' - ' + subscription.attributes.capacity_formatted"/>
<ListInfoItem class="list-item" :title="$t('user_subscription.billed')" :content="$t('admin_page_user.subscription.interval_mo')"/>
<ListInfoItem class="list-item" :title="$t('user_subscription.status')" :content="status"/>
<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>
<div v-for="(limit, i) in limitations" :key="i" class="mb-6">
<b class="mb-3 block text-sm text-gray-400">
{{ limit.message }}
</b>
<ProgressLine :data="limit.distribution" />
</div>
</div>
<!--Info about canceled subscription-->
<div v-if="subscription.attributes.canceled" class="state canceled">
<ListInfo class="list-info">
<ListInfoItem class="list-item" :title="$t('user_subscription.plan')" :content="subscription.attributes.name + ' - ' + subscription.attributes.capacity_formatted"/>
<ListInfoItem class="list-item" :title="$t('user_subscription.status')" :content="status"/>
<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>
<div v-if="! subscription && !isLoading" class="card shadow-card">
<InfoBox style="margin-bottom: 0">
<p>{{ $t("User don't have any subscription") }}</p>
</InfoBox>
</div>
</PageTab>
</template>
<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 PageTab from '/resources/js/components/Others/Layout/PageTab'
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
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'
import ProgressLine from "../../../../components/Admin/ProgressLine"
import PageTab from '/resources/js/components/Others/Layout/PageTab'
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
import axios from 'axios'
export default {
name: 'UserSubscription',
components: {
ExternalLinkIcon,
DatatableWrapper,
ListInfoItem,
PageTabGroup,
ButtonBase,
FormLabel,
ListInfo,
InfoBox,
PageTab,
},
computed: {
status() {
if (this.subscription.attributes.incomplete) {
return this.$t('global.incomplete')
}
if (this.subscription.attributes.canceled) {
return this.$t('global.canceled')
}
if (this.subscription.attributes.active) {
return this.$t('global.active')
}
}
},
data() {
return {
subscription: undefined,
isLoading: true,
}
},
created() {
axios.get('/api/admin/users/' + this.$route.params.id + '/subscription')
.then(response => {
this.subscription = response.data.data
this.isLoading = false
}).catch(error => {
if (error.response.status == 404) {
this.isLoading = false
}
})
}
}
export default {
name: 'UserSubscription',
props: [
'user'
],
components: {
ProgressLine,
ButtonBase,
InfoBox,
PageTab,
},
computed: {
status() {
return {
'active': `Active until ${this.subscription.attributes.renews_at}`,
'cancelled': `Active until ${this.subscription.attributes.ends_at}`,
}[this.subscription.attributes.status]
},
price() {
return {
'month': `${this.subscription.relationships.plan.data.attributes.price} Per Month`,
'year': `${this.subscription.relationships.plan.data.attributes.price} Per Year`,
}[this.subscription.relationships.plan.data.attributes.interval]
},
},
data() {
return {
subscription: undefined,
isLoading: true,
limitations: [],
}
},
created() {
axios.get(`/api/subscription/users/${this.$route.params.id}/subscription`)
.then(response => {
this.subscription = response.data.data
Object
.entries(this.user.data.meta.limitations)
.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>
<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>

8
resources/js/views/Profile.vue
View File

@@ -124,14 +124,14 @@
title: this.$t('menu.profile'),
route: 'Profile',
},
{
title: this.$t('menu.storage'),
route: 'Storage',
},
{
title: this.$t('menu.password'),
route: 'Password',
},
{
title: this.$t('menu.storage'),
route: 'Storage',
},
{
title: this.$t('menu.subscription'),
route: 'Subscription',

424
resources/js/views/User/Subscription.vue
View File

@@ -1,244 +1,230 @@
<template>
<PageTab :is-loading="isLoading">
<PageTabGroup v-if="subscription && !isLoading">
<FormLabel>
{{ $t('user_subscription.title') }}
</FormLabel>
<div v-if="subscription" class="card shadow-card">
<div class="md:flex md:space-x-10 mb-8">
<div class="md:mb-0 mb-6">
<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-if="! subscription.data.attributes.canceled" class="state active">
<ListInfo class="list-info">
<ListInfoItem class="list-item" :title="$t('user_subscription.plan')"
:content="subscription.data.attributes.name + ' - ' + subscription.data.attributes.capacity_formatted"/>
<ListInfoItem class="list-item" :title="$t('user_subscription.billed')" :content="$t('admin_page_user.subscription.interval_mo')"/>
<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>
<div v-for="(limit, i) in limitations" :key="i" class="mb-6">
<b class="mb-3 block text-sm text-gray-400">
{{ limit.message }}
</b>
<ProgressLine :data="limit.distribution" />
</div>
<!--Info about canceled subscription-->
<div v-if="subscription.data.attributes.canceled" class="state canceled">
<ListInfo class="list-info">
<ListInfoItem class="list-item" :title="$t('user_subscription.plan')" :content="subscription.data.attributes.name + ' - ' + subscription.data.attributes.capacity_formatted"/>
<ListInfoItem class="list-item" :title="$t('user_subscription.status')" :content="status"/>
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.canceled_at')" :content="subscription.data.attributes.canceled_at"/>
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.ends_at')" :content="subscription.data.attributes.ends_at"/>
</ListInfo>
<div class="plan-action">
<ButtonBase
:disabled="isResuming"
@click.native="resumeSubscription"
:button-style="resumeButtonStyle"
class="confirm-button">
{{ resumeButtonText }}
</ButtonBase>
</div>
</div>
</PageTabGroup>
<InfoBox v-if="! subscription && !isLoading">
<p>{{ $t('user_subscription.empty') }}</p>
</InfoBox>
<div class="flex space-x-4 mt-8">
<ButtonBase class="popup-button" button-style="secondary">
{{ $t('Cancel Subscription') }}
</ButtonBase>
<ButtonBase @click.native="$openUpgradeOptions" class="popup-button" button-style="theme">
{{ $t('Upgrade Plan') }}
</ButtonBase>
</div>
</div>
<div v-if="! subscription && !isLoading" class="card shadow-card">
<InfoBox style="margin-bottom: 0">
<p>{{ $t("You don't have any subscription") }}</p>
</InfoBox>
</div>
</PageTab>
</template>
<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 PageTab from '/resources/js/components/Others/Layout/PageTab'
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
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'
import ProgressLine from "../../components/Admin/ProgressLine";
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
import PageTab from '/resources/js/components/Others/Layout/PageTab'
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
import {mapGetters} from 'vuex'
import {events} from '/resources/js/bus'
import axios from 'axios'
export default {
name: 'UserSubscription',
components: {
ExternalLinkIcon,
DatatableWrapper,
ListInfoItem,
PageTabGroup,
ButtonBase,
FormLabel,
ListInfo,
InfoBox,
PageTab,
},
computed: {
cancelButtonText() {
return this.isConfirmedCancel ? this.$t('popup_share_edit.confirm') : this.$t('user_subscription.cancel_plan')
},
cancelButtonStyle() {
return this.isConfirmedCancel ? 'danger-solid' : 'secondary'
},
resumeButtonText() {
return this.isConfirmedResume ? this.$t('popup_share_edit.confirm') : this.$t('user_subscription.resume_plan')
},
resumeButtonStyle() {
return this.isConfirmedResume ? 'theme-solid' : 'secondary'
},
status() {
if (this.subscription.data.attributes.incomplete) {
return this.$t('global.incomplete')
}
if (this.subscription.data.attributes.canceled) {
return this.$t('global.canceled')
}
if (this.subscription.data.attributes.active) {
return this.$t('global.active')
}
}
},
data() {
return {
subscription: undefined,
isConfirmedCancel: false,
isConfirmedResume: false,
isDeleting: false,
isResuming: false,
isLoading: true,
}
},
methods: {
cancelSubscription() {
export default {
name: 'UserSubscription',
components: {
ProgressLine,
ButtonBase,
InfoBox,
PageTab,
},
computed: {
...mapGetters([
'user',
]),
status() {
return {
'active': `Active until ${this.subscription.attributes.renews_at}`,
'cancelled': `Active until ${this.subscription.attributes.ends_at}`,
}[this.subscription.attributes.status]
},
price() {
return {
'month': `${this.subscription.relationships.plan.data.attributes.price} Per Month`,
'year': `${this.subscription.relationships.plan.data.attributes.price} Per Year`,
}[this.subscription.relationships.plan.data.attributes.interval]
},
},
data() {
return {
subscription: undefined,
limitations: [],
isConfirmedCancel: false,
isConfirmedResume: false,
isDeleting: false,
isResuming: false,
isLoading: true,
}
},
methods: {
cancelSubscription() {
// Set confirm button
if (!this.isConfirmedCancel) {
this.isConfirmedCancel = true
return
}
// Set confirm button
if (!this.isConfirmedCancel) {
this.isConfirmedCancel = true
return
}
// Start deleting spinner button
this.isDeleting = true
this.isLoading = true
// Start deleting spinner button
this.isDeleting = true
this.isLoading = true
// Send delete request
axios
.post('/api/user/subscription/cancel')
.then(() => {
// Send delete request
axios
.post('/api/user/subscription/cancel')
.then(() => {
// Update user data
this.$store.dispatch('getAppData').then(() => {
this.fetchSubscriptionDetail()
})
// Update user data
this.$store.dispatch('getAppData').then(() => {
this.fetchSubscriptionDetail()
})
events.$emit('alert:open', {
emoji: '👍',
title: this.$t('popup_subscription_cancel.title'),
message: this.$t('popup_subscription_cancel.message'),
buttonStyle: 'theme',
button: this.$t('popup_subscription_cancel.button')
})
})
.catch(() => {
events.$emit('alert:open', {
title: this.$t('popup_error.title'),
message: this.$t('popup_error.message'),
})
})
.finally(() => {
events.$emit('alert:open', {
emoji: '👍',
title: this.$t('popup_subscription_cancel.title'),
message: this.$t('popup_subscription_cancel.message'),
buttonStyle: 'theme',
button: this.$t('popup_subscription_cancel.button')
})
})
.catch(() => {
events.$emit('alert:open', {
title: this.$t('popup_error.title'),
message: this.$t('popup_error.message'),
})
})
.finally(() => {
// End deleting spinner button
this.isDeleting = false
this.isLoading = false
this.isConfirmedCancel = false
})
},
resumeSubscription() {
// End deleting spinner button
this.isDeleting = false
this.isLoading = false
this.isConfirmedCancel = false
})
},
resumeSubscription() {
// Set confirm button
if (! this.isConfirmedResume) {
this.isConfirmedResume = true
return
}
// Set confirm button
if (!this.isConfirmedResume) {
this.isConfirmedResume = true
return
}
// Start deleting spinner button
this.isResuming = true
this.isLoading = true
// Start deleting spinner button
this.isResuming = true
this.isLoading = true
// Send delete request
axios
.post('/api/user/subscription/resume')
.then(() => {
// Send delete request
axios
.post('/api/user/subscription/resume')
.then(() => {
// Update user data
this.$store.dispatch('getAppData').then(() => {
this.fetchSubscriptionDetail()
})
// Update user data
this.$store.dispatch('getAppData').then(() => {
this.fetchSubscriptionDetail()
})
events.$emit('alert:open', {
emoji: '👍',
title: this.$t('popup_subscription_resumed.title'),
message: this.$t('popup_subscription_resumed.message'),
buttonStyle: 'theme',
button: this.$t('popup_subscription_resumed.button')
})
})
.catch(() => {
events.$emit('alert:open', {
title: this.$t('popup_error.title'),
message: this.$t('popup_error.message'),
})
})
.finally(() => {
events.$emit('alert:open', {
emoji: '👍',
title: this.$t('popup_subscription_resumed.title'),
message: this.$t('popup_subscription_resumed.message'),
buttonStyle: 'theme',
button: this.$t('popup_subscription_resumed.button')
})
})
.catch(() => {
events.$emit('alert:open', {
title: this.$t('popup_error.title'),
message: this.$t('popup_error.message'),
})
})
.finally(() => {
// End deleting spinner button
this.isResuming = false
this.isLoading = false
this.isConfirmedResume = false
})
},
fetchSubscriptionDetail() {
axios.get('/api/user/subscription')
.then(response => {
// End deleting spinner button
this.isResuming = false
this.isLoading = false
this.isConfirmedResume = false
})
},
fetchSubscriptionDetail() {
axios.get('/api/subscription/detail')
.then(response => {
if (response.status == 204) {
this.subscription = undefined
}
this.subscription = response.data.data
if (response.status == 200) {
this.subscription = response.data
}
Object
.entries(this.user.data.meta.limitations)
.map(([key, item]) => {
}).finally(() => {
this.isLoading = false
})
}
},
created() {
this.fetchSubscriptionDetail()
}
}
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
})
.finally(() => {
this.isLoading = false
})
}
},
created() {
this.fetchSubscriptionDetail()
}
}
</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>

10
src/App/Console/Commands/SetupDevEnvironment.php
View File

@@ -742,6 +742,16 @@ class SetupDevEnvironment extends Command
'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
$members = User::whereNotIn('email', ['howdy@hi5ve.digital'])
->get();

35
src/App/Users/Models/User.php
View File

@@ -1,4 +1,5 @@
<?php
namespace App\Users\Models;
use ByteUnits\Metric;
@@ -92,7 +93,7 @@ class User extends Authenticatable implements MustVerifyEmail
{
$is_storage_limit = get_settings('storage_limitation') ?? 1;
if (! $is_storage_limit) {
if (!$is_storage_limit) {
return [
'used' => $this->usedCapacity,
'used_formatted' => Metric::bytes($this->usedCapacity)->format(),
@@ -100,20 +101,48 @@ class User extends Authenticatable implements MustVerifyEmail
}
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) . '%',
'capacity' => $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
*/
public function getUsedCapacityAttribute(): int
{
return $this->filesWithTrashed
->map(fn ($item) => $item->getRawOriginal())->sum('filesize');
->map(fn($item) => $item->getRawOriginal())->sum('filesize');
}
/**

3
src/App/Users/Resources/UserResource.php
View File

@@ -44,6 +44,9 @@ class UserResource extends JsonResource
'subscription' => new SubscriptionResource($this->subscription),
]),
],
'meta' => [
'limitations' => $this->accountLimitations(),
],
],
];
}