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

dashboard include

Browse Source
This commit is contained in:
carodej
2020-07-05 09:14:17 +02:00
parent e1ebb70035
commit 5a5125967f
61 changed files with 1532 additions and 617 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
resources/js/components/Admin/WidgetLatestRegistrations.vue Normal file
View 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
View 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
View 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>