@eeplatform/nuxt-layer-common 1.3.3 → 1.4.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eeplatform/nuxt-layer-common
 
+## 1.4.1
+
+### Patch Changes
+
+- 27be86a: Revise enrollment form
+
+## 1.4.0
+
+### Minor Changes
+
+- 069011b: Add PSGC composable
+
 ## 1.3.3
 
 ### Patch Changes

package/components/EnrollmentForm.vue

@@ -4,12 +4,15 @@
       <v-row>
         <v-col cols="3" class="pb-0">
           <v-row no-gutters>
-            <InputLabel class="text-capitalize" title="Region" required />
+            <InputLabel class="text-capitalize" title="Region" />
             <v-col cols="12">
               <v-autocomplete
-                v-model="enrollment.region"
-                :rules="[requiredRule]"
-                :items="regionOptions"
+                v-model="region"
+                :items="regions"
+                item-title="name"
+                item-value="code"
+                :loading="regionStatus"
+                :disabled="regionStatus"
               ></v-autocomplete>
             </v-col>
           </v-row>
@@ -17,12 +20,15 @@
 
         <v-col cols="3" class="pb-0">
           <v-row no-gutters>
-            <InputLabel class="text-capitalize" title="Province" required />
+            <InputLabel class="text-capitalize" title="Province" />
             <v-col cols="12">
               <v-autocomplete
-                v-model="enrollment.province"
-                :rules="[requiredRule]"
-                :items="provinceOptions"
+                v-model="province"
+                :items="provinces"
+                item-title="name"
+                item-value="code"
+                :loading="provincesStatus"
+                :disabled="provincesStatus"
               ></v-autocomplete>
             </v-col>
           </v-row>
@@ -30,17 +36,17 @@
 
         <v-col cols="4" class="pb-0">
           <v-row no-gutters>
-            <InputLabel
-              class="text-capitalize"
-              title="City/Municipality"
-              required
-            />
+            <InputLabel class="text-capitalize" title="City/Municipality" />
             <v-col cols="12">
               <v-autocomplete
-                v-model="enrollment.cityMunicipality"
-                :rules="[requiredRule]"
-                :items="cityMunicipalityOptions"
-              ></v-autocomplete>
+                v-model="cityMunicipality"
+                :items="citiesMunicipalities"
+                item-title="name"
+                item-value="code"
+                :loading="citiesMunicipalitiesStatus"
+                :disabled="citiesMunicipalitiesStatus"
+              >
+              </v-autocomplete>
             </v-col>
           </v-row>
         </v-col>
@@ -53,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>
@@ -388,7 +423,7 @@
                 label="A. Blind"
                 hide-details
                 density="compact"
-                value="Blind"
+                value="Visual Impairment(Blind)"
               ></v-checkbox>
             </v-col>
 
@@ -398,7 +433,7 @@
                 label="B. Low vision"
                 hide-details
                 density="compact"
-                value="Low vision"
+                value="Visual Impairment(Low vision)"
               ></v-checkbox>
             </v-col>
 
