@eeplatform/nuxt-layer-common 1.7.28 → 1.7.29

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @eeplatform/nuxt-layer-common
 
+## 1.7.29
+
+### Patch Changes
+
+- 7bcbb5e: Refactor location handling; remove guardian flags
+
 ## 1.7.28
 
 ### Patch Changes

package/components/EnrollmentForm.vue

@@ -27,8 +27,9 @@
                 :items="provinces"
                 item-title="name"
                 item-value="code"
+                :return-object="false"
                 :loading="provincesStatus"
-                :disabled="provincesStatus"
+                :disabled="provincesStatus || !enrollment.region"
               ></v-autocomplete>
             </v-col>
           </v-row>
@@ -44,7 +45,7 @@
                 item-title="name"
                 item-value="code"
                 :loading="citiesMunicipalitiesStatus"
-                :disabled="citiesMunicipalitiesStatus"
+                :disabled="citiesMunicipalitiesStatus || !enrollment.province"
               >
               </v-autocomplete>
             </v-col>
@@ -318,14 +319,11 @@
 
             <v-col cols="4">
               <v-row no-gutters>
-                <InputLabel
-                  v-model="enrollment.learnerInfo.middleName"
-                  class="text-capitalize"
-                  title="Middle Name"
-                  required
-                />
+                <InputLabel class="text-capitalize" title="Middle Name" />
                 <v-col cols="12">
-                  <v-text-field></v-text-field>
+                  <v-text-field
+                    v-model="enrollment.learnerInfo.middleName"
+                  ></v-text-field>
                 </v-col>
               </v-row>
             </v-col>
@@ -713,17 +711,20 @@
                   <v-row no-gutters>
                     <InputLabel
                       class="text-capitalize"
-                      title="Municipality/City"
+                      title="Province"
                       required
                     />
                     <v-col cols="12">
                       <v-combobox
-                        v-model="enrollment.address.current.municipalityCity"
+                        v-model="enrollment.address.current.province"
                         :rules="[requiredRule]"
-                        :items="citiesMunicipalities"
+                        :items="currentProvinces"
                         item-title="name"
                         item-value="name"
+                        :return-object="false"
                         :hide-no-data="false"
+                        :loading="loadingCurrentProvinces"
+                        @keydown.enter="getCurrentCityMun()"
                       >
                         <template v-slot:no-data>
                           <v-list-item>
@@ -743,17 +744,20 @@
                   <v-row no-gutters>
                     <InputLabel
                       class="text-capitalize"
-                      title="Province"
+                      title="Municipality/City"
                       required
                     />
                     <v-col cols="12">
                       <v-combobox
-                        v-model="enrollment.address.current.province"
+                        v-model="enrollment.address.current.municipalityCity"
                         :rules="[requiredRule]"
-                        :items="provinces"
+                        :items="currentCitiesMunicipalities"
                         item-title="name"
                         item-value="name"
+                        :return-object="false"
                         :hide-no-data="false"
+                        :disabled="!enrollment.address.current.province"
+                        :loading="loadingCurrentCityMun"
                       >
                         <template v-slot:no-data>
                           <v-list-item>
@@ -874,18 +878,21 @@
                   <v-row no-gutters>
                     <InputLabel
                       class="text-capitalize"
-                      title="Municipality/City"
+                      title="Province"
                       required
                     />
                     <v-col cols="12">
                       <v-combobox
-                        v-model="enrollment.address.permanent.municipalityCity"
+                        v-model="enrollment.address.permanent.province"
                         :rules="[requiredRule]"
                         :readonly="sameAsCurrentAddress"
-                        :items="citiesMunicipalities"
+                        :items="permanentProvinces"
                         item-title="name"
                         item-value="name"
+                        :return-object="false"
                         :hide-no-data="false"
+                        :loading="loadingPermanentProvinces"
+                        @keydown.enter="getPermanentCityMun()"
                       >
                         <template v-slot:no-data>
                           <v-list-item>
@@ -905,18 +912,21 @@
                   <v-row no-gutters>
                     <InputLabel
                       class="text-capitalize"
