Pridani stranky pro verejny prehled letu s danym kopilotem

src/components/flights/FlightBasicInfo.vue

@@ -8,10 +8,10 @@ const props = defineProps({
     type: Object,
     required: true
   },
-  showCopilots: {
-    type: Boolean,
+  copilotDetailRoute: {
+    type: Object,
     required: false,
-    default: false
+    default: null
   }
 })
 </script>
@@ -98,7 +98,10 @@ const props = defineProps({
             <q-icon name="people"/>
           </q-item-section>
           <q-item-section>
-            <router-link :to="{name: 'copilotDetail', params: {id: copilot.id}}" v-if="showCopilots">
+            <router-link
+              v-if="copilotDetailRoute"
+              :to="{name: copilotDetailRoute.name, params: {...copilotDetailRoute.params, id: copilot.id}}"
+            >
               {{ copilot.name }}
             </router-link>
             <template v-else> {{ copilot.name }}</template>

src/composables/objects/copilot.js

@@ -4,9 +4,9 @@ import {storeToRefs} from "pinia";
 
 export const loading = ref(true);
 export const copilot = ref(null);
-export const fetchCopilot = (copilotId) => {
+export const fetchCopilot = (copilotId, pilotUsername) => {
   loading.value = true;
-  return useCopilotsStore().fetchDetail(parseInt(copilotId))
+  return useCopilotsStore().fetchDetail(parseInt(copilotId), pilotUsername)
     .then(resp => {
       copilot.value = resp;
       return resp;

src/pages/profile/flight/FlightDetailPage.vue

@@ -108,7 +108,10 @@ const copyLinkToClipboard = () => {
       <div class="text-right">
         <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}" icon="edit" color="primary">Upravit informace</q-btn>
       </div>
-      <FlightBasicInfo :flight="flight" :show-copilots="true"/>
+      <FlightBasicInfo
+        :flight="flight"
+        :copilot-detail-route="{name: 'copilotDetail'}"
+      />
 
       <div class="text-right">
         <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'notes'}}" icon="edit" color="primary">Upravit text</q-btn>

src/pages/profile/flight/PhotoEditorPage.vue

@@ -41,7 +41,12 @@ watch(() => [adjustment.value, croppedAreaForPreview.value], debounce(() => {
 }, 200), {deep: true, immediate: true});
 
 const savePhotoAdjustment = (photoId) => {
-  const adjustmentInput = {...adjustment.value, crop: croppedArea.value};
+  const adjustmentInput = {...adjustment.value};
+
+  if (croppedArea.value.left !== null) {
+    adjustmentInput.crop = {...croppedArea.value}
+  }
+
   usePhotosStore().adjust(photoId, adjustmentInput).then((data) => {
     noCacheTimestamp.value = (new Date()).getTime();
     photo.value = data;

src/pages/public/pilotProfile/CopilotDetailPage.vue

@@ -0,0 +1,53 @@
+<script setup>
+import {useRoute} from "vue-router";
+import {copilot, fetchCopilot, loading as copilotLoading} from "src/composables/objects/copilot";
+import {fetchUser, user as pilot, loading as pilotLoading} from "src/composables/objects/user";
+import {onMounted} from "vue";
+import FlightsList from "components/flights/FlightsList.vue";
+import {useAppStore} from "stores/App";
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+
+const $route = useRoute();
+const copilotId = parseInt($route.params.id);
+
+const props = defineProps({
+  loggedUser: {
+    type: Object,
+    required: false
+  },
+
+  username: {
+    type: String,
+    required: true
+  }
+});
+
+
+onMounted(() => {
+  Promise.all([
+    fetchUser(props.username),
+    fetchCopilot(copilotId, props.username)
+  ]).then(() => {
+    useAppStore().setPageTitle(`${pilot.value.name} + ${copilot.value.name}`);
+    useAppStore().setBreadcrumbs([
+      {to: {name: 'homepage'}, label: "Polétání.cz"},
+      {to: {name: "publicProfileDetail", params: {username: props.username}}, label: `@${props.username}`},
+      {label: pilot.value.name}
+    ]);
+  });
+});
+
+</script>
+
+<template>
+  <BasicListSkeleton v-if="copilotLoading || pilotLoading" class="q-mb-md"/>
+
+  <template v-else>
+    <h3>Společné lety</h3>
+    <FlightsList
+      :items="copilot.flights"
+      :route-detail="{name: 'publicFlightDetail', params: {username: username}}"
+      class="q-mb-md"
+    />
+  </template>
+</template>

src/pages/public/pilotProfile/FlightDetailPage.vue

@@ -43,7 +43,10 @@ watch(flight, (newVal) => {
         </q-img>
 
         <q-card-section>
-          <FlightBasicInfo :flight="flight" :show-copilots="false"/>
+          <FlightBasicInfo
+            :flight="flight"
+            :copilot-detail-route="{name: 'publicCopilotDetail', params: {username: routeParams.username}}"
+          />
 
           <article class="q-my-lg" v-html="flight.description"/>
 

src/pages/public/pilotProfile/FlightsListPage.vue

@@ -19,7 +19,6 @@ const props = defineProps({
   }
 });
 
-// TODO: onmounted presunout do child komponent, stejne jako fetch dat
 onMounted(() => {
   fetchUser(props.username).then(user => {
     useAppStore().setPageTitle(user.publicUsername);

src/router/routes.js

@@ -18,6 +18,7 @@ const routes = [
         children: [
           {path: '', name: "publicProfileDetail", component: () => import('pages/public/pilotProfile/FlightsListPage.vue')},
           {path: ':id', name: "publicFlightDetail", component: () => import('pages/public/pilotProfile/FlightDetailPage.vue')},
+          {path: 'kopilot/:id', name: "publicCopilotDetail", component: () => import('pages/public/pilotProfile/CopilotDetailPage.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/Copilots.js

@@ -11,8 +11,8 @@ export const useCopilotsStore = defineStore('Copilots', {
   }),
 
   actions: {
-    fetchDetail(copilotId) {
-      return apolloWrapper.query(COPILOT_DETAIL, {id: copilotId}).then(({data}) => data.copilot);
+    fetchDetail(copilotId, pilotUsername) {
+      return apolloWrapper.query(COPILOT_DETAIL, {id: copilotId, pilotUsername: pilotUsername}).then(({data}) => data.copilot);
     },
     fetch() {
       return apolloWrapper.query(COPILOTS_LIST).then(result => {