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

- Storage, users page refactoring

Browse Source
This commit is contained in:
Čarodej
2021-12-21 13:49:37 +01:00
parent f5e182baf6
commit 60b34e53a3
15 changed files with 611 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

304
resources/js/views/Admin/Users.vue
View File

@@ -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>

35
resources/js/views/Admin/Users/User.vue
View File

@@ -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
resources/js/views/Admin/Users/UserTabs/UserDetail.vue
View File

@@ -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">

17
resources/js/views/Admin/Users/UserTabs/UserStorage.vue
View File

@@ -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')"