-                      title="Province"
+                      title="Municipality/City"
                       required
                     />
                     <v-col cols="12">
                       <v-combobox
-                        v-model="enrollment.address.permanent.province"
+                        v-model="enrollment.address.permanent.municipalityCity"
                         :rules="[requiredRule]"
                         :readonly="sameAsCurrentAddress"
-                        :items="provinces"
+                        :items="permanentCitiesMunicipalities"
                         item-title="name"
                         item-value="name"
+                        :return-object="false"
                         :hide-no-data="false"
+                        :disabled="!enrollment.address.permanent.province"
+                        :loading="loadingPermanentCityMun"
                       >
                         <template v-slot:no-data>
                           <v-list-item>
@@ -988,15 +998,10 @@
               <v-row>
                 <v-col cols="3">
                   <v-row no-gutters>
-                    <InputLabel
-                      class="text-capitalize"
-                      title="Last Name"
-                      required
-                    />
+                    <InputLabel class="text-capitalize" title="Last Name" />
                     <v-col cols="12">
                       <v-text-field
                         v-model="enrollment.parentGuardianInfo.father.lastName"
-                        :rules="[requiredRule]"
                       ></v-text-field>
                     </v-col>
                   </v-row>
@@ -1004,15 +1009,10 @@
 
                 <v-col cols="3">
                   <v-row no-gutters>
-                    <InputLabel
-                      class="text-capitalize"
-                      title="First Name"
-                      required
-                    />
+                    <InputLabel class="text-capitalize" title="First Name" />
                     <v-col cols="12">
                       <v-text-field
                         v-model="enrollment.parentGuardianInfo.father.firstName"
-                        :rules="[requiredRule]"
                       ></v-text-field>
                     </v-col>
                   </v-row>
@@ -1144,42 +1144,16 @@
               </span>
             </v-col>
 
-            <v-col cols="3">
-              <v-checkbox
-                v-model="fatherLegalGuardianSame"
-                label="Father is the Legal Guardian"
-                hide-details
-                density="compact"
-              ></v-checkbox>
-            </v-col>
-
-            <v-col cols="3">
-              <v-checkbox
-                v-model="motherLegalGuardianSame"
-                label="Mother is the Legal Guardian"
-                hide-details
-                density="compact"
-              ></v-checkbox>
-            </v-col>
-
             <v-col cols="12">
               <v-row>
                 <v-col cols="3">
                   <v-row no-gutters>
-                    <InputLabel
-                      class="text-capitalize"
-                      title="Last Name"
-                      required
-                    />
+                    <InputLabel class="text-capitalize" title="Last Name" />
                     <v-col cols="12">
                       <v-text-field
                         v-model="
                           enrollment.parentGuardianInfo.legalGuardian.lastName
                         "
-                        :rules="[requiredRule]"
-                        :readonly="
-                          fatherLegalGuardianSame || motherLegalGuardianSame
-                        "
                       ></v-text-field>
                     </v-col>
                   </v-row>
@@ -1190,17 +1164,14 @@
                     <InputLabel
                       class="text-capitalize"
                       title="First Name"
-                      required
+                      :required="isGuardianRequired"
                     />
                     <v-col cols="12">
                       <v-text-field
                         v-model="
                           enrollment.parentGuardianInfo.legalGuardian.firstName
                         "
-                        :rules="[requiredRule]"
-                        :readonly="
-                          fatherLegalGuardianSame || motherLegalGuardianSame
-                        "
+                        :rules="isGuardianRequired ? [requiredRule] : []"
                       ></v-text-field>
                     </v-col>
                   </v-row>
@@ -1214,9 +1185,6 @@
                         v-model="
                           enrollment.parentGuardianInfo.legalGuardian.middleName
                         "
-                        :readonly="
-                          fatherLegalGuardianSame || motherLegalGuardianSame
-                        "
                       ></v-text-field>
                     </v-col>
                   </v-row>
@@ -1243,9 +1211,6 @@
                         placeholder="09XX-XXX-XXXX"
                         variant="outlined"
                         density="comfortable"
