@eeplatform/nuxt-layer-common 1.5.1 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eeplatform/nuxt-layer-common
 
+## 1.7.0
+
+### Minor Changes
+
+- e16c339: Program management initial release
+
+## 1.6.0
+
+### Minor Changes
+
+- 205e4b2: Section management follow up release
+
 ## 1.5.1
 
 ### Patch Changes

package/components/ConfirmPrompt.vue

@@ -0,0 +1,73 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar density="compact" class="pl-4">
+      <span class="font-weight-medium text-h5 text-capitalize">
+        Delete {{ localProps.title }}
+      </span>
+    </v-toolbar>
+
+    <v-card-text>
+      <p class="text-subtitle-2 text-center">
+        Are you sure you want to delete this
+        {{ localProps.title.toLowerCase() }}? This action cannot be undone.
+      </p>
+
+      <v-row v-if="message" no-gutters justify="center" class="mt-4">
+        <span class="text-caption text-error text-center">
+          {{ 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"
+          >
+            Delete {{ localProps.title }}
+          </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,
+  },
+});
+
+const emits = defineEmits(["cancel", "confirm"]);
+</script>

package/components/EnrollmentForm.vue

@@ -60,12 +60,13 @@
             <InputLabel class="text-capitalize" title="School" required />
             <v-col cols="12">
               <v-combobox
-                v-model="selectedSchool"
+                v-model="enrollment.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"
@@ -121,7 +122,7 @@
               <v-autocomplete
                 v-model="enrollment.gradeLevel"
                 :rules="[requiredRule]"
-                :items="gradeLevels"
+                :items="gradeLevelOffering"
               ></v-autocomplete>
             </v-col>
           </v-row>
@@ -1381,7 +1382,7 @@ watchEffect(() => {
   }
 });
 
-const schools = ref<Array<Record<string, any>>>([]);
+const schools = ref<TSchool[]>([]);
 const searchSchool = ref("");
 
 const { getAll: getAllSchools } = useSchool();
@@ -1432,48 +1433,84 @@ watchEffect(() => {
   }
 });
 
