@eeplatform/nuxt-layer-common 1.5.1 → 1.6.0

package/CHANGELOG.md

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

package/components/Curriculum.vue

@@ -0,0 +1,269 @@
+<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>

package/components/CurriculumForm.vue

@@ -0,0 +1,347 @@
+<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>