mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 08:12:15 +00:00
datatable refactoring
This commit is contained in:
Čarodej
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
93
resources/js/components/Subscription/FixedTransactionRow.vue
Normal 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>
|
||||
@@ -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
104
resources/js/components/Subscription/MeteredTransactionRow.vue
Normal 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>
|
||||
@@ -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>
|
||||
@@ -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: {
|
||||
|
||||
Reference in New Issue
Block a user