mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-28 11:00:39 +00:00
- Storage, users page refactoring
This commit is contained in:
Čarodej
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<section class="content-sidebar flex-none xl:w-56 w-52 lg:block hidden overflow-y-auto pt-6 select-none dark:bg-dark-background bg-light-background" id="content-sidebar">
|
||||
<section class="content-sidebar flex-none xl:w-56 w-52 lg:block hidden overflow-y-auto pt-6 select-none dark:bg-dark-background" id="content-sidebar">
|
||||
<slot></slot>
|
||||
</section>
|
||||
</template>
|
||||
@@ -9,3 +9,9 @@
|
||||
name: 'ContentSidebar',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content-sidebar {
|
||||
background: linear-gradient(0deg, rgba(246, 245, 241, 0.4) 0%, rgba(243, 244, 246, 0.4) 100%);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<nav class="pt-7 select-none dark:bg-dark-foreground bg-light-background flex-none xl:w-20 w-16 lg:grid hidden">
|
||||
<nav class="menu-bar pt-7 select-none dark:bg-dark-foreground bg-light-background flex-none xl:w-20 w-16 lg:grid hidden">
|
||||
|
||||
<!--Navigation-->
|
||||
<div v-if="user" class="mb-auto text-center">
|
||||
@@ -147,6 +147,10 @@
|
||||
<style scoped lang="scss">
|
||||
@import '/resources/sass/vuefilemanager/_variables';
|
||||
|
||||
.menu-bar {
|
||||
background: linear-gradient(180deg, rgba(246, 245, 241, 0.8) 0%, rgba(243, 244, 246, 0.8) 100%);
|
||||
}
|
||||
|
||||
.router-link-active {
|
||||
|
||||
&.home .button-icon {
|
||||
|
||||
@@ -56,65 +56,22 @@
|
||||
</div>
|
||||
</ContentGroup>
|
||||
|
||||
<!--SaaS-->
|
||||
<!-- Assets -->
|
||||
<ContentGroup :title="$t('Assets')" class="navigator">
|
||||
<div class="menu-list-wrapper vertical">
|
||||
<router-link :to="{name: 'Users'}" class="menu-list-item link">
|
||||
<router-link v-for="(menu, i) in assetMenu" :key="i" :to="{name: menu.route}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<users-icon size="17" />
|
||||
<users-icon v-if="menu.icon === 'users'" size="17" />
|
||||
<database-icon v-if="menu.icon === 'database'" size="17" />
|
||||
<dollar-sign-icon v-if="menu.icon === 'dollar'" size="17" />
|
||||
<file-text-icon v-if="menu.icon === 'file-text'" size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('admin_menu.users') }}
|
||||
</div>
|
||||
</router-link>
|
||||
<router-link :to="{name: 'Subscriptions'}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<dollar-sign-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('Subscriptions') }}
|
||||
</div>
|
||||
</router-link>
|
||||
<router-link :to="{name: 'Plans'}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<database-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('admin_menu.plans') }}
|
||||
</div>
|
||||
</router-link>
|
||||
<router-link :to="{name: 'Invoices'}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<file-text-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('Transactions') }}
|
||||
{{ menu.title }}
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</ContentGroup>
|
||||
|
||||
<!--Others-->
|
||||
<!-- <ContentGroup :title="$t('Assets')" class="navigator">
|
||||
<div class="menu-list-wrapper vertical">
|
||||
<router-link :to="{name: 'Users'}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<refresh-cw-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('Changelog') }}
|
||||
</div>
|
||||
</router-link>
|
||||
<router-link :to="{name: 'Plans'}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<help-circle-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('Support') }}
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</ContentGroup>-->
|
||||
</ContentSidebar>
|
||||
|
||||
<router-view class="lg:pl-0 pl-6 pr-6 w-full overflow-x-hidden relative lg:pt-6 pt-4" />
|
||||
@@ -134,11 +91,61 @@
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Settings',
|
||||
name: 'Admin',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'config'
|
||||
]),
|
||||
assetMenu() {
|
||||
return {
|
||||
metered: [
|
||||
{
|
||||
title: this.$t('admin_menu.users'),
|
||||
route: 'Users',
|
||||
icon: 'users',
|
||||
},
|
||||
{
|
||||
title: this.$t('admin_menu.plans'),
|
||||
route: 'Plans',
|
||||
icon: 'database',
|
||||
},
|
||||
{
|
||||
title: this.$t('Transactions'),
|
||||
route: 'Invoices',
|
||||
icon: 'file-text',
|
||||
},
|
||||
],
|
||||
fixed: [
|
||||
{
|
||||
title: this.$t('admin_menu.users'),
|
||||
route: 'Users',
|
||||
icon: 'users',
|
||||
},
|
||||
{
|
||||
title: this.$t('Subscriptions'),
|
||||
route: 'Subscriptions',
|
||||
icon: 'dollar',
|
||||
},
|
||||
{
|
||||
title: this.$t('admin_menu.plans'),
|
||||
route: 'Plans',
|
||||
icon: 'database',
|
||||
},
|
||||
{
|
||||
title: this.$t('Transactions'),
|
||||
route: 'Invoices',
|
||||
icon: 'file-text',
|
||||
},
|
||||
],
|
||||
none: [
|
||||
{
|
||||
title: this.$t('admin_menu.users'),
|
||||
route: 'Users',
|
||||
icon: 'users',
|
||||
},
|
||||
],
|
||||
}[this.config.subscriptionType]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
FilePreview,
|
||||
@@ -163,10 +170,3 @@
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.user-headline {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -16,7 +16,67 @@
|
||||
<!--Datatable-->
|
||||
<DatatableWrapper @init="isLoading = false" api="/api/admin/users" :paginator="true" :columns="columns" class="table table-users">
|
||||
<template slot-scope="{ row }">
|
||||
<tr class="border-b dark:border-opacity-5 border-light border-dashed">
|
||||
<!--Not a subscription-->
|
||||
<tr v-if="config.subscriptionType === 'none'" class="border-b dark:border-opacity-5 border-light border-dashed">
|
||||
<td class="py-3">
|
||||
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
|
||||
<div class="flex items-center">
|
||||
<MemberAvatar
|
||||
:is-border="false"
|
||||
:size="44"
|
||||
:member="row.data.relationships.settings"
|
||||
/>
|
||||
<div class="ml-3">
|
||||
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
|
||||
{{ row.data.relationships.settings.data.attributes.name }}
|
||||
</b>
|
||||
<span class="block text-xs dark:text-gray-500 text-gray-600">
|
||||
{{ row.data.attributes.email }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</td>
|
||||
<td>
|
||||
<ColorLabel :color="getRoleColor(row.data.attributes.role)">
|
||||
{{ row.data.attributes.role }}
|
||||
</ColorLabel>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
|
||||
{{ row.data.attributes.storage.used_formatted }}
|
||||
</span>
|
||||
<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold">
|
||||
-
|
||||
</span>
|
||||
</td>
|
||||
<td v-if="config.storageLimit">
|
||||
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
|
||||
{{ row.data.attributes.storage.capacity_formatted }}
|
||||
</span>
|
||||
<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold">
|
||||
-
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.created_at }}
|
||||
</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: 'UserDetail', params: {id: row.data.id}}">
|
||||
<Edit2Icon size="15" class="opacity-75" />
|
||||
</router-link>
|
||||
<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: 'UserDelete', params: {id: row.data.id}}">
|
||||
<Trash2Icon size="15" class="opacity-75" />
|
||||
</router-link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!--Fixed subscription-->
|
||||
<tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed">
|
||||
<td class="py-3">
|
||||
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
|
||||
<div class="flex items-center">
|
||||
@@ -77,6 +137,59 @@
|
||||
</router-link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!--Metered subscription-->
|
||||
<tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed">
|
||||
<td class="py-3">
|
||||
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
|
||||
<div class="flex items-center">
|
||||
<MemberAvatar
|
||||
:is-border="false"
|
||||
:size="44"
|
||||
:member="row.data.relationships.settings"
|
||||
/>
|
||||
<div class="ml-3">
|
||||
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
|
||||
{{ row.data.relationships.settings.data.attributes.name }}
|
||||
</b>
|
||||
<span class="block text-xs dark:text-gray-500 text-gray-600">
|
||||
{{ row.data.attributes.email }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</td>
|
||||
<td>
|
||||
<ColorLabel :color="getRoleColor(row.data.attributes.role)">
|
||||
{{ row.data.attributes.role }}
|
||||
</ColorLabel>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.meta.usages.featureEstimates.storage.usage }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.meta.usages.costEstimate }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.created_at }}
|
||||
</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: 'UserDetail', params: {id: row.data.id}}">
|
||||
<Edit2Icon size="15" class="opacity-75" />
|
||||
</router-link>
|
||||
<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: 'UserDelete', params: {id: row.data.id}}">
|
||||
<Trash2Icon size="15" class="opacity-75" />
|
||||
</router-link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</DatatableWrapper>
|
||||
@@ -103,7 +216,7 @@
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'Profile',
|
||||
name: 'Users',
|
||||
components: {
|
||||
DatatableCellImage,
|
||||
MobileActionButton,
|
||||
@@ -119,98 +232,119 @@
|
||||
Spinner,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config']),
|
||||
...mapGetters([
|
||||
'config'
|
||||
]),
|
||||
columns() {
|
||||
return {
|
||||
metered: [
|
||||
{
|
||||
label: this.$t('admin_page_user.table.name'),
|
||||
field: 'email',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.role'),
|
||||
field: 'role',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.storage_used'),
|
||||
sortable: false
|
||||
},
|
||||
{
|
||||
label: this.$t('Billing Est.'),
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.created_at'),
|
||||
field: 'created_at',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.action'),
|
||||
sortable: false
|
||||
},
|
||||
],
|
||||
fixed: [
|
||||
{
|
||||
label: this.$t('admin_page_user.table.name'),
|
||||
field: 'email',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.role'),
|
||||
field: 'role',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.plan'),
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.storage_used'),
|
||||
sortable: false
|
||||
},
|
||||
{
|
||||
label: this.$t('Max Storage'),
|
||||
sortable: false,
|
||||
hidden: ! this.config.storageLimit,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.created_at'),
|
||||
field: 'created_at',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.action'),
|
||||
sortable: false
|
||||
},
|
||||
],
|
||||
none: [
|
||||
{
|
||||
label: this.$t('admin_page_user.table.name'),
|
||||
field: 'email',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.role'),
|
||||
field: 'role',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.storage_used'),
|
||||
sortable: false
|
||||
},
|
||||
{
|
||||
label: this.$t('Max Storage'),
|
||||
sortable: false,
|
||||
hidden: ! this.config.storageLimit,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.created_at'),
|
||||
field: 'created_at',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.action'),
|
||||
sortable: false
|
||||
},
|
||||
],
|
||||
}[this.config.subscriptionType]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
columns: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getRoleColor(role) {
|
||||
switch(role) {
|
||||
case 'admin':
|
||||
return 'purple'
|
||||
break;
|
||||
case 'user':
|
||||
return 'green'
|
||||
break;
|
||||
}
|
||||
return {
|
||||
admin: 'purple',
|
||||
user: 'green',
|
||||
}[role]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.columns = [
|
||||
{
|
||||
label: this.$t('admin_page_user.table.name'),
|
||||
field: 'email',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.role'),
|
||||
field: 'role',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.plan'),
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.storage_used'),
|
||||
sortable: false
|
||||
},
|
||||
{
|
||||
label: this.$t('Max Storage'),
|
||||
sortable: false,
|
||||
hidden: ! this.config.storageLimit,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.created_at'),
|
||||
field: 'created_at',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.action'),
|
||||
sortable: false
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
.table-tools {
|
||||
padding: 0 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
|
||||
.table-tools {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -66,12 +66,29 @@
|
||||
admin() {
|
||||
return this.$store.getters.user ? this.$store.getters.user : undefined
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
user: undefined,
|
||||
pages: [
|
||||
pages() {
|
||||
if (this.config.subscriptionType === 'none') {
|
||||
return [
|
||||
{
|
||||
title: this.$t('admin_page_user.tabs.detail'),
|
||||
route: 'UserDetail',
|
||||
},
|
||||
{
|
||||
title: this.$t('Storage'),
|
||||
route: 'UserStorage',
|
||||
},
|
||||
{
|
||||
title: this.$t('admin_page_user.tabs.password'),
|
||||
route: 'UserPassword',
|
||||
},
|
||||
{
|
||||
title: this.$t('Delete Account'),
|
||||
route: 'UserDelete',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
title: this.$t('admin_page_user.tabs.detail'),
|
||||
route: 'UserDetail',
|
||||
@@ -93,6 +110,12 @@
|
||||
route: 'UserDelete',
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
user: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -5,12 +5,9 @@
|
||||
<FormLabel>
|
||||
{{ $t('user_box_role.title') }}
|
||||
</FormLabel>
|
||||
<InfoBox>
|
||||
<p>{{ $t('user_box_role.description') }}</p>
|
||||
</InfoBox>
|
||||
<ValidationObserver ref="changeRole" @submit.prevent="changeRole" v-slot="{ invalid }" tag="form">
|
||||
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Role" rules="required">
|
||||
<AppInputText :title="$t('admin_page_user.select_role')" :error="errors[0]" :is-last="true">
|
||||
<AppInputText :title="$t('admin_page_user.select_role')" :description="$t('user_box_role.description')" :error="errors[0]" :is-last="true">
|
||||
<div class="flex space-x-4">
|
||||
<SelectInput v-model="userRole" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]" />
|
||||
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<PageTab :is-loading="isLoading" v-if="storage">
|
||||
|
||||
<!--Storage Usage-->
|
||||
<div v-if="distribution" class="card shadow-card">
|
||||
<FormLabel icon="hard-drive">
|
||||
{{ $t('Storage Usage') }}
|
||||
@@ -10,12 +11,14 @@
|
||||
{{ storage.data.attributes.used }}
|
||||
</b>
|
||||
|
||||
<b class="mb-3 block text-sm text-gray-400 mb-5">
|
||||
<b v-if="['fixed', 'none'].includes(config.subscriptionType)" class="mt-0.5 block text-sm text-gray-400">
|
||||
{{ $t('Total of') }} {{ storage.data.attributes.capacity }} {{ $t('Used') }}
|
||||
</b>
|
||||
|
||||
<ProgressLine :data="distribution" />
|
||||
<ProgressLine v-if="storage.data.attributes.used !== '0B'" :data="distribution" class="mt-5" />
|
||||
</div>
|
||||
|
||||
<!--Upload-->
|
||||
<div v-if="distribution" class="card shadow-card">
|
||||
<FormLabel icon="hard-drive">
|
||||
{{ $t('Upload') }}
|
||||
@@ -31,6 +34,8 @@
|
||||
|
||||
<BarChart :data="storage.data.meta.traffic.chart.upload" color="#FFBD2D" />
|
||||
</div>
|
||||
|
||||
<!--Download-->
|
||||
<div v-if="distribution" class="card shadow-card">
|
||||
<FormLabel icon="hard-drive">
|
||||
{{ $t('Download') }}
|
||||
@@ -47,16 +52,14 @@
|
||||
<BarChart :data="storage.data.meta.traffic.chart.download" color="#9d66fe" />
|
||||
</div>
|
||||
|
||||
<div v-if="config.storageLimit && ! user.data.attributes.subscription" class="card shadow-card">
|
||||
<!--Set Storage Size-->
|
||||
<div v-if="config.storageLimit && ! user.data.attributes.subscription && config.subscriptionType !== 'metered'" class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('user_box_storage.title') }}
|
||||
</FormLabel>
|
||||
<InfoBox>
|
||||
<p>{{ $t('user_box_storage.description') }}</p>
|
||||
</InfoBox>
|
||||
<ValidationObserver ref="changeStorageCapacity" @submit.prevent="changeStorageCapacity" v-slot="{ invalid }" tag="form">
|
||||
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Capacity" rules="required">
|
||||
<AppInputText :title="$t('admin_page_user.label_change_capacity')" :error="errors[0]" :is-last="true">
|
||||
<AppInputText :title="$t('admin_page_user.label_change_capacity')" :description="$t('user_box_storage.description')" :error="errors[0]" :is-last="true">
|
||||
<div class="flex space-x-4">
|
||||
<input v-model="capacity"
|
||||
:placeholder="$t('admin_page_user.label_change_capacity')"
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
{{ storage.data.attributes.used }}
|
||||
</b>
|
||||
|
||||
<b v-if="config.subscriptionType !== 'metered'" class="mt-0.5 block text-sm text-gray-400">
|
||||
<b v-if="['fixed', 'none'].includes(config.subscriptionType)" class="mt-0.5 block text-sm text-gray-400">
|
||||
{{ $t('Total of') }} {{ storage.data.attributes.capacity }} {{ $t('Used') }}
|
||||
</b>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user