Ne uplne otestovany prepis storu

src/pages/profile/organization/EditOrganizationPage.vue

@@ -1,6 +1,5 @@
 <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";
@@ -8,15 +7,16 @@ import {successObject} from "src/composables/dialog";
 import {useQuasar} from "quasar";
 import OrganizationEditSkeleton from "components/organizations/OrganizationEditSkeleton.vue";
 import OrganizationForm from "components/organizations/OrganizationForm.vue";
+import {storeToRefs} from "pinia";
 
 const organizationId = parseInt(useRoute().params.id);
 
 onMounted(() => {
-  fetchOrganization(organizationId).then(() => {
-    useAppStore().setPageTitle(`${organization.value.name} - editace`);
+  useOrganizationsStore().fetchDetail(organizationId).then((o) => {
+    useAppStore().setPageTitle(`${o.name} - editace`);
     useAppStore().setBreadcrumbs([
       {to: {name: "organizations"}, label: "Organizace"},
-      {to: {name: "organizationDetail", params: {id: organizationId}}, label: organization.value.name},
+      {to: {name: "organizationDetail", params: {id: organizationId}}, label: o.name},
       {label: "Editace"}
     ])
   })
@@ -30,15 +30,17 @@ const handleSave = (formData) => {
     $router.push({name: "organizationDetail", params: {id: organizationId}});
   });
 }
+
+const {isQueryRunning, isMutationRunning, organization} = storeToRefs(useOrganizationsStore());
 </script>
 
 <template>
-  <OrganizationEditSkeleton v-if="loading"/>
+  <OrganizationEditSkeleton v-if="isQueryRunning"/>
 
   <OrganizationForm
     v-else
     :organization="organization"
-    :is-request-pending="isRequestPending"
+    :is-request-pending="isMutationRunning"
     @save="handleSave"
   />
 </template>

src/pages/profile/organization/NewOrganizationPage.vue

@@ -4,8 +4,8 @@ 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";
+import {storeToRefs} from "pinia";
 
 const $q = useQuasar();
 const router = useRouter();
@@ -21,8 +21,10 @@ useAppStore().setBreadcrumbs([
   {to: {name: "organizations"}, label: "Organizace"},
   {label: "Nová"}
 ]);
+
+const {isMutationRunning} = storeToRefs(useOrganizationsStore());
 </script>
 
 <template>
-  <OrganizationForm @save="handleSave" :is-request-pending="isRequestPending"/>
+  <OrganizationForm @save="handleSave" :is-request-pending="isMutationRunning"/>
 </template>

src/pages/profile/organization/OrganizationDetailPage.vue

@@ -1,7 +1,6 @@
 <script setup>
 import {useRoute} from "vue-router";
-import {onMounted} from "vue";
-import {organization, fetchOrganization, loading, myOrganizationIds, addToOrganization, removeFromOrganization} from "src/composables/objects/organization";
+import {computed, onMounted} from "vue";
 import {useAppStore} from "stores/App";
 import FAB from "components/FAB.vue";
 import {storeToRefs} from "pinia";
@@ -11,39 +10,41 @@ 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";
+import {useOrganizationsStore} from "stores/Organizations";
 
 const organizationId = parseInt(useRoute().params.id);
 const loggedUser = storeToRefs(useUserStore()).user;
 const $q = useQuasar();
 
 onMounted(() => {
-  fetchOrganization(organizationId).then(() => {
-    useAppStore().setPageTitle(organization.value.name);
+  useOrganizationsStore().fetchDetail(organizationId).then((o) => {
+    useAppStore().setPageTitle(o.name);
     useAppStore().setBreadcrumbs([
       {to: {name: "organizations"}, label: "Organizace"},
-      {label: organization.value.name}
+      {label: o.name}
     ])
   });
 });
 
+const myOrganizationIds = computed(() =>  (loggedUser.value && loggedUser.value.organizations?.map(o => o.id)) || []);
+const {isQueryRunning, organization} = storeToRefs(useOrganizationsStore());
 </script>
 
 <template>
   <h3>Členové</h3>
 
-
   <div class="q-my-md">
-    <q-btn color="positive" @click="addToOrganization(organizationId)" v-if="!myOrganizationIds.includes(organizationId)">
+    <q-btn color="positive" @click="useOrganizationsStore().addUserToOrganization(organizationId)" v-if="!myOrganizationIds.includes(organizationId)">
       <q-icon name="add"/>
       Přidat se
     </q-btn>
-    <q-btn color="warning" @click="removeFromOrganization(organizationId)" v-else>
+    <q-btn color="warning" @click="useOrganizationsStore().removeUserFromOrganization(organizationId)" v-else>
       <q-icon name="remove"/>
       Opustit organizaci
     </q-btn>
   </div>
 
-  <BasicListSkeleton :items-count-min="1" :items-count-max="5" v-if="loading || !organization"/>
+  <BasicListSkeleton :items-count-min="1" :items-count-max="5" v-if="isQueryRunning || !organization"/>
   <template v-else>
     <q-list bordered separator v-if="organization.users.length > 0">
       <q-item v-for="user in organization.users" :key="user">
@@ -64,7 +65,7 @@ onMounted(() => {
 
   <h3>Letadla</h3>
 
-  <BasicListSkeleton :items-count-min="1" :items-count-max="5" v-if="loading || !organization"/>
+  <BasicListSkeleton :items-count-min="1" :items-count-max="5" v-if="isQueryRunning || !organization"/>
   <template v-else>
     <AircraftsList :items="organization.aircrafts" v-if="organization.aircrafts.length > 0"/>
     <BasicInfoBanner v-else>

src/pages/profile/organization/OrganizationsPage.vue

@@ -1,22 +1,28 @@
 <script setup>
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
-import { onMounted} from "vue";
-import {fetchOrganizations, loading, myOrganizationIds, organizations} from "src/composables/objects/organization";
+import {computed, onMounted} from "vue";
 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";
+import {useOrganizationsStore} from "stores/Organizations";
+import {storeToRefs} from "pinia";
+import {useUserStore} from "stores/User";
 
 onMounted(() => {
-  fetchOrganizations();
+  useOrganizationsStore().fetch();
   useAppStore().setPageTitle("Organizace");
 });
 
+const loggedUser = storeToRefs(useUserStore()).user;
+const myOrganizationIds = computed(() => (loggedUser.value && loggedUser.value.organizations?.map(o => o.id)) || []);
+
+const {isQueryRunning, organizations} = storeToRefs(useOrganizationsStore());
 </script>
 
 <template>
-  <BasicListSkeleton v-if="loading"/>
-  <BasicInfoBanner v-else-if="!loading && organizations.length === 0" :route-add='{name: "addOrganization"}'>
+  <BasicListSkeleton v-if="isQueryRunning"/>
+  <BasicInfoBanner v-else-if="!isQueryRunning && 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>