feat(ZMS-2936): format code

it-at-m · Nov 13, 2024 · 210c699 · 210c699
1 parent 6ce7916
commit 210c699
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 52 deletions.
diff --git a/zmscitizenview/src/api/ZMSAppointmentAPI.ts b/zmscitizenview/src/api/ZMSAppointmentAPI.ts
@@ -11,7 +11,11 @@ import {
 } from "@/utils/Constants";
 
 const TODAY = new Date();
-const MAXDATE = new Date(TODAY.getFullYear(), TODAY.getMonth() + 6, TODAY.getDate());
+const MAXDATE = new Date(
+  TODAY.getFullYear(),
+  TODAY.getMonth() + 6,
+  TODAY.getDate()
+);
 
 export function fetchServicesAndProviders(
   serviceId?: string,
@@ -77,7 +81,7 @@ export function fetchAvailableTimeSlots(
 
 const convertDateToString = (date: Date) => {
   const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, '0');
-  const day = String(date.getDate()).padStart(2, '0');
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
   return `${year}-${month}-${day}`;
-}
+};
diff --git a/zmscitizenview/src/components/Appointment/AppointmentView.vue b/zmscitizenview/src/components/Appointment/AppointmentView.vue
@@ -54,7 +54,7 @@ import CustomerInfo from "@/components/Appointment/CustomerInfo.vue";
 import ServiceFinder from "@/components/Appointment/ServiceFinder.vue";
 import { ServiceImpl } from "@/types/ServiceImpl";
 import { SelectedServiceProvider } from "@/types/ServiceTypes";
