Index: ReserveNGo-frontend/src/Api_Classes/HttpClient.js =================================================================== --- ReserveNGo-frontend/src/Api_Classes/HttpClient.js (revision 2bbbe73e207cbd8a8655d0a7ffc9133bf0f39a8d) +++ ReserveNGo-frontend/src/Api_Classes/HttpClient.js (revision 8cef9e57a5e71205951552cc01ae2037e4dcce2d) @@ -12,5 +12,9 @@ const url = new URL(endpoint) if (queryParams) { - Object.entries(queryParams).forEach(([k, v]) => url.searchParams.append(k, v)) + Object.entries(queryParams).forEach(([k, v]) => { + if (v !== undefined && v !== null && v !== '') { + url.searchParams.append(k, String(v)) + } + }) } Index: ReserveNGo-frontend/src/components/Project/Event/events_carousel.vue =================================================================== --- ReserveNGo-frontend/src/components/Project/Event/events_carousel.vue (revision 2bbbe73e207cbd8a8655d0a7ffc9133bf0f39a8d) +++ ReserveNGo-frontend/src/components/Project/Event/events_carousel.vue (revision 8cef9e57a5e71205951552cc01ae2037e4dcce2d) @@ -104,4 +104,8 @@ getImageLogo(imageLogo) { + if (!imageLogo) { + return noImg + } + try { const url = new URL(imageLogo, config.API_BASE_URL) @@ -110,5 +114,5 @@ return config.API_BASE_URL + imageLogo } - }, + } }, Index: ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue =================================================================== --- ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue (revision 2bbbe73e207cbd8a8655d0a7ffc9133bf0f39a8d) +++ ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue (revision 8cef9e57a5e71205951552cc01ae2037e4dcce2d) @@ -4,5 +4,5 @@ import SearchFilterPanel from '@/components/Project/Restaurant/search_filter_panel.vue' import Events_carousel from '@/components/Project/Event/events_carousel.vue' -import { transformArray } from '@/mixins/utilFunctions.js' + import { useEvents } from '@/repository/Events.ts' import { useLocales } from '@/repository/Locale.ts' @@ -19,75 +19,104 @@ data() { return { - allEvents: [], - allEventsRaw: [], locals: [], + events: [], activeView: 'locals', - favouriteEvents: [], + + localPage: 0, + localTotalPages: 0, + eventPage: 0, + eventTotalPages: 0, + pageSize: 5, + + /* filters */ + lastSearch: '', + lastSortBy: 'name', + lastDirection: 'asc', + + lastIsOpen: null, + lastLocalType: null, + lastServices: [], + + lastEventStatus: null, + lastEventType: null, } }, methods: { - sendSearchQuery(searchQuery, sortBy, directions, isOpen) { + /* ===================== LOCALS ===================== */ + fetchLocals(page = 0) { + useLocales + .getLocals({ + name: this.lastSearch, + sortBy: this.lastSortBy, + direction: this.lastDirection, + isOpen: this.lastIsOpen, + localType: this.lastLocalType, + services: this.lastServices, + page, + size: this.pageSize, + }) + .then((data) => { + this.locals = data.locals + this.localPage = data.currentPage + this.localTotalPages = data.totalPages + }) + }, + + /* ===================== EVENTS ===================== */ + fetchEvents(page = 0) { + useEvents + .getEvents({ + name: this.lastSearch, + sortBy: this.lastSortBy, + direction: this.lastDirection, + eventStatus: this.lastEventStatus, + eventType: this.lastEventType, + page, + size: this.pageSize, + }) + .then((data) => { + this.events = data.events + this.eventPage = data.currentPage + this.eventTotalPages = data.totalPages + }) + }, + + /* ===================== SEARCH / FILTER ===================== */ + sendSearchQuery(payload) { + this.lastSearch = payload.name || '' + this.lastSortBy = payload.sortBy || 'name' + this.lastDirection = payload.direction || 'asc' + if (this.activeView === 'locals') { - useLocales - .getLocals(searchQuery, sortBy, directions, isOpen) - .then((data) => { - this.locals = data.locals - }) - .catch((err) => console.log('The locals are not being caught.', err)) + this.lastIsOpen = payload.isOpen + this.lastLocalType = payload.localType + this.lastServices = payload.services || [] + + this.localPage = 0 + this.fetchLocals(0) } else { - this.filterEvents(searchQuery, sortBy, directions) - } - }, - - filterEvents(searchQuery, sortBy, directions) { - let filteredEvents = [...this.allEventsRaw] - - if (searchQuery) { - const query = searchQuery.toLowerCase() - filteredEvents = filteredEvents.filter( - (event) => - (event.title && event.title.toLowerCase().includes(query)) || - (event.name && event.name.toLowerCase().includes(query)) || - (event.description && event.description.toLowerCase().includes(query)) || - (event.location && event.location.toLowerCase().includes(query)), - ) - } - - if (sortBy) { - filteredEvents.sort((a, b) => { - let compareA, compareB - - switch (sortBy) { - case 'name': - compareA = (a.title || a.name || '').toLowerCase() - compareB = (b.title || b.name || '').toLowerCase() - return directions === 'desc' - ? compareB.localeCompare(compareA) - : compareA.localeCompare(compareB) - - case 'date': - compareA = new Date(a.date || 0) - compareB = new Date(b.date || 0) - return directions === 'desc' ? compareB - compareA : compareA - compareB - - case 'newest': - compareA = new Date(a.createdAt || a.date || 0) - compareB = new Date(b.createdAt || b.date || 0) - return compareB - compareA - - default: - return 0 - } - }) - } - - this.allEvents = transformArray(filteredEvents, 3) + this.lastEventStatus = payload.eventStatus + this.lastEventType = payload.eventType + + this.eventPage = 0 + this.fetchEvents(0) + } }, setActiveView(view) { this.activeView = view - }, - + + // Load data if switching view and a list is empty + if (view === 'locals' && this.locals.length === 0) { + this.fetchLocals(this.localPage) + } + + if (view === 'events' && this.events.length === 0) { + this.fetchEvents(this.eventPage) + } + }, + + /* ===================== FAVOURITES ===================== */ async loadFavouriteEvents() { try { @@ -111,18 +140,11 @@ this.favouriteEvents = this.favouriteEvents.filter((fav) => fav.id !== id) } else { - const event = this.allEventsRaw.find((e) => e.id === id) + const event = this.events.find((e) => e.id === id) if (event) { this.favouriteEvents.push(event) - } else { - this.loadFavouriteEvents() } } }) - .catch((err) => { - console.log('Error toggling favourite:', err) - if (err.message && err.message.includes('409')) { - this.loadFavouriteEvents() - } - }) + .catch((err) => console.log('Error toggling favourite:', err)) }, }, @@ -130,19 +152,6 @@ beforeMount() { this.loadFavouriteEvents() - - useEvents - .listAll() - .then((data) => { - this.allEventsRaw = data.events - this.allEvents = transformArray(data.events, 3) - }) - .catch((error) => console.log('Failed fetching events', error)) - - useLocales - .getLocals() - .then((data) => { - this.locals = data.locals - }) - .catch((err) => console.log('The locals are not being caught.', err)) + this.fetchLocals(0) + this.fetchEvents(0) }, } @@ -153,12 +162,15 @@
+ +
- +
+
@@ -178,12 +190,62 @@
+
+ + + +
+ + + Page {{ localPage + 1 }} of {{ localTotalPages }} + + +
+ +
+ + + Page {{ eventPage + 1 }} of {{ eventTotalPages }} + + +
+
@@ -223,15 +285,8 @@ } -.nav-btn:hover { - background-color: #f8f9fa; - border-color: #5ea5bc; - color: #5ea5bc; -} - .nav-btn.active { background-color: #5ea5bc; border-color: #5ea5bc; color: #fff; - box-shadow: 0 2px 8px rgba(94, 165, 188, 0.3); } Index: ReserveNGo-frontend/src/components/Project/Restaurant/search_filter_panel.vue =================================================================== --- ReserveNGo-frontend/src/components/Project/Restaurant/search_filter_panel.vue (revision 2bbbe73e207cbd8a8655d0a7ffc9133bf0f39a8d) +++ ReserveNGo-frontend/src/components/Project/Restaurant/search_filter_panel.vue (revision 8cef9e57a5e71205951552cc01ae2037e4dcce2d) @@ -9,140 +9,224 @@ }) -const selectedFilters = ref([]) - -const localeFilterOptions = { - 'Open Now': 'isOpen', - 'Top Rated': 'rating', - Nearby: 'distance', -} - -const eventFilterOptions = { - Upcoming: 'upcoming', - 'This Week': 'thisWeek', - 'This Month': 'thisMonth', -} - -const localeSortOptions = [ - { value: '', text: 'Sort by' }, - { value: 'name,asc', text: 'Name (A-Z)' }, - { value: 'name,desc', text: 'Name (Z-A)' }, - { value: 'rating', text: 'Rating' }, - { value: 'newest', text: 'Newest' }, +/* ===================== STATE ===================== */ +const searchInput = ref('') +const sortQuery = ref('') + +/* Locals */ +const isOpen = ref(false) +const localType = ref(null) +const services = ref([]) + +/* Events */ +const eventStatus = ref(null) +const eventType = ref(null) + +/* ===================== OPTIONS ===================== */ +const localSortOptions = [ + { value: 'name,asc', text: 'Name (A–Z)' }, + { value: 'name,desc', text: 'Name (Z–A)' }, + { value: 'rating,desc', text: 'Highest rating' }, + { value: 'createdAt,desc', text: 'Newest' }, ] const eventSortOptions = [ - { value: '', text: 'Sort by' }, - { value: 'name,asc', text: 'Name (A-Z)' }, - { value: 'name,desc', text: 'Name (Z-A)' }, - { value: 'date,asc', text: 'Date (Soonest)' }, - { value: 'date,desc', text: 'Date (Latest)' }, - { value: 'newest', text: 'Newest' }, -] - -const filterOptions = computed(() => - props.activeView === 'locals' ? localeFilterOptions : eventFilterOptions, + { value: 'name,asc', text: 'Name (A–Z)' }, + { value: 'name,desc', text: 'Name (Z–A)' }, + { value: 'createdAt,desc', text: 'Newest' }, +] + +const localTypes = [ + { value: 'RESTAURANT', label: 'Restaurant' }, + { value: 'CAFE', label: 'Café' }, + { value: 'BAR', label: 'Bar' }, + { value: 'PUB', label: 'Pub' }, + { value: 'BISTRO', label: 'Bistro' }, + { value: 'FOOD_TRUCK', label: 'Food truck' }, + { value: 'BUFFET', label: 'Buffet' }, + { value: 'FAST_FOOD', label: 'Fast food' }, + { value: 'LOUNGE', label: 'Lounge' }, + { value: 'DELI', label: 'Deli' }, +] + +const serviceOptions = [ + { value: 'WIFI', label: 'Wi-Fi' }, + { value: 'PET_FRIENDLY', label: 'Pet friendly' }, + { value: 'PARKING', label: 'Parking' }, + { value: 'OUTDOOR', label: 'Outdoor seating' }, + { value: 'INDOOR', label: 'Indoor seating' }, + { value: 'PLAYGROUND', label: 'Playground' }, + { value: 'VEGAN_FRIENDLY', label: 'Vegan friendly' }, + { value: 'VEGETARIAN_FRIENDLY', label: 'Vegetarian friendly' }, + { value: 'GLUTEN_FREE_FRIENDLY', label: 'Gluten-free friendly' }, + { value: 'FAMILY_KIDS_FRIENDLY', label: 'Family & kids friendly' }, + { value: 'SMOKING_FRIENDLY', label: 'Smoking friendly' }, +] + +const eventStatuses = [ + { value: 'UPCOMING', label: 'Upcoming' }, + { value: 'ACTIVE', label: 'Active' }, + { value: 'FINISHED', label: 'Finished' }, +] + +const eventTypes = [ + { value: 'LIVE_MUSIC', label: 'Live music' }, + { value: 'DJ_NIGHT', label: 'DJ night' }, + { value: 'FOOD_SPECIAL', label: 'Food special' }, + { value: 'DRINK_SPECIAL', label: 'Drink special' }, + { value: 'HAPPY_HOUR', label: 'Happy hour' }, + { value: 'SPORTS_SCREENING', label: 'Sports screening' }, + { value: 'KARAOKE', label: 'Karaoke' }, + { value: 'THEME_PARTY', label: 'Theme party' }, + { value: 'OPEN_MIC', label: 'Open mic' }, + { value: 'BRUNCH', label: 'Brunch' }, + { value: 'COOKING_WORKSHOP', label: 'Cooking workshop' }, + { value: 'ART_EXHIBITION', label: 'Art exhibition' }, + { value: 'COMEDY_SHOW', label: 'Comedy show' }, + { value: 'GAME_NIGHT', label: 'Game night' }, + { value: 'PRIVATE_EVENT', label: 'Private event' }, + { value: 'SEASONAL_EVENT', label: 'Seasonal event' }, +] + +const sortOptions = computed(() => + props.activeView === 'locals' ? localSortOptions : eventSortOptions, ) -const sortOptions = computed(() => - props.activeView === 'locals' ? localeSortOptions : eventSortOptions, -) - -const placeholderText = computed(() => - props.activeView === 'locals' ? 'Search locals...' : 'Search events...', -) - -const sortQuery = ref('') -const searchInput = ref('') - +/* ===================== EMIT ===================== */ +const emit = defineEmits<{ (e: 'searchQuerySent', payload: any): void }>() let debounceTimer: number | null = null -const emit = defineEmits<{ - (e: 'searchQuerySent', search: string, sort: string, direction: string, filters: any): void -}>() - -watch( - () => props.activeView, - () => { - selectedFilters.value = [] - sortQuery.value = '' - searchInput.value = '' - }, -) - -watch([searchInput, sortQuery, selectedFilters], (newValues) => { + +watch([searchInput, sortQuery, isOpen, localType, services, eventStatus, eventType], () => { if (debounceTimer) clearTimeout(debounceTimer) debounceTimer = window.setTimeout(() => { - const [search, sort, filters] = newValues - const [sortField, direction = 'asc'] = sort.split(',') + const [sortBy, direction = 'asc'] = sortQuery.value.split(',') if (props.activeView === 'locals') { - emit('searchQuerySent', search, sortField, direction, filters.includes('isOpen')) + emit('searchQuerySent', { + name: searchInput.value, + sortBy, + direction, + isOpen: isOpen.value || null, + localType: localType.value, + services: services.value, + }) } else { - emit('searchQuerySent', search, sortField, direction, filters) + emit('searchQuerySent', { + name: searchInput.value, + sortBy, + direction, + eventStatus: eventStatus.value, + eventType: eventType.value, + }) } - }, 400) + }, 350) }) +<