From f14f7ece5410f3069054e014258605e39490db69 Mon Sep 17 00:00:00 2001 From: kusowl Date: Wed, 21 Jan 2026 10:46:32 +0530 Subject: [PATCH 1/5] feature(search): users can search deals via broker name --- app/Models/Deal.php | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/Models/Deal.php b/app/Models/Deal.php index 207db51..daf660c 100644 --- a/app/Models/Deal.php +++ b/app/Models/Deal.php @@ -92,7 +92,9 @@ public function WithRedirectionPerDeal(Builder $query): Builder #[Scope] public function search(Builder $query, string $search): Builder { - return $query->where('title', 'LIKE', "%$search%"); + return $query + ->where('title', 'LIKE', "%$search%") + ->orWhereRelation('broker', 'name', 'LIKE', "%$search%"); } /** From 6b52aed66accc6e663d9de47beb4101b7ea3c50f Mon Sep 17 00:00:00 2001 From: kusowl Date: Wed, 21 Jan 2026 19:11:10 +0530 Subject: [PATCH 2/5] 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'; From 9e61dd9f519c068f162c2ca92e9a04647a5c30c5 Mon Sep 17 00:00:00 2001 From: kusowl Date: Thu, 22 Jan 2026 13:34:02 +0530 Subject: [PATCH 3/5] feature(deal-modal): add interaction only in card - show current user liked and favorite status in the modal --- app/Http/Resources/DealResource.php | 7 +- package-lock.json | 4 +- resources/js/app.js | 9 +- resources/js/deal-view-modal.js | 56 ++++--- resources/js/interaction.js | 156 ++++++------------ .../dashboard/user/action-toolbar.blade.php | 38 ----- .../action-toolbar/favorite-button.blade.php | 20 +++ .../user/action-toolbar/index.blade.php | 6 + .../user/action-toolbar/like-button.blade.php | 21 +++ .../action-toolbar/report-button.blade.php | 4 + .../dashboard/user/deal-modal.blade.php | 9 +- .../dashboard/user/listing-card.blade.php | 4 +- 12 files changed, 156 insertions(+), 178 deletions(-) delete mode 100644 resources/views/components/dashboard/user/action-toolbar.blade.php create mode 100644 resources/views/components/dashboard/user/action-toolbar/favorite-button.blade.php create mode 100644 resources/views/components/dashboard/user/action-toolbar/index.blade.php create mode 100644 resources/views/components/dashboard/user/action-toolbar/like-button.blade.php create mode 100644 resources/views/components/dashboard/user/action-toolbar/report-button.blade.php diff --git a/app/Http/Resources/DealResource.php b/app/Http/Resources/DealResource.php index b8ecd0a..9fec5f6 100644 --- a/app/Http/Resources/DealResource.php +++ b/app/Http/Resources/DealResource.php @@ -23,9 +23,10 @@ public function toArray(Request $request): array '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, - + 'totalLikes' => $this->total_likes, + 'totalRedirection' => $this->total_redirection, + 'isLiked' => $this->is_liked, + 'isFavorite' => $this->is_favorite, ]; } } diff --git a/package-lock.json b/package-lock.json index 986036e..71f98a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "dealhub", + "name": "DealHub", "lockfileVersion": 3, "requires": true, "packages": { @@ -2031,7 +2031,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -2268,7 +2267,6 @@ "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", diff --git a/resources/js/app.js b/resources/js/app.js index 0496a19..a062cce 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1,7 +1,5 @@ import './bootstrap'; import {setSidebarState} from '@/sidebar.js'; -import "./interaction.js" -import "./report-deal.js" import "./alert.js" import "./image-input.js" import "./menu.js" @@ -9,6 +7,13 @@ import "./modal.js" import "./sidebar.js" import "./toast.js" import "./deal-view-modal.js" +import {favorite, like, redirect} from "./interaction.js"; +import {showReportModal} from "./report-deal.js"; + +document.like = like; +document.favorite = favorite; +document.redirect = redirect; +document.showReportModal = showReportModal; window.addEventListener('load', () => { const preloader = document.getElementById('preloader'); diff --git a/resources/js/deal-view-modal.js b/resources/js/deal-view-modal.js index 271d8b4..6ba492f 100644 --- a/resources/js/deal-view-modal.js +++ b/resources/js/deal-view-modal.js @@ -1,7 +1,6 @@ import {showToast} from "@/toast.js"; import {closeModal, showModal} from "@/modal.js"; -import {favorite, like, redirect} from "@/interaction.js"; -import {showReportModal} from "@/report-deal.js"; +import {redirect} from "./interaction.js"; async function showDealModal(dealId, dealTitle) { if (dealId === null || dealId === "") { @@ -18,21 +17,8 @@ async function showDealModal(dealId, dealTitle) { 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) - }) + // Add the id so that action buttons can identify the route + dealModal.dataset.dealId = dealId; } catch (e) { console.error(e) @@ -46,11 +32,13 @@ function setDealDetails(dealDetails) { 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 { + id, title, description, link, + image, category, broker, + totalRedirection, totalLikes, + isLiked, isFavorite + } = deal; const dealModal = document.getElementById('deal-modal'); dealModal.querySelector('.deal-image').src = image; @@ -60,9 +48,31 @@ function setDealDetails(dealDetails) { 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'; + // Set the like and click counts + let likeCountElm = dealModal.querySelector('.likeCount'); + likeCountElm.querySelector('p').innerText = totalLikes ?? '0'; + likeCountElm.dataset.count = totalLikes ?? '0'; + dealModal.querySelector('.clickCount').querySelector('p').innerText = totalRedirection ?? '0'; + + // Set if current user has already liked the deal + let likeBtn = dealModal.querySelector('.likeBtn'); + let likeBtnSvg = likeBtn.querySelector('svg'); + if (isLiked) { + likeBtn.dataset.liked = 'true' + likeBtnSvg.classList.add('text-red-500', 'fill-current'); + } else { + likeBtn.dataset.liked = 'false' + likeBtnSvg.classList.remove('text-red-500', 'fill-current'); + } + + // Set if current user has already favorite the deal + let favoriteBtnSvg = dealModal.querySelector('.favoriteBtn').querySelector('svg'); + if (isFavorite) { + favoriteBtnSvg.classList.add('text-yellow-500', 'fill-current'); + } else { + favoriteBtnSvg.classList.remove('text-yellow-500', 'fill-current'); + } const dealLink = dealModal.querySelector('.deal-link'); if (link !== null && link !== "") { dealLink.classList.remove('hidden'); diff --git a/resources/js/interaction.js b/resources/js/interaction.js index f7388e1..f0d2e46 100644 --- a/resources/js/interaction.js +++ b/resources/js/interaction.js @@ -1,142 +1,90 @@ -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}`); - - toggleHidden(likeBtns); - - const isLiked = button.classList.contains('liked'); - updateLikeCount(likeBadge, isLiked ? -1 : 1); - button.classList.toggle('liked'); +import {showToast} from "./toast.js"; +export async function like(button) { + const activeClasses = ['fill-current', 'text-red-500'] + let isLiked = button.dataset.liked === 'true'; try { - const response = await axios.post(`/like/${id}`); + // Update the like state and count + let id = button.closest('.deal-identifier').dataset.dealId; + const cardLikeBadge = document.getElementById(`likeBadge${id}`); + + setLikeState(button, !isLiked); + updateLikeCount(cardLikeBadge, isLiked ? -1 : 1); + + // Update the state of like button that is clicked + toggleState(button, !isLiked, activeClasses); + + let response = await axios.post('/like/' + id); + showToast(response.data.message) - if (response.status !== 200) { - showToast(response.data.message); - toggleHidden(likeBtns); - button.classList.toggle('liked'); - updateLikeCount(likeBadge, isLiked ? 1 : -1); - } else { - showToast(response.data.message); - } } catch (e) { - showToast(e?.response?.data?.message || 'Something went wrong'); - toggleHidden(likeBtns); - button.classList.toggle('liked'); - updateLikeCount(likeBadge, isLiked ? 1 : -1); + showToast('Something went wrong!') + // Revert the states + toggleState(button, !isLiked, activeClasses); console.error(e); - } finally { - delete button.dataset.loading; } } -export async function favorite(button, id) { - if (button.dataset.loading) return; - button.dataset.loading = 'true'; - - const favoriteBtns = button.querySelectorAll('.favorite'); - toggleHidden(favoriteBtns); - +export async function favorite(button) { + const activeClasses = ['fill-current', 'text-yellow-500'] + let isFavorite = button.dataset.favorite === 'true'; try { - const response = await axios.post(`/favorite/${id}`); + let id = button.closest('.deal-identifier').dataset.dealId; + + setFavoriteState(button, !isFavorite); + toggleState(button, !isFavorite, activeClasses); + + let response = await axios.post('/favorite/' + id); + showToast(response.data.message) - if (response.status !== 200) { - showToast(response.data.message); - toggleHidden(favoriteBtns); - } else { - showToast(response.data.message); - } } catch (e) { - showToast(e?.response?.data?.message || 'Something went wrong'); - toggleHidden(favoriteBtns); + showToast(e.response.data.message) + toggleState(button, isFavorite, activeClasses); console.error(e); - } finally { - delete button.dataset.loading; } } export function redirect(url, id) { window.open(url, '_blank'); - const redirectBadge = document.getElementById(`redirectBadge${id}`); + let redirectBadge = document.getElementById("redirectBadge".concat(id)); updateRedirectCount(redirectBadge, 1); + // increment the count in ui } -/* ========================= - EVENT DELEGATION (🔥 FIX) -========================= */ +export function setLikeState(button, isLiked) { + button.dataset.liked = isLiked ? 'true' : 'false'; +} -document.addEventListener('click', async (e) => { - const button = e.target.closest('button'); - if (!button) return; +export function setFavoriteState(button, isFavorite) { + button.dataset.favorite = isFavorite ? 'true' : 'false'; +} - 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); +function toggleState(element, condition, activeClasses) { + const svg = element.querySelector('svg'); + if (condition) { + svg.classList.add(...activeClasses); + } else { + svg.classList.remove(...activeClasses); } - - 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(); + 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 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(); + 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); } } - -/* ========================= - GLOBAL (if needed) -========================= */ - -window.redirect = redirect; diff --git a/resources/views/components/dashboard/user/action-toolbar.blade.php b/resources/views/components/dashboard/user/action-toolbar.blade.php deleted file mode 100644 index 67b02a8..0000000 --- a/resources/views/components/dashboard/user/action-toolbar.blade.php +++ /dev/null @@ -1,38 +0,0 @@ -@props(['deal_id' => '', 'deal_title' => '', 'like' => false, 'favourite' => false]) -
- $like])> - $like - ]) - /> - !$like - ]) - /> - - - - $favourite - ]) - /> - - !$favourite - ]) - /> - - - - - - -
diff --git a/resources/views/components/dashboard/user/action-toolbar/favorite-button.blade.php b/resources/views/components/dashboard/user/action-toolbar/favorite-button.blade.php new file mode 100644 index 0000000..43f19bc --- /dev/null +++ b/resources/views/components/dashboard/user/action-toolbar/favorite-button.blade.php @@ -0,0 +1,20 @@ +@props(['isFavourite' => false, 'isInteractive'=> true]) +@php + $actionAttributes = $isInteractive ? [ + 'data-favorite' => $isFavourite ? 'true' : 'false', + 'onclick' => "favorite(this)" + ] : [] ; + $buttonClasses = [ + 'text-accent-600 favoriteBtn', + ]; +@endphp +merge($actionAttributes)->class($buttonClasses)}} +> + $isFavourite + ]) + /> + diff --git a/resources/views/components/dashboard/user/action-toolbar/index.blade.php b/resources/views/components/dashboard/user/action-toolbar/index.blade.php new file mode 100644 index 0000000..ab1c75d --- /dev/null +++ b/resources/views/components/dashboard/user/action-toolbar/index.blade.php @@ -0,0 +1,6 @@ +@props(['deal_id' => '', 'deal_title' => '', 'isLiked' => false, 'isFavourite' => false, 'isInteractive' => true]) +
+ + + +
diff --git a/resources/views/components/dashboard/user/action-toolbar/like-button.blade.php b/resources/views/components/dashboard/user/action-toolbar/like-button.blade.php new file mode 100644 index 0000000..034ed7a --- /dev/null +++ b/resources/views/components/dashboard/user/action-toolbar/like-button.blade.php @@ -0,0 +1,21 @@ +@props(['isLiked' => false, 'isInteractive' => true]) +@php + $actionAttributes = $isInteractive ? [ + 'data-liked' => $isLiked ? 'true' : 'false', + 'onclick' => "like(this)" + ] : [] ; + $buttonClasses = [ + 'text-accent-600 likeBtn', + 'liked' => $isLiked + ]; +@endphp +merge($actionAttributes)->class($buttonClasses)}} +> + $isLiked + ]) + /> + diff --git a/resources/views/components/dashboard/user/action-toolbar/report-button.blade.php b/resources/views/components/dashboard/user/action-toolbar/report-button.blade.php new file mode 100644 index 0000000..2ad5cfb --- /dev/null +++ b/resources/views/components/dashboard/user/action-toolbar/report-button.blade.php @@ -0,0 +1,4 @@ +@props(['id', 'title']) + + + diff --git a/resources/views/components/dashboard/user/deal-modal.blade.php b/resources/views/components/dashboard/user/deal-modal.blade.php index bbee0be..9834fdd 100644 --- a/resources/views/components/dashboard/user/deal-modal.blade.php +++ b/resources/views/components/dashboard/user/deal-modal.blade.php @@ -1,4 +1,4 @@ - +

Deal Details