@eeplatform/nuxt-layer-common 1.2.9 → 1.2.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eeplatform/nuxt-layer-common
 
+## 1.2.11
+
+### Patch Changes
+
+- 11f490f: School Mgmt - table hight and props adjustment
+
+## 1.2.10
+
+### Patch Changes
+
+- c16019c: School Mgmt - Admin only, implement add and bulk add
+
 ## 1.2.9
 
 ### Patch Changes

package/components/MemberMain.vue

@@ -323,14 +323,16 @@ const {
   data: getAllReq,
   refresh: getAll,
   status: getAllReqStatus,
-} = useLazyAsyncData("get-all-members-by-status" + props.status, () =>
-  _getAll({
-    status: props.status,
-    org: props.orgId,
-    search: headerSearch.value,
-    page: page.value,
-    type: props.type,
-  })
+} = useLazyAsyncData(
+  "get-all-members-by-status" + props.status + "-" + props.orgId,
+  () =>
+    _getAll({
+      status: props.status,
+      org: props.orgId,
+      search: headerSearch.value,
+      page: page.value,
+      type: props.type,
+    })
 );
 
 const loading = computed(() => getAllReqStatus.value === "pending");

package/components/RolePermissionMain.vue

@@ -217,7 +217,7 @@ const {
   refresh: getRoles,
   status: getRoleReqStatus,
 } = useLazyAsyncData(
-  "roles-permissions-get-all",
+  "roles-permissions-get-all" + "-" + props.id,
   () =>
     _getRoles({
       page: page.value,

package/components/SchoolFormCreate.vue

@@ -2,9 +2,7 @@
   <v-card width="100%">
     <v-toolbar>
       <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5">
-          Create School
-        </span>
+        <span class="font-weight-bold text-h5"> Create School </span>
       </v-row>
     </v-toolbar>
     <v-card-text style="max-height: 100vh; overflow-y: auto">
@@ -12,7 +10,11 @@
         <v-row no-gutters>
           <v-col cols="12" class="mt-2">
             <v-row no-gutters>
-              <InputLabel class="text-capitalize" title="School Name" required />
+              <InputLabel
+                class="text-capitalize"
+                title="School Name"
+                required
+              />
               <v-col cols="12">
                 <v-text-field
                   v-model="name"
@@ -145,7 +147,7 @@ const { requiredRule } = useUtils();
 
 const message = ref("");
 
-const { createSchool } = useSchool();
+const { addSchool } = useSchool();
 const { getAll: getDivisions } = useDivision();
 
 // Load divisions for selection
@@ -158,7 +160,7 @@ onMounted(async () => {
     const response = await getDivisions({ page: 1, limit: 100 });
     divisionOptions.value = response.items || [];
   } catch (error) {
-    console.error('Failed to load divisions:', error);
+    console.error("Failed to load divisions:", error);
   } finally {
     divisionsLoading.value = false;
   }
@@ -167,7 +169,7 @@ onMounted(async () => {
 async function submit() {
   disable.value = true;
   try {
-    const payload: Record<string, any> = {
+    const payload: TSchool = {
       name: name.value,
     };
 
@@ -184,7 +186,7 @@ async function submit() {
       payload.address = address.value.trim();
     }
 
-    await createSchool(payload);
+    await addSchool(payload);
 
     if (createMore.value) {
       name.value = "";

package/components/SchoolFormUpload.vue

@@ -0,0 +1,403 @@
+<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"> Bulk Upload Schools </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="Region" required />
+              <v-col cols="12">
+                <v-select
+                  v-model="selectedRegion"
+                  :items="regionOptions"
+                  item-title="name"
+                  item-value="_id"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                  placeholder="Select a region"
+                  :loading="regionsLoading"
+                  return-object
+                ></v-select>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mt-2">
+            <v-row no-gutters>
+              <InputLabel class="text-capitalize" title="Division" required />
+              <v-col cols="12">
+                <v-select
+                  v-model="selectedDivision"
+                  :items="divisionOptions"
+                  item-title="name"
+                  item-value="_id"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                  placeholder="Select a division"
+                  :loading="divisionsLoading"
+                  return-object
+                ></v-select>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mt-4">
+            <v-row no-gutters>
+              <v-col cols="12">
+                <v-btn
+                  variant="outlined"
+                  color="primary"
+                  class="text-none"
+                  size="large"
+                  block
+                  prepend-icon="mdi-download"
+                  @click="downloadTemplate"
+                  :disabled="disable"
+                >
+                  Download Template
+                </v-btn>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mt-2">
+            <v-divider></v-divider>
+          </v-col>
+
+          <v-file-input
+            ref="fileInputRef"
+            v-model="selectedFile"
+            v-show="false"
+            accept=".csv,.xlsx,.xls"
+            @change="handleFileSelect"
+          ></v-file-input>
+
+          <v-col cols="12">
+            <v-btn
+              block
+              variant="flat"
+              color="black"
+              class="text-none"
+              size="large"
+              @click="triggerFileInput"
+              :disabled="disable"
+            >
+              {{ selectedFile ? "Change File" : "Select Excel/CSV File" }}
+            </v-btn>
+          </v-col>
+
+          <v-col v-if="selectedFile" cols="12" class="mt-2">
+            <v-card variant="outlined">
+              <v-card-text class="py-2">
+                <v-row no-gutters align="center">
+                  <v-col>
+                    <div class="d-flex align-center">
+                      <v-icon class="me-2" color="success"
+                        >mdi-file-check</v-icon
+                      >
+                      <div>
+                        <div class="text-subtitle-2 font-weight-medium">
+                          {{ selectedFile.name }}
+                        </div>
+                        <div class="text-caption text-medium-emphasis">
+                          {{ formatFileSize(selectedFile.size) }}
+                        </div>
+                      </div>
+                    </div>
+                  </v-col>
+                  <v-col cols="auto">
+                    <v-btn
+                      icon="mdi-close"
+                      variant="text"
+                      size="small"
+                      @click="clearFile"
+                      :disabled="disable"
+                    ></v-btn>
+                  </v-col>
+                </v-row>
+              </v-card-text>
+            </v-card>
+          </v-col>
+
+          <v-col v-if="!selectedFile" cols="12" class="mt-2">
+            <v-alert type="info" variant="tonal" class="text-caption">
+              <strong>File Requirements:</strong><br />
+              • Supported formats: CSV, Excel (.xlsx, .xls)<br />
+              • Required columns: schoolName, schoolId, district<br />
+              • Maximum file size: 16MB<br />
+              • Download the template above for the correct format
+            </v-alert>
+          </v-col>
+
+          <v-col 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>
+      <v-row class="px-6">
+        <v-col cols="6">
+          <v-btn
+            block
+            variant="text"
+            class="text-none"
+            size="large"
+            @click="cancel"
+            :disabled="disable"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+
+        <v-col cols="6">
+          <v-btn
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="large"
+            :disabled="!isFormValid || disable"
+            @click="submit"
+            :loading="disable"
+          >
+            Upload Schools
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits(["cancel", "success", "success:create-more"]);
+
+const validForm = ref(false);
+
+const selectedRegion = ref<Record<string, any> | null>(null);
+const selectedDivision = ref<Record<string, any> | null>(null);
+const disable = ref(false);
+
+// File upload variables
+const selectedFile = ref<File | null>(null);
+const fileInputRef = ref<HTMLInputElement | null>(null);
+
+const { requiredRule } = useUtils();
+
+const message = ref("");
+
+const { bulkAdd } = useSchool();
+
+const { getAll: getAllRegions } = useRegion();
+
+const regionOptions = ref<Array<Record<string, any>>>([]);
+
+const { data: getAllRegionReq, status: getRegionStatus } =
+  await useLazyAsyncData("get-all-regions", () =>
+    getAllRegions({
+      page: 1,
+      limit: 100,
+    })
+  );
+
+const regionsLoading = computed(() => getRegionStatus.value === "pending");
+
+watchEffect(() => {
+  if (getAllRegionReq.value) {
+    regionOptions.value = getAllRegionReq.value.items;
+  }
+});
+
+const { getAll: getDivisions } = useDivision();
+
+// Load divisions for selection
+const divisionOptions = ref<Array<Record<string, any>>>([]);
+
+const { data: getSDOData, status } = await useLazyAsyncData(
+  "get-all-school-division-offices",
+  () => getDivisions({ page: 1, limit: 100 })
+);
+
+watchEffect(() => {
+  if (getSDOData.value) {
+    divisionOptions.value = getSDOData.value.items || [];
+  }
+});
+
+const divisionsLoading = computed(() => status.value === "pending");
+
+// Form validation - ensure all required fields are filled
+const isFormValid = computed(() => {
+  return selectedRegion.value && selectedDivision.value && selectedFile.value;
+});
+
+// File handling methods
+function triggerFileInput() {
+  if (fileInputRef.value) {
+    fileInputRef.value.click();
+  }
+}
+
+function handleFileSelect(event: Event) {
+  const target = event.target as HTMLInputElement;
+  const file = target.files?.[0];
+
+  if (file) {
+    // Validate file type
+    const allowedTypes = [
+      "text/csv",
+      "application/vnd.ms-excel",
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    ];
+
+    const allowedExtensions = [".csv", ".xls", ".xlsx"];
+    const fileExtension = "." + file.name.split(".").pop()?.toLowerCase();
+
+    if (
+      !allowedTypes.includes(file.type) &&
+      !allowedExtensions.includes(fileExtension)
+    ) {
+      message.value = "Please select a valid CSV or Excel file";
+      selectedFile.value = null;
+      return;
+    }
+
+    // Validate file size (16MB limit)
+    const maxSize = 16 * 1024 * 1024; // 16MB in bytes
+    if (file.size > maxSize) {
+      message.value = "File size must be less than 16MB";
+      selectedFile.value = null;
+      return;
+    }
+
+    selectedFile.value = file;
+    message.value = "";
+  }
+}
+
+function clearFile() {
+  selectedFile.value = null;
+  if (fileInputRef.value) {
+    fileInputRef.value.value = "";
+  }
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return "0 Bytes";
+
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+}
+
+function downloadTemplate() {
+  // Create CSV template with the expected format
+  const headers = ["schoolName", "schoolId", "district"];
+  const sampleData = ["Sample Elementary School", "ELEM001", "District 1"];
+
+  const csvContent = [
+    headers.join(","),
+    sampleData.map((field) => `"${field}"`).join(","),
+  ].join("\n");
+
+  // Create and download file
+  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+  const link = document.createElement("a");
+  const url = URL.createObjectURL(blob);
+
+  link.setAttribute("href", url);
+  link.setAttribute("download", "school-bulk-upload-template.csv");
+  link.style.visibility = "hidden";
+
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+async function submit() {
+  disable.value = true;
+  try {
+    // Validate required fields
+    if (
+      !selectedRegion.value ||
+      !selectedDivision.value ||
+      !selectedFile.value
+    ) {
+      message.value = "Please fill in all required fields and select a file";
+      disable.value = false;
+      return;
+    }
+
+    // Call the bulk upload API
+    const result = await bulkAdd(
+      selectedFile.value,
+      selectedRegion.value._id,
+      selectedDivision.value._id
+    );
+
+    // Display success message with details
+    const details = result.details;
+    let successMessage = result.message;
+
+    if (details.failed > 0) {
+      successMessage += ` ${details.failed} schools failed to upload.`;
+      if (details.errors.length > 0) {
+        console.warn("Upload errors:", details.errors);
+        message.value = `${successMessage} Check console for error details.`;
+      }
+    }
+
+    // Reset form on success
+    selectedRegion.value = null;
+    selectedDivision.value = null;
+    selectedFile.value = null;
+    if (fileInputRef.value) {
+      fileInputRef.value.value = "";
+    }
+
+    // Show success and emit event
+    if (details.failed === 0) {
+      message.value = "";
+      emit("success");
+    } else {
+      // Partial success - show warning but still emit success
+      emit("success");
+    }
+  } catch (error: any) {
+    console.error("Bulk upload error:", error);
+    message.value =
+      error.message ||
+      error.response?._data?.message ||
+      "Failed to upload schools";
+  } finally {
+    disable.value = false;
+  }
+}
+
+function cancel() {
+  selectedRegion.value = null;
+  selectedDivision.value = null;
+  selectedFile.value = null;
+  if (fileInputRef.value) {
+    fileInputRef.value.value = "";
+  }
+  message.value = "";
+  emit("cancel");
+}
+</script>

package/components/SchoolMain.vue

@@ -1,5 +1,31 @@
 <template>
   <v-row no-gutters>
+    <v-col cols="12" class="mb-2">
+      <v-row no-gutters>
+        <v-btn
+          class="text-none mr-2"
+          rounded="pill"
+          variant="tonal"
+          @click="dialogCreate = true"
+          size="large"
+          v-if="canCreate"
+        >
+          Add School
+        </v-btn>
+
+        <v-btn
+          class="text-none"
+          rounded="pill"
+          variant="tonal"
+          @click="dialogUpload = true"
+          size="large"
+          v-if="canUpload"
+        >
+          Upload Schools
+        </v-btn>
+      </v-row>
+    </v-col>
+
     <v-col cols="12">
       <v-card
         width="100%"
@@ -54,7 +80,11 @@
           hide-default-footer
           hide-default-header
           @click:row="tableRowClickHandler"
-          style="max-height: calc(100vh - (180px))"
+          :style="`max-height: ${
+            canCreate || canUpload
+              ? 'calc(100vh - (240px))'
+              : 'calc(100vh - (195px))'
+          } `"
         >
           <template #item.createdAt="{ value }">
             {{ new Date(value).toLocaleDateString() }}
@@ -64,26 +94,35 @@
     </v-col>
 
     <!-- Create Dialog -->
-    <v-dialog v-model="createDialog" width="500" persistent>
+    <v-dialog v-model="dialogCreate" width="500" persistent>
       <SchoolFormCreate
-        @cancel="createDialog = false"
+        @cancel="dialogCreate = false"
+        @success="successCreate()"
+        @success:create-more="getSchools()"
+      />
+    </v-dialog>
+
+    <!-- Upload Dialog -->
+    <v-dialog v-model="dialogUpload" width="500" persistent>
+      <SchoolFormUpload
+        @cancel="dialogUpload = false"
         @success="successCreate()"
         @success:create-more="getSchools()"
       />
     </v-dialog>
 
     <!-- Edit Dialog -->
-    <v-dialog v-model="editDialog" width="500" persistent>
+    <v-dialog v-model="dialogEdit" width="500" persistent>
       <SchoolFormEdit
         v-if="selectedSchool"
-        @cancel="editDialog = false"
+        @cancel="dialogEdit = false"
         @success="successUpdate()"
         :school="selectedSchool"
       />
     </v-dialog>
 
     <!-- Preview Dialog -->
-    <v-dialog v-model="previewDialog" width="500" persistent>
+    <v-dialog v-model="dialogPreview" width="500" persistent>
       <v-card width="100%">
         <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
           <v-row no-gutters v-if="selectedSchool">
@@ -134,7 +173,7 @@
                 class="text-none"
                 height="48"
                 tile
-                @click="previewDialog = false"
+                @click="dialogPreview = false"
               >
                 Close
               </v-btn>
@@ -270,7 +309,11 @@ const prop = defineProps({
   },
   canCreate: {
     type: Boolean,
-    default: true,
+    default: false,
+  },
+  canUpload: {
+    type: Boolean,
+    default: false,
   },
   canUpdate: {
     type: Boolean,
@@ -322,7 +365,7 @@ const {
   refresh: getSchools,
   status: getSchoolReqStatus,
 } = useLazyAsyncData(
-  "schools-get-all-" + prop.status,
+  "schools-get-all-" + prop.status + "-" + prop.org,
   () =>
     _getSchools({
       page: page.value,
@@ -348,35 +391,36 @@ watchEffect(() => {
 
 function tableRowClickHandler(_: any, data: any) {
   selectedSchool.value = data.item;
-  previewDialog.value = true;
+  dialogPreview.value = true;
 }
 
-const createDialog = ref(false);
-const editDialog = ref(false);
-const previewDialog = ref(false);
+const dialogCreate = ref(false);
+const dialogUpload = ref(false);
+const dialogEdit = ref(false);
+const dialogPreview = ref(false);
 const selectedSchool = ref<Record<string, any> | null>(null);
 
 function successCreate() {
-  createDialog.value = false;
+  dialogCreate.value = false;
   getSchools();
   showMessage("School created successfully!", "success");
 }
 
 function successUpdate() {
-  editDialog.value = false;
-  previewDialog.value = false;
+  dialogEdit.value = false;
+  dialogPreview.value = false;
   getSchools();
   showMessage("School updated successfully!", "success");
 }
 
 function openEditDialog(school: Record<string, any>) {
   selectedSchool.value = school;
-  editDialog.value = true;
+  dialogEdit.value = true;
 }
 
 function editFromPreview() {
-  previewDialog.value = false;
-  editDialog.value = true;
+  dialogPreview.value = false;
+  dialogEdit.value = true;
 }
 
 const confirmDialog = ref(false);
@@ -386,8 +430,8 @@ const deleteLoading = ref(false);
 function openDeleteDialog(id: string) {
   selectedSchoolId.value = id;
   confirmDialog.value = true;
-  if (previewDialog.value) {
-    previewDialog.value = false;
+  if (dialogPreview.value) {
+    dialogPreview.value = false;
   }
 }
 
@@ -422,7 +466,7 @@ async function submitApproval() {
       error?.response?._data?.message || "Failed to delete school";
     showMessage(errorMessage, "error");
   } finally {
-    previewDialog.value = false;
+    dialogPreview.value = false;
     selectedSchoolId.value = null;
   }
 }

package/composables/useSchool.ts

@@ -1,4 +1,11 @@
 export default function useSchool() {
+  function addSchool(school: TSchool) {
+    return useNuxtApp().$api<{ message: string }>("/api/schools", {
+      method: "POST",
+      body: school,
+    });
+  }
+
   function registerSchool(school: TSchool) {
     return useNuxtApp().$api("/api/schools/register", {
       method: "POST",
@@ -37,10 +44,37 @@ export default function useSchool() {
     });
   }
 
+  function bulkAdd(file: File | null, region: string, division: string) {
+    if (!file) {
+      throw new Error("File not found.");
+    }
+
+    const formData = new FormData();
+    formData.append("file", file);
+    formData.append("region", region);
+    formData.append("division", division);
+
+    return useNuxtApp().$api<{
+      message: string;
+      details: {
+        successful: number;
+        failed: number;
+        total: number;
+        totalSizeMB: number;
+        errors: string[];
+      };
+    }>("/api/schools/bulk", {
+      method: "POST",
+      body: formData,
+    });
+  }
+
   return {
+    addSchool,
     registerSchool,
     getPendingByCreatedBy,
     getAll,
     approvedById,
+    bulkAdd,
   };
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@eeplatform/nuxt-layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.2.9",
+  "version": "1.2.11",
   "main": "./nuxt.config.ts",
   "publishConfig": {
     "access": "public"

package/types/school.d.ts

@@ -1,20 +1,20 @@
 declare type TSchool = {
   _id?: string;
-  id: string;
+  id?: string;
   name: string;
-  country: string;
-  address: string;
-  continuedAddress: string;
-  city: string;
-  province: string;
-  postalCode: string;
-  courses: Array<string>;
-  principalName: string;
-  principalEmail: string;
-  principalNumber: string;
-  region: string;
+  country?: string;
+  address?: string;
+  continuedAddress?: string;
+  city?: string;
+  province?: string;
+  postalCode?: string;
+  courses?: Array<string>;
+  principalName?: string;
+  principalEmail?: string;
+  principalNumber?: string;
+  region?: string;
   regionName?: string;
-  division: string;
+  division?: string;
   divisionName?: string;
   status?: string;
   createdAt?: string;