@eeplatform/nuxt-layer-common 1.7.1 → 1.7.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eeplatform/nuxt-layer-common
 
+## 1.7.3
+
+### Patch Changes
+
+- 11eb2d6: Fix program form
+
+## 1.7.2
+
+### Patch Changes
+
+- b4953cf: Revise enrollment form
+
 ## 1.7.1
 
 ### Patch Changes

package/components/ConfirmPrompt.vue

@@ -2,13 +2,13 @@
   <v-card width="100%">
     <v-toolbar density="compact" class="pl-4">
       <span class="font-weight-medium text-h5 text-capitalize">
-        Delete {{ localProps.title }}
+        {{ localProps.action }} {{ localProps.title }}
       </span>
     </v-toolbar>
 
     <v-card-text>
       <p class="text-subtitle-2 text-center">
-        Are you sure you want to delete this
+        Are you sure you want to {{ localProps.action }} this
         {{ localProps.title.toLowerCase() }}? This action cannot be undone.
       </p>
 
@@ -45,7 +45,7 @@
             @click="emits('confirm')"
             :disabled="localProps.disabled"
           >
-            Delete {{ localProps.title }}
+            {{ localProps.action }} {{ localProps.title }}
           </v-btn>
         </v-col>
       </v-row>
@@ -67,6 +67,10 @@ const localProps = defineProps({
     type: Boolean,
     default: false,
   },
+  action: {
+    type: String,
+    default: "delete",
+  },
 });
 
 const emits = defineEmits(["cancel", "confirm"]);

package/components/ConfirmationPrompt.vue

@@ -0,0 +1,80 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar density="compact" class="pl-4">
+      <span class="font-weight-medium text-h5 text-capitalize">
+        {{ localProps.title }}
+      </span>
+    </v-toolbar>
+
+    <v-card-text>
+      <p class="text-subtitle-2 text-center">
+        {{ localProps.content }}
+      </p>
+
+      <v-row v-if="localProps.message" no-gutters justify="center" class="mt-4">
+        <span class="text-caption text-error text-center">
+          {{ localProps.message }}
+        </span>
+      </v-row>
+    </v-card-text>
+
+    <v-toolbar density="compact">
+      <v-row no-gutters>
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            size="48"
+            variant="text"
+            class="text-none"
+            @click="emits('cancel')"
+            :disabled="localProps.disabled"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            size="48"
+            color="black"
+            variant="flat"
+            class="text-none"
+            @click="emits('confirm')"
+            :disabled="localProps.disabled"
+          >
+            {{ localProps.action }}
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const localProps = defineProps({
+  title: {
+    type: String,
+    default: "Title",
+  },
+  message: {
+    type: String,
+    default: "",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  action: {
+    type: String,
+    default: "Submit",
+  },
+  content: {
+    type: String,
+    default: "Are you sure you want to proceed?",
+  },
+});
+
+const emits = defineEmits(["cancel", "confirm"]);
+</script>

package/components/EnrollmentForm.vue

@@ -130,6 +130,106 @@
       </v-row>
     </v-col>
 
+    <v-col v-if="hasSpecialProgram" cols="12">
+      <v-row no-gutters>
+        <v-col cols="12">
+          <v-checkbox
+            v-model="enrollment.applyToSpecialProgram"
+            label="Apply to Special Program"
+            hide-details
+            density="compact"
+          ></v-checkbox>
+        </v-col>
+
+        <v-col v-if="enrollment.applyToSpecialProgram" cols="12">
+          <v-row>
+            <v-col cols="4">
+              <v-row no-gutters>
+                <v-col cols="12">
+                  <v-row no-gutters>
+                    <InputLabel
+                      class="text-capitalize"
+                      title="Special Program"
+                      required
+                    />
+                    <v-col cols="12">
+                      <v-autocomplete
+                        v-model="enrollment.specialProgram"
+                        :rules="[requiredRule]"
+                        :items="programs"
+                        item-title="name"
+                        item-value="_id"
+                      ></v-autocomplete>
+                    </v-col>
+                  </v-row>
+                </v-col>
+
+                <v-col v-if="enrollment.specialProgram" cols="12">
+                  <v-row no-gutters>
+                    <v-col cols="12">
+                      <v-row no-gutters>
+                        <v-col cols="12">
+                          <InputLabel
+                            class="text-capitalize"
+                            title="GWA"
+                            required
+                          />
+                        </v-col>
+                        <v-col cols="12">
+                          <v-text-field
+                            v-model.number="enrollment.gwa"
+                            :rules="[requiredRule, (v:any) => v >= selectedProgram.gwa || `Required GWA is equal or greater than ${selectedProgram.gwa}`]"
+                            type="number"
+                          ></v-text-field>
+                        </v-col>
+                      </v-row>
+                    </v-col>
+
+                    <v-col v-if="enrollment.subjects" cols="12">
+                      <v-row no-gutters>
+                        <template
+                          v-for="(
+                            programSubject, programSubjectIndex
+                          ) in selectedProgram.subjects"
+                          :key="programSubjectIndex"
+                        >
+                          <v-col cols="12" class="mb-2">
+                            <v-row no-gutters>
+                              <InputLabel
+                                class="text-capitalize"
+                                :title="programSubject.title"
+                                required
+                              />
+                              <v-col cols="12">
+                                <v-text-field
+                                  v-model.number="
+                                    enrollment.subjects[programSubjectIndex]
+                                      .grade
+                                  "
+                                  type="number"
+                                  :rules="[
+                                    requiredRule,
+                                    (v:any) =>
+                                      v >= programSubject.grade ||
+                                      `Required grade is equal or greater than ${programSubject.grade}`,
+                                  ]"
+                                >
+                                </v-text-field>
+                              </v-col>
+                            </v-row>
+                          </v-col>
+                        </template>
+                      </v-row>
+                    </v-col>
+                  </v-row>
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-row>
+    </v-col>
+
     <v-col cols="12">
       <v-checkbox
         v-model="enrollment.returningLearner"
