@eeplatform/nuxt-layer-common 1.2.2 → 1.2.4

package/components/SchoolFormEdit.vue

@@ -0,0 +1,177 @@
+<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"> Edit School </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="School Name" required />
+              <v-col cols="12">
+                <v-text-field
+                  v-model="name"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                  placeholder="Enter school name"
+                ></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="Principal Name" />
+              <v-col cols="12">
+                <v-text-field
+                  v-model="principalName"
+                  density="comfortable"
+                  placeholder="Enter principal name (optional)"
+                ></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="Address" />
+              <v-col cols="12">
+                <v-textarea
+                  v-model="address"
+                  density="comfortable"
+                  placeholder="Enter school address (optional)"
+                  rows="3"
+                ></v-textarea>
+              </v-col>
+            </v-row>
+          </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="!validForm || disable || !hasChanges"
+            @click="submit"
+            :loading="disable"
+          >
+            Update School
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  school: {
+    type: Object as PropType<Record<string, any>>,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["cancel", "success"]);
+
+const validForm = ref(false);
+
+const name = ref("");
+const principalName = ref("");
+const address = ref("");
+const disable = ref(false);
+
+const { requiredRule } = useUtils();
+
+const message = ref("");
+
+const { updateSchoolField } = useSchool();
+
+// Initialize form with existing data
+watchEffect(() => {
+  if (props.school) {
+    name.value = props.school.name || "";
+    principalName.value = props.school.principalName || "";
+    address.value = props.school.address || "";
+  }
+});
+
+const hasChanges = computed(() => {
+  if (!props.school) return false;
+  return (
+    name.value !== (props.school.name || "") ||
+    principalName.value !== (props.school.principalName || "") ||
+    address.value !== (props.school.address || "")
+  );
+});
+
+async function submit() {
+  if (!props.school?._id) return;
+
+  disable.value = true;
+  try {
+    // Update fields that have changed
+    if (name.value !== (props.school.name || "")) {
+      await updateSchoolField(props.school._id, "name", name.value);
+    }
+
+    if (principalName.value !== (props.school.principalName || "")) {
+      await updateSchoolField(props.school._id, "principalName", principalName.value);
+    }
+
+    if (address.value !== (props.school.address || "")) {
+      await updateSchoolField(props.school._id, "address", address.value);
+    }
+
+    emit("success");
+  } catch (error: any) {
+    message.value = error.response?._data?.message || "Failed to update school";
+  } finally {
+    disable.value = false;
+  }
+}
+
+function cancel() {
+  // Reset to original values
+  name.value = props.school?.name || "";
+  principalName.value = props.school?.principalName || "";
+  address.value = props.school?.address || "";
+  message.value = "";
+  emit("cancel");
+}
+</script>
+

package/components/SchoolMain.vue

