mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 00:22:15 +00:00
admin dashboard refactoring
This commit is contained in:
Čarodej
@@ -40,6 +40,9 @@
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$router.push({name: 'AppOthers'})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -31,6 +31,9 @@
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$router.replace({name: 'AppPayments'})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user