nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 08:12:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

datatable refactoring

Browse Source
This commit is contained in:
Čarodej
2022-01-26 10:39:10 +01:00
parent 3652c64738
commit fb91c1883a
24 changed files with 925 additions and 625 deletions
Download Patch File Download Diff File Expand all files Collapse all files

347
resources/js/components/Admin/WidgetLatestRegistrations.vue
View File

@@ -1,182 +1,182 @@
<template>
<DatatableWrapper @init="isLoading = false" api="/api/admin/dashboard/newbies" :paginator="false" :columns="columns" class="table table-users mt-6">
<DatatableWrapper @init="isLoading = false" api="/api/admin/dashboard/newbies" :paginator="false" :columns="columns" class="overflow-x-auto mt-6">
<template slot-scope="{ row }">
<!--Not a subscription-->
<tr v-if="config.subscriptionType === 'none'" class="border-b dark:border-opacity-5 border-light border-dashed">
<td class="py-3">
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
<div class="flex items-center">
<MemberAvatar
:is-border="false"
:size="44"
:member="row.data.relationships.settings"
/>
<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.settings.data.attributes.name }}
</b>
<span class="block text-xs dark:text-gray-500 text-gray-600">
{{ row.data.attributes.email }}
</span>
</div>
<!--Not a subscription-->
<tr v-if="config.subscriptionType === 'none'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
<td class="py-3 md:pr-1 pr-3">
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
<div class="flex items-center">
<MemberAvatar
:is-border="false"
:size="44"
:member="row.data.relationships.settings"
/>
<div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ row.data.relationships.settings.data.attributes.name }}
</b>
<span class="block text-xs dark:text-gray-500 text-gray-600">
{{ row.data.attributes.email }}
</span>
</div>
</router-link>
</td>
<td>
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
{{ row.data.attributes.role }}
</ColorLabel>
</td>
<td>
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
{{ row.data.attributes.storage.used_formatted }}
</span>
<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold">
-
</span>
</td>
<td v-if="config.storageLimit">
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
{{ row.data.attributes.storage.capacity_formatted }}
</span>
<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold">
-
</span>
</td>
<td>
<span class="text-sm font-bold">
{{ row.data.attributes.created_at }}
</span>
</td>
<td>
<div class="flex space-x-2 w-full justify-end">
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDetail', params: {id: row.data.id}}">
<Edit2Icon size="15" class="opacity-75" />
</router-link>
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-red-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDelete', params: {id: row.data.id}}">
<Trash2Icon size="15" class="opacity-75" />
</router-link>
</div>
</td>
</tr>
</router-link>
</td>
<td class="md:px-1 px-3">
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
{{ row.data.attributes.role }}
</ColorLabel>
</td>
<td class="md:px-1 px-3">
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
{{ row.data.attributes.storage.used_formatted }}
</span>
<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold">
-
</span>
</td>
<td class="md:px-1 px-3" v-if="config.storageLimit">
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
{{ row.data.attributes.storage.capacity_formatted }}
</span>
<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold">
-
</span>
</td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
{{ row.data.attributes.created_at }}
</span>
</td>
<td class="md:pl-1 pl-3 text-right">
<div class="flex space-x-2 w-full justify-end">
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDetail', params: {id: row.data.id}}">
<Edit2Icon size="15" class="opacity-75" />
</router-link>
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-red-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDelete', params: {id: row.data.id}}">
<Trash2Icon size="15" class="opacity-75" />
</router-link>
</div>
</td>
</tr>
<!--Fixed subscription-->
<tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed">
<td class="py-3">
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
<div class="flex items-center">
<MemberAvatar
:is-border="false"
:size="44"
:member="row.data.relationships.settings"
/>
<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.settings.data.attributes.name }}
</b>
<span class="block text-xs dark:text-gray-500 text-gray-600">
{{ row.data.attributes.email }}
</span>
</div>
<!--Fixed subscription-->
<tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
<td class="py-3 md:pr-1 pr-3">
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
<div class="flex items-center">
<MemberAvatar
:is-border="false"
:size="44"
:member="row.data.relationships.settings"
/>
<div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ row.data.relationships.settings.data.attributes.name }}
</b>
<span class="block text-xs dark:text-gray-500 text-gray-600">
{{ row.data.attributes.email }}
</span>
</div>
</router-link>
</td>
<td>
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
{{ row.data.attributes.role }}
</ColorLabel>
</td>
<td v-if="config.isSaaS">
<span class="text-sm font-bold">
{{ row.data.relationships.subscription ? $t('global.premium') : $t('global.free') }}
</span>
</td>
<td>
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
{{ row.data.attributes.storage.used_formatted }}
</span>
<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold">
-
</span>
</td>
<td v-if="config.storageLimit">
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
{{ row.data.attributes.storage.capacity_formatted }}
</span>
<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold">
-
</span>
</td>
<td>
<span class="text-sm font-bold">
{{ row.data.attributes.created_at }}
</span>
</td>
<td>
<div class="flex space-x-2 w-full justify-end">
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDetail', params: {id: row.data.id}}">
<Edit2Icon size="15" class="opacity-75" />
</router-link>
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-red-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDelete', params: {id: row.data.id}}">
<Trash2Icon size="15" class="opacity-75" />
</router-link>
</div>
</td>
</tr>
</router-link>
</td>
<td class="md:px-1 px-3">
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
{{ row.data.attributes.role }}
</ColorLabel>
</td>
<td class="md:px-1 px-3" v-if="config.isSaaS">
<span class="text-sm font-bold">
{{ row.data.relationships.subscription ? $t('global.premium') : $t('global.free') }}
</span>
</td>
<td class="md:px-1 px-3">
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
{{ row.data.attributes.storage.used_formatted }}
</span>
<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold">
-
</span>
</td>
<td class="md:px-1 px-3" v-if="config.storageLimit">
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
{{ row.data.attributes.storage.capacity_formatted }}
</span>
<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold">
-
</span>
</td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
{{ row.data.attributes.created_at }}
</span>
</td>
<td class="md:pl-1 pl-3 text-right">
<div class="flex space-x-2 w-full justify-end">
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDetail', params: {id: row.data.id}}">
<Edit2Icon size="15" class="opacity-75" />
</router-link>
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-red-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDelete', params: {id: row.data.id}}">
<Trash2Icon size="15" class="opacity-75" />
</router-link>
</div>
</td>
</tr>
<!--Metered subscription-->
<tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed">
<td class="py-3">
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
<div class="flex items-center">
<MemberAvatar
:is-border="false"
:size="44"
:member="row.data.relationships.settings"
/>
<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.settings.data.attributes.name }}
</b>
<span class="block text-xs dark:text-gray-500 text-gray-600">
{{ row.data.attributes.email }}
</span>
</div>
<!--Metered subscription-->
<tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
<td class="py-3 md:pr-1 pr-3">
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
<div class="flex items-center">
<MemberAvatar
:is-border="false"
:size="44"
:member="row.data.relationships.settings"
/>
<div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ row.data.relationships.settings.data.attributes.name }}
</b>
<span class="block text-xs dark:text-gray-500 text-gray-600">
{{ row.data.attributes.email }}
</span>
</div>
</router-link>
</td>
<td>
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
{{ row.data.attributes.role }}
</ColorLabel>
</td>
<td>
<span class="text-sm font-bold">
{{ row.data.meta.usages.featureEstimates.storage.usage }}
</span>
</td>
<td>
<span class="text-sm font-bold">
{{ row.data.meta.usages.costEstimate }}
</span>
</td>
<td>
<span class="text-sm font-bold">
{{ row.data.attributes.created_at }}
</span>
</td>
<td>
<div class="flex space-x-2 w-full justify-end">
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDetail', params: {id: row.data.id}}">
<Edit2Icon size="15" class="opacity-75" />
</router-link>
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-red-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDelete', params: {id: row.data.id}}">
<Trash2Icon size="15" class="opacity-75" />
</router-link>
</div>
</td>
</tr>
</template>
</router-link>
</td>
<td class="md:px-1 px-3">
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
{{ row.data.attributes.role }}
</ColorLabel>
</td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
{{ row.data.meta.usages.featureEstimates.storage.usage }}
</span>
</td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
{{ row.data.meta.usages.costEstimate }}
</span>
</td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
{{ row.data.attributes.created_at }}
</span>
</td>
<td class="md:pl-1 pl-3 text-right">
<div class="flex space-x-2 w-full justify-end">
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDetail', params: {id: row.data.id}}">
<Edit2Icon size="15" class="opacity-75" />
</router-link>
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-red-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDelete', params: {id: row.data.id}}">
<Trash2Icon size="15" class="opacity-75" />
</router-link>
</div>
</td>
</tr>
</template>
</DatatableWrapper>
</template>
@@ -311,12 +311,3 @@
},
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.dark {
}
</style>

