@eeplatform/nuxt-layer-common 1.4.0 → 1.4.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eeplatform/nuxt-layer-common
 
+## 1.4.2
+
+### Patch Changes
+
+- 75c5e38: Revise EnrollmentForm.vue implementation
+
+## 1.4.1
+
+### Patch Changes
+
+- 27be86a: Revise enrollment form
+
 ## 1.4.0
 
 ### Minor Changes

package/components/EnrollmentForm.vue

@@ -7,11 +7,12 @@
             <InputLabel class="text-capitalize" title="Region" />
             <v-col cols="12">
               <v-autocomplete
-                v-model="region"
+                v-model="enrollment.region"
                 :items="regions"
                 item-title="name"
                 item-value="code"
                 :loading="regionStatus"
+                :disabled="regionStatus"
               ></v-autocomplete>
             </v-col>
           </v-row>
@@ -22,11 +23,12 @@
             <InputLabel class="text-capitalize" title="Province" />
             <v-col cols="12">
               <v-autocomplete
-                v-model="province"
+                v-model="enrollment.province"
                 :items="provinces"
                 item-title="name"
                 item-value="code"
                 :loading="provincesStatus"
+                :disabled="provincesStatus"
               ></v-autocomplete>
             </v-col>
           </v-row>
@@ -37,12 +39,14 @@
             <InputLabel class="text-capitalize" title="City/Municipality" />
             <v-col cols="12">
               <v-autocomplete
-                v-model="cityMunicipality"
+                v-model="enrollment.cityMunicipality"
                 :items="citiesMunicipalities"
                 item-title="name"
-                item-value="name"
+                item-value="code"
                 :loading="citiesMunicipalitiesStatus"
-              ></v-autocomplete>
+                :disabled="citiesMunicipalitiesStatus"
+              >
+              </v-autocomplete>
             </v-col>
           </v-row>
         </v-col>
@@ -55,11 +59,40 @@
           <v-row no-gutters>
             <InputLabel class="text-capitalize" title="School" required />
             <v-col cols="12">
-              <v-autocomplete
-                v-model="enrollment.school"
+              <v-combobox
+                v-model="selectedSchool"
+                v-model:search="searchSchool"
                 :rules="[requiredRule]"
-                :items="gradeLevels"
-              ></v-autocomplete>
+                :items="schools"
+                item-title="name"
+                item-value="id"
+                :loading="schoolsStatus"
+                :disabled="schoolsStatus"
+                :hide-no-data="false"
+              >
+                <template v-slot:no-data>
+                  <v-list-item>
+                    <v-list-item-title>
+                      No results matching "<strong>{{ searchSchool }}</strong
+                      >". Click the search button and try again.
+                    </v-list-item-title>
+                  </v-list-item>
+                </template>
+
+                <template #append>
+                  <v-btn
+                    variant="tonal"
+                    :disabled="schoolsStatus"
+                    class="text-none"
+                    size="48"
+                    width="100"
+                    icon
+                    @click="refreshSchools()"
+                  >
+                    <v-icon>ph:magnifying-glass-bold</v-icon>
+                  </v-btn>
+                </template>
+              </v-combobox>
             </v-col>
           </v-row>
         </v-col>
@@ -98,14 +131,14 @@
 
     <v-col cols="12">
       <v-checkbox
-        v-model="returningLearner"
+        v-model="enrollment.returningLearner"
         label="Returning Learner(Balik-Aral)"
         hide-details
         density="compact"
       ></v-checkbox>
     </v-col>
 
-    <v-col v-if="!returningLearner" cols="12">
+    <v-col v-if="!enrollment.returningLearner" cols="12">
       <v-row no-gutters>
         <v-col cols="12" class="mt-4">
           <v-row>
@@ -129,14 +162,14 @@
                 <InputLabel
                   class="text-capitalize"
                   title="Leaner Reference Number"
