@eeplatform/nuxt-layer-common 1.4.0 → 1.4.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @eeplatform/nuxt-layer-common
 
+## 1.4.1
+
+### Patch Changes
+
+- 27be86a: Revise enrollment form
+
 ## 1.4.0
 
 ### Minor Changes

package/components/EnrollmentForm.vue

@@ -12,6 +12,7 @@
                 item-title="name"
                 item-value="code"
                 :loading="regionStatus"
+                :disabled="regionStatus"
               ></v-autocomplete>
             </v-col>
           </v-row>
@@ -27,6 +28,7 @@
                 item-title="name"
                 item-value="code"
                 :loading="provincesStatus"
+                :disabled="provincesStatus"
               ></v-autocomplete>
             </v-col>
           </v-row>
@@ -40,9 +42,11 @@
                 v-model="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-combobox
                 v-model="enrollment.school"
+                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>
@@ -1203,10 +1236,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 +1260,11 @@ watch(province, () => {
   cityMunicipality.value = "";
 });
 
+watch(region, () => {
+  province.value = "";
+  cityMunicipality.value = "";
+});
+
 const cityMunicipalityPrefix = computed(() => {
   let prefix = "";
   if (region.value) {
@@ -1268,9 +1302,54 @@ watchEffect(() => {
   }
 });
 
-const regionOptions: string[] = [];
-const provinceOptions: string[] = [];
-const cityMunicipalityOptions: string[] = [];
+const schools = ref<Array<Record<string, any>>>([]);
+const searchSchool = ref("");
+
+const { getAll: getAllSchools } = useSchool();
+
+const psgcSchool = computed(() => {
+  let prefix = "";
+  if (region.value) {
+    prefix = region.value.slice(0, 2);
+  }
+
+  if (province.value) {
+    prefix = province.value.slice(0, 5);
+  }
+
+  if (cityMunicipality.value) {
+    prefix = cityMunicipality.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 schoolsStatus = computed(() => getAllSchoolReqStatus.value === "pending");
+
+watchEffect(() => {
+  if (getAllSchoolsData.value) {
+    schools.value = getAllSchoolsData.value.items;
+  }
+});
 
 const {
   gradeLevels,

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.1",
   "main": "./nuxt.config.ts",
   "publishConfig": {
     "access": "public"