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) {
+  if (props.organization) {
-    setDefaultData(formData, props.event);
+    setDefaultData(formData, props.organization);
   }
 })
 

src/layouts/ProfileLayout.vue

@@ -15,31 +15,7 @@
           {{ pageTitle || "Polétání.cz" }}
         </q-toolbar-title>
 
-        <q-btn flat>
+        <TopMenuButton :logged-user="loggedUser" @logout="logout"/>
-          <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>
 
       </q-toolbar>
     </q-header>
@@ -50,18 +26,9 @@
       bordered
     >
 
-      <q-img class="absolute-top" :src="loggedUser.titleImageUrl" style="height: 150px">
+      <q-img class="absolute-top" :src="loggedUser.titleImageUrl" style="height: 150px"/>
-      </q-img>
       <q-scroll-area style="height: calc(100% - 150px); margin-top: 150px; border-right: 1px solid #ddd">
-        <q-list class="q-my-lg">
+        <SidebarNavigation/>
-          <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>
       </q-scroll-area>
     </q-drawer>
 
@@ -85,54 +52,17 @@ import {useMeta, useQuasar} from "quasar";
 import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
 import {useRouter} from "vue-router";
 import {successObject} from "src/composables/dialog";
+import SidebarNavigation from "components/navigation/SidebarNavigation.vue";
+import TopMenuButton from "components/navigation/TopMenuButton.vue";
+
+const $q = useQuasar();
+const $router = useRouter();
 
 const {pageTitle, breadcrumbs} = storeToRefs(useAppStore());
 useMeta(() => ({
   title: pageTitle.value !== '' ? `${pageTitle.value} - Polétání.cz` : 'Polétání.cz'
 }));
 
