@eeplatform/nuxt-layer-common 1.5.0 → 1.6.0

package/components/CurriculumSubjectForm.vue

@@ -0,0 +1,597 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar>
+      <v-row no-gutters class="fill-height px-6" align="center">
+        <span class="font-weight-bold text-h5">
+          {{ props.title }}
+        </span>
+      </v-row>
+    </v-toolbar>
+
+    <v-card-text style="max-height: 100vh; overflow-y: auto">
+      <v-form v-model="formValid" :disabled="disable">
+        <v-row no-gutters>
+          <v-col cols="12" class="mt-2">
+            <v-row no-gutters>
+              <InputLabel
+                class="text-capitalize"
+                title="Curriculum"
+                :required="props.mode !== 'view'"
+              />
+              <v-col cols="12">
+                <v-combobox
+                  v-model="curriculumSubject.curriculum"
+                  v-model:search="searchCurriculum"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                  :return-object="false"
+                  :items="curriculums"
+                  item-title="name"
+                  item-value="_id"
+                  :error-messages="errorCurriculum"
+                  :readonly="props.mode === 'view'"
+                >
+                  <template v-slot:no-data>
+                    <v-list-item>
+                      <v-list-item-title>
+                        No results matching "<strong>{{
+                          searchCurriculum
+                        }}</strong
+                        >". Click the search button and try again.
+                      </v-list-item-title>
+                    </v-list-item>
+                  </template>
+
+                  <template #append>
+                    <v-btn
+                      variant="tonal"
+                      :disabled="curriculumReqStatus"
+                      class="text-none"
+                      size="48"
+                      width="100"
+                      icon
+                      @click="_getAllCurriculum()"
+                    >
+                      <v-icon>ph:magnifying-glass-bold</v-icon>
+                    </v-btn>
+                  </template>
+                </v-combobox>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mt-2">
+            <v-row no-gutters>
+              <InputLabel
+                class="text-capitalize"
+                title="Education Level"
+                :required="props.mode !== 'view'"
+              />
+              <v-col cols="12">
+                <v-combobox
+                  v-model="curriculumSubject.educationLevel"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                  :return-object="false"
+                  :items="educationLevels"
+                  :readonly="props.mode === 'view'"
+                ></v-combobox>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mt-2">
+            <v-row no-gutters>
+              <InputLabel
+                class="text-capitalize"
+                title="Grade Level"
+                :required="props.mode !== 'view'"
+              />
+              <v-col cols="12">
+                <v-autocomplete
+                  v-model="curriculumSubject.gradeLevel"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                  :items="selectedGradeLevels"
+                  :readonly="props.mode === 'view'"
+                  multiple
+                  chips
+                ></v-autocomplete>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mt-2">
+            <v-row no-gutters>
+              <InputLabel
+                class="text-capitalize"
+                title="Subject Code"
+                :required="props.mode !== 'view'"
+              />
+              <v-col cols="12">
+                <v-text-field
+                  v-model="curriculumSubject.subjectCode"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                  :readonly="props.mode === 'view'"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mt-2">
+            <v-row no-gutters>
+              <InputLabel
+                class="text-capitalize"
+                title="Subject Name"
+                :required="props.mode !== 'view'"
+              />
+              <v-col cols="12">
+                <v-text-field
+                  v-model="curriculumSubject.subjectName"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                  :readonly="props.mode === 'view'"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mt-2">
+            <v-row no-gutters>
+              <InputLabel
+                class="text-capitalize"
+                title="Subject Type"
+                :required="props.mode !== 'view'"
+              />
+              <v-col cols="12">
+                <v-autocomplete
+                  v-model="curriculumSubject.subjectType"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                  :items="subjectTypes"
+                  :readonly="props.mode === 'view'"
+                ></v-autocomplete>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mt-2">
+            <v-row no-gutters>
+              <InputLabel
+                class="text-capitalize"
+                title="Session Frequency (Classes per week)"
+                :required="props.mode !== 'view'"
+              />
+              <v-col cols="12">
+                <v-combobox
+                  v-model.number="curriculumSubject.sessionFrequency"
+                  :items="sessionPerWeekOptions"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                  type="number"
+                  :readonly="props.mode === 'view'"
+                ></v-combobox>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mt-2">
+            <v-row no-gutters>
+              <InputLabel
+                class="text-capitalize"
+                title="Session Duration (Minutes per class)"
+                :required="props.mode !== 'view'"
+              />
+              <v-col cols="12">
+                <v-combobox
+                  v-model.number="curriculumSubject.sessionDuration"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                  :items="sessionDurationOptions"
+                  type="number"
+                  :readonly="props.mode === 'view'"
+                ></v-combobox>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col v-if="props.mode === 'create'" cols="12">
+            <v-checkbox v-model="createMore" density="comfortable" hide-details>
+              <template #label>
+                <span class="text-subtitle-2 font-weight-bold">
+                  Create more
+                </span>
+              </template>
+            </v-checkbox>
+          </v-col>
+
+          <v-col v-if="message" cols="12" class="my-2">
+            <v-row no-gutters>
+              <v-col cols="12" class="text-center">
+                <span
+                  class="text-none text-subtitle-2 font-weight-medium text-error"
+                >
+                  {{ message }}
+                </span>
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-form>
+    </v-card-text>
+
+    <v-toolbar density="compact">
+      <v-row no-gutters>
+        <v-col
+          v-if="modeViewEdit && (props.canEdit || props.canDelete)"
+          :cols="props.canEdit || props.canDelete ? 6 : 12"
+        >
+          <v-btn
+            tile
+            block
+            variant="text"
+            class="text-none"
+            size="48"
+            @click="emit('cancel')"
+          >
+            Close
+          </v-btn>
+        </v-col>
+
+        <v-col
+          v-if="modeViewEdit && props.canEdit && !props.canDelete"
+          :cols="props.canEdit ? 6 : 12"
+        >
+          <v-btn
+            tile
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="48"
+            @click="emit('cancel')"
+          >
+            Edit curriculum
+          </v-btn>
+        </v-col>
+
+        <v-col
+          v-if="modeViewEdit && props.canDelete && !props.canEdit"
+          :cols="props.canDelete ? 6 : 12"
+        >
+          <v-btn
+            tile
+            block
+            variant="flat"
+            class="text-none text-error"
+            size="48"
+            @click="emit('cancel')"
+          >
+            Delete curriculum
+          </v-btn>
+        </v-col>
+
+        <v-col v-if="hasMoreActions" cols="6">
+          <v-menu>
+            <template #activator="{ props }">
+              <v-btn
+                block
+                variant="flat"
+                color="black"
+                class="text-none"
+                height="48"
+                v-bind="props"
+                tile
+              >
+                More actions
+              </v-btn>
+            </template>
+
+            <v-list class="pa-0">
+              <v-list-item @click="emit('edit')">
+                <v-list-item-title class="text-subtitle-2">
+                  Edit curriculum
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item @click="emit('delete')" class="text-red">
+                <v-list-item-title class="text-subtitle-2">
+                  Delete curriculum
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </v-col>
+
+        <v-col v-if="props.mode === 'edit'" cols="6">
+          <v-btn
+            tile
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="48"
+            :disabled="!formValid"
+            @click="submitUpdate"
+          >
+            Submit update
+          </v-btn>
+        </v-col>
+
+        <v-col v-if="props.mode === 'create'" cols="6">
+          <v-btn
+            tile
+            block
+            variant="text"
+            class="text-none"
+            size="48"
+            @click="emit('cancel')"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+
+        <v-col v-if="props.mode === 'create'" cols="6">
+          <v-btn
+            tile
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="48"
+            :disabled="!formValid"
+            @click="submit"
+          >
+            Submit
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  title: {
+    type: String,
+    default: "Subject Form",
+  },
+  mode: {
+    type: String,
+    default: "create",
+  },
+  data: {
+    type: Object as PropType<TCurriculumSubject>,
+    default: () => ({}),
+  },
+  canEdit: {
+    type: Boolean,
+    default: false,
+  },
+  canDelete: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  "cancel",
+  "edit",
+  "delete",
+  "success",
+  "success:create-more",
+]);
+
+const formValid = ref(false);
+
+const curriculums = ref<Array<TCurriculum>>([]);
+const searchCurriculum = ref("");
+
+const { getAll: getAllCurriculum } = useCurriculum();
+
+const {
+  data: getCurriculumReq,
+  refresh: _getAllCurriculum,
+  status: getAllCurriculumStatus,
+} = await useLazyAsyncData(
+  `curriculums-as-options-list-${searchCurriculum.value ?? "search"}`,
+  () =>
+    getAllCurriculum({
+      limit: 20,
+      search: searchCurriculum.value,
+    })
+);
+
+const curriculumReqStatus = computed(
+  () => getAllCurriculumStatus.value === "pending"
+);
+
+watchEffect(() => {
+  if (getCurriculumReq.value) {
+    curriculums.value = getCurriculumReq.value.items;
+  }
+});
+
+const curriculumSubject = ref<TCurriculumSubject>({
+  educationLevel: "",
+  gradeLevel: [],
+  subjectCode: "",
+  subjectName: "",
+  subjectType: "",
+  sessionFrequency: 0,
+  sessionDuration: 0,
+  totalMinutesPerWeek: 0,
+  curriculum: "",
+  curriculumName: "",
+});
+
+watchEffect(() => {
+  if (curriculumSubject.value.curriculum) {
+    const selected = curriculums.value.find(
+      (curr) => curr._id === curriculumSubject.value.curriculum
+    );
+
+    if (selected) {
+      curriculumSubject.value.curriculumName = selected.name;
+      curriculumSubject.value.effectiveSchoolYear = selected.effectiveSchoolYear
+        .split("-")
+        .map((year: any) => parseInt(year));
+    } else {
+      curriculumSubject.value.curriculumName = "";
+      curriculumSubject.value.effectiveSchoolYear = [];
+    }
+  }
+});
+
+const selectedCurriculum = computed(() =>
+  curriculums.value.find(
+    (curr) => curr._id === curriculumSubject.value.curriculum
+  )
+);
+
+const errorCurriculum = computed(() => {
+  return !selectedCurriculum.value && curriculumSubject.value.curriculum
+    ? ["Please select a valid curriculum"]
+    : [];
+});
+
+if (["view", "edit"].includes(props.mode) && props.data) {
+  Object.assign(
+    curriculumSubject.value,
+    JSON.parse(JSON.stringify(props.data))
+  );
+}
+
+watchEffect(() => {
+  curriculumSubject.value.totalMinutesPerWeek =
+    curriculumSubject.value.sessionFrequency *
+    curriculumSubject.value.sessionDuration;
+});
+
+const subjectHeaders = [
+  { title: "Education Level", value: "educationLevel", width: "140px" },
+  { title: "Grade Level", value: "gradeLevel", width: "120px" },
+  { title: "Code", value: "subjectCode", width: "100px" },
+  { title: "Name", value: "subjectName" },
+  { title: "Type", value: "subjectType", width: "100px" },
+  { title: "Session Frequency", value: "sessionFrequency", width: "100px" },
+  { title: "Session Duration", value: "sessionDuration", width: "100px" },
+  { title: "Minutes Per Week", value: "totalMinutesPerWeek", width: "120px" },
+];
+
+const dialogSubject = ref(false);
+const formSubject = ref(false);
+
+const { generateSchoolYears, gradeLevels } = useBasicEdu();
+
+const effectiveSchoolYearOptions = computed(() =>
+  generateSchoolYears(5, "future")
+);
+
+const selectedGradeLevels = computed(() => {
+  return curriculumSubject.value.educationLevel
+    ? gradeLevels.filter(
+        (level) => level.level === curriculumSubject.value.educationLevel
+      )
+    : [];
+});
+
+const { educationLevels } = useBasicEdu();
+
+const subjectTypes = ["Core", "Applied", "Specialized", "Elective", "Other"];
+
+const sessionPerWeekOptions = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+const sessionDurationOptions = [30, 35, 40, 45, 50, 55, 60, 75, 90, 120];
+
+const createMore = ref(false);
+const disable = ref(false);
+
+const { requiredRule } = useUtils();
+
+const message = ref("");
+const type = defineModel("type", {
+  type: String,
+  default: "",
+});
+
+const { add, updateById } = useCurriculumSubject();
+
+async function submit() {
+  disable.value = true;
+  try {
+    if (props.mode === "create") {
+      await add(curriculumSubject.value);
+    }
+
+    console.log(props.mode === "edit");
+
+    if (props.mode === "edit") {
+      await updateById(curriculumSubject.value._id ?? "", {
+        curriculum: curriculumSubject.value.curriculum,
+        educationLevel: curriculumSubject.value.educationLevel,
+        gradeLevel: curriculumSubject.value.gradeLevel,
+        subjectCode: curriculumSubject.value.subjectCode,
+        subjectName: curriculumSubject.value.subjectName,
+        subjectType: curriculumSubject.value.subjectType,
+        sessionFrequency: curriculumSubject.value.sessionFrequency,
+        sessionDuration: curriculumSubject.value.sessionDuration,
+        totalMinutesPerWeek: curriculumSubject.value.totalMinutesPerWeek,
+      });
+    }
+
+    if (createMore.value) {
+      message.value = "";
+      emit("success:create-more");
+      return;
+    }
+
+    emit("success");
+  } catch (error: any) {
+    message.value = error.response._data.message;
+  } finally {
+    disable.value = false;
+  }
+}
+
+const canAdd = computed(() => {
+  return ["create", "edit"].includes(props.mode);
+});
+
+async function submitUpdate() {
+  disable.value = true;
+  try {
+    await updateById(curriculumSubject.value._id ?? "", {
+      curriculum: curriculumSubject.value.curriculum,
+      educationLevel: curriculumSubject.value.educationLevel,
+      gradeLevel: curriculumSubject.value.gradeLevel,
+      subjectCode: curriculumSubject.value.subjectCode,
+      subjectName: curriculumSubject.value.subjectName,
+      subjectType: curriculumSubject.value.subjectType,
+      sessionFrequency: curriculumSubject.value.sessionFrequency,
+      sessionDuration: curriculumSubject.value.sessionDuration,
+      totalMinutesPerWeek: curriculumSubject.value.totalMinutesPerWeek,
+    });
+    if (createMore.value) {
+      message.value = "";
+      emit("success:create-more");
+      return;
+    }
+
+    emit("success");
+  } catch (error: any) {
+    message.value = error.response._data.message;
+  } finally {
+    disable.value = false;
+  }
+}
+
+const modeViewEdit = computed(() => {
+  return ["view", "edit"].includes(props.mode);
+});
+
+const hasMoreActions = computed(() => {
+  return props.mode === "view" && props.canEdit && props.canDelete;
+});
+</script>

