feat(ZMS-2936): add stepper component

it-at-m · Nov 13, 2024 · dcfb1e3 · dcfb1e3
1 parent b8708d5
commit dcfb1e3
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 8 deletions.
diff --git a/zmscitizenview/src/components/Appointment/AppointmentView.vue b/zmscitizenview/src/components/Appointment/AppointmentView.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="m-component">
     <div class="container">
+      <muc-stepper
+        :step-items="STEPPER_ITEMS"
+        :active-item="activeStep"
+        @change-step="changeStep"
+      />
       <service-finder
         v-if="currentView === 0"
         :services="services"
@@ -37,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { MucButton } from "@muenchen/muc-patternlab-vue";
+import { MucButton, MucStepper } from "@muenchen/muc-patternlab-vue";
 import { onMounted, provide, ref, watch } from "vue";
 
 import { Office } from "@/api/models/Office";
@@ -49,6 +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";
 
 const props = defineProps<{
   baseUrl: any;
@@ -59,6 +65,31 @@ const props = defineProps<{
   t: any;
 }>();
 
+const STEPPER_ITEMS : StepperItem[] = [
+  {
+    id: "0",
+    label: props.t("service"),
+    icon: "shopping-cart",
+  },
+  {
+    id: "1",
+    label: props.t("appointment"),
+    icon: "calendar",
+  },
+  {
+    id: "2",
+    label: props.t("contact"),
+    icon: "mail",
+  },
+  {
+    id: "3",
+    label: props.t("overview"),
+    icon: "information"
+  },
+];
+
+const activeStep = ref<string>("0");
+
 const services = ref<Service[]>([]);
 const relations = ref<Relation[]>([]);
 const offices = ref<Office[]>([]);
@@ -99,9 +130,16 @@ const decreaseCurrentView = () => currentView.value--;
 
 const setShowIncreaseViewButton = () => (showIncreaseViewButton.value = true);
 
-watch(currentView, (newCurrentView) =>
-  newCurrentView > 0
-    ? (showDecreaseViewButton.value = true)
-    : (showDecreaseViewButton.value = false)
+const changeStep = (step: string) => {
+  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/types/StepperTypes.ts b/zmscitizenview/src/types/StepperTypes.ts
@@ -0,0 +1,5 @@
+export interface StepperItem {
+  id: string;
+  label: string;
+  icon: string;
+}
diff --git a/zmscitizenview/src/utils/Constants.ts b/zmscitizenview/src/utils/Constants.ts
@@ -22,7 +22,7 @@ export const VUE_APP_ZMS_API_CAPTCHA_DETAILS_ENDPOINT =
 
 export const MAX_SLOTS = 25;
 
-export function getAPIBaseURL(): String {
+export function getAPIBaseURL(): string {
   console.log("#getAPIBaseURL", import.meta);
   if (import.meta.env.VITE_VUE_APP_API_URL) {
     return import.meta.env.VITE_VUE_APP_API_URL;

diff --git a/zmscitizenview/src/utils/de-DE.json b/zmscitizenview/src/utils/de-DE.json
@@ -1,7 +1,9 @@
 {
+  "appointment": "Termin",
   "availableTimes": "Verfügbare Termine",
   "back": "Zurück",
   "combinableServices": "Kombinierbare Leistungen",
+  "contact": "Kontakt",
   "estimatedDuration": "Voraussichtliche Termindauer:",
   "location": "Ort",
   "minutes": "Minuten",
@@ -10,6 +12,7 @@
   "noAppointmentsAvailable": "Bitte versuchen Sie es noch einmal zu einem späteren Zeitpunkt: Wir schalten mehrmals pro Tag Termine frei, auch bevor wir öffnen.",
   "noServiceFound": "Keine Dienstleistung gefunden.",
   "oftenSearchedService": "Häufig gesuchte Leistungen:",
+  "overview": "Übersicht",
   "service": "Leistung",
   "serviceSearch": "Bürgerservice-Suche",
   "time": "Zeit",
@@ -43,7 +46,6 @@
   "activationLinkExpired": "Ihr Aktivierungslink ist abgelaufen.",
   "errorTryAgainLater": "Etwas ist schief gelaufen. Bitte versuchen Sie es mit einem anderen Termin.",
   "appointmentPreconfirmedNotice": "Um die Reservierung abzuschließen, erhalten Sie innerhalb von wenigen Minuten eine E-Mail mit einem Aktivierungslink. Bitte beachten Sie, dass die Reservierung verfällt, wenn Sie den Termin nicht mit diesem Link bestätigen.",
-  "appointment": "Termin",
   "chooseAppointment": "Termin wählen",
   "textLengthExceeded": "Die maximale Länge wird überschritten.",
   "contactData": "Kontaktdaten",

diff --git a/zmscitizenview/src/utils/en-US.json b/zmscitizenview/src/utils/en-US.json
@@ -1,7 +1,9 @@
 {
+  "appointment": "Appointment",
   "availableTimes": "Available dates",
   "back": "Back",
   "combinableServices": "Combinable services",
+  "contact": "Contact us",
   "estimatedDuration": "Estimated duration:",
   "location": "Location",
   "minutes": "minutes",
@@ -10,6 +12,7 @@
   "noAppointmentsAvailable": "Please try again later: We activate appointments several times a day, including prior to our opening hours.",
   "noServiceFound": "No service found",
   "oftenSearchedService": "Frequently requested services:",
+  "overview": "Overview",
   "service": "Service",
   "serviceSearch": "Search for citizen services",
   "time": "Zeit",
@@ -30,7 +33,6 @@
   "activationLinkExpired": "Your activation link has expired",
   "errorTryAgainLater": "Something went wrong. Please, try with another appointment",
   "appointmentPreconfirmedNotice": "Your appointment was initially reserved. To complete the reservation, you will immediately receive an email with an activation link. Please note that the reservation will expire if you do not confirm the appointment with this link.",
-  "appointment": "Appointment",
   "textLengthExceeded": "The maximum length is exceeded",
   "contactData": "Contact data",
   "pleaseCheckOnceAgain": "Please check your data once again and reserve appointment",