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>