package/components/EnrollmentForm.vue

@@ -1486,8 +1486,11 @@ const isSeniorHighSchool = computed(() => {
   return ["grade-11", "grade-12"].includes(gradeLevel);
 });
 
-const effectiveSchoolYearOptions = generateSchoolYears();
-const lastSchoolYearOptions = generateSchoolYears(50).reverse();
+const effectiveSchoolYearOptions = computed(() =>
+  generateSchoolYears(0, "future")
+);
+
+const lastSchoolYearOptions = generateSchoolYears(50);
 
 const indigenousCommunitiesPhilippines = [
   // Luzon (Northern Philippines) - Cordillera Groups (Igorot Subgroups)
@@ -1664,7 +1667,6 @@ watchEffect(() => {
 });
 
 import { useMask } from "vuetify";
-import { fa } from "zod/v4/locales";
 
 watchEffect(() => {
   const mask = useMask({ mask: "##/##/####" });

package/composables/useBasicEdu.ts

@@ -114,12 +114,24 @@ export default function useBasicEdu() {
     },
   ];
 
-  function generateSchoolYears(generation = 0) {
+  function generateSchoolYears(generation = 0, mode = "past") {
     const currentYear = new Date().getFullYear();
     const years = [];
-    for (let i = currentYear - generation; i <= currentYear; i++) {
-      years.push(`${i}-${i + 1}`);
+
+    if (mode === "past") {
+      // Generate from current year going back to past years
+      for (let i = 0; i <= generation; i++) {
+        const year = currentYear - i;
+        years.push(`${year}-${year + 1}`);
+      }
+    } else if (mode === "future") {
+      // Generate from current year going forward to future years
+      for (let i = 0; i <= generation; i++) {
+        const year = currentYear + i;
+        years.push(`${year}-${year + 1}`);
+      }
     }
+
     return years;
   }
 

package/composables/useCurriculum.ts

@@ -0,0 +1,49 @@
+export default function useCurriculum() {
+  const resource = "basic-education/curriculums";
+
+  function add(value: TCurriculum) {
+    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: Pick<
+      TCurriculum,
+      "name" | "effectiveSchoolYear" | "maxTeachingHoursPerDay"
+    >
+  ) {
+    return $fetch<Record<string, any>>(`/api/${resource}/${id}`, {
+      method: "PUT",
+      body: value,
+    });
+  }
+
+  function deleteById(id: string) {
+    return $fetch<Record<string, any>>(`/api/${resource}/${id}`, {
+      method: "DELETE",
+    });
+  }
+
+  return {
+    add,
+    getAll,
+    updateById,
+    deleteById,
+  };
+}