Sprava eventu a organizaci

src/pages/profile/organization/EditOrganizationPage.vue

@@ -0,0 +1,45 @@
+<script setup>
+import {onMounted} from "vue";
+import {loading, organization, fetchOrganization, isRequestPending} from "src/composables/objects/organization";
+import {useAppStore} from "stores/App";
+import {useRoute, useRouter} from "vue-router";
+import {useOrganizationsStore} from "stores/Organizations";
+import {successObject} from "src/composables/dialog";
+import {useQuasar} from "quasar";
+import OrganizationEditSkeleton from "components/organization/OrganizationEditSkeleton.vue";
+import OrganizationForm from "components/organization/OrganizationForm.vue";
+
+const organizationId = parseInt(useRoute().params.id);
+
+onMounted(() => {
+  fetchOrganization(organizationId).then(() => {
+    useAppStore().setPageTitle(`${organization.value.name} - editace`);
+    useAppStore().setBreadcrumbs([
+      {to: {name: "organizations"}, label: "Organizace"},
+      {to: {name: "organizationDetail", params: {id: organizationId}}, label: organization.value.name},
+      {label: "Editace"}
+    ])
+  })
+});
+
+const $q = useQuasar();
+const $router = useRouter();
+
+const handleSave = (formData) => {
+  useOrganizationsStore().update(organizationId, formData).then(() => {
+    $q.notify(successObject("Organizace úspěšně upravena"));
+    $router.push({name: "organizationDetail", params: {id: organizationId}});
+  });
+}
+</script>
+
+<template>
+  <OrganizationEditSkeleton v-if="loading"/>
+
+  <OrganizationForm
+    v-else
+    :organization="organization"
+    :is-request-pending="isRequestPending"
+    @save="handleSave"
+  />
+</template>

src/pages/profile/organization/NewOrganizationPage.vue

@@ -0,0 +1,28 @@
+<script setup>
+import {useRouter} from "vue-router";
+import {useQuasar} from "quasar";
+import {successObject} from "src/composables/dialog";
+import {useOrganizationsStore} from "stores/Organizations";
+import {useAppStore} from "stores/App";
+import {isRequestPending} from "src/composables/objects/organization";
+import OrganizationForm from "components/organizations/OrganizationForm.vue";
+
+const $q = useQuasar();
+const router = useRouter();
+const handleSave = (formData) => {
+  useOrganizationsStore().create(formData).then(() => {
+    $q.notify(successObject("Organizace úspěšně vytvořena"));
+    router.push({name: "organizations"});
+  });
+};
+
+useAppStore().setPageTitle("Nová organizace");
+useAppStore().setBreadcrumbs([
+  {to: {name: "organizations"}, label: "Organizace"},
+  {label: "Nová"}
+]);
+</script>
+
+<template>
+  <OrganizationForm @save="handleSave" :is-request-pending="isRequestPending"/>
+</template>

src/pages/profile/organization/OrganizationDetailPage.vue

@@ -0,0 +1,76 @@
+<script setup>
+import {useRoute} from "vue-router";
+import {onMounted} from "vue";
+import {organization, fetchOrganization, loading, myOrganizationIds, addToOrganization, removeFromOrganization} from "src/composables/objects/organization";
+import {useAppStore} from "stores/App";
+import FAB from "components/FAB.vue";
+import {storeToRefs} from "pinia";
+import {useUserStore} from "stores/User";
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+import AircraftsList from "components/aircrafts/AircraftsList.vue";
+import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
+import {useQuasar} from "quasar";
+import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
+
+const organizationId = parseInt(useRoute().params.id);
+const loggedUser = storeToRefs(useUserStore()).user;
+const $q = useQuasar();
+
+onMounted(() => {
+  fetchOrganization(organizationId).then(() => {
+    useAppStore().setPageTitle(organization.value.name);
+    useAppStore().setBreadcrumbs([
+      {to: {name: "organizations"}, label: "Organizace"},
+      {label: organization.value.name}
+    ])
+  });
+});
+
+</script>
+
+<template>
+  <h3>Členové</h3>
+
+  <BasicListSkeleton :items-count-min="1" :items-count-max="5" v-if="loading || !organization"/>
+
+  <template v-else>
+    <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"/>
+          <q-avatar icon="person" v-else class="bg-primary text-white" />
+        </q-item-section>
+        <q-item-section>
+          {{ user.name || user.email }}
+          <template v-if="loggedUser.id === user.id">(já)</template>
+        </q-item-section>
+      </q-item>
+    </q-list>
+    <BasicInfoBanner v-else>
+      Zatím nikdo...
+    </BasicInfoBanner>
+
+    <q-btn color="positive" size="lg" @click="addToOrganization()" v-if="!myOrganizationIds.includes(organizationId)">
+      <q-icon name="plus"/>
+      Přidat se
+    </q-btn>
+    <q-btn color="warning" size="lg" @click="removeFromOrganization()" v-else>
+      <q-icon name="minus"/>
+      Opustit organizaci
+    </q-btn>
+
+    <h3>Letadla</h3>
+
+    <BasicListSkeleton :items-count-min="1" :items-count-max="5" v-if="loading"/>
+    <AircraftsList :items="organization.aircrafts" v-if="organization.aircrafts.length > 0"/>
+    <BasicInfoBanner v-else>
+      Žádné letadlo
+    </BasicInfoBanner>
+
+    <FAB
+      mode="edit"
+      v-if="organization.createdById === loggedUser.id"
+      :router-link="{name: 'organizationEdit', params: {id: organizationId}}"
+    />
+  </template>
+</template>

src/pages/profile/organization/OrganizationsPage.vue

@@ -1,7 +1,25 @@
 <script setup>
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+import { onMounted} from "vue";
+import {fetchOrganizations, loading, myOrganizationIds, organizations} from "src/composables/objects/organization";
+import {useAppStore} from "stores/App";
+import FAB from "components/FAB.vue";
+import OrganizationsList from "components/organizations/OrganizationsList.vue";
+import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
+
+onMounted(() => {
+  fetchOrganizations();
+  useAppStore().setPageTitle("Organizace");
+});
 
 </script>
 
 <template>
-  organizace
+  <BasicListSkeleton v-if="loading"/>
+  <BasicInfoBanner v-else-if="!loading && organizations.length === 0" :route-add='{name: "addOrganization"}'>
+    Aktuálně nejsou dostupné žádné organizace, ke kterým by ses mohl/a přidat.
+    Zaregistruj sem svůj aeroklub, abyste mohli sdílet letadla.
+  </BasicInfoBanner>
+  <OrganizationsList :items="organizations" :my-organizations-ids="myOrganizationIds" v-else/>
+  <FAB :router-link="{name: 'addOrganization'}" mode="add"/>
 </template>