Feature/ab#2098 add date picker

frontend/src/components/zaehlstelle/optionsmenue/OptionsmenueZaehlstelle.vue

@@ -39,6 +39,7 @@
             >
               <zeitauswahl-panel
                 :zaehlung="zaehlung"
+                @zeitraumStartAndEndDate="setZeitraumStartAndEndDate($event)"
                 @zeitauswahl="setZeitauswahl($event)"
                 @zeitblock="setZeitblock($event)"
                 @intervall="setIntervall($event)"
@@ -136,6 +137,8 @@ import Zaehldauer from "@/types/enum/Zaehldauer";
 import Zeitauswahl from "@/types/enum/Zeitauswahl";
 import Zeitblock from "@/types/enum/Zeitblock";
 import { useZaehlstelleUtils } from "@/util/ZaehlstelleUtils";
+import StartAndEndDate from "@/types/common/StartAndEndDate";
+import { useDateUtils } from "@/util/DateUtils";
 
 /**
  * Beschreibung Optionsmenü
@@ -159,6 +162,7 @@ const display = useDisplay();
 const dialog = ref(false);
 const activePanel = ref(-1);
 const chosenOptions = ref({} as OptionsDTO);
+const dateUtils = useDateUtils();
 
 const options = computed<OptionsDTO>(() => {
   return zaehlstelleStore.getFilteroptions;
@@ -177,6 +181,23 @@ const getContentSheetHeight = computed(() => {
 function setDefaultOptionsForZaehlung() {
   const optionsCopy = {} as OptionsDTO;
   Object.assign(optionsCopy, options.value);
+  const yesterday = new Date(Date.now() - 1 * 24 * 60 * 60 * 1000);
+
+  optionsCopy.zeitraumStartAndEndDate = {
+    startDate: yesterday,
+    endDate: yesterday,
+    isRange: () => true
+  };
+
+  const isoStartDate = dateUtils.formatDateToISO(
+    yesterday
+  );
+  const isoEndDate = dateUtils.formatDateToISO(
+    yesterday
+  );
+  optionsCopy.zeitraum = [isoStartDate, isoEndDate].filter(
+    (date) => !isEmpty(date)
+  );
 
   if (props.zaehlung.zaehldauer === Zaehldauer.DAUER_13_STUNDEN) {
     optionsCopy.zeitauswahl = Zeitauswahl.BLOCK;
@@ -241,6 +262,24 @@ function setDefaultOptionsForZaehlung() {
 }
 
 // Event Methoden für die Zeitauswahl Komponente
+function setZeitraumStartAndEndDate(event: StartAndEndDate) {
+  if (event) {
+    chosenOptions.value.zeitraumStartAndEndDate = event;
+    zaehlstelleStore.setZeitraumStartAndEndDate(event);
+    if (!isNil(chosenOptions.value.zeitraumStartAndEndDate)) {
+      const isoStartDate = dateUtils.formatDateToISO(
+        chosenOptions.value.zeitraumStartAndEndDate.startDate
+      );
+      const isoEndDate = dateUtils.formatDateToISO(
+        chosenOptions.value.zeitraumStartAndEndDate.endDate
+      );
+      chosenOptions.value.zeitraum = [isoStartDate, isoEndDate].filter(
+        (date) => !isEmpty(date)
+      );
+    }
+  }
+}
+
 function setZeitauswahl(event: string) {
   chosenOptions.value.zeitauswahl = event;
   zaehlstelleStore.setZeitauswahl(event);

frontend/src/components/zaehlstelle/optionsmenue/panels/ZeitauswahlPanel.vue

@@ -10,13 +10,21 @@
       </div>
     </v-expansion-panel-title>
     <v-expansion-panel-text class="mt-1">
+      <date-range-picker
+        v-model="zeitraumStartAndEndDate"
+        :min-date="minDate"
+        :min-date-description="minDateDescription"
+        :max-date="maxDate"
+        :max-date-description="maxDateDescription"
+        :auffaellige-tage="auffaelligeTage"
+      />
+      <v-divider />
       <panel-header
         font-size="0.875rem"
         font-weight="bold"
         padding="10px 0 0 0"
         header-text="Zeitauswahl"
       />
-
       <v-row
         align="start"
         justify="center"
@@ -165,6 +173,7 @@ import { isEmpty } from "lodash";
 import { computed, onMounted, ref, watch } from "vue";
 
 import PanelHeader from "@/components/common/PanelHeader.vue";
+import DateRangePicker from "@/components/common/DateRangePicker.vue";
 import { useZaehlstelleStore } from "@/store/ZaehlstelleStore";
 import ZaehldatenIntervall, {
   ZaehldatenIntervallToSelect,
@@ -176,6 +185,8 @@ import ZeitblockStuendlich, {
   zeitblockStuendlichInfo,
 } from "@/types/enum/ZeitblockStuendlich";
 import { useZaehlstelleUtils } from "@/util/ZaehlstelleUtils";
+import { useDateUtils } from "@/util/DateUtils";
+import type StartAndEndDate from "@/types/common/StartAndEndDate";
 
 interface Props {
   zaehlung?: LadeZaehlungDTO;
@@ -184,8 +195,10 @@ interface Props {
 const props = defineProps<Props>();
 const zaehlstelleStore = useZaehlstelleStore();
 const zaehlstelleUtils = useZaehlstelleUtils();
+const dateUtils = useDateUtils();
 
 const emits = defineEmits<{
+  (e: "zeitraumStartAndEndDate", v: StartAndEndDate): void;
   (e: "zeitauswahl", v: string): void;
   (e: "zeitblock", v: string): void;
   (e: "intervall", v: ZaehldatenIntervall): void;
@@ -221,6 +234,39 @@ const activeZaehlung = computed<LadeZaehlungDTO>(() => {
   return zaehlstelleStore.getAktiveZaehlung;
 });
 
+const zeitraumStartAndEndDate = computed<StartAndEndDate>(() => {
+  return zaehlstelleStore.getZeitraumStartAndEndDate;
+});
+
+const minDateDescription = ref<string>("");
+const minDate = ref<Date>();
+
+watch(
+  () => [activeZaehlung.value.datum],
+  () => {
+    const startdatum = new Date("2006-01-01");
+    const realisierungsdatum = new Date(
+      activeZaehlung.value.datum
+    );
+    if (
+      dateUtils.isValidIsoDate(activeZaehlung.value.datum) &&
+      realisierungsdatum >= startdatum
+    ) {
+      minDateDescription.value = "Realisierungsdatum";
+      minDate.value = realisierungsdatum;
+    } else {
+      minDateDescription.value = "frühestmöglichen Datum";
+      minDate.value = startdatum;
+    }
+  },
+  { immediate: true }
+);
+
+const maxDateDescription = ref<string>("gestrigen Datum");
+const maxDate = ref<Date>(new Date(new Date().setDate(new Date().getDate() - 1)));
+
+const auffaelligeTage = ref<Array<string>>([]);
+
 const isZeitauswahlSpitzenstundeOrBlock = computed(() => {
   return (
     zeitauswahl.value === Zeitauswahl.BLOCK || isZeitauswahlSpitzenstunde.value
@@ -399,6 +445,15 @@ watch(options, (newOptions: OptionsDTO) => {
   update(newOptions);
 });
 
+watch(
+  () => [zeitraumStartAndEndDate.value.startDate, zeitraumStartAndEndDate.value.endDate],
+  () => {
+    emits("zeitraumStartAndEndDate", zeitraumStartAndEndDate.value);
+  },
+  { immediate: true }
+);
+
+
 watch(zeitauswahl, () => {
   emits("zeitauswahl", zeitauswahl.value);
 });

frontend/src/store/ZaehlstelleStore.ts

@@ -12,6 +12,9 @@ import { useUserStore } from "@/store/UserStore";
 import LadeKnotenarmComperator from "@/types/zaehlung/LadeKnotenarmComperator";
 import LadeZaehlungComperator from "@/types/zaehlung/LadeZaehlungComperator";
 import DefaultObjectCreator from "@/util/DefaultObjectCreator";
+import { isNil, isEmpty } from "lodash";
+import type StartAndEndDate from "@/types/common/StartAndEndDate";
+import { useDateUtils } from "@/util/DateUtils";
 
 export const useZaehlstelleStore = defineStore("zaehlstelleStore", () => {
   const route = useRoute();
@@ -23,6 +26,15 @@ export const useZaehlstelleStore = defineStore("zaehlstelleStore", () => {
   const filteroptions = ref<OptionsDTO>(
     DefaultObjectCreator.createDefaultZaehlstelleOptionsDto()
   );
+  const zeitraumStartAndEndDate = ref<StartAndEndDate>( 
+    {
+      startDate: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
+      endDate: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
+      isRange: () => true
+    }
+  );
+  const dateUtils = useDateUtils();
+  const zeitraum = ref<string[]>([]);
   const zeitblock = ref("");
   const zeitauswahl = ref("");
   const history = ref(false);
@@ -51,6 +63,10 @@ export const useZaehlstelleStore = defineStore("zaehlstelleStore", () => {
     () => filteroptions.value.differenzdatenDarstellen
   );
   const isBlackprintMode = computed(() => filteroptions.value.blackPrintMode);
+  const getZeitraumStartAndEndDate = computed(
+    () => zeitraumStartAndEndDate.value
+  );
+  const getZeitraum = computed(() => zeitraum.value);
   const getZeitblock = computed(() => zeitblock.value);
   const getZeitauswahl = computed(() => zeitauswahl.value);
   const isHistory = computed(() => history.value);
@@ -100,6 +116,23 @@ export const useZaehlstelleStore = defineStore("zaehlstelleStore", () => {
     filteroptions.value = payload;
     history.value = true;
   }
+  function setZeitraumStartAndEndDate(payload: StartAndEndDate) {
+    zeitraumStartAndEndDate.value = payload;
+    if (!isNil(payload)) {
+      const isoStartDate = dateUtils.formatDateToISO(
+        payload.startDate
+      );
+      const isoEndDate = dateUtils.formatDateToISO(
+        payload.endDate
+      );
+      zeitraum.value = [isoStartDate, isoEndDate].filter(
+        (date) => !isEmpty(date)
+      );
+    }
+  }
+  function setZeitraum(payload: string[]) {
+    zeitraum.value = payload;
+  }
   function setZeitblock(payload: string) {
     zeitblock.value = payload;
   }
@@ -204,6 +237,8 @@ export const useZaehlstelleStore = defineStore("zaehlstelleStore", () => {
     getFilteroptions,
     isDifferenzdatenDarstellung,
     isBlackprintMode,
+    getZeitraum,
+    getZeitraumStartAndEndDate,
     getZeitblock,
     getZeitauswahl,
     isHistory,
@@ -225,6 +260,8 @@ export const useZaehlstelleStore = defineStore("zaehlstelleStore", () => {
     setActiveTab,
     setFilteroptions,
     setFilteroptionsHistory,
+    setZeitraum,
+    setZeitraumStartAndEndDate,
     setZeitblock,
     setZeitauswahl,
     reloadFilteroptions,

frontend/src/types/zaehlung/OptionsDTO.ts

@@ -1,7 +1,10 @@
 import ZaehldatenIntervall from "@/types/enum/ZaehldatenIntervall";
 import Zaehldauer from "@/types/enum/Zaehldauer";
+import type StartAndEndDate from "../common/StartAndEndDate";
 
 export default interface OptionsDTO {
+  zeitraumStartAndEndDate: StartAndEndDate;
+  zeitraum: string[];
   zaehldauer: Zaehldauer;
   intervall: ZaehldatenIntervall;
   zeitblock: string;

frontend/src/util/DefaultObjectCreator.ts

@@ -223,6 +223,8 @@ export default class DefaultObjectCreator {
     return {
       beideRichtungen: false,
       vergleichszaehlungsId: null,
+      zeitraumStartAndEndDate: new StartAndEndDate(undefined, undefined),
+      zeitraum: [],
       zaehldauer: Zaehldauer.DAUER_24_STUNDEN,
       intervall: ZaehldatenIntervall.STUNDE_VIERTEL,
       zeitblock: Zeitblock.ZB_00_24,