Refaktoring verejneho profilu, pridani zobrazeni udalosti

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
   <q-list bordered separator>
     <q-item
       clickable
-      :to="{name: 'eventDetail', params: {id: event.id }}"
+      :to="{name: routeDetail.name, params: {...routeDetail.params, id: event.id}}"
       v-ripple
       v-for="event of items" :key="event"
     >

src/components/navigation/PublicFlightEventSwitcher.vue

@@ -0,0 +1,15 @@
+<script setup>
+const props = defineProps({
+  username: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <q-tabs class="q-mb-md">
+    <q-route-tab icon="flight_takeoff" :to="{name: 'publicProfileDetail', params: {username: username}}">Lety</q-route-tab>
+    <q-route-tab icon="event" :to="{name: 'publicEventsList', params: {username: username}}">Události</q-route-tab>
+  </q-tabs>
+</template>

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;
   });
 };

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;
 

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 {

src/pages/public/PilotProfilePage.vue

@@ -1,11 +1,7 @@
 <script setup>
-import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
 import {onMounted} from "vue";
 import {useRoute} from "vue-router";
-import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
-import FlightsList from "components/flights/FlightsList.vue";
-import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
-import {fetchFlights, flights, loading as flightsLoading} from "src/composables/objects/flight";
+import {fetchFlights} from "src/composables/objects/flight";
 import {fetchUser, user as pilot, loading as pilotLoading} from "src/composables/objects/user";
 import PublicProfileSkeleton from "components/profile/PublicProfileSkeleton.vue";
 import {storeToRefs} from "pinia";
@@ -15,40 +11,16 @@ import PilotProfileCard from "components/profile/PilotProfileCard.vue";
 
 const loggedUser = storeToRefs(useUserStore()).user;
 const username = useRoute().params.username;
-onMounted(() => {
-  fetchUser(username).then(user => {
-    useAppStore().setPageTitle(user.publicUsername);
-    useAppStore().setBreadcrumbs([
-      {to: {name: 'homepage'}, label: "Polétání.cz"},
-      {label: `@${user.publicUsername}`},
-    ])
-  })
-  fetchFlights(username);
-})
 </script>
 
 <template>
   <div class="row">
     <div class="col-12 col-md-8">
-      <FlightsListSkeleton v-if="flightsLoading"/>
-
-      <q-banner class="bg-primary text-white" v-else-if="!flightsLoading && flights.length === 0">
-        Tento pilot zatím nepublikoval žádný let.
-      </q-banner>
-
-      <template v-else>
-        <FlightsList
-          :items="flights"
-          :displayVisibilityInfo="loggedUser.id === pilot.id"
-          :route-detail="{name: 'publicFlightDetail', params: {username: username}}"
-          class="q-mb-md"
-        />
-      </template>
+      <router-view :logged-user="loggedUser" :username="username"/>
     </div>
     <div class="col-12 col-md-4">
       <PublicProfileSkeleton v-if="pilotLoading"/>
-
-      <PilotProfileCard v-else :pilot="pilot" />
+      <PilotProfileCard v-else :pilot="pilot"/>
     </div>
 
   </div>

src/pages/public/pilotProfile/EventDetailPage.vue

@@ -0,0 +1,74 @@
+<script setup>
+import {onMounted, watch} from "vue";
+import {event, fetchEvent, loading} from "src/composables/objects/event";
+import {useRoute} from "vue-router";
+import {useAppStore} from "stores/App";
+import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
+import {fetchUser, loading as pilotLoading, user as pilot} from "src/composables/objects/user";
+import PublicProfileSkeleton from "components/profile/PublicProfileSkeleton.vue";
+import PilotProfileCard from "components/profile/PilotProfileCard.vue";
+import EventDetailSkeleton from "components/event/EventDetailSkeleton.vue";
+import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
+import FAB from "components/FAB.vue";
+import FlightsList from "components/flights/FlightsList.vue";
+
+const routeParams = useRoute().params;
+onMounted(() => {
+  fetchEvent(routeParams.id, routeParams.username);
+  fetchUser(routeParams.username)
+})
+
+watch(event, (newVal) => {
+  // const eventNameFormatted = eventName(newVal);
+  useAppStore().setPageTitle(newVal.name);
+  useAppStore().setBreadcrumbs([
+    {to: {name: 'homepage'}, label: "Polétání.cz"},
+    {to: {name: "publicProfileDetail", params: {username: routeParams.username}}, label: `@${routeParams.username}`},
+    {to: {name: "publicEventsList", params: {username: routeParams.username}}, label: "Události"},
+    {label: newVal.name}
+  ]);
+});
+
+</script>
+
+<template>
+  <div>
+    <EventDetailSkeleton v-if="loading || !event"/>
+
+
+    <template v-else>
+      <q-banner class="bg-warning text-white q-mx-md q-my-md" v-if="!event.isPublic">
+        Pozor! Tento event není publikován a nebude tak dostupný pro ostatní!
+      </q-banner>
+
+
+      <q-list bordered separator class="q-my-lg" v-if="event.dateFrom && event.dateTo">
+        <q-item>
+          <q-item-section>
+            Od: {{ formatDatetime(event.dateFrom, FORMAT_DATE) }}
+          </q-item-section>
+        </q-item>
+
+        <q-item>
+          <q-item-section>
+            Do: {{ formatDatetime(event.dateTo, FORMAT_DATE) }}
+          </q-item-section>
+        </q-item>
+      </q-list>
+
+      <article v-html="event.description"/>
+      <h3>Lety</h3>
+
+      <q-banner v-if="event.flights.length === 0" class="bg-light-blue text-white">
+        Zatím tu nemáš uložené žádné lety.
+      </q-banner>
+
+      <FlightsList
+        v-else
+        :items="event.flights"
+        :route-detail="{name: 'publicFlightDetail', params: {username: routeParams.username}}"
+      />
+
+    </template>
+  </div>
+</template>

src/pages/public/pilotProfile/EventsListPage.vue

@@ -0,0 +1,55 @@
+<script setup>
+import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
+import {event, events, fetchEvents, loading} from "src/composables/objects/event";
+import EventsList from "components/event/EventsList.vue";
+import {onMounted, watch} from "vue";
+import PublicFlightEventSwitcher from "components/navigation/PublicFlightEventSwitcher.vue";
+import {useAppStore} from "stores/App";
+
+const props = defineProps({
+  loggedUser: {
+    type: Object,
+    required: false
+  },
+  username: {
+    type: String,
+    required: true
+  }
+});
+
+watch(() => props.username, () => {
+}, {immediate: true});
+
+onMounted(() => {
+    // const eventNameFormatted = eventName(newVal);
+    useAppStore().setPageTitle(`${props.username}`);
+    useAppStore().setBreadcrumbs([
+      {to: {name: 'homepage'}, label: "Polétání.cz"},
+      {to: {name: "publicProfileDetail", params: {username: props.username}}, label: `@${props.username}`},
+      {label: "Události"}
+    ]);
+    fetchEvents(props.username);
+  }
+);
+
+
+</script>
+
+<template>
+  <PublicFlightEventSwitcher :username="username"/>
+
+  <FlightsListSkeleton v-if="loading"/>
+
+
+  <q-banner class="bg-primary text-white" v-else-if="!loading && events.length === 0">
+    Tento pilot zatím nepublikoval žádnou udalost.
+  </q-banner>
+
+  <template v-else>
+    <EventsList
+      :items="events"
+      :route-detail="{name: 'publicEventDetail', params: {username: username}}"
+      class="q-mb-md"
+    />
+  </template>
+</template>

src/pages/public/pilotProfile/FlightDetailPage.vue

@@ -53,8 +53,5 @@ watch(flight, (newVal) => {
         </q-card-section>
       </q-card>
       </template>
-
-    <PublicProfileSkeleton v-if="pilotLoading"/>
-    <PilotProfileCard :pilot="pilot" v-else />
   </div>
 </template>

src/pages/public/pilotProfile/FlightsListPage.vue

@@ -0,0 +1,52 @@
+<script setup>
+import {fetchFlights, flights, loading as flightsLoading} from "src/composables/objects/flight";
+import {fetchUser, user as pilot} from "src/composables/objects/user";
+import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
+import FlightsList from "components/flights/FlightsList.vue";
+import PublicFlightEventSwitcher from "components/navigation/PublicFlightEventSwitcher.vue";
+import {onMounted} from "vue";
+import {useAppStore} from "stores/App";
+
+const props = defineProps({
+  loggedUser: {
+    type: Object,
+    required: false
+  },
+
+  username: {
+    type: String,
+    required: true
+  }
+});
+
+// TODO: onmounted presunout do child komponent, stejne jako fetch dat
+onMounted(() => {
+  fetchUser(props.username).then(user => {
+    useAppStore().setPageTitle(user.publicUsername);
+    useAppStore().setBreadcrumbs([
+      {to: {name: 'homepage'}, label: "Polétání.cz"},
+      {label: `@${user.publicUsername}`},
+    ])
+  })
+  fetchFlights(props.username);
+})
+</script>
+
+<template>
+  <PublicFlightEventSwitcher :username="username" />
+
+  <FlightsListSkeleton v-if="flightsLoading"/>
+
+  <q-banner class="bg-primary text-white" v-else-if="!flightsLoading && flights.length === 0">
+    Tento pilot zatím nepublikoval žádný let.
+  </q-banner>
+
+  <template v-else>
+    <FlightsList
+      :items="flights"
+      :displayVisibilityInfo="loggedUser.id === pilot.id"
+      :route-detail="{name: 'publicFlightDetail', params: {username: username}}"
+      class="q-mb-md"
+    />
+  </template>
+</template>

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')},
+        ]
+      },
+
     ]
   },
   {

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;
       });