Skip to content

Commit

Permalink
run prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
boal committed Nov 15, 2024
1 parent ba566ff commit 4600eab
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 39 deletions.
81 changes: 51 additions & 30 deletions frontend/src/components/common/DateRangePicker.vue
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,16 @@
>
<template
#dp-input="{
value,
onInput,
onEnter,
onTab,
onClear,
onBlur,
onKeypress,
onPaste,
onFocus,
}"
value,
onInput,
onEnter,
onTab,
onClear,
onBlur,
onKeypress,
onPaste,
onFocus,
}"
>
<v-text-field
:label="label"
Expand All @@ -59,11 +59,14 @@

<script setup lang="ts">
import type { GeneralConfig } from "@vuepic/vue-datepicker";
import VueDatePicker from "@vuepic/vue-datepicker";
import "@vuepic/vue-datepicker/dist/main.css";
import _ from "lodash";
import { computed } from "vue";
import moment from "moment";
import { computed } from "vue";
interface Props {
label?: string; // Bezeichnung des Datumsfelds
Expand All @@ -76,13 +79,13 @@ interface Props {
const options: Intl.DateTimeFormatOptions = {
year: "numeric",
month: "2-digit",
day: "2-digit"
day: "2-digit",
};
const props = withDefaults(defineProps<Props>(), {
label: "",
required: false,
disabled: false
disabled: false,
});
const minDateProp = computed(() => {
Expand All @@ -101,18 +104,18 @@ const choosenDates = computed({
get() {
return _.isNil(dateRange.value)
? undefined
: dateRange.value.map(date => {
date.setHours(5);
return date;
});
: dateRange.value.map((date) => {
date.setHours(5);
return date;
});
},
set(dates: Array<Date> | undefined) {
dateRange.value = _.toArray(dates).map(date => {
dateRange.value = _.toArray(dates).map((date) => {
date.setHours(5);
return date;
});
}
},
});
// https://vue3datepicker.com/props/localization/#locale
Expand All @@ -123,52 +126,64 @@ const SIX_WEEK_CALENDAR_OPTIONS: any = "center";
// https://vue3datepicker.com/props/calendar-configuration/#week-numbers
const WEEN_NUMBER_OPTIONS: any = {
type: "iso"
type: "iso",
};
// https://vue3datepicker.com/props/modes-configuration/#multi-calendars-configuration
const MULTI_CALENDAR_OPTIONS: any = {
solo: true
solo: true,
};
// https://vue3datepicker.com/props/modes-configuration/#text-input-configuration
const TEXT_INPUT_OPTIONS: any = {
enterSubmit: true,
tabSubmit: true,
format: "dd.MM.yyyy"
format: "dd.MM.yyyy",
};
// https://vue3datepicker.com/props/general-configuration/#config
const GENERAL_DATE_PICKER_CONFIG: GeneralConfig = {
setDateOnMenuClose: true
setDateOnMenuClose: true,
};
// https://vue3datepicker.com/props/formatting/#format
const format = (dateRange: Array<Date>) => {
let dateRangeText = "";
if (!_.isEmpty(dateRange)) {
const firstDate = _.head(dateRange);
const firstDateText = _.isNil(firstDate) ? "" : firstDate.toLocaleDateString(LOCAL_OPTIONS, options);
const firstDateText = _.isNil(firstDate)
? ""
: firstDate.toLocaleDateString(LOCAL_OPTIONS, options);
const lastDate = _.last(dateRange);
const lastDateText = _.isNil(lastDate) ? "" : lastDate.toLocaleDateString(LOCAL_OPTIONS, options);
const lastDateText = _.isNil(lastDate)
? ""
: lastDate.toLocaleDateString(LOCAL_OPTIONS, options);
dateRangeText = `${firstDateText} - ${lastDateText}`;
}
return dateRangeText;
};
function validateTextDate(dateRangeToCheck: string): string | boolean {
const startAndEndDate = _.split(dateRangeToCheck, "-").map(date => date.trim());
const startAndEndDate = _.split(dateRangeToCheck, "-").map((date) =>
date.trim()
);
const startDateText = _.toString(_.head(startAndEndDate));
const isStartDateValid = moment(startDateText, "DD.MM.YYYY", true).isValid();
const startDate = new Date(startDateText);
if (isStartDateValid) {
if (startDate < minDateProp.value) {
const minDatePropText = minDateProp.value.toLocaleDateString("de-DE", options);
const minDatePropText = minDateProp.value.toLocaleDateString(
"de-DE",
options
);
return `Das gewählte Startdatum ist vor dem kleinstmöglichen Startdatum ${minDatePropText}`;
}
if (startDate > maxDateProp.value) {
const maxDatePropText = maxDateProp.value.toLocaleDateString("de-DE", options);
const maxDatePropText = maxDateProp.value.toLocaleDateString(
"de-DE",
options
);
return `Das gewählte Startdatum ist nach dem höchstmöglichen Enddatum ${maxDatePropText}`;
}
}
Expand All @@ -178,11 +193,17 @@ function validateTextDate(dateRangeToCheck: string): string | boolean {
const endDate = new Date(endDateText);
if (isEndDateValid) {
if (endDate < minDateProp.value) {
const minDatePropText = minDateProp.value.toLocaleDateString("de-DE", options);
const minDatePropText = minDateProp.value.toLocaleDateString(
"de-DE",
options
);
return `Das gewählte Enddatum ist vor dem kleinstmöglichen Startdatum ${minDatePropText}`;
}
if (endDate > maxDateProp.value) {
const maxDatePropText = maxDateProp.value.toLocaleDateString("de-DE", options);
const maxDatePropText = maxDateProp.value.toLocaleDateString(
"de-DE",
options
);
return `Das gewählte Enddatum ist nach dem höchstmöglichen Enddatum ${maxDatePropText}`;
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
label="Datumsauswahl"
/>
</v-col>
<v-col cols="6"/>
<v-col cols="6" />
</v-row>
</v-col>
<v-col cols="4">
Expand Down Expand Up @@ -78,6 +78,7 @@ import type MessstelleInfoDTO from "@/types/messstelle/MessstelleInfoDTO";
import type MessstelleOptionsDTO from "@/types/messstelle/MessstelleOptionsDTO";
import type NichtPlausibleTageDTO from "@/types/messstelle/NichtPlausibleTageDTO";
import _ from "lodash";
import { computed, onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
Expand All @@ -92,7 +93,6 @@ import { useMessstelleStore } from "@/store/MessstelleStore";
import { useUserStore } from "@/store/UserStore";
import { useDateUtils } from "@/util/DateUtils";
import { useOptionsmenuUtils } from "@/util/OptionsmenuUtils";
import _ from "lodash";
const route = useRoute();
Expand Down Expand Up @@ -135,30 +135,36 @@ const isAnwender = computed(() => {
const minDate = computed(() => {
const startdatum = new Date("2006-01-01");
const realisierungsdatum = new Date(messstelleInfo.value.realisierungsdatum);
if (!_.isNil(messstelleInfo.value.realisierungsdatum) && realisierungsdatum >= startdatum)
if (
!_.isNil(messstelleInfo.value.realisierungsdatum) &&
realisierungsdatum >= startdatum
)
return realisierungsdatum;
else return startdatum;
});
const maxDate = computed(() => {
const yesterday = new Date(new Date().setDate(new Date().getDate() - 1));
return _.isNil(messstelleInfo.value.abbaudatum)
? yesterday
: new Date(messstelleInfo.value.abbaudatum);
? yesterday
: new Date(messstelleInfo.value.abbaudatum);
});
const zeitraum = computed({
get() {
return _.toArray(chosenOptionsCopy.value.zeitraum).map(date => new Date(date));
return _.toArray(chosenOptionsCopy.value.zeitraum).map(
(date) => new Date(date)
);
},
set(dates: Array<Date> | undefined) {
const newZeitraum = _.toArray(dates).map(date => dateUtils.formatDateToISO(date))
const newZeitraum = _.toArray(dates).map((date) =>
dateUtils.formatDateToISO(date)
);
chosenOptionsCopy.value.zeitraum = newZeitraum;
}
},
});
watch([chosenOptionsCopyWochentag, chosenOptionsCopyZeitraum], () => {
if (
chosenOptionsCopyZeitraum.value.length === 2 &&
Expand Down

0 comments on commit 4600eab

Please sign in to comment.