@eeplatform/nuxt-layer-common 1.6.0 → 1.7.0

package/components/CurriculumSubjectForm.vue

@@ -1,597 +0,0 @@
-<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/composables/useCurriculumSubject.ts

@@ -1,58 +0,0 @@
-export default function useCurriculumSubject() {
-  const resource = "basic-education/curriculum/subjects";
-
-  function add(value: TCurriculumSubject) {
-    return $fetch<Record<string, any>>(`/api/${resource}`, {
-      method: "POST",
-      body: value,
-    });
-  }
-
-  async function getAll({
-    page = 1,
-    search = "",
-    limit = 10,
-    status = "active",
-    schoolYear = 0,
-    gradeLevel = "",
-  } = {}) {
-    return $fetch<Record<string, any>>(`/api/${resource}`, {
-      method: "GET",
-      query: { page, limit, search, status, schoolYear, gradeLevel },
-    });
-  }
-
-  function updateById(
-    id: string,
-    value: Pick<
-      TCurriculumSubject,
-      | "curriculum"
-      | "educationLevel"
-      | "gradeLevel"
-      | "subjectCode"
-      | "subjectName"
-      | "subjectType"
-      | "sessionFrequency"
-      | "sessionDuration"
-      | "totalMinutesPerWeek"
-    >
-  ) {
-    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,
-  };
-}