-                  required
+                  :required="enrollment.returningLearner"
                 />
                 <v-col cols="12">
-                  <v-text-field
-                    v-model="enrollment.learnerInfo.learnerReferenceNumber"
-                    :rules="[requiredRule]"
-                    type="number"
-                  ></v-text-field>
+                  <v-mask-input
+                    v-model="enrollment.learnerInfo.lrn"
+                    :rules="enrollment.returningLearner ? [requiredRule] : []"
+                    mask="####-####-####"
+                  ></v-mask-input>
                 </v-col>
               </v-row>
             </v-col>
@@ -276,6 +309,8 @@
                     v-model="enrollment.learnerInfo.placeOfBirth"
                     :rules="[requiredRule]"
                     :items="citiesMunicipalities"
+                    item-title="name"
+                    items-value="name"
                     :hide-no-data="false"
                   >
                     <template v-slot:no-data>
@@ -365,14 +400,14 @@
 
         <v-col cols="12">
           <v-checkbox
-            v-model="withDisability"
+            v-model="enrollment.learnerInfo.withDisability"
             label="Learner with Disability"
             hide-details
             density="compact"
           ></v-checkbox>
         </v-col>
 
-        <v-col v-if="withDisability" cols="12">
+        <v-col v-if="enrollment.learnerInfo.withDisability" cols="12">
           <v-row no-gutters>
             <v-col cols="12">
               <v-checkbox
@@ -1056,6 +1091,75 @@
             </v-col>
           </v-row>
         </v-col>
+
+        <v-col v-if="isSeniorHighSchool" cols="12" class="mt-2">
+          <v-row no-gutters>
+            <v-col cols="12">
+              <span class="font-weight-bold text-subtitle-1">
+                For Learners in Senior High School
+              </span>
+            </v-col>
+
+            <v-col v-if="enrollment.seniorHighInfo" cols="12">
+              <v-row no-gutters>
+                <v-col cols="12" class="mt-4">
+                  <v-row no-gutters>
+                    <InputLabel
+                      class="text-capitalize"
+                      title="Semester"
+                      required
+                    />
+                    <v-col cols="12">
+                      <v-radio-group
+                        v-model="enrollment.seniorHighInfo.semester"
+                        density="compact"
+                      >
+                        <v-radio label="1st" value="1st"></v-radio>
+                        <v-radio label="2nd" value="2nd"></v-radio>
+                      </v-radio-group>
+                    </v-col>
+                  </v-row>
+                </v-col>
+
+                <v-col cols="12">
+                  <v-row>
+                    <v-col cols="4">
+                      <v-row no-gutters>
+                        <InputLabel
+                          class="text-capitalize"
+                          title="Track"
+                          required
+                        />
+                        <v-col cols="12">
+                          <v-autocomplete
+                            v-model="enrollment.seniorHighInfo.track"
+                            :items="tracks"
+                          ></v-autocomplete>
+                        </v-col>
+                      </v-row>
+                    </v-col>
+
+                    <v-col cols="6">
+                      <v-row no-gutters>
+                        <InputLabel
+                          class="text-capitalize"
+                          title="Strand"
+                          required
+                        />
+                        <v-col cols="12">
+                          <v-autocomplete
+                            v-model="enrollment.seniorHighInfo.strand"
+                            :items="selectedTrackStrands"
+                          ></v-autocomplete>
+                        </v-col>
+                      </v-row>
+                    </v-col>
+                  </v-row>
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-col>
       </v-row>
     </v-col>
 
