From 08a3cbf3d9495eadf8fe61ee5a18c5bf75eeec60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Sat, 20 Jan 2024 22:08:49 +0100
Subject: [PATCH] Avatar do admina, pridani debrief informaci

---
 src/components/AppFooter.vue                  | 51 ++++++++++++-------
 .../flights/form/FlightFormNotes.vue          | 32 +++++++++---
 src/components/inputs/PublishButton.vue       |  1 -
 src/components/inputs/RichTextEditor.vue      |  9 +++-
 .../navigation/BreadcrumbsSkeleton.vue        |  4 +-
 src/components/profile/PublicProfileInfo.vue  | 32 ++++++------
 src/css/app.scss                              |  6 +++
 src/graphql/fragments/flight.js               | 24 +++++----
 src/layouts/ProfileLayout.vue                 | 36 ++++++++++++-
 src/pages/profile/ProfileRefreshPage.vue      | 11 ++--
 src/pages/profile/flight/FlightDetailPage.vue |  6 +++
 src/pages/public/PilotProfileWrapper.vue      |  7 +--
 12 files changed, 145 insertions(+), 74 deletions(-)

diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
index 1d8cabc..cf11122 100644
--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -9,40 +9,53 @@ const year = ref(date.getFullYear());
   <q-footer class="q-pa-lg q-mt-xl">
     <div class="row justify-center">
 
-      <div class="col-4 text-center">
-        <q-img fit="contain" width="32px" src="/icons/favicon-32x32.png" />
+      <div class="col-xs-12 col-md-4 text-center q-py-lg" style="font-size: 130%">
+        <q-img fit="contain" width="32px" src="/icons/favicon-32x32.png"/>
 
         <div class="text-h5">Polétání.cz</div>
-        Vytvořeno s &hearts; nejen pro létání.
+        Vytvořeno s <q-icon name="favorite" color="red"/> nejen pro létání.
       </div>
-      <div class="col-2">
+      <div class="col-xs-6 col-md-2">
         <q-list>
-          <q-item><router-link :to="{name: 'about'}">O projektu</router-link></q-item>
-          <q-item><router-link :to="{name: 'contact'}">Kontakt</router-link></q-item>
-          <q-item><router-link :to="{name: 'features'}">Funkce</router-link></q-item>
+          <q-item>
+            <router-link :to="{name: 'about'}">O projektu</router-link>
+          </q-item>
+          <q-item>
+            <router-link :to="{name: 'contact'}">Kontakt</router-link>
+          </q-item>
+          <q-item>
+            <router-link :to="{name: 'features'}">Funkce</router-link>
+          </q-item>
         </q-list>
       </div>
-      <div class="col-2">
+      <div class="col-xs-6 col-md-2">
         <q-list>
-          <q-item><router-link :to="{name: 'login'}">Login</router-link></q-item>
-          <q-item><router-link :to="{name: 'registration'}">Registrace</router-link></q-item>
-          <q-item><router-link :to="{name: 'forgottenPassword'}">Zapomenuté heslo</router-link></q-item>
+          <q-item>
+            <router-link :to="{name: 'login'}">Login</router-link>
+          </q-item>
+          <q-item>
+            <router-link :to="{name: 'registration'}">Registrace</router-link>
+          </q-item>
+          <q-item>
+            <router-link :to="{name: 'forgottenPassword'}">Zapomenuté heslo</router-link>
+          </q-item>
         </q-list>
       </div>
-      <div class="col-2">
+      <div class="col-xs-12 col-md-2">
         <q-list>
-          <q-item><router-link :to="{name: 'termsAndConditions'}">Podmínky použití</router-link></q-item>
-          <q-item><router-link :to="{name: 'personalInformation'}">Správa osobních údajů</router-link></q-item>
+          <q-item>
+            <router-link :to="{name: 'termsAndConditions'}">Podmínky použití</router-link>
+          </q-item>
+          <q-item>
+            <router-link :to="{name: 'personalInformation'}">Správa osobních údajů</router-link>
+          </q-item>
         </q-list>
       </div>
-<!--      <div class="col">-->
-<!--        &copy; 2023 Polétání.cz-->
-<!--      </div>-->
     </div>
     <div class="row q-mt-lg">
       <div class="col text-center">
-      &copy; {{ year }} Polétání.cz
-        </div>
+        &copy; {{ year }} Polétání.cz
+      </div>
     </div>
   </q-footer>
 </template>
diff --git a/src/components/flights/form/FlightFormNotes.vue b/src/components/flights/form/FlightFormNotes.vue
index 70d8095..abc5328 100644
--- a/src/components/flights/form/FlightFormNotes.vue
+++ b/src/components/flights/form/FlightFormNotes.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {reactive, watch} from "vue";
+import {reactive, ref, watch} from "vue";
 import FormWrapper from "components/FormWrapper.vue";
 import {setDefaultData} from "src/composables/form/formHandling";
 import RichTextEditor from "components/inputs/RichTextEditor.vue";
