@eeplatform/nuxt-layer-common 1.7.53 → 1.7.54

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @eeplatform/nuxt-layer-common
 
+## 1.7.54
+
+### Patch Changes
+
+- 9395bfb: Add key config
+
 ## 1.7.53
 
 ### Patch Changes

package/components/EnrollmentQuestion.vue

@@ -0,0 +1,738 @@
+<template>
+  <v-row no-gutters class="fill-height" justify="center" align-content="start">
+    <v-col cols="6" class="mt-4">
+      <v-row no-gutters>
+        <v-col cols="12">
+          <v-row no-gutters justify="space-between">
+            <v-btn icon variant="text" density="comfortable" @click="goBack">
+              <v-icon> ph:arrow-left-bold </v-icon>
+            </v-btn>
+          </v-row>
+        </v-col>
+
+        <v-col cols="12" class="pl-2 mt-2">
+          <v-progress-linear
+            :model-value="progress"
+            rounded="lg"
+            height="10"
+          ></v-progress-linear>
+        </v-col>
+
+        <v-col v-if="currentStep === 1" cols="12" class="mt-8 pl-2">
+          <v-row no-gutters>
+            <v-col cols="12">
+              <v-form v-model="step1.valid">
+                <v-row no-gutters>
+                  <v-col cols="12" class="mb-6">
+                    <span class="text-h5 font-weight-bold">
+                      {{ step1.question }}
+                    </span>
+                  </v-col>
+
+                  <v-col v-if="isSelfService" cols="12">
+                    <InputLabel title="Region" />
+                    <v-autocomplete
+                      v-model="step1.answer.region"
+                      :items="regions"
+                      item-title="name"
+                      item-value="code"
+                      :loading="regionStatus"
+                      :disabled="regionStatus"
+                    ></v-autocomplete>
+                  </v-col>
+
+                  <v-col v-if="isSelfService" cols="12">
+                    <InputLabel title="Province" />
+                    <v-autocomplete
+                      v-model="step1.answer.province"
+                      :items="step1Provinces"
+                      item-title="name"
+                      item-value="code"
+                      :return-object="false"
+                      :loading="step1ProvincesStatus"
+                      :disabled="step1ProvincesStatus || !step1.answer.region"
+                    ></v-autocomplete>
+                  </v-col>
+
+                  <v-col v-if="isSelfService" cols="12">
+                    <InputLabel title="City/Municipality" />
+                    <v-autocomplete
+                      v-model="step1.answer.cityMunicipality"
+                      :items="step1CitiesMunicipalities"
+                      item-title="name"
+                      item-value="code"
+                      :loading="step1CitiesMunicipalitiesStatus"
+                      :disabled="
+                        step1CitiesMunicipalitiesStatus ||
+                        !step1.answer.province
+                      "
+                    ></v-autocomplete>
+                  </v-col>
+
+                  <v-col cols="12">
+                    <InputLabel title="School" required />
+                    <v-combobox
+                      v-model="step1.answer.schoolId"
+                      v-model:search="searchSchool"
+                      :rules="[requiredRule]"
+                      :items="schools"
+                      item-title="name"
+                      item-value="id"
+                      :return-object="false"
+                      :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-col cols="12" class="mt-4">
+                    <v-btn
+                      class="text-none px-4"
+                      size="large"
+                      variant="flat"
+                      color="black"
+                      rounded="lg"
+                      @click="step1.save()"
+                      :disabled="!step1.valid"
+                    >
+                      Continue
+                    </v-btn>
+                  </v-col>
+                </v-row>
+              </v-form>
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-row>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const localProps = defineProps({
+  type: {
+    type: String as PropType<"self-service" | "encoder">,
+    default: "encoder",
+  },
+});
+
+const { loggedInUser, currentUser } = useLocalAuth();
+
+const isEncoder = computed(() => localProps.type === "encoder");
+const isSelfService = computed(() => localProps.type === "self-service");
+
+const { enrollment } = useEnrollment();
+
+const emit = defineEmits(["close"]);
+
+const { requiredRule } = useUtils();
+
+// enrollment questions — matched to useEnrollment().enrollment
+
+// enrollment.region, .regionName, .province, .cityMunicipality, .schoolId, .school, .schoolName
+const step1 = ref({
+  question: "Which school do you want to enroll in?",
+  answer: {
+    region: "",
+    regionName: "",
+    province: "",
+    cityMunicipality: "",
+    schoolId: "",
+    school: "",
+    schoolName: "",
+  },
+  save() {
+    const school = schools.value.find(
+      (s) => s.id === step1.value.answer.schoolId
+    );
+
+    if (school) {
+      step1.value.answer.school = school._id ?? "";
+      step1.value.answer.schoolName = school.name;
+      step1.value.answer.cityMunicipality = school.cityMunicipalityPSGC ?? "";
+      step1.value.answer.province = school.cityMunicipalityPSGC
+        ? school.cityMunicipalityPSGC.slice(0, 5) + "00000"
+        : "";
+      step1.value.answer.region = school.cityMunicipalityPSGC
+        ? school.cityMunicipalityPSGC.slice(0, 2) + "00000000"
+        : "";
+      step1.value.answer.regionName = school.regionName ?? "";
+    }
+
+    enrollment.value.region = step1.value.answer.region;
+    enrollment.value.regionName = step1.value.answer.regionName;
+    enrollment.value.province = step1.value.answer.province;
+    enrollment.value.cityMunicipality = step1.value.answer.cityMunicipality;
+    enrollment.value.schoolId = step1.value.answer.schoolId;
+    enrollment.value.school = step1.value.answer.school;
+    enrollment.value.schoolName = step1.value.answer.schoolName;
+    currentStep.value++;
+  },
+  valid: false,
+});
+
+// Step 1 data fetching
+const { getAll: getAllPSGC } = usePSGC();
+const { getAll: getAllSchools } = useSchool();
+
+// Regions
+const regions = ref<Array<Record<string, any>>>([]);
+
+const { data: step1RegionsData, status: step1RegionsStatus } = useLazyAsyncData(
+  "eq-psgc-regions",
+  () => getAllPSGC({ type: "Reg" })
+);
+
+const regionStatus = computed(() => step1RegionsStatus.value === "pending");
+
+watchEffect(() => {
+  if (step1RegionsData.value) {
+    regions.value = step1RegionsData.value.items;
+  }
+});
+
+// Provinces (filtered by selected region)
+const step1Provinces = ref<Array<Record<string, any>>>([]);
+
+const step1SelectedRegion = computed(() => step1.value.answer.region);
+
+const { data: step1ProvData, status: step1ProvReqStatus } = useLazyAsyncData(
+  "eq-psgc-provinces",
+  () =>
+    getAllPSGC({
+      type: "Prov",
+      prefix: step1SelectedRegion.value.slice(0, 2),
+      limit: 100,
+    }),
+  { watch: [step1SelectedRegion] }
+);
+
+const step1ProvincesStatus = computed(
+  () => step1ProvReqStatus.value === "pending"
+);
+
+watchEffect(() => {
+  if (step1ProvData.value) {
+    step1Provinces.value = step1ProvData.value.items;
+  }
+});
+
+// Cities/Municipalities (filtered by selected province)
+const step1CitiesMunicipalities = ref<Array<Record<string, any>>>([]);
+
+const step1SelectedProvince = computed(() => step1.value.answer.province);
+
+const { data: step1CityMunData, status: step1CityMunReqStatus } =
+  useLazyAsyncData(
+    "eq-psgc-cities-municipalities",
+    () =>
+      getAllPSGC({
+        type: "City",
+        prefix: step1SelectedProvince.value.slice(0, 5),
+        limit: 2000,
+      }),
+    { watch: [step1SelectedProvince] }
+  );
+
+const step1CitiesMunicipalitiesStatus = computed(
+  () => step1CityMunReqStatus.value === "pending"
+);
+
+watchEffect(() => {
+  if (step1CityMunData.value) {
+    step1CitiesMunicipalities.value = step1CityMunData.value.items;
+  }
+});
+
+// Clear cascade: region -> province -> city
+watch(
+  () => step1.value.answer.region,
+  () => {
+    step1.value.answer.province = "";
+    step1.value.answer.cityMunicipality = "";
+    step1.value.answer.schoolId = "";
+  }
+);
+
+watch(
+  () => step1.value.answer.province,
+  () => {
+    step1.value.answer.cityMunicipality = "";
+    step1.value.answer.schoolId = "";
+  }
+);
+
+watch(
+  () => step1.value.answer.cityMunicipality,
+  () => {
+    step1.value.answer.schoolId = "";
+  }
+);
+
+// Schools (filtered by PSGC prefix)
+const schools = ref<TSchool[]>([]);
+const searchSchool = ref("");
+
+const psgcSchoolPrefix = computed(() => {
+  if (step1.value.answer.cityMunicipality) {
+    return step1.value.answer.cityMunicipality.slice(0, 7);
+  }
+  if (step1.value.answer.province) {
+    return step1.value.answer.province.slice(0, 5);
+  }
+  if (step1.value.answer.region) {
+    return step1.value.answer.region.slice(0, 2);
+  }
+  return "";
+});
+
+const {
+  data: step1SchoolsData,
+  status: step1SchoolsReqStatus,
+  refresh: refreshSchools,
+} = useLazyAsyncData(
+  "eq-schools",
+  () =>
+    getAllSchools({
+      limit: 100,
+      psgc: psgcSchoolPrefix.value,
+      search: searchSchool.value,
+    }),
+  { watch: [psgcSchoolPrefix] }
+);
+
+const schoolsStatus = computed(() => step1SchoolsReqStatus.value === "pending");
+
+watchEffect(() => {
+  if (step1SchoolsData.value) {
+    schools.value = step1SchoolsData.value.items;
+  }
+});
+
+// enrollment.schoolYear
+const step2 = ref({
+  question: "Which school year do you want to enroll in?",
+  answer: {
+    schoolYear: "",
+  },
+  save() {
+    enrollment.value.schoolYear = step2.value.answer.schoolYear;
+  },
+  valid: false,
+});
+
+// enrollment.gradeLevel
+const step3 = ref({
+  question: "Which grade level do you want to enroll in?",
+  answer: {
+    gradeLevel: "",
+  },
+  save() {
+    enrollment.value.gradeLevel = step3.value.answer.gradeLevel;
+  },
+  valid: false,
+});
+
+// enrollment.seniorHighInfo.semester (shown when grade 11 or 12)
+const step4 = ref({
+  question: "What semester do you want to enroll in?",
+  answer: {
+    semester: "",
+  },
+  save() {
+    enrollment.value.seniorHighInfo!.semester = step4.value.answer.semester;
+  },
+  valid: false,
+});
+
+// enrollment.seniorHighInfo.track, .trackName (shown when grade 11 or 12)
+const step5 = ref({
+  question: "What track do you want to enroll in?",
+  answer: {
+    track: "",
+    trackName: "",
+  },
+  save() {
+    enrollment.value.seniorHighInfo!.track = step5.value.answer.track;
+    enrollment.value.seniorHighInfo!.trackName = step5.value.answer.trackName;
+  },
+  valid: false,
+});
+
+// enrollment.seniorHighInfo.strand, .strandName (shown when grade 11 or 12)
+const step6 = ref({
+  question: "What strand do you want to enroll in?",
+  answer: {
+    strand: "",
+    strandName: "",
+  },
+  save() {
+    enrollment.value.seniorHighInfo!.strand = step6.value.answer.strand;
+    enrollment.value.seniorHighInfo!.strandName = step6.value.answer.strandName;
+  },
+  valid: false,
+});
+
+// enrollment.returningLearner
+const step7 = ref({
+  question: "Is the learner a returning learner?",
+  answer: {
+    returningLearner: false,
+  },
+  save() {
+    enrollment.value.returningLearner = step7.value.answer.returningLearner;
+  },
+  valid: false,
+});
+
+// enrollment.learnerInfo.psaBirthCertificateNo, .lrn
+const step8 = ref({
+  question: "What is the learner's PSA Birth Certificate No. and LRN?",
+  answer: {
+    psaBirthCertificateNo: "",
+    lrn: "",
+  },
+  save() {
+    enrollment.value.learnerInfo.psaBirthCertificateNo =
+      step8.value.answer.psaBirthCertificateNo;
+    enrollment.value.learnerInfo.lrn = step8.value.answer.lrn;
+  },
+  valid: false,
+});
+
+// enrollment.learnerInfo.lastName, .firstName, .middleName, .extensionName
+const step9 = ref({
+  question: "What is the learner's full name?",
+  answer: {
+    lastName: "",
+    firstName: "",
+    middleName: "",
+    extensionName: "",
+  },
+  save() {
+    enrollment.value.learnerInfo.lastName = step9.value.answer.lastName;
+    enrollment.value.learnerInfo.firstName = step9.value.answer.firstName;
+    enrollment.value.learnerInfo.middleName = step9.value.answer.middleName;
+    enrollment.value.learnerInfo.extensionName =
+      step9.value.answer.extensionName;
+  },
+  valid: false,
+});
+
+// enrollment.learnerInfo.birthDate, .age
+const step10 = ref({
+  question: "What is the learner's birthdate?",
+  answer: {
+    birthDate: "",
+    age: 0,
+  },
+  save() {
+    enrollment.value.learnerInfo.birthDate = step10.value.answer.birthDate;
+    enrollment.value.learnerInfo.age = step10.value.answer.age;
+  },
+  valid: false,
+});
+
+// enrollment.learnerInfo.sex
+const step11 = ref({
+  question: "What is the learner's sex?",
+  answer: {
+    sex: "",
+  },
+  save() {
+    enrollment.value.learnerInfo.sex = step11.value.answer.sex;
+  },
+  valid: false,
+});
+
+// enrollment.learnerInfo.placeOfBirth
+const step12 = ref({
+  question: "What is the learner's place of birth?",
+  answer: {
+    placeOfBirth: {
+      region: "",
+      regionName: "",
+      province: "",
+      provinceName: "",
+      cityMunicipality: "",
+      cityMunicipalityName: "",
+    },
+  },
+  save() {
+    enrollment.value.learnerInfo.placeOfBirth = {
+      ...step12.value.answer.placeOfBirth,
+    };
+  },
+  valid: false,
+});
+
+// enrollment.learnerInfo.motherTongue
+const step13 = ref({
+  question: "What is the learner's mother tongue?",
+  answer: {
+    motherTongue: "",
+  },
+  save() {
+    enrollment.value.learnerInfo.motherTongue =
+      step13.value.answer.motherTongue;
+  },
+  valid: false,
+});
+
+// enrollment.learnerInfo.indigenousCommunity
+const step14 = ref({
+  question: "Is the learner part of an indigenous community?",
+  answer: {
+    indigenousCommunity: "",
+  },
+  save() {
+    enrollment.value.learnerInfo.indigenousCommunity =
+      step14.value.answer.indigenousCommunity;
+  },
+  valid: false,
+});
+
+// enrollment.learnerInfo.fourPsHouseholdId
+const step15 = ref({
+  question: "Is the learner part of a 4Ps household?",
+  answer: {
+    fourPsHouseholdId: "",
+  },
+  save() {
+    enrollment.value.learnerInfo.fourPsHouseholdId =
+      step15.value.answer.fourPsHouseholdId;
+  },
+  valid: false,
+});
+
+// enrollment.learnerInfo.withDisability, .disabilities
+const step16 = ref({
+  question: "Does the learner have a disability?",
+  answer: {
+    withDisability: false,
+    disabilities: [] as string[],
+  },
+  save() {
+    enrollment.value.learnerInfo.withDisability =
+      step16.value.answer.withDisability;
+    enrollment.value.learnerInfo.disabilities = [
+      ...step16.value.answer.disabilities,
+    ];
+  },
+  valid: false,
+});
+
+// enrollment.address.current
+const step17 = ref({
+  question: "What is the learner's current address?",
+  answer: {
+    houseNumber: "",
+    streetName: "",
+    sitio: "",
+    barangay: "",
+    barangayName: "",
+    municipalityCity: "",
+    municipalityCityName: "",
+    province: "",
+    provinceName: "",
+    region: "",
+    regionName: "",
+    country: "",
+    zipCode: "",
+  },
+  save() {
+    enrollment.value.address.current = { ...step17.value.answer };
+  },
+  valid: false,
+});
+
+// enrollment.address.permanent
+const step18 = ref({
+  question: "What is the learner's permanent address?",
+  answer: {
+    houseNumber: "",
+    streetName: "",
+    sitio: "",
+    barangay: "",
+    municipalityCity: "",
+    municipalityCityName: "",
+    province: "",
+    region: "",
+    regionName: "",
+    country: "",
+    zipCode: "",
+  },
+  save() {
+    enrollment.value.address.permanent = { ...step18.value.answer };
+  },
+  valid: false,
+});
+
+// enrollment.parentGuardianInfo.father
+const step19 = ref({
+  question: "What is the learner's father's name?",
+  answer: {
+    firstName: "",
+    lastName: "",
+    middleName: "",
+    contactNumber: "",
+  },
+  save() {
+    enrollment.value.parentGuardianInfo.father = { ...step19.value.answer };
+  },
+  valid: false,
+});
+
+// enrollment.parentGuardianInfo.mother
+const step20 = ref({
+  question: "What is the learner's mother's name?",
+  answer: {
+    firstName: "",
+    lastName: "",
+    middleName: "",
+    contactNumber: "",
+  },
+  save() {
+    enrollment.value.parentGuardianInfo.mother = { ...step20.value.answer };
+  },
+  valid: false,
+});
+
+// enrollment.parentGuardianInfo.legalGuardian
+const step21 = ref({
+  question: "What is the learner's legal guardian's name?",
+  answer: {
+    firstName: "",
+    lastName: "",
+    middleName: "",
+    contactNumber: "",
+  },
+  save() {
+    enrollment.value.parentGuardianInfo.legalGuardian = {
+      ...step21.value.answer,
+    };
+  },
+  valid: false,
+});
+
+// enrollment.returningLearnerInfo.lastGradeLevelCompleted
+const step22 = ref({
+  question: "What grade level did the learner last complete?",
+  answer: {
+    lastGradeLevelCompleted: "",
+  },
+  save() {
+    enrollment.value.returningLearnerInfo.lastGradeLevelCompleted =
+      step22.value.answer.lastGradeLevelCompleted;
+  },
+  valid: false,
+});
+
+// enrollment.returningLearnerInfo.lastSchoolYearCompleted
+const step23 = ref({
+  question: "What school year did the learner last complete?",
+  answer: {
+    lastSchoolYearCompleted: "",
+  },
+  save() {
+    enrollment.value.returningLearnerInfo.lastSchoolYearCompleted =
+      step23.value.answer.lastSchoolYearCompleted;
+  },
+  valid: false,
+});
+
+// enrollment.returningLearnerInfo.lastSchoolAttended, .lastSchoolId
+const step24 = ref({
+  question: "What school did the learner last attend?",
+  answer: {
+    lastSchoolAttended: "",
+    lastSchoolId: "",
+  },
+  save() {
+    enrollment.value.returningLearnerInfo.lastSchoolAttended =
+      step24.value.answer.lastSchoolAttended;
+    enrollment.value.returningLearnerInfo.lastSchoolId =
+      step24.value.answer.lastSchoolId;
+  },
+  valid: false,
+});
+
+// enrollment.alternativeLearningOptions
+const step25 = ref({
+  question: "What alternative learning options do you want to enroll in?",
+  answer: {
+    alternativeLearningOptions: [] as string[],
+  },
+  save() {
+    enrollment.value.alternativeLearningOptions = [
+      ...step25.value.answer.alternativeLearningOptions,
+    ];
+  },
+  valid: false,
+});
+
+// enrollment.isCertifiedAndConsented
+const step26 = ref({
+  question: `I hereby certify that the above information given are true and
+            correct to the best of my knowledge and I allow the Department of
+            Education to use my child's details to create and/or update his/her
+            learner profile in the Learner Information System. The information
+            herein shall be treated as confidential in compliance with the Data
+            Privacy Act of 2012.`,
+  answer: {
+    isCertifiedAndConsented: false,
+  },
+  save() {
+    enrollment.value.isCertifiedAndConsented =
+      step26.value.answer.isCertifiedAndConsented;
+  },
+  valid: false,
+});
+
+const currentStep = ref(1);
+
+function goBack() {
+  if (currentStep.value === 1) {
+    emit("close");
+  } else {
+    currentStep.value--;
+  }
+}
+
+const isSeniorHigh = computed(
+  () =>
+    step3.value.answer.gradeLevel === "Grade 11" ||
+    step3.value.answer.gradeLevel === "Grade 12"
+);
+
+const totalSteps = computed(() => (isSeniorHigh.value ? 26 : 23));
+
+const progress = computed(() =>
+  Math.round((currentStep.value / totalSteps.value) * 100)
+);
+</script>

