mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-22 01:22:16 +00:00
dashboard include
This commit is contained in:
carodej
127
resources/js/components/Admin/WidgetLatestRegistrations.vue
Normal file
127
resources/js/components/Admin/WidgetLatestRegistrations.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<WidgetWrapper :icon="icon" :title="title">
|
||||
<DatatableWrapper v-if="users" :paginator="false" :columns="columns" :data="users" class="table table-users">
|
||||
<template scope="{ row }">
|
||||
<tr>
|
||||
<td style="width: 300px">
|
||||
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
|
||||
<DatatableCellImage
|
||||
:image="row.data.attributes.avatar"
|
||||
:title="row.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.relationships.storage.data.attributes.used }}%
|
||||
</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}}">
|
||||
<edit-2-icon size="15" class="icon icon-edit"></edit-2-icon>
|
||||
</router-link>
|
||||
<router-link :to="{name: 'UserDelete', params: {id: row.data.id}}">
|
||||
<trash2-icon size="15" class="icon icon-trash"></trash2-icon>
|
||||
</router-link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</DatatableWrapper>
|
||||
</WidgetWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DatatableCellImage from '@/components/Others/Tables/DatatableCellImage'
|
||||
import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
|
||||
import WidgetWrapper from '@/components/Admin/WidgetWrapper'
|
||||
import {Trash2Icon, Edit2Icon} from "vue-feather-icons"
|
||||
import ColorLabel from '@/components/Others/ColorLabel'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'WidgetLatestRegistrations',
|
||||
props: ['icon', 'title'],
|
||||
components: {
|
||||
DatatableCellImage,
|
||||
DatatableWrapper,
|
||||
WidgetWrapper,
|
||||
Trash2Icon,
|
||||
ColorLabel,
|
||||
Edit2Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
users: undefined,
|
||||
columns: [
|
||||
{
|
||||
label: this.$t('admin_page_user.table.name'),
|
||||
field: 'data.attributes.name',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.role'),
|
||||
field: 'data.attributes.role',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.storage_used'),
|
||||
field: 'data.attributes.storage.used',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.created_at'),
|
||||
field: 'data.attributes.created_at_formatted',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
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;
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
axios.get('/api/dashboard/new-users')
|
||||
.then(response => {
|
||||
this.users = response.data.data
|
||||
this.isLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
}
|
||||
</style>
|
||||
62
resources/js/components/Admin/WidgetTotals.vue
Normal file
62
resources/js/components/Admin/WidgetTotals.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<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"></chevron-right-icon>
|
||||
</router-link>
|
||||
</WidgetWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WidgetWrapper from '@/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 '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_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 {
|
||||
stroke: $theme;
|
||||
}
|
||||
|
||||
.content {
|
||||
@include font-size(12);
|
||||
font-weight: 700;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
}
|
||||
</style>
|
||||
55
resources/js/components/Admin/WidgetWrapper.vue
Normal file
55
resources/js/components/Admin/WidgetWrapper.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="widget">
|
||||
<div class="widget-content">
|
||||
<div class="headline">
|
||||
<div class="icon">
|
||||
<users-icon v-if="icon === 'users'" size="19"></users-icon>
|
||||
<star-icon v-if="icon === 'star'" size="19"></star-icon>
|
||||
<hard-drive-icon v-if="icon === 'hard-drive'" size="19"></hard-drive-icon>
|
||||
</div>
|
||||
<b class="title">{{ title }}</b>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { UsersIcon, StarIcon, HardDriveIcon, ChevronRightIcon } from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'WidgetWrapper',
|
||||
props: ['icon', 'title'],
|
||||
components: {
|
||||
ChevronRightIcon,
|
||||
HardDriveIcon,
|
||||
StarIcon,
|
||||
UsersIcon
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.widget-content {
|
||||
@include widget-card;
|
||||
}
|
||||
|
||||
.headline {
|
||||
display: flex;
|
||||
|
||||
.icon {
|
||||
margin-right: 10px;
|
||||
|
||||
path, circle, line, polygon {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,16 +1,23 @@
|
||||
<template>
|
||||
<button class="button-base" :class="buttonStyle" type="button">
|
||||
<span v-if="loading" class="icon">
|
||||
<FontAwesomeIcon icon="sync-alt" class="sync-alt"/>
|
||||
</span>
|
||||
<slot v-if="! loading"></slot>
|
||||
<div v-if="loading" class="icon">
|
||||
<refresh-cw-icon size="16" class="sync-alt"></refresh-cw-icon>
|
||||
</div>
|
||||
<div class="content">
|
||||
<slot v-if="! loading"></slot>
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { RefreshCwIcon } from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'ButtonBase',
|
||||
props: ['buttonStyle', 'loading']
|
||||
props: ['buttonStyle', 'loading'],
|
||||
components: {
|
||||
RefreshCwIcon,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -26,40 +33,81 @@
|
||||
border-radius: 8px;
|
||||
border: 0;
|
||||
padding: 10px 28px;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
line-height: 1;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
&.theme {
|
||||
color: $theme;
|
||||
background: rgba($theme, .1);
|
||||
|
||||
.content {
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
polyline, path {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
&.theme-solid {
|
||||
color: white;
|
||||
background: $theme;
|
||||
|
||||
path {
|
||||
fill: white;
|
||||
.content {
|
||||
color: white;
|
||||
}
|
||||
|
||||
polyline, path {
|
||||
stroke: white;
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: $danger;
|
||||
background: rgba($danger, .1);
|
||||
|
||||
.content {
|
||||
color: $danger;
|
||||
}
|
||||
|
||||
polyline, path {
|
||||
stroke: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
&.danger-solid {
|
||||
color: white;
|
||||
background: $danger;
|
||||
|
||||
.content {
|
||||
color: white;
|
||||
}
|
||||
|
||||
polyline, path {
|
||||
stroke: white;
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
color: $text;
|
||||
background: $light_background;
|
||||
|
||||
.content {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
polyline, path {
|
||||
stroke: $text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
68
resources/js/components/Others/EmptyPageContent.vue
Normal file
68
resources/js/components/Others/EmptyPageContent.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="empty-page-content">
|
||||
<div class="content">
|
||||
<div class="icon">
|
||||
<file-icon v-if="icon === 'file'" size="38"></file-icon>
|
||||
<file-text-icon v-if="icon === 'file-text'" size="38"></file-text-icon>
|
||||
</div>
|
||||
<div class="header">
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
<h2 class="description">{{ description }}</h2>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FileIcon, FileTextIcon } from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'EmptyPageContent',
|
||||
props: ['icon','title','description'],
|
||||
components: {
|
||||
FileTextIcon,
|
||||
FileIcon,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.empty-page-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
.content {
|
||||
margin: 0 auto;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
path, polyline, line {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.title {
|
||||
@include font-size(23);
|
||||
font-weight: 700;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.description {
|
||||
@include font-size(16);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -120,7 +120,7 @@
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
left: 0;
|
||||
padding: 7px;
|
||||
padding: 25px;
|
||||
display: block;
|
||||
|
||||
&.fit-image {
|
||||
|
||||
@@ -34,6 +34,12 @@
|
||||
@include font-size(15);
|
||||
line-height: 1.6;
|
||||
word-break: break-all;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
b {
|
||||
font-weight: 700;
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
@@ -120,6 +120,7 @@
|
||||
|
||||
.sign-in-button {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.price {
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<router-link v-if="user.data.attributes.role === 'admin'" :to="{name: 'Users'}" :class="{'is-active': $isThisRoute($route, adminRoutes)}" class="icon-navigation-item users">
|
||||
<router-link v-if="user.data.attributes.role === 'admin'" :to="{name: 'Dashboard'}" :class="{'is-active': $isThisRoute($route, adminRoutes)}" class="icon-navigation-item users">
|
||||
<div class="button-icon">
|
||||
<settings-icon size="19"></settings-icon>
|
||||
</div>
|
||||
@@ -82,16 +82,21 @@
|
||||
data() {
|
||||
return {
|
||||
adminRoutes: [
|
||||
'AppSettings',
|
||||
'AppAppearance',
|
||||
'AppBillings',
|
||||
'AppEmail',
|
||||
'AppOthers',
|
||||
'Dashboard',
|
||||
'PlanSubscribers',
|
||||
'PlanCreate',
|
||||
'PlanSettings',
|
||||
'PlanDelete',
|
||||
|
||||
'GatewayTransactions',
|
||||
'GatewaySettings',
|
||||
'UserInvoices',
|
||||
'UserSubscription',
|
||||
'UserInvoices',
|
||||
'UserPassword',
|
||||
'UserStorage',
|
||||
'UserDelete',
|
||||
'PlanCreate',
|
||||
'UserCreate',
|
||||
'UserDelete',
|
||||
|
||||
Reference in New Issue
Block a user