@@ -1182,6 +1286,10 @@ const prop = defineProps({
 import { VMaskInput } from "vuetify/labs/VMaskInput";
 const { requiredRule } = useUtils();
 
+const enrollment = defineModel<TBasicEducEnrForm>({
+  default: () => useEnrollment().enrollment,
+});
+
 const { getAll: getAllPSGC } = usePSGC();
 
 const region = ref("");
@@ -1203,10 +1311,6 @@ watchEffect(() => {
 const provinces = ref<Array<Record<string, any>>>([]);
 const province = ref("");
 
-watch(region, () => {
-  province.value = "";
-});
-
 const { data: getAllPSGCProvData, status: getAllProvStatus } =
   await useLazyAsyncData(
     "get-all-psgc-provinces",
@@ -1231,6 +1335,11 @@ watch(province, () => {
   cityMunicipality.value = "";
 });
 
+watch(region, () => {
+  province.value = "";
+  cityMunicipality.value = "";
+});
+
 const cityMunicipalityPrefix = computed(() => {
   let prefix = "";
   if (region.value) {
@@ -1268,30 +1377,114 @@ watchEffect(() => {
   }
 });
 
-const regionOptions: string[] = [];
-const provinceOptions: string[] = [];
-const cityMunicipalityOptions: string[] = [];
+const schools = ref<Array<Record<string, any>>>([]);
+const searchSchool = ref("");
 
-const {
-  gradeLevels,
-  generateSchoolYears,
-  getPhilippineCities,
-  getPhilippineMunicipalities,
-  motherTongueOptions,
-} = useBasicEdu();
+const { getAll: getAllSchools } = useSchool();
 
-const effectiveSchoolYearOptions = generateSchoolYears();
-const lastSchoolYearOptions = generateSchoolYears(50).reverse();
+const selectedCity = computed(() => enrollment.value.cityMunicipality);
+
+const psgcSchool = computed(() => {
+  let prefix = "";
+  if (region.value) {
+    prefix = region.value.slice(0, 2);
+  }
+
+  if (province.value) {
+    prefix = province.value.slice(0, 5);
+  }
 
-const { data: citiesData } = await useLazyAsyncData("getCities", () =>
-  getPhilippineCities()
+  if (selectedCity.value) {
+    prefix = selectedCity.value.slice(0, 7);
+  }
+
+  return prefix;
+});
+
+const {
+  data: getAllSchoolsData,
+  status: getAllSchoolReqStatus,
+  refresh: refreshSchools,
+} = await useLazyAsyncData(
+  `get-all-schools-by-${psgcSchool.value ?? "psgc"}-${
+    searchSchool.value ?? "search"
+  }`,
+  () =>
+    getAllSchools({
+      limit: 100,
+      psgc: psgcSchool.value,
+      search: searchSchool.value,
+    }),
+  {
+    watch: [psgcSchool],
+  }
 );
 
-const { data: municipalitiesData } = await useLazyAsyncData(
-  "getMunicipalities",
-  () => getPhilippineMunicipalities()
+const schoolsStatus = computed(() => getAllSchoolReqStatus.value === "pending");
+
+watchEffect(() => {
+  if (getAllSchoolsData.value) {
+    schools.value = getAllSchoolsData.value.items;
+  }
+});
+
+const selectedSchool = ref<TSchool>({
+  id: "",
+  name: "",
+});
+
+watch(selectedSchool, (val) => {
+  if (val.id) {
+    enrollment.value.school = val.id;
+  }
+
+  enrollment.value.cityMunicipality = val.cityMunicipalityPSGC ?? "";
+
+  if (val.province) {
+    enrollment.value.province = val.province;
+  }
+
+  const regionPSGC = val.cityMunicipalityPSGC
+    ? val.cityMunicipalityPSGC.slice(0, 2) + "00000000"
+    : "";
+
+  if (val.region && regionPSGC) {
+    enrollment.value.region = regionPSGC;
+  }
+
+  if (val.regionName) {
+    enrollment.value.regionName = val.regionName;
+  }
+
+  if (val.division) {
+    enrollment.value.division = val.cityMunicipalityPSGC
+      ? val.cityMunicipalityPSGC.slice(0, 5) + "00000"
+      : "";
+  }
+
+  if (val.divisionName) {
+    enrollment.value.divisionName = val.divisionName;
+  }
+});
+
+const { gradeLevels, generateSchoolYears, motherTongueOptions, tracks } =
+  useBasicEdu();
+
+const selectedTrackStrands = computed(
+  () =>
+    tracks.find(
+      (track) => track.value === enrollment.value.seniorHighInfo?.track
+    )?.strands || []
 );
 
+const isSeniorHighSchool = computed(() => {
+  const gradeLevel = enrollment.value.gradeLevel;
+  return ["grade-11", "grade-12"].includes(gradeLevel);
+});
+
+const effectiveSchoolYearOptions = generateSchoolYears();
+const lastSchoolYearOptions = generateSchoolYears(50).reverse();
+
 const indigenousCommunitiesPhilippines = [
   // Luzon (Northern Philippines) - Cordillera Groups (Igorot Subgroups)
   "Ifugao",
@@ -1335,8 +1528,6 @@ const indigenousCommunitiesPhilippines = [
   "Sama-Bajau",
 ];
 
-const returningLearner = ref(false);
-const withDisability = ref(false);
 const sameAsCurrentAddress = ref(false);
 const fatherLegalGuardianSame = ref(false);
 const motherLegalGuardianSame = ref(false);
@@ -1351,14 +1542,11 @@ const alternativeLearning = [
   "Homeschooling",
 ];
 
-const enrollment = defineModel<TBasicEducEnrForm>({
-  default: () => useEnrollment().enrollment,
-});
-
-watch(returningLearner, (val) => {
+watch(enrollment, (val) => {
   if (val) {
+    enrollment.value.returningLearner = false;
     enrollment.value.learnerInfo.psaBirthCertificateNo = "";
-    enrollment.value.learnerInfo.learnerReferenceNumber = "";
+    enrollment.value.learnerInfo.lrn = "";
     enrollment.value.learnerInfo.firstName = "";
     enrollment.value.learnerInfo.middleName = "";
     enrollment.value.learnerInfo.lastName = "";
@@ -1368,6 +1556,7 @@ watch(returningLearner, (val) => {
     enrollment.value.learnerInfo.sex = "";
     enrollment.value.learnerInfo.motherTongue = "";
     enrollment.value.learnerInfo.age = 0;
+    enrollment.value.learnerInfo.withDisability = false;
     enrollment.value.learnerInfo.disabilities = [];
     enrollment.value.learnerInfo.indigenousCommunity = "";
     enrollment.value.learnerInfo.fourPsHouseholdId = "";
@@ -1471,6 +1660,7 @@ watchEffect(() => {
 });
 
 import { useMask } from "vuetify";
+import { fa } from "zod/v4/locales";
 
 watchEffect(() => {
   const mask = useMask({ mask: "##/##/####" });

package/composables/useEnrollment.ts

@@ -8,40 +8,42 @@ export default function useEnrollment() {
     divisionName: "",
     province: "",
     cityMunicipality: "",
-    schoolYear: "",
-    gradeLevel: "",
+    schoolYear: "2025-2026",
+    gradeLevel: "K1",
+    returningLearner: false,
     learnerInfo: {
       psaBirthCertificateNo: "",
-      learnerReferenceNumber: "",
-      firstName: "",
+      lrn: "123123123123",
+      firstName: "John",
       middleName: "",
-      lastName: "",
+      lastName: "Doe",
       extensionName: "",
-      birthDate: "",
-      placeOfBirth: "",
-      sex: "",
-      motherTongue: "",
-      age: 0,
+      birthDate: "01012022",
+      placeOfBirth: "Altavas",
+      sex: "Male",
+      motherTongue: "Ilocano",
+      age: 3,
+      withDisability: false,
       disabilities: [],
       indigenousCommunity: "",
       fourPsHouseholdId: "",
     },
     parentGuardianInfo: {
       father: {
-        firstName: "",
-        lastName: "",
+        firstName: "Papa",
+        lastName: "Papa",
         middleName: "",
         contactNumber: "",
       },
       mother: {
-        firstName: "",
-        lastName: "",
+        firstName: "Mama",
+        lastName: "Mama",
         middleName: "",
         contactNumber: "",
       },
       legalGuardian: {
-        firstName: "",
-        lastName: "",
+        firstName: "Papa",
+        lastName: "Papa",
         middleName: "",
         contactNumber: "",
       },
@@ -51,21 +53,21 @@ export default function useEnrollment() {
         houseNumber: "",
         streetName: "",
         sitio: "",
-        barangay: "",
-        municipalityCity: "",
-        province: "",
+        barangay: "bgy",
+        municipalityCity: "sample",
+        province: "sample",
         country: "Philippines",
-        zipCode: "",
+        zipCode: "1111",
       },
       permanent: {
         houseNumber: "",
         streetName: "",
         sitio: "",
-        barangay: "",
-        municipalityCity: "",
-        province: "",
-        country: "",
-        zipCode: "",
+        barangay: "bgy",
+        municipalityCity: "sample",
+        province: "sample",
+        country: "Philippines",
+        zipCode: "1111",
       },
     },
     returningLearnerInfo: {
@@ -74,19 +76,10 @@ export default function useEnrollment() {
       lastSchoolAttended: "",
       lastSchoolId: "",
     },
-    seniorHighInfo: {
-      track: "",
-      strand: "",
-      semester: "",
-    },
-    preferredLearningModalities: [],
-    lastGradeLevelCompleted: "",
-    lastSchoolYearCompleted: "",
-    lastSchoolAttended: "",
-    lastSchoolId: "",
+    seniorHighInfo: { track: "", strand: "", semester: "" },
     remarks: "",
-    alternativeLearningOptions: [],
-    isCertifiedAndConsented: false,
+    alternativeLearningOptions: ["Online"],
+    isCertifiedAndConsented: true,
   });
 
   function add(value: TBasicEducEnrForm) {

package/composables/useSchool.ts

@@ -4,9 +4,10 @@ export default function useSchool() {
     search = "",
     status = "active",
     limit = 20,
+    psgc = "",
   } = {}) {
     return $fetch<Record<string, any>>("/api/basic-education/schools", {
-      query: { page, search, status, limit },
+      query: { page, search, status, limit, psgc },
     });
   }
 

package/package.json

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

package/types/enrollment.d.ts

@@ -12,12 +12,12 @@ declare type TBasicEducEnrForm = {
   schoolName?: string;
   schoolYear: string; // e.g., "2025-2026"
   gradeLevel: string; // e.g., "Grade 7"
+  returningLearner: boolean;
   learnerInfo: EnrLearnerInfo;
   parentGuardianInfo: EnrParentGuardianInfo;
   address: AddressInformation;
   returningLearnerInfo?: EnrReturningLearnerInfo;
   seniorHighInfo?: EnrSeniorHighInformation;
-  preferredLearningModalities?: string[];
   lastGradeLevelCompleted?: string;
   lastSchoolYearCompleted?: string;
   lastSchoolAttended?: string;
@@ -37,7 +37,7 @@ declare type TBasicEducEnrForm = {
 
 declare type EnrLearnerInfo = {
   psaBirthCertificateNo?: string;
-  learnerReferenceNumber?: string; // Learner Reference Number
+  lrn?: string; // Learner Reference Number
   lastName: string;
   firstName: string;
   middleName?: string;
@@ -49,6 +49,7 @@ declare type EnrLearnerInfo = {
   motherTongue?: string;
   fourPsHouseholdId?: string;
   indigenousCommunity?: string;
+  withDisability: boolean;
   disabilities?: string[];
 };
 

package/types/school.d.ts

@@ -1,6 +1,6 @@
 declare type TSchool = {
   _id?: string;
-  id?: string;
+  id: string;
   name: string;
   country?: string;
   address?: string;