Prvni naznak verejne casti, sprava profilu

src/pages/public/PilotProfilePage.vue

@@ -0,0 +1,73 @@
+<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 {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";
+
+const props = defineProps({
+  loggedUser: {
+    type: Object,
+    required: false
+  }
+})
+
+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);
+})
+
+const flights = storeToRefs(useFlightsStore()).items;
+
+</script>
+
+<template>
+  <FlightsListSkeleton v-if="loading || !pilot"/>
+  <div class="row" v-else>
+    <div class="col">
+      <q-banner class="bg-primary text-white" v-if="flights.length === 0">
+        Tento pilot zatím nepublikoval žádný let.
+      </q-banner>
+
+      <template v-else>
+        <h3>Lety</h3>
+
+      <FlightsList
+        :items="flights"
+        :displayVisibilityInfo="false"
+        :route-detail="{name: 'publicFlightDetail', params: {username: username}}"
+      />
+      </template>
+
+    </div>
+    <div class="col-4 sm-hide">
+      <div class="text-center">
+        <q-avatar size="150px">
+          <img :src="pilot.avatarImageUrl" alt="">
+        </q-avatar>
+      </div>
+
+      <h3>{{ pilot.name }}</h3>
+
+      <div class="q-my-lg" v-html="pilot.description"/>
+
+      Registrován: {{ formatDatetime(pilot.createdAt, FORMAT_DATE) }}
+    </div>
+
+  </div>
+</template>