mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 00:22:15 +00:00
added prettier
This commit is contained in:
Čarodej
@@ -1,130 +1,140 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--Datatable-->
|
||||
<DatatableWrapper v-if="! config.isEmptySubscriptions" @init="isLoading = false" api="/api/subscriptions/admin" :paginator="true" :columns="columns" class="card shadow-card overflow-x-auto">
|
||||
<!--Datatable-->
|
||||
<DatatableWrapper
|
||||
v-if="!config.isEmptySubscriptions"
|
||||
@init="isLoading = false"
|
||||
api="/api/subscriptions/admin"
|
||||
:paginator="true"
|
||||
:columns="columns"
|
||||
class="card overflow-x-auto shadow-card"
|
||||
>
|
||||
<!--Table data content-->
|
||||
<template slot-scope="{ row }">
|
||||
<tr class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
|
||||
<td class="py-5 pr-3 md:pr-1">
|
||||
<router-link
|
||||
class="flex items-center"
|
||||
:to="{
|
||||
name: 'UserDetail',
|
||||
params: {
|
||||
id: row.data.relationships.user.data.id,
|
||||
},
|
||||
}"
|
||||
>
|
||||
<MemberAvatar :is-border="false" :size="36" :member="row.data.relationships.user" />
|
||||
<div class="ml-3 pr-10">
|
||||
<b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
|
||||
{{ row.data.relationships.user.data.attributes.name }}
|
||||
</b>
|
||||
<span class="block text-xs text-gray-600 dark:text-gray-500">
|
||||
{{ row.data.relationships.user.data.attributes.email }}
|
||||
</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</td>
|
||||
<td class="px-3 md:px-1">
|
||||
<ColorLabel :color="$getSubscriptionStatusColor(row.data.attributes.status)">
|
||||
{{ row.data.attributes.status }}
|
||||
</ColorLabel>
|
||||
</td>
|
||||
<td class="px-3 md:px-1">
|
||||
<span class="text-limit text-sm font-bold capitalize" style="max-width: 160px">
|
||||
{{ row.data.attributes.name }}
|
||||
</span>
|
||||
<span class="block text-xs font-bold text-gray-400">
|
||||
{{ row.data.relationships.plan.data.attributes.price }}
|
||||
/
|
||||
{{ $t(`interval.${row.data.relationships.plan.data.attributes.interval}`) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-3 md:px-1">
|
||||
<span class="text-sm font-bold">
|
||||
<!--todo: update renew attribute-->
|
||||
{{ row.data.attributes.renews_at ? row.data.attributes.renews_at : row.data.attributes.created_at }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-3 md:px-1">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.ends_at ? row.data.attributes.ends_at : '-' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="pl-3 text-right md:pl-1">
|
||||
<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver" />
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</DatatableWrapper>
|
||||
|
||||
<!--Table data content-->
|
||||
<template slot-scope="{ row }">
|
||||
<tr class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
|
||||
<td class="py-5 md:pr-1 pr-3">
|
||||
<router-link class="flex items-center" :to="{name: 'UserDetail', params: {id: row.data.relationships.user.data.id}}">
|
||||
<MemberAvatar
|
||||
:is-border="false"
|
||||
:size="36"
|
||||
:member="row.data.relationships.user"
|
||||
/>
|
||||
<div class="ml-3 pr-10">
|
||||
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
|
||||
{{ row.data.relationships.user.data.attributes.name }}
|
||||
</b>
|
||||
<span class="block text-xs dark:text-gray-500 text-gray-600">
|
||||
{{ row.data.relationships.user.data.attributes.email }}
|
||||
</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</td>
|
||||
<td class="md:px-1 px-3">
|
||||
<ColorLabel :color="$getSubscriptionStatusColor(row.data.attributes.status)">
|
||||
{{ row.data.attributes.status }}
|
||||
</ColorLabel>
|
||||
</td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold capitalize text-limit" style="max-width: 160px">
|
||||
{{ row.data.attributes.name }}
|
||||
</span>
|
||||
<span class="block text-xs font-bold text-gray-400">
|
||||
{{ row.data.relationships.plan.data.attributes.price }} / {{ $t(`interval.${row.data.relationships.plan.data.attributes.interval}`) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold">
|
||||
<!--todo: update renew attribute-->
|
||||
{{ row.data.attributes.renews_at ? row.data.attributes.renews_at : row.data.attributes.created_at }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.ends_at ? row.data.attributes.ends_at : '-' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="md:pl-1 pl-3 text-right">
|
||||
<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</DatatableWrapper>
|
||||
<!--Empty State-->
|
||||
<div v-if="config.isEmptySubscriptions" class="flex h-full items-center justify-center">
|
||||
<div class="text-center">
|
||||
<img class="mb-6 inline-block w-28" src="https://twemoji.maxcdn.com/v/13.1.0/svg/1f5c3.svg" alt="transaction" />
|
||||
|
||||
<!--Empty State-->
|
||||
<div v-if="config.isEmptySubscriptions" class="flex items-center justify-center h-full">
|
||||
<div class="text-center">
|
||||
<img class="w-28 inline-block mb-6" src="https://twemoji.maxcdn.com/v/13.1.0/svg/1f5c3.svg" alt="transaction">
|
||||
<h1 class="mb-1 text-2xl font-bold">
|
||||
{{ $t('There is Nothing') }}
|
||||
</h1>
|
||||
|
||||
<h1 class="text-2xl font-bold mb-1">
|
||||
{{ $t("There is Nothing") }}
|
||||
</h1>
|
||||
|
||||
<p class="text-sm text-gray-600">
|
||||
{{ $t('All your subscriptions will be visible here') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600">
|
||||
{{ $t('All your subscriptions will be visible here') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ColorLabel from "../../components/Others/ColorLabel";
|
||||
import MemberAvatar from "../../components/FilesView/MemberAvatar";
|
||||
import DatatableWrapper from "../../components/Others/Tables/DatatableWrapper";
|
||||
import { mapGetters } from 'vuex'
|
||||
import ColorLabel from '../../components/Others/ColorLabel'
|
||||
import MemberAvatar from '../../components/FilesView/MemberAvatar'
|
||||
import DatatableWrapper from '../../components/Others/Tables/DatatableWrapper'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Subscriptions',
|
||||
components: {
|
||||
ColorLabel,
|
||||
MemberAvatar,
|
||||
DatatableWrapper,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'config',
|
||||
]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
columns: [
|
||||
{
|
||||
label: this.$t('admin_page_user.table.name'),
|
||||
field: 'user_id',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('Status'),
|
||||
field: 'status',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('Note'),
|
||||
field: 'plan.name',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('Renews At'),
|
||||
field: 'created_at',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('Ends At'),
|
||||
field: 'created_at',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('Service'),
|
||||
field: 'driver.driver',
|
||||
sortable: true
|
||||
},
|
||||
],
|
||||
}
|
||||
export default {
|
||||
name: 'Subscriptions',
|
||||
components: {
|
||||
ColorLabel,
|
||||
MemberAvatar,
|
||||
DatatableWrapper,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
columns: [
|
||||
{
|
||||
label: this.$t('admin_page_user.table.name'),
|
||||
field: 'user_id',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: this.$t('Status'),
|
||||
field: 'status',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: this.$t('Note'),
|
||||
field: 'plan.name',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: this.$t('Renews At'),
|
||||
field: 'created_at',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: this.$t('Ends At'),
|
||||
field: 'created_at',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: this.$t('Service'),
|
||||
field: 'driver.driver',
|
||||
sortable: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user