@@ -1390,6 +1490,63 @@ watchEffect(() => {
   }
 });
 
+const { getAll } = useProgram();
+
+const programs = ref<Array<Record<string, any>>>([]);
+
+const { data: getPrograms } = await useLazyAsyncData(
+  `get-programs-as-options-enrollment-form`,
+  () =>
+    getAll({
+      limit: 20,
+      school: enrollment.value.school,
+    }),
+  {
+    watch: [() => enrollment.value.school],
+    immediate: false,
+  }
+);
+
+watchEffect(() => {
+  if (getPrograms.value) {
+    programs.value = getPrograms.value.items;
+  }
+});
+
+const selectedProgram = computed(() => {
+  const program = programs.value.find(
+    (p) => p._id === enrollment.value.specialProgram
+  );
+
+  if (!program) {
+    return useProgram().program.value;
+  }
+
+  return program;
+});
+
+watchEffect(() => {
+  if (selectedProgram.value) {
+    enrollment.value.subjects = selectedProgram.value.subjects.map(
+      (i: any) => ({ title: i.title, grade: 0 })
+    );
+  } else {
+    enrollment.value.subjects = [];
+  }
+});
+
+const hasSpecialProgram = computed(() => {
+  const juniorHigh = ["grade-7", "grade-8", "grade-9", "grade-10"];
+
+  const isJuniorHigh = juniorHigh.includes(enrollment.value.gradeLevel);
+
+  if (isJuniorHigh && programs.value.length > 0) {
+    return true;
+  }
+
+  return false;
+});
+
 const schools = ref<TSchool[]>([]);
 const searchSchool = ref("");
 