@@ -1180,9 +1215,141 @@ const prop = defineProps({
 import { VMaskInput } from "vuetify/labs/VMaskInput";
 const { requiredRule } = useUtils();
 
-const regionOptions: string[] = [];
-const provinceOptions: string[] = [];
-const cityMunicipalityOptions: string[] = [];
+const { getAll: getAllPSGC } = usePSGC();
+
+const region = ref("");
+const regions = ref<Array<Record<string, any>>>([]);
+
+const { data: getAllRegPSGCData, status: getAllRegionStatus } =
+  await useLazyAsyncData("get-all-psgc-region", () =>
+    getAllPSGC({ type: "Reg" })
+  );
+
+const regionStatus = computed(() => getAllRegionStatus.value === "pending");
+
+watchEffect(() => {
+  if (getAllRegPSGCData.value) {
+    regions.value = getAllRegPSGCData.value.items;
+  }
+});
+
+const provinces = ref<Array<Record<string, any>>>([]);
+const province = ref("");
+
+const { data: getAllPSGCProvData, status: getAllProvStatus } =
+  await useLazyAsyncData(
+    "get-all-psgc-provinces",
+    () => getAllPSGC({ type: "Prov", prefix: region.value.slice(0, 2) }),
+    {
+      watch: [region],
+    }
+  );
+
+const provincesStatus = computed(() => getAllProvStatus.value === "pending");
+
+watchEffect(() => {
+  if (getAllPSGCProvData.value) {
+    provinces.value = getAllPSGCProvData.value.items;
+  }
+});
+
+const citiesMunicipalities = ref<Array<Record<string, any>>>([]);
+const cityMunicipality = ref("");
+
+watch(province, () => {
+  cityMunicipality.value = "";
+});
+
+watch(region, () => {
+  province.value = "";
+  cityMunicipality.value = "";
+});
+
+const cityMunicipalityPrefix = computed(() => {
+  let prefix = "";
+  if (region.value) {
+    prefix = region.value.slice(0, 2);
+  }
+
+  if (province.value) {
+    prefix = province.value.slice(0, 5);
+  }
+
+  return prefix;
+});
+
+const { data: getAllPSGCCityMunData, status: getAllCityMunStatus } =
+  await useLazyAsyncData(
+    `get-all-psgc-citiesMunicipalities-by-prefix-${cityMunicipalityPrefix.value}`,
+    () =>
+      getAllPSGC({
+        type: "City",
+        prefix: cityMunicipalityPrefix.value,
+        limit: 2000,
+      }),
+    {
+      watch: [cityMunicipalityPrefix],
+    }
+  );
+
+const citiesMunicipalitiesStatus = computed(
+  () => getAllCityMunStatus.value === "pending"
+);
+
+watchEffect(() => {
+  if (getAllPSGCCityMunData.value) {
+    citiesMunicipalities.value = getAllPSGCCityMunData.value.items;
+  }
+});
+
+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,
@@ -1204,15 +1371,6 @@ const { data: municipalitiesData } = await useLazyAsyncData(
   () => getPhilippineMunicipalities()
 );
 
-const citiesMunicipalities = computed(() => {
-  return [
-    ...(citiesData.value || []).map((i: any) => i.name),
-    ...(municipalitiesData.value || []).map(
-      (i: any) => `Municipality of ${i.name}`
-    ),
-  ];
-});
-
 const indigenousCommunitiesPhilippines = [
   // Luzon (Northern Philippines) - Cordillera Groups (Igorot Subgroups)
   "Ifugao",

package/composables/useDivision.ts

@@ -1,64 +1,17 @@
-export default function useDivision() {
-  function getAll({ page = 1, search = "", limit = 20, region = "" } = {}) {
-    return useNuxtApp().$api<Record<string, any>>("/api/divisions", {
-      method: "GET",
-      query: {
-        page,
-        search,
-        limit,
-        region,
-      },
+export default function useRegion() {
+  async function getAll({
+    page = 1,
+    search = "",
+    status = "active",
+    limit = 20,
+    region = "",
+  } = {}) {
+    return $fetch<Record<string, any>>("/api/basic-education/divisions", {
+      query: { page, search, status, limit, region },
     });
   }
 
-  function getById(id = "") {
-    return useNuxtApp().$api<Record<string, any>>(`/api/divisions/id/${id}`, {
-      method: "GET",
-    });
-  }
-
-  function getByName(name = "") {
-    return useNuxtApp().$api(`/api/divisions/name/${name}`, {
-      method: "GET",
-    });
-  }
-
-  function createDivision(data: Record<string, any>) {
-    return useNuxtApp().$api("/api/divisions", {
-      method: "POST",
-      body: data,
-    });
-  }
-
-  function updateDivisionField(id: string, field: string, value: string) {
-    return useNuxtApp().$api(`/api/divisions/${id}`, {
-      method: "PATCH",
-      body: { field, value },
-    });
-  }
-
-  function deleteDivision(id: string) {
-    return useNuxtApp().$api(`/api/divisions/${id}`, {
-      method: "DELETE",
-    });
-  }
-
-  const division = ref({
-    _id: "",
-    name: "",
-    region: "",
-    regionName: "",
-    superintendent: "",
-    superintendentName: "",
-  });
-
   return {
-    division,
     getAll,
-    getById,
-    getByName,
-    createDivision,
-    updateDivisionField,
-    deleteDivision,
   };
 }

package/composables/useEnrollment.ts

@@ -7,9 +7,7 @@ export default function useEnrollment() {
     division: "",
     divisionName: "",
     province: "",
-    provincePSGC: "",
     cityMunicipality: "",
-    cityMunicipalityPSGC: "",
     schoolYear: "",
     gradeLevel: "",
     learnerInfo: {
@@ -91,7 +89,15 @@ export default function useEnrollment() {
     isCertifiedAndConsented: false,
   });
 
+  function add(value: TBasicEducEnrForm) {
+    return $fetch("/api/basic-education/enrollments", {
+      method: "POST",
+      body: value,
+    });
+  }
+
   return {
     enrollment,
+    add,
   };
 }

package/composables/usePSGC.ts

@@ -0,0 +1,17 @@
+export default function usePSGC() {
+  function getAll({
+    page = 1,
+    limit = 10,
+    search = "",
+    type = "",
+    prefix = "",
+  } = {}) {
+    return $fetch<Record<string, any>>("/api/psgc", {
+      query: { page, limit, search, type, prefix },
+    });
+  }
+
+  return {
+    getAll,
+  };
+}

package/composables/useRegion.ts

@@ -1,62 +1,16 @@
 export default function useRegion() {
-  function getAll({ page = 1, search = "", limit = 20 } = {}) {
-    return useNuxtApp().$api<Record<string, any>>("/api/regions", {
-      method: "GET",
-      query: {
-        page,
-        search,
-        limit,
-      },
+  async function getAll({
+    page = 1,
+    search = "",
+    status = "active",
+    limit = 20,
+  } = {}) {
+    return $fetch<Record<string, any>>("/api/basic-education/regions", {
+      query: { page, search, status, limit },
     });
   }
 
-  function getById(id = "") {
-    return useNuxtApp().$api<Record<string, any>>(`/api/regions/id/${id}`, {
-      method: "GET",
-    });
-  }
-
-  function getByName(name = "") {
-    return useNuxtApp().$api(`/api/regions/name/${name}`, {
-      method: "GET",
-    });
-  }
-
-  function createRegion(data: Record<string, any>) {
-    return useNuxtApp().$api("/api/regions", {
-      method: "POST",
-      body: data,
-    });
-  }
-
-  function updateRegionField(id: string, field: string, value: string) {
-    return useNuxtApp().$api(`/api/regions/${id}`, {
-      method: "PATCH",
-      body: { field, value },
-    });
-  }
-
-  function deleteRegion(id: string) {
-    return useNuxtApp().$api(`/api/regions/${id}`, {
-      method: "DELETE",
-    });
-  }
-
-  const region = ref({
-    _id: "",
-    name: "",
-    director: "",
-    directorName: "",
-  });
-
   return {
-    region,
     getAll,
-    getById,
-    getByName,
-    createRegion,
-    updateRegionField,
-    deleteRegion,
   };
 }
-

package/composables/useSchool.ts

@@ -1,80 +1,17 @@
 export default function useSchool() {
-  function addSchool(school: TSchool) {
-    return useNuxtApp().$api<{ message: string }>("/api/schools", {
-      method: "POST",
-      body: school,
-    });
-  }
-
-  function registerSchool(school: TSchool) {
-    return useNuxtApp().$api("/api/schools/register", {
-      method: "POST",
-      body: school,
-    });
-  }
-
-  function getPendingByCreatedBy(createdBy: string) {
-    return useNuxtApp().$api<Record<string, any>>(
-      `/api/schools/createdBy/${createdBy}`,
-      {
-        method: "GET",
-      }
-    );
-  }
-
-  function approvedById(id: string) {
-    return useNuxtApp().$api<Record<string, any>>(
-      `/api/schools/approve/${id}`,
-      {
-        method: "PATCH",
-      }
-    );
-  }
-
-  function getAll({
+  async function getAll({
     page = 1,
-    status = "active",
     search = "",
-    org = "",
-    app = "admin",
+    status = "active",
+    limit = 20,
+    psgc = "",
   } = {}) {
-    return useNuxtApp().$api<Record<string, any>>("/api/schools", {
-      method: "GET",
-      query: { page, status, search, org, app },
-    });
-  }
-
-  function bulkAdd(file: File | null, region: string, division: string) {
-    if (!file) {
-      throw new Error("File not found.");
-    }
-
-    const formData = new FormData();
-    formData.append("file", file);
-    formData.append("region", region);
-    formData.append("division", division);
-
-    return useNuxtApp().$api<{
-      message: string;
-      details: {
-        successful: number;
-        failed: number;
-        total: number;
-        totalSizeMB: number;
-        errors: string[];
-      };
-    }>("/api/schools/bulk", {
-      method: "POST",
-      body: formData,
+    return $fetch<Record<string, any>>("/api/basic-education/schools", {
+      query: { page, search, status, limit, psgc },
     });
   }
 
   return {
-    addSchool,
-    registerSchool,
-    getPendingByCreatedBy,
     getAll,
-    approvedById,
-    bulkAdd,
   };
 }

package/package.json

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

package/types/basic-edu.d.ts

@@ -0,0 +1,23 @@
+declare type TRegion = {
+  _id?: string;
+  name: string;
+  director?: string;
+  directorName?: string;
+  status: string;
+  createdAt?: string;
+  updatedAt?: string;
+  deletedAt?: string;
+};
+
+declare type TDivision = {
+  _id?: string;
+  name: string;
+  region?: string;
+  regionName?: string;
+  superintendent?: string;
+  superintendentName?: string;
+  status: string;
+  createdAt?: string;
+  updatedAt?: string;
+  deletedAt?: string;
+};