-const selectedSchool = ref<TSchool>({
-  id: "",
-  name: "",
-});
+const selectedSchool = computed(() => enrollment.value.schoolId);
 
 watch(selectedSchool, (val) => {
-  if (val.id) {
-    enrollment.value.school = val.id;
+  enrollment.value.gradeLevel = "";
+  const school = schools.value.find((s) => s.id === val);
+
+  if (school?.name) {
+    enrollment.value.school = school?._id ?? "";
+    enrollment.value.schoolName = school?.name;
   }
 
-  enrollment.value.cityMunicipality = val.cityMunicipalityPSGC ?? "";
+  enrollment.value.cityMunicipality = school?.cityMunicipalityPSGC ?? "";
 
-  if (val.province) {
-    enrollment.value.province = val.province;
+  if (school?.province) {
+    enrollment.value.province = school?.province;
   }
 
-  const regionPSGC = val.cityMunicipalityPSGC
-    ? val.cityMunicipalityPSGC.slice(0, 2) + "00000000"
+  const regionPSGC = school?.cityMunicipalityPSGC
+    ? school?.cityMunicipalityPSGC.slice(0, 2) + "00000000"
     : "";
 
-  if (val.region && regionPSGC) {
+  if (school?.region && regionPSGC) {
     enrollment.value.region = regionPSGC;
   }
 
-  if (val.regionName) {
-    enrollment.value.regionName = val.regionName;
+  if (school?.regionName) {
+    enrollment.value.regionName = school?.regionName;
   }
 
-  if (val.division) {
-    enrollment.value.division = val.cityMunicipalityPSGC
-      ? val.cityMunicipalityPSGC.slice(0, 5) + "00000"
+  if (school?.division) {
+    enrollment.value.division = school?.cityMunicipalityPSGC
+      ? school?.cityMunicipalityPSGC.slice(0, 5) + "00000"
       : "";
   }
 
-  if (val.divisionName) {
-    enrollment.value.divisionName = val.divisionName;
+  if (school?.divisionName) {
+    enrollment.value.divisionName = school?.divisionName;
   }
 });
 
 const { gradeLevels, generateSchoolYears, motherTongueOptions, tracks } =
   useBasicEdu();
 
+const gradeLevelOffering = ref<Record<string, any>[]>([]);
+
+const { getAll: getGradeLevels } = useGradeLevel();
+
+const { data: getGradeLevelReq, refresh: refreshGradeLevels } =
+  await useLazyAsyncData(
+    "get-grade-levels-for-curriculum-subject-form",
+    () =>
+      getGradeLevels({
+        limit: 100,
+        status: "active",
+        school: enrollment.value.school,
+      }),
+    {
+      watch: [() => enrollment.value.school],
+      immediate: false,
+    }
+  );
+
+watchEffect(() => {
+  if (getGradeLevelReq.value && getGradeLevelReq.value.items) {
+    gradeLevelOffering.value = getGradeLevelReq.value.items.map(
+      (l: TCurriculumSubject) => {
+        if (typeof l.gradeLevel === "string") {
+          return {
+            title: l.gradeLevel.replace("-", " "),
+            value: l.gradeLevel,
+            educationLevel: l.educationLevel,
+          };
+        }
+      }
+    );
+  }
+});
+
 const selectedTrackStrands = computed(
   () =>
     tracks.find(

package/components/Layout/NavigationDrawer.vue

@@ -28,6 +28,9 @@
     <template #append>
       <slot name="append"></slot>
     </template>
+    <template #prepend>
+      <slot name="prepend"></slot>
+    </template>
   </v-navigation-drawer>
 </template>
 

package/composables/useGradeLevel.ts

@@ -0,0 +1,42 @@
+export default function useGradeLevel() {
+  const resource = "basic-education/grade-levels";
+
+  function add(value: TGradeLevel) {
+    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) {
+    return $fetch<Record<string, any>>(`/api/${resource}/${id}`, {
+      method: "PUT",
+    });
+  }
+
+  function deleteById(id: string) {
+    return $fetch<Record<string, any>>(`/api/${resource}/${id}`, {
+      method: "DELETE",
+    });
+  }
+
+  return {
+    add,
+    getAll,
+    updateById,
+    deleteById,
+  };
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@eeplatform/nuxt-layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "main": "./nuxt.config.ts",
   "publishConfig": {
     "access": "public"
@@ -23,7 +23,7 @@
     "typescript": "^5.6.3",
     "vite-plugin-vuetify": "^2.0.4",
     "vue": "latest",
-    "vuetify": "^3.10.11"
+    "vuetify": "^3.11.2"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
   "dependencies": {

package/types/curriculum.d.ts

@@ -0,0 +1,33 @@
+declare type TCurriculumSubject = {
+  _id?: string;
+  curriculum: string;
+  curriculumName: string;
+  effectiveSchoolYear?: number[];
+  educationLevel: string;
+  gradeLevel: string | string[];
+  subjectCode: string;
+  subjectName: string;
+  subjectType: string;
+  program?: string;
+  programName?: string;
+  sessionFrequency: number;
+  sessionDuration: number;
+  totalMinutesPerWeek: number;
+  status?: string;
+};
+
+declare type TCurriculum = {
+  _id?: string;
+  name: string;
+  effectiveSchoolYear: string;
+  maxTeachingHoursPerDay: number;
+  curriculumMemoRef?: string;
+  whitelist?: string[];
+  status?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  deletedAt?: string;
+  createdBy?: string;
+  updatedBy?: string;
+  deletedBy?: string;
+};

package/types/enrollment.d.ts

@@ -8,6 +8,7 @@ declare type TTLearner = {
   cityMunicipalityPSGC?: string; // e.g., "Manila"
   division: string; // e.g., "Manila"
   divisionName?: string; // e.g., "Manila"
+  schoolId: string;
   school: string;
   schoolName?: string;
   schoolYear: string; // e.g., "2025-2026"

package/types/grade-level.d.ts

@@ -0,0 +1,20 @@
+declare type TGradeLevel = {
+  _id?: string;
+  school: string;
+  educationLevel: string;
+  gradeLevel: string;
+  teachingStyle: string;
+  minNumberOfLearners: number;
+  maxNumberOfLearners: number;
+  tracks?: string[];
+  trackStrands?: string[];
+  defaultStartTime?: string;
+  defaultEndTime?: string;
+  status?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  deletedAt?: string;
+  createdBy?: string;
+  updatedBy?: string;
+  deletedBy?: string;
+};