Homepage, verejna cast, vetsi sada uprav a oprav

src/pages/public/PilotProfilePage.vue

@@ -1,48 +1,38 @@
 <script setup>
 import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
-import {useAppStore} from "stores/App";
-import {onMounted, ref} from "vue";
-import {useUserStore} from "stores/User";
+import {onMounted} from "vue";
 import {useRoute} from "vue-router";
-import {useFlightsStore} from "stores/Flights";
-import {storeToRefs} from "pinia";
 import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
 import FlightsList from "components/flights/FlightsList.vue";
 import AvatarFromPhoto from "components/AvatarFromPhoto.vue";
+import {fetchFlights, flights, loading as flightsLoading} 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";
+import {useUserStore} from "stores/User";
+import {useAppStore} from "stores/App";
+import PilotProfileCard from "components/profile/PilotProfileCard.vue";
 
-const props = defineProps({
-  loggedUser: {
-    type: Object,
-    required: false
-  }
-})
-
+const loggedUser = storeToRefs(useUserStore()).user;
 const username = useRoute().params.username;
-const pilot = ref(null)
-const loading = ref(true);
-
 onMounted(() => {
-  loading.value = true;
-  useUserStore().fetchDetail(username).then((user) => {
-    pilot.value = user;
-    useAppStore().setPageTitle(pilot.value.name);
-  }).finally(() => {
-    loading.value = false
-  });
-
-  useFlightsStore().fetch(username);
+  fetchUser(username).then(user => {
+    useAppStore().setPageTitle(user.publicUsername);
+    useAppStore().setBreadcrumbs([
+      {to: {name: 'homepage'}, label: "Polétání.cz"},
+      {label: `@${user.publicUsername}`},
+    ])
+  })
+  fetchFlights(username);
 })
-
-const flights = storeToRefs(useFlightsStore()).items;
-
 </script>
 
 <template>
-  <FlightsListSkeleton v-if="loading || !pilot"/>
+  <div class="row">
+    <div class="col-12 col-md-8">
+      <FlightsListSkeleton v-if="flightsLoading"/>
 
-  <div class="row" v-else>
-    <div class="col">
-      <q-banner class="bg-primary text-white" v-if="flights.length === 0">
+      <q-banner class="bg-primary text-white" v-else-if="!flightsLoading && flights.length === 0">
         Tento pilot zatím nepublikoval žádný let.
       </q-banner>
 
@@ -54,23 +44,10 @@ const flights = storeToRefs(useFlightsStore()).items;
         />
       </template>
     </div>
-    <div class="col-4 sm-hide">
-      <q-card class="q-mr-md" flat>
-        <q-img :src="pilot.titleImageUrl" v-if="pilot.titleImageUrl"/>
-        <q-card-section>
-          <div class="text-center" :style="`margin-top: ${pilot.titleImageUrl ? '-100' : '0'}px`">
-            <AvatarFromPhoto :size="150" :src="pilot.avatarImageUrl" v-if="pilot.avatarImageUrl" class="q-mb-sm"/>
-            <div class="text-h3">{{ pilot.name }}</div>
-            <div class="text-subtitle1 text-weight-thin">
-            Registrován: {{ formatDatetime(pilot.createdAt, FORMAT_DATE) }}
-          </div>
-          </div>
+    <div class="col-12 col-md-4">
+      <PublicProfileSkeleton v-if="pilotLoading"/>
 
-
-
-          <div class="q-my-lg" v-html="pilot.description"/>
-        </q-card-section>
-      </q-card>
+      <PilotProfileCard v-else :pilot="pilot" />
     </div>
 
   </div>