feat(ZMS-2936): format code

zmscitizenview/eslint.config.js

@@ -23,6 +23,7 @@ export default [
         "kebab-case",
         { registeredComponentsOnly: false },
       ],
+      "@typescript-eslint/no-explicit-any": "off",
     },
   },
 ];

zmscitizenview/src/components/Appointment/AppointmentView.vue

@@ -1,36 +1,36 @@
 <template>
   <div class="m-component">
     <div class="container">
-      <ServiceFinder
+      <service-finder
         v-if="currentView === 0"
-        v-on:setService="setShowIncreaseViewButton"
         :services="services"
         :relations="relations"
         :offices="offices"
         :preselected-service-id="serviceId"
         :preselected-offive-id="locationId"
         :t="t"
+        @set-service="setShowIncreaseViewButton"
       />
-      <Calendar
+      <calendar
         v-if="currentView === 1"
         :t="t"
       />
-      <CustomerInfo v-if="currentView === 2" />
+      <customer-info v-if="currentView === 2" />
       <div class="m-submit-group">
-        <MucButton
+        <muc-button
           v-if="showDecreaseViewButton"
-          v-on:click="decreaseCurrentView"
           :disabled="disableIncreaseViewButton"
           variant="secondary"
+          @click="decreaseCurrentView"
         >
           <template #default>{{ t("back") }}</template>
-        </MucButton>
-        <MucButton
+        </muc-button>
+        <muc-button
           v-if="showIncreaseViewButton"
-          v-on:click="increaseCurrentView"
+          @click="increaseCurrentView"
         >
           <template #default>{{ t("next") }}</template>
-        </MucButton>
+        </muc-button>
       </div>
     </div>
   </div>
@@ -44,7 +44,7 @@ import { Office } from "@/api/models/Office";
 import { Relation } from "@/api/models/Relation";
 import { Service } from "@/api/models/Service";
 import { fetchServicesAndProviders } from "@/api/ZMSAppointmentAPI";
-import Calendar from "@/components/Appointment/Calendar.vue";
+import Calendar from "@/components/Appointment/CalendarView.vue";
 import CustomerInfo from "@/components/Appointment/CustomerInfo.vue";
 import ServiceFinder from "@/components/Appointment/ServiceFinder.vue";
 import { ServiceImpl } from "@/types/ServiceImpl";

zmscitizenview/src/components/Appointment/Calendar.vue → zmscitizenview/src/components/Appointment/CalendarView.vue

@@ -15,26 +15,26 @@
           <div>
             <p class="centered-text">{{ timeslot }}:00-{{ timeslot }}:59 </p>
           </div>
-          <div v-for="timeslot in times" :key="timeslot.unix" class="timeslot">
-            <MucButton
-              v-on:click="handleTimeSlotSelection(timeslot)"
+          <div v-for="timeslots in times" :key="timeslots.unix" class="timeslot">
+            <muc-button
               variant="secondary"
+              @click="handleTimeSlotSelection(timeslots)"
             >
-              <template #default>{{ formatTime(timeslot) }}</template>
-            </MucButton>
+              <template #default>{{ formatTime(timeslots) }}</template>
+            </muc-button>
           </div>
         </div>
       </div>
     </form>
   </div>
   <div v-if="error" class="m-component">
-    <MucCallout type="warning">
+    <muc-callout type="warning">
       <template #content>
         {{ t("noAppointmentsAvailable") }}
       </template>
 
       <template #header>{{ t("noAppointmentsAvailableHeader") }}</template>
-    </MucCallout>
+    </muc-callout>
   </div>
 </template>
 
@@ -61,12 +61,12 @@ const { selectedService } = inject<SelectedServiceProvider>(
   "selectedServiceProvider"
 ) as SelectedServiceProvider;
 
-const selectableProviders = ref<Array<OfficeImpl>>();
+const selectableProviders = ref<OfficeImpl[]>();
 const currentProvider = ref<OfficeImpl>();
 const displayInfo = ref<string>();
 const selectedServices = ref<Map<string, number>>(new Map<string, number>());
-const availableDays = ref<Array<string>>();
-const appointmentTimestamps = ref<Array<number>>();
+const availableDays = ref<string[]>();
+const appointmentTimestamps = ref<number[]>();
 const selectedDay = ref<string>();
 const selectedTimeSlot = ref<number>();
 const error = ref<boolean>(false);
