poletani.cz/app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Ne uplne otestovany prepis storu

Browse Source
This commit is contained in:
Michal Kváček
2023-11-19 00:44:01 +01:00
parent e65491e00b
commit f9d70a5d57
76 changed files with 1445 additions and 1463 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/profile/aircraft/AircraftDetailPage.vue
+17 -14
View File
@@ -5,43 +5,46 @@ import {useRoute, useRouter} from "vue-router";
import {useQuasar} from "quasar";
import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
import {successObject} from "src/composables/dialog";
import {loading, aircraft, fetchAircraft} from "src/composables/objects/aircraft";
import {useAppStore} from "stores/App";
import FlightsList from "components/flights/FlightsList.vue";
import AircraftDetailCard from "components/aircrafts/AircraftDetailCard.vue";
import {poi} from "src/composables/objects/poi";
import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
import {storeToRefs} from "pinia";
import {useUserStore} from "stores/User";
const $q = useQuasar();
const $router = useRouter();
const aircraftId = parseInt(useRoute().params.id);
onMounted(() => {
fetchAircraft(aircraftId);
useAircraftsStore().fetchDetail(aircraftId);
})
const deleteAircraft = (id) => {
useAircraftsStore().delete(id).then(() => {
$router.push({name: "aircrafts"});
$q.notify(successObject("Letadlo úspěšně odstraněno"));
});
}
const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
watch(() => aircraft.value, (newVal) => {
if (!newVal) return;
watch(aircraft, (newVal) => {
useAppStore().setPageTitle(newVal.callSign);
useAppStore().setBreadcrumbs([
{label: "Letadla", to: {name: "aircrafts"}},
{label: newVal.callSign}
])
});
const deleteAircraft = (id) => {
useAircraftsStore().destroy(id).then(() => {
$router.push({name: "aircrafts"});
$q.notify(successObject("Letadlo úspěšně odstraněno"));
});
}
</script>
<template>
<AircraftDetailSkeleton v-if="loading || !aircraft"/>
<AircraftDetailSkeleton v-if="isQueryRunning || !aircraft"/>
<template v-else>
<AircraftDetailCard :aircraft="aircraft" @delete="deleteAircraft" />
<AircraftDetailCard
:aircraft="aircraft"
@delete="deleteAircraft"
/>
<q-card class="flight-detail-card" flat>
<h3>Lety</h3>
src/pages/profile/aircraft/AircraftsPage.vue
+8 -4
View File
@@ -1,21 +1,25 @@
<script setup>
import {onMounted} from "vue";
import AircraftsList from "components/aircrafts/AircraftsList.vue";
import {aircrafts, fetchAircrafts, loading} from "src/composables/objects/aircraft";
import FAB from "components/FAB.vue";
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import {useAircraftsStore} from "stores/Aircrafts";
import {storeToRefs} from "pinia";
const store = useAircraftsStore();
onMounted(() => {
fetchAircrafts();
store.fetch();
})
const {aircrafts, isQueryRunning} = storeToRefs(store);
</script>
<template>
<BasicListSkeleton v-if="loading"/>
<BasicListSkeleton v-if="isQueryRunning"/>
<BasicInfoBanner
v-if="!loading && aircrafts.length === 0"
v-if="!isQueryRunning && aircrafts.length === 0"
:route-add="{name: 'addAircraft'}"
label-add="Vytvořit letadlo"
>
src/pages/profile/aircraft/EditAircraftPage.vue
+5 -5
View File
@@ -6,9 +6,7 @@ import {useQuasar} from "quasar";
import {onMounted} from "vue";
import AircraftEditSkeleton from "components/aircrafts/AircraftEditSkeleton.vue";
import {successObject} from "src/composables/dialog";
import {aircraft, fetchAircraft, loading, isRequestPending} from "src/composables/objects/aircraft";
import {useAppStore} from "stores/App";
import {fetchOrganizations, organizations} from "src/composables/objects/organization";
import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
import {storeToRefs} from "pinia";
import {useUserStore} from "stores/User";
@@ -25,9 +23,10 @@ const handleSave = (formData) => {
$router.push({name: "aircraftDetail", params: {id: aircraftId}});
})
}
const {aircraft, isMutationRunning, isQueryRunning} = storeToRefs(useAircraftsStore());
onMounted(() => {
fetchAircraft(aircraftId).then(() => {
useAircraftsStore().fetchDetail(aircraftId).then(() => {
useAppStore().setPageTitle(`${aircraft.value.callSign} - editace`);
useAppStore().setBreadcrumbs([
{to: {name: "aircraft"}, label: "Letadla"},
@@ -36,10 +35,11 @@ onMounted(() => {
])
});
});
</script>
<template>
<AircraftEditSkeleton v-if="loading"/>
<AircraftEditSkeleton v-if="isQueryRunning || !aircraft"/>
<AccessDeniedBanner
v-else-if="aircraft.createdById !== loggedUser.id"
@@ -52,7 +52,7 @@ onMounted(() => {
@save="handleSave"
:default-values="aircraft"
:organizations="loggedUser.organizations"
:is-request-pending="isRequestPending"
:is-request-pending="isMutationRunning"
/>
</q-card-section>
</q-card>
src/pages/profile/aircraft/NewAircraftsPage.vue
+5 -3
View File
@@ -5,8 +5,7 @@ import {useRouter} from "vue-router";
import {useQuasar} from "quasar";
import {useAppStore} from "stores/App";
import {successObject} from "src/composables/dialog";
import {isRequestPending} from "src/composables/objects/aircraft";
import {fetchOrganizations, organizations} from "src/composables/objects/organization";
import {fetchOrganizations} from "src/composables/objects/organization";
import {onMounted} from "vue";
import {storeToRefs} from "pinia";
import {useUserStore} from "stores/User";
@@ -30,13 +29,16 @@ onMounted(() => {
{label: "Nové"}
]);
});
const {isMutationRunning} = storeToRefs(useAircraftsStore());
</script>
<template>
<q-card class="q-mx-md q-my-md">
<q-card-section>
<AircraftForm
:is-request-pending="isRequestPending"
:is-request-pending="isMutationRunning"
:organizations="loggedUser.organizations"
@save="handleSave"
/>
src/pages/profile/copilot/CopilotDetailPage.vue
+7 -4
View File
@@ -1,26 +1,29 @@
<script setup>
import {useRoute} from "vue-router";
import {onMounted} from "vue";
import {copilot, fetchCopilot, loading} from "src/composables/objects/copilot";
import CopilotDetailSkeleton from "components/copilots/CopilotDetailSkeleton.vue";
import {useAppStore} from "stores/App";
import FAB from "components/FAB.vue";
import FlightsList from "components/flights/FlightsList.vue";
import {useCopilotsStore} from "stores/Copilots";
import {storeToRefs} from "pinia";
const copilotId = parseInt(useRoute().params.id);
onMounted(() => {
fetchCopilot(copilotId).then(() => {
useCopilotsStore().fetchDetail(copilotId).then(() => {
useAppStore().setPageTitle(copilot.value.name);
useAppStore().setBreadcrumbs([
{to: {name: "copilots"}, label: "Kopiloti"},
{label: copilot.value.name}
])
});
})
});
const {isQueryRunning, copilot} = storeToRefs(useCopilotsStore());
</script>
<template>
<CopilotDetailSkeleton v-if="loading || !copilot"/>
<CopilotDetailSkeleton v-if="isQueryRunning || !copilot"/>
<template v-else>
<h3>Společné lety</h3>
src/pages/profile/copilot/CopilotsPage.vue
+8 -5
View File
@@ -1,23 +1,26 @@
<script setup>
import {onMounted} from "vue";
import {fetchCopilots, loading, copilots} from "src/composables/objects/copilot";
import CopilotsList from "components/copilots/CopilotsList.vue";
import FAB from "components/FAB.vue";
import {useAppStore} from "stores/App";
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import {useCopilotsStore} from "stores/Copilots";
import {storeToRefs} from "pinia";
onMounted(() => {
fetchCopilots();
useCopilotsStore().fetch();
useAppStore().setPageTitle("Spolucestující");
})
});
const {isQueryRunning, copilots} = storeToRefs(useCopilotsStore());
</script>
<template>
<BasicListSkeleton :items-count-min="5" :items-count-max="10" v-if="loading"/>
<BasicListSkeleton :items="10" v-if="isQueryRunning"/>
<BasicInfoBanner
v-else-if="!loading && copilots.length === 0"
v-else-if="!isQueryRunning && copilots.length === 0"
:router-add="{name: 'addCopilot'}"
>
V tomto seznamu budou uvedeni všichni, kteří s tebou absolvovali nějaký tvůj let.
src/pages/profile/copilot/EditCopilotPage.vue
+12 -9
View File
@@ -1,6 +1,5 @@
<script setup>
import {onMounted} from "vue";
import {loading, copilot, fetchCopilot, isRequestPending} from "src/composables/objects/copilot";
import {useAppStore} from "stores/App";
import CopilotEditSkeleton from "components/copilots/CopilotEditSkeleton.vue";
import CopilotEditForm from "components/copilots/CopilotForm.vue";
@@ -8,38 +7,42 @@ import {useRoute, useRouter} from "vue-router";
import {useCopilotsStore} from "stores/Copilots";
import {successObject} from "src/composables/dialog";
import {useQuasar} from "quasar";
import {storeToRefs} from "pinia";
const copilotId = parseInt(useRoute().params.id);
const $q = useQuasar();
const $router = useRouter();
const $route = useRoute();
const copilotId = parseInt($route.params.id);
onMounted(() => {
fetchCopilot(copilotId).then(() => {
useCopilotsStore().fetchDetail(copilotId).then(() => {
useAppStore().setPageTitle(`${copilot.value.name} - editace`);
useAppStore().setBreadcrumbs([
{to: {name: "copilots"}, label: "Kopiloti"},
{to: {name: "copilotDetail", params: {id: copilotId}}, label: copilot.value.name},
{label: "Editace"}
])
})
});
});
const $q = useQuasar();
const $router = useRouter();
const handleSave = (formData) => {
useCopilotsStore().update(copilotId, formData).then(() => {
$q.notify(successObject("Kopilot úspěšně upraven"));
$router.push({name: "copilotDetail", params: {id: copilotId}});
});
}
const {isQueryRunning, isMutationRunning, copilot} = storeToRefs(useCopilotsStore());
</script>
<template>
<CopilotEditSkeleton v-if="loading"/>
<CopilotEditSkeleton v-if="isQueryRunning || !copilot"/>
<CopilotEditForm
v-else
:copilot="copilot"
:is-request-pending="isRequestPending"
:is-request-pending="isMutationRunning"
@save="handleSave"
/>
</template>
src/pages/profile/copilot/NewCopilotPage.vue
+7 -2
View File
@@ -5,7 +5,7 @@ import {successObject} from "src/composables/dialog";
import {useCopilotsStore} from "stores/Copilots";
import CopilotForm from "components/copilots/CopilotForm.vue";
import {useAppStore} from "stores/App";
import {isRequestPending} from "src/composables/objects/copilot";
import {storeToRefs} from "pinia";
const $q = useQuasar();
const router = useRouter();
@@ -21,8 +21,13 @@ useAppStore().setBreadcrumbs([
{to: {name: "copilots"}, label: "Spolucestující"},
{label: "Nový"}
]);
const {isMutationRunning} = storeToRefs(useCopilotsStore());
</script>
<template>
<CopilotForm @save="handleSave" :is-request-pending="isRequestPending"/>
<CopilotForm
:is-request-pending="isMutationRunning"
@save="handleSave"
/>
</template>
src/pages/profile/event/EditEventPage.vue
+8 -6
View File
@@ -1,6 +1,5 @@
<script setup>
import {onMounted} from "vue";
import {loading, event, fetchEvent, isRequestPending} from "src/composables/objects/event";
import {useAppStore} from "stores/App";
import {useRoute, useRouter} from "vue-router";
import {useEventsStore} from "stores/Events";
@@ -8,15 +7,16 @@ import {successObject} from "src/composables/dialog";
import {useQuasar} from "quasar";
import EventEditSkeleton from "components/event/EventEditSkeleton.vue";
import EventForm from "components/event/EventForm.vue";
import {storeToRefs} from "pinia";
const eventId = parseInt(useRoute().params.id);
onMounted(() => {
fetchEvent(eventId).then(() => {
useAppStore().setPageTitle(`${event.value.name} - editace`);
useEventsStore().fetchDetail(eventId).then((e) => {
useAppStore().setPageTitle(`${e.name} - editace`);
useAppStore().setBreadcrumbs([
{to: {name: "events"}, label: "Události"},
{to: {name: "eventDetail", params: {id: eventId}}, label: event.value.name},
{to: {name: "eventDetail", params: {id: eventId}}, label: e.name},
{label: "Editace"}
])
})
@@ -31,15 +31,17 @@ const handleSave = (formData) => {
$router.push({name: "eventDetail", params: {id: eventId}});
});
}
const {isQueryRunning, isMutationRunning, event} = storeToRefs(useEventsStore());
</script>
<template>
<EventEditSkeleton v-if="loading"/>
<EventEditSkeleton v-if="isQueryRunning"/>
<EventForm
v-else
:event="event"
:is-request-pending="isRequestPending"
:is-request-pending="isMutationRunning"
@save="handleSave"
/>
</template>
src/pages/profile/event/EventDetailPage.vue
+7 -6
View File
@@ -1,17 +1,17 @@
<script setup>
import {useRoute} from "vue-router";
import {onMounted} from "vue";
import {event, fetchEvent, loading} from "src/composables/objects/event";
import EventDetailSkeleton from "components/event/EventDetailSkeleton.vue";
import {useAppStore} from "stores/App";
import FAB from "components/FAB.vue";
import FlightsList from "components/flights/FlightsList.vue";
import ListItemSkeleton from "components/basicSkeletons/ListItemSkeleton.vue";
import {FORMAT_DATE, FORMAT_DATETIME_LONG, formatDatetime} from "../../../composables/datetimeUtils";
import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
import {useEventsStore} from "stores/Events";
import {storeToRefs} from "pinia";
const eventId = parseInt(useRoute().params.id);
onMounted(() => {
fetchEvent(eventId).then(() => {
useEventsStore().fetchDetail(eventId).then(() => {
useAppStore().setPageTitle(event.value.name);
useAppStore().setBreadcrumbs([
{to: {name: "events"}, label: "Události"},
@@ -19,13 +19,14 @@ onMounted(() => {
])
});
})
const {isQueryRunning, event} = storeToRefs(useEventsStore());
</script>
<template>
<EventDetailSkeleton v-if="loading || !event"/>
<EventDetailSkeleton v-if="isQueryRunning || !event"/>
<template v-else>
<q-list bordered separator class="q-my-lg" v-if="event.dateFrom && event.dateTo">
<q-item>
<q-item-section>
src/pages/profile/event/EventsPage.vue
+7 -5
View File
@@ -4,20 +4,22 @@ import {useAppStore} from "stores/App";
import FAB from "components/FAB.vue";
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import {events, fetchEvents, loading} from "src/composables/objects/event";
import EventsList from "components/event/EventsList.vue";
import {storeToRefs} from "pinia";
import {useEventsStore} from "stores/Events";
onMounted(() => {
fetchEvents();
useEventsStore().fetch();
useAppStore().setPageTitle("Letecké události");
});
useAppStore().setPageTitle("Letecké události")
const {isQueryRunning, events} = storeToRefs(useEventsStore());
</script>
<template>
<BasicListSkeleton :items-count-min="3" :items-count-max="8" v-if="loading"/>
<BasicListSkeleton :items-count-min="3" :items-count-max="8" v-if="isQueryRunning"/>
<BasicInfoBanner
v-else-if="!loading && events.length === 0"
v-else-if="!isQueryRunning && events.length === 0"
:route-add="{name: 'addEvent'}"
label-add="Přidat"
>
src/pages/profile/event/NewEventPage.vue
+4 -2
View File
@@ -4,8 +4,8 @@ import {useQuasar} from "quasar";
import {successObject} from "src/composables/dialog";
import {useEventsStore} from "stores/Events";
import {useAppStore} from "stores/App";
import {isRequestPending} from "src/composables/objects/event";
import EventForm from "components/event/EventForm.vue";
import {storeToRefs} from "pinia";
const $q = useQuasar();
const router = useRouter();
@@ -21,8 +21,10 @@ useAppStore().setBreadcrumbs([
{to: {name: "events"}, label: "Události"},
{label: "Nová"}
]);
const {isMutationRunning} = storeToRefs(useEventsStore());
</script>
<template>
<EventForm @save="handleSave" :is-request-pending="isRequestPending"/>
<EventForm @save="handleSave" :is-request-pending="isMutationRunning"/>
</template>
src/pages/profile/flight/EditFlightPage.vue
+119 -60
View File
@@ -19,23 +19,21 @@ import PhotosList from "components/photos/PhotosEditorList.vue";
import {errorObject, successObject, warningObject} from "src/composables/dialog";
import PhotoFormDialog from "components/photos/PhotoFormDialog.vue";
import FlightFormTrack from "components/flights/form/FlightFormTrack.vue";
import {fetchFlight, flight, loading} from "src/composables/objects/flight";
import FlightEditSkeleton from "components/flights/FlightEditSkeleton.vue";
import BatchPhotoFormDialog from "components/photos/BatchPhotoFormDialog.vue";
import {useAppStore} from "stores/App";
import {editBatchPhotos, handleBatchPhotoEdit, openBatchEdit, openBatchPhotoForm} from "src/composables/photos/batchEdit";
import {editPhoto, handlePhotoUpdate, openEdit, openPhotoEdit} from "src/composables/photos/simpleEdit";
import {fetchEvents, events} from "src/composables/objects/event";
import {useEventsStore} from "stores/Events";
const $q = useQuasar();
const $route = useRoute();
const flightId = parseInt($route.params.id);
const aircrafts = storeToRefs(useAircraftsStore()).items;
const locations = storeToRefs(usePointsOfInterestStore()).items;
const airports = storeToRefs(useAirportsStore()).items;
const copilots = storeToRefs(useCopilotsStore()).items;
const {aircrafts} = storeToRefs(useAircraftsStore());
const {pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
const {airports} = storeToRefs(useAirportsStore());
const {copilots} = storeToRefs(useCopilotsStore());
const {events} = storeToRefs(useEventsStore());
const {flight, isQueryRunning, isMutationRunning} = storeToRefs(useFlightsStore());
const formStep = ref("basic");
watch(() => $route.params.step, (val) => formStep.value = val);
@@ -47,12 +45,10 @@ onMounted(() => {
usePointsOfInterestStore().fetch();
useAirportsStore().fetch();
useCopilotsStore().fetch();
useEventsStore().fetch();
fetchEvents();
fetchFlight(flightId).then(() => {
const flightNameFormatted = flightName(flight.value);
useFlightsStore().fetchDetail(flightId).then((f) => {
const flightNameFormatted = flightName(f);
useAppStore().setPageTitle(`Editace - ${flightNameFormatted}`);
useAppStore().setBreadcrumbs([
{to: {name: "myFlights"}, label: "Moje lety"},
@@ -65,13 +61,13 @@ onMounted(() => {
const handleFlightEdit = (data) => {
useFlightsStore().update(flightId, data).then((data) => {
$q.notify(successObject("Úspěšně upraveno"));
flight.value = data;
})
}
const isRequestPending = storeToRefs(useFlightsStore()).isMutationRunning;
const uploadInProgress = ref(false);
const handlePhotosUpload = (data) => {
// todo udelat batch napr. po 5 requestech
// TODO: udelat batch i pro rotace a davkove upravy (info)
@@ -100,7 +96,7 @@ const handlePhotosUpload = (data) => {
const _findPhotoIndex = (photoId) => flight.value.photos.findIndex((object) => object.id === photoId);
const deletePhoto = (id) => {
usePhotosStore().delete(id).then((data) => {
usePhotosStore().destroy(id).then((data) => {
flight.value.photos.splice(_findPhotoIndex(data.id), 1);
});
}
@@ -108,47 +104,110 @@ const deletePhoto = (id) => {
const rotatePhotos = ({photos, direction}) => {
const promises = [];
for (const photo of photos) {
promises.push(usePhotosStore().changeOrientation(photo.id, direction));
promises.push(usePhotosStore().changeOrientation(photo.id, direction).then(data => {
const idx = _findPhotoIndex(data.id);
data.thumbnailUrl += "?t=" + (new Date()).getTime();
flight.value.photos[idx] = data;
}));
}
let success = 0;
Promise.allSettled(promises).then(result => {
for (const updatedPhoto of result) {
const {status, value} = updatedPhoto;
if (status === 'fulfilled') success++;
const idx =_findPhotoIndex(value.id);
value.thumbnailUrl += "?t=" + (new Date()).getTime();
flight.value.photos[idx] = value;
for (const item of result) {
if (item.status === 'fulfilled') success++;
}
const error = result.length - success;
if (success > 0) {
$q.notify(successObject("Otočeno " + success + " fotografií"));
}
if (error > 0) {
$q.notify(errorObject(`Nepovedlo se otočit ${error} fotografi`))
}
if (success > 0) $q.notify(successObject("Otočeno " + success + " fotografií"));
if (error > 0) $q.notify(errorObject(`Nepovedlo se otočit ${error} fotografi`))
});
}
const updateSinglePhoto = (id, formData) => usePhotosStore().update(id, formData).then((data) => {
const idx = _findPhotoIndex(data.id);
flight.value.photos[idx] = data;
usePointsOfInterestStore().fetch();
});
const handlePhotoUpdate = (flightId, formData) => {
const photoId = formData.id;
delete formData.id;
return updateSinglePhoto(photoId, formData);
};
const openEdit = ref(false);
const editPhoto = ref(null);
const openPhotoEdit = (photo) => {
openEdit.value = true;
editPhoto.value = photo;
};
// batch edit
const openBatchEdit = ref(false);
const editBatchPhotos = ref([]);
const openBatchPhotoForm = (photos) => {
openBatchEdit.value = true;
editBatchPhotos.value = photos;
}
const handleBatchPhotoEdit = async (flightId, data) => {
const photoIds = data.photoIds;
delete data.photoIds;
delete data.id;
if (data.pointOfInterest && !data.pointOfInterest.id) {
const poiData = {
...data.pointOfInterest,
isPublic: false,
description: "",
}
await usePointsOfInterestStore().create(poiData).then(poi => data.pointOfInterest = {id: poi.id, name: poi.name});
}
const promises = [];
for (const id of photoIds) {
const updateData = {};
if (data.name !== '') updateData.name = data.name;
if (data.description !== '') updateData.description = data.description;
if (data.pointOfInterest) updateData.pointOfInterest = data.pointOfInterest;
if (Object.keys(updateData).length === 0) continue;
promises.push(updateSinglePhoto(id, data));
}
let success = 0;
Promise.allSettled(promises).then(result => {
for (const item of result) {
if (item.status === 'fulfilled') success++;
}
const error = result.length - success;
if (success > 0) $q.notify(successObject("Upraveno " + success + " fotografií"));
if (error > 0) $q.notify(errorObject(`Nepovedlo se uložit ${error} fotografií`))
});
}
</script>
<template>
<FlightFormSteps :router-edit-mode="true" :flightId="flightId"/>
<FlightEditSkeleton :step="formStep" v-if="loading"/>
<FlightEditSkeleton :step="formStep" v-if="isQueryRunning || !flight"/>
<template v-else>
<q-tab-panels v-model="formStep">
<q-tab-panel name="basic">
<FlightFormBasic
@save="handleFlightEdit"
:flight="flight"
:locations="locations"
:airports="airports"
:aircrafts="aircrafts"
@save="handleFlightEdit"
:flight="flight"
:locations="pointsOfInterest"
:airports="airports"
:aircrafts="aircrafts"
/>
</q-tab-panel>
@@ -158,43 +217,43 @@ const rotatePhotos = ({photos, direction}) => {
<q-tab-panel name="track">
<FlightFormTrack
v-if="locations"
:flight="flight"
:locations="locations"
:airports="airports"
@save="handleFlightEdit"
v-if="pointsOfInterest"
:flight="flight"
:locations="pointsOfInterest"
:airports="airports"
@save="handleFlightEdit"
/>
</q-tab-panel>
<q-tab-panel name="photos">
<FlightFormPhotos
:flight="flight"
:is-request-pending="isRequestPending || uploadInProgress"
@save="handlePhotosUpload"
:flight="flight"
:is-request-pending="isRequestPending || uploadInProgress"
@save="handlePhotosUpload"
/>
<PhotosList
:photos="flight.photos"
@edit="openPhotoEdit"
@batch-edit="openBatchPhotoForm"
@batch-rotate="rotatePhotos"
@delete="deletePhoto"
:photos="flight.photos"
@edit="openPhotoEdit"
@batch-edit="openBatchPhotoForm"
@batch-rotate="rotatePhotos"
@delete="deletePhoto"
/>
<!-- Dialogs for photo edit -->
<PhotoFormDialog
v-model="openEdit"
:locations="locations"
:photo="editPhoto"
@save="handlePhotoUpdate(flightId, $event)"
v-model="openEdit"
:locations="pointsOfInterest"
:photo="editPhoto"
@save="handlePhotoUpdate(flightId, $event)"
/>
<BatchPhotoFormDialog
v-model="openBatchEdit"
:locations="locations"
:photos="editBatchPhotos"
@save="handleBatchPhotoEdit(flightId, $event)"
@delete="deletePhoto"
v-model="openBatchEdit"
:locations="pointsOfInterest"
:photos="editBatchPhotos"
@save="handleBatchPhotoEdit(flightId, $event)"
@delete="deletePhoto"
/>
</q-tab-panel>
src/pages/profile/flight/FlightDetailPage.vue
+47 -56
View File
@@ -2,11 +2,11 @@
import {useRoute, useRouter} from "vue-router";
import {computed, onMounted, ref, watch} from "vue";
import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
import {fetchFlight, flight, flightName, handleDeleteFlight, loading} from "src/composables/objects/flight";
import {flightName} from "src/composables/objects/flight";
import {useAppStore} from "stores/App";
import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
import {copyToClipboard, useQuasar} from "quasar";
import {successObject} from "src/composables/dialog";
import {confirmObject, successObject} from "src/composables/dialog";
import {useFlightsStore} from "stores/Flights";
import FlightTrackMap from "components/flights/FlightTrackMap.vue";
import {useUserStore} from "stores/User";
@@ -19,37 +19,35 @@ const $router = useRouter();
const flightId = parseInt(useRoute().params.id);
const loggedUser = storeToRefs(useUserStore()).user;
onMounted(() => {
fetchFlight(flightId);
onMounted(() => {flight.value
useFlightsStore().fetchDetail(flightId).then(f => {
const flightNameFormatted = flightName(f);
useAppStore().setPageTitle(flightNameFormatted);
useAppStore().setBreadcrumbs([
{to: {name: "myFlights"}, label: "Moje lety"},
{label: flightNameFormatted}
]);
})
})
watch(flight, (newVal) => {
const flightNameFormatted = flightName(newVal);
useAppStore().setPageTitle(flightNameFormatted);
useAppStore().setBreadcrumbs([
{to: {name: "myFlights"}, label: "Moje lety"},
{label: flightNameFormatted}
]);
});
const handleDeleteAndRedirect = () => {
const flightId = flight.value.id;
handleDeleteFlight($q, flightId, (flight) => {
$router.push({name: "myFlights"});
$q.notify(successObject(`Úspěšně smazáno`));
})
$q.dialog(confirmObject("Opravdu chceš smazat tento let?"))
.onOk(() => {
useFlightsStore().destroy(flightId).then(() => {
$router.push({name: "myFlights"});
$q.notify(successObject(`Úspěšně smazáno`));
});
});
}
const togglePublicVisibility = () => {
const newVisibility = !flight.value.isPublic;
useFlightsStore()
.update(flightId, {isPublic: newVisibility})
.then((updatedFlight) => {
flight.value = updatedFlight;
$q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto"));
});
.update(flightId, {isPublic: newVisibility})
.then(() => {
$q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto"));
});
};
const copyLinkToClipboard = () => {
@@ -62,43 +60,36 @@ const copyLinkToClipboard = () => {
$q.notify(successObject("Odkaz zkopírován"))
});
};
const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
</script>
<template>
<FlightDetailSkeleton v-if="loading || !flight"/>
<FlightDetailSkeleton v-if="isQueryRunning || !flight"/>
<q-card class="flight-detail-card" v-else>
<q-img :src="flight.coverPhoto.url" v-if="flight.coverPhoto">
<div class="absolute-bottom custom-caption">
<div class="text-h5"> {{ flightName(flight) }} </div>
</div>
<div class="absolute-bottom custom-caption">
<div class="text-h5"> {{ flightName(flight) }}</div>
</div>
</q-img>
<q-card-actions class="q-my-md">
<div class="col-grow">
<!-- <q-btn-->
<!-- flat-->
<!-- :to="{name: 'flightEdit', params:{id: flight.id}}"-->
<!-- icon="edit"-->
<!-- text-color="primary"-->
<!-- label="Upravit"-->
<!-- />-->
<q-btn
@click="togglePublicVisibility"
:icon="flight.isPublic ? 'visibility_off' : 'visibility'"
:disable="!loggedUser.publicUsername"
flat
:label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
@click="togglePublicVisibility"
:icon="flight.isPublic ? 'visibility_off' : 'visibility'"
:disable="!loggedUser.publicUsername"
flat
:label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
/>
<q-btn
icon="link"
@click="copyLinkToClipboard()"
flat
v-if="flight.isPublic"
label="Získat odkaz"
icon="link"
@click="copyLinkToClipboard()"
flat
v-if="flight.isPublic"
label="Získat odkaz"
/>
</div>
<q-btn @click="handleDeleteAndRedirect" icon="delete" flat text-color="red" label="Smazat"/>
@@ -124,30 +115,30 @@ const copyLinkToClipboard = () => {
<q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}" icon="edit" color="primary">Upravit fotky</q-btn>
</div>
<BasicInfoBanner
v-if="flight.photos.length === 0"
:route-add="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
v-if="flight.photos.length === 0"
:route-add="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
>
U tohoto letu nemáš nahrané žádné fotografie.
</BasicInfoBanner>
<PhotoGallery
v-else
:photos="flight.photos"
v-else
:photos="flight.photos"
/>
<q-separator/>
<div class="text-right">
<q-btn class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}" icon="edit" color="primary">Upravit trasu</q-btn>
<q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}" icon="edit" color="primary">Upravit trasu</q-btn>
</div>
<BasicInfoBanner
v-if="flight.track.length === 0 && !flight.gpxTrack"
:route-add="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
v-if="flight.track.length === 0 && !flight.gpxTrack"
:route-add="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
>
Nemáš nastavenou žádnou trasu.
</BasicInfoBanner>
<FlightTrackMap
v-else
:flight="flight"
v-else
:flight="flight"
/>
</q-card-section>
</q-card>
src/pages/profile/flight/FlightsPage.vue
+8 -5
View File
@@ -4,30 +4,33 @@ import {useQuasar} from "quasar";
import FlightsList from "components/flights/FlightsList.vue";
import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
import FAB from "components/FAB.vue";
import {fetchFlights, flights, handleDeleteFlight, loading} from "src/composables/objects/flight";
import {useAppStore} from "stores/App";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import {useFlightsStore} from "stores/Flights";
import {storeToRefs} from "pinia";
const $q = useQuasar();
useAppStore().setPageTitle("Moje lety")
onMounted(() => {
fetchFlights();
useFlightsStore().fetch();
})
const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
</script>
<template>
<FlightsListSkeleton v-if="loading"/>
<FlightsListSkeleton v-if="isQueryRunning"/>
<BasicInfoBanner
v-else-if="!loading && flights.length === 0"
v-else-if="!isQueryRunning && flights.length === 0"
:route-add="{name: 'addFlight'}"
label-add="Přidat let"
>
Nemáš zaznamenaný žádný let.
</BasicInfoBanner>
<FlightsList v-else :items="flights" @delete="handleDeleteFlight($q, $event)"/>
<FlightsList v-else :items="flights"/>
<FAB mode="add" :router-link="{name: 'addFlight'}"/>
</template>
src/pages/profile/flight/NewFlightPage.vue
+19 -21
View File
@@ -1,28 +1,21 @@
<script setup>
import {onMounted, ref} from "vue";
import {computed, onMounted, ref} from "vue";
import {useAircraftsStore} from "stores/Aircrafts";
import {useFlightsStore} from "stores/Flights";
import {useRouter} from "vue-router";
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
import {storeToRefs} from "pinia";
import {useAirportsStore} from "stores/Airports";
import {useAppStore} from "stores/App";
import FlightFormSteps from "components/flights/form/FlightFormSteps.vue";
import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
import {useAppStore} from "stores/App";
import {isRequestPending} from "src/composables/objects/flight";
import FlightEditSkeleton from "components/flights/FlightEditSkeleton.vue";
const loading = ref(true);
onMounted(() => {
const promises = [
useAircraftsStore().fetch(),
usePointsOfInterestStore().fetch(),
useFlightsStore().fetch(),
useAirportsStore().fetch(),
];
loading.value = true;
Promise.all(promises).finally(() => loading.value = false);
useAircraftsStore().fetch()
usePointsOfInterestStore().fetch()
useFlightsStore().fetch()
useAirportsStore().fetch()
useAppStore().setPageTitle("Nový let");
useAppStore().setBreadcrumbs([
@@ -31,9 +24,14 @@ onMounted(() => {
]);
});
const aircrafts = storeToRefs(useAircraftsStore()).items;
const locations = storeToRefs(usePointsOfInterestStore()).items;
const airports = storeToRefs(useAirportsStore()).items;
const {isMutationRunning} = storeToRefs(useFlightsStore());
const {aircrafts} = storeToRefs(useAircraftsStore());
const {pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
const {airports} = storeToRefs(useAirportsStore());
const loading = computed(() => [
useAircraftsStore().isQueryRunning, usePointsOfInterestStore().isQueryRunning, useAirportsStore().isQueryRunning
].some(i => i.value))
const router = useRouter();
const handleSave = (formData) => {
@@ -49,11 +47,11 @@ const handleSave = (formData) => {
<FlightEditSkeleton step="basic" v-if="loading"/>
<template v-else>
<FlightFormBasic
@save="handleSave"
:is-request-pending="isRequestPending"
:aircrafts="aircrafts"
:airports="airports"
:locations="locations"
@save="handleSave"
:is-request-pending="isMutationRunning"
:aircrafts="aircrafts"
:airports="airports"
:locations="pointsOfInterest"
/>
</template>
</template>
src/pages/profile/flight/PhotoEditorPage.vue
+147 -144
View File
@@ -7,11 +7,13 @@ import {flightName} from "src/composables/objects/flight";
import VuePictureCropper from 'vue-picture-cropper';
import {croppedAreaForPreview, getPreviewUrl} from "src/composables/photos/editor/preview";
import {compare, onResize, splitter, splitterWidth} from "src/composables/photos/editor/splitter";
import {aspectRatioOptions, croppedArea, cropperReady, selectedAspectRatio, setCropData} from "src/composables/photos/editor/crop";
import {fetchPhoto, loading, photo, photoAspectRatio} from "src/composables/photos/editor/photo";
import {aspectRatioOptions, croppedArea, cropperReady, photoAspectRatio, selectedAspectRatio, setCropData} from "src/composables/photos/editor/crop";
import {debounce, useQuasar} from "quasar";
import {successObject} from "src/composables/dialog";
import PhotoEditorSkeleton from "components/photos/PhotoEditorSkeleton.vue";
import {storeToRefs} from "pinia";
import FormSubmitButton from "components/FormSubmitButton.vue";
import FormWrapper from "components/FormWrapper.vue";
const $route = useRoute();
const $q = useQuasar();
@@ -43,24 +45,24 @@ watch(() => [adjustment.value, croppedAreaForPreview.value], debounce(() => {
const savePhotoAdjustment = (photoId) => {
const adjustmentInput = {...adjustment.value};
if (croppedArea.value.left !== null) {
if (croppedArea.value && croppedArea.value.left !== null) {
adjustmentInput.crop = {...croppedArea.value}
}
usePhotosStore().adjust(photoId, adjustmentInput).then((data) => {
noCacheTimestamp.value = (new Date()).getTime();
photo.value = data;
$q.notify(successObject("Fotka úspěšně upravena"));
});
};
onMounted(() => {
fetchPhoto(photoId).then(() => {
const flightNameFormatted = flightName(photo.value.flight);
usePhotosStore().fetchDetail(photoId).then((p) => {
const flightNameFormatted = flightName(p.flight);
if (photo.value.adjustment) {
const photoAdjustment = photo.value.adjustment;
photoAspectRatio.value = p.width / p.height;
if (p.adjustment) {
const photoAdjustment = p.adjustment;
const src = photoAdjustment || defaultAdjustments;
for (const i in defaultAdjustments) {
adjustment.value[i] = src[i];
@@ -77,33 +79,35 @@ onMounted(() => {
}
useAppStore().setBreadcrumbs([
{to: {name: "myFlights"}, label: "Moje lety"},
{to: {name: "flightDetail", params: {id: photo.value.flightId}}, label: flightNameFormatted},
{to: {name: "flightEdit", params: {id: photo.value.flightId, step: 'photos'}}, label: "Fotografie"},
{to: {name: "flightDetail", params: {id: p.flightId}}, label: flightNameFormatted},
{to: {name: "flightEdit", params: {id: p.flightId, step: 'photos'}}, label: "Fotografie"},
{label: "Foto editor"}
]);
})
useAppStore().setPageTitle("Foto editor");
});
const {isQueryRunning, isMutationRunning, photo} = storeToRefs(usePhotosStore());
</script>
<template>
<q-resize-observer @resize="onResize" :debounce="100"/>
<PhotoEditorSkeleton v-if="loading" />
<PhotoEditorSkeleton v-if="isQueryRunning"/>
<template v-if="!loading">
<template v-if="!isQueryRunning">
<q-card :style="`width: ${splitterWidth}px; margin: 0 auto`">
<VuePictureCropper
v-if="editorTab === 'crop'"
:img="uncroppedAdjusted"
:boxStyle="{
v-if="editorTab === 'crop'"
:img="uncroppedAdjusted"
:boxStyle="{
width: '100%',
height: '100%',
backgroundColor: '#f8f8f8',
margin: 'auto',
}"
:options="{
:options="{
viewMode: 1,
autoCropArea: 1,
dragMode: 'none',
@@ -111,8 +115,8 @@ onMounted(() => {
draggable: false,
rotatable: false,
}"
@cropend="setCropData"
@ready="cropperReady"
@cropend="setCropData"
@ready="cropperReady"
/>
<div class="overflow-hidden relative-position" v-else-if="editorTab === 'rotate'">
@@ -123,29 +127,29 @@ onMounted(() => {
<div class="overflow-hidden" v-else>
<q-img fit="contain" :src="croppedAdjusted" v-show="!compare"/>
<q-splitter
v-show="compare"
v-model="splitter"
:limits="[0, 100]"
:style="{
v-show="compare"
v-model="splitter"
:limits="[0, 100]"
:style="{
height: Math.round(splitterWidth / photoAspectRatio) + 'px',
width: splitterWidth.value + 'px'
}"
before-class="overflow-hidden"
after-class="overflow-hidden">
before-class="overflow-hidden"
after-class="overflow-hidden">
<template #before>
<img
:width="splitterWidth"
class="absolute-top-left"
:src="croppedUnadjusted"
alt="before"
:width="splitterWidth"
class="absolute-top-left"
:src="croppedUnadjusted"
alt="before"
/>
</template>
<template #after>
<img
:width="splitterWidth"
class="absolute-top-right"
:src="croppedAdjusted"
alt="after"
:width="splitterWidth"
class="absolute-top-right"
:src="croppedAdjusted"
alt="after"
/>
</template>
</q-splitter>
@@ -167,121 +171,120 @@ onMounted(() => {
</q-tabs>
<q-separator/>
<q-tab-panels v-model="editorTab" animated>
<q-tab-panel name="colors">
<q-list>
<q-item>
<q-item-section avatar>
<q-icon name="contrast"/>
</q-item-section>
<q-item-section>
<q-slider
v-model="adjustment.contrast"
:min="0.5"
:max="1.5"
:step="0.01"
label-always
@dblclick="adjustment.contrast=1"
:label="true"
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar>
<q-icon name="brightness_6"/>
</q-item-section>
<q-item-section>
<q-slider
v-model="adjustment.brightness"
:min="0.5"
:max="1.5"
:step="0.01"
:label="true"
label-always
@dblclick="adjustment.brightness = 1"
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar>
<q-icon name="palette"/>
</q-item-section>
<q-item-section>
<q-slider
v-model="adjustment.saturation"
:min="0"
:max="2"
:step="0.05"
:label="true"
label-always
@dblclick="adjustment.saturation = 1"
/>
</q-item-section>
</q-item>
</q-list>
</q-tab-panel>
<q-tab-panel name="details">
<q-list>
<q-item>
<q-item-section avatar>
<q-icon name="deblur"/>
</q-item-section>
<q-item-section>
<q-slider
v-model="adjustment.sharpness"
:min="-3"
:max="8"
:step="1"
:label="true"
label-always
snap
@dblclick="adjustment.sharpness=1"
/>
</q-item-section>
</q-item>
</q-list>
</q-tab-panel>
<q-tab-panel name="rotate">
<q-list>
<q-item>
<q-item-section avatar>
<q-btn round flat icon="rotate_left" @click="adjustment.rotate -= 0.1"/>
</q-item-section>
<q-item-section>
<FormWrapper :is-request-pending="isMutationRunning" @save="savePhotoAdjustment(photoId)">
<q-tab-panels v-model="editorTab" animated>
<q-tab-panel name="colors">
<q-list>
<q-item>
<q-item-section avatar>
<q-icon name="contrast"/>
</q-item-section>
<q-item-section>
<q-slider
v-model="adjustment.rotate"
:min="-45"
:max="45"
:step="0.1"
:label="true"
label-always
@dblclick="adjustment.rotate=0"
v-model="adjustment.contrast"
:min="0.5"
:max="1.5"
:step="0.01"
label-always
@dblclick="adjustment.contrast=1"
:label="true"
/>
</q-item-section>
<q-item-section avatar>
<q-btn round flat icon="rotate_right" @click="adjustment.rotate += 0.1"/>
</q-item-section>
</q-item>
</q-list>
</q-tab-panel>
<q-tab-panel name="crop">
<q-btn-toggle
no-caps
spread
v-model="selectedAspectRatio"
toggle-color="primary"
:options="aspectRatioOptions"
class="q-ma-lg"
/>
</q-tab-panel>
</q-tab-panels>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar>
<q-icon name="brightness_6"/>
</q-item-section>
<q-item-section>
<q-slider
v-model="adjustment.brightness"
:min="0.5"
:max="1.5"
:step="0.01"
:label="true"
label-always
@dblclick="adjustment.brightness = 1"
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar>
<q-icon name="palette"/>
</q-item-section>
<q-item-section>
<q-slider
v-model="adjustment.saturation"
:min="0"
:max="2"
:step="0.05"
:label="true"
label-always
@dblclick="adjustment.saturation = 1"
/>
</q-item-section>
</q-item>
</q-list>
</q-tab-panel>
<q-tab-panel name="details">
<q-list>
<q-item>
<q-item-section avatar>
<q-icon name="deblur"/>
</q-item-section>
<q-item-section>
<q-slider
v-model="adjustment.sharpness"
:min="-3"
:max="8"
:step="1"
:label="true"
label-always
snap
@dblclick="adjustment.sharpness=1"
/>
</q-item-section>
</q-item>
</q-list>
</q-tab-panel>
<q-tab-panel name="rotate">
<q-list>
<q-item>
<q-item-section avatar>
<q-btn round flat icon="rotate_left" @click="adjustment.rotate -= 0.1"/>
</q-item-section>
<q-item-section>
<q-slider
v-model="adjustment.rotate"
:min="-45"
:max="45"
:step="0.1"
:label="true"
label-always
@dblclick="adjustment.rotate=0"
/>
</q-item-section>
<q-item-section avatar>
<q-btn round flat icon="rotate_right" @click="adjustment.rotate += 0.1"/>
</q-item-section>
</q-item>
</q-list>
</q-tab-panel>
<q-tab-panel name="crop">
<q-btn-toggle
no-caps
spread
v-model="selectedAspectRatio"
toggle-color="primary"
:options="aspectRatioOptions"
class="q-ma-lg"
/>
</q-tab-panel>
</q-tab-panels>
</FormWrapper>
</q-card-section>
<q-card-actions>
<q-space/>
<q-btn color="primary" icon="save" @click="savePhotoAdjustment(photoId)">Uložit</q-btn>
</q-card-actions>
</q-card>
</template>
</template>
src/pages/profile/organization/EditOrganizationPage.vue
+8 -6
View File
@@ -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 -2
View File
@@ -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
+11 -10
View File
@@ -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
+11 -5
View File
@@ -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>
src/pages/profile/poi/EditPointOfInterestPage.vue
+7 -7
View File
@@ -1,6 +1,5 @@
<script setup>
import POIEditSkeleton from "components/poi/POIEditSkeleton.vue";
import {fetchPoi, loading, poi} from "src/composables/objects/poi";
import {onMounted} from "vue";
import {useRoute, useRouter} from "vue-router";
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
@@ -16,11 +15,11 @@ import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
const poiId = parseInt(useRoute().params.id);
onMounted(() => {
fetchPoi(poiId).then(() => {
useAppStore().setPageTitle(`${poi.value.name} - editace`);
usePointsOfInterestStore().fetchDetail(poiId).then((p) => {
useAppStore().setPageTitle(`${p.name} - editace`);
useAppStore().setBreadcrumbs([
{to: {name: "poi"}, label: "Zajímavá místa"},
{to: {name: "poiDetail", params: {id: poiId}}, label: poi.value.name},
{to: {name: "poiDetail", params: {id: poiId}}, label: p.name},
{label: "Editace"},
]);
});
@@ -30,6 +29,7 @@ onMounted(() => {
const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).items;
const loggedUser = storeToRefs(useUserStore()).user;
const {isQueryRunning, pointOfInterest, isMutationRunning} = storeToRefs(usePointsOfInterestStore());
const $q = useQuasar();
const router = useRouter();
@@ -42,10 +42,10 @@ const handleSave = (data) => {
</script>
<template>
<POIEditSkeleton v-if="loading"/>
<POIEditSkeleton v-if="isQueryRunning"/>
<AccessDeniedBanner
v-else-if="poi.createdById !== loggedUser.id"
v-else-if="pointOfInterest.createdById !== loggedUser.id"
:route-back="{name: 'poiDetail', params: {id: poiId}}"
/>
<POIForm :poi="poi" :types="poiTypes" v-else @save="handleSave"/>
<POIForm :poi="pointOfInterest" :types="poiTypes" v-else @save="handleSave"/>
</template>
src/pages/profile/poi/NewPointOfInterestPage.vue
+4 -3
View File
@@ -16,15 +16,16 @@ const handleSave = (formData) => {
router.push({name: "poi"});
})
}
const isRequestPending = storeToRefs(usePointsOfInterestStore()).isMutationRunning;
useAppStore().setPageTitle("Nové zajímavé místo");
useAppStore().setBreadcrumbs([
{to: "poi", label: "Zajímavá místa"},
{label: "Nové"},
])
const {isMutationRunning} = storeToRefs(usePointsOfInterestStore());
</script>
<template>
<POIForm @save="handleSave" :is-request-pending="isRequestPending"/>
<POIForm @save="handleSave" :is-request-pending="isMutationRunnin"/>
</template>
src/pages/profile/poi/PointOfInterestDetailPage.vue
+18 -17
View File
@@ -3,57 +3,58 @@ import {onMounted} from "vue";
import {useRoute} from "vue-router";
import POIDetailSkeleton from "components/poi/POIDetailSkeleton.vue";
import FAB from "components/FAB.vue";
import {fetchPoi, loading, poi} from "src/composables/objects/poi";
import PhotosList from "components/photos/PhotosEditorList.vue";
import {useAppStore} from "stores/App";
import EmbeddedMap from "components/map/EmbeddedMap.vue";
import {useUserStore} from "stores/User";
import {storeToRefs} from "pinia";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import FlightsList from "components/flights/FlightsList.vue";
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
import PhotoGallery from "components/photos/PhotoGallery.vue";
const loggedUser = storeToRefs(useUserStore()).user;
onMounted(() => {
fetchPoi(useRoute().params.id).then(() => {
useAppStore().setPageTitle(`${poi.value.name}`);
usePointsOfInterestStore().fetchDetail(useRoute().params.id).then((p) => {
useAppStore().setPageTitle(`${p.name}`);
useAppStore().setBreadcrumbs([
{to: {name: "poi"}, label: "Zajímavá místa"},
{label: poi.value.name},
{label: p.name},
])
});
})
});
const {isQueryRunning, pointOfInterest} = storeToRefs(usePointsOfInterestStore());
</script>
<template>
<POIDetailSkeleton v-if="loading || !poi"/>
<POIDetailSkeleton v-if="isQueryRunning || !pointOfInterest"/>
<template v-else>
<article v-html="poi.description" class="q-my-lg" />
<article v-html="pointOfInterest.description" class="q-my-lg" />
<EmbeddedMap
v-if="poi.gpsLatitude && poi.gpsLongitude"
:gps-latitude="poi.gpsLatitude"
:gps-longitude="poi.gpsLongitude"
v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
:gps-latitude="pointOfInterest.gpsLatitude"
:gps-longitude="pointOfInterest.gpsLongitude"
:zoom="13"
/>
<BasicInfoBanner v-else>
Tento bod nemá nastavenou polohu. Po nastavení polohy tu bude zobrazena mapa.
</BasicInfoBanner>
<PhotosList
:photos="poi.photos"
:show-actions="false"
v-if="poi.photos.length > 0"
<PhotoGallery
:photos="pointOfInterest.photos"
v-if="pointOfInterest.photos.length > 0"
/>
<BasicInfoBanner v-else>
Pokud přidáš toto místo k nějaké fotce, zobrazí se tu.
</BasicInfoBanner>
<FlightsList :items="poi.flights" v-if="poi.flights.length > 0 && loggedUser.id === poi.createdById"/>
<FlightsList :items="pointOfInterest.flights" v-if="pointOfInterest.flights.length > 0 && loggedUser.id === pointOfInterest.createdById"/>
<FAB v-if="poi.createdById === loggedUser.id" :router-link="{name: 'poiEdit', params:{id: poi.id}}" mode="edit"/>
<FAB v-if="pointOfInterest.createdById === loggedUser.id" :router-link="{name: 'poiEdit', params:{id: pointOfInterest.id}}" mode="edit"/>
</template>
</template>
src/pages/profile/poi/PointsOfInterestPage.vue
+7 -6
View File
@@ -1,24 +1,25 @@
<script setup>
import {onMounted} from "vue";
import {fetchPOIList, loading, pointsOfInterest} from "src/composables/objects/poi";
import {useAppStore} from "stores/App";
import POIList from "components/poi/POIList.vue";
import FAB from "components/FAB.vue";
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
import {flights} from "src/composables/objects/flight";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
import {storeToRefs} from "pinia";
onMounted(() => {
fetchPOIList();
usePointsOfInterestStore().fetch();
useAppStore().setPageTitle("Zajímavá místa");
});
useAppStore().setPageTitle("Zajímavá místa")
const {isQueryRunning, pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
</script>
<template>
<BasicListSkeleton :items-count-min="5" :items-count-max="10" v-if="loading"/>
<BasicListSkeleton :items="10" v-if="isQueryRunning"/>
<BasicInfoBanner
v-else-if="!loading && pointsOfInterest.length === 0"
v-else-if="!isQueryRunning && pointsOfInterest.length === 0"
:route-add="{name: 'addPoi'}"
label-add="Přidat"
>