@@ -1490,7 +1647,11 @@ const { getAll: getGradeLevels } = useGradeLevel();
 
 const { data: getGradeLevelReq } = await useLazyAsyncData(
   "get-grade-level-offerings" + enrollment.value.school,
-  () => getGradeLevels({ school: enrollment.value.school, limit: 100 })
+  () => getGradeLevels({ school: enrollment.value.school, limit: 100 }),
+  {
+    watch: [() => enrollment.value.school],
+    immediate: false,
+  }
 );
 
 watchEffect(() => {

package/composables/useEnrollment.ts

@@ -1,5 +1,6 @@
 export default function useEnrollment() {
   const enrollment = ref<TTLearner>({
+    schoolId: "",
     school: "",
     schoolName: "",
     region: "",
@@ -10,6 +11,11 @@ export default function useEnrollment() {
     cityMunicipality: "",
     schoolYear: "",
     gradeLevel: "",
+    specialProgram: "",
+    specialProgramName: "",
+    applyToSpecialProgram: false,
+    gwa: 0,
+    subjects: [],
     returningLearner: false,
     learnerInfo: {
       psaBirthCertificateNo: "",

package/composables/useProgram.ts

@@ -0,0 +1,53 @@
+export function useProgram() {
+  const resource = "basic-education/programs";
+
+  const program = ref<TProgram>({
+    school: "",
+    name: "",
+    code: "",
+    gwa: 0,
+    subjects: [],
+    description: "",
+  });
+
+  function add(value: TProgram) {
+    return $fetch<Record<string, any>>(`/api/${resource}`, {
+      method: "POST",
+      body: value,
+    });
+  }
+
+  async function getAll({
+    page = 1,
+    search = "",
+    limit = 10,
+    status = "active",
+    school = "",
+  } = {}) {
+    return $fetch<Record<string, any>>(`/api/${resource}`, {
+      method: "GET",
+      query: { page, limit, search, status, school },
+    });
+  }
+
+  function updateById(id: string, value: TProgram) {
+    return $fetch<Record<string, any>>(`/api/${resource}/id/${id}`, {
+      method: "POST",
+      body: value,
+    });
+  }
+
+  function deleteById(id: string) {
+    return $fetch<Record<string, any>>(`/api/${resource}/id/${id}`, {
+      method: "DELETE",
+    });
+  }
+
+  return {
+    add,
+    getAll,
+    program,
+    updateById,
+    deleteById,
+  };
+}

package/composables/useUtils.ts

@@ -190,15 +190,6 @@ export default function useUtils() {
     }).format(amount);
   }
 
-  // 🔹 Examples:
-  // console.log(formatNumber(1234.56)); // "1,234.56" (comma separator, 2 decimals)
-  // console.log(formatNumber(1234.56, { decimalPlaces: 0 })); // "1,234" (no decimals)
-  // console.log(formatNumber(1234.56, { useSymbol: true, currency: "USD" })); // "$1,234.56"
-  // console.log(formatNumber(1234.56, { useSymbol: true, currency: "PHP", decimalPlaces: 0 })); // "₱1,234"
-  // console.log(formatNumber(1234.56, { useSymbol: false, decimalPlaces: 0 })); // "1,234"
-  // console.log(formatNumber(1234.56, { useSymbol: true, currency: "EUR", locale: "de-DE" })); // "1.234,56 €"
-  // console.log(formatNumber(1234.56, { useSymbol: true, currency: "EUR", locale: "de-DE", decimalPlaces: 0 })); // "1.234 €"
-
   function computeTieredCost(
     seats: number,
     tiers: { min: number; max: number; price: number }[],

package/package.json

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

package/types/enrollment.d.ts

@@ -13,6 +13,12 @@ declare type TTLearner = {
   schoolName?: string;
   schoolYear: string; // e.g., "2025-2026"
   gradeLevel: string; // e.g., "Grade 7"
+  applyToSpecialProgram: boolean;
+  specialProgram?: string;
+  specialProgramName?: string;
+  specialProgramCode?: string;
+  gwa?: number;
+  subjects?: { title: string; grade: number }[];
   returningLearner: boolean;
   learnerInfo: EnrLearnerInfo;
   parentGuardianInfo: EnrParentGuardianInfo;

package/types/program.d.ts

@@ -0,0 +1,33 @@
+declare type TProgram = {
+  _id?: string;
+  school?: string;
+  schoolName?: string;
+  name: string;
+  code: string;
+  gradeLevels?: string[];
+  gwa?: number;
+  subjects?: { title: string; grade: number }[];
+  description?: string;
+  status?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  deletedAt?: string;
+};
+
+declare type TProgramScreening = {
+  _id?: string;
+  school: string;
+  schoolName?: string;
+  schoolYear: string;
+  gradeLevel: string;
+  specialProgram: string;
+  specialProgramName?: string;
+  applicant: string;
+  applicantName?: string;
+  gwa?: number;
+  subjects?: { title: string; grade: number }[];
+  status?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  deletedAt?: string;
+};