datatable refactoring

resources/js/views/Admin/Invoices.vue

@@ -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>