@@ -0,0 +1,429 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12">
+      <v-card
+        width="100%"
+        variant="outlined"
+        border="thin"
+        rounded="lg"
+        :loading="loading"
+      >
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #prepend>
+            <v-btn fab icon density="comfortable" @click="getSchools()">
+              <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="getSchools()"
+              />
+            </v-row>
+          </template>
+
+          <template #extension>
+            <v-tabs v-model="theStatus">
+              <v-tab
+                v-for="status in statusFilter"
+                :key="status.text"
+                :to="{
+                  name: prop.baseRoute,
+                  params: status.params,
+                }"
+                class="text-capitalize"
+              >
+                {{ status.text }}
+              </v-tab>
+            </v-tabs>
+          </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 - (180px))"
+        >
+          <template #item.createdAt="{ value }">
+            {{ new Date(value).toLocaleDateString() }}
+          </template>
+        </v-data-table>
+      </v-card>
+    </v-col>
+
+    <!-- Create Dialog -->
+    <v-dialog v-model="createDialog" width="500" persistent>
+      <SchoolFormCreate
+        @cancel="createDialog = false"
+        @success="successCreate()"
+        @success:create-more="getSchools()"
+      />
+    </v-dialog>
+
+    <!-- Edit Dialog -->
+    <v-dialog v-model="editDialog" width="500" persistent>
+      <SchoolFormEdit
+        v-if="selectedSchool"
+        @cancel="editDialog = false"
+        @success="successUpdate()"
+        :school="selectedSchool"
+      />
+    </v-dialog>
+
+    <!-- Preview Dialog -->
+    <v-dialog v-model="previewDialog" 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">
+            <v-col cols="12" class="mb-3">
+              <strong>Name:</strong> {{ selectedSchool.name }}
+            </v-col>
+            <v-col cols="12" class="mb-3">
+              <strong>Address:</strong>
+              {{
+                `${selectedSchool.address} ${
+                  selectedSchool.continuedAddress || ""
+                }`
+              }}
+              {{ selectedSchool.city }} {{ selectedSchool.state }}
+              {{ selectedSchool.zipCode }}
+            </v-col>
+            <v-col cols="12" class="mb-3">
+              <strong>Region:</strong>
+              {{ selectedSchool.regionName || "Not assigned" }}
+            </v-col>
+            <v-col cols="12" class="mb-3">
+              <strong>Division:</strong>
+              {{ selectedSchool.divisionName || "Not assigned" }}
+            </v-col>
+            <v-col cols="12" class="mb-3">
+              <strong>Principal:</strong>
+              {{ selectedSchool.principalName || "Not assigned" }}
+            </v-col>
+            <v-col cols="12" class="mb-3">
+              <strong>Created:</strong>
+              {{
+                new Date(selectedSchool.createdAt || "").toLocaleDateString()
+              }}
+            </v-col>
+            <v-col cols="12" class="mb-3" v-if="selectedSchool.updatedAt">
+              <strong>Updated:</strong>
+              {{ new Date(selectedSchool.updatedAt).toLocaleDateString() }}
+            </v-col>
+          </v-row>
+        </v-card-text>
+
+        <v-toolbar class="pa-0" density="compact">
+          <v-row no-gutter>
+            <v-col cols="6" class="pa-0">
+              <v-btn
+                block
+                variant="text"
+                class="text-none"
+                height="48"
+                tile
+                @click="previewDialog = false"
+              >
+                Close
+              </v-btn>
+            </v-col>
+
+            <v-col cols="6" class="pa-0" v-if="canUpdate">
+              <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
+                    v-if="selectedSchool?.status === 'pending'"
+                    @click="submitApproval()"
+                  >
+                    <v-list-item-title class="text-subtitle-2">
+                      Approve School
+                    </v-list-item-title>
+                  </v-list-item>
+
+                  <v-list-item @click="editFromPreview()">
+                    <v-list-item-title class="text-subtitle-2">
+                      Edit School
+                    </v-list-item-title>
+                  </v-list-item>
+
+                  <v-list-item
+                    @click="openDeleteDialog(selectedSchool?._id)"
+                    class="text-red"
+                  >
+                    <v-list-item-title class="text-subtitle-2">
+                      Delete School
+                    </v-list-item-title>
+                  </v-list-item>
+                </v-list>
+              </v-menu>
+            </v-col>
+          </v-row>
+        </v-toolbar>
+      </v-card>
+    </v-dialog>
+
+    <ConfirmDialog
+      v-model="confirmDialog"
+      :loading="deleteLoading"
+      @submit="handleDeleteSchool"
+    >
+      <template #title>
+        <span class="font-weight-medium text-h5">Delete School</span>
+      </template>
+
+      <template #description>
+        <p class="text-subtitle-2">
+          Are you sure you want to delete this school? This action cannot be
+          undone.
+        </p>
+      </template>
+
+      <template #footer>
+        <v-btn
+          variant="text"
+          @click="confirmDialog = false"
+          :disabled="deleteLoading"
+          class="text-none"
+        >
+          Close
+        </v-btn>
+        <v-btn
+          color="black"
+          variant="flat"
+          @click="handleDeleteSchool"
+          :loading="deleteLoading"
+          class="text-none"
+        >
+          Delete School
+        </v-btn>
+      </template>
+    </ConfirmDialog>
+
+    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const prop = defineProps({
+  status: {
+    type: String,
+    default: "active",
+  },
+  org: {
+    type: String,
+    default: "",
+  },
+  app: {
+    type: String,
+    default: "school",
+  },
+  baseRoute: {
+    type: String,
+    default: "index",
+  },
+  headers: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    default: () => [
+      {
+        title: "Name",
+        value: "name",
+      },
+      {
+        title: "Region",
+        value: "regionName",
+      },
+      {
+        title: "Division",
+        value: "divisionName",
+      },
+      {
+        title: "Principal",
+        value: "principalName",
+      },
+    ],
+  },
+  canCreate: {
+    type: Boolean,
+    default: true,
+  },
+  canUpdate: {
+    type: Boolean,
+    default: true,
+  },
+  canDelete: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const statusFilter = computed(() => {
+  const items = [
+    { text: "Active", params: { status: "active" } },
+    { text: "Pending", params: { status: "pending" } },
+    { text: "Suspended", params: { status: "suspended" } },
+  ];
+
+  if (prop.org) {
+    items.map((i) => ({
+      ...i,
+      params: { ...i.params, org: prop.org },
+    }));
+  }
+
+  return items;
+});
+
+const statuses = ["active", "pending", "suspended", "inactive"];
+const theStatus = ref("active");
+
+const { headerSearch } = useLocal();
+const { getAll: _getSchools, approvedById } = useSchool();
+
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("");
+
+const items = ref<Array<Record<string, any>>>([]);
+
+const propStatus = computed(() => prop.status);
+
+const {
+  data: getSchoolReq,
+  refresh: getSchools,
+  status: getSchoolReqStatus,
+} = useLazyAsyncData(
+  "schools-get-all-" + prop.status,
+  () =>
+    _getSchools({
+      page: page.value,
+      search: headerSearch.value,
+      status: prop.status,
+      org: prop.org,
+      app: prop.app,
+    }),
+  {
+    watch: [page, propStatus],
+  }
+);
+
+const loading = computed(() => getSchoolReqStatus.value === "pending");
+
+watchEffect(() => {
+  if (getSchoolReq.value) {
+    items.value = getSchoolReq.value.items;
+    pages.value = getSchoolReq.value.pages;
+    pageRange.value = getSchoolReq.value.pageRange;
+  }
+});
+
+function tableRowClickHandler(_: any, data: any) {
+  selectedSchool.value = data.item;
+  previewDialog.value = true;
+}
+
+const createDialog = ref(false);
+const editDialog = ref(false);
+const previewDialog = ref(false);
+const selectedSchool = ref<Record<string, any> | null>(null);
+
+function successCreate() {
+  createDialog.value = false;
+  getSchools();
+  showMessage("School created successfully!", "success");
+}
+
+function successUpdate() {
+  editDialog.value = false;
+  previewDialog.value = false;
+  getSchools();
+  showMessage("School updated successfully!", "success");
+}
+
+function openEditDialog(school: Record<string, any>) {
+  selectedSchool.value = school;
+  editDialog.value = true;
+}
+
+function editFromPreview() {
+  previewDialog.value = false;
+  editDialog.value = true;
+}
+
+const confirmDialog = ref(false);
+const selectedSchoolId = ref<string | null>(null);
+const deleteLoading = ref(false);
+
+function openDeleteDialog(id: string) {
+  selectedSchoolId.value = id;
+  confirmDialog.value = true;
+  if (previewDialog.value) {
+    previewDialog.value = false;
+  }
+}
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+async function handleDeleteSchool() {
+  if (!selectedSchoolId.value) return;
+  deleteLoading.value = true;
+  try {
+    confirmDialog.value = false;
+    getSchools();
+  } catch (error: any) {
+    const errorMessage =
+      error?.response?._data?.message || "Failed to delete school";
+    showMessage(errorMessage, "error");
+  } finally {
+    deleteLoading.value = false;
+    selectedSchoolId.value = null;
+  }
+}
+
+async function submitApproval() {
+  try {
+    await approvedById(selectedSchool.value?._id ?? "");
+    getSchools();
+  } catch (error: any) {
+    const errorMessage =
+      error?.response?._data?.message || "Failed to delete school";
+    showMessage(errorMessage, "error");
+  } finally {
+    previewDialog.value = false;
+    selectedSchoolId.value = null;
+  }
+}
+</script>

package/composables/useLocalAuth.ts

@@ -8,14 +8,6 @@ export default function useLocalAuth() {
       return;
     }
 
-    // Get access token from cookies
-    const accessToken = useCookie("accessToken", cookieConfig).value;
-
-    if (!accessToken) {
-      // Redirect to login page if no access token
-      navigateTo({ name: "index" });
-    }
-
     const user = useCookie("user", cookieConfig).value;
 
     const { data: getCurrentUserReq, error: getCurrentUserErr } =
@@ -44,6 +36,11 @@ export default function useLocalAuth() {
     });
   }
 
