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

Refaktoring

Browse Source
This commit is contained in:
Michal Kváček
2023-09-13 10:03:41 +02:00
parent 63ae0fa351
commit e203a7d229
14 changed files with 347 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/inputs/DatetimePicker.vue
+57 -21
View File
@@ -1,6 +1,6 @@
<script setup>
import {computed, onMounted, ref, watch} from "vue";
import {FORMAT_DATETIME_LONG, FORMAT_ISO, formatDatetime, parseDate} from "src/composables/datetimeUtils";
import {FORMAT_DATE, FORMAT_DATE_ISO, FORMAT_DATETIME_LONG, FORMAT_ISO, formatDatetime, parseDate} from "src/composables/datetimeUtils";
import {commonProps} from "src/composables/inputs";
const props = defineProps({
@@ -23,10 +23,17 @@ const props = defineProps({
}
})
let dateModel = ref("");
let timeModel = ref("");
const emit = defineEmits(['update:modelValue']);
const dateModel = ref("");
const timeModel = ref("");
const tab = ref("date");
let originalTime, originalDate;
const popupProxy = ref(null);
const publicModel = computed(() => {
if (!dateModel.value) {
return "";
@@ -35,12 +42,21 @@ const publicModel = computed(() => {
return formatDatetime(dateObject, props.mask);
});
const popupProxy = ref(null);
const showTimePicker = computed(() => containsAnyOf(["H", "h", "m"], props.mask));
const model = computed(() => dateModel.value + "T" + timeModel.value);
const emit = defineEmits(['update:modelValue']);
watch(() => dateModel.value, (newVal, oldVal) => {
tab.value = "time";
});
const model = computed(() => {
if (dateModel.value === '' || timeModel.value === '') return null;
return dateModel.value + "T" + timeModel.value
});
const emitModelUpdate = () => {
if (dateModel.value === '' || timeModel.value === '') return;
if (dateModel.value === '' || timeModel.value === '') {
// console.log(dateModel.value, timeModel.value);
return;
}
const val = parseDate(model.value);
emit("update:modelValue", val);
@@ -57,9 +73,6 @@ const containsAnyOf = (needles, haystack) => {
return false;
}
const showDatePicker = computed(() => containsAnyOf(["YY", "M", "D"], props.mask));
const showTimePicker = computed(() => containsAnyOf(["H", "h", "m"], props.mask));
const setOriginalValues = () => {
originalDate = dateModel.value;
originalTime = timeModel.value;
@@ -110,6 +123,7 @@ watch(() => props.modelValue, (newVal) => {
emitModelUpdate();
}
}, {immediate: true});
</script>
<template>
@@ -120,21 +134,43 @@ watch(() => props.modelValue, (newVal) => {
<template #default>
<q-popup-proxy ref="popupProxy" @hide="emitModelUpdate" @show="setOriginalValues">
<div class="proxy-wrapper">
<div class="row">
<div class="col-12 col-sm-6" v-if="showDatePicker">
<q-date square v-model="dateModel" :options="isDateValid" :today-btn="true" flat mask="YYYY-MM-DD" :locale="myLocale"/>
</div>
<div class="col-12 col-sm-6" v-if="showTimePicker">
<q-time square v-model="timeModel" format24h flat mask="HH:mm:ss"/>
</div>
</div>
<div class="row q-mb-sm">
<div class="proxy-wrapper relative-position" style="min-height: 500px">
<q-tabs v-model="tab" v-if="showTimePicker" class="bg-primary text-white">
<q-tab name="date" icon="event" :label="dateModel ? formatDatetime(dateModel, 'D. M.', FORMAT_DATE_ISO) : 'datum'"/>
<q-tab name="time" v-if="showTimePicker" icon="schedule" :label="model ? formatDatetime(model, 'HH:mm') : 'čas'"/>
</q-tabs>
<q-separator/>
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="date">
<q-date
minimal
flat
v-model="dateModel"
:options="isDateValid"
mask="YYYY-MM-DD"
:locale="myLocale"
/>
</q-tab-panel>
<q-tab-panel name="time" v-if="showTimePicker">
<q-time
v-model="timeModel"
format24h
flat
mask="HH:mm:ss"
/>
</q-tab-panel>
</q-tab-panels>
<div class="row q-mb-sm absolute-bottom">
<div class="col">
<q-btn color="secondary" class="q-ml-sm" @click="cancelSelection">Zrušit</q-btn>
</div>
<div class="col text-right">
<q-btn color="primary" class="q-mr-sm" @click="emitModelUpdate">Nastavit</q-btn>
<q-btn color="primary" class="q-mr-sm" :disable="!dateModel || !timeModel" @click="emitModelUpdate">Nastavit</q-btn>
</div>
</div>
</div>