@eeplatform/nuxt-layer-common 1.7.31 → 1.7.33

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eeplatform/nuxt-layer-common
 
+## 1.7.33
+
+### Patch Changes
+
+- a893a78: Fix birthdate format
+
+## 1.7.32
+
+### Patch Changes
+
+- 9403626: Set track/strand names and update autocompletes
+
 ## 1.7.31
 
 ### Patch Changes

package/components/EnrollmentForm.vue

@@ -378,13 +378,9 @@
                   />
                 </v-col>
                 <v-col cols="12">
-                  <v-mask-input
+                  <InputMaskDate
                     v-model="enrollment.learnerInfo.birthDate"
-                    mask="##/##/####"
-                    placeholder="MM/DD/YYYY"
-                    density="comfortable"
-                    variant="outlined"
-                  ></v-mask-input>
+                  ></InputMaskDate>
                 </v-col>
               </v-row>
             </v-col>
@@ -1302,6 +1298,9 @@
                         <v-col cols="12">
                           <v-autocomplete
                             v-model="enrollment.seniorHighInfo.track"
+                            item-title="title"
+                            item-value="value"
+                            :return-object="false"
                             :items="tracks"
                           ></v-autocomplete>
                         </v-col>
@@ -1318,6 +1317,9 @@
                         <v-col cols="12">
                           <v-autocomplete
                             v-model="enrollment.seniorHighInfo.strand"
+                            item-title="title"
+                            item-value="value"
+                            :return-object="false"
                             :items="selectedTrackStrands"
                           ></v-autocomplete>
                         </v-col>
@@ -1463,8 +1465,6 @@ const prop = defineProps({
     default: "",
   },
 });
-
-import { VMaskInput } from "vuetify/labs/VMaskInput";
 const { requiredRule, debounce } = useUtils();
 
 const enrollment = defineModel<TTLearner>({
@@ -2252,6 +2252,34 @@ const isSeniorHighSchool = computed(() => {
   return ["grade-11", "grade-12"].includes(gradeLevel);
 });
 
+// Watch for track selection and set trackName
+watch(
+  () => enrollment.value.seniorHighInfo?.track,
+  (trackValue) => {
+    if (!trackValue || !enrollment.value.seniorHighInfo) return;
+
+    const selectedTrack = tracks.find((track) => track.value === trackValue);
+    if (selectedTrack && enrollment.value.seniorHighInfo) {
+      enrollment.value.seniorHighInfo.trackName = selectedTrack.title ?? "";
+    }
+  }
+);
+
+// Watch for strand selection and set strandName
+watch(
+  () => enrollment.value.seniorHighInfo?.strand,
+  (strandValue) => {
+    if (!strandValue || !enrollment.value.seniorHighInfo) return;
+
+    const selectedStrand = selectedTrackStrands.value.find(
+      (strand) => strand.value === strandValue
+    );
+    if (selectedStrand && enrollment.value.seniorHighInfo) {
+      enrollment.value.seniorHighInfo.strandName = selectedStrand.title ?? "";
+    }
+  }
+);
+
 const isKindergarten = computed(() => {
   const gradeLevel = enrollment.value.gradeLevel;
   return gradeLevel === "kindergarten" || gradeLevel === "kinder";
@@ -2500,7 +2528,7 @@ watchEffect(() => {
 import { useMask } from "vuetify";
 
 watchEffect(() => {
-  const mask = useMask({ mask: "##/##/####" });
+  const mask = useMask({ mask: "##-##-####" });
   const date = mask.mask(enrollment.value.learnerInfo.birthDate);
   if (
     enrollment.value.learnerInfo.birthDate &&

package/components/Input/MaskDate.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-mask-input
+    v-bind="attrs"
+    v-model="formattedValue"
+    mask="##-##-####"
+    placeholder="MM-DD-YYYY"
+    density="comfortable"
+    variant="outlined"
+  >
+    <template v-for="(_, name) in $slots" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}" />
+    </template>
+  </v-mask-input>
+</template>
+
+<script setup lang="ts">
+import { VMaskInput } from "vuetify/labs/VMaskInput";
+
+const attrs = useAttrs();
+const formattedValue = ref("");
+
+const modelData = defineModel({ type: String });
+
+import { useMask } from "vuetify";
+
+watch(formattedValue, () => {
+  const mask = useMask({ mask: "##-##-####" });
+  modelData.value = mask.mask(formattedValue.value);
+});
+</script>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@eeplatform/nuxt-layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.7.31",
+  "version": "1.7.33",
   "main": "./nuxt.config.ts",
   "publishConfig": {
     "access": "public"