19
resources/js/components/Admin/WidgetLatestTransactions.vue
View File

@@ -2,22 +2,23 @@
<DatatableWrapper
api="/api/admin/dashboard/transactions"
:columns="columns"
class="overflow-x-auto"
>
<template slot-scope="{ row }">
<tr class="border-b dark:border-opacity-5 border-light border-dashed">
<td class="py-5">
<tr class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
<td class="py-5 md:pr-1 pr-3">
<span class="text-sm font-bold">
{{ row.data.attributes.note }}
</span>
</td>
<td>
<td class="md:px-1 px-3">
<div v-if="row.data.relationships.user" class="flex items-center">
<MemberAvatar
:is-border="false"
:size="36"
:member="row.data.relationships.user"
/>
<div class="ml-3">
<div class="ml-3 pr-10">
<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>
@@ -30,7 +31,7 @@
{{ $t('User was deleted') }}
</span>
</td>
<td>
<td class="md:px-1 px-3">
<ColorLabel v-if="config.subscriptionType === 'fixed'" :color="$getTransactionStatusColor(row.data.attributes.status)">
{{ row.data.attributes.status }}
</ColorLabel>
@@ -38,18 +39,18 @@
{{ row.data.attributes.type }}
</ColorLabel>
</td>
<td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
</span>
</td>
<td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
{{ row.data.attributes.created_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 class="md:pl-1 pl-3 text-right">
<img class="inline-block h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
</td>
</tr>
</template>

2
resources/js/components/FilesView/MemberAvatar.vue
View File

@@ -1,5 +1,5 @@
<template>
<div>
<div class="flex-shrink-0 flex-grow-0">
<img
:style="{width: size + 'px', height: size + 'px'}"
v-if="member.data.attributes.avatar"

93
resources/js/components/Subscription/FixedTransactionRow.vue Normal file
View File

@@ -0,0 +1,93 @@
<template>
<tr class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
<td class="py-5 md:pr-1 pr-3">
<span class="text-sm font-bold">
{{ row.data.attributes.note }}
</span>
</td>
<td v-if="user" class="md:px-1 px-3 whitespace-nowrap">
<div v-if="row.data.relationships.user" class="flex items-center">
<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 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>
<span v-if="! row.data.relationships.user" class="text-xs text-gray-500 font-bold">
{{ $t('User was deleted') }}
</span>
</td>
<td class="md:px-1 px-3">
<ColorLabel class="capitalize" :color="$getTransactionStatusColor(row.data.attributes.status)">
{{ row.data.attributes.status }}
</ColorLabel>
</td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
</span>
</td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
{{ row.data.attributes.created_at }}
</span>
</td>
<td class="md:px-1 px-3">
<div class="w-28">
<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
</div>
</td>
<td class="md:pl-1 pl-3 text-right">
<div class="inline-block">
<a :href="$getInvoiceLink(row.data.id)" target="_blank" class="inline-block cursor-pointer flex items-center justify-center w-8 h-8 rounded-md hover:bg-purple-100 dark:bg-2x-dark-foreground bg-light-background transition-colors">
<FileTextIcon size="15" class="opacity-75" />
</a>
</div>
</td>
</tr>
</template>
<script>
import MemberAvatar from "../FilesView/MemberAvatar";
import MeteredTransactionDetailRow from "./MeteredTransactionDetailRow";
import ColorLabel from "/resources/js/components/Others/ColorLabel"
import {EyeIcon, FileTextIcon} from 'vue-feather-icons'
export default {
name: 'FixedTransactionRow',
components: {
MeteredTransactionDetailRow,
MemberAvatar,
FileTextIcon,
ColorLabel,
EyeIcon,
},
props: {
row: {},
user: {
type: Boolean,
default: false
},
},
data() {
return {
showedTransactionDetailById: undefined,
}
},
methods: {
showTransactionDetail(id) {
if (this.showedTransactionDetailById === id)
this.showedTransactionDetailById = undefined
else
this.showedTransactionDetailById = id
}
},
}
</script>

34
resources/js/components/Subscription/MeteredTransactionDetailRow.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<tr>
<td colspan="10" class="rounded-lg overflow-hidden py-2">
<div class="flex items-center justify-between py-2 border-b dark:border-opacity-5 border-light border-dashed" v-for="(usage, i) in row.data.attributes.metadata" :key="i">
<div class="w-2/4 leading-none">
<b class="text-sm font-bold leading-none">
{{ $t(usage.feature) }}
</b>
<small class="text-xs text-gray-500 pt-2 leading-none sm:block hidden">
{{ $t(`feature_usage_desc_${usage.feature}`) }}
</small>
</div>
<div class="text-left w-1/4">
<span class="text-sm font-bold text-gray-560">
{{ usage.usage }}
</span>
</div>
<div class="text-right w-1/4">
<span class="text-sm font-bold text-theme">
{{ usage.cost }}
</span>
</div>
</div>
</td>
</tr>
</template>
<script>
export default {
name: 'MeteredTransactionDetailRow',
props: [
'row'
]
}
</script>

104
resources/js/components/Subscription/MeteredTransactionRow.vue Normal file
View File

@@ -0,0 +1,104 @@
<template>
<tr class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
<td class="py-5 md:pr-1 pr-3">
<span class="text-sm font-bold">
{{ row.data.attributes.note }}
</span>
</td>
<td v-if="user" class="md:px-1 px-3 whitespace-nowrap">
<div v-if="row.data.relationships.user" class="flex items-center">
<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 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>
<span v-if="! row.data.relationships.user" class="text-xs text-gray-500 font-bold">
{{ $t('User was deleted') }}
</span>
</td>
<td class="md:px-1 px-3">
<ColorLabel class="capitalize" :color="$getTransactionStatusColor(row.data.attributes.status)">
{{ row.data.attributes.status }}
</ColorLabel>
</td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold capitalize">
{{ $t(row.data.attributes.type) }}
</span>
</td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
</span>
</td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
{{ row.data.attributes.created_at }}
</span>
</td>
<td class="md:px-1 px-3">
<div class="w-28">
<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
</div>
</td>
<td class="md:pl-1 pl-3 text-right">
<div v-if="row.data.attributes.metadata" class="flex space-x-2 w-full justify-end">
<div @click="$emit('showDetail', row.data.id)" class="cursor-pointer flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors">
<EyeIcon size="15" class="opacity-75" />
</div>
<a :href="$getInvoiceLink(row.data.id)" target="_blank" class="cursor-pointer flex items-center justify-center w-8 h-8 rounded-md hover:bg-purple-100 dark:bg-2x-dark-foreground bg-light-background transition-colors">
<FileTextIcon size="15" class="opacity-75" />
</a>
</div>
<div v-else>
-
</div>
</td>
</tr>
</template>
<script>
import MemberAvatar from "../FilesView/MemberAvatar";
import MeteredTransactionDetailRow from "./MeteredTransactionDetailRow";
import ColorLabel from "/resources/js/components/Others/ColorLabel"
import {EyeIcon, FileTextIcon} from 'vue-feather-icons'
export default {
name: 'MeteredTransactionRow',
components: {
MeteredTransactionDetailRow,
MemberAvatar,
FileTextIcon,
ColorLabel,
EyeIcon,
},
props: {
row: {},
user: {
type: Boolean,
default: false
},
},
data() {
return {
showedTransactionDetailById: undefined,
}
},
methods: {
showTransactionDetail(id) {
if (this.showedTransactionDetailById === id)
this.showedTransactionDetailById = undefined
else
this.showedTransactionDetailById = id
}
},
}
</script>

76
resources/js/components/Subscription/UserTransactionsForFixedBilling.vue
View File

@@ -5,36 +5,13 @@
</FormLabel>
<DatatableWrapper
class="overflow-x-auto"
api="/api/subscriptions/transactions"
:paginator="true"
:columns="columns"
>
<template slot-scope="{ row }">
<tr class="border-b dark:border-opacity-5 border-light border-dashed">
<td class="py-4">
<span class="text-sm font-bold">
{{ row.data.attributes.note }}
</span>
</td>
<td>
<ColorLabel :color="$getTransactionStatusColor(row.data.attributes.status)">
{{ row.data.attributes.status }}
</ColorLabel>
</td>
<td>
<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
</span>
</td>
<td>
<span class="text-sm font-bold">
{{ row.data.attributes.created_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>
<FixedTransactionRow :row="row" />
</template>
<!--Empty page-->
@@ -47,44 +24,25 @@
</div>
</template>
<script>
import ColorLabel from "../Others/ColorLabel"
import DatatableWrapper from "../Others/Tables/DatatableWrapper"
import FormLabel from "../Others/Forms/FormLabel"
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
import DatatableWrapper from "../Others/Tables/DatatableWrapper"
import FixedTransactionRow from "./FixedTransactionRow"
import FormLabel from "../Others/Forms/FormLabel"
import ColorLabel from "../Others/ColorLabel"
export default {
name: 'UserTransactionsForFixedBilling',
components: {ColorLabel, DatatableWrapper, FormLabel, InfoBox},
data() {
return {
columns: [
{
label: this.$t('Note'),
field: 'note',
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'),
field: 'driver',
sortable: true
},
],
components: {
FixedTransactionRow,
DatatableWrapper,
ColorLabel,
FormLabel,
InfoBox,
},
computed: {
columns() {
return this.$store.getters.transactionColumns.filter(column => ! ['type', 'user_id'].includes(column.field))
}
}
},
}
</script>

118
resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue
View File

@@ -10,79 +10,12 @@
:paginator="true"
:columns="columns"
>
<!--TODO: refactor all tables as this template-->
<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">
<span class="text-sm font-bold">
{{ row.data.attributes.note }}
</span>
</td>
<td class="md:px-1 px-3">
<ColorLabel class="capitalize" :color="$getTransactionStatusColor(row.data.attributes.status)">
{{ row.data.attributes.status }}
</ColorLabel>
</td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold capitalize">
{{ $t(row.data.attributes.type) }}
</span>
</td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
</span>
</td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
{{ row.data.attributes.created_at }}
</span>
</td>
<td class="md:px-1 px-3">
<div class="w-28">
<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
</div>
</td>
<td class="md:pl-1 pl-3 text-right">
<div v-if="row.data.attributes.metadata" class="flex space-x-2 w-full justify-end">
<div @click="showTransactionDetail(row.data.id)" class="cursor-pointer flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors">
<EyeIcon size="15" class="opacity-75" />
</div>
<a :href="$getInvoiceLink(row.data.id)" target="_blank" class="cursor-pointer flex items-center justify-center w-8 h-8 rounded-md hover:bg-purple-100 dark:bg-2x-dark-foreground bg-light-background transition-colors">
<FileTextIcon size="15" class="opacity-75" />
</a>
</div>
<div v-else>
-
</div>
</td>
</tr>
<!--Transaction rows-->
<MeteredTransactionRow :row="row" @showDetail="showTransactionDetail" />
<!--Transaction detail-->
<tr v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id">
<td colspan="7" class="rounded-lg overflow-hidden py-2">
<div class="flex items-center justify-between py-2 border-b dark:border-opacity-5 border-light border-dashed" v-for="(usage, i) in row.data.attributes.metadata" :key="i">
<div class="w-2/4 leading-none">
<b class="text-sm font-bold leading-none">
{{ $t(usage.feature) }}
</b>
<small class="text-xs text-gray-500 pt-2 leading-none sm:block hidden">
{{ $t(`feature_usage_desc_${usage.feature}`) }}
</small>
</div>
<div class="text-left w-1/4">
<span class="text-sm font-bold text-gray-560">
{{ usage.usage }}
</span>
</div>
<div class="text-right w-1/4">
<span class="text-sm font-bold text-theme">
{{ usage.cost }}
</span>
</div>
</div>
</td>
</tr>
<MeteredTransactionDetailRow v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id" :row="row" />
</template>
<!--Empty page-->
@@ -101,10 +34,14 @@
import FormLabel from "../Others/Forms/FormLabel"
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
import {mapGetters} from "vuex";
import MeteredTransactionDetailRow from "./MeteredTransactionDetailRow"
import MeteredTransactionRow from "./MeteredTransactionRow"
export default {
name: 'UserTransactionsForMeteredBilling',
components: {
MeteredTransactionDetailRow,
MeteredTransactionRow,
DatatableWrapper,
ColorLabel,
FormLabel,
@@ -115,47 +52,14 @@
computed: {
...mapGetters([
'user',
])
]),
columns() {
return this.$store.getters.transactionColumns.filter(column => column.field !== 'user_id')
}
},
data() {
return {
showedTransactionDetailById: undefined,
columns: [
{
label: this.$t('Note'),
field: 'note',
sortable: true
},
{
label: this.$t('Status'),
field: 'status',
sortable: true
},
{
label: this.$t('Type'),
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'),
field: 'driver',
sortable: true
},
{
label: this.$t('Actions'),
sortable: false
},
],
}
},
methods: {

45
resources/js/store/modules/lists.js vendored
View File

@@ -1,4 +1,48 @@
import i18n from '../../i18n'
const defaultState = {
transactionColumns: [
{
label: i18n.t('Note'),
field: 'note',
sortable: true
},
{
label: i18n.t('user'),
field: 'user_id',
sortable: true
},
{
label: i18n.t('Status'),
field: 'status',
sortable: true
},
{
label: i18n.t('Type'),
field: 'type',
sortable: true
},
{
label: i18n.t('Total'),
field: 'amount',
sortable: true
},
{
label: i18n.t('Payed At'),
field: 'created_at',
sortable: true
},
{
label: i18n.t('Service'),
field: 'driver',
sortable: true
},
{
label: i18n.t('Actions'),
field: 'actions',
sortable: false
},
],
roles: [
{
label: 'roles.admin',
@@ -979,6 +1023,7 @@ const defaultState = {
}
const getters = {
transactionColumns: state => state.transactionColumns,
subscriptionTypes: state => state.subscriptionTypes,
teamPermissions: state => state.teamPermissions,
expirationList: state => state.expirationList,

2
resources/js/views/Admin.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="sm:flex md:h-screen md:overflow-hidden dark:bg-dark-background bg-light-background">
<div class="lg:flex md:h-screen md:overflow-hidden dark:bg-dark-background bg-light-background">
<!--On Top of App Components-->
<FilePreview />
<Spotlight />

2
resources/js/views/Admin/Dashboard.vue
View File

@@ -3,7 +3,7 @@
<div id="page-content" v-if="! isLoading && data">
<!--Headline-->
<div v-if="config.isAdminVueFileManagerBar" class="md:flex justify-between md:mb-6 mb-4">
<div v-if="config.isAdminVueFileManagerBar" class="md:flex justify-between md:mb-6 mb-4 md:block hidden">
<!--VueFileManager logo-->
<a href="https://vuefilemanager.com" target="_blank">

112
resources/js/views/Admin/Invoices.vue
View File

@@ -2,61 +2,19 @@
<div>
<!--Datatable-->
<DatatableWrapper
v-if="! config.isEmptyTransactions" class="card shadow-card"
@init="isLoading = false"
api="/api/subscriptions/admin/transactions"
v-if="! config.isEmptyTransactions" class="card shadow-card overflow-x-auto"
api="/api/admin/transactions"
:paginator="true"
:columns="columns"
>
<template slot-scope="{ row }">
<tr class="border-b dark:border-opacity-5 border-light border-dashed">
<td class="py-5">
<span class="text-sm font-bold">
{{ row.data.attributes.note }}
</span>
</td>
<td>
<div v-if="row.data.relationships.user" 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>
<span v-if="! row.data.relationships.user" class="text-xs text-gray-500 font-bold">
{{ $t('User was deleted') }}
</span>
</td>
<td>
<ColorLabel v-if="config.subscriptionType === 'fixed'" :color="$getTransactionStatusColor(row.data.attributes.status)">
{{ row.data.attributes.status }}
</ColorLabel>
<ColorLabel v-if="config.subscriptionType === 'metered'" :color="$getTransactionTypeColor(row.data.attributes.type)">
{{ row.data.attributes.type }}
</ColorLabel>
</td>
<td>
<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
</span>
</td>
<td>
<span class="text-sm font-bold">
{{ row.data.attributes.created_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>
<!--Transaction rows-->
<MeteredTransactionRow v-if="config.subscriptionType === 'metered'" :row="row" :user="true" @showDetail="showTransactionDetail" />
<FixedTransactionRow v-if="config.subscriptionType === 'fixed'" :row="row" :user="true" />
<!--Transaction detail-->
<MeteredTransactionDetailRow v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id" :row="row" />
</template>
</DatatableWrapper>
@@ -76,6 +34,9 @@
</template>
<script>
import FixedTransactionRow from "../../components/Subscription/FixedTransactionRow";
import MeteredTransactionDetailRow from "../../components/Subscription/MeteredTransactionDetailRow";
import MeteredTransactionRow from "../../components/Subscription/MeteredTransactionRow";
import MemberAvatar from "../../components/FilesView/MemberAvatar"
import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
import ColorLabel from '/resources/js/components/Others/ColorLabel'
@@ -84,6 +45,9 @@
export default {
name: 'Invoices',
components: {
MeteredTransactionDetailRow,
MeteredTransactionRow,
FixedTransactionRow,
DatatableWrapper,
MemberAvatar,
ColorLabel,
@@ -92,44 +56,22 @@
...mapGetters([
'config',
]),
columns() {
return this.$store.getters.transactionColumns.filter(column => ! ['type'].includes(column.field))
}
},
data() {
return {
isLoading: true,
invoices: [],
columns: [
{
label: this.$t('Note'),
field: 'note',
sortable: true
},
{
label: this.$t('User'),
field: 'user_id',
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'),
field: 'driver',
sortable: true
},
],
showedTransactionDetailById: undefined
}
},
methods: {
showTransactionDetail(id) {
if (this.showedTransactionDetailById === id)
this.showedTransactionDetailById = undefined
else
this.showedTransactionDetailById = id
}
}
}
</script>

68
resources/js/views/Admin/Pages.vue
View File

@@ -1,42 +1,36 @@
<template>
<div>
<div id="page-content" v-show="! isLoading">
<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 class="border-b dark:border-opacity-5 border-light border-dashed">
<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 }}
<div>
<div class="card shadow-card">
<DatatableWrapper @init="isLoading = false" api="/api/admin/pages" :paginator="false" :columns="columns" class="overflow-x-auto">
<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 :to="{name: 'PageEdit', params: {slug: row.data.attributes.slug}}" class="text-sm font-bold cursor-pointer" tag="div">
{{ row.data.attributes.title }}
</router-link>
</td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
{{ row.data.attributes.slug }}
</span>
</td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
<SwitchInput @input="$updateText(`/admin/pages/${row.data.id}`, 'visibility', row.data.attributes.visibility)" v-model="row.data.attributes.visibility" :state="row.data.attributes.visibility" class="switch"/>
</span>
</td>
<td class="md:pl-1 pl-3 text-right">
<div class="flex space-x-2 w-full justify-end">
<router-link class="flex items-center justify-center w-8 h-8 rounded-md dark:bg-2x-dark-foreground hover:bg-green-100 bg-light-background transition-colors" :to="{name: 'PageEdit', params: {slug: row.data.attributes.slug}}">
<Edit2Icon size="15" class="opacity-75" />
</router-link>
</td>
<td>
<span class="text-sm font-bold">
{{ row.data.attributes.slug }}
</span>
</td>
<td>
<span class="text-sm font-bold">
<SwitchInput @input="$updateText(`/admin/pages/${row.data.id}`, 'visibility', row.data.attributes.visibility)" v-model="row.data.attributes.visibility" :state="row.data.attributes.visibility" class="switch"/>
</span>
</td>
<td>
<div class="flex space-x-2 w-full justify-end">
<router-link class="flex items-center justify-center w-8 h-8 rounded-md dark:bg-2x-dark-foreground hover:bg-green-100 bg-light-background transition-colors" :to="{name: 'PageEdit', params: {slug: row.data.attributes.slug}}">
<Edit2Icon size="15" class="opacity-75" />
</router-link>
</div>
</td>
</tr>
</template>
</DatatableWrapper>
</div>
</div>
<div id="loader" v-if="isLoading">
<Spinner></Spinner>
</div>
</div>
</div>
</td>
</tr>
</template>
</DatatableWrapper>
</div>
</div>
</template>
<script>

32
resources/js/views/Admin/Plans.vue
View File

@@ -13,37 +13,37 @@
</div>
<!--Datatable-->
<DatatableWrapper @data="plans = $event" @init="isLoading = false" api="/api/subscriptions/admin/plans" :paginator="true" :columns="columns">
<DatatableWrapper @data="plans = $event" @init="isLoading = false" api="/api/subscriptions/admin/plans" :paginator="true" :columns="columns" class="overflow-x-auto">
<template slot-scope="{ row }">
<!--Metered subscription-->
<tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed">
<td class="py-4">
<tr v-if="config.subscriptionType === 'metered'" 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="text-sm font-bold" :to="{name: 'PlanMeteredSettings', params: {id: row.data.id}}">
{{ row.data.attributes.name }}
</router-link>
</td>
<td>
<td class="md:px-1 px-3">
<ColorLabel :color="$getPlanStatusColor(row.data.attributes.status)">
{{ row.data.attributes.status }}
</ColorLabel>
</td>
<td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
{{ row.data.attributes.currency }}
</span>
</td>
<td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold capitalize">
{{ row.data.attributes.interval }}
</span>
</td>
<td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
{{ row.data.attributes.subscribers }}
</span>
</td>
<td>
<td class="md:pl-1 pl-3 text-right">
<div class="flex space-x-2 w-full justify-end">
<router-link
:to="{name: 'PlanMeteredSettings', params: {id: row.data.id}}"
@@ -63,36 +63,36 @@
</tr>
<!--Fixed subscription-->
<tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed">
<td class="py-4">
<tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
<td class="py-5 md:pr-1 pr-3">
<SwitchInput @input="$updateInput(`/subscriptions/admin/plans/${row.data.id}`, 'visible', row.data.attributes.visible)" v-model="row.data.attributes.visible" :state="row.data.attributes.visible" class="switch"/>
</td>
<td>
<td class="md:px-1 px-3">
<router-link class="text-sm font-bold" :to="{name: 'PlanFixedSettings', params: {id: row.data.id}}">
{{ row.data.attributes.name }}
</router-link>
</td>
<td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
{{ row.data.attributes.price }}
</span>
</td>
<td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold capitalize">
{{ row.data.attributes.interval }}
</span>
</td>
<td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
{{ row.data.attributes.subscribers }}
</span>
</td>
<td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
{{ row.data.attributes.features.max_storage_amount }} GB
</span>
</td>
<td>
<td class="md:pl-1 pl-3 text-right">
<div class="flex space-x-2 w-full justify-end">
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'PlanFixedSettings', params: {id: row.data.id}}">
<Edit2Icon size="15" class="opacity-75" />

30
resources/js/views/Admin/Plans/Tabs/PlanSubscribers.vue
View File

@@ -1,18 +1,18 @@
<template>
<PageTab :is-loading="isLoading">
<DatatableWrapper @data="subscribers = $event" @init="isLoading = false" :api="`/api/subscriptions/admin/plans/${this.$route.params.id}/subscribers`" :paginator="true" :columns="columns" class="card shadow-card">
<DatatableWrapper @data="subscribers = $event" @init="isLoading = false" :api="`/api/subscriptions/admin/plans/${this.$route.params.id}/subscribers`" :paginator="true" :columns="columns" class="card shadow-card overflow-x-auto">
<!--Table data content-->
<template slot-scope="{ row }">
<tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed">
<td>
<tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
<td class="py-3 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">
<div class="ml-3 pr-10">
<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>
@@ -22,24 +22,24 @@
</div>
</router-link>
</td>
<td class="py-5">
<span class="text-sm font-bold">
<td class="md:px-1 px-3">
<span class="text-sm font-bold whitespace-nowrap">
{{ row.data.attributes.renews_at }}
</span>
</td>
<td class="text-right">
<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>
<tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed">
<td>
<tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
<td class="py-3 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">
<div class="ml-3 pr-10">
<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>
@@ -49,28 +49,28 @@
</div>
</router-link>
</td>
<td>
<td class="md:px-1 px-3">
<ColorLabel :color="$getSubscriptionStatusColor(row.data.attributes.status)">
{{ row.data.attributes.status }}
</ColorLabel>
</td>
<td class="py-5">
<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>
</td>
<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>
<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="text-right">
<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>

18
resources/js/views/Admin/Subscriptions.vue
View File

@@ -1,19 +1,19 @@
<template>
<div>
<!--Datatable-->
<DatatableWrapper v-if="! config.isEmptySubscriptions" @init="isLoading = false" api="/api/subscriptions/admin" :paginator="true" :columns="columns" class="card shadow-card">
<DatatableWrapper v-if="! config.isEmptySubscriptions" @init="isLoading = false" api="/api/subscriptions/admin" :paginator="true" :columns="columns" class="card shadow-card overflow-x-auto">
<!--Table data content-->
<template slot-scope="{ row }">
<tr class="border-b dark:border-opacity-5 border-light border-dashed">
<td>
<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">
<div class="ml-3 pr-10">
<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>
@@ -23,12 +23,12 @@
</div>
</router-link>
</td>
<td>
<td class="md:px-1 px-3">
<ColorLabel :color="$getSubscriptionStatusColor(row.data.attributes.status)">
{{ row.data.attributes.status }}
</ColorLabel>
</td>
<td class="py-5">
<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>
@@ -36,18 +36,18 @@
{{ row.data.relationships.plan.data.attributes.price }} / {{ $t(`interval.${row.data.relationships.plan.data.attributes.interval}`) }}
</span>
</td>
<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>
<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="text-right">
<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>

52
resources/js/views/Admin/Users.vue
View File

@@ -14,11 +14,11 @@
</div>
<!--Datatable-->
<DatatableWrapper @init="isLoading = false" api="/api/admin/users" :paginator="true" :columns="columns" class="table table-users">
<DatatableWrapper @init="isLoading = false" api="/api/admin/users" :paginator="true" :columns="columns" class="overflow-x-auto">
<template slot-scope="{ row }">
<!--Not a subscription-->
<tr v-if="config.subscriptionType === 'none'" class="border-b dark:border-opacity-5 border-light border-dashed">
<td class="py-3">
<tr v-if="config.subscriptionType === 'none'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
<td class="py-3 md:pr-1 pr-3">
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
<div class="flex items-center">
<MemberAvatar
@@ -26,7 +26,7 @@
:size="44"
:member="row.data.relationships.settings"
/>
<div class="ml-3">
<div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ row.data.relationships.settings.data.attributes.name }}
</b>
@@ -37,12 +37,12 @@
</div>
</router-link>
</td>
<td>
<td class="md:px-1 px-3">
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
{{ row.data.attributes.role }}
</ColorLabel>
</td>
<td>
<td class="md:px-1 px-3">
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
{{ row.data.attributes.storage.used_formatted }}
</span>
@@ -50,7 +50,7 @@
-
</span>
</td>
<td v-if="config.storageLimit">
<td class="md:px-1 px-3" v-if="config.storageLimit">
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
{{ row.data.attributes.storage.capacity_formatted }}
</span>
@@ -58,12 +58,12 @@
-
</span>
</td>
<td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
{{ row.data.attributes.created_at }}
</span>
</td>
<td>
<td class="md:pl-1 pl-3 text-right">
<div class="flex space-x-2 w-full justify-end">
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDetail', params: {id: row.data.id}}">
<Edit2Icon size="15" class="opacity-75" />
@@ -76,8 +76,8 @@
</tr>
<!--Fixed subscription-->
<tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed">
<td class="py-3">
<tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
<td class="py-3 md:pr-1 pr-3">
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
<div class="flex items-center">
<MemberAvatar
@@ -85,7 +85,7 @@
:size="44"
:member="row.data.relationships.settings"
/>
<div class="ml-3">
<div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ row.data.relationships.settings.data.attributes.name }}
</b>
@@ -96,17 +96,17 @@
</div>
</router-link>
</td>
<td>
<td class="md:px-1 px-3">
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
{{ row.data.attributes.role }}
</ColorLabel>
</td>
<td v-if="config.isSaaS">
<td class="md:px-1 px-3" v-if="config.isSaaS">
<span class="text-sm font-bold">
{{ row.data.relationships.subscription ? $t('global.premium') : $t('global.free') }}
</span>
</td>
<td>
<td class="md:px-1 px-3">
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
{{ row.data.attributes.storage.used_formatted }}
</span>
@@ -114,7 +114,7 @@
-
</span>
</td>
<td v-if="config.storageLimit">
<td class="md:px-1 px-3" v-if="config.storageLimit">
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
{{ row.data.attributes.storage.capacity_formatted }}
</span>
@@ -122,12 +122,12 @@
-
</span>
</td>
<td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
{{ row.data.attributes.created_at }}
</span>
</td>
<td>
<td class="md:pl-1 pl-3 text-right">
<div class="flex space-x-2 w-full justify-end">
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDetail', params: {id: row.data.id}}">
<Edit2Icon size="15" class="opacity-75" />
@@ -140,8 +140,8 @@
</tr>
<!--Metered subscription-->
<tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed">
<td class="py-3">
<tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
<td class="py-3 md:pr-1 pr-3">
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
<div class="flex items-center">
<MemberAvatar
@@ -149,7 +149,7 @@
:size="44"
:member="row.data.relationships.settings"
/>
<div class="ml-3">
<div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ row.data.relationships.settings.data.attributes.name }}
</b>
@@ -160,27 +160,27 @@
</div>
</router-link>
</td>
<td>
<td class="md:px-1 px-3">
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
{{ row.data.attributes.role }}
</ColorLabel>
</td>
<td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
{{ row.data.meta.usages.featureEstimates.storage.usage }}
</span>
</td>
<td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
{{ row.data.meta.usages.costEstimate }}
</span>
</td>
<td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
{{ row.data.attributes.created_at }}
</span>
</td>
<td>
<td class="md:pl-1 pl-3 text-right">
<div class="flex space-x-2 w-full justify-end">
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDetail', params: {id: row.data.id}}">
<Edit2Icon size="15" class="opacity-75" />

2
resources/js/views/Admin/Users/UserTabs/UserFixedSubscription.vue
View File

@@ -12,7 +12,7 @@
{{ subscription.relationships.plan.data.attributes.name }} / {{ price }}
</b>
<div v-for="(limit, i) in limitations" :key="i">
<div v-for="(limit, i) in limitations" :key="i" :class="{'mb-6': (Object.keys(limitations).length - 1) !== i}">
<b class="mb-3 block text-sm text-gray-400">
{{ limit.message }}
</b>

99
resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
View File

@@ -35,40 +35,21 @@
</FormLabel>
<DatatableWrapper
class="overflow-x-auto"
@init="isLoading = false"
:api="'/api/subscriptions/admin/users/' + this.$route.params.id + '/transactions'"
:api="'/api/admin/users/' + this.$route.params.id + '/transactions'"
:paginator="true"
:columns="columns"
>
<template slot-scope="{ row }">
<tr class="border-b dark:border-opacity-5 border-light border-dashed">
<td class="py-4">
<span class="text-sm font-bold">
{{ row.data.attributes.note }}
</span>
</td>
<td>
<ColorLabel v-if="config.subscriptionType === 'fixed'" :color="$getTransactionStatusColor(row.data.attributes.status)">
{{ row.data.attributes.status }}
</ColorLabel>
<ColorLabel v-if="config.subscriptionType === 'metered'" :color="$getTransactionTypeColor(row.data.attributes.type)">
{{ row.data.attributes.type }}
</ColorLabel>
</td>
<td>
<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
</span>
</td>
<td>
<span class="text-sm font-bold">
{{ row.data.attributes.created_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>
<!--Transaction rows-->
<MeteredTransactionRow v-if="config.subscriptionType === 'metered'" :row="row" @showDetail="showTransactionDetail" />
<FixedTransactionRow v-if="config.subscriptionType === 'fixed'" :row="row" />
<!--Transaction detail-->
<MeteredTransactionDetailRow v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id" :row="row" />
</template>
<!--Empty page-->
@@ -83,14 +64,16 @@
</template>
<script>
import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
import FormLabel from "../../../../components/Others/Forms/FormLabel";
import ColorLabel from "/resources/js/components/Others/ColorLabel"
import MeteredTransactionDetailRow from "../../../../components/Subscription/MeteredTransactionDetailRow"
import MeteredTransactionRow from "../../../../components/Subscription/MeteredTransactionRow"
import FixedTransactionRow from "../../../../components/Subscription/FixedTransactionRow"
import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
import FormLabel from "../../../../components/Others/Forms/FormLabel"
import PageTab from '/resources/js/components/Others/Layout/PageTab'
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
import UserMeteredSubscription from "./UserMeteredSubscription";
import UserMeteredSubscription from "./UserMeteredSubscription"
import UserFixedSubscription from "./UserFixedSubscription"
import {mapGetters} from "vuex";
import {mapGetters} from "vuex"
import axios from 'axios'
export default {
@@ -99,10 +82,12 @@
'user'
],
components: {
MeteredTransactionDetailRow,
UserMeteredSubscription,
MeteredTransactionRow,
UserFixedSubscription,
FixedTransactionRow,
DatatableWrapper,
ColorLabel,
FormLabel,
InfoBox,
PageTab,
@@ -111,38 +96,28 @@
...mapGetters([
'config',
]),
columns() {
let filter = {
metered: ['user_id'],
fixed: ['type', 'user_id'],
}
return this.$store.getters.transactionColumns.filter(column => !filter[config.subscriptionType].includes(column.field))
}
},
data() {
return {
showedTransactionDetailById: undefined,
subscription: undefined,
isLoading: true,
columns: [
{
label: this.$t('Note'),
field: 'note',
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'),
field: 'driver',
sortable: true
},
],
}
},
methods: {
showTransactionDetail(id) {
if (this.showedTransactionDetailById === id)
this.showedTransactionDetailById = undefined
else
this.showedTransactionDetailById = id
}
},
created() {

2
resources/js/views/Profile.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="sm:flex md:h-screen md:overflow-hidden dark:bg-dark-background bg-light-background">
<div class="lg:flex md:h-screen md:overflow-hidden dark:bg-dark-background bg-light-background">
<!--On Top of App Components-->
<FilePreview />
<Spotlight />