-import {StepperItem} from "@/types/StepperTypes";
+import { StepperItem } from "@/types/StepperTypes";
 
 const props = defineProps<{
   baseUrl: any;
@@ -65,7 +65,7 @@ const props = defineProps<{
   t: any;
 }>();
 
-const STEPPER_ITEMS : StepperItem[] = [
+const STEPPER_ITEMS: StepperItem[] = [
   {
     id: "0",
     label: props.t("service"),
@@ -84,7 +84,7 @@ const STEPPER_ITEMS : StepperItem[] = [
   {
     id: "3",
     label: props.t("overview"),
-    icon: "information"
+    icon: "information",
   },
 ];
 
@@ -131,15 +131,13 @@ const decreaseCurrentView = () => currentView.value--;
 const setShowIncreaseViewButton = () => (showIncreaseViewButton.value = true);
 
 const changeStep = (step: string) => {
-  if (parseInt(step)< parseInt(activeStep.value)) {
+  if (parseInt(step) < parseInt(activeStep.value)) {
     currentView.value = parseInt(step);
   }
 };
 
 watch(currentView, (newCurrentView) => {
   activeStep.value = newCurrentView.toString();
   showDecreaseViewButton.value = newCurrentView > 0;
-}
-
-);
+});
 </script>
diff --git a/zmscitizenview/src/components/Appointment/CalendarView.vue b/zmscitizenview/src/components/Appointment/CalendarView.vue
@@ -13,12 +13,18 @@
     <div style="background-color: var(--color-neutrals-blue-xlight)">
       <b tabindex="0">{{ formatDay(selectedDay) }}</b>
     </div>
-    <div v-for="([timeslot, times]) in timeSlotsInHours()" :key="timeslot">
+    <div
+      v-for="[timeslot, times] in timeSlotsInHours()"
+      :key="timeslot"
+    >
       <div class="wrapper">
         <div>
-          <p class="centered-text">{{ timeslot }}:00-{{ timeslot }}:59 </p>
+          <p class="centered-text">{{ timeslot }}:00-{{ timeslot }}:59</p>
         </div>
-        <div v-for="time in times" :key="time.unix" >
+        <div
+          v-for="time in times"
+          :key="time.unix"
+        >
           <muc-button
             class="timeslot"
             variant="secondary"
@@ -30,7 +36,10 @@
       </div>
     </div>
   </div>
-  <div v-if="error" class="m-component">
+  <div
+    v-if="error"
+    class="m-component"
+  >
     <muc-callout type="warning">
       <template #content>
         {{ t("noAppointmentsAvailable") }}
@@ -42,8 +51,12 @@
 </template>
 
 <script setup lang="ts">
-import { MucButton, MucCalendar, MucCallout } from "@muenchen/muc-patternlab-vue";
-import {inject, onMounted, ref, watch} from "vue";
+import {
+  MucButton,
+  MucCalendar,
+  MucCallout,
+} from "@muenchen/muc-patternlab-vue";
+import { inject, onMounted, ref, watch } from "vue";
 
 import { AvailableDaysDTO } from "@/api/models/AvailableDaysDTO";
 import { AvailableTimeSlotsDTO } from "@/api/models/AvailableTimeSlotsDTO";
@@ -73,42 +86,48 @@ const selectedTimeSlot = ref<number>();
 const error = ref<boolean>(false);
 
 const TODAY = new Date();
-const MAXDATE = new Date(TODAY.getFullYear(), TODAY.getMonth() + 6, TODAY.getDate());
+const MAXDATE = new Date(
+  TODAY.getFullYear(),
+  TODAY.getMonth() + 6,
+  TODAY.getDate()
+);
 
 const formatDay = (date: Date) => {
   if (date) {
-    return formatterWeekday.format(date)
-      + ", "
-      + String(date.getDate()).padStart(2, '0')
-      + "."
-      + String(date.getMonth() + 1).padStart(2, '0')
-      + "."
-      + date.getFullYear();
+    return (
+      formatterWeekday.format(date) +
+      ", " +
+      String(date.getDate()).padStart(2, "0") +
+      "." +
+      String(date.getMonth() + 1).padStart(2, "0") +
+      "." +
+      date.getFullYear()
+    );
   }
-}
+};
 
-const formatterWeekday = new Intl.DateTimeFormat(
-  'de-DE',
-  { weekday: 'long' }
-);
+const formatterWeekday = new Intl.DateTimeFormat("de-DE", { weekday: "long" });
 
-const formatterTime = new Intl.DateTimeFormat(
-  'de-DE',
-  {timeZone: 'Europe/Berlin', hour: 'numeric', minute: 'numeric', hour12: false}
-);
+const formatterTime = new Intl.DateTimeFormat("de-DE", {
+  timeZone: "Europe/Berlin",
+  hour: "numeric",
+  minute: "numeric",
+  hour12: false,
+});
 
-const berlinHourFormatter = new Intl.DateTimeFormat(
-  'de-DE',
-  { timeZone: 'Europe/Berlin', hour: 'numeric', hour12: false }
-);
+const berlinHourFormatter = new Intl.DateTimeFormat("de-DE", {
+  timeZone: "Europe/Berlin",
+  hour: "numeric",
+  hour12: false,
+});
 
 const formatTime = (time: any) => {
   const date = new Date(time * 1000);
   return formatterTime.format(date);
-}
+};
 
 const timeSlotsInHours = () => {
-  const timesByHours = new Map<string, number[]>;
+  const timesByHours = new Map<string, number[]>();
   appointmentTimestamps.value?.forEach((time) => {
     const berlinDate = new Date(time * 1000);
     const hour = berlinHourFormatter.format(berlinDate);
@@ -118,7 +137,7 @@ const timeSlotsInHours = () => {
     timesByHours.get(hour)?.push(time);
   });
   return timesByHours;
-}
+};
 
 const showSelectionForProvider = (provider: OfficeImpl) => {
   currentProvider.value = provider;
@@ -141,7 +160,7 @@ const showSelectionForProvider = (provider: OfficeImpl) => {
   ).then((data) => {
     if (data as AvailableDaysDTO) {
       availableDays.value = (data as AvailableDaysDTO).availableDays;
-      selectedDay.value = (new Date(availableDays.value[0]));
+      selectedDay.value = new Date(availableDays.value[0]);
       getAppointmentsOfDay(availableDays.value[0]);
     } else {
       error.value = true;
@@ -169,17 +188,23 @@ const getAppointmentsOfDay = (date: string) => {
 
 const convertDateToString = (date: Date) => {
   const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, '0');
-  const day = String(date.getDate()).padStart(2, '0');
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
   return `${year}-${month}-${day}`;
-}
+};
 
 const allowedDates = (date: Date) => {
-  const beforeMaxDate = date.getFullYear() < MAXDATE.getFullYear()
-    || (date.getFullYear() === MAXDATE.getFullYear() && date.getMonth() < MAXDATE.getMonth())
-    || (date.getFullYear() === MAXDATE.getFullYear() && date.getMonth() === MAXDATE.getMonth() && date.getDate() < MAXDATE.getDate());
-  return beforeMaxDate && availableDays.value?.includes(convertDateToString(date));
-}
+  const beforeMaxDate =
+    date.getFullYear() < MAXDATE.getFullYear() ||
+    (date.getFullYear() === MAXDATE.getFullYear() &&
+      date.getMonth() < MAXDATE.getMonth()) ||
+    (date.getFullYear() === MAXDATE.getFullYear() &&
+      date.getMonth() === MAXDATE.getMonth() &&
+      date.getDate() < MAXDATE.getDate());
+  return (
+    beforeMaxDate && availableDays.value?.includes(convertDateToString(date))
+  );
+};
 
 watch(selectedDay, (newDate) => {
   if (newDate) {
@@ -189,7 +214,7 @@ watch(selectedDay, (newDate) => {
 
 const handleTimeSlotSelection = (timeSlot: number) => {
   selectedTimeSlot.value = timeSlot;
-}
+};
 
 onMounted(() => {
   if (selectedService.value) {
@@ -232,7 +257,6 @@ onMounted(() => {
 </script>
 
 <style scoped>
-
 .wrapper {
   display: flex;
   justify-content: left;