nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-22 01:22:16 +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

240
resources/js/views/Admin/Plans.vue Normal file
View File

@@ -0,0 +1,240 @@
<template>
<div id="single-page">
<div id="page-content" v-if="! isLoading">
<MobileHeader :title="$router.currentRoute.meta.title"/>
<PageHeader :title="$router.currentRoute.meta.title"/>
<div class="content-page">
<div class="table-tools">
<div class="buttons">
<router-link :to="{name: 'UserCreate'}">
<MobileActionButton icon="plus">
Create Plan
</MobileActionButton>
</router-link>
</div>
<div class="searching">
</div>
</div>
<DatatableWrapper :paginator="false" :columns="columns" :data="plans" class="table table-users">
<template scope="{ row }">
<tr>
<td class="name">
<router-link :to="{name: 'UserDetail', params: {id: row.id}}" class="cell-item" tag="div">
<span>{{ row.attributes.name }}</span>
</router-link>
</td>
<td>
<span class="cell-item">
<SwitchInput class="switch" :state="row.attributes.status"/>
</span>
</td>
<td>
<span class="cell-item">
${{ row.attributes.price }}
</span>
</td>
<td>
<span class="cell-item">
{{ row.attributes.capacity }}
</span>
</td>
<td>
<span class="cell-item">
{{ row.attributes.subscribers }}
</span>
</td>
<td>
<div class="action-icons">
<router-link :to="{name: 'UserDetail', params: {id: row.id}}">
<edit-2-icon size="15" class="icon icon-edit"></edit-2-icon>
</router-link>
<router-link :to="{name: 'UserDelete', params: {id: row.id}}">
<trash2-icon size="15" class="icon icon-trash"></trash2-icon>
</router-link>
</div>
</td>
</tr>
</template>
</DatatableWrapper>
</div>
</div>
<div id="loader" v-if="isLoading">
<Spinner></Spinner>
</div>
</div>
</template>
<script>
import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
import MobileActionButton from '@/components/FilesView/MobileActionButton'
import SwitchInput from '@/components/Others/Forms/SwitchInput'
import MobileHeader from '@/components/Mobile/MobileHeader'
import SectionTitle from '@/components/Others/SectionTitle'
import ButtonBase from '@/components/FilesView/ButtonBase'
import {Trash2Icon, Edit2Icon} from "vue-feather-icons";
import PageHeader from '@/components/Others/PageHeader'
import ColorLabel from '@/components/Others/ColorLabel'
import Spinner from '@/components/FilesView/Spinner'
import axios from 'axios'
export default {
name: 'Plans',
components: {
MobileActionButton,
DatatableWrapper,
SectionTitle,
MobileHeader,
SwitchInput,
Trash2Icon,
PageHeader,
ButtonBase,
ColorLabel,
Edit2Icon,
Spinner,
},
data() {
return {
isLoading: false,
plans: [
{
id: '1',
type: 'plans',
attributes: {
name: 'Starter Plan',
status: 1,
price: 9.99,
capacity: '200GB',
subscribers: 172,
}
},
{
id: '2',
type: 'plans',
attributes: {
name: 'Professional Plan',
status: 0,
price: 19.99,
capacity: '500GB',
subscribers: 1929,
}
},
{
id: '3',
type: 'plans',
attributes: {
name: 'Business Plan',
status: 1,
price: 44.99,
capacity: '1TB',
subscribers: 389,
}
},
],
columns: [
{
label: 'Plan',
field: 'attributes.name',
sortable: true
},
{
label: 'Status',
field: 'attributes.status',
sortable: true
},
{
label: 'Price',
field: 'attributes.price',
sortable: true
},
{
label: 'Storage Capacity',
field: 'attributes.capacity',
sortable: true
},
{
label: 'Subscribers',
field: 'attributes.subscribers',
sortable: true
},
{
label: this.$t('admin_page_user.table.action'),
field: 'data.action',
sortable: false
},
],
}
},
created() {
/*axios.get('/api/plans')
.then(response => {
this.plans = response.data.data
this.isLoading = false
})*/
}
}
</script>
<style lang="scss" scoped>
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.table-tools {
background: white;
display: flex;
justify-content: space-between;
padding: 15px 0 10px;
position: sticky;
top: 40px;
z-index: 9;
}
.table {
.cell-item {
@include font-size(15);
white-space: nowrap;
}
.name {
font-weight: 700;
cursor: pointer;
}
}
@media only screen and (max-width: 690px) {
.table-tools {
padding: 0 0 5px;
}
}
@media (prefers-color-scheme: dark) {
.table-tools {
background: $dark_mode_background;
}
.action-icons {
.icon {
cursor: pointer;
circle, path, line, polyline {
stroke: $dark_mode_text_primary;
}
}
}
.user-thumbnail {
.info {
.email {
color: $dark_mode_text_secondary;
}
}
}
}
</style>