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

SaaS frontend update

Browse Source
This commit is contained in:
carodej
2020-05-29 17:37:23 +02:00
parent 252b6fd0bf
commit 61a8849e2d
21 changed files with 1975 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,7 +16,8 @@
{{ user.attributes.name }}
<ColorLabel color="purple">
{{ user.attributes.role }}
</ColorLabel></b>
</ColorLabel>
</b>
<span class="email">{{ user.attributes.email }}</span>
</div>
</div>
@@ -41,6 +42,15 @@
</div>
</router-link>
<router-link replace :to="{name: 'UserInvoices'}" class="menu-list-item link">
<div class="icon">
<file-text-icon size="17"></file-text-icon>
</div>
<div class="label">
Invoices
</div>
</router-link>
<router-link replace :to="{name: 'UserPassword'}" class="menu-list-item link">
<div class="icon">
<lock-icon size="17"></lock-icon>
@@ -50,7 +60,8 @@
</div>
</router-link>
<router-link replace :to="{name: 'UserDelete'}" v-if="user.attributes.name !== app.user.name" class="menu-list-item link">
<router-link replace :to="{name: 'UserDelete'}" v-if="user.attributes.name !== app.user.name"
class="menu-list-item link">
<div class="icon">
<trash2-icon size="17"></trash2-icon>
</div>
@@ -61,7 +72,7 @@
</div>
<!--Router Content-->
<router-view :user="user" @reload-user="fetchUser" />
<router-view :user="user" @reload-user="fetchUser"/>
</div>
</div>
<div id="loader" v-if="isLoading">
@@ -71,28 +82,29 @@
</template>
<script>
import { UserIcon, HardDriveIcon, LockIcon, Trash2Icon } from 'vue-feather-icons'
import {UserIcon, HardDriveIcon, LockIcon, Trash2Icon, FileTextIcon} from 'vue-feather-icons'
import StorageItemDetail from '@/components/Others/StorageItemDetail'
import MobileHeader from '@/components/Mobile/MobileHeader'
import SectionTitle from '@/components/Others/SectionTitle'
import PageHeader from '@/components/Others/PageHeader'
import ColorLabel from '@/components/Others/ColorLabel'
import Spinner from '@/components/FilesView/Spinner'
import { mapGetters } from 'vuex'
import {mapGetters} from 'vuex'
import axios from 'axios'
export default {
name: 'Profile',
components: {
Trash2Icon,
LockIcon,
HardDriveIcon,
StorageItemDetail,
SectionTitle,
FileTextIcon,
MobileHeader,
PageHeader,
ColorLabel,
Trash2Icon,
UserIcon,
LockIcon,
Spinner,
},
computed: {

199
resources/js/views/Admin/Users/UserTabs/UserInvoices.vue Normal file
View File

@@ -0,0 +1,199 @@
<template>
<div class="page-tab">
<!--Change role-->
<div class="page-tab-group">
<DatatableWrapper :paginator="true" :columns="columns" :data="invoices" class="table">
<template scope="{ row }">
<tr>
<td>
<span class="cell-item">
${{ row.attributes.total }}
</span>
</td>
<td>
<span class="cell-item">
{{ row.attributes.plan }}
</span>
</td>
<td>
<span class="cell-item">
{{ row.attributes.created_at_formatted }}
</span>
</td>
<td>
<div class="action-icons">
<download-cloud-icon size="15" class="icon"></download-cloud-icon>
</div>
</td>
</tr>
</template>
</DatatableWrapper>
</div>
</div>
</template>
<script>
import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
import {DownloadCloudIcon} from "vue-feather-icons";
import axios from 'axios'
export default {
name: 'UserStorage',
components: {
DatatableWrapper,
DownloadCloudIcon,
},
data() {
return {
isLoading: false,
invoices: [
{
id: '1',
type: 'invoices',
attributes: {
total: 9.99,
plan: 'Starter Plan',
created_at: '30. April. 2020',
created_at_formatted: '30. April. 2020',
download: 'https://vuefilemanager.com/',
},
},
{
id: '2',
type: 'invoices',
attributes: {
total: 9.99,
plan: 'Starter Plan',
created_at: '30. April. 2020',
created_at_formatted: '30. April. 2020',
download: 'https://vuefilemanager.com/',
},
},
{
id: '3',
type: 'invoices',
attributes: {
total: 49.99,
plan: 'Business Plan',
created_at: '31. April. 2020',
created_at_formatted: '31. April. 2020',
download: 'https://vuefilemanager.com/',
},
},
{
id: '4',
type: 'invoices',
attributes: {
total: 29.99,
plan: 'Professional Plan',
created_at: '31. April. 2020',
created_at_formatted: '31. April. 2020',
download: 'https://vuefilemanager.com/',
},
},
{
id: '5',
type: 'invoices',
attributes: {
total: 9.99,
plan: 'Starter Plan',
created_at: '30. April. 2020',
created_at_formatted: '30. April. 2020',
download: 'https://vuefilemanager.com/',
},
},
{
id: '6',
type: 'invoices',
attributes: {
total: 9.99,
plan: 'Starter Plan',
created_at: '30. April. 2020',
created_at_formatted: '30. April. 2020',
download: 'https://vuefilemanager.com/',
},
},
{
id: '7',
type: 'invoices',
attributes: {
total: 49.99,
plan: 'Business Plan',
created_at: '31. April. 2020',
created_at_formatted: '31. April. 2020',
download: 'https://vuefilemanager.com/',
},
},
{
id: '8',
type: 'invoices',
attributes: {
total: 29.99,
plan: 'Professional Plan',
created_at: '31. April. 2020',
created_at_formatted: '31. April. 2020',
download: 'https://vuefilemanager.com/',
},
},
],
columns: [
{
label: 'Total',
field: 'attributes.total',
sortable: true
},
{
label: 'Plan',
field: 'attributes.plan',
sortable: true
},
{
label: 'Payed',
field: 'attributes.created_at',
sortable: true
},
{
label: this.$t('admin_page_user.table.action'),
field: 'data.action',
sortable: false
},
],
}
},
created() {
/*axios.get('/api/users/' + this.$route.params.id + '/storage')
.then(response => {
this.storage = response.data.data
this.isLoading = false
})*/
}
}
</script>
<style lang="scss" scoped>
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
@import '@assets/vue-file-manager/_forms';
.page-tab {
.page-tab-group {
margin-bottom: 45px;
}
}
.block-form {
max-width: 100%;
}
@media only screen and (max-width: 960px) {
}
@media (prefers-color-scheme: dark) {
}
</style>