@eeplatform/nuxt-layer-common 1.6.0 → 1.7.0

package/components/CurriculumForm.vue

@@ -1,347 +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="validForm" :disabled="disable">
-        <v-row no-gutters>
-          <v-col cols="12" class="mt-2">
-            <v-row no-gutters>
-              <InputLabel
-                class="text-capitalize"
-                title="Name"
-                :required="props.mode === 'create'"
-              />
-              <v-col cols="12">
-                <v-text-field
-                  v-model="curriculum.name"
-                  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="Effective School Year"
-                :required="props.mode === 'create'"
-              />
-              <v-col cols="12">
-                <v-autocomplete
-                  v-model="curriculum.effectiveSchoolYear"
-                  density="comfortable"
-                  :rules="[requiredRule]"
-                  :items="effectiveSchoolYearOptions"
-                  :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="Max Teaching Hours Per Day"
-                :required="props.mode === 'create'"
-              />
-              <v-col cols="12">
-                <v-text-field
-                  v-model.number="curriculum.maxTeachingHoursPerDay"
-                  density="comfortable"
-                  :rules="[
-                    requiredRule,
-                    (v) => (v && v <= 8) || 'Must be less than 8 hours',
-                  ]"
-                  type="number"
-                  :readonly="props.mode === 'view'"
-                ></v-text-field>
-              </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"
-          :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="!validForm"
-            @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="!validForm"
-            @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: "Curriculum Form",
-  },
-  school: {
-    type: String,
-    default: "",
-  },
-  mode: {
-    type: String,
-    default: "create",
-  },
-  data: {
-    type: Object as PropType<TCurriculum>,
-    default: () => ({}),
-  },
-  canEdit: {
-    type: Boolean,
-    default: false,
-  },
-  canDelete: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits([
-  "cancel",
-  "edit",
-  "delete",
-  "success",
-  "success:create-more",
-]);
-
-const validForm = ref(false);
-
-const curriculum = ref<TCurriculum>({
-  name: "",
-  effectiveSchoolYear: "",
-  maxTeachingHoursPerDay: 0,
-});
-
-if (["view", "edit"].includes(props.mode) && props.data) {
-  Object.assign(curriculum.value, JSON.parse(JSON.stringify(props.data)));
-}
-
-const { generateSchoolYears } = useBasicEdu();
-
-const effectiveSchoolYearOptions = computed(() =>
-  generateSchoolYears(5, "future")
-);
-
-const createMore = ref(false);
-const disable = ref(false);
-
-const { requiredRule } = useUtils();
-
-const message = ref("");
-const type = defineModel("type", {
-  type: String,
-  default: "",
-});
-
-const { add, updateById } = useCurriculum();
-
-async function submit() {
-  disable.value = true;
-  try {
-    await add(curriculum.value);
-    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;
-  }
-}
-
-function cancel() {
-  createMore.value = false;
-  message.value = "";
-  emit("cancel");
-}
-
-const modeViewEdit = computed(() => {
-  return ["view", "edit"].includes(props.mode);
-});
-
-async function submitUpdate() {
-  disable.value = true;
-  try {
-    await updateById(curriculum.value._id ?? "", {
-      name: curriculum.value.name,
-      effectiveSchoolYear: curriculum.value.effectiveSchoolYear,
-      maxTeachingHoursPerDay: curriculum.value.maxTeachingHoursPerDay,
-    });
-    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 hasMoreActions = computed(() => {
-  return props.mode === "view" && props.canEdit && props.canDelete;
-});
-</script>

package/components/CurriculumSubject.vue

@@ -1,273 +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 subject
-        </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">
-      <CurriculumSubjectForm
-        title="Add subject"
-        @cancel="dialogCreate = false"
-        @success="successHandler()"
-        mode="create"
-      />
-    </v-dialog>
-
-    <v-dialog v-model="dialogView" persistent width="450">
-      <CurriculumSubjectForm
-        title="View subject details"
-        @cancel="dialogView = false"
-        @edit="handleEdit()"
-        @delete="dialogDelete = true"
-        :data="subject"
-        :can-edit="localProps.canEdit"
-        :can-delete="localProps.canDelete"
-        mode="view"
-      />
-    </v-dialog>
-
-    <v-dialog v-model="dialogUpdate" persistent width="450">
-      <CurriculumSubjectForm
-        title="Update subject details"
-        @cancel="dialogUpdate = false"
-        :data="subject"
-        :can-edit="localProps.canEdit"
-        :can-delete="localProps.canDelete"
-        mode="edit"
-      />
-    </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 Subject</span>
-        </v-toolbar>
-
-        <v-card-text>
-          <p class="text-subtitle-2 text-center">
-            Are you sure you want to delete this subject? 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 Subject
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-toolbar>
-      </v-card>
-    </v-dialog>
-  </v-row>
-</template>
-
-<script setup lang="ts">
-const localProps = defineProps({
-  status: {
-    type: String,
-    default: "active",
-    required: true,
-  },
-  canAdd: {
-    type: Boolean,
-    default: false,
-  },
-  canEdit: {
-    type: Boolean,
-    default: false,
-  },
-  canDelete: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const headers = [
-  {
-    title: "Subject Name",
-    value: "subjectName",
-  },
-  {
-    title: "Subject Code",
-    value: "subjectCode",
-  },
-  {
-    title: "Curriculum",
-    value: "curriculumName",
-  },
-  {
-    title: "Grade Level",
-    value: "gradeLevel",
-  },
-  {
-    title: "Session Per Week",
-    value: "sessionFrequency",
-  },
-  {
-    title: "Session Duration",
-    value: "sessionDuration",
-  },
-  {
-    title: "Session Per Week",
-    value: "totalMinutesPerWeek",
-  },
-];
-
-const page = ref(1);
-const pages = ref(0);
-const pageRange = ref("-- - -- of --");
-
-const items = ref<Array<Record<string, any>>>([]);
-
-const { getAll, deleteById } = useCurriculumSubject();
-
-const { data: getCurriculumReq, refresh: refreshCurriculumItems } =
-  await useLazyAsyncData(
-    `subject-subjects-page-${page.value}-${localProps.status}`,
-    () =>
-      getAll({
-        page: page.value,
-        limit: 20,
-        status: localProps.status,
-      }),
-    {
-      watch: [page, () => localProps.status],
-    }
-  );
-
-watchEffect(() => {
-  if (getCurriculumReq.value) {
-    items.value = getCurriculumReq.value.items;
-    pages.value = getCurriculumReq.value.pages;
-    pageRange.value = getCurriculumReq.value.pageRange;
-  }
-});
-
-const subject = ref<TCurriculum>();
-
-function tableRowClickHandler(_: any, data: any) {
-  dialogView.value = true;
-  subject.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 (subject.value && subject.value._id) {
-      await deleteById(subject.value._id);
-      dialogDelete.value = false;
-      dialogView.value = false;
-      refreshCurriculumItems();
-    }
-  } catch (error: any) {
-    message.value = error.response._data.message;
-  } finally {
-    loadingDelete.value = false;
-  }
-}
-</script>