@eeplatform/nuxt-layer-common 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @eeplatform/nuxt-layer-common
 
+## 1.7.0
+
+### Minor Changes
+
+- e16c339: Program management initial release
+
 ## 1.6.0
 
 ### Minor 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/{useCurriculum.ts → useGradeLevel.ts}

@@ -1,7 +1,7 @@
-export default function useCurriculum() {
-  const resource = "basic-education/curriculums";
+export default function useGradeLevel() {
+  const resource = "basic-education/grade-levels";
 
-  function add(value: TCurriculum) {
+  function add(value: TGradeLevel) {
     return $fetch<Record<string, any>>(`/api/${resource}`, {
       method: "POST",
       body: value,
@@ -21,16 +21,9 @@ export default function useCurriculum() {
     });
   }
 
-  function updateById(
-    id: string,
-    value: Pick<
-      TCurriculum,
-      "name" | "effectiveSchoolYear" | "maxTeachingHoursPerDay"
-    >
-  ) {
+  function updateById(id: string) {
     return $fetch<Record<string, any>>(`/api/${resource}/${id}`, {
       method: "PUT",
-      body: value,
     });
   }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@eeplatform/nuxt-layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.6.0",
+  "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

@@ -8,6 +8,8 @@ declare type TCurriculumSubject = {
   subjectCode: string;
   subjectName: string;
   subjectType: string;
+  program?: string;
+  programName?: string;
   sessionFrequency: number;
   sessionDuration: number;
   totalMinutesPerWeek: number;

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;
+};

package/components/Curriculum.vue

@@ -1,269 +0,0 @@
-<template>
-  <v-row no-gutters class="pa-4">
-    <v-col v-if="localProps.canAdd" cols="12" class="mb-2">
-      <v-row no-gutters>
-        <v-btn
-          class="text-none"
-          rounded="pill"
-          variant="tonal"
-          @click="dialogCreate = true"
-          size="large"
-        >
-          Add Curriculum
-        </v-btn>
-      </v-row>
-    </v-col>
-
-    <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-          </template>
-
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value=""
-              />
-            </v-row>
-          </template>
-        </v-toolbar>
-
-        <v-data-table
-          :headers="headers"
-          :items="items"
-          item-value="_id"
-          items-per-page="20"
-          fixed-header
-          hide-default-footer
-          hide-default-header
-          @click:row="tableRowClickHandler"
-          style="max-height: calc(100vh - (200px))"
-        >
-        </v-data-table>
-      </v-card>
-    </v-col>
-
-    <!-- dialog -->
-    <v-dialog v-model="dialogCreate" persistent width="450">
-      <CurriculumForm
-        title="Add curriculum"
-        :school="school"
-        @cancel="dialogCreate = false"
-        @success="successHandler()"
-      />
-    </v-dialog>
-
-    <v-dialog v-model="dialogView" persistent width="450">
-      <CurriculumForm
-        title="View curriculum details"
-        :school="school"
-        @cancel="dialogView = false"
-        @edit="handleEdit()"
-        @delete="dialogDelete = true"
-        :data="curriculum"
-        mode="view"
-        :can-edit="localProps.canEdit"
-        :can-delete="localProps.canDelete"
-      />
-    </v-dialog>
-
-    <v-dialog v-model="dialogUpdate" persistent width="450">
-      <CurriculumForm
-        title="Update curriculum details"
-        :school="school"
-        @cancel="dialogUpdate = false"
-        :data="curriculum"
-        mode="edit"
-        :can-edit="localProps.canEdit"
-        :can-delete="localProps.canDelete"
-      />
-    </v-dialog>
-
-    <v-dialog
-      v-model="dialogDelete"
-      :loading="loadingDelete"
-      width="450"
-      persistent
-    >
-      <v-card width="100%">
-        <v-toolbar density="compact" class="pl-4">
-          <span class="font-weight-medium text-h5">Delete Curriculum</span>
-        </v-toolbar>
-
-        <v-card-text>
-          <p class="text-subtitle-2 text-center">
-            Are you sure you want to delete this curriculum? 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="dialogDelete = false"
-                :disabled="loadingDelete"
-              >
-                Cancel
-              </v-btn>
-            </v-col>
-            <v-col cols="6">
-              <v-btn
-                tile
-                block
-                size="48"
-                color="black"
-                variant="flat"
-                class="text-none"
-                @click="submitDelete()"
-                :loading="loadingDelete"
-              >
-                Delete Curriculum
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-toolbar>
-      </v-card>
-    </v-dialog>
-  </v-row>
-</template>
-
-<script setup lang="ts">
-const localProps = defineProps({
-  school: {
-    type: String,
-    default: "",
-    required: true,
-  },
-  status: {
-    type: String,
-    default: "active",
-    required: true,
-  },
-  canAdd: {
-    type: Boolean,
-    default: false,
-  },
-  canEdit: {
-    type: Boolean,
-    default: false,
-  },
-  canDelete: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const school = localProps.school;
-
-const headers = [
-  {
-    title: "Curriculum",
-    value: "name",
-  },
-  {
-    title: "Effective School Year",
-    value: "effectiveSchoolYear",
-  },
-  {
-    title: "Maximum Teaching Hours Per Day",
-    value: "maxTeachingHoursPerDay",
-  },
-];
-
-const page = ref(1);
-const pages = ref(0);
-const pageRange = ref("-- - -- of --");
-
-const items = ref<Array<Record<string, any>>>([]);
-
-const { getAll, deleteById } = useCurriculum();
-
-const { data: getCurriculumReq, refresh: refreshCurriculumItems } =
-  await useLazyAsyncData(
-    `curriculums-page-${page.value}-${localProps.status}-${
-      localProps.school ?? "all"
-    }`,
-    () =>
-      getAll({
-        page: page.value,
-        limit: 20,
-        status: localProps.status,
-        school: localProps.school,
-      }),
-    {
-      watch: [page, () => localProps.status],
-    }
-  );
-
-watchEffect(() => {
-  if (getCurriculumReq.value) {
-    items.value = getCurriculumReq.value.items;
-    pages.value = getCurriculumReq.value.pages;
-    pageRange.value = getCurriculumReq.value.pageRange;
-  }
-});
-
-const curriculum = ref<TCurriculum>();
-
-function tableRowClickHandler(_: any, data: any) {
-  dialogView.value = true;
-  curriculum.value = data.item;
-}
-
-const dialogCreate = ref(false);
-const dialogView = ref(false);
-
-function successHandler() {
-  dialogCreate.value = false;
-  refreshCurriculumItems();
-}
-
-const dialogUpdate = ref(false);
-
-function handleEdit() {
-  dialogView.value = false;
-  dialogUpdate.value = true;
-}
-
-const dialogDelete = ref(false);
-const loadingDelete = ref(false);
-const message = ref("");
-
-async function submitDelete() {
-  loadingDelete.value = true;
-  message.value = "";
-  try {
-    if (curriculum.value && curriculum.value._id) {
-      await deleteById(curriculum.value._id);
-    }
-    dialogDelete.value = false;
-    dialogView.value = false;
-    refreshCurriculumItems();
-  } catch (error: any) {
-    message.value = error.response._data.message;
-  } finally {
-    loadingDelete.value = false;
-  }
-}
-</script>