edvoyui-component-library-test-flight 0.0.93 → 0.0.94

package/src/components/table/GrowthTable.vue

@@ -0,0 +1,563 @@
+<template>
+  <div>
+    <Transition name="fade" mode="out-in">
+      <div
+        v-if="loading"
+        :class="[
+          'overflow-hidden relative z-0 isolate bg-white backdrop-blur transition-colors duration-150 ease-in-out rounded-xl border border-gray-50',
+          tableHeight
+            ? tableHeight
+            : 'h-[calc(100svh-9rem)] max-h-[calc(100svh-9rem)]',
+        ]"
+      >
+        <div
+          class="absolute flex items-center z-[calc(infinity)] w-full h-auto pointer-events-none inset-0"
+        >
+          <EUICircleLoader />
+        </div>
+      </div>
+      <div v-else class="relative w-full mx-auto overflow-hidden">
+        <div
+          id="growth-table"
+          :class="[
+            'scrollbar--thin overscroll-none',
+            computedItems.length === 0 ? 'overflow-hidden' : 'overflow-auto',
+            tableHeight
+              ? tableHeight
+              : 'h-[calc(100svh-13rem)] max-h-[calc(100svh-13rem)]',
+          ]"
+          ref="tableContainer"
+          @scroll="handleScroll"
+        >
+          <table>
+            <thead class="sticky top-0 left-0 z-50 bg-violet-100">
+              <tr>
+                <th v-if="checkable" class="checkable !table-cell">
+                  <EUITableCheckbox
+                    :checked="isAllChecked"
+                    :indeterminate="isIndeterminate"
+                    :disabled="isAllUncheckable"
+                    @change="checkAll()"
+                  />
+                </th>
+                <th
+                  v-for="(header, headerIndex) in headers"
+                  :key="`item-${headerIndex}`"
+                  scope="col"
+                  :class="[
+                    'px-3 py-1.5 text-gray-600 snap-start snap-always',
+                    isScrolled && headerIndex === 0 ? stickyClass.head : '',
+                    { 'cursor-pointer hover:text-gray-900': header?.sortable },
+                  ]"
+                  :style="
+                    header?.width
+                      ? `min-width:${header.width}px;max-width:${header.width}px;`
+                      : ``
+                  "
+                  @click="sortBy(header, $event)"
+                >
+                  <div
+                    class="flex items-center gap-2 text-xs font-semibold text-current"
+                  >
+                    <slot name="header" :header="header">
+                      <template v-if="!header?.activeYear">{{
+                        capitalizeText(header?.text ?? header.name ?? "")
+                      }}</template>
+                      <div
+                        v-else
+                        class="bg-violet-600 text-white rounded-[0.625rem] px-3 py-2"
+                      >
+                        <div class="mb-2">
+                          {{
+                            capitalizeText(header?.text ?? header.name ?? "")
+                          }}
+                        </div>
+                        <div class="space-x-3">
+                          <span
+                            v-for="(data, idx) in header?.activeYear"
+                            :key="`year_${idx}`"
+                            >{{ data }}</span
+                          >
+                        </div>
+                      </div>
+                    </slot>
+                    <slot name="headerOptionalItem"></slot>
+                    <SortArrow
+                      v-if="header?.sortable"
+                      :class="[
+                        'transform duration-100 transition-all',
+                        currentSort === header.value
+                          ? 'text-violet-700'
+                          : 'text-gray-900',
+                        sortClass(header),
+                      ]"
+                    />
+                  </div>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <template
+                v-if="computedItems.length > 0"
+                v-for="(row, rowIndex) in computedItems"
+                :key="`table-row-${rowIndex}`"
+              >
+                <tr
+                  @mouseenter="
+                    $attrs.mouseenter
+                      ? $emit('mouseenter', row, rowIndex)
+                      : null
+                  "
+                  @mouseleave="
+                    $attrs.mouseleave
+                      ? $emit('mouseleave', row, rowIndex)
+                      : null
+                  "
+                >
+                  <template v-if="checkable">
+                    <td class="checkable">
+                      <EUITableCheckbox
+                        :disabled="!isRowCheckable(row)"
+                        :checked="isRowChecked(row)"
+                        @change="($event:boolean) => checkRow(row, rowIndex, $event)"
+                      />
+                    </td>
+                  </template>
+                  <td
+                    v-for="(header, headerIndex) in headers"
+                    :key="headerIndex"
+                    :class="[
+                      isScrolled && headerIndex === 0 ? stickyClass.body : '',
+                    ]"
+                  >
+                    <slot
+                      :name="`item.${header.value}`"
+                      :row="row"
+                      :rowIndex="rowIndex"
+                    >
+                      {{ getValueByPath(row, header?.value) }}
+                    </slot>
+                  </td>
+                </tr>
+                <template v-if="tableExpanded">
+                  <slot name="expanded" :row="row" :rowIndex="rowIndex"></slot>
+                </template>
+              </template>
+              <template v-else-if="computedItems.length === 0">
+                <tr class="norecords">
+                  <td
+                    :colspan="
+                      checkable === true ? headers.length + 1 : headers.length
+                    "
+                  >
+                    <div
+                      class="flex items-center justify-center text-xl font-medium text-gray-500 h-[calc(100svh-18rem)] max-w-screen-xl"
+                    >
+                      No matching records found
+                    </div>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+            <tfoot v-if="footers.length" class="sticky bottom-0 left-0 z-50 bg-[#FEF3C7]">
+            <template
+                v-if="footers.length > 0"
+                v-for="(row, rowIndex) in footers"
+                :key="`table-row-${rowIndex}`"
+              >
+                <tr>
+                  <th v-if="checkable" class="empty"></th>
+                  <th
+                    v-for="(header, headerIndex) in headers"
+                    :key="headerIndex"
+                    :class="['px-3 py-1.5 text-gray-900 snap-start snap-always h-14',
+                      isScrolled && headerIndex === 0 ? stickyClass.foot : '',
+                    ]"
+                  >
+                    <slot
+                      :name="`footer.${header.value}`"
+                      :row="row"
+                      :rowIndex="rowIndex"
+                    >
+                      {{ getValueByPath(row, header?.value) }}
+                    </slot>
+                  </th>
+                </tr>
+              </template>
+
+            </tfoot>
+          </table>
+        </div>
+        <div
+          v-if="paginated && computedItems.length !== 0"
+          class="sticky bottom-0 left-0 z-50 flex items-center justify-between px-2 py-2 bg-gray-100"
+        >
+          <slot name="tableCount">
+            <div class="inline-flex items-center gap-x-10">
+              <div class="text-sm font-normal text-gray-900">
+                1-{{ limit }} of {{ total }}
+              </div>
+              <div class="inline-flex items-center gap-2">
+                <span class="text-sm font-normal text-gray-900"
+                  >Result per page</span
+                >
+                <EUIPageLimit
+                  :page-limit="limit"
+                  @update-limit="changeLimit($event)"
+                  @refetch="searchData($event)"
+                />
+              </div>
+            </div>
+          </slot>
+          <template v-if="paginated && computedItems.length !== 0">
+            <slot name="tablepagination">
+              <EUIPagination
+                :activePage="newCurrentPage"
+                :pageLimit="limit"
+                :totalCount="total"
+                @change-page="pageChanged($event)"
+              />
+            </slot>
+          </template>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  onMounted,
+  onUnmounted,
+  PropType,
+  ref,
+  toRefs,
+  watch,
+} from "vue";
+import EUIPagination from "./EUIPagination.vue";
+import EUITableCheckbox from "./EUITableCheckbox.vue";
+import SortArrow from "../../assets/svg/SortArrow.vue";
+import EUIPageLimit from "./EUIPageLimit.vue";
+import { capitalizeText } from "../../utils/lodash";
+import EUICircleLoader from "../loader/EUICircleLoader.vue";
+import { indexOf, getValueByPath, defaultFilter } from "../../utils/helpers";
+
+interface Header {
+  value: string;
+  text?: string;
+  name?: string;
+  width?: number;
+  sortable?: boolean;
+  activeYear?: string[];
+}
+
+const props = defineProps({
+  checkable: {
+    type: Boolean,
+    default: false,
+  },
+  stickyColumn: { type: Boolean, default: true },
+  paginated: { type: Boolean, default: false },
+  tableExpanded: { type: Boolean, default: false },
+  backendPagination: { type: Boolean, default: false },
+  checkedRows: { type: Array, default: () => ({}), required: true },
+  headers: {
+    type: Array as PropType<Header[]>,
+    default: () => ({}),
+    required: true,
+  },
+  items: { type: Array, required: true, default: () => ({}) },
+  footers: { type: Array, default: () => ({}) },
+  defaultSort: { type: String, default: "" },
+  defaultSortDirection: { type: String, default: "asc" },
+  search: { type: String, default: "" },
+  perPage: { type: Number, default: 5 },
+  currentPage: { type: Number, default: 0 },
+  total: { type: Number, default: 0 },
+  customIsChecked: {
+    type: Function as PropType<(item: any, obj: any) => boolean>,
+    default: () => () => false,
+  },
+  isRowCheckable: { type: Function, default: () => true },
+  tableHeight: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  tableLoading: { type: Boolean, default: false },
+});
+const {
+  defaultSort,
+  defaultSortDirection,
+  checkedRows,
+  currentPage,
+  items,
+  backendPagination,
+  total,
+  search,
+  headers,
+  paginated,
+  isRowCheckable,
+} = toRefs(props);
+
+const currentSort = ref(defaultSort.value);
+const currentSortDir = ref(defaultSortDirection.value);
+const newCheckedRows = ref([...checkedRows.value]);
+const newCurrentPage = ref(currentPage.value);
+const limit = ref(props.perPage);
+const loading = computed(() => props.tableLoading);
+
+// Computed Property
+const filteredItems = computed(() => {
+  let filteredItems = items.value.slice();
+  if (!backendPagination.value && search.value !== "") {
+    if (search.value.trim() === "") return filteredItems;
+    const props = headers.value.map((h) => h.value);
+    filteredItems = items.value.filter((item) =>
+      props.some((prop) =>
+        defaultFilter(
+          getValueByPath(item, prop),
+          search.value.toString().toLowerCase()
+        )
+      )
+    );
+  }
+  return filteredItems;
+});
+
+const computedItems = computed(() => {
+  let items = filteredItems.value;
+  // Sort items before slicing for pagination
+  items.sort((a: any, b: any) => {
+    const modifier = currentSortDir.value === "desc" ? -1 : 1;
+    if (a[currentSort.value] < b[currentSort.value]) return -1 * modifier;
+    if (a[currentSort.value] > b[currentSort.value]) return 1 * modifier;
+    return 0;
+  });
+  return items;
+});
+
+const searchData = (_data: any) => {
+  // console.log(_data);
+};
+
+const sortClass = computed(() => (header: any) => {
+  return currentSortDir.value === "asc" && currentSort.value === header.value
+    ? "rotate-0"
+    : currentSortDir.value === "desc" && currentSort.value === header.value
+    ? "rotate-180"
+    : "";
+});
+
+const isIndeterminate = computed(() => {
+  const validVisibleData = computedItems.value.filter((row) =>
+    isRowCheckable.value(row)
+  );
+  return (
+    newCheckedRows.value.length > 0 &&
+    newCheckedRows.value.length < validVisibleData.length
+  );
+});
+
+const isAllChecked = computed(() => {
+  return (
+    computedItems.value.length > 0 &&
+    computedItems.value.every((row) => newCheckedRows.value.includes(row))
+  );
+});
+
+const isAllUncheckable = computed(() => {
+  const validVisibleData = computedItems.value?.filter((row) =>
+    isRowCheckable.value!(row)
+  );
+  return validVisibleData.length === 0;
+});
+
+const emit = defineEmits([
+  "update:currentPage",
+  "changePage",
+  "sort",
+  "check",
+  "check-all",
+  "update:checkedRows",
+  "update:selectedRows",
+  "changeLimit",
+  "mouseenter",
+  "mouseleave",
+]);
+
+const changeLimit = (limitData: number) => {
+  limit.value = limitData;
+  newCurrentPage.value = 1;
+  emit("update:currentPage", newCurrentPage.value);
+  emit("changeLimit", limitData);
+};
+
+const pageChanged = (page: number) => {
+  newCurrentPage.value = page > 0 ? page : 0;
+  emit("update:currentPage", newCurrentPage.value);
+  emit("changePage", page);
+};
+
+const sortBy = (header: any, event: any) => {
+  if (!header || !header.sortable) return;
+  if (header.value === currentSort.value) {
+    currentSortDir.value = currentSortDir.value === "asc" ? "desc" : "asc";
+  }
+  currentSort.value = header.value;
+  emit("sort", currentSort.value, currentSortDir.value, event);
+};
+
+const isRowChecked = (row: any) => {
+  return indexOf(newCheckedRows.value, row) >= 0;
+};
+
+const removeCheckedRow = (row: any) => {
+  const index = indexOf(newCheckedRows.value, row);
+  if (index >= 0) {
+    newCheckedRows.value.splice(index, 1);
+  }
+};
+
+const checkAll = () => {
+  if (isAllChecked.value) {
+    // Uncheck all rows
+    newCheckedRows.value = [];
+  } else {
+    // Check all rows
+    const rowsToCheck = computedItems.value.filter(
+      (row) => !newCheckedRows.value.includes(row)
+    );
+    newCheckedRows.value.push(...rowsToCheck);
+  }
+  emit("check", newCheckedRows.value);
+  emit("check-all", newCheckedRows.value);
+  emit("update:checkedRows", newCheckedRows.value);
+  emit("update:selectedRows", newCheckedRows.value);
+};
+
+const checkRow = (row: any, _rowIndex: number, _event: any) => {
+  const isChecked = newCheckedRows.value.includes(row);
+  if (_event && isChecked) {
+    removeCheckedRow(row);
+  } else {
+    newCheckedRows.value.push(row);
+  }
+  emit("check", newCheckedRows.value, row);
+  emit("update:checkedRows", newCheckedRows.value);
+  emit("update:selectedRows", newCheckedRows.value);
+};
+
+// watch
+watch(
+  () => currentPage.value,
+  (newVal) => {
+    newCurrentPage.value = newVal;
+  },
+  { immediate: true }
+);
+
+watch(
+  () => checkedRows.value,
+  (rows) => {
+    newCheckedRows.value = [...rows];
+  },
+  {
+    immediate: true,
+  }
+);
+
+// table scroll to add class
+const stickyClass = computed(() => {
+  return props.checkable && props.stickyColumn
+    ? {
+        head: "bg-violet-100 sticky left-[4.5rem] top-0 z-20",
+        foot: "bg-[#FEF3C7] sticky left-[4.5rem] top-0 z-20",
+        body: "bg-white sticky left-[4.5rem] top-0 z-10",
+      }
+    : {
+        head: "bg-violet-100 sticky left-0 top-0 z-20",
+        foot: "bg-[#FEF3C7] sticky left-0 top-0 z-20",
+        body: "bg-white sticky left-0 top-0 z-10",
+      };
+});
+
+const isOverflowing = ref(false);
+const isScrolled = ref(false);
+const tableContainer = ref<HTMLElement | null>(null);
+
+const handleScroll = () => {
+  const container = tableContainer.value;
+  if (container) {
+    isScrolled.value = container.scrollLeft > 0;
+  }
+};
+
+const checkOverflow = () => {
+  const container = tableContainer.value;
+  if (container) {
+    isOverflowing.value = container.scrollWidth > container.clientWidth;
+  }
+};
+
+onMounted(() => {
+  window.addEventListener("resize", checkOverflow);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", checkOverflow);
+});
+
+// Watch for changes in the container's width to check for overflow
+watch(() => tableContainer.value?.clientWidth, checkOverflow);
+</script>
+
+<style lang="scss" scoped>
+#growth-table {
+  & table {
+    // border-spacing: 0 0.5rem;
+    @apply min-w-full text-sm font-light text-left table table-auto w-full -mt-2 box-border border-separate border-spacing-y-2 relative;
+    thead tr {
+      @apply snap-x snap-mandatory;
+      th {
+        @apply snap-always snap-start last-of-type:rounded-r-xl first-of-type:rounded-l-xl;
+        &:first-of-type.checkable {
+          min-height: 45px;
+          @apply flex items-center justify-center px-4 max-w-[4.5rem] w-[4.5rem] sticky left-0 top-0 z-20 bg-violet-100;
+        }
+      }
+    }
+    tbody {
+      @apply snap-y snap-mandatory snap-always;
+      tr:not(.norecords) {
+        @apply text-gray-500 transition-all duration-150 rounded-xl bg-white snap-start ease-in-out snap-x snap-mandatory;
+        &:hover {
+          @apply shadow-[1px_2px_40px_0px_#03022912] ring-1 ring-gray-100 ring-inset z-30;
+        }
+        td {
+          @apply px-3 py-1.5 text-sm font-normal last-of-type:rounded-r-xl first-of-type:rounded-l-xl transition-transform duration-100 ease-in-out border-solid border border-l-0 border-r-0 border-white first:border-s last:border-e h-14;
+          &:first-of-type.checkable {
+            @apply w-14 text-center sticky left-0 top-0 z-[11] bg-white;
+          }
+        }
+        &:hover td {
+          @apply font-medium text-gray-900 bg-white border-gray-100;
+          &:first-of-type.checkable {
+            @apply bg-white;
+          }
+        }
+      }
+    }
+    tfoot tr {
+      @apply snap-x snap-mandatory;
+      th {
+        @apply snap-always snap-start last-of-type:rounded-r-xl first-of-type:rounded-l-xl;
+        &:first-of-type.empty {
+          @apply table-cell min-h-10 px-2 max-w-[45px] w-[45px] sticky left-0 top-0 z-20 bg-[#FEF3C7];
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/table/GrowthTableView.vue

@@ -0,0 +1,108 @@
+<!-- <template>
+  <div class="max-w-screen-xl mx-auto">
+    <pre class="text-[0.5rem] p-2 border border-gray-300 rounded-lg max-h-72 overflow-y-auto">{{ selectedRows.map(x => x?._id)}}</pre>
+    <GrowthTable
+      checkable
+      paginated
+      :checked-rows.sync="checkedRows"
+      backend-pagination
+      :per-page="limit"
+      :headers="growthTableHeaders"
+      :items="growthTableData"
+      :footers="growthTableFooter"
+      :total="totalCount"
+      :default-sort-direction="defaultSortOrder"
+      default-sort="introducer_details"
+      :current-page="offset"
+      @sort="onSort"
+      @mouseenter="select"
+      @mouseleave="(selectedIndex = null), (selected = null)"
+    >
+
+          <template #[`item.active_allagents`]="{ row, rowIndex }">
+        <div class="flex flex-row items-center gap-4 justify-between bg-violet-50 pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.active_allagents" :key="`year_${idx}`">{{ data.value || '-' }}</span>
+        </div>
+      </template>
+      <template #[`item.active_active_allagents`]="{ row, rowIndex }">
+        <div class="flex flex-row items-center gap-4 justify-between bg-violet-50 pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.active_active_allagents" :key="`year_${idx}`">{{ data.value || '-' }}</span>
+        </div>
+      </template>
+      <template #[`item.active_dormant`]="{ row, rowIndex }">
+        <div class="flex flex-row items-center gap-4 justify-between bg-violet-50 pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.active_dormant" :key="`year_${idx}`">{{ data.value || '-' }}</span>
+        </div>
+      </template>
+      <template #[`item.totalDepositCount`]="{ row, rowIndex }">
+        <div class="flex flex-row items-center gap-4 justify-between bg-violet-50 pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.totalDepositCount" :key="`year_${idx}`">{{ data.value || '-' }}</span>
+        </div>
+      </template>
+      <template #[`item.totalStudentCount`]="{ row, rowIndex }">
+        <div class="flex flex-row items-center gap-4 justify-between bg-violet-50 pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.totalStudentCount" :key="`year_${idx}`">{{ data.value || '-' }}</span>
+        </div>
+      </template>
+
+<template #[`footer.active_allagents`]="{ row, rowIndex }">
+        <div class="flex flex-row items-center gap-4 justify-between bg-[#FCD34D] pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.active_allagents" :key="`year_${idx}`">{{ data.value || '-' }}</span>
+        </div>
+      </template>
+      <template #[`footer.active_active_allagents`]="{ row, rowIndex }">
+        <div class="flex flex-row items-center gap-4 justify-between bg-[#FCD34D] pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.active_active_allagents" :key="`year_${idx}`">{{ data.value || '-' }}</span>
+        </div>
+      </template>
+      <template #[`footer.active_dormant`]="{ row, rowIndex }">
+        <div class="flex flex-row items-center gap-4 justify-between bg-[#FCD34D] pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.active_dormant" :key="`year_${idx}`">{{ data.value || '-' }}</span>
+        </div>
+      </template>
+      <template #[`footer.totalDepositCount`]="{ row, rowIndex }">
+        <div class="flex flex-row items-center gap-4 justify-between bg-[#FCD34D] pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.totalDepositCount" :key="`year_${idx}`">{{ data.value || '-' }}</span>
+        </div>
+      </template>
+      <template #[`footer.totalStudentCount`]="{ row, rowIndex }">
+        <div class="flex flex-row items-center gap-4 justify-between bg-[#FCD34D] pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.totalStudentCount" :key="`year_${idx}`">{{ data.value || '-' }}</span>
+        </div>
+      </template>
+    </GrowthTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { growthTableData, growthTableFooter, growthTableHeaders } from "../../data/table";
+import GrowthTable from "./GrowthTable.vue";
+
+//TODO: Dashboard Table
+const checkedRows = ref([]);
+const defaultSortOrder = ref("asc");
+const limit = ref(5);
+const offset = ref(1);
+const selectedIndex = ref<{ index: string } | null>(null);
+const selected = ref<{ index: string } | null>(null);
+
+const select = (_item: any, index: any) => {
+  selectedIndex.value = index;
+};
+
+const onSort = (field: string, order: string) => {
+  const modifier = order === "desc" ? -1 : 1;
+  growthTableData.sort((a: any, b: any) => {
+    if (a[field] < b[field]) return -1 * modifier;
+    if (a[field] > b[field]) return 1 * modifier;
+    return 0;
+  });
+};
+
+const totalCount = computed(() => {
+  return growthTableData.length;
+});
+</script>
+
+<style scoped></style> -->