From 6b52aed66accc6e663d9de47beb4101b7ea3c50f Mon Sep 17 00:00:00 2001 From: kusowl Date: Wed, 21 Jan 2026 19:11:10 +0530 Subject: [PATCH] wip --- app/Http/Resources/BrokerRoleResource.php | 23 +++ app/Http/Resources/DealResource.php | 31 ++++ app/Http/Resources/UserResource.php | 24 +++ app/Models/Deal.php | 2 +- resources/js/app.js | 11 +- resources/js/deal-view-modal.js | 94 ++++++++++ resources/js/interaction.js | 161 ++++++++++++------ resources/js/nav-menu.js | 24 +-- resources/js/report-deal.js | 74 ++++---- resources/js/toast.js | 5 +- .../dashboard/broker/layout.blade.php | 1 - .../dashboard/user/action-toolbar.blade.php | 14 +- .../dashboard/user/broker-contact.blade.php | 10 +- .../dashboard/user/deal-modal.blade.php | 34 ++++ .../dashboard/user/deal-stats.blade.php | 10 ++ .../dashboard/user/listing-card.blade.php | 4 +- resources/views/components/ui/modal.blade.php | 2 +- resources/views/explore.blade.php | 2 +- resources/views/home.blade.php | 1 - routes/api/deal.php | 19 +++ routes/web.php | 7 + 21 files changed, 433 insertions(+), 120 deletions(-) create mode 100644 app/Http/Resources/BrokerRoleResource.php create mode 100644 app/Http/Resources/DealResource.php create mode 100644 app/Http/Resources/UserResource.php create mode 100644 resources/js/deal-view-modal.js create mode 100644 resources/views/components/dashboard/user/deal-modal.blade.php create mode 100644 resources/views/components/dashboard/user/deal-stats.blade.php create mode 100644 routes/api/deal.php diff --git a/app/Http/Resources/BrokerRoleResource.php b/app/Http/Resources/BrokerRoleResource.php new file mode 100644 index 0000000..f0390b7 --- /dev/null +++ b/app/Http/Resources/BrokerRoleResource.php @@ -0,0 +1,23 @@ + + */ + public function toArray(Request $request): array + { + return [ + 'bio' => $this->bio, + 'location' => $this->location, + 'phone' => $this->phone, + ]; + } +} diff --git a/app/Http/Resources/DealResource.php b/app/Http/Resources/DealResource.php new file mode 100644 index 0000000..b8ecd0a --- /dev/null +++ b/app/Http/Resources/DealResource.php @@ -0,0 +1,31 @@ + + */ + public function toArray(Request $request): array + { + return [ + 'id' => $this->id, + 'title' => $this->title, + 'description' => $this->description, + 'image' => asset('storage/'.$this->image), + 'link' => $this->link !== null ? URL::signedRoute('redirect', $this->id) : null, + 'category' => $this->whenLoaded('category'), + 'broker' => new UserResource($this->whenLoaded('broker')), + 'total_likes' => $this->total_likes, + 'total_redirection' => $this->total_redirection, + + ]; + } +} diff --git a/app/Http/Resources/UserResource.php b/app/Http/Resources/UserResource.php new file mode 100644 index 0000000..57438b4 --- /dev/null +++ b/app/Http/Resources/UserResource.php @@ -0,0 +1,24 @@ + + */ + public function toArray(Request $request): array + { + return [ + 'id' => $this->id, + 'name' => $this->name, + 'email' => $this->email, + 'role' => new BrokerRoleResource($this->whenLoaded('role')), + ]; + } +} diff --git a/app/Models/Deal.php b/app/Models/Deal.php index daf660c..ef3c218 100644 --- a/app/Models/Deal.php +++ b/app/Models/Deal.php @@ -94,7 +94,7 @@ public function search(Builder $query, string $search): Builder { return $query ->where('title', 'LIKE', "%$search%") - ->orWhereRelation('broker', 'name', 'LIKE', "%$search%"); + ->orWhereRelation('broker', 'name', 'LIKE', "%$search%"); } /** diff --git a/resources/js/app.js b/resources/js/app.js index 9ab439d..0496a19 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1,5 +1,14 @@ import './bootstrap'; -import { setSidebarState } from '@/sidebar.js'; +import {setSidebarState} from '@/sidebar.js'; +import "./interaction.js" +import "./report-deal.js" +import "./alert.js" +import "./image-input.js" +import "./menu.js" +import "./modal.js" +import "./sidebar.js" +import "./toast.js" +import "./deal-view-modal.js" window.addEventListener('load', () => { const preloader = document.getElementById('preloader'); diff --git a/resources/js/deal-view-modal.js b/resources/js/deal-view-modal.js new file mode 100644 index 0000000..271d8b4 --- /dev/null +++ b/resources/js/deal-view-modal.js @@ -0,0 +1,94 @@ +import {showToast} from "@/toast.js"; +import {closeModal, showModal} from "@/modal.js"; +import {favorite, like, redirect} from "@/interaction.js"; +import {showReportModal} from "@/report-deal.js"; + +async function showDealModal(dealId, dealTitle) { + if (dealId === null || dealId === "") { + showToast('Something went wrong!'); + return; + } + + // Open the deal modal and show a loading state + showModal('deal-modal') + + try { + const response = await axios.get('/api/deals/' + dealId); + setDealDetails(response.data); + + const dealModal = document.getElementById('deal-modal'); + + const likeBtn = dealModal.querySelector('.likeBtn'); + likeBtn.addEventListener('click', () => { + like(likeBtn, dealId); + }) + + const favoriteBtn = dealModal.querySelector('.favoriteBtn'); + favoriteBtn.addEventListener('click', () => { + favorite(favoriteBtn, dealId); + }) + + + const reportBtn = dealModal.querySelector('.reportBtn'); + reportBtn.addEventListener('click', async () => { + showReportModal(dealId, dealTitle) + }) + + } catch (e) { + console.error(e) + closeModal('deal-modal') + showToast('Something went wrong!'); + } +} + +function setDealDetails(dealDetails) { + if (dealDetails === null) { + throw new Error('DealDetails must be not null'); + } + + // // Can throw error, handle it else + // dealDetails = JSON.parse(dealDetails); + console.log(dealDetails); + const deal = dealDetails.data + const {id, title, description, link, image, category, broker, total_redirection, total_likes} = deal; + const dealModal = document.getElementById('deal-modal'); + + dealModal.querySelector('.deal-image').src = image; + dealModal.querySelector('.deal-title').innerText = title; + dealModal.querySelector('.deal-description').innerText = description; + dealModal.querySelector('.deal-category').innerText = category.name; + dealModal.querySelector('.broker-name').innerText = broker.name; + dealModal.querySelector('.broker-email').innerText = broker.email; + dealModal.querySelector('.broker-phone').innerText = broker.role.phone; + dealModal.querySelector('.likeCount').querySelector('p').innerText = total_likes ?? '0'; + dealModal.querySelector('.clickCount').querySelector('p').innerText = total_redirection ?? '0'; + + const dealLink = dealModal.querySelector('.deal-link'); + if (link !== null && link !== "") { + dealLink.classList.remove('hidden'); + dealLink.classList.add('flex'); + dealLink.addEventListener('click', () => { + redirect(link); + }) + } else { + dealLink.classList.remove('flex'); + dealLink.classList.add('hidden'); + } +} + +window.addEventListener('DOMContentLoaded', () => { + const dealCards = document.querySelectorAll('.deal-card'); + if (dealCards) { + dealCards.forEach(dealCard => { + let dealId = dealCard.dataset.dealId; + let dealTitle = dealCard.querySelector('.action-toolbar').dataset.dealTitle; + + dealCard.addEventListener('click', async (e) => { + if (e.target.closest('button')) { + return; + } + await showDealModal(dealId, dealTitle); + }); + }) + } +}); diff --git a/resources/js/interaction.js b/resources/js/interaction.js index 6d5d632..f7388e1 100644 --- a/resources/js/interaction.js +++ b/resources/js/interaction.js @@ -1,87 +1,142 @@ -import {showToast} from "./toast.js"; +import { showToast } from "./toast.js"; +import { showReportModal } from "@/report-deal.js"; + +/* ========================= + ACTION HANDLERS +========================= */ + +export async function like(button, id) { + if (button.dataset.loading) return; + button.dataset.loading = 'true'; + + const likeBtns = button.querySelectorAll('.like'); + const likeBadge = document.getElementById(`likeBadge${id}`); -async function like(button, id) { - // Instant feedback for user - let likeBtns = button.querySelectorAll('.like'); - let likeBadge = document.getElementById("likeBadge".concat(id)); toggleHidden(likeBtns); - // Check if user liked the deal - let isLiked = button.classList.contains('liked'); - updateLikeCount(likeBadge, isLiked ? -1 : 1) ; - button.classList.toggle('liked') + const isLiked = button.classList.contains('liked'); + updateLikeCount(likeBadge, isLiked ? -1 : 1); + button.classList.toggle('liked'); + try { - let response = await axios.post('/like/' + id); + const response = await axios.post(`/like/${id}`); if (response.status !== 200) { - showToast(response.data.message) - // Revert the ui + showToast(response.data.message); toggleHidden(likeBtns); + button.classList.toggle('liked'); + updateLikeCount(likeBadge, isLiked ? 1 : -1); + } else { + showToast(response.data.message); } - else{ - showToast(response.data.message) - } - } catch (e) { - showToast(e.response.data.message) + showToast(e?.response?.data?.message || 'Something went wrong'); toggleHidden(likeBtns); + button.classList.toggle('liked'); + updateLikeCount(likeBadge, isLiked ? 1 : -1); console.error(e); + } finally { + delete button.dataset.loading; } } -async function favorite(e, id) { - // Instant feedback for user - let favoriteBtns = e.querySelectorAll('.favorite'); +export async function favorite(button, id) { + if (button.dataset.loading) return; + button.dataset.loading = 'true'; + + const favoriteBtns = button.querySelectorAll('.favorite'); toggleHidden(favoriteBtns); try { - let response = await axios.post('/favorite/' + id); + const response = await axios.post(`/favorite/${id}`); if (response.status !== 200) { - showToast(response.data.message) - // Revert the ui + showToast(response.data.message); toggleHidden(favoriteBtns); - }else{ - showToast(response.data.message); + } else { + showToast(response.data.message); } } catch (e) { - showToast(e.response.data.message) + showToast(e?.response?.data?.message || 'Something went wrong'); toggleHidden(favoriteBtns); console.error(e); + } finally { + delete button.dataset.loading; } } -function toggleHidden(nodelist) { - nodelist.forEach((node) => node.classList.toggle('hidden')) -} - -function updateLikeCount(badge, change){ - try{ - let likeCount = Math.max(parseInt( badge.dataset.count) + change, 0) - badge.querySelector('p').innerText = likeCount; - badge.dataset.count = likeCount.toString(); - } - catch(e) { - console.error(e); - } -} - -function redirect(url, id){ +export function redirect(url, id) { window.open(url, '_blank'); - let redirectBadge = document.getElementById("redirectBadge".concat(id)); + const redirectBadge = document.getElementById(`redirectBadge${id}`); updateRedirectCount(redirectBadge, 1); - // increment the count in ui } -function updateRedirectCount(badge, change){ - try{ - let likeCount = Math.max(parseInt( badge.dataset.count) + change, 0) - badge.querySelector('p').innerText = likeCount; - badge.dataset.count = likeCount.toString(); + +/* ========================= + EVENT DELEGATION (🔥 FIX) +========================= */ + +document.addEventListener('click', async (e) => { + const button = e.target.closest('button'); + if (!button) return; + + const dealCard = button.closest('.deal-card'); + if (!dealCard) return; + + const dealId = dealCard.dataset.dealId; + const dealTitle = + dealCard.querySelector('.action-toolbar')?.dataset.dealTitle; + + if (button.classList.contains('likeBtn')) { + await like(button, dealId); } - catch(e) { + + if (button.classList.contains('favoriteBtn')) { + await favorite(button, dealId); + } + + if (button.classList.contains('reportBtn')) { + showReportModal(dealId, dealTitle); + } +}); + +/* ========================= + HELPERS +========================= */ + +function toggleHidden(nodes) { + nodes.forEach(node => node.classList.toggle('hidden')); +} + +function updateLikeCount(badge, change) { + if (!badge) return; + try { + const count = Math.max( + parseInt(badge.dataset.count || '0') + change, + 0 + ); + badge.querySelector('p').innerText = count; + badge.dataset.count = count.toString(); + } catch (e) { console.error(e); } } -document.like = like; -document.favorite = favorite; -document.redirect = redirect; + +function updateRedirectCount(badge, change) { + if (!badge) return; + try { + const count = Math.max( + parseInt(badge.dataset.count || '0') + change, + 0 + ); + badge.querySelector('p').innerText = count; + badge.dataset.count = count.toString(); + } catch (e) { + console.error(e); + } +} + +/* ========================= + GLOBAL (if needed) +========================= */ + +window.redirect = redirect; diff --git a/resources/js/nav-menu.js b/resources/js/nav-menu.js index b135c36..c41bc3e 100644 --- a/resources/js/nav-menu.js +++ b/resources/js/nav-menu.js @@ -3,14 +3,18 @@ const closeBtn = document.getElementById('closeBtn'); const mobileMenu = document.getElementById('mobileMenu'); const body = document.body; -openBtn.addEventListener('click', () => { - mobileMenu.classList.remove('translate-x-full'); - mobileMenu.classList.add('translate-x-0'); - body.style.overflow = 'hidden'; -}) +if (openBtn) { + openBtn.addEventListener('click', () => { + mobileMenu.classList.remove('translate-x-full'); + mobileMenu.classList.add('translate-x-0'); + body.style.overflow = 'hidden'; + }) +} -closeBtn.addEventListener('click', () => { - mobileMenu.classList.add('translate-x-full'); - mobileMenu.classList.remove('translate-x-0'); - body.style.overflow = 'visible'; -}) +if (closeBtn) { + closeBtn.addEventListener('click', () => { + mobileMenu.classList.add('translate-x-full'); + mobileMenu.classList.remove('translate-x-0'); + body.style.overflow = 'visible'; + }) +} diff --git a/resources/js/report-deal.js b/resources/js/report-deal.js index afa7744..cad0547 100644 --- a/resources/js/report-deal.js +++ b/resources/js/report-deal.js @@ -1,10 +1,11 @@ import {closeModal, showModal} from './modal.js'; import {showToast} from './toast.js'; + const reportModal = document.getElementById('report-modal'); const reportForm = document.getElementById('report-form'); -function showReportModal(dealId, dealTitle) { +export function showReportModal(dealId, dealTitle) { // Clear the fields reportForm.reset(); const oldErrors = reportForm.querySelectorAll('.text-red-500'); @@ -18,43 +19,44 @@ function showReportModal(dealId, dealTitle) { showModal('report-modal'); } -reportForm.addEventListener('submit', async function (form) { - form.preventDefault(); - const formData = new FormData(this); - const dealId = reportModal.dataset.dealId - try { +if (reportForm) { - let response = await axios.post( - `report/${dealId}`, - formData - ); + reportForm.addEventListener('submit', async function (form) { + form.preventDefault(); + const formData = new FormData(this); + const dealId = reportModal.dataset.dealId + try { - showToast('Report submitted. Thank you for keeping DealHub safe!'); - closeModal('report-modal') + let response = await axios.post( + `report/${dealId}`, + formData + ); - } catch (error) { + showToast('Report submitted. Thank you for keeping DealHub safe!'); + closeModal('report-modal') - if (error.response.status === 405) { - closeModal('report-modal'); - showToast('You already have reported this deal !'); - return; + } catch (error) { + + if (error.response.status === 405) { + closeModal('report-modal'); + showToast('You already have reported this deal !'); + return; + } + + // Iterate over the all error messages spans and show validation errors + if (error.response.status === 422) { + + let errors = error.response.data.errors; + + Object.keys(errors).forEach(error => { + let errorField = reportForm.querySelector(`[name="${error}"]`) + const errorSpan = document.createElement('span'); + errorSpan.textContent = errors[error][0]; + errorSpan.classList.add('text-red-500'); + errorSpan.classList.add('text-sm'); + errorField.insertAdjacentElement('afterend', errorSpan); + }) + } } - - // Iterate over the all error messages spans and show validation errors - if (error.response.status === 422) { - - let errors = error.response.data.errors; - - Object.keys(errors).forEach(error => { - let errorField = reportForm.querySelector(`[name="${error}"]`) - const errorSpan = document.createElement('span'); - errorSpan.textContent = errors[error][0]; - errorSpan.classList.add('text-red-500'); - errorSpan.classList.add('text-sm'); - errorField.insertAdjacentElement('afterend', errorSpan); - }) - } - } -}); - -document.showReportModal = showReportModal; + }); +} diff --git a/resources/js/toast.js b/resources/js/toast.js index 0a4312d..affafaa 100644 --- a/resources/js/toast.js +++ b/resources/js/toast.js @@ -1,7 +1,8 @@ const toast = document.querySelector('.toast'); const toastBtn = document.querySelector('#toast-btn'); -let toastMessage = toast.querySelector('#toast-message'); + export function showToast(message) { + let toastMessage = toast.querySelector('#toast-message'); toast.classList.remove('translate-x-[100vw]'); toast.classList.add('translate-x-0'); toastMessage.textContent = message; @@ -9,9 +10,11 @@ export function showToast(message) { hideToast(); }, 5000) } + function hideToast() { toast.classList.remove('translate-x-0'); toast.classList.add('translate-x-[100vw]'); } + document.hideToast = hideToast; document.showToast = showToast; diff --git a/resources/views/components/dashboard/broker/layout.blade.php b/resources/views/components/dashboard/broker/layout.blade.php index ca7bf32..33875d9 100644 --- a/resources/views/components/dashboard/broker/layout.blade.php +++ b/resources/views/components/dashboard/broker/layout.blade.php @@ -23,5 +23,4 @@ class=" flex flex-col space-y-4 md:space-y-8 bg-[#F9FAFB] overflow-y-auto overfl {{$slot}} - @vite('resources/js/nav-menu.js') diff --git a/resources/views/components/dashboard/user/action-toolbar.blade.php b/resources/views/components/dashboard/user/action-toolbar.blade.php index 5324808..67b02a8 100644 --- a/resources/views/components/dashboard/user/action-toolbar.blade.php +++ b/resources/views/components/dashboard/user/action-toolbar.blade.php @@ -1,6 +1,6 @@ -@props(['deal_id', 'deal_title', 'like' => false, 'favourite' => false]) -
- $like]) onclick="like(this, {{$deal_id}})"> +@props(['deal_id' => '', 'deal_title' => '', 'like' => false, 'favourite' => false]) +
+ $like])> !$like ]) /> - + !$favourite ]) /> - +
diff --git a/resources/views/components/dashboard/user/broker-contact.blade.php b/resources/views/components/dashboard/user/broker-contact.blade.php index f8a615d..85b661f 100644 --- a/resources/views/components/dashboard/user/broker-contact.blade.php +++ b/resources/views/components/dashboard/user/broker-contact.blade.php @@ -1,10 +1,10 @@ -@props(['broker']) -
+@props(['broker' => '']) +

