@eeplatform/nuxt-layer-common 1.5.0 → 1.6.0

package/components/CurriculumSubject.vue

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