histories are a little messed, will change the logic in the future (techdebt)
This commit is contained in:
@@ -9,57 +9,55 @@
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div v-else-if="error" class="bg-white border border-gray-300 p-12 text-center shadow-sm max-w-md w-full text-gray-800">
|
||||
<div v-else-if="error"
|
||||
class="bg-white border border-gray-300 p-12 text-center shadow-sm max-w-md w-full text-gray-800">
|
||||
<svg class="w-12 h-12 mx-auto mb-4 text-black" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<circle cx="12" cy="12" r="10" stroke-width="2"/>
|
||||
<line x1="12" y1="8" x2="12" y2="12" stroke-width="2"/>
|
||||
<line x1="12" y1="16" x2="12.01" y2="16" stroke-width="2"/>
|
||||
<circle cx="12" cy="12" r="10" stroke-width="2" />
|
||||
<line x1="12" y1="8" x2="12" y2="12" stroke-width="2" />
|
||||
<line x1="12" y1="16" x2="12.01" y2="16" stroke-width="2" />
|
||||
</svg>
|
||||
<h3 class="text-2xl mb-2 text-black">Oops! Something went wrong</h3>
|
||||
<p class="text-gray-600 mb-6">{{ error }}</p>
|
||||
<button @click="retry" class="flex items-center gap-2 px-6 py-3 bg-black text-white cursor-pointer text-base font-medium transition-colors hover:bg-gray-800 mx-auto">
|
||||
<button @click="retry"
|
||||
class="flex items-center gap-2 px-6 py-3 bg-black text-white cursor-pointer text-base font-medium transition-colors hover:bg-gray-800 mx-auto">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<path d="M1 4v6h6M23 20v-6h-6" stroke-width="2"/>
|
||||
<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" stroke-width="2"/>
|
||||
<path d="M1 4v6h6M23 20v-6h-6" stroke-width="2" />
|
||||
<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" stroke-width="2" />
|
||||
</svg>
|
||||
Try Again
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- User Profile -->
|
||||
<div v-else-if="authStore.currentUser" class="bg-white border border-gray-300 shadow-lg max-w-4xl w-full overflow-hidden">
|
||||
<div v-else-if="authStore.currentUser"
|
||||
class="bg-white border border-gray-300 shadow-lg max-w-4xl w-full overflow-hidden">
|
||||
<div class="bg-black p-12 text-center relative text-white border-b border-gray-300">
|
||||
<div class="mb-6 relative inline-block">
|
||||
<img
|
||||
v-if="authStore.currentUser.photo_avatar_filename"
|
||||
:src="`${API_BASE_URL.replace('/api', '')}/storage/photos_avatars/${authStore.currentUser.photo_avatar_filename}`"
|
||||
:alt="authStore.currentUser.name"
|
||||
class="w-24 h-24 border-[3px] border-white object-cover"
|
||||
/>
|
||||
<div v-else class="w-24 h-24 border-[3px] border-white bg-white text-black flex items-center justify-center text-4xl font-semibold">
|
||||
<img v-if="authStore.currentUser.photo_avatar_filename"
|
||||
:src="`${API_BASE_URL.replace('/api/v1', '').replace('v1/')}/storage/photos_avatars/${authStore.currentUser.photo_avatar_filename}`"
|
||||
:alt="authStore.currentUser.name" class="w-24 h-24 border-[3px] border-white object-cover" />
|
||||
<div v-else
|
||||
class="w-24 h-24 border-[3px] border-white bg-white text-black flex items-center justify-center text-4xl font-semibold">
|
||||
{{ authStore.currentUser.name.charAt(0).toUpperCase() }}
|
||||
</div>
|
||||
<button @click="triggerFileInput" class="absolute bottom-0 right-0 w-9 h-9 bg-white border-2 border-black cursor-pointer flex items-center justify-center transition-colors hover:bg-gray-100">
|
||||
<button @click="triggerFileInput"
|
||||
class="absolute bottom-0 right-0 w-9 h-9 bg-white border-2 border-black cursor-pointer flex items-center justify-center transition-colors hover:bg-gray-100">
|
||||
<svg class="w-5 h-5 text-black" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" stroke-width="1.5"/>
|
||||
<circle cx="12" cy="13" r="4" stroke-width="1.5"/>
|
||||
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"
|
||||
stroke-width="1.5" />
|
||||
<circle cx="12" cy="13" r="4" stroke-width="1.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
@change="handleAvatarUpload"
|
||||
class="hidden"
|
||||
/>
|
||||
<input ref="fileInput" type="file" accept="image/*" @change="handleAvatarUpload" class="hidden" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-3xl font-semibold mb-2">{{ authStore.currentUser.name }}</h1>
|
||||
<p class="text-base opacity-80">@{{ authStore.currentUser.nickname }}</p>
|
||||
</div>
|
||||
<div class="inline-flex items-center gap-2 bg-white text-black px-4 py-2 mt-6 font-medium text-base border border-gray-300">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 bg-white text-black px-4 py-2 mt-6 font-medium text-base border border-gray-300">
|
||||
<svg class="w-5 h-5 text-black" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<circle cx="12" cy="12" r="10" stroke-width="1.5"/>
|
||||
<circle cx="12" cy="12" r="10" stroke-width="1.5" />
|
||||
<text x="12" y="16" text-anchor="middle" fill="currentColor" font-size="12" font-weight="bold">$</text>
|
||||
</svg>
|
||||
<span>{{ authStore.currentUser.coins_balance }} coins</span>
|
||||
@@ -71,26 +69,32 @@
|
||||
<div class="flex border-b border-gray-300 bg-gray-50">
|
||||
<button
|
||||
:class="['flex-1 p-4 bg-transparent border-none border-b-2 border-transparent cursor-pointer text-sm font-medium text-gray-600 transition-all hover:bg-gray-100 hover:text-black', { 'border-b-black text-black bg-white': activeTab === 'info' }]"
|
||||
@click="activeTab = 'info'"
|
||||
>
|
||||
@click="activeTab = 'info'">
|
||||
Profile Information
|
||||
</button>
|
||||
<button
|
||||
:class="['flex-1 p-4 bg-transparent border-none border-b-2 border-transparent cursor-pointer text-sm font-medium text-gray-600 transition-all hover:bg-gray-100 hover:text-black', { 'border-b-black text-black bg-white': activeTab === 'edit' }]"
|
||||
@click="activeTab = 'edit'"
|
||||
>
|
||||
@click="activeTab = 'edit'">
|
||||
Edit Profile
|
||||
</button>
|
||||
<button
|
||||
:class="['flex-1 p-4 bg-transparent border-none border-b-2 border-transparent cursor-pointer text-sm font-medium text-gray-600 transition-all hover:bg-gray-100 hover:text-black', { 'border-b-black text-black bg-white': activeTab === 'transaction-history' }]"
|
||||
@click="activeTab = 'transaction-history'">
|
||||
Transaction History
|
||||
</button>
|
||||
<button
|
||||
:class="['flex-1 p-4 bg-transparent border-none border-b-2 border-transparent cursor-pointer text-sm font-medium text-gray-600 transition-all hover:bg-gray-100 hover:text-black', { 'border-b-black text-black bg-white': activeTab === 'game-history' }]"
|
||||
@click="activeTab = 'game-history'">
|
||||
Game History
|
||||
</button>
|
||||
<button
|
||||
:class="['flex-1 p-4 bg-transparent border-none border-b-2 border-transparent cursor-pointer text-sm font-medium text-gray-600 transition-all hover:bg-gray-100 hover:text-black', { 'border-b-black text-black bg-white': activeTab === 'password' }]"
|
||||
@click="activeTab = 'password'"
|
||||
>
|
||||
@click="activeTab = 'password'">
|
||||
Change Password
|
||||
</button>
|
||||
<button
|
||||
:class="['flex-1 p-4 bg-transparent border-none border-b-2 border-transparent cursor-pointer text-sm font-medium text-gray-600 transition-all hover:bg-gray-100 hover:text-black', { 'border-b-black text-black bg-white': activeTab === 'delete' }]"
|
||||
@click="activeTab = 'delete'"
|
||||
>
|
||||
@click="activeTab = 'delete'">
|
||||
Delete Account
|
||||
</button>
|
||||
</div>
|
||||
@@ -101,8 +105,8 @@
|
||||
<div class="flex items-start gap-4 p-5 bg-white border border-gray-300 transition-shadow hover:shadow-md">
|
||||
<div class="w-10 h-10 flex items-center justify-center flex-shrink-0 text-gray-600">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||||
<polyline points="22,6 12,13 2,6"/>
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
|
||||
<polyline points="22,6 12,13 2,6" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
@@ -114,12 +118,13 @@
|
||||
<div class="flex items-start gap-4 p-5 bg-white border border-gray-300 transition-shadow hover:shadow-md">
|
||||
<div class="w-10 h-10 flex items-center justify-center flex-shrink-0 text-gray-600">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="12" cy="7" r="4"/>
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider">Account Type</label>
|
||||
<label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider">Account
|
||||
Type</label>
|
||||
<p class="text-sm text-black">{{ authStore.currentUser.type === 'P' ? 'Player' : 'Other' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -127,14 +132,15 @@
|
||||
<div class="flex items-start gap-4 p-5 bg-white border border-gray-300 transition-shadow hover:shadow-md">
|
||||
<div class="w-10 h-10 flex items-center justify-center flex-shrink-0 text-gray-600">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
|
||||
<line x1="16" y1="2" x2="16" y2="6"/>
|
||||
<line x1="8" y1="2" x2="8" y2="6"/>
|
||||
<line x1="3" y1="10" x2="21" y2="10"/>
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
|
||||
<line x1="16" y1="2" x2="16" y2="6" />
|
||||
<line x1="8" y1="2" x2="8" y2="6" />
|
||||
<line x1="3" y1="10" x2="21" y2="10" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider">Member Since</label>
|
||||
<label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider">Member
|
||||
Since</label>
|
||||
<p class="text-sm text-black">{{ formatDate(authStore.currentUser.created_at) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -142,29 +148,32 @@
|
||||
<div class="flex items-start gap-4 p-5 bg-white border border-gray-300 transition-shadow hover:shadow-md">
|
||||
<div class="w-10 h-10 flex items-center justify-center flex-shrink-0 text-gray-600">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M9 12l2 2 4-4"/>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M9 12l2 2 4-4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider">Status</label>
|
||||
<p>
|
||||
<span :class="['inline-block px-3 py-1 text-sm font-medium border', authStore.currentUser.blocked ? 'bg-black text-white border-black' : 'bg-white text-black border-black']">
|
||||
<span
|
||||
:class="['inline-block px-3 py-1 text-sm font-medium border', authStore.currentUser.blocked ? 'bg-black text-white border-black' : 'bg-white text-black border-black']">
|
||||
{{ authStore.currentUser.blocked ? 'Blocked' : 'Active' }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="authStore.currentUser.email_verified_at" class="flex items-start gap-4 p-5 bg-white border border-gray-300 transition-shadow hover:shadow-md">
|
||||
<div v-if="authStore.currentUser.email_verified_at"
|
||||
class="flex items-start gap-4 p-5 bg-white border border-gray-300 transition-shadow hover:shadow-md">
|
||||
<div class="w-10 h-10 flex items-center justify-center flex-shrink-0 text-gray-600">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
|
||||
<polyline points="22 4 12 14.01 9 11.01"/>
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
|
||||
<polyline points="22 4 12 14.01 9 11.01" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider">Email Verified</label>
|
||||
<label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider">Email
|
||||
Verified</label>
|
||||
<p class="text-sm text-black">{{ formatDate(authStore.currentUser.email_verified_at) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -172,12 +181,13 @@
|
||||
<div class="flex items-start gap-4 p-5 bg-white border border-gray-300 transition-shadow hover:shadow-md">
|
||||
<div class="w-10 h-10 flex items-center justify-center flex-shrink-0 text-gray-600">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<polyline points="23 4 23 10 17 10"/>
|
||||
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
|
||||
<polyline points="23 4 23 10 17 10" />
|
||||
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider">Last Updated</label>
|
||||
<label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider">Last
|
||||
Updated</label>
|
||||
<p class="text-sm text-black">{{ formatDate(authStore.currentUser.updated_at) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -189,94 +199,250 @@
|
||||
<form @submit.prevent="updateProfile" class="max-w-lg">
|
||||
<div class="mb-6">
|
||||
<label for="name" class="block text-sm font-semibold text-gray-800 mb-2">Name</label>
|
||||
<input
|
||||
id="name"
|
||||
v-model="profileForm.name"
|
||||
type="text"
|
||||
required
|
||||
:disabled="updatingProfile"
|
||||
class="w-full px-3 py-3 border border-gray-300 text-base transition-colors focus:outline-none focus:border-black disabled:bg-gray-100 disabled:cursor-not-allowed"
|
||||
/>
|
||||
<input id="name" v-model="profileForm.name" type="text" required :disabled="updatingProfile"
|
||||
class="w-full px-3 py-3 border border-gray-300 text-base transition-colors focus:outline-none focus:border-black disabled:bg-gray-100 disabled:cursor-not-allowed" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label for="nickname" class="block text-sm font-semibold text-gray-800 mb-2">Nickname</label>
|
||||
<input
|
||||
id="nickname"
|
||||
v-model="profileForm.nickname"
|
||||
type="text"
|
||||
required
|
||||
:disabled="updatingProfile"
|
||||
class="w-full px-3 py-3 border border-gray-300 text-base transition-colors focus:outline-none focus:border-black disabled:bg-gray-100 disabled:cursor-not-allowed"
|
||||
/>
|
||||
<input id="nickname" v-model="profileForm.nickname" type="text" required :disabled="updatingProfile"
|
||||
class="w-full px-3 py-3 border border-gray-300 text-base transition-colors focus:outline-none focus:border-black disabled:bg-gray-100 disabled:cursor-not-allowed" />
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4 mt-8">
|
||||
<button type="button" @click="resetProfileForm" :disabled="updatingProfile" class="px-6 py-3 border border-black cursor-pointer text-base font-medium transition-all bg-white text-black hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<button type="button" @click="resetProfileForm" :disabled="updatingProfile"
|
||||
class="px-6 py-3 border border-black cursor-pointer text-base font-medium transition-all bg-white text-black hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" :disabled="updatingProfile" class="px-6 py-3 border border-black cursor-pointer text-base font-medium transition-all bg-black text-white hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<button type="submit" :disabled="updatingProfile"
|
||||
class="px-6 py-3 border border-black cursor-pointer text-base font-medium transition-all bg-black text-white hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
{{ updatingProfile ? 'Saving...' : 'Save Changes' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="profileMessage" :class="['mt-4 px-3 py-3 border text-sm', profileMessageType === 'success' ? 'bg-blue-50 border-black text-black' : 'bg-red-50 border-black text-black']">
|
||||
<div v-if="profileMessage"
|
||||
:class="['mt-4 px-3 py-3 border text-sm', profileMessageType === 'success' ? 'bg-blue-50 border-black text-black' : 'bg-red-50 border-black text-black']">
|
||||
{{ profileMessage }}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Transaction History Tab -->
|
||||
<div v-if="activeTab === 'transaction-history'" class="p-8">
|
||||
<div class="rounded-lg border bg-card text-card-foreground shadow-sm">
|
||||
<div v-if="transactions.length === 0" class="p-6 text-center text-sm text-muted-foreground">
|
||||
No transactions yet.
|
||||
</div>
|
||||
<div v-else class="max-h-[450px] overflow-y-auto custom-scrollbar p-1">
|
||||
|
||||
<div class="flex flex-wrap gap-4 mb-6 items-end">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-medium text-muted-foreground">Type</label>
|
||||
<select v-model="filters.type" @change="resetAndFetch"
|
||||
class="bg-background border rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 outline-none">
|
||||
<option value="all">All Types</option>
|
||||
<option value="credit">Credit (+)</option>
|
||||
<option value="debit">Debit (-)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-medium text-muted-foreground">From</label>
|
||||
<input type="date" v-model="filters.startDate" :max="filters.endDate" @change="handleStartDateChange"
|
||||
class="bg-background border rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 outline-none" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-medium text-muted-foreground">To</label>
|
||||
<input type="date" v-model="filters.endDate" :min="filters.startDate" @change="resetAndFetch"
|
||||
class="bg-background border rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 outline-none" />
|
||||
</div>
|
||||
|
||||
<button @click="clearFilters" class="text-xs text-purple-500 hover:underline pb-2">
|
||||
Clear Filters
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-for="(transaction) in transactions" :key="transaction.id"
|
||||
class="flex items-center justify-between p-4 mb-3 border rounded-lg transition-all hover:bg-muted/50 hover:border-purple-500"
|
||||
:class="[
|
||||
transaction.type === 'credit' ? 'border-green-500/30' : 'border-red-500/30'
|
||||
]">
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-xs font-bold"
|
||||
:class="transaction.type === 'credit' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'">
|
||||
<span v-if="transaction.type === 'credit'">+</span>
|
||||
<span v-else>-</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<div class="font-semibold text-sm capitalize">
|
||||
{{ transaction.type }} Payment
|
||||
</div>
|
||||
<div class="text-xs text-muted-foreground">
|
||||
{{ new Date(transaction.created_at).toLocaleDateString() }} • {{ new
|
||||
Date(transaction.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-right">
|
||||
<div class="font-bold text-sm"
|
||||
:class="transaction.type === 'credit' ? 'text-green-600' : 'text-red-600'">
|
||||
{{ transaction.type === 'credit' ? '+' : '-' }}${{ transaction.amount.toLocaleString() }}
|
||||
</div>
|
||||
<div class="text-[10px] text-muted-foreground uppercase tracking-wider">
|
||||
{{ transaction.id.split('_')[0] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ref="observerTarget" class="h-10 flex items-center justify-center">
|
||||
<span v-if="isLoading" class="text-xs text-purple-500 animate-pulse">Loading
|
||||
more...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Game History Tab -->
|
||||
<div v-if="activeTab === 'game-history'" class="p-8">
|
||||
<div class="rounded-lg border bg-card text-card-foreground shadow-sm">
|
||||
<div v-if="games.length === 0" class="p-6 text-center text-sm text-muted-foreground">
|
||||
No games played yet.
|
||||
</div>
|
||||
<div v-else class="max-h-[450px] overflow-y-auto custom-scrollbar p-1">
|
||||
|
||||
<div class="flex flex-wrap gap-4 mb-6 items-end">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-medium text-muted-foreground">Variant</label>
|
||||
<select v-model="filters.variant" @change="resetAndFetch"
|
||||
class="bg-background border rounded-md px-3 py-2 text-sm outline-none">
|
||||
<option value="all">All Variants</option>
|
||||
<option value="3">Bisca 3</option>
|
||||
<option value="9">Bisca 9</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-medium text-muted-foreground">Outcome</label>
|
||||
<select v-model="filters.outcome" @change="resetAndFetch"
|
||||
class="bg-background border rounded-md px-3 py-2 text-sm outline-none">
|
||||
<option value="all">All Results</option>
|
||||
<option value="win">Win</option>
|
||||
<option value="loss">Loss</option>
|
||||
<option value="draw">Draw</option>
|
||||
<option value="forfeit">Forfeit</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button @click="clearFilters" class="text-xs text-purple-500 hover:underline pb-2">
|
||||
Clear Filters
|
||||
</button>
|
||||
|
||||
<div class="flex flex-row gap-4 ml-auto">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-medium text-muted-foreground">Sort By</label>
|
||||
<div class="flex gap-2">
|
||||
<select v-model="filters.sort.column" @change="resetAndFetch"
|
||||
class="bg-background border rounded-md px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-purple-500">
|
||||
<option value="began_at">Date</option>
|
||||
<option value="outcome">Outcome</option>
|
||||
<option value="total_time">Duration</option>
|
||||
</select>
|
||||
|
||||
<button @click="handleSortChange(filters.sort.column)"
|
||||
class="bg-background border rounded-md px-4 py-2 text-sm outline-none transition-all hover:ring-2 hover:ring-purple-500 flex items-center justify-center min-w-[42px]"
|
||||
title="Toggle Order">
|
||||
<span v-if="filters.sort.order === 'desc'" class="leading-none">↓</span>
|
||||
<span v-else class="leading-none">↑</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-for="game in games" :key="game.id"
|
||||
class="p-4 mb-3 border rounded-lg transition-all hover:bg-muted/50 hover:border-purple-500">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<div :class="game.outcome === 'win' ? 'text-green-500' : 'text-red-500'"
|
||||
class="font-bold uppercase text-xs">
|
||||
{{ game.outcome }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold text-sm">vs {{ game.opponent }}</div>
|
||||
<div class="text-xs text-muted-foreground">
|
||||
{{ game.variant }} • {{ game.duration }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-right">
|
||||
<div class="font-bold text-sm">{{ game.amount }} pts</div>
|
||||
<div class="text-[10px] text-muted-foreground">
|
||||
{{ new Date(game.created_at).toLocaleTimeString() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 pt-3 border-t flex gap-4 text-[10px] uppercase font-medium text-muted-foreground">
|
||||
<span>Marks: {{ game.details.marks }}</span>
|
||||
<span>Capotes: {{ game.details.capotes }}</span>
|
||||
<span>Bandeiras: {{ game.details.bandeiras }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ref="observerTarget" class="h-10 flex items-center justify-center">
|
||||
<span v-if="isLoading" class="text-xs text-purple-500 animate-pulse">Loading
|
||||
more...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Change Password Tab -->
|
||||
<div v-if="activeTab === 'password'" class="p-8">
|
||||
<form @submit.prevent="changePassword" class="max-w-lg">
|
||||
<div class="mb-6">
|
||||
<label for="current_password" class="block text-sm font-semibold text-gray-800 mb-2">Current Password</label>
|
||||
<input
|
||||
id="current_password"
|
||||
v-model="passwordForm.current_password"
|
||||
type="password"
|
||||
required
|
||||
<label for="current_password" class="block text-sm font-semibold text-gray-800 mb-2">Current
|
||||
Password</label>
|
||||
<input id="current_password" v-model="passwordForm.current_password" type="password" required
|
||||
:disabled="updatingPassword"
|
||||
class="w-full px-3 py-3 border border-gray-300 text-base transition-colors focus:outline-none focus:border-black disabled:bg-gray-100 disabled:cursor-not-allowed"
|
||||
/>
|
||||
class="w-full px-3 py-3 border border-gray-300 text-base transition-colors focus:outline-none focus:border-black disabled:bg-gray-100 disabled:cursor-not-allowed" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label for="new_password" class="block text-sm font-semibold text-gray-800 mb-2">New Password</label>
|
||||
<input
|
||||
id="new_password"
|
||||
v-model="passwordForm.new_password"
|
||||
type="password"
|
||||
required
|
||||
minlength="8"
|
||||
<input id="new_password" v-model="passwordForm.new_password" type="password" required minlength="8"
|
||||
:disabled="updatingPassword"
|
||||
class="w-full px-3 py-3 border border-gray-300 text-base transition-colors focus:outline-none focus:border-black disabled:bg-gray-100 disabled:cursor-not-allowed"
|
||||
/>
|
||||
class="w-full px-3 py-3 border border-gray-300 text-base transition-colors focus:outline-none focus:border-black disabled:bg-gray-100 disabled:cursor-not-allowed" />
|
||||
<small class="block mt-1 text-xs text-gray-600">Password must be at least 8 characters long</small>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label for="confirm_password" class="block text-sm font-semibold text-gray-800 mb-2">Confirm New Password</label>
|
||||
<input
|
||||
id="confirm_password"
|
||||
v-model="passwordForm.confirm_password"
|
||||
type="password"
|
||||
required
|
||||
<label for="confirm_password" class="block text-sm font-semibold text-gray-800 mb-2">Confirm New
|
||||
Password</label>
|
||||
<input id="confirm_password" v-model="passwordForm.confirm_password" type="password" required
|
||||
:disabled="updatingPassword"
|
||||
class="w-full px-3 py-3 border border-gray-300 text-base transition-colors focus:outline-none focus:border-black disabled:bg-gray-100 disabled:cursor-not-allowed"
|
||||
/>
|
||||
class="w-full px-3 py-3 border border-gray-300 text-base transition-colors focus:outline-none focus:border-black disabled:bg-gray-100 disabled:cursor-not-allowed" />
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4 mt-8">
|
||||
<button type="button" @click="resetPasswordForm" :disabled="updatingPassword" class="px-6 py-3 border border-black cursor-pointer text-base font-medium transition-all bg-white text-black hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<button type="button" @click="resetPasswordForm" :disabled="updatingPassword"
|
||||
class="px-6 py-3 border border-black cursor-pointer text-base font-medium transition-all bg-white text-black hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" :disabled="updatingPassword" class="px-6 py-3 border border-black cursor-pointer text-base font-medium transition-all bg-black text-white hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<button type="submit" :disabled="updatingPassword"
|
||||
class="px-6 py-3 border border-black cursor-pointer text-base font-medium transition-all bg-black text-white hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
{{ updatingPassword ? 'Updating...' : 'Change Password' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="passwordMessage" :class="['mt-4 px-3 py-3 border text-sm', passwordMessageType === 'success' ? 'bg-blue-50 border-black text-black' : 'bg-red-50 border-black text-black']">
|
||||
<div v-if="passwordMessage"
|
||||
:class="['mt-4 px-3 py-3 border text-sm', passwordMessageType === 'success' ? 'bg-blue-50 border-black text-black' : 'bg-red-50 border-black text-black']">
|
||||
{{ passwordMessage }}
|
||||
</div>
|
||||
</form>
|
||||
@@ -287,10 +453,11 @@
|
||||
<div class="max-w-lg">
|
||||
<div class="border border-red-600 bg-red-50 p-6 mb-6">
|
||||
<div class="flex items-start gap-3">
|
||||
<svg class="w-6 h-6 text-red-600 flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
|
||||
<line x1="12" y1="9" x2="12" y2="13"/>
|
||||
<line x1="12" y1="17" x2="12.01" y2="17"/>
|
||||
<svg class="w-6 h-6 text-red-600 flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2">
|
||||
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
|
||||
<line x1="12" y1="9" x2="12" y2="13" />
|
||||
<line x1="12" y1="17" x2="12.01" y2="17" />
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-red-900 mb-2">Danger Zone</h3>
|
||||
@@ -299,7 +466,8 @@
|
||||
</p>
|
||||
<ul class="text-sm text-red-800 list-disc list-inside space-y-1">
|
||||
<li>Permanently delete all your account data</li>
|
||||
<li>Forfeit your current coin balance of <strong>{{ authStore.currentUser.coins_balance }} coins</strong></li>
|
||||
<li>Forfeit your current coin balance of <strong>{{ authStore.currentUser.coins_balance }}
|
||||
coins</strong></li>
|
||||
<li>Remove your access to all games and matches</li>
|
||||
<li>Delete your profile and all associated information</li>
|
||||
</ul>
|
||||
@@ -312,29 +480,21 @@
|
||||
Are you absolutely sure?
|
||||
</h4>
|
||||
<p class="text-sm text-gray-600 mb-4">
|
||||
To confirm deletion, please type your email address: <strong class="text-black">{{ authStore.currentUser.email }}</strong>
|
||||
To confirm deletion, please type your email address: <strong class="text-black">{{
|
||||
authStore.currentUser.email }}</strong>
|
||||
</p>
|
||||
|
||||
<input
|
||||
v-model="deleteConfirmEmail"
|
||||
type="text"
|
||||
placeholder="Enter your email to confirm"
|
||||
class="w-full px-3 py-3 border border-gray-300 text-base mb-4 focus:outline-none focus:border-red-600"
|
||||
/>
|
||||
<input v-model="deleteConfirmEmail" type="text" placeholder="Enter your email to confirm"
|
||||
class="w-full px-3 py-3 border border-gray-300 text-base mb-4 focus:outline-none focus:border-red-600" />
|
||||
|
||||
<div class="flex gap-4">
|
||||
<button
|
||||
type="button"
|
||||
@click="activeTab = 'info'"
|
||||
class="flex-1 px-6 py-3 border border-gray-300 cursor-pointer text-base font-medium transition-all bg-white text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
<button type="button" @click="activeTab = 'info'"
|
||||
class="flex-1 px-6 py-3 border border-gray-300 cursor-pointer text-base font-medium transition-all bg-white text-gray-700 hover:bg-gray-50">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
@click="showDeleteConfirmation = true"
|
||||
<button @click="showDeleteConfirmation = true"
|
||||
:disabled="deleteConfirmEmail !== authStore.currentUser.email"
|
||||
class="flex-1 px-6 py-3 border border-red-600 cursor-pointer text-base font-medium transition-all bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-red-600"
|
||||
>
|
||||
class="flex-1 px-6 py-3 border border-red-600 cursor-pointer text-base font-medium transition-all bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-red-600">
|
||||
Delete My Account
|
||||
</button>
|
||||
</div>
|
||||
@@ -345,11 +505,9 @@
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<div
|
||||
v-if="showDeleteConfirmation"
|
||||
<div v-if="showDeleteConfirmation"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"
|
||||
@click.self="showDeleteConfirmation = false"
|
||||
>
|
||||
@click.self="showDeleteConfirmation = false">
|
||||
<div class="bg-white border border-gray-300 max-w-md w-full shadow-xl">
|
||||
<div class="p-6 border-b border-gray-300">
|
||||
<h3 class="text-xl font-semibold text-gray-900">Final Confirmation</h3>
|
||||
@@ -357,17 +515,19 @@
|
||||
|
||||
<div class="p-6">
|
||||
<div class="flex items-start gap-3 mb-4">
|
||||
<svg class="w-12 h-12 text-red-600 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<line x1="15" y1="9" x2="9" y2="15"/>
|
||||
<line x1="9" y1="9" x2="15" y2="15"/>
|
||||
<svg class="w-12 h-12 text-red-600 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<line x1="15" y1="9" x2="9" y2="15" />
|
||||
<line x1="9" y1="9" x2="15" y2="15" />
|
||||
</svg>
|
||||
<div>
|
||||
<p class="text-base text-gray-900 font-semibold mb-2">
|
||||
This is your last chance to cancel.
|
||||
</p>
|
||||
<p class="text-sm text-gray-600">
|
||||
Once you click "Yes, Delete My Account", your account and all associated data will be permanently deleted. You will lose your <strong>{{ authStore.currentUser.coins_balance }} coins</strong> forever.
|
||||
Once you click "Yes, Delete My Account", your account and all associated data will be permanently
|
||||
deleted. You will lose your <strong>{{ authStore.currentUser.coins_balance }} coins</strong> forever.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -379,18 +539,12 @@
|
||||
</div>
|
||||
|
||||
<div class="p-6 border-t border-gray-300 flex gap-3">
|
||||
<button
|
||||
@click="showDeleteConfirmation = false"
|
||||
:disabled="deletingAccount"
|
||||
class="flex-1 px-6 py-3 border border-gray-300 cursor-pointer text-base font-medium transition-all bg-white text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<button @click="showDeleteConfirmation = false" :disabled="deletingAccount"
|
||||
class="flex-1 px-6 py-3 border border-gray-300 cursor-pointer text-base font-medium transition-all bg-white text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
@click="deleteAccount"
|
||||
:disabled="deletingAccount"
|
||||
class="flex-1 px-6 py-3 border border-red-600 cursor-pointer text-base font-medium transition-all bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<button @click="deleteAccount" :disabled="deletingAccount"
|
||||
class="flex-1 px-6 py-3 border border-red-600 cursor-pointer text-base font-medium transition-all bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
Yes, Delete My Account
|
||||
</button>
|
||||
</div>
|
||||
@@ -398,7 +552,8 @@
|
||||
</div>
|
||||
|
||||
<!-- No Data State -->
|
||||
<div v-else-if="!authStore.isLoggedIn" class="bg-white border border-gray-300 p-12 text-center shadow-sm max-w-md w-full">
|
||||
<div v-else-if="!authStore.isLoggedIn"
|
||||
class="bg-white border border-gray-300 p-12 text-center shadow-sm max-w-md w-full">
|
||||
<div class="flex flex-col items-center gap-6">
|
||||
<div class="spinner"></div>
|
||||
<p>Redirecting to login...</p>
|
||||
@@ -408,10 +563,10 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, inject, reactive } from 'vue'
|
||||
import { ref, onMounted, inject, reactive, watch, nextTick } from 'vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useAPIStore } from '@/stores/api'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import axios from 'axios'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
@@ -448,6 +603,159 @@ const deleteConfirmEmail = ref('')
|
||||
const showDeleteConfirmation = ref(false)
|
||||
const deletingAccount = ref(false)
|
||||
|
||||
const transactions = ref([]);
|
||||
const games = ref([]);
|
||||
|
||||
const observerTarget = ref(null);
|
||||
const observer = ref(null);
|
||||
const isLoading = ref(false);
|
||||
|
||||
const pagination = ref({
|
||||
transactions: { page: 1, hasMore: true },
|
||||
games: { page: 1, hasMore: true }
|
||||
});
|
||||
|
||||
const filters = ref({
|
||||
type: 'all',
|
||||
variant: 'all',
|
||||
outcome: 'all',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
sort: {
|
||||
column: 'created_at',
|
||||
order: 'desc'
|
||||
}
|
||||
});
|
||||
|
||||
const handleSortChange = (column) => {
|
||||
// If clicking same column, toggle order, else default to desc
|
||||
if (filters.value.sort.column === column) {
|
||||
filters.value.sort.order = filters.value.sort.order === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
filters.value.sort.column = column;
|
||||
filters.value.sort.order = 'desc';
|
||||
}
|
||||
resetAndFetch();
|
||||
};
|
||||
|
||||
watch(activeTab, async (newTab) => {
|
||||
if (newTab !== 'transaction-history' && newTab !== 'game-history') return;
|
||||
|
||||
await nextTick();
|
||||
|
||||
if (transactions.value.length !== 0 && games.value.length !== 0) return;
|
||||
|
||||
await fetchData();
|
||||
setupObserver();
|
||||
});
|
||||
|
||||
const fetchData = async () => {
|
||||
const currentTab = activeTab.value;
|
||||
const isTransaction = currentTab === 'transaction-history';
|
||||
const isGame = currentTab === 'game-history';
|
||||
const state = isTransaction ? pagination.value.transactions : pagination.value.games;
|
||||
|
||||
if (isLoading.value || !state.hasMore) return;
|
||||
isLoading.value = true;
|
||||
|
||||
try {
|
||||
let newData = [];
|
||||
if (isTransaction) {
|
||||
// const response = await apiStore.getTransactions(params);
|
||||
// Logic: if response.data.length < limit, set hasMore.value = false
|
||||
|
||||
for (let i = 0; i < 15; i++) {
|
||||
newData.push({
|
||||
id: `txn_${Date.now()}_${i}`,
|
||||
amount: Math.floor(Math.random() * 1000),
|
||||
type: Math.random() > 0.5 ? 'credit' : 'debit',
|
||||
created_at: new Date().toISOString()
|
||||
});
|
||||
}
|
||||
|
||||
transactions.value.push(...newData);
|
||||
}
|
||||
|
||||
if (isGame) {
|
||||
const apiParams = {
|
||||
page: state.page,
|
||||
type: filters.value.variant !== 'all' ? filters.value.variant : undefined,
|
||||
status: filters.value.outcome !== 'all' ? 'Ended' : undefined,
|
||||
sort_by: filters.value.sort.column,
|
||||
sort_direction: filters.value.sort.order
|
||||
};
|
||||
|
||||
const response = await apiStore.getCurrentUserMatches(apiParams);
|
||||
const apiGames = response.data.data
|
||||
|
||||
newData = apiGames.map(game => {
|
||||
const isPlayer1 = game.player1_user_id === authStore.currentUserID;
|
||||
const opponent = isPlayer1 ? game.player2 : game.player1;
|
||||
|
||||
let outcome = 'loss';
|
||||
if (game.is_draw) outcome = 'draw';
|
||||
else if (game.winner_user_id === authStore.currentUserID) outcome = 'win';
|
||||
|
||||
const minutes = Math.floor(game.total_time / 60);
|
||||
const seconds = game.total_time % 60;
|
||||
const durationStr = `${minutes}m ${seconds}s`;
|
||||
|
||||
return {
|
||||
id: game.id,
|
||||
variant: `Type ${game.type}`,
|
||||
outcome: outcome,
|
||||
opponent: opponent?.nickname || 'Unknown Player',
|
||||
amount: isPlayer1 ? game.player1_points : game.player2_points,
|
||||
duration: durationStr,
|
||||
created_at: game.began_at,
|
||||
details: {
|
||||
marks: game.custom?.marks || 0,
|
||||
capotes: game.custom?.capotes || 0,
|
||||
bandeiras: game.custom?.bandeiras || 0
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
games.value.push(...newData);
|
||||
}
|
||||
|
||||
if (newData.length < 10) state.hasMore = false;
|
||||
state.page++;
|
||||
} catch (error) {
|
||||
console.error("Fetch failed", error);
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const setupObserver = () => {
|
||||
if (observer.value) observer.value.disconnect();
|
||||
|
||||
const scrollContainer = document.querySelector('.custom-scrollbar');
|
||||
|
||||
observer.value = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && !isLoading.value) {
|
||||
fetchData();
|
||||
}
|
||||
}, { root: scrollContainer, threshold: 0.1 });
|
||||
|
||||
if (observerTarget.value) observer.value.observe(observerTarget.value);
|
||||
};
|
||||
|
||||
const resetAndFetch = () => {
|
||||
if (activeTab.value === 'transaction-history') {
|
||||
transactions.value = [];
|
||||
pagination.value.transactions = { page: 1, hasMore: true };
|
||||
}
|
||||
|
||||
if (activeTab.value === 'game-history') {
|
||||
games.value = [];
|
||||
pagination.value.games = { page: 1, hasMore: true };
|
||||
}
|
||||
|
||||
fetchData();
|
||||
};
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
const date = new Date(dateString)
|
||||
return date.toLocaleDateString('en-US', {
|
||||
@@ -607,6 +915,11 @@ onMounted(async () => {
|
||||
router.push('/login')
|
||||
return
|
||||
}
|
||||
const route = useRoute()
|
||||
if (route.query.tab) {
|
||||
activeTab.value = route.query.tab;
|
||||
router.replace({ query: {} });
|
||||
}
|
||||
|
||||
if (!authStore.currentUser) {
|
||||
await fetchProfile()
|
||||
|
||||
Reference in New Issue
Block a user