-const linksList = [
-  {
-    title: 'Přidat let',
-    icon: 'airplane_ticket',
-    to: {name: "addFlight"}
-  },
-  {separator: true},
-  {
-    title: 'Moje lety',
-    icon: "flight_takeoff",
-    to: {name: "myFlights"}
-  },
-  {
-    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},
-]
-
 const leftDrawerOpen = ref(false)
 const toggleLeftDrawer = () => {
   leftDrawerOpen.value = !leftDrawerOpen.value
@@ -143,9 +73,6 @@ onMounted(() => {
 })
 const loggedUser = storeToRefs(useUserStore()).user;
 
-const $q = useQuasar();
-const $router = useRouter();
-
 const logout = () => {
   useUserStore().logout().then(() => {
     $q.notify(successObject("Odhlášení bylo úspěšné"));

src/pages/profile/organization/EditOrganizationPage.vue

@@ -24,7 +24,6 @@ onMounted(() => {
 
 const $q = useQuasar();
 const $router = useRouter();
-
 const handleSave = (formData) => {
   useOrganizationsStore().update(organizationId, formData).then(() => {
     $q.notify(successObject("Organizace úspěšně upravena"));

src/pages/profile/organization/OrganizationDetailPage.vue

@@ -48,7 +48,7 @@ onMounted(() => {
     <q-list bordered separator v-if="organization.users.length > 0">
       <q-item v-for="user in organization.users" :key="user">
         <q-item-section avatar>
-          <AvatarFromPhoto :src="user.avatarImageUrl" v-if="user.avatarImageUrl" size="50"/>
+          <AvatarFromPhoto :src="user.avatarImageUrl" v-if="user.avatarImageUrl" :size="50"/>
           <q-avatar icon="person" v-else class="bg-primary text-white"/>
         </q-item-section>
         <q-item-section>

src/router/routes.js

@@ -2,8 +2,8 @@ import PlainLayout from "layouts/PlainLayout.vue";
 
 const routes = [
   {path: '/login', name: "login", component: () => import('pages/public/LoginPage.vue'), meta: {layout: PlainLayout}},
-  {path: '/register', name: "registration", component: () => import('pages/public/RegisterPage.vue'), meta: {layout: PlainLayout}},
+  {path: '/registrace', name: "registration", component: () => import('pages/public/RegisterPage.vue'), meta: {layout: PlainLayout}},
-  {path: '/forgotten-password', name: "forgottenPassword", component: () => import('pages/public/RegisterPage.vue'), meta: {layout: PlainLayout}},
+  {path: '/zapomenute-heslo', name: "forgottenPassword", component: () => import('pages/public/RegisterPage.vue'), meta: {layout: PlainLayout}},
 
   {path: '', name: "homepage", component: () => import('pages/public/IndexPage.vue'), meta: {layout: PlainLayout}},
 
@@ -17,39 +17,39 @@ const routes = [
     ]
   },
   {
-    path: '/profile',
+    path: '/moje',
     component: () => import('layouts/ProfileLayout.vue'),
     meta: {
       protected: true,
     },
     children: [
-      {path: '', name: "profile", component: () => import('pages/profile/ProfilePage.vue')},
+      {path: '', name: "myFlights", component: () => import('pages/profile/flight/FlightsPage.vue')},
-      {path: 'my-flights', name: "myFlights", component: () => import('pages/profile/flight/FlightsPage.vue')},
+      {path: 'nastaveni', name: "profile", component: () => import('pages/profile/ProfilePage.vue')},
-      {path: 'my-flights/add', name: "addFlight", component: () => import('pages/profile/flight/NewFlightPage.vue')},
+      {path: 'lety/novy', name: "addFlight", component: () => import('pages/profile/flight/NewFlightPage.vue')},
-      {path: 'my-flights/:id', name: "flightDetail", component: () => import('pages/profile/flight/FlightDetailPage.vue')},
+      {path: 'lety/:id', name: "flightDetail", component: () => import('pages/profile/flight/FlightDetailPage.vue')},
-      {path: 'my-flights/:id/edit/:step?', name: "flightEdit", component: () => import('pages/profile/flight/EditFlightPage.vue')},
+      {path: 'lety/:id/edit/:step?', name: "flightEdit", component: () => import('pages/profile/flight/EditFlightPage.vue')},
       {path: 'poi', name: "poi", component: () => import('pages/profile/poi/PointsOfInterestPage.vue')},
-      {path: 'poi/add', name: "addPOI", component: () => import('pages/profile/poi/NewPointOfInterestPage.vue')},
+      {path: 'poi/novy', name: "addPOI", component: () => import('pages/profile/poi/NewPointOfInterestPage.vue')},
       {path: 'poi/:id', name: "poiDetail", component: () => import('pages/profile/poi/PointOfInterestDetailPage.vue')},
       {path: 'poi/:id/edit', name: "poiEdit", component: () => import('pages/profile/poi/EditPointOfInterestPage.vue')},
-      {path: 'copilots', name: "copilots", component: () => import('pages/profile/copilot/CopilotsPage.vue')},
+      {path: 'kopiloti', name: "copilots", component: () => import('pages/profile/copilot/CopilotsPage.vue')},
-      {path: 'copilots/add', name: "addCopilot", component: () => import('pages/profile/copilot/NewCopilotPage.vue')},
+      {path: 'kopiloti/novy', name: "addCopilot", component: () => import('pages/profile/copilot/NewCopilotPage.vue')},
-      {path: 'copilots/:id', name: "copilotDetail", component: () => import('pages/profile/copilot/CopilotDetailPage.vue')},
+      {path: 'kopiloti/:id', name: "copilotDetail", component: () => import('pages/profile/copilot/CopilotDetailPage.vue')},
-      {path: 'copilots/:id/edit', name: "copilotEdit", component: () => import('pages/profile/copilot/EditCopilotPage.vue')},
+      {path: 'kopiloti/:id/edit', name: "copilotEdit", component: () => import('pages/profile/copilot/EditCopilotPage.vue')},
-      {path: 'aircrafts', name: "aircrafts", component: () => import('pages/profile/aircraft/AircraftsPage.vue')},
+      {path: 'letadla', name: "aircrafts", component: () => import('pages/profile/aircraft/AircraftsPage.vue')},
-      {path: 'aircrafts/new', name: "addAircraft", component: () => import('pages/profile/aircraft/NewAircraftsPage.vue')},
+      {path: 'letadla/nove', name: "addAircraft", component: () => import('pages/profile/aircraft/NewAircraftsPage.vue')},
-      {path: 'aircrafts/:id', name: "aircraftDetail", component: () => import('pages/profile/aircraft/AircraftDetailPage.vue')},
+      {path: 'letadla/:id', name: "aircraftDetail", component: () => import('pages/profile/aircraft/AircraftDetailPage.vue')},
-      {path: 'aircrafts/:id/edit', name: "aircraftEdit", component: () => import('pages/profile/aircraft/EditAircraftPage.vue')},
+      {path: 'letadla/:id/edit', name: "aircraftEdit", component: () => import('pages/profile/aircraft/EditAircraftPage.vue')},
 
-      {path: 'events', name: "events", component: () => import('pages/profile/event/EventsPage.vue')},
+      {path: 'udalosti', name: "events", component: () => import('pages/profile/event/EventsPage.vue')},
-      {path: 'events/add', name: "addEvent", component: () => import('pages/profile/event/NewEventPage.vue')},
+      {path: 'udalosti/novy', name: "addEvent", component: () => import('pages/profile/event/NewEventPage.vue')},
-      {path: 'events/:id', name: "eventDetail", component: () => import('pages/profile/event/EventDetailPage.vue')},
+      {path: 'udalosti/:id', name: "eventDetail", component: () => import('pages/profile/event/EventDetailPage.vue')},
-      {path: 'events/:id/edit', name: "eventEdit", component: () => import('pages/profile/event/EditEventPage.vue')},
+      {path: 'udalosti/:id/edit', name: "eventEdit", component: () => import('pages/profile/event/EditEventPage.vue')},
 
-      {path: 'organizations', name: "organizations", component: () => import('pages/profile/organization/OrganizationsPage.vue')},
+      {path: 'organizace', name: "organizations", component: () => import('pages/profile/organization/OrganizationsPage.vue')},
-      {path: 'organizations/add', name: "addOrganization", component: () => import('pages/profile/organization/NewOrganizationPage.vue')},
+      {path: 'organizace/nova', name: "addOrganization", component: () => import('pages/profile/organization/NewOrganizationPage.vue')},
-      {path: 'organizations/:id', name: "organizationDetail", component: () => import('pages/profile/organization/OrganizationDetailPage.vue')},
+      {path: 'organizace/:id', name: "organizationDetail", component: () => import('pages/profile/organization/OrganizationDetailPage.vue')},
-      {path: 'organizations/:id/edit', name: "editOrganization", component: () => import('pages/profile/organization/EditOrganizationPage.vue')},
+      {path: 'organizace/:id/edit', name: "organizationEdit", component: () => import('pages/profile/organization/EditOrganizationPage.vue')},
     ]
   },
 

src/stores/Events.js

@@ -26,6 +26,7 @@ export const useEventsStore = defineStore('Events', {
       this.isMutationRunning = true;
       return apolloWrapper.mutate(CREATE_EVENT, {input: formData}).then(({data}) => {
         const event = data.createEvent;
+        event.flights = event.flights || [];
         this.items.push(event);
         return event;
       }).finally(() => this.isMutationRunning = false);