Bugfixing a refaktoring

src/components/flights/form/FlightFormBasic.vue

@@ -35,10 +35,6 @@ const formData = reactive({
   landingAirport: null,
   takeoffDatetime: null,
   landingDatetime: null,
-  landings: 1,
-  isPublic: false,
-  name: "",
-  description: "",
 });
 
 const rules = {

src/components/navigation/NavigationButton.vue

@@ -1,6 +1,7 @@
 <template>
   <q-item
     clickable
+    :active="isButtonActive"
     tag="router-link"
     :to="to"
   >
@@ -19,6 +20,8 @@
 </template>
 
 <script setup>
+import {computed} from "vue";
+import {useRoute, useRouter} from "vue-router";
 
 const props = defineProps({
     title: {
@@ -40,5 +43,17 @@ const props = defineProps({
       type: String,
       default: ''
     }
-  })
+  });
+
+const $route = useRoute();
+const $router = useRouter();
+const isButtonActive = computed(() => {
+  const btnResolvedPath = $router.resolve(props.to).path;
+
+  if (props.to.name === 'myFlights') {
+    return $route.name.toLowerCase().includes("flight");
+  } else {
+    return $route.fullPath === btnResolvedPath || $route.fullPath.startsWith(btnResolvedPath);
+  }
+});
 </script>

src/components/navigation/SidebarNavigation.vue

@@ -0,0 +1,54 @@
+<script setup>
+import NavigationButton from "components/navigation/NavigationButton.vue";
+
+
+const linksList = [
+  {
+    title: 'Moje lety',
+    icon: "flight_takeoff",
+    to: {name: "myFlights"}
+  },
+    {separator: true},
+
+  {
+    title: 'Letadla',
+    icon: "connecting_airports",
+    to: {name: "aircrafts"}
+  },
+  {
+    title: 'Zajímavá místa',
+    icon: "place",
+    to: {name: "poi"}
+  },
+  {
+    title: 'Spolucestující',
+    icon: "people",
+    to: {name: "copilots"}
+  },
+  {separator: true},
+  {
+    title: 'Události',
+    icon: 'event',
+    to: {name: "events"}
+  },
+  {separator: true},
+  {
+    title: 'Organizace',
+    icon: "groups",
+    to: {name: "organizations"}
+  },
+  {separator: true},
+]
+</script>
+
+<template>
+  <q-list class="q-my-lg">
+    <template v-for="link in linksList" :key="link.title">
+      <q-separator v-if="link.separator"/>
+      <NavigationButton
+        v-if="!link.separator"
+        v-bind="link"
+      />
+    </template>
+  </q-list>
+</template>

src/components/navigation/TopMenuButton.vue

@@ -0,0 +1,43 @@
+<script setup>
+import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
+
+const props = defineProps({
+  loggedUser: {
+    type: Object,
+    required: true
+  }
+});
+
+
+const emits = defineEmits(["logout"]);
+const logout = () => emits("logout");
+
+</script>
+
+<template>
+  <q-btn flat>
+    <AvatarFromPhoto v-if="loggedUser.avatarImageUrl" :size="32" :src="loggedUser.avatarImageUrl"/>
+    <q-icon name="person" v-else/>
+
+    <q-menu auto-close>
+      <q-list style="min-width: 200px">
+        <q-item clickable :to="{name: 'profile'}">
+          <q-item-section avatar>
+            <q-icon name="person"/>
+          </q-item-section>
+          <q-item-section>Osobní nastavení</q-item-section>
+        </q-item>
+
+        <q-item clickable @click="logout" class="q-mt-lg">
+          <q-item-section avatar>
+            <q-icon name="logout"/>
+          </q-item-section>
+          <q-item-section>
+            Odhlásit
+          </q-item-section>
+        </q-item>
+
+      </q-list>
+    </q-menu>
+  </q-btn>
+</template>

src/components/organizations/OrganizationForm.vue

@@ -9,7 +9,7 @@ import {isRequired} from "src/composables/form/rules";
 import RichTextEditor from "components/inputs/RichTextEditor.vue";
 
 const props = defineProps({
-  event: {
+  organization: {
     type: Object
   },
   isRequestPending
@@ -24,8 +24,8 @@ const rules = {
 }
 
 onMounted(() => {
-  if (props.event) {
-    setDefaultData(formData, props.event);
+  if (props.organization) {
+    setDefaultData(formData, props.organization);
   }
 })