From 4c8952117b887a84908c8f644fb19b3c6534317a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= Date: Sat, 14 Oct 2023 22:43:16 +0200 Subject: [PATCH] Refaktoring verejneho profilu, pridani zobrazeni udalosti --- src/components/event/EventsList.vue | 9 ++- .../navigation/PublicFlightEventSwitcher.vue | 15 ++++ src/composables/objects/event.js | 4 +- src/css/quasar.variables.scss | 2 +- src/graphql/queries/event.js | 8 +- src/pages/public/PilotProfilePage.vue | 34 +-------- .../public/pilotProfile/EventDetailPage.vue | 74 +++++++++++++++++++ .../public/pilotProfile/EventsListPage.vue | 55 ++++++++++++++ .../{ => pilotProfile}/FlightDetailPage.vue | 3 - .../public/pilotProfile/FlightsListPage.vue | 52 +++++++++++++ src/router/routes.js | 13 +++- src/stores/Events.js | 8 +- 12 files changed, 228 insertions(+), 49 deletions(-) create mode 100644 src/components/navigation/PublicFlightEventSwitcher.vue create mode 100644 src/pages/public/pilotProfile/EventDetailPage.vue create mode 100644 src/pages/public/pilotProfile/EventsListPage.vue rename src/pages/public/{ => pilotProfile}/FlightDetailPage.vue (95%) create mode 100644 src/pages/public/pilotProfile/FlightsListPage.vue diff --git a/src/components/event/EventsList.vue b/src/components/event/EventsList.vue index b518bf3..19dac40 100644 --- a/src/components/event/EventsList.vue +++ b/src/components/event/EventsList.vue @@ -5,7 +5,12 @@ const props = defineProps({ items: { type: Array, required: true - } + }, + routeDetail: { + type: Object, + required: false, + default: () => ({name: 'eventDetail', params: {}}) + }, }); const getCoverPhotos = (item) => item.flights.filter(f => !!f.coverPhoto).map(f => f.coverPhoto.thumbnailUrl); @@ -15,7 +20,7 @@ const getCoverPhotos = (item) => item.flights.filter(f => !!f.coverPhoto).map(f diff --git a/src/components/navigation/PublicFlightEventSwitcher.vue b/src/components/navigation/PublicFlightEventSwitcher.vue new file mode 100644 index 0000000..fb0518e --- /dev/null +++ b/src/components/navigation/PublicFlightEventSwitcher.vue @@ -0,0 +1,15 @@ + + + diff --git a/src/composables/objects/event.js b/src/composables/objects/event.js index fd8b43c..cb3aa8c 100644 --- a/src/composables/objects/event.js +++ b/src/composables/objects/event.js @@ -18,9 +18,9 @@ export const fetchEvent = (eventId, username) => { export const events = storeToRefs(useEventsStore()).items; -export const fetchEvents = () => { +export const fetchEvents = (username) => { loading.value = true; - useEventsStore().fetch().finally(() => { + useEventsStore().fetch(username).finally(() => { loading.value = false; }); }; diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss index 44d35d4..0c57e61 100644 --- a/src/css/quasar.variables.scss +++ b/src/css/quasar.variables.scss @@ -12,7 +12,7 @@ // to match your app's branding. // Tip: Use the "Theme Builder" on Quasar's documentation website. -$primary : #71bbde; //#1976D2; +$primary : #87c8ec; //#1976D2; $secondary : #26A69A; $accent : #9C27B0; diff --git a/src/graphql/queries/event.js b/src/graphql/queries/event.js index a53443e..6ecddee 100644 --- a/src/graphql/queries/event.js +++ b/src/graphql/queries/event.js @@ -3,8 +3,8 @@ import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list"; import {FRAGMENT_EVENT_FULL_INFO, FRAGMENT_EVENT_LIST_INFO} from "src/graphql/fragments/event"; export const EVENTS_LIST = gql` -query eventsList { - events { +query eventsList($username: String) { + events(username: $username) { ...eventListInfo flights { @@ -19,8 +19,8 @@ ${FRAGMENT_EVENT_LIST_INFO} `; export const EVENT_DETAIL = gql` -query event($id: Int!) { - event(id: $id) { +query event($id: Int!, $username: String) { + event(id: $id, username: $username) { ...eventFullInfo flights { diff --git a/src/pages/public/PilotProfilePage.vue b/src/pages/public/PilotProfilePage.vue index 2e6ae70..5e137d5 100644 --- a/src/pages/public/PilotProfilePage.vue +++ b/src/pages/public/PilotProfilePage.vue @@ -1,11 +1,7 @@ - - - diff --git a/src/pages/public/pilotProfile/FlightsListPage.vue b/src/pages/public/pilotProfile/FlightsListPage.vue new file mode 100644 index 0000000..c444723 --- /dev/null +++ b/src/pages/public/pilotProfile/FlightsListPage.vue @@ -0,0 +1,52 @@ + + + diff --git a/src/router/routes.js b/src/router/routes.js index 58b103b..d2b0e15 100644 --- a/src/router/routes.js +++ b/src/router/routes.js @@ -12,8 +12,17 @@ const routes = [ component: () => import('layouts/PublicLayout.vue'), children: [ {path: 'about', name: "about", component: () => import('pages/public/AboutPage.vue')}, - {path: ':username', name: "publicProfileDetail", component: () => import('pages/public/PilotProfilePage.vue')}, - {path: ':username/:id', name: "publicFlightDetail", component: () => import('pages/public/FlightDetailPage.vue')}, + { + path: ':username', + component: () => import('pages/public/PilotProfilePage.vue'), + children: [ + {path: '', name: "publicProfileDetail", component: () => import('pages/public/pilotProfile/FlightsListPage.vue')}, + {path: ':id', name: "publicFlightDetail", component: () => import('pages/public/pilotProfile/FlightDetailPage.vue')}, + {path: 'udalosti', name: "publicEventsList", component: () => import('pages/public/pilotProfile/EventsListPage.vue')}, + {path: 'udalosti/:id', name: "publicEventDetail", component: () => import('pages/public/pilotProfile/EventDetailPage.vue')}, + ] + }, + ] }, { diff --git a/src/stores/Events.js b/src/stores/Events.js index 76692f7..e56bfbd 100644 --- a/src/stores/Events.js +++ b/src/stores/Events.js @@ -11,11 +11,11 @@ export const useEventsStore = defineStore('Events', { }), actions: { - fetchDetail(eventId) { - return apolloWrapper.query(EVENT_DETAIL, {id: eventId}).then(({data}) => data.event); + fetchDetail(eventId, username) { + return apolloWrapper.query(EVENT_DETAIL, {id: eventId, username: username}).then(({data}) => data.event); }, - fetch() { - return apolloWrapper.query(EVENTS_LIST).then(result => { + fetch(username) { + return apolloWrapper.query(EVENTS_LIST, {username}).then(result => { this.items = result.data.events; return result.data.events; });