package/components/InvitationForm.vue

@@ -143,15 +143,15 @@ const invite = ref({
 const searchRole = ref("");
 const roles = ref<Array<Record<string, any>>>([]);
 
-const { getRoles } = useRole();
+const { getAll } = useRole();
 
 const { data: getRolesData, status: getRolesStatus } = await useLazyAsyncData(
   "get-roles",
   () =>
-    getRoles({
+    getAll({
       search: searchRole.value,
-      type: prop.app,
-      id: prop.org,
+      app: prop.app,
+      org: prop.org,
       limit: 20,
     })
 );

package/nuxt.config.ts

@@ -36,6 +36,7 @@ export default defineNuxtConfig({
       APP_LOCAL_GOV_PROV: (process.env.APP_LOCAL_GOV_PROV as string) ?? "",
       APP_LOCAL_GOV_CITY: (process.env.APP_LOCAL_GOV_CITY as string) ?? "",
       APP_LOCAL_GOV_BRGY: (process.env.APP_LOCAL_GOV_BRGY as string) ?? "",
+      ENROLLMENT: (process.env.ENROLLMENT as string) ?? "",
     },
   },
 

package/package.json

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

package/types/enrollment.d.ts

@@ -24,7 +24,7 @@ declare type TLearner = {
   learnerInfo: EnrLearnerInfo;
   parentGuardianInfo: EnrParentGuardianInfo;
   address: AddressInformation;
-  returningLearnerInfo?: EnrReturningLearnerInfo;
+  returningLearnerInfo: EnrReturningLearnerInfo;
   seniorHighInfo?: EnrSeniorHighInformation;
   lastGradeLevelCompleted?: string;
   lastSchoolYearCompleted?: string;