rez-table-listing-mui/src/listing/libs/utils/common.ts

A rez table listing component built on TanStack Table

import { Column } from "@tanstack/react-table";
import { alignProps } from "../../types/common";
import { CSSProperties } from "react";
import axios from "axios";
import { LEAD_STATUS } from "../../../kanban/constants/kanban-constants";

export const formatClassName = (className: string): string => {
  return className.replace(/\s+/g, " ").trim();
};

export const getColumnAlignment = (align: string) => {
  const contentAlignment = {
    left: "flex-start",
    center: "center",
    right: "flex-end",
  };

  const alignment = contentAlignment[(align as alignProps) || "left"];
  return alignment;
};

export const getColumnPinningStyles = <T>(column: Column<T>): CSSProperties => {
  const isPinned = column.getIsPinned();
  const isLastLeftPinnedColumn =
    isPinned === "left" && column.getIsLastColumn("left");
  const isFirstRightPinnedColumn =
    isPinned === "right" && column.getIsFirstColumn("right");

  return {
    boxShadow: isLastLeftPinnedColumn
      ? "-4px 0 4px -4px gray inset"
      : isFirstRightPinnedColumn
      ? "4px 0 4px -4px gray inset"
      : undefined,
    background: "inherit",
    left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
    right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
    position: isPinned ? "sticky" : "relative",
    width: column.getSize(),
  };
};

export const getColumnPinningStylesBody = <T>(
  column: Column<T>
): CSSProperties => {
  const isPinned = column.getIsPinned();
  const isLastLeftPinnedColumn =
    isPinned === "left" && column.getIsLastColumn("left");
  const isFirstRightPinnedColumn =
    isPinned === "right" && column.getIsFirstColumn("right");

  return {
    boxShadow: isLastLeftPinnedColumn
      ? "-4px 0 4px -4px gray inset"
      : isFirstRightPinnedColumn
      ? "4px 0 4px -4px gray inset"
      : undefined,
    background: "inherit",
    left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
    right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
    position: isPinned ? "sticky" : "relative",
    width: column.getSize(),
  };
};

export function customDebounce<T extends (...args: any[]) => any>(
  func: T,
  delay: number
): (...args: Parameters<T>) => void {
  let timerId: ReturnType<typeof setTimeout> | null = null;

  return function (this: ThisParameterType<T>, ...args: Parameters<T>): void {
    if (timerId) clearTimeout(timerId);
    timerId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

//ENTITY TYPE
const ENVIRONMENT = "crm_dev";
export const ENTITY_TYPE = "LEAD";
export const MODULE_CODE = "school_adm_org";
export const MAPPED_ENTITY_TYPE = "LYPR"; // LAP OR LYPR
export const USER_ID = 226;
export const APP_CODE = "crm";

const environments = {
  adm_dev: "http://localhost:6010/api",
  crm_dev: "http://localhost:6011/api",
  uat: "https://api.eth-qa.rezolut.in/api/enrol",
};

const getBaseUrl = () => environments[ENVIRONMENT];

// API INTEGRATION
export const api = axios.create({
  baseURL: getBaseUrl(),
  timeout: 10000,
  headers: {
    "Content-Type": "application/json",
  },
});

api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("authToken");
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export const formatTableHeaders = (columns: any) => {
  const mapped = columns.map((col: any) => {
    const meta =
      col.attribute_key === "status" ||
      col.attribute_key === LEAD_STATUS ||
      col.attribute_key === "flag" ||
      col.attribute_key === "invitation_status"
        ? { type: "custom", propName: "renderStatus", align: col.align }
        : col.attribute_key === "profile_image" ||
          col.attribute_key === "short_logo"
        ? {
            type: "custom",
            propName: "profileImageFetch",
            align: col.align,
          }
        : col.attribute_key === "start_date" || col.attribute_key === "end_date"
        ? { type: "custom", propName: "dateFormater", align: col.align }
        : col.attribute_key === "action"
        ? { type: "custom", propName: "renderAction", align: col.align }
        : col.attribute_key === "code"
        ? {
            type: "custom",
            propName: "drillCellRenderer",
            align: col.align,
          }
        : col.attribute_key === "primary_mobile"
        ? {
            type: "custom",
            propName: "apiCallonClick",
            align: col.align,
          }
        : undefined;

    return {
      header: col.name ?? "",
      accessorKey: col.attribute_key ?? "",
      size: col.size,
      meta,
    };
  });

  return mapped;
};