Broker Contact

-

{{$broker->name}}

-

{{$broker->email}}

-

{{$broker->role->phone}}

+

{{$broker->name ?? ''}}

+

{{$broker->email ?? ''}}

+

{{$broker->role->phone ?? ''}}

diff --git a/resources/views/components/dashboard/user/deal-modal.blade.php b/resources/views/components/dashboard/user/deal-modal.blade.php new file mode 100644 index 0000000..bbee0be --- /dev/null +++ b/resources/views/components/dashboard/user/deal-modal.blade.php @@ -0,0 +1,34 @@ + +
+

Deal Details

+ +
+
+ +
+ +

+

+
+ + +
+ + +
+
+ + + diff --git a/resources/views/components/dashboard/user/deal-stats.blade.php b/resources/views/components/dashboard/user/deal-stats.blade.php new file mode 100644 index 0000000..2ce4198 --- /dev/null +++ b/resources/views/components/dashboard/user/deal-stats.blade.php @@ -0,0 +1,10 @@ +@props(['likeCount' => 0, 'clickCount' => 0]) +
+ + + + + + + +
diff --git a/resources/views/components/dashboard/user/listing-card.blade.php b/resources/views/components/dashboard/user/listing-card.blade.php index 2cd9bb3..f929bb9 100644 --- a/resources/views/components/dashboard/user/listing-card.blade.php +++ b/resources/views/components/dashboard/user/listing-card.blade.php @@ -1,5 +1,5 @@ @props(['deal' => '', 'broker' => '']) - +
@@ -25,7 +25,7 @@
@if(filled($deal->link)) - +

