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

tables refactoring

Browse Source
This commit is contained in:
Čarodej
2021-11-24 07:03:41 +01:00
parent f711ec7d89
commit 913bdf70ad
8 changed files with 191 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/views/Admin.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="sm:flex md:h-screen md:overflow-hidden" style="background: rgba(244, 245, 246, 0.6)">
<div class="sm:flex md:h-screen md:overflow-hidden" style="background: rgb(249, 249, 250)">
<!--On Top of App Components-->
<FilePreview />
<Spotlight />
resources/js/views/Admin/Pages.vue
+1 -1
View File
@@ -4,7 +4,7 @@
<div class="card shadow-card">
<DatatableWrapper @init="isLoading = false" api="/api/admin/pages" :paginator="false" :columns="columns" class="table table-users">
<template slot-scope="{ row }">
<tr>
<tr style="border-bottom: 1px dashed #f3f3f3;">
<td class="py-4">
<router-link :to="{name: 'PageEdit', params: {slug: row.data.attributes.slug}}" class="text-sm font-bold cursor-pointer" tag="div">
{{ row.data.attributes.title }}
resources/js/views/Admin/Users.vue
+1 -1
View File
@@ -11,7 +11,7 @@
<!--Datatable-->
<DatatableWrapper @init="isLoading = false" api="/api/admin/users" :paginator="true" :columns="columns" class="table table-users">
<template slot-scope="{ row }">
<tr>
<tr style="border-bottom: 1px dashed #f3f3f3;">
<td class="py-3">
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
<DatatableCellImage
resources/js/views/Admin/Users/UserTabs/UserInvoices.vue
+44 -64
View File
@@ -1,74 +1,64 @@
<template>
<PageTab :is-loading="isLoading">
<PageTabGroup>
<DatatableWrapper
@init="isLoading = false"
:api="'/api/admin/users/' + this.$route.params.id + '/invoices'"
:paginator="false"
:columns="columns"
class="table"
>
<!--Table data content-->
<div class="card shadow-card">
<DatatableWrapper
@init="isLoading = false"
:api="'/api/subscription/users/' + this.$route.params.id + '/transactions'"
:paginator="true"
:columns="columns"
>
<template slot-scope="{ row }">
<tr>
<td>
<a :href="$getInvoiceLink(row.data.attributes.customer, row.data.id)" target="_blank" class="cell-item">
{{ row.data.attributes.order }}
</a>
<tr style="border-bottom: 1px dashed #f3f3f3;">
<td class="py-4">
<span class="text-sm font-bold">
{{ row.data.attributes.plan_name }}
</span>
</td>
<td>
<span class="cell-item">
{{ row.data.attributes.total }}
<ColorLabel color="purple">
{{ row.data.attributes.status }}
</ColorLabel>
</td>
<td>
<span class="text-sm font-bold">
{{ row.data.attributes.price }}
</span>
</td>
<td>
<span class="cell-item" v-if="row.data.attributes.invoice_subscriptions[0].description">
{{ row.data.attributes.invoice_subscriptions[0].description }}
<span class="text-sm font-bold">
{{ row.data.attributes.created_at }}
</span>
</td>
<td>
<span class="cell-item">
{{ row.data.attributes.created_at_formatted }}
<td class="text-right">
<span class="text-sm font-bold w-full">
{{ row.data.attributes.driver }}
</span>
</td>
<td>
<div class="action-icons">
<a :href="$getInvoiceLink(row.data.attributes.customer, row.data.id)" target="_blank">
<external-link-icon size="15" class="icon"></external-link-icon>
</a>
</div>
</td>
</tr>
</template>
<!--Empty page-->
<!--Empty page-->
<template v-slot:empty-page>
<InfoBox class="form-fixed-width">
<InfoBox>
<p>{{ $t('admin_page_user.invoices.empty') }}</p>
</InfoBox>
</template>
</DatatableWrapper>
</PageTabGroup>
</div>
</PageTab>
</template>
<script>
import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
import EmptyPageContent from '/resources/js/components/Others/EmptyPageContent'
import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
import ColorLabel from "/resources/js/components/Others/ColorLabel"
import PageTab from '/resources/js/components/Others/Layout/PageTab'
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
import {ExternalLinkIcon} from "vue-feather-icons";
import axios from 'axios'
export default {
name: 'UserInvoices',
components: {
EmptyPageContent,
DatatableWrapper,
ExternalLinkIcon,
PageTabGroup,
ColorLabel,
InfoBox,
PageTab,
},
@@ -77,41 +67,31 @@
isLoading: true,
columns: [
{
label: this.$t('admin_page_invoices.table.number'),
field: 'data.attributes.order',
sortable: false
label: this.$t('Plan'),
field: 'plan_name',
sortable: true
},
{
label: this.$t('Status'),
field: 'status',
sortable: true
},
{
label: this.$t('admin_page_invoices.table.total'),
field: 'data.attributes.bag.amount',
sortable: false
field: 'amount',
sortable: true
},
{
label: this.$t('admin_page_invoices.table.plan'),
field: 'data.attributes.bag.amount',
sortable: false
label: this.$t('Payed At'),
field: 'created_at',
sortable: true
},
{
label: this.$t('admin_page_invoices.table.payed'),
field: 'data.attributes.created_at',
sortable: false
},
{
label: this.$t('admin_page_user.table.action'),
sortable: false
label: this.$t('Service'),
sortable: true
},
],
}
},
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
@import '/resources/sass/vuefilemanager/_forms';
.block-form {
max-width: 100%;
}
</style>
resources/js/views/Profile.vue
+6 -6
View File
@@ -1,5 +1,5 @@
<template>
<div class="sm:flex md:h-screen md:overflow-hidden" style="background: rgba(244, 245, 246, 0.6)">
<div class="sm:flex md:h-screen md:overflow-hidden" style="background: rgb(249, 249, 250)">
<!--On Top of App Components-->
<FilePreview />
<Spotlight />
@@ -137,13 +137,13 @@
route: 'Subscription',
},
{
title: this.$t('menu.payment_cards'),
route: 'PaymentMethods',
},
{
title: this.$t('menu.invoices'),
title: this.$t('Transactions'),
route: 'Invoice',
},
/*{
title: this.$t('menu.payment_cards'),
route: 'PaymentMethods',
},*/
]
}
},
resources/js/views/User/Invoices.vue
+55 -71
View File
@@ -1,69 +1,64 @@
<template>
<PageTab :is-loading="isLoading">
<PageTabGroup v-show="! isLoading">
<FormLabel>{{ $t('user_invoices.title') }}</FormLabel>
<DatatableWrapper @init="isLoading = false" api="/api/user/subscription/invoices" :paginator="false" :columns="columns" class="table">
<!--Table data content-->
<div class="card shadow-card">
<DatatableWrapper
@init="isLoading = false"
api="/api/subscription/transactions"
:paginator="true"
:columns="columns"
>
<template slot-scope="{ row }">
<tr>
<td>
<a :href="'/invoice/' + row.data.attributes.customer + '/' + row.data.id" target="_blank" class="cell-item">
{{ row.data.attributes.order }}
</a>
<tr style="border-bottom: 1px dashed #f3f3f3;">
<td class="py-4">
<span class="text-sm font-bold">
{{ row.data.attributes.plan_name }}
</span>
</td>
<td>
<span class="cell-item">
{{ row.data.attributes.total }}
<ColorLabel color="purple">
{{ row.data.attributes.status }}
</ColorLabel>
</td>
<td>
<span class="text-sm font-bold">
{{ row.data.attributes.price }}
</span>
</td>
<td>
<span class="cell-item" v-if="row.data.attributes.invoice_subscriptions[0].description">
{{ row.data.attributes.invoice_subscriptions[0].description }}
<span class="text-sm font-bold">
{{ row.data.attributes.created_at }}
</span>
</td>
<td>
<span class="cell-item">
{{ row.data.attributes.created_at_formatted }}
<td class="text-right">
<span class="text-sm font-bold w-full">
{{ row.data.attributes.driver }}
</span>
</td>
<td>
<div class="action-icons">
<a :href="$getInvoiceLink(row.data.attributes.customer, row.data.id)" target="_blank">
<external-link-icon size="15" class="icon"></external-link-icon>
</a>
</div>
</td>
</tr>
</template>
<!--Empty page-->
<!--Empty page-->
<template v-slot:empty-page>
<InfoBox>
<p>{{ $t('user_invoices.empty') }}</p>
<p>{{ $t('admin_page_user.invoices.empty') }}</p>
</InfoBox>
</template>
</DatatableWrapper>
</PageTabGroup>
</div>
</PageTab>
</template>
<script>
import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
import PageTab from '/resources/js/components/Others/Layout/PageTab'
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
import {ExternalLinkIcon} from "vue-feather-icons"
import axios from 'axios'
import ColorLabel from "/resources/js/components/Others/ColorLabel"
export default {
name: 'UserInvoices',
components: {
DatatableWrapper,
ExternalLinkIcon,
PageTabGroup,
FormLabel,
ColorLabel,
InfoBox,
PageTab,
},
@@ -71,44 +66,33 @@
return {
isLoading: true,
invoices: undefined,
columns: [
{
label: this.$t('rows.invoice.number'),
field: 'data.attributes.order',
sortable: false
},
{
label: this.$t('rows.invoice.total'),
field: 'data.attributes.bag.amount',
sortable: false
},
{
label: this.$t('rows.invoice.plan'),
field: 'data.attributes.bag.amount',
sortable: false
},
{
label: this.$t('rows.invoice.payed'),
field: 'data.attributes.created_at',
sortable: false
},
{
label: this.$t('admin_page_user.table.action'),
sortable: false
},
],
columns: [
{
label: this.$t('Plan'),
field: 'plan_name',
sortable: true
},
{
label: this.$t('Status'),
field: 'status',
sortable: true
},
{
label: this.$t('admin_page_invoices.table.total'),
field: 'amount',
sortable: true
},
{
label: this.$t('Payed At'),
field: 'created_at',
sortable: true
},
{
label: this.$t('Service'),
sortable: true
},
],
}
},
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
@import '/resources/sass/vuefilemanager/_forms';
.block-form {
max-width: 100%;
}
</style>