@@ -76,7 +76,7 @@ const formatDay = (date: string) => moment(date).locale('de').format('dddd, DD.M
 const formatTime = (time: any) => moment.unix(time).tz('Europe/Berlin').format('H:mm');
 
 const timeSlotsInHours = () => {
-  const timesByHours = new Map<string, Array<number>>;
+  const timesByHours = new Map<string, number[]>;
   appointmentTimestamps.value?.forEach((time) => {
     const berlinTime = moment.unix(time).tz('Europe/Berlin');
     if(!timesByHours.has(berlinTime.format('H'))) {
@@ -159,7 +159,7 @@ onMounted(() => {
     }
 
     if (selectedService.value.providers && selectedService.value.subServices) {
-      let choosenSubservices = selectedService.value.subServices.filter(
+      const choosenSubservices = selectedService.value.subServices.filter(
         (subservice) => subservice.count > 0
       );
       selectableProviders.value = selectedService.value.providers.filter(

zmscitizenview/src/components/Appointment/CustomerInfo.vue

@@ -1,11 +1,11 @@
 <template>
   <h2 class="m-component-form__title">Kontaktdaten</h2>
   <form class="m-form m-form--default">
-    <MucInput label="Vorname" />
-    <MucInput label="Nachname" />
-    <MucInput label="E-Mail-Adresse" />
-    <MucInput label="Telefonnummer" />
-    <MucTextArea
+    <muc-input label="Vorname" />
+    <muc-input label="Nachname" />
+    <muc-input label="E-Mail-Adresse" />
+    <muc-input label="Telefonnummer" />
+    <muc-text-area
       label="Bemerkungen"
       hint="Sie möchten uns zu Ihrem Termin noch etwas mitteilen? Geben Sie hier an, wenn Sie Hilfe benötigen, auf Übersetzungen angeweiesen sind oder sonstige Anliegen haben."
     />

zmscitizenview/src/components/Appointment/ServiceFinder.vue

@@ -7,7 +7,7 @@
   >
     <div class="container">
       <form class="m-form m-form--default">
-        <MucSelect
+        <muc-select
           v-model="service"
           :items="services"
           item-title="name"
@@ -20,7 +20,7 @@
   </div>
   <div v-else>
     <div class="m-component">
-      <MucCounter
+      <muc-counter
         v-model="countOfService"
         :label="service.name"
         :max="maxValueOfService"
@@ -35,18 +35,18 @@
             v-for="subService in service.subServices"
             :key="subService.id"
           >
-            <SubserviceListItem
+            <subservice-list-item
               :sub-service="subService"
               :current-slots="currentSlots"
               :max-slots-per-appointment="maxSlotsPerAppointment"
-              v-on:change="changeAppointmentCountOfSubservice"
+              @change="changeAppointmentCountOfSubservice"
             />
           </template>
         </ul>
       </div>
     </div>
     <div class="wrapper">
-      <ClockSvg />
+      <clock-svg />
       <div>
         <b>{{ t("estimatedDuration") }}</b>
         <br />
@@ -79,9 +79,7 @@ const props = defineProps<{
   t: any;
 }>();
 
-const emit = defineEmits<{
-  (e: "setService"): void;
-}>();
+const emit = defineEmits<(e: "setService") => void>();
 
 const { selectedService, updateSelectedService } =
   inject<SelectedServiceProvider>(
@@ -115,7 +113,7 @@ const setServiceData = (selectedService: ServiceImpl) => {
   currentSlots.value = getMinSlotOfProvider(service.value.providers);
 
   if (selectedService.combinable) {
-    let combinable = selectedService.combinable;
+    const combinable = selectedService.combinable;
     if (typeof combinable[parseInt(selectedService.id)] !== "undefined") {
       delete combinable[parseInt(selectedService.id)];
     }
@@ -157,7 +155,7 @@ const setServiceData = (selectedService: ServiceImpl) => {
   emit("setService");
 };
 
-const getProviders = (serviceId: string, providers: Array<string> | null) => {
+const getProviders = (serviceId: string, providers: string[] | null) => {
   const officesAtService = new Array<OfficeImpl>();
   props.relations.forEach((relation) => {
     if (relation.serviceId === serviceId) {
@@ -202,7 +200,7 @@ const checkPlusEndabled = computed(
     maxSlotsPerAppointment.value
 );
 
-const getMinSlotOfProvider = (provider: Array<OfficeImpl>) => {
+const getMinSlotOfProvider = (provider: OfficeImpl[]) => {
   let minSlot = MAX_SLOTS;
   provider.forEach((provider) => {
     if (provider.slots) {
@@ -212,7 +210,7 @@ const getMinSlotOfProvider = (provider: Array<OfficeImpl>) => {
   return minSlot;
 };
 
-const getMaxSlotsPerAppointementOfProvider = (provider: Array<OfficeImpl>) => {
+const getMaxSlotsPerAppointementOfProvider = (provider: OfficeImpl[]) => {
   let maxSlot = 0;
   provider.forEach((provider) => {
     if (

zmscitizenview/src/components/Appointment/SubserviceListItem.vue

@@ -1,7 +1,7 @@
 <template>
   <li class="m-listing__list-item">
     <div class="list-item">
-      <MucCounter
+      <muc-counter
         v-model="count"
         :label="subService.name"
         :max="maxValue"
@@ -25,9 +25,7 @@ const props = defineProps<{
   maxSlotsPerAppointment: number;
 }>();
 
-const emit = defineEmits<{
-  (e: "change", id: string, count: number): void;
-}>();
+const emit = defineEmits<(e: "change", id: string, count: number) => void>();
 
 const count = ref<number>(0);
 
@@ -49,7 +47,7 @@ const checkPlusEndabled = computed(
     props.maxSlotsPerAppointment
 );
 
-const getMinSlotOfProvider = (provider: Array<OfficeImpl>) => {
+const getMinSlotOfProvider = (provider: OfficeImpl[]) => {
   let minSlot = MAX_SLOTS;
   provider.forEach((provider) => {
     if (provider.slots) {