From 6b1e220d424772b49b7088393c336f067b3da055 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Thu, 2 Nov 2023 09:03:12 +0100
Subject: [PATCH] Pridani stranky pro verejny prehled letu s danym kopilotem

---
 src/components/flights/FlightBasicInfo.vue    | 11 ++--
 src/composables/objects/copilot.js            |  4 +-
 src/pages/profile/flight/FlightDetailPage.vue |  5 +-
 src/pages/profile/flight/PhotoEditorPage.vue  |  7 ++-
 .../public/pilotProfile/CopilotDetailPage.vue | 53 +++++++++++++++++++
 .../public/pilotProfile/FlightDetailPage.vue  |  5 +-
 .../public/pilotProfile/FlightsListPage.vue   |  1 -
 src/router/routes.js                          |  1 +
 src/stores/Copilots.js                        |  4 +-
 9 files changed, 79 insertions(+), 12 deletions(-)
 create mode 100644 src/pages/public/pilotProfile/CopilotDetailPage.vue

diff --git a/src/components/flights/FlightBasicInfo.vue b/src/components/flights/FlightBasicInfo.vue
index f4ba2e2..65c83da 100644
--- a/src/components/flights/FlightBasicInfo.vue
+++ b/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>
diff --git a/src/composables/objects/copilot.js b/src/composables/objects/copilot.js
index 09f51b0..1bbb641 100644
--- a/src/composables/objects/copilot.js
+++ b/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;
diff --git a/src/pages/profile/flight/FlightDetailPage.vue b/src/pages/profile/flight/FlightDetailPage.vue
index 8fdcd06..f8d3f4b 100644
--- a/src/pages/profile/flight/FlightDetailPage.vue
+++ b/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>
diff --git a/src/pages/profile/flight/PhotoEditorPage.vue b/src/pages/profile/flight/PhotoEditorPage.vue
index d877f40..f65df63 100644
--- a/src/pages/profile/flight/PhotoEditorPage.vue
+++ b/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;
diff --git a/src/pages/public/pilotProfile/CopilotDetailPage.vue b/src/pages/public/pilotProfile/CopilotDetailPage.vue
new file mode 100644
index 0000000..6b4876b
--- /dev/null
+++ b/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>
diff --git a/src/pages/public/pilotProfile/FlightDetailPage.vue b/src/pages/public/pilotProfile/FlightDetailPage.vue
index 85162ea..f09d528 100644
--- a/src/pages/public/pilotProfile/FlightDetailPage.vue
+++ b/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"/>
 
diff --git a/src/pages/public/pilotProfile/FlightsListPage.vue b/src/pages/public/pilotProfile/FlightsListPage.vue
index c444723..4593670 100644
--- a/src/pages/public/pilotProfile/FlightsListPage.vue
+++ b/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);
diff --git a/src/router/routes.js b/src/router/routes.js
index 4c90f6b..63ac779 100644
--- a/src/router/routes.js
+++ b/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')},
         ]
diff --git a/src/stores/Copilots.js b/src/stores/Copilots.js
index d00da25..4d12e41 100644
--- a/src/stores/Copilots.js
+++ b/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 => {