-                        :readonly="
-                          fatherLegalGuardianSame || motherLegalGuardianSame
-                        "
                       ></v-mask-input>
                     </v-col>
                   </v-row>
@@ -1459,7 +1424,7 @@ const prop = defineProps({
 });
 
 import { VMaskInput } from "vuetify/labs/VMaskInput";
-const { requiredRule } = useUtils();
+const { requiredRule, debounce } = useUtils();
 
 const enrollment = defineModel<TTLearner>({
   default: () => useEnrollment().enrollment,
@@ -1483,10 +1448,15 @@ if (!enrollment.value.address.permanent.country) {
   enrollment.value.address.permanent.country = "Philippines";
 }
 
+const isGuardianRequired = computed(
+  () => !!enrollment.value.parentGuardianInfo.legalGuardian.lastName
+);
+
 const { getAll: getAllPSGC } = usePSGC();
 
 const region = ref("");
 const regions = ref<Array<Record<string, any>>>([]);
+const selectCurrentRegion = computed(() => enrollment.value.region);
 
 const { data: getAllRegPSGCData, status: getAllRegionStatus } =
   await useLazyAsyncData("get-all-psgc-region", () =>
@@ -1504,12 +1474,25 @@ watchEffect(() => {
 const provinces = ref<Array<Record<string, any>>>([]);
 const province = ref("");
 
+const selectedProvince = computed(() => enrollment.value.province);
+
+const selectCurrentProvince = computed(() =>
+  provinces.value.find(
+    (p) => p.name === enrollment.value.address.current.province
+  )
+);
+
 const { data: getAllPSGCProvData, status: getAllProvStatus } =
   await useLazyAsyncData(
     "get-all-psgc-provinces",
-    () => getAllPSGC({ type: "Prov", prefix: region.value.slice(0, 2) }),
+    () =>
+      getAllPSGC({
+        type: "Prov",
+        prefix: selectCurrentRegion.value.slice(0, 2),
+        limit: 100,
+      }),
     {
-      watch: [region],
+      watch: [selectCurrentRegion],
     }
   );
 
@@ -1521,9 +1504,37 @@ watchEffect(() => {
   }
 });
 
+const currentProvinces = ref<Array<Record<string, any>>>([]);
+
+const { data: dataCurrentProvinces, status: statusCurrentProvinces } =
+  await useLazyAsyncData(
+    "get-all-psgc-current-provinces",
+    () =>
+      getAllPSGC({
+        type: "Prov",
+        limit: 100,
+      }),
+    {
+      watch: [selectCurrentRegion],
+    }
+  );
+
+const loadingCurrentProvinces = computed(
+  () => statusCurrentProvinces.value === "pending"
+);
+
+watchEffect(() => {
+  if (dataCurrentProvinces.value) {
+    currentProvinces.value = dataCurrentProvinces.value.items;
+  }
+});
+
 const citiesMunicipalities = ref<Array<Record<string, any>>>([]);
 const cityMunicipality = ref("");
 
+// Flag to prevent cascade when clearing location fields programmatically
+const isLocationClearingSchool = ref(false);
+
 watch(province, () => {
   cityMunicipality.value = "";
 });
@@ -1533,6 +1544,33 @@ watch(region, () => {
   cityMunicipality.value = "";
 });
 
+watch(
+  () => enrollment.value.province,
+  (val) => {
+    if (!val) {
+      enrollment.value.cityMunicipality = "";
+      isLocationClearingSchool.value = true;
+      enrollment.value.schoolId = "";
+      nextTick(() => {
+        isLocationClearingSchool.value = false;
+      });
+    }
+  }
+);
+
+watch(
+  () => enrollment.value.cityMunicipality,
+  (val) => {
+    if (!val) {
+      isLocationClearingSchool.value = true;
+      enrollment.value.schoolId = "";
+      nextTick(() => {
+        isLocationClearingSchool.value = false;
+      });
+    }
+  }
+);
+
 const cityMunicipalityPrefix = computed(() => {
   let prefix = "";
   if (region.value) {
@@ -1552,11 +1590,11 @@ const { data: getAllPSGCCityMunData, status: getAllCityMunStatus } =
     () =>
       getAllPSGC({
         type: "City",
-        prefix: cityMunicipalityPrefix.value,
+        prefix: selectedProvince.value.slice(0, 5),
         limit: 2000,
       }),
     {
-      watch: [cityMunicipalityPrefix],
+      watch: [selectedProvince],
     }
   );
 
@@ -1570,6 +1608,107 @@ watchEffect(() => {
   }
 });
 
+const currentCitiesMunicipalities = ref<Array<Record<string, any>>>([]);
+const selectedCurrentProvince = computed(() => {
+  const province = currentProvinces.value.find(
+    (p) => p.name === enrollment.value.address.current.province
+  );
+
+  if (!province) {
+    return "";
+  }
+
+  return province.code;
+});
+
+const loadingCurrentCityMun = ref(false);
+
+const getCurrentCityMun = debounce(async () => {
+  if (!selectedCurrentProvince.value) {
+    currentCitiesMunicipalities.value = [];
+    return;
+  }
+
+  try {
+    loadingCurrentCityMun.value = true;
+    const res = await getAllPSGC({
+      type: "City",
+      prefix: selectedCurrentProvince.value.slice(0, 5),
+      limit: 2000,
+    });
+    currentCitiesMunicipalities.value = res.items;
+  } catch (error) {
+    currentCitiesMunicipalities.value = [];
+  } finally {
+    loadingCurrentCityMun.value = false;
+  }
+}, 500);
+
+watch(selectedCurrentProvince, () => {
+  getCurrentCityMun();
+});
+
+// Permanent Address - Province and City/Municipality
+const permanentProvinces = ref<Array<Record<string, any>>>([]);
+
+const { data: dataPermanentProvinces, status: statusPermanentProvinces } =
+  await useLazyAsyncData("get-all-psgc-permanent-provinces", () =>
+    getAllPSGC({
+      type: "Prov",
+      limit: 100,
+    })
+  );
+
+const loadingPermanentProvinces = computed(
+  () => statusPermanentProvinces.value === "pending"
+);
+
+watchEffect(() => {
+  if (dataPermanentProvinces.value) {
+    permanentProvinces.value = dataPermanentProvinces.value.items;
+  }
+});
+
+const permanentCitiesMunicipalities = ref<Array<Record<string, any>>>([]);
+const selectedPermanentProvince = computed(() => {
+  const province = permanentProvinces.value.find(
+    (p) => p.name === enrollment.value.address.permanent.province
+  );
+
+  if (!province) {
+    return "";
+  }
+
+  return province.code;
+});
+
+const loadingPermanentCityMun = ref(false);
+
+const getPermanentCityMun = debounce(async () => {
+  if (!selectedPermanentProvince.value) {
+    permanentCitiesMunicipalities.value = [];
+    return;
+  }
+
+  try {
+    loadingPermanentCityMun.value = true;
+    const res = await getAllPSGC({
+      type: "City",
+      prefix: selectedPermanentProvince.value.slice(0, 5),
+      limit: 2000,
+    });
+    permanentCitiesMunicipalities.value = res.items;
+  } catch (error) {
+    permanentCitiesMunicipalities.value = [];
+  } finally {
+    loadingPermanentCityMun.value = false;
+  }
+}, 500);
+
+watch(selectedPermanentProvince, () => {
+  getPermanentCityMun();
+});
+
 const { getAll } = useProgram();
 
 const programs = ref<Array<Record<string, any>>>([]);
@@ -1687,6 +1826,17 @@ const selectedSchool = computed(() => enrollment.value.schoolId);
 
 watch(selectedSchool, (val) => {
   enrollment.value.gradeLevel = "";
+
+  // Clear region, province, and cityMunicipality when schoolId is removed by user (not programmatically)
+  if (!val) {
+    if (!isLocationClearingSchool.value) {
+      enrollment.value.region = "";
+      enrollment.value.province = "";
+      enrollment.value.cityMunicipality = "";
+    }
+    return;
+  }
+
   const school = schools.value.find((s) => s.id === val);
 
   if (school?.name) {
@@ -1696,16 +1846,11 @@ watch(selectedSchool, (val) => {
 
   enrollment.value.cityMunicipality = school?.cityMunicipalityPSGC ?? "";
 
-  if (school?.province) {
-    enrollment.value.province = school?.province;
-  }
-
-  const regionPSGC = school?.cityMunicipalityPSGC
-    ? school?.cityMunicipalityPSGC.slice(0, 2) + "00000000"
-    : "";
-
-  if (school?.region && regionPSGC) {
-    enrollment.value.region = regionPSGC;
+  if (school && school.cityMunicipalityPSGC) {
+    enrollment.value.province =
+      school.cityMunicipalityPSGC.slice(0, 5) + "00000";
+    enrollment.value.region =
+      school.cityMunicipalityPSGC.slice(0, 2) + "00000000";
   }
 
   if (school?.regionName) {
@@ -1898,8 +2043,6 @@ const indigenousCommunitiesPhilippines = [
 ];
 
 const sameAsCurrentAddress = ref(false);
-const fatherLegalGuardianSame = ref(false);
-const motherLegalGuardianSame = ref(false);
 
 const alternativeLearning = [
   "Modular (Print)",
@@ -1990,44 +2133,6 @@ watchEffect(() => {
   }
 });
 
-watchEffect(() => {
-  if (fatherLegalGuardianSame.value) {
-    enrollment.value.parentGuardianInfo.legalGuardian.firstName =
-      enrollment.value.parentGuardianInfo.father.firstName;
-    enrollment.value.parentGuardianInfo.legalGuardian.lastName =
-      enrollment.value.parentGuardianInfo.father.lastName;
-    enrollment.value.parentGuardianInfo.legalGuardian.middleName =
-      enrollment.value.parentGuardianInfo.father.middleName;
-    enrollment.value.parentGuardianInfo.legalGuardian.contactNumber =
-      enrollment.value.parentGuardianInfo.father.contactNumber;
-    motherLegalGuardianSame.value = false;
-  } else {
-    enrollment.value.parentGuardianInfo.legalGuardian.firstName = "";
-    enrollment.value.parentGuardianInfo.legalGuardian.lastName = "";
-    enrollment.value.parentGuardianInfo.legalGuardian.middleName = "";
-    enrollment.value.parentGuardianInfo.legalGuardian.contactNumber = "";
-  }
-});
-
-watchEffect(() => {
-  if (motherLegalGuardianSame.value) {
-    enrollment.value.parentGuardianInfo.legalGuardian.firstName =
-      enrollment.value.parentGuardianInfo.mother.firstName;
-    enrollment.value.parentGuardianInfo.legalGuardian.lastName =
-      enrollment.value.parentGuardianInfo.mother.lastName;
-    enrollment.value.parentGuardianInfo.legalGuardian.middleName =
-      enrollment.value.parentGuardianInfo.mother.middleName;
-    enrollment.value.parentGuardianInfo.legalGuardian.contactNumber =
-      enrollment.value.parentGuardianInfo.mother.contactNumber;
-    fatherLegalGuardianSame.value = false;
-  } else {
-    enrollment.value.parentGuardianInfo.legalGuardian.firstName = "";
-    enrollment.value.parentGuardianInfo.legalGuardian.lastName = "";
-    enrollment.value.parentGuardianInfo.legalGuardian.middleName = "";
-    enrollment.value.parentGuardianInfo.legalGuardian.contactNumber = "";
-  }
-});
-
 import { useMask } from "vuetify";
 
 watchEffect(() => {

package/composables/useEnrollment.ts

@@ -91,7 +91,7 @@ export default function useEnrollment() {
     },
     remarks: "",
     alternativeLearningOptions: [],
-    isCertifiedAndConsented: true,
+    isCertifiedAndConsented: false,
   });
 
   function add(value: TTLearner) {

package/package.json

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