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

Editace fotek v modalu, lepsi datetime picker

Browse Source
This commit is contained in:
Michal Kváček
2023-07-10 08:12:48 +02:00
parent 3d88397d21
commit bbb21278fd
18 changed files with 274 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DialogWrapper.vue
+38
View File
@@ -0,0 +1,38 @@
<template>
<q-dialog ref="dialogRef" @hide="onDialogHide">
<q-card class="q-dialog-plugin">
<slot/>
<q-card-actions align="right">
<q-btn label="Zrušit" @click="onCancelClick"/>
<q-btn color="primary" label="Uložit" @click="onOKClick"/>
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script setup>
import {useDialogPluginComponent} from "quasar";
const {dialogRef, onDialogHide, onDialogOK, onDialogCancel} = useDialogPluginComponent();
const emits = defineEmits(["save", ...useDialogPluginComponent.emits]);
const props = defineProps({
formData: {
type: [Object, Boolean],
required: false,
default: false
},
objectId: {
type: Number,
required: false,
default: null
}
})
const onOKClick = () => {
onDialogOK();
emits("save", {...props.formData, id: props.objectId});
}
const onCancelClick = onDialogCancel;
</script>
src/components/FormWrapper.vue
+2 -4
View File
@@ -6,7 +6,6 @@ import {useSlots} from "vue";
const props = defineProps({
modelValue: {
type: Object,
required: true
},
resetAfterSubmit: {
type: Boolean,
@@ -14,9 +13,8 @@ const props = defineProps({
default: false
},
isRequestPending,
saveButton: {
type: Object,
type: [Object, Boolean],
required: false,
default: () => ({
label: "Save",
@@ -42,7 +40,7 @@ const saveForm = () => {
<slot name="saveButton" />
<q-btn type="submit" color="primary" :icon="props.saveButton.icon" :loading="props.isRequestPending">
<q-btn type="submit" color="primary" v-if="saveButton" :icon="props.saveButton.icon" :loading="props.isRequestPending">
{{ props.saveButton.label }}
<template v-slot:loading>
Loading...
src/components/flights/FlightsList.vue
+2 -2
View File
@@ -2,6 +2,7 @@
import {formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
import {computed} from "vue";
import {useQuasar} from "quasar";
import {useFlightsStore} from "stores/Flights";
const props = defineProps({
items: {
@@ -19,11 +20,10 @@ const deleteFlight = (flightId) => {
cancel: true,
persistent: true
}).onOk(() => {
// flightsStore.deleteItem(flightId);
useFlightsStore().deleteItem(flightId);
})
}
const totalFlightTime = computed(() => {
return props.items.reduce((acc, flight) => acc + flight.flightDurationMinutes, 0);
})
src/components/flights/PhotoForm.vue
+35
View File
@@ -0,0 +1,35 @@
<script setup>
import {computed, onMounted, ref} from "vue";
import {setDefaultData} from "src/composables/form/formHandling";
import DialogWrapper from "components/DialogWrapper.vue";
import FormWrapper from "components/FormWrapper.vue";
const props = defineProps({
photo: {
type: Object
}
});
const photoId = computed(() => props.photo?.id || null);
const formData = ref({
name: "",
description: ""
});
const setup = (() => {
setDefaultData(formData.value, props.photo || {});
})
</script>
<template>
<DialogWrapper :formData="formData" :object-id="photoId" @show="setup">
<q-img :src="photo.thumbnailUrl"/>
<q-card-section>
<FormWrapper :save-button="false">
<q-input v-model="formData.name" label="Název"/>
<q-input type="textarea" v-model="formData.description" label="Popis"/>
</FormWrapper>
</q-card-section>
</DialogWrapper>
</template>
src/components/flights/form/FlightFormBasic.vue
+3 -18
View File
@@ -64,12 +64,6 @@ onMounted(() => {
<template>
<FormWrapper v-model="formData" v-if="isMounted">
<!-- {{ formData }}-->
<!-- <hr>-->
<!-- {{ flight }}-->
<!-- <hr>-->
<div class="row">
<div class="col">
<q-select
@@ -92,35 +86,26 @@ onMounted(() => {
<template v-if="formData.aircraftId">
<div class="row">
<div class="col col-12 col-md-6">
<!-- <h3>Vzlet</h3>-->
<h3>Vzlet</h3>
<AnotherDatetimePicker v-model="formData.takeoffDatetime" label="Datum a čas vzletu: "/>
<AirportLocationInput v-model="formData.takeoffAirportId" :airports="airports" label="Letiště vzletu" takeoff/>
</div>
<div class="col col-12 col-md-6" v-if="!!formData.takeoffDatetime && !!formData.takeoffAirportId">
<!-- <h3>Přistání</h3>-->
<h3>Přistání</h3>
<AnotherDatetimePicker v-model="formData.landingDatetime" label="Datum a čas přistání"/>
<AirportLocationInput v-model="formData.landingAirportId" :airports="airports" label="Letiště přistání" landing/>
</div>
</div>
<div class="row">
<div class="row" v-if="formData.landingAirportId">
<div class="col">
<q-checkbox v-model="formData.solo" label="Solo?"/>
</div>
</div>
<div class="row" v-if="formData.landingAirportId">
<div class="col">
<q-input v-model="formData.landings" label="Počet přistání" type="number" min="1"/>
</div>
<div class="col">
<q-input v-model="formData.durationTotal" readonly min=0 label="Délka letu (v minutách)" type="number"/>
</div>
</div>
<!-- <TabsStepper v-model="formStep" next-step="track" v-if="formData.landingAirportId"/>-->
</template>
</FormWrapper>
</template>
src/components/flights/form/FlightFormPhotos.vue
-29
View File
@@ -12,39 +12,10 @@ const props = defineProps({
const formData = reactive({
photos: []
});
const deletePhoto = (id) => {
console.log(id);
};
const openEdit = (photo) => {
};
</script>
<template>
<FormWrapper v-model="formData">
<div class="row">
<div class="col-12 col-md-4 col-lg-3" v-for="photo in flight.photos" :key="photo.id">
<q-card class="q-my-sm q-mx-sm">
<q-img src="https://cdn.quasar.dev/img/parallax2.jpg">
<div class="absolute-bottom">
<div class="text-h6">{{ photo.name }} jmeno</div>
<div class="text-subtitle2">{{ photo.description }}nejaky popis</div>
</div>
</q-img>
<q-card-actions>
<q-btn flat icon="edit" color="blue" @click="openEdit(photo)"></q-btn>
<q-btn flat icon="delete" color="red" @click="deletePhoto(photo.id)"></q-btn>
</q-card-actions>
</q-card>
</div>
</div>
<q-file multiple v-model="formData.photos" label="Fotky"/>
</FormWrapper>
</template>
src/components/inputs/AnotherDatetimePicker.vue
+32 -4
View File
@@ -77,6 +77,23 @@ const cancelSelection = () => {
timeModel.value = originalTime;
popupProxy.value.hide();
}
const myLocale = {
/* starting with Sunday */
days: ["Pondělí", "Úterý", "Středa", "Čtvrtek", "Pátek", "Sobota", "Neděle"],
daysShort: ["Po", "Út", "St", "Čt", "Pá", "So", "Ne"],
months: [
"Leden", "Únor", "Březen", "Duben", "Květen", "Červen", "Červenec", "Srpen", "Září", "Říjen", "Listopad",
"Prosinec"
],
monthsShort: ["led.", "úno.", "bře.", "dub.", "kvě.", "čvn.", "čvc.", "srp.", "zář.", "říj.", "lis.", "pro."],
firstDayOfWeek: 1, // 0-6, 0 - Sunday, 1 Monday, ...
format24h: true,
pluralDay: 'dny'
}
// https://quasar.dev/vue-composables/use-form-child - mozna resi ohack s onMounted()?
</script>
<template>
@@ -87,12 +104,12 @@ const cancelSelection = () => {
<template #default>
<q-popup-proxy ref="popupProxy" @hide="emitModelUpdate" @show="setOriginalValues">
<div>
<div class="proxy-wrapper">
<div class="row">
<div class="col-12 col-md-6" v-if="showDatePicker">
<q-date square v-model="dateModel" :today-btn="true" flat mask="YYYY-MM-DD"/>
<div class="col-12 col-sm-6" v-if="showDatePicker">
<q-date square v-model="dateModel" :today-btn="true" flat mask="YYYY-MM-DD" :locale="myLocale"/>
</div>
<div class="col-12 col-md-6" v-if="showTimePicker">
<div class="col-12 col-sm-6" v-if="showTimePicker">
<q-time square v-model="timeModel" format24h flat mask="HH:mm"/>
</div>
</div>
@@ -109,3 +126,14 @@ const cancelSelection = () => {
</template>
</q-input>
</template>
<style scoped>
.proxy-wrapper {
background: white;
}
.q-date, .q-time {
width: 100%;
}
</style>
src/components/photos/PhotosList.vue
+50
View File
@@ -0,0 +1,50 @@
<script setup>
const props = defineProps({
photos: {
type: Array
},
showActions: {
type: Boolean,
required: false,
default: true
}
});
const emits = defineEmits(["edit", "delete", "detail"])
const openEdit = (photo) => {
emits("edit", photo);
};
const deletePhoto = (id) => {
emits("delete", id);
};
const openDetail = (photo) => {
emits("detail", photo);
}
</script>
<template>
<div class="row">
<div class="col-12 col-md-4 col-lg-3" v-for="photo in photos" :key="photo.id">
<q-card class="q-my-sm q-mx-sm">
<q-img :src="photo.thumbnailUrl" @click="openDetail">
<div class="absolute-bottom">
<div class="text-h6" v-if="photo.name !== ''">
{{ photo.name }}
</div>
<div class="text-subtitle2" v-if="photo.description !== ''">
{{ photo.description }}
</div>
</div>
</q-img>
<q-card-actions v-if="showActions">
<q-btn flat icon="edit" color="blue" @click="openEdit(photo)"></q-btn>
<q-btn flat icon="delete" color="red" @click="deletePhoto(photo.id)"></q-btn>
</q-card-actions>
</q-card>
</div>
</div>
</template>
src/composables/datetimeUtils.js
-4
View File
@@ -44,12 +44,8 @@ export const parseDate = (datetimeStr, format = FORMAT_ISO) => {
}
export const formatDatetime = (datetime, format = FORMAT_DATETIME_LONG) => {
console.log("orignal ", datetime);
if (typeof datetime === 'string') {
datetime = parseDate(datetime);
}
console.log(datetime);
return date.formatDate(datetime, format);
}
src/composables/dialog.js
+12
View File
@@ -0,0 +1,12 @@
export const confirmObject = (message, title) => ({
title: title || "Opravdu?",
message: message || "",
cancel: true,
persistent: true
});
export const successObject = (message) => ({
message,
position: "top",
color: "positive"
});
src/graphql/fragments/flight.js
+3 -5
View File
@@ -1,6 +1,7 @@
import gql from "graphql-tag";
import {FRAGMENT_AIRCRAFT_FULL_INFO} from "src/graphql/fragments/aircraft";
import {FRAGMENT_AIRPORT_INFO} from "src/graphql/fragments/airport";
import {FRAGMENT_PHOTO_FULL_INFO} from "src/graphql/fragments/photo";
export const FRAGMENT_FLIGHT_FULL_INFO = gql`
fragment flightFullInfo on Flight {
@@ -25,15 +26,12 @@ fragment flightFullInfo on Flight {
...aircraftFullInfo
}
photos {
url
thumbnailUrl
name
description
...photoFullInfo
}
}
${FRAGMENT_PHOTO_FULL_INFO}
${FRAGMENT_AIRCRAFT_FULL_INFO}
${FRAGMENT_AIRPORT_INFO}
`;
src/graphql/fragments/photo.js
+11
View File
@@ -0,0 +1,11 @@
import gql from "graphql-tag";
export const FRAGMENT_PHOTO_FULL_INFO = gql`
fragment photoFullInfo on Photo {
id
url
thumbnailUrl
filename
name
description
}`;
src/graphql/mutations/photo.js
+17 -11
View File
@@ -1,24 +1,30 @@
import gql from "graphql-tag";
import {FRAGMENT_FLIGHT_FULL_INFO} from "src/graphql/fragments/flight";
import {FRAGMENT_PHOTO_FULL_INFO} from "src/graphql/fragments/photo";
export const UPLOAD_PHOTO = gql`
mutation uploadPhoto($input: UploadPhotoInput!) {
uploadPhoto(input: $input) {
url
thumbnailUrl
filename
name
description
...photoFullInfo
}
}
${FRAGMENT_PHOTO_FULL_INFO}
`
export const EDIT_FLIGHT = gql`
mutation editFlight($id: Int!, $input: EditFlightInput!) {
editFlight(id: $id, input: $input) {
...flightFullInfo
export const EDIT_PHOTO = gql`
mutation editPhoto($id: Int!, $input: EditPhotoInput!) {
editPhoto(id: $id, input: $input) {
...photoFullInfo
}
}
${FRAGMENT_FLIGHT_FULL_INFO}
${FRAGMENT_PHOTO_FULL_INFO}
`;
export const DELETE_PHOTO = gql`
mutation deletePhoto($id: Int!) {
deletePhoto(id: $id) {
id
}
}
`;
src/pages/profile/details/AircraftDetailPage.vue
+3 -6
View File
@@ -4,6 +4,7 @@ import {useAircraftsStore} from "stores/Aircrafts";
import {useRoute, useRouter} from "vue-router";
import {useQuasar} from "quasar";
import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
import {confirmObject} from "src/composables/dialog";
const aircraftStore = useAircraftsStore();
const route = useRoute();
@@ -23,12 +24,8 @@ onMounted(() => {
const $q = useQuasar();
const confirmDelete = (id) => {
$q.dialog({
title: 'Potvrzení',
message: 'Opravdu chceš smazat toto letadlo?',
cancel: true,
persistent: true
}).onOk(() => {
$q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
.onOk(() => {
aircraftStore.delete(id).then(() => {
router.push({name: "aircrafts"});
$q.notify({message: "Letadlo uspesne odstraneno", position: "top", color: "positive"});
src/pages/profile/forms/EditAircraftPage.vue
+5 -2
View File
@@ -27,7 +27,6 @@ let loadedAircraft = ref(null);
onMounted(() => {
useAircraftsStore().fetchDetail(aircraftId).then((data) => {
loadedAircraft.value = data;
}).catch(err => {
console.error(err);
})
@@ -40,6 +39,10 @@ onMounted(() => {
<template v-if="loadedAircraft">
<h1>Editace letadla {{ loadedAircraft.callSign }}</h1>
<AircraftForm @save="handleSave" :default-values="loadedAircraft" :is-request-pending="isRequestPending"/>
<AircraftForm
@save="handleSave"
:default-values="loadedAircraft"
:is-request-pending="isRequestPending"
/>
</template>
</template>
src/pages/profile/forms/FlightEditPage.vue
+39 -7
View File
@@ -15,6 +15,9 @@ import {useSecondPilotsStore} from "stores/SecondPilots";
import FlightFormNotes from "components/flights/form/FlightFormNotes.vue";
import FlightFormPhotos from "components/flights/form/FlightFormPhotos.vue";
import {usePhotosStore} from "stores/Photo";
import PhotosList from "components/photos/PhotosList.vue";
import {confirmObject, successObject} from "src/composables/dialog";
import PhotoForm from "components/flights/PhotoForm.vue";
useMeta({title: "Editace letu"});
@@ -54,27 +57,49 @@ onMounted(() => {
const handleFlightEdit = (data) => {
useFlightsStore().update(flightId, data).then(() => {
$q.notify({message: "Uspesne upraveno", position: "top", color: "positive"});
$q.notify(successObject("Úspěšně upraveno"));
fetchFlight(flightId);
})
}
const handlePhotosUpload = (data) => {
console.log(data);
const promises = [];
for (const photo of data.photos) {
promises.push(usePhotosStore().upload(flightId, {photo}));
}
Promise.all(promises).then(() => {
$q.notify({message: "Uspesne nahrano", position: "top", color: "positive"});
$q.notify(successObject("Úspěšně nahráno"));
fetchFlight(flightId);
});
}
const _findPhotoIndex = (photoId) => flight.value.photos.findIndex((object) => object.id === photoId);
const confirmPhotoDelete = (id) => {
$q.dialog(confirmObject("Opravdu chces smazat tuto fotku?"))
.onOk(() => {
usePhotosStore().delete(id).then((data) => {
flight.value.photos.splice(_findPhotoIndex(data.id), 1);
});
});
}
const handlePhotoUpdate = (formData) => {
const photoId = formData.id;
delete formData.id;
usePhotosStore().update(photoId, formData).then((data) => {
const idx = _findPhotoIndex(data.id);
flight.value.photos[idx] = data;
})
}
const openEdit = ref(false);
const editPhoto = ref(null);
const openPhotoEdit = (photo) => {
openEdit.value = true;
editPhoto.value = photo;
}
</script>
<template>
@@ -105,6 +130,13 @@ const handlePhotosUpload = (data) => {
</q-tab-panel>
<q-tab-panel name="photos">
<PhotosList
:photos="flight.photos"
@edit="openPhotoEdit"
@delete="confirmPhotoDelete"
/>
<PhotoForm v-model="openEdit" :photo="editPhoto" @save="handlePhotoUpdate"/>
<FlightFormPhotos
:flight="flight"
@save="handlePhotosUpload"
src/stores/App.js
+2 -2
View File
@@ -1,4 +1,5 @@
import {defineStore} from 'pinia'
import {useQuasar} from "quasar";
export const useAppStore = defineStore('App', {
state: () => ({
@@ -6,8 +7,7 @@ export const useAppStore = defineStore('App', {
fabButton: {icon: null, label: null, action: {}}
}),
getters: {
},
getters: {},
actions: {
}
src/stores/Photo.js
+12 -1
View File
@@ -1,6 +1,6 @@
import {defineStore} from "pinia";
import {apolloWrapper} from "src/graphql/apollo";
import {UPLOAD_PHOTO} from "src/graphql/mutations/photo";
import {DELETE_PHOTO, EDIT_PHOTO, UPLOAD_PHOTO} from "src/graphql/mutations/photo";
export const usePhotosStore = defineStore('photos', {
@@ -24,5 +24,16 @@ export const usePhotosStore = defineStore('photos', {
return data.uploadPhoto;
})
},
update(id, formData) {
return apolloWrapper.mutate(EDIT_PHOTO, {id, input: formData}).then(({data}) => {
return data.editPhoto;
})
},
delete(photoId) {
return apolloWrapper.mutate(DELETE_PHOTO, {id: photoId}).then(({data}) => {
return data.deletePhoto;
});
}
}
});