+  function setSession({ sid = "", user = "" } = {}) {
+    useCookie("sid", cookieConfig).value = sid;
+    useCookie("user", cookieConfig).value = user;
+  }
+
   function setToken({
     refreshToken = "",
     accessToken = "",
@@ -64,18 +61,9 @@ export default function useLocalAuth() {
   }
 
   async function logout() {
-    const refreshToken = useCookie("refreshToken", cookieConfig).value;
-    if (refreshToken) {
-      try {
-        await useNuxtApp().$api(`/api/auth/logout/${refreshToken}`, {
-          method: "DELETE",
-        });
-
-        clearCookies();
-      } catch (error) {
-        console.error("Logout failed:", error);
-      }
-    }
+    return useNuxtApp().$api("/api/auth/logout", {
+      method: "DELETE",
+    });
   }
 
   function getCurrentUser() {
@@ -142,6 +130,7 @@ export default function useLocalAuth() {
   return {
     authenticate,
     login,
+    setSession,
     logout,
     clearCookies,
     getCurrentUser,

package/composables/useLocalSetup.ts

@@ -1,44 +1,10 @@
-export function useLocalSetup(type: string, org?: string) {
-  const userId = computed(() => useCookie("user").value ?? "");
-
-  const { getByUserType } = useMember();
-
-  const { data: userMemberData, error: userMemberError } = useLazyAsyncData(
-    "get-member-by-id",
-    () => getByUserType(userId.value, type, org),
-    { watch: [userId] }
-  );
-
-  watchEffect(() => {
-    if (userMemberError.value) {
-      navigateTo({
-        name: "index",
-      });
-    }
-  });
-
-  const { getRoleById } = useRole();
-
-  const roleId = computed(() => userMemberData.value?.role ?? "");
-
+export function useLocalSetup() {
   const userAppRole = useState<Record<string, any> | null>(
     "userAppRole",
     () => null
   );
 
-  const { data: getRoleByIdReq } = useLazyAsyncData(
-    "get-role-by-id",
-    () => getRoleById(roleId.value),
-    { watch: [roleId], immediate: false }
-  );
-
-  watchEffect(() => {
-    if (getRoleByIdReq.value) {
-      userAppRole.value = getRoleByIdReq.value;
-    }
-  });
-
-  const id = computed(() => userMemberData.value?.org ?? "id");
+  const id = useState<string | null>("memberShipOrgId", () => null);
 
   return {
     userAppRole,