nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-28 02:50:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

admin dashboard refactoring

Browse Source
This commit is contained in:
Čarodej
2022-01-12 13:58:51 +01:00
parent e1bb4b2cbe
commit 4feba76f57
22 changed files with 1157 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/App.vue
+5 -1
View File
@@ -141,6 +141,10 @@ export default {
@apply dark:bg-dark-foreground bg-white lg:p-6 p-4 rounded-xl lg:mb-6 mb-4
}
.widget-card {
@apply dark:bg-dark-foreground bg-white lg:p-5 p-4 rounded-xl
}
.input-dark {
@apply w-full dark:bg-2x-dark-foreground bg-light-background py-3 px-5 rounded-lg appearance-none border-transparent text-base font-bold border
}
@@ -169,7 +173,7 @@ export default {
}
.vue-feather {
path, circle, line, rect, polyline, ellipse {
path, circle, line, rect, polyline, ellipse, polygon {
color: inherit;
}
}
resources/js/components/Admin/WidgetLatestRegistrations.vue
+289 -86
View File
@@ -1,109 +1,312 @@
<template>
<WidgetWrapper :icon="icon" :title="title">
<DatatableWrapper @init="isLoading = false" api="/api/admin/dashboard/newbies" :paginator="false" :columns="columns" class="table table-users">
<template slot-scope="{ row }">
<tr>
<td style="width: 300px">
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
<DatatableCellImage
:image="row.data.relationships.settings.data.attributes.avatar.sm"
:title="row.data.relationships.settings.data.attributes.name"
:description="row.data.attributes.email"
/>
</router-link>
</td>
<td>
<ColorLabel :color="getRoleColor(row.data.attributes.role)">
{{ row.data.attributes.role }}
</ColorLabel>
</td>
<td>
<span class="cell-item">
{{ row.data.attributes.storage.used_formatted }}
</span>
</td>
<td>
<span class="cell-item">
{{ row.data.attributes.created_at_formatted }}
</span>
</td>
<td>
<div class="action-icons">
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
<Edit2Icon size="15" class="icon icon-edit" />
</router-link>
<router-link :to="{name: 'UserDelete', params: {id: row.data.id}}">
<Trash2Icon size="15" class="icon icon-trash" />
</router-link>
</div>
</td>
</tr>
</template>
</DatatableWrapper>
</WidgetWrapper>
<DatatableWrapper @init="isLoading = false" api="/api/admin/dashboard/newbies" :paginator="false" :columns="columns" class="table table-users mt-6">
<template slot-scope="{ row }">
<!--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="$getUserRoleColor(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">
<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="$getUserRoleColor(row.data.attributes.role)">
{{ row.data.attributes.role }}
</ColorLabel>
</td>
<td v-if="config.isSaaS">
<span class="text-sm font-bold">
{{ row.data.relationships.subscription ? $t('global.premium') : $t('global.free') }}
</span>
</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>
<!--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="$getUserRoleColor(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>
</template>
<script>
import DatatableCellImage from '/resources/js/components/Others/Tables/DatatableCellImage'
import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
import WidgetWrapper from '/resources/js/components/Admin/WidgetWrapper'
import {Trash2Icon, Edit2Icon} from "vue-feather-icons"
import ColorLabel from '/resources/js/components/Others/ColorLabel'
import axios from 'axios'
import {Trash2Icon, Edit2Icon} from "vue-feather-icons"
import MemberAvatar from "../FilesView/MemberAvatar";
import { mapGetters } from 'vuex'
export default {
name: 'WidgetLatestRegistrations',
props: ['icon', 'title'],
props: [
'icon',
'title'
],
components: {
DatatableCellImage,
DatatableWrapper,
WidgetWrapper,
MemberAvatar,
Trash2Icon,
ColorLabel,
Edit2Icon,
},
computed: {
...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: false,
columns: [
{
label: this.$t('admin_page_user.table.name'),
field: 'name',
sortable: false
},
{
label: this.$t('admin_page_user.table.role'),
field: 'role',
sortable: false
},
{
label: this.$t('admin_page_user.table.storage_used'),
field: 'used',
sortable: false
},
{
label: this.$t('admin_page_user.table.created_at'),
field: 'created_at',
sortable: false
},
{
label: this.$t('admin_page_user.table.action'),
field: 'data.action',
sortable: false
},
]
}
},
methods: {
getRoleColor(role) {
switch(role) {
case 'admin':
return 'purple'
break;
case 'user':
return 'yellow'
break;
}
}
},
}
resources/js/components/Admin/WidgetTotals.vue
-83
View File
@@ -1,83 +0,0 @@
<template>
<WidgetWrapper :icon="icon" :title="title">
<div class="widget-value">
<span>{{ value }}</span>
</div>
<router-link :to="{name: linkRoute}" class="footer-link">
<span class="content">{{ linkName }}</span>
<chevron-right-icon size="16" class="text-theme dark-text-theme"/>
</router-link>
</WidgetWrapper>
</template>
<script>
import WidgetWrapper from '/resources/js/components/Admin/WidgetWrapper'
import { UsersIcon, StarIcon, HardDriveIcon, ChevronRightIcon } from 'vue-feather-icons'
export default {
name: 'WidgetTotals',
props: ['icon', 'title', 'value', 'linkRoute', 'linkName'],
components: {
ChevronRightIcon,
WidgetWrapper,
HardDriveIcon,
StarIcon,
UsersIcon
}
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.widget-value {
margin-top: 10px;
margin-bottom: 30px;
span {
@include font-size(38);
font-weight: 800;
}
}
.footer-link {
display: flex;
align-items: center;
polyline {
color: inherit;
}
.content {
@include font-size(12);
font-weight: 700;
margin-right: 5px;
}
}
@media only screen and (max-width: 1190px) {
.widget-value {
span {
@include font-size(30);
}
}
}
.dark {
.widget-value {
span {
color: $dark_mode_text_primary;
}
}
.footer-link {
.content {
color: $dark_mode_text_primary;
}
}
}
</style>
resources/js/components/Admin/WidgetWrapper.vue
+8 -47
View File
@@ -1,13 +1,13 @@
<template>
<div class="widget">
<div class="widget-card w-full">
<div class="widget-content dark:bg-dark-foreground bg-white">
<div class="headline">
<div class="icon">
<users-icon v-if="icon === 'users'" size="19" class="text-theme dark-text-theme"/>
<star-icon v-if="icon === 'star'" size="19" class="text-theme dark-text-theme"/>
<hard-drive-icon v-if="icon === 'hard-drive'" size="19" class="text-theme dark-text-theme"/>
</div>
<b class="title">{{ title }}</b>
<div class="flex items-center">
<users-icon v-if="icon === 'users'" size="16" class="vue-feather text-theme mr-3 "/>
<star-icon v-if="icon === 'star'" size="16" class="vue-feather text-theme mr-3 "/>
<hard-drive-icon v-if="icon === 'hard-drive'" size="16" class="vue-feather text-theme mr-3 "/>
<b class="font-bold text-base">
{{ title }}
</b>
</div>
<slot></slot>
</div>
@@ -28,42 +28,3 @@
}
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.widget-content {
@include widget-card;
}
.headline {
display: flex;
.icon {
margin-right: 10px;
path, circle, line, polygon {
color: inherit;
}
}
}
@media only screen and (max-width: 1190px) {
.headline {
.title {
@include font-size(14);
}
}
}
.dark {
.headline {
.title {
color: $dark_mode_text_primary;
}
}
}
</style>
resources/js/components/Others/ColorLabel.vue
+1 -13
View File
@@ -1,5 +1,5 @@
<template>
<b class="color-label text-xs rounded-lg" :class="color">
<b class="color-label capitalize inline-block text-xs font-bold rounded-lg py-1 px-2" :class="color">
<slot></slot>
</b>
</template>
@@ -16,10 +16,6 @@
@import '/resources/sass/vuefilemanager/_mixins';
.color-label {
text-transform: capitalize;
display: inline-block;
font-weight: 700;
padding: 4px 6px;
&.purple {
color: $purple;
@@ -41,12 +37,4 @@
background: rgba($danger, 0.1);
}
}
@media only screen and (max-width: 1024px) {
}
.dark {
}
</style>
resources/js/components/Others/Forms/FormLabel.vue
+3
View File
@@ -12,6 +12,7 @@
<shield-icon v-if="icon === 'shield'" size="22" class="mr-3 vue-feather text-theme dark-text-theme" />
<bell-icon v-if="icon === 'bell'" size="22" class="mr-3 vue-feather text-theme dark-text-theme" />
<key-icon v-if="icon === 'key'" size="22" class="mr-3 vue-feather text-theme dark-text-theme" />
<users-icon v-if="icon === 'users'" size="22" class="mr-3 vue-feather text-theme dark-text-theme" />
<b class="font-bold dark:text-gray-200 text-lg">
<slot></slot>
</b>
@@ -20,6 +21,7 @@
<script>
import {
UsersIcon,
ShieldIcon,
CreditCardIcon,
DollarSignIcon,
@@ -40,6 +42,7 @@
'icon'
],
components: {
UsersIcon,
CreditCardIcon,
DollarSignIcon,
SmartphoneIcon,
resources/js/components/UI/BarChart.vue
+10 -8
View File
@@ -2,19 +2,21 @@
<div class="flex items-end justify-between sm:h-28 h-20">
<!--Data bar-->
<span
class="md:w-2 w-1 block rounded-lg lg:mr-2 mr-1.5 bg-theme"
class="2xl:w-3 md:w-2 w-1 block rounded-lg lg:mr-2 mr-1.5 bg-theme"
v-for="(height, i) in data"
:style="{height: height.amount + '%'}"
:key="i">
</span>
<!--Ghost bar-->
<span
class="md:w-2 w-1 block rounded-lg lg:mr-2 mr-1.5 bg-gray-100"
v-for="(ghost, i) in ghostLength"
:style="{height: '5%'}"
:key="i">
</span>
<div v-if="ghostLength >= 1">
<span
class="md:w-2 w-1 block rounded-lg lg:mr-2 mr-1.5 bg-gray-100"
v-for="(ghost, i) in ghostLength"
:style="{height: '5%'}"
:key="i">
</span>
</div>
</div>
</template>
<script>
@@ -26,7 +28,7 @@ export default {
],
computed: {
ghostLength() {
return 45 - this.data.length
return 65 - this.data.length
}
}
}
resources/js/helpers/functionHelpers.js
Vendored
+7
View File
@@ -399,6 +399,13 @@ const FunctionHelpers = {
}[type]
}
Vue.prototype.$getUserRoleColor = function (role) {
return {
admin: 'purple',
user: 'green',
}[role]
}
Vue.prototype.$getTransactionTypeTextColor = function (type) {
return {
resources/js/routes/routesAdmin.js
Vendored
+2 -2
View File
@@ -266,7 +266,7 @@ const routesAdmin = [
children: [
{
name: 'AppBillings',
path: '/admin/settings/billings',
path: '/admin/payments/billings',
component: () =>
import(/* webpackChunkName: "chunks/payments/billings" */ '../views/Admin/PaymentSettings/PaymentSettingsTab/Billings'),
meta: {
@@ -276,7 +276,7 @@ const routesAdmin = [
},
{
name: 'AppPayments',
path: '/admin/settings/payments',
path: '/admin/payments/payments',
component: () =>
import(/* webpackChunkName: "chunks/payments/settings" */ '../views/Admin/PaymentSettings/PaymentSettingsTab/Payments'),
meta: {
resources/js/views/Admin.vue
+15 -6
View File
@@ -21,7 +21,7 @@
<!--Admin-->
<ContentGroup :title="$t('global.admin')" class="navigator">
<div class="menu-list-wrapper vertical">
<router-link v-for="(menu, i) in admin" :key="i" :to="{name: menu.route}" class="menu-list-item link">
<router-link v-for="(menu, i) in admin" :key="i" :to="{name: menu.route}" class="menu-list-item link" :class="{'router-link-active': menu.linkActivation && menu.linkActivation.includes($router.currentRoute.fullPath.split('/')[2])}">
<div class="icon text-theme">
<box-icon v-if="menu.icon === 'box'" size="17" />
<users-icon v-if="menu.icon === 'users'" size="17" />
@@ -52,7 +52,7 @@
<!-- Assets -->
<ContentGroup :title="$t('Subscription')" v-if="['fixed', 'metered'].includes(config.subscriptionType)" class="navigator">
<div class="menu-list-wrapper vertical">
<router-link v-for="(menu, i) in assetMenu" :key="i" :to="{name: menu.route}" class="menu-list-item link">
<router-link v-for="(menu, i) in assetMenu" :key="i" :to="{name: menu.route}" class="menu-list-item link" :class="{'router-link-active': menu.linkActivation && menu.linkActivation.includes($router.currentRoute.fullPath.split('/')[2])}">
<div class="icon text-theme">
<credit-card-icon v-if="menu.icon === 'card'" size="17" />
<database-icon v-if="menu.icon === 'database'" size="17" />
@@ -95,13 +95,16 @@
metered: [
{
title: this.$t('Payments'),
route: 'AppPayments',
route: 'PaymentSettings',
icon: 'card',
},
{
title: this.$t('admin_menu.plans'),
route: 'Plans',
icon: 'database',
linkActivation: [
'plans', 'plan'
],
},
{
title: this.$t('Transactions'),
@@ -112,7 +115,7 @@
fixed: [
{
title: this.$t('Payments'),
route: 'AppPayments',
route: 'PaymentSettings',
icon: 'card',
},
{
@@ -124,6 +127,9 @@
title: this.$t('admin_menu.plans'),
route: 'Plans',
icon: 'database',
linkActivation: [
'plans', 'plan'
],
},
{
title: this.$t('Transactions'),
@@ -146,10 +152,13 @@
title: this.$t('admin_menu.users'),
route: 'Users',
icon: 'users',
linkActivation: [
'users', 'user'
],
},
{
title: this.$t('admin_menu.settings'),
route: 'AppOthers',
route: 'AppSettings',
icon: 'settings',
},
],
@@ -188,5 +197,5 @@
ConfirmPopup,
BoxIcon,
},
}
}
</script>
resources/js/views/Admin/AppSettings/AppSettings.vue
+3
View File
@@ -40,6 +40,9 @@
},
]
}
},
mounted() {
this.$router.push({name: 'AppOthers'})
}
}
</script>
resources/js/views/Admin/Dashboard.vue
+128 -226
View File
@@ -2,77 +2,135 @@
<div id="single-page">
<div id="page-content" v-if="! isLoading && data">
<div class="dashboard-headline">
<div class="logo">
<a href="https://vuefilemanager.com" target="_blank">
<img src="/assets/images/vuefilemanager-horizontal-logo.svg" alt="VueFileManager" class="light-mode">
</a>
</div>
<div class="metadata">
<a href="https://gist.github.com/MakingCG/9c07f8af392081ae5d5290d920a79b5d" target="_blank" class="meta">
<span class="meta-title">{{ $t('admin_page_dashboard.version') }}:</span>
<!--Headline-->
<div v-if="config.isAdminVueFileManagerBar" class="md:flex justify-between md:mb-6 mb-4">
<!--VueFileManager logo-->
<a href="https://vuefilemanager.com" target="_blank">
<img src="/assets/images/vuefilemanager-horizontal-logo.svg" alt="VueFileManager" class="light-mode">
</a>
<!--App Info-->
<div class="flex items-center md:mt-0 mt-4">
<a href="https://gist.github.com/MakingCG/9c07f8af392081ae5d5290d920a79b5d" target="_blank" class="inline-block mr-4">
<span class="font-bold text-sm">
{{ $t('admin_page_dashboard.version') }}:
</span>
<ColorLabel color="purple">
{{ data.app_version }}
{{ data.app.version }}
</ColorLabel>
</a>
<a v-if="data.license" href="https://codecanyon.net/item/vue-file-manager-with-laravel-backend/25815986" target="_blank" class="meta">
<span class="meta-title">{{ $t('admin_page_dashboard.license') }}:</span>
<a href="https://codecanyon.net/item/vue-file-manager-with-laravel-backend/25815986" target="_blank" class="inline-block mr-4">
<span class="font-bold text-sm">
{{ $t('admin_page_dashboard.license') }}:
</span>
<ColorLabel color="purple">
{{ data.license }}
{{ data.app.license }}
</ColorLabel>
</a>
<a href="https://bit.ly/VueFileManager-survey" target="_blank" class="became-backer bg-theme-100">
<div class="icon">
<credit-card-icon size="15" class="text-theme dark-text-theme"/>
</div>
<span class="content text-theme dark-text-theme">
{{ $t('admin_page_dashboard.backer_button') }}
<a href="https://bit.ly/VueFileManager-survey" target="_blank" class="items-center inline-block rounded-lg py-1.5 px-3 ml-8 bg-theme-100 md:flex hidden">
<thumbs-up-icon size="15" class="vue-feather text-theme mr-2.5"/>
<span class="font-bold text-sm text-theme">
{{ $t('Write a Feedback') }}
</span>
</a>
</div>
</div>
<!--Stripe notice-->
<!-- <InfoBox v-if="config.isSaaS && ! config.stripe_public_key" class="dashboard-notice">
<i18n path="notice.stripe_activation">
<router-link :to="{name: 'AppPayments'}">{{ $t('notice.stripe_activation_button') }}</router-link>
</i18n>
</InfoBox>-->
<!--Metric widgets-->
<div class="md:flex md:space-x-6 md:mb-6 mb-2">
<div class="w-full mb-0 card shadow-card">
<FormLabel icon="users">
{{ $t('Total Users') }}
</FormLabel>
<div class="widgets-total" :class="{'widgets-coll-3': config.isSaaS, 'widgets-coll-2': ! config.isSaaS}">
<WidgetTotals
class="widget"
icon="users"
:title="$t('admin_page_dashboard.w_total_users.title')"
:value="data.total_users"
link-route="Users"
:link-name="$t('admin_page_dashboard.w_total_users.link')"
/>
<WidgetTotals
class="widget"
icon="hard-drive"
:title="$t('admin_page_dashboard.w_total_space.title')"
:value="data.total_used_space"
link-route="Users"
:link-name="$t('admin_page_dashboard.w_total_space.link')"
/>
<WidgetTotals
v-if="config.isSaaS"
class="widget"
icon="star"
:title="$t('admin_page_dashboard.w_total_premium.title')"
:value="data.total_premium_users"
link-route="Plans"
:link-name="$t('admin_page_dashboard.w_total_premium.link')"
/>
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
{{ data.users.total }}
</b>
<router-link :to="{name: 'Users'}" class="flex items-center mt-6">
<span class="text-xs font-bold mr-2 whitespace-nowrap">
{{ $t('Show all transactions') }}
</span>
<chevron-right-icon size="16" class="text-theme vue-feather"/>
</router-link>
</div>
<div class="w-full mb-0 card shadow-card">
<FormLabel icon="hard-drive">
{{ $t('Total Storage') }}
</FormLabel>
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
{{ data.disk.used }}
</b>
<router-link :to="{name: 'Users'}" class="flex items-center mt-6">
<span class="text-xs font-bold mr-2 whitespace-nowrap">
{{ $t('admin_page_dashboard.w_total_space.link') }}
</span>
<chevron-right-icon size="16" class="text-theme vue-feather"/>
</router-link>
</div>
<div class="w-full mb-0 card shadow-card">
<FormLabel icon="dollar">
{{ $t('Earnings') }}
</FormLabel>
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
{{ data.app.earnings }}
</b>
<router-link :to="{name: 'Invoices'}" class="flex items-center mt-6">
<span class="text-xs font-bold mr-2 whitespace-nowrap">
{{ $t('Show all transactions') }}
</span>
<chevron-right-icon size="16" class="text-theme vue-feather"/>
</router-link>
</div>
</div>
<!-- <div class="widget-users">
<WidgetLatestRegistrations
class="widget"
icon="users"
:title="$t('admin_page_dashboard.w_latest_users.title')"
/>
</div>-->
<!--Upload bandwidth widgets-->
<div class="card shadow-card md:mb-6 mb-2">
<FormLabel icon="hard-drive">
{{ $t('Upload') }}
</FormLabel>
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
{{ data.disk.upload.total }}
</b>
<b class="mb-3 block text-sm text-gray-400 mb-2">
{{ $t('In last 45 days') }}
</b>
<BarChart :data="data.disk.upload.records" />
</div>
<!--Download bandwidth widgets-->
<div class="card shadow-card md:mb-6 mb-2">
<FormLabel icon="hard-drive">
{{ $t('Download') }}
</FormLabel>
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
{{ data.disk.download.total }}
</b>
<b class="mb-3 block text-sm text-gray-400 mb-5">
{{ $t('In last 45 days') }}
</b>
<BarChart :data="data.disk.download.records" />
</div>
<!--Latest registration widgets-->
<div class="card shadow-card md:mb-6 mb-2">
<FormLabel icon="users">
{{ $t('Latest Registrations') }}
</FormLabel>
<WidgetLatestRegistrations />
</div>
</div>
<div id="loader" v-if="isLoading">
<Spinner></Spinner>
@@ -82,19 +140,12 @@
<script>
import WidgetLatestRegistrations from '/resources/js/components/Admin/WidgetLatestRegistrations'
import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
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 WidgetTotals from '/resources/js/components/Admin/WidgetTotals'
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
import PageHeader from '/resources/js/components/Others/PageHeader'
import ColorLabel from '/resources/js/components/Others/ColorLabel'
import {ChevronRightIcon, ThumbsUpIcon} from "vue-feather-icons"
import WidgetWrapper from "../../components/Admin/WidgetWrapper"
import Spinner from '/resources/js/components/FilesView/Spinner'
import {CreditCardIcon} from "vue-feather-icons"
import FormLabel from "../../components/Others/Forms/FormLabel"
import BarChart from "../../components/UI/BarChart"
import { mapGetters } from 'vuex'
import axios from 'axios'
@@ -102,22 +153,18 @@
name: 'Dashboard',
components: {
WidgetLatestRegistrations,
MobileActionButton,
EmptyPageContent,
DatatableWrapper,
WidgetTotals,
CreditCardIcon,
SectionTitle,
MobileHeader,
SwitchInput,
PageHeader,
ButtonBase,
ChevronRightIcon,
WidgetWrapper,
ThumbsUpIcon,
ColorLabel,
InfoBox,
FormLabel,
BarChart,
Spinner,
},
computed: {
...mapGetters(['config']),
...mapGetters([
'config'
]),
},
data() {
return {
@@ -125,11 +172,6 @@
data: undefined,
}
},
methods: {
changeStatus(val, id) {
this.$updateText('/admin/plans/' + id + '/update', 'is_active', val)
}
},
created() {
axios.get('/api/admin/dashboard')
.then(response => {
@@ -141,143 +183,3 @@
}
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.dashboard-notice {
margin-bottom: 20px;
}
.widgets-total {
display: grid;
margin: 0 -20px 20px;
&.widgets-coll-2 {
grid-template-columns: repeat(auto-fill, 50%);
}
&.widgets-coll-3 {
grid-template-columns: repeat(auto-fill, 33.3%);
}
.widget {
width: 100%;
padding: 20px;
}
}
.dashboard-headline {
display: flex;
justify-content: space-between;
margin-top: 20px;
margin-bottom: 20px;
}
.became-backer {
display: inline-block;
padding: 5px 10px;
border-radius: 6px;
margin-left: 40px;
cursor: pointer;
.icon, .content {
display: inline-block;
vertical-align: middle;
}
.icon {
margin-right: 10px;
line-height: 0;
rect, line {
color: inherit;
}
}
.content {
font-weight: 700;
@include font-size(14);
}
}
.metadata {
.meta {
display: inline-block;
margin-left: 20px;
}
.meta-title {
@include font-size(14);
font-weight: 700;
}
}
.logo {
.dark {
display: none;
}
}
@media only screen and (max-width: 1190px) {
.widgets-total {
margin: 0 -10px 10px;
.widget {
padding: 10px;
}
}
}
@media only screen and (max-width: 1024px) {
.widgets-total {
&.widgets-coll-2, &.widgets-coll-3 {
grid-template-columns: repeat(auto-fill, 50%);
}
}
}
@media only screen and (max-width: 960px) {
.widgets-total {
&.widgets-coll-2, &.widgets-coll-3 {
grid-template-columns: repeat(auto-fill, 100%);
}
}
.became-backer {
display: none;
}
.dashboard-headline {
display: block;
text-align: left;
.metadata {
.meta:first-child {
margin-left: 0;
}
}
.logo {
margin-bottom: 10px;
}
}
}
.dark {
.metadata {
.meta-title {
color: $dark_mode_text_primary;
}
}
}
</style>
resources/js/views/Admin/PaymentSettings/PaymentSettings.vue
+3
View File
@@ -31,6 +31,9 @@
},
]
}
},
mounted() {
this.$router.replace({name: 'AppPayments'})
}
}
</script>
resources/js/views/Admin/Users.vue
+3 -11
View File
@@ -38,7 +38,7 @@
</router-link>
</td>
<td>
<ColorLabel :color="getRoleColor(row.data.attributes.role)">
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
{{ row.data.attributes.role }}
</ColorLabel>
</td>
@@ -97,7 +97,7 @@
</router-link>
</td>
<td>
<ColorLabel :color="getRoleColor(row.data.attributes.role)">
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
{{ row.data.attributes.role }}
</ColorLabel>
</td>
@@ -161,7 +161,7 @@
</router-link>
</td>
<td>
<ColorLabel :color="getRoleColor(row.data.attributes.role)">
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
{{ row.data.attributes.role }}
</ColorLabel>
</td>
@@ -338,13 +338,5 @@
isLoading: true,
}
},
methods: {
getRoleColor(role) {
return {
admin: 'purple',
user: 'green',
}[role]
}
}
}
</script>
resources/js/views/Admin/Users/UserTabs/UserPassword.vue
+18 -20
View File
@@ -4,24 +4,25 @@
<FormLabel>
{{ $t('user_box_password.title') }}
</FormLabel>
<InfoBox>
<p>{{ $t('user_box_password.description') }}</p>
</InfoBox>
<ButtonBase @click.native="requestPasswordResetEmail" :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
{{ $t('admin_page_user.send_password_link') }}
</ButtonBase>
<AppInputSwitch :title="$t('Reset User Password')" :description="$t('user_box_password.description')" :is-last="true">
<ButtonBase @click.native="requestPasswordResetEmail" :loading="isSendingRequest" :disabled="isSendingRequest" class="sm:w-auto w-full" button-style="theme">
{{ $t('admin_page_user.send_password_link') }}
</ButtonBase>
</AppInputSwitch>
</div>
</PageTab>
</template>
<script>
import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
import PageTab from '/resources/js/components/Others/Layout/PageTab'
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
import AppInputSwitch from "../../../../components/Admin/AppInputSwitch"
import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
import SetupBox from '/resources/js/components/Others/Forms/SetupBox'
import PageTab from '/resources/js/components/Others/Layout/PageTab'
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
import {required} from 'vee-validate/dist/rules'
import {events} from '/resources/js/bus'
import axios from 'axios'
@@ -29,15 +30,16 @@
export default {
name: 'UserPassword',
components: {
FormLabel,
InfoBox,
PageTabGroup,
PageTab,
ValidationProvider,
ValidationObserver,
AppInputSwitch,
PageTabGroup,
ButtonBase,
FormLabel,
SetupBox,
required,
InfoBox,
PageTab,
},
data() {
return {
@@ -51,26 +53,22 @@
this.isSendingRequest = true
axios
.post(this.$store.getters.api + '/admin/users/' + this.$route.params.id + '/reset-password',
.post(`${this.$store.getters.api}/admin/users/${this.$route.params.id}/reset-password`,
{}
)
.then(() => {
this.isSendingRequest = false
events.$emit('toaster', {
type: 'success',
message: this.$t('toaster.sended_password'),
})
})
.catch(() => {
this.isSendingRequest = false
events.$emit('alert:open', {
title: this.$t('popup_error.title'),
message: this.$t('popup_error.message'),
})
})
.finally(() => this.isSendingRequest = false)
}
}
}