View Deal

 diff --git a/resources/views/components/ui/modal.blade.php b/resources/views/components/ui/modal.blade.php index 342bafb..2549cee 100644 --- a/resources/views/components/ui/modal.blade.php +++ b/resources/views/components/ui/modal.blade.php @@ -1,5 +1,5 @@ merge(["class"=>"fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-4 shadow-lg"])}} > + {{$attributes->merge(["class"=>"fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-2 md:p-4 shadow-lg"])}} >
{{$slot}}
diff --git a/resources/views/explore.blade.php b/resources/views/explore.blade.php index b99eb7d..55fc2ab 100644 --- a/resources/views/explore.blade.php +++ b/resources/views/explore.blade.php @@ -27,7 +27,7 @@ + - @vite(['resources/js/menu.js', 'resources/js/interaction.js', 'resources/js/report-deal.js', 'resources/js/toast.js']) diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php index 69e909f..7c974dc 100644 --- a/resources/views/home.blade.php +++ b/resources/views/home.blade.php @@ -5,5 +5,4 @@ - @vite('resources/js/nav-menu.js') diff --git a/routes/api/deal.php b/routes/api/deal.php new file mode 100644 index 0000000..055c399 --- /dev/null +++ b/routes/api/deal.php @@ -0,0 +1,19 @@ +middleware('auth') + ->group(function () { + Route::get('/deals/{deal}', function (Deal $deal) { + return new DealResource( + (new ExplorePageDealsQuery) + ->builder() + ->where('id', $deal->id) + ->first() + ); + }); + }); diff --git a/routes/web.php b/routes/web.php index 448fdf4..88a7a4a 100644 --- a/routes/web.php +++ b/routes/web.php @@ -19,3 +19,10 @@ ->middleware(HasRole::class.':'.UserTypes::Admin->value) ->name('admin.dashboard'); }); + +/** + * This routes are accessed by JS XHR requests, and is loaded here cause + * we do not want to use sanctum for web requests + */ +// ------------- API Routes ------------ +require __DIR__.'/api/deal.php';