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

plan pages refactoring

Browse Source
This commit is contained in:
Čarodej
2021-11-25 09:35:12 +01:00
parent 936af4497b
commit d8f1f396d5
9 changed files with 346 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
resources/js/views/Admin/Plans/PlanTabs/PlanSubscribers.vue
View File

@@ -1,50 +1,67 @@
<template>
<PageTab :is-loading="isLoading">
<PageTabGroup>
<DatatableWrapper @init="isLoading = false" :api="`/api/admin/plans/${this.$route.params.id}/subscribers`" :paginator="false" :columns="columns" :data="subscribers" class="table">
<DatatableWrapper @data="subscribers = $event" @init="isLoading = false" :api="`/api/subscription/plans/${this.$route.params.id}/subscribers`" :paginator="true" :columns="columns" class="card shadow-card">
<!--Table data content-->
<template slot-scope="{ row }">
<tr>
<td>
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
<DatatableCellImage
image-size="small"
:image="row.data.relationships.settings.data.attributes.avatar.sm"
:title="row.data.relationships.settings.data.attributes.name"
/>
</router-link>
</td>
<td>
<span class="cell-item">
{{ row.data.attributes.storage.used }}%
</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" />
</router-link>
<router-link :to="{name: 'UserDelete', params: {id: row.data.id}}">
<trash2-icon size="15" class="icon icon-trash" />
</router-link>
</div>
</td>
</tr>
</template>
<!--Table data content-->
<template slot-scope="{ row }">
<tr class="border-b dark:border-opacity-5 border-light border-dashed">
<td>
<div class="flex items-center">
<MemberAvatar
:is-border="false"
:size="36"
:member="row.data.relationships.user"
/>
<div class="ml-3">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-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>
</div>
</td>
<td>
<ColorLabel :color="getSubscriptionStatusColor(row.data.attributes.status)">
{{ row.data.attributes.status }}
</ColorLabel>
</td>
<td class="py-5">
<span class="text-sm font-bold capitalize text-limit" style="max-width: 160px">
{{ row.data.attributes.name }}
</span>
</td>
<td>
<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>
<span class="text-sm font-bold">
{{ row.data.attributes.ends_at ? row.data.attributes.ends_at : '-' }}
</span>
</td>
<td class="text-right">
<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
</td>
</tr>
</template>
<!--Empty page-->
<template v-slot:empty-page>
<InfoBox>
<p>{{ $t('admin_page_plans.subscribers.empty') }}</p>
</InfoBox>
</template>
</DatatableWrapper>
</PageTabGroup>
<!--Empty page-->
<template v-slot:empty-page>
<InfoBox style="margin-bottom: 0">
<p>{{ $t('admin_page_plans.subscribers.empty') }}</p>
</InfoBox>
</template>
</DatatableWrapper>
</PageTab>
</template>
<script>
import ColorLabel from "../../../../components/Others/ColorLabel";
import MemberAvatar from "../../../../components/FilesView/MemberAvatar";
import DatatableCellImage from '/resources/js/components/Others/Tables/DatatableCellImage'
import {DownloadCloudIcon, Edit2Icon, Trash2Icon} from "vue-feather-icons"
import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
@@ -60,6 +77,8 @@
DownloadCloudIcon,
DatatableWrapper,
PageTabGroup,
MemberAvatar,
ColorLabel,
Trash2Icon,
Edit2Icon,
PageTab,
@@ -76,12 +95,25 @@
sortable: true
},
{
label: this.$t('admin_page_user.table.storage_used'),
label: this.$t('Status'),
field: 'used',
sortable: false
},
{
label: this.$t('admin_page_user.table.action'),
label: this.$t('Plan'),
field: 'name',
sortable: true
},
{
label: this.$t('Renews At'),
sortable: false
},
{
label: this.$t('Ends At'),
sortable: false
},
{
label: this.$t('Service'),
sortable: false
},
],
@@ -89,13 +121,3 @@
},
}
</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>