@@ -19,16 +19,17 @@ const props = defineProps({
     required: false,
   },
   isRequestPending: {
-  type: Boolean,
-  required: false,
-  default: false,
-}
+    type: Boolean,
+    required: false,
+    default: false,
+  }
 });
 
 const formData = reactive({
   name: "",
   event: null,
   description: "",
+  debriefingNotes: "",
   urlSlug: "",
   isPublic: null
 })
@@ -46,12 +47,13 @@ watch(() => props.flight, (newVal) => {
   }
 }, {immediate: true});
 
+const descriptionTab = ref("description");
 </script>
 
 <template>
   <FormWrapper v-model="formData" :is-request-pending="props.isRequestPending">
     <ComboboxInput :options="events" v-if="events" v-model="formData.event" label="Událost" v-bind="commonProps"/>
-    <q-input type="text" v-model="formData.name" label="Jméno letu" v-bind="commonProps" />
+    <q-input type="text" v-model="formData.name" label="Jméno letu" v-bind="commonProps"/>
     <template v-if="loggedUser?.publicUsername">
       <SlugInput
         v-if="formData.isPublic"
@@ -63,6 +65,22 @@ watch(() => props.flight, (newVal) => {
       />
       <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
     </template>
-    <RichTextEditor v-model="formData.description" v-bind="commonProps" label="Popis letu, poznámky, ..."/>
+
+    <q-tabs v-model="descriptionTab" active-color="primary">
+      <q-tab name="description">Popis</q-tab>
+      <q-tab name="debriefing">Debriefing (soukromé poznámky)</q-tab>
+    </q-tabs>
+    <q-tab-panels  v-model="descriptionTab">
+      <q-tab-panel name="description">
+
+
+
+        <RichTextEditor v-model="formData.description" v-bind="commonProps" height="30vh"/>
+      </q-tab-panel>
+      <q-tab-panel name="debriefing">
+
+        <RichTextEditor v-model="formData.debriefingNotes" v-bind="commonProps" height="20vh"/>
+      </q-tab-panel>
+    </q-tab-panels>
   </FormWrapper>
 </template>
diff --git a/src/components/inputs/PublishButton.vue b/src/components/inputs/PublishButton.vue
index 624b3c0..27b0ff8 100644
--- a/src/components/inputs/PublishButton.vue
+++ b/src/components/inputs/PublishButton.vue
@@ -46,7 +46,6 @@ const inputPrompt = () =>
 const togglePublicVisibility = () => {
   if (props.requireUrlSlug && !props.isPublic) {
     inputPrompt().onOk((data) => {
-      console.log(data, urlSlugModel.value);
       emits("changeVisibility", {isPublic: !props.isPublic, urlSlug: slugify(urlSlugModel.value)});
     })
   } else {
diff --git a/src/components/inputs/RichTextEditor.vue b/src/components/inputs/RichTextEditor.vue
index 775f49e..ef176e1 100644
--- a/src/components/inputs/RichTextEditor.vue
+++ b/src/components/inputs/RichTextEditor.vue
@@ -56,5 +56,12 @@ const toolbar = [
 </script>
 
 <template>
-  <q-editor v-model="content" :definitions="definitions" :toolbar="toolbar" :height="height" :label="label" :rules="rules"/>
+  <q-editor
+    v-model="content"
+    :definitions="definitions"
+    :toolbar="toolbar"
+    :height="height"
+    v-bind="$attrs"
+    :rules="rules"
+  />
 </template>
diff --git a/src/components/navigation/BreadcrumbsSkeleton.vue b/src/components/navigation/BreadcrumbsSkeleton.vue
index e972e02..4b3458e 100644
--- a/src/components/navigation/BreadcrumbsSkeleton.vue
+++ b/src/components/navigation/BreadcrumbsSkeleton.vue
@@ -6,8 +6,8 @@ import {randomInt} from "src/composables/random";
 <template>
 
   <q-breadcrumbs class="q-mx-md q-my-md">
-    <q-breadcrumbs-el> <q-skeleton :width="`${randomInt(30, 60)}px`" type="rect" /> </q-breadcrumbs-el>
-    <q-breadcrumbs-el> <q-skeleton :width="`${randomInt(40, 80)}px`" type="rect" /> </q-breadcrumbs-el>
+    <q-breadcrumbs-el> <q-skeleton :width="`${randomInt(100, 190)}px`" type="rect" /> </q-breadcrumbs-el>
+    <q-breadcrumbs-el> <q-skeleton :width="`${randomInt(200, 280)}px`" type="rect" /> </q-breadcrumbs-el>
   </q-breadcrumbs>
 
 
diff --git a/src/components/profile/PublicProfileInfo.vue b/src/components/profile/PublicProfileInfo.vue
index 13bd94a..66e80ac 100644
--- a/src/components/profile/PublicProfileInfo.vue
+++ b/src/components/profile/PublicProfileInfo.vue
@@ -6,6 +6,8 @@ import {commonProps} from "src/composables/inputs";
 import RichTextEditor from "components/inputs/RichTextEditor.vue";
 import FormWrapper from "components/FormWrapper.vue";
 import {setDefaultData} from "src/composables/form/formHandling";
+import {slugify} from "src/composables/slugify";
+import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 
 const props = defineProps({
   user: {
@@ -13,12 +15,11 @@ const props = defineProps({
     required: false,
     default: null
   },
-    isRequestPending: {
-  type: Boolean,
-  required: false,
-  default: false,
-}
-
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
+  }
 })
 
 const formData = reactive({
@@ -29,22 +30,19 @@ const formData = reactive({
 watch(() => props.user, (newVal) => {
   setDefaultData(formData, props.user)
 }, {immediate: true});
+
+watch(() => formData.publicUsername, (newVal) => {
+  formData.publicUsername = slugify(newVal);
+}, {immediate: true})
+
 </script>
 
 <template>
   <FormWrapper v-model="formData" :is-request-pending="props.isRequestPending">
 
-    <q-list>
-      <q-item v-if="user.publicUsername">
-        <router-link target="_blank" :to="{name: 'publicProfileDetail', params: {username: user.publicUsername}}">
-          @{{ user.publicUsername }}
-        </router-link>
-      </q-item>
-      <q-item v-else>
-        <q-icon name="" color="red"/>
-        Nastav si veřejné uživatelské jméno pro zpřístupnění profilu a sdílení záznamů s ostatními
-      </q-item>
-    </q-list>
+    <BasicInfoBanner style="padding: 0 !important" v-if="formData.publicUsername === ''">
+      Nastav si veřejné uživatelské jméno pro zpřístupnění profilu a sdílení záznamů s ostatními
+    </BasicInfoBanner>
 
     <q-input v-model="formData.name" label="Jméno" v-bind="commonProps"/>
     <q-input
diff --git a/src/css/app.scss b/src/css/app.scss
index 80ea12e..7204024 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -6,3 +6,9 @@
   margin-left: auto;
   margin-right: auto;
 }
+
+.q-tab-panel {
+  @media (max-width: $breakpoint-sm) {
+    padding: 0;
+  }
+}
diff --git a/src/graphql/fragments/flight.js b/src/graphql/fragments/flight.js
index a771477..4756707 100644
--- a/src/graphql/fragments/flight.js
+++ b/src/graphql/fragments/flight.js
@@ -103,21 +103,23 @@ ${FRAGMENT_WEATHER_FULL_INFO}
 export const FRAGMENT_FLIGHT_FULL_PRIVATE_INFO = gql`
 fragment flightFullPrivateInfo on Flight {
     ...flightFullInfo
+    debriefingNotes
+
     photos {
-        ...photoFullInfo
+      ...photoFullInfo
 
-        pointOfInterest {
-            id
-            name
-        }
-
-        copilots {
-            id
-            name
-        }
+      pointOfInterest {
+          id
+          name
       }
+
+      copilots {
+          id
+          name
+      }
+    }
 }
 
 ${FRAGMENT_FLIGHT_FULL_INFO}
 ${FRAGMENT_PHOTO_FULL_INFO}
-    `;
+`;
diff --git a/src/layouts/ProfileLayout.vue b/src/layouts/ProfileLayout.vue
index ef4eb05..43ecb8b 100644
--- a/src/layouts/ProfileLayout.vue
+++ b/src/layouts/ProfileLayout.vue
@@ -25,8 +25,39 @@
       show-if-above
       bordered
     >
-      <q-img class="absolute-top" v-if="!isQueryRunning && user" :src="user.titleImageUrl" style="height: 150px"/>
-      <q-spinner v-else/>
+      <q-img
+        fit="cover"
+        class="absolute-top"
+        v-if="!isQueryRunning && user"
+        :src="user.titleImageUrl"
+        style="height: 150px"
+      >
+        <div class="bg-transparent absolute-bottom-right" v-if="user.publicUsername !== ''">
+          <router-link
+            v-if="user.avatarImageUrl"
+            target="_blank"
+            :to="{name: 'publicProfileDetail', params: {username: user.publicUsername}}"
+          >
+            <AvatarFromPhoto
+              class="shadow-9"
+              :size="40"
+              :src="user.avatarImageUrl"
+            />
+          </router-link>
+          <q-btn
+            v-else
+            color="blue-1"
+            text-color="blue-9"
+            target="_blank"
+            :to="{name: 'publicProfileDetail', params: {username: user.publicUsername}}"
+          >
+            @{{ user.publicUsername }}
+          </q-btn>
+        </div>
+      </q-img>
+      <div class="absolute-top text-center bg-grey-2" style="padding-top: 40px; height: 150px;" v-else>
+        <q-spinner size="64px" color="grey-5"/>
+      </div>
 
       <q-scroll-area style="height: calc(100% - 150px); margin-top: 150px; border-right: 1px solid #ddd">
         <SidebarNavigation/>
@@ -66,6 +97,7 @@ import {successObject} from "src/composables/dialog";
 import SidebarNavigation from "components/navigation/SidebarNavigation.vue";
 import TopMenuButton from "components/navigation/TopMenuButton.vue";
 import {metaData} from "src/composables/meta";
+import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
 
 const $q = useQuasar();
 const $router = useRouter();
diff --git a/src/pages/profile/ProfileRefreshPage.vue b/src/pages/profile/ProfileRefreshPage.vue
index dc70a15..ba70007 100644
--- a/src/pages/profile/ProfileRefreshPage.vue
+++ b/src/pages/profile/ProfileRefreshPage.vue
@@ -1,27 +1,23 @@
 <script setup>
-
 import {useRoute, useRouter} from "vue-router";
 import {computed, onMounted, ref} from "vue";
-import {useLoggedUserStore} from "stores/LoggedUser";
 import {useAuthStore} from "stores/Auth";
 
 const $route = useRoute();
 const $router = useRouter();
 
 const url = computed(() => $route.query.url || '/moje');
-
 const showLoginInfo = ref(false);
 
 onMounted(() => {
-  console.log(useAuthStore().getAccessToken());
   useAuthStore().refreshAccessToken().then(() => {
-    $router.push($route.query.url)
+    $router.push(url.value)
   }).catch(e => {
     $router.push({name: "login"})
   });
 
   setTimeout(() => showLoginInfo.value = true, 1000);
-  setTimeout(() => $router.push(url), 10000);
+  setTimeout(() => $router.push(url.value), 10000);
 });
 
 </script>
@@ -29,7 +25,7 @@ onMounted(() => {
 <template>
 
   <div class="row justify-center">
-    <div class="col-4">
+    <div class="col-sm-12 col-4">
       <transition
         v-if="showLoginInfo"
         appear
@@ -42,7 +38,6 @@ onMounted(() => {
             <br>
             <p class="q-my-lg">
               Probíhá přihlašování. Za okamžik dojde k přesměrování. Pokud se tak nestane, klikni na tlačítko
-
             </p>
           </q-card-section>
           <q-card-actions>
diff --git a/src/pages/profile/flight/FlightDetailPage.vue b/src/pages/profile/flight/FlightDetailPage.vue
index ecbf1de..63111a8 100644
--- a/src/pages/profile/flight/FlightDetailPage.vue
+++ b/src/pages/profile/flight/FlightDetailPage.vue
@@ -107,6 +107,12 @@ const togglePublicVisibility = (variables) => toggleVisibility({
 
         <q-separator/>
 
+        <article class="q-my-lg" v-html="flight.debriefingNotes"/>
+        <BasicInfoBanner v-if="flight.debriegingNotes === ''">
+          Nezapomeň si poznamenat důležité informace pro debriefing. Tyto poznámky slouží jen pro tebe.
+        </BasicInfoBanner>
+        <q-separator/>
+
         <ContentCardEditButton
           :to="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
           label="Upravit fotografie"
diff --git a/src/pages/public/PilotProfileWrapper.vue b/src/pages/public/PilotProfileWrapper.vue
index 93d5c6b..3ac189c 100644
--- a/src/pages/public/PilotProfileWrapper.vue
+++ b/src/pages/public/PilotProfileWrapper.vue
@@ -1,12 +1,9 @@
 <script>
 import {usePilotsStore} from "stores/Pilots";
-import {useAppStore} from "stores/App";
 
 export default {
   preFetch({store, currentRoute}) {
-    return usePilotsStore(store).fetchPublicPilotDetail(currentRoute.params.username).catch(e => {
-      useAppStore().appStatus = 404;
-    });
+    return usePilotsStore(store).fetchPublicPilotDetail(currentRoute.params.username).catch(e => {});
   },
 }
 </script>
@@ -16,8 +13,6 @@ import {storeToRefs} from "pinia";
 import PilotProfileCard from "components/profile/PilotProfileCard.vue";
 import PublicProfileSkeleton from "components/profile/skeletons/PublicProfileSkeleton.vue";
 
-console.log("pilot profile wrapper");
-
 const {pilot, isQueryRunning: pilotLoading} = storeToRefs(usePilotsStore());
 </script>