@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/hooks/useDownloadPdf.js

@@ -0,0 +1,358 @@
+import pdfMake from 'pdfmake/build/pdfmake';
+import vfs from '@/assets/fonts/vfs_fonts';
+import dayjs from 'dayjs';
+import { FormConfiguratorUtil } from '@argusoft/medplat-form-engine';
+import { evaluateExpressionCore, evaluateConditionCore, normalize } from '@argusoft/medplat-form-engine';
+
+pdfMake.vfs = {
+  ...vfs,
+};
+
+pdfMake.addFonts({
+  Roboto: {
+    normal: 'Roboto-Regular.ttf',
+    bold: 'Roboto-Medium.ttf',
+    italics: 'Roboto-Regular.ttf',
+    bolditalics: 'Roboto-Regular.ttf',
+  },
+  MuktaVaani: {
+    normal: 'MuktaVaani-Regular.ttf',
+    bold: 'MuktaVaani-Regular.ttf',
+    italics: 'MuktaVaani-Regular.ttf',
+    bolditalics: 'MuktaVaani-Regular.ttf',
+  },
+});
+
+/**
+ * Custom hook to generate and download PDFs with English & Gujarati text.
+ * @returns {Function} - A function to download PDF
+ */
+const useDownloadPdf = () => {
+  /**
+   * Function to download PDF
+   * @param {Object} config - Configuration for the PDF
+   * @param {Array<string> | string} config.title - Title of the PDF (single string or array of lines)
+   * @param {Array<string>} config.columns - Table column headers
+   * @param {Array<string>} config.keys - Keys to extract data dynamically
+   * @param {Array<Object>} config.data - JSON data to convert to rows
+   * @param {string} config.fileName - Name of the downloaded file
+   * @param {string} config.headerText - Custom header text
+   * @param {string} config.footerText - Custom footer text
+   * @param {string} config.orientation - Orientation of the PDF ("portrait" or "landscape")
+   */
+  const downloadPdf = ({
+    title,
+    columns,
+    keys,
+    data,
+    fileName = 'data.pdf',
+    headerText = 'Header',
+    footerText = 'Page',
+    orientation = 'portrait',
+    layout = 'table',
+    gridColumns = 2,
+    gridConfig = null,
+    conditionContext = null,
+  }) => {
+    const isGujarati = (text) => /[\u0A80-\u0AFF]/.test(text);
+
+    const content = [];
+
+    if (title) {
+      const titleContent = Array.isArray(title)
+        ? title.map((line) => ({
+            text: line,
+            font: isGujarati(line) ? 'MuktaVaani' : 'Roboto',
+            alignment: 'center',
+            fontSize: 14,
+            margin: [0, 5],
+          }))
+        : [
+            {
+              text: title,
+              font: isGujarati(title) ? 'MuktaVaani' : 'Roboto',
+              alignment: 'center',
+              fontSize: 14,
+              margin: [0, 5],
+            },
+          ];
+      content.push(...titleContent);
+    }
+
+    const updatedColumns = ['S.No', ...columns];
+
+    const getPathValue = (source, path) =>
+      path.split('.').reduce((acc, segment) => (acc === null || acc === undefined ? undefined : acc[segment]), source);
+
+    const resolveValue = (value, valueType = null, contextRowData = {}, isCustomValue = false) => {
+      if (isCustomValue) return normalize(value);
+      if (value === null || value === undefined) return normalize(value);
+
+      let resolvedValue = value;
+
+      if (typeof value === 'string' && value.startsWith('__')) {
+        try {
+          resolvedValue = FormConfiguratorUtil.evaluate(
+            value,
+            conditionContext?.iteratorIndicesMap || {},
+            conditionContext?.formIndexes || {},
+            conditionContext?.getValues,
+            { dayjs, ...(conditionContext?.dependencies || {}) }
+          );
+        } catch {
+          resolvedValue = null;
+        }
+      } else if (typeof value === 'string' && !isCustomValue) {
+        if (Object.prototype.hasOwnProperty.call(contextRowData, value)) {
+          resolvedValue = contextRowData[value];
+        } else if (value.includes('.')) {
+          const pathValue = getPathValue(contextRowData, value);
+          if (pathValue !== undefined) resolvedValue = pathValue;
+        } else if (conditionContext?.getValues) {
+          const formValue = conditionContext.getValues(value);
+          if (formValue !== undefined) resolvedValue = formValue;
+        }
+      }
+
+      const targetType = valueType;
+      if (targetType === 'listValueFieldValue' || targetType === 'location')
+        return typeof resolvedValue === 'string' ? Number(resolvedValue) : resolvedValue;
+      if (targetType === 'boolean') return resolvedValue === 'true' || resolvedValue === true;
+      if (targetType === 'date' && dayjs(resolvedValue).isValid()) return dayjs(resolvedValue).startOf('day').valueOf();
+      if (targetType === 'dateAndTime' && dayjs(resolvedValue).isValid())
+        return dayjs(resolvedValue).startOf('minute').valueOf();
+
+      return normalize(resolvedValue);
+    };
+
+    const evaluateCondition = (condition, contextCellValue, contextRowData) =>
+      evaluateConditionCore({
+        condition,
+        evaluator: resolveValue,
+        contextCellValue: contextCellValue,
+        contextRowData: contextRowData,
+        type: null,
+        isStyleMode: false,
+      });
+
+    const evaluateExpression = (expression, item) =>
+      evaluateExpressionCore({
+        expression,
+        contextCellValue: null,
+        contextRowData: item,
+        conditionKey: 'visibility',
+        evaluateConditionFunc: evaluateCondition,
+      });
+
+    const renderPrefixSuffixElements = (configArr, item) => {
+      if (!configArr) return [];
+      const resolvedConfigs = Array.isArray(configArr) ? configArr : [configArr];
+      if (resolvedConfigs.length === 0) return [];
+
+      const match = resolvedConfigs.find(
+        (c) =>
+          typeof c === 'object' && !c.isDefault && c.appliedConditions && evaluateExpression(c.appliedConditions, item)
+      );
+      const def = resolvedConfigs.find((c) => typeof c === 'object' && c.isDefault);
+      const single = resolvedConfigs.length === 1 ? resolvedConfigs[0] : null;
+      const c =
+        match ||
+        def ||
+        (single && (typeof single === 'string' || (typeof single === 'object' && !single.appliedConditions))
+          ? single
+          : null);
+
+      if (!c) return [];
+      let val, textVal, element;
+      if (typeof c === 'string') {
+        val = item[c];
+      } else if (c.iconValue) {
+        return [{ svg: c.iconValue, width: 10, height: 10, margin: [0, 0, 3, 0] }];
+      } else {
+        val = item[c.fieldValue || c.fieldKey || c.key];
+      }
+
+      if (val !== undefined && val !== null && val !== '') {
+        textVal = val.toString();
+        element = {
+          text: textVal,
+          fontSize: 8.5,
+          font: isGujarati(textVal) ? 'MuktaVaani' : 'Roboto',
+          margin: [0, 0, 3, 0],
+        };
+      }
+      return element ? [element] : [];
+    };
+
+    let mainContent;
+
+    const renderCard = (item, index) => {
+      const prefixColumn = [
+        { text: `${index + 1}.`, bold: true, fontSize: 8.5, color: '#64748b', margin: [0, 0, 0, 4] },
+        ...renderPrefixSuffixElements(gridConfig?.prefix, item),
+      ];
+      const middleColumn = [];
+      ['title', 'subtitle', 'description'].forEach((key) => {
+        const val = item[gridConfig?.[key]]?.toString().trim();
+        if (val) {
+          middleColumn.push({
+            text: val,
+            bold: key !== 'description',
+            fontSize: key === 'title' ? 10 : key === 'subtitle' ? 8 : 7.5,
+            font: isGujarati(val) ? 'MuktaVaani' : 'Roboto',
+            color: key === 'title' ? '#1e293b' : key === 'subtitle' ? '#2563eb' : '#64748b',
+            margin: [0, 0, 0, key === 'description' ? 4 : 2],
+            italics: key === 'description',
+          });
+        }
+      });
+
+      const rightColumn = [];
+      ['badge', 'tag'].forEach((key) => {
+        const val = item[gridConfig?.[key]]?.toString().trim();
+        if (val) {
+          rightColumn.push({
+            table: {
+              body: [
+                [
+                  {
+                    text: val,
+                    fontSize: 6.5,
+                    color: key === 'badge' ? '#1d4ed8' : '#166534',
+                    bold: true,
+                    margin: [key === 'badge' ? 3 : 4, 1],
+                  },
+                ],
+              ],
+            },
+            layout: {
+              hLineWidth: () => 0.4,
+              vLineWidth: () => 0.4,
+              hLineColor: () => (key === 'badge' ? '#1d4ed8' : '#166534'),
+              vLineColor: () => (key === 'badge' ? '#1d4ed8' : '#166534'),
+              fillColor: () => (key === 'badge' ? '#dbeafe' : '#dcfce7'),
+            },
+            margin: [0, 0, 0, 4],
+          });
+        }
+      });
+      const suffixElements = renderPrefixSuffixElements(gridConfig?.suffix, item);
+      if (suffixElements.length > 0) rightColumn.push(...suffixElements);
+
+      return {
+        table: {
+          widths: ['*'],
+          body: [
+            [
+              {
+                stack: [
+                  {
+                    columns: [
+                      { stack: prefixColumn, width: 'auto', margin: [0, 0, 8, 0] },
+                      { stack: middleColumn, width: '*' },
+                      { stack: rightColumn, width: 'auto', alignment: 'right', margin: [8, 0, 0, 0] },
+                    ],
+                  },
+                ],
+                padding: [8, 8, 8, 8],
+              },
+            ],
+          ],
+        },
+        layout: {
+          hLineWidth: (i) => (i === 0 || i === 1 ? 0.8 : 0),
+          vLineWidth: (i) => (i === 0 || i === 1 ? 0.8 : 0),
+          hLineColor: () => '#cbd5e1',
+          vLineColor: () => '#cbd5e1',
+        },
+        margin: [0, 4, 0, 4],
+      };
+    };
+
+    if (layout === 'grid') {
+      const cards = data.map((item, index) => renderCard(item, index));
+      const effectiveGridColumns = gridColumns > 2 ? 2 : gridColumns;
+      const rows = [];
+      for (let i = 0; i < cards.length; i += effectiveGridColumns) {
+        rows.push({ columns: cards.slice(i, i + effectiveGridColumns), columnGap: 10 });
+      }
+      mainContent = { stack: rows };
+    } else {
+      const rows = data.map((item, index) => {
+        return [
+          { text: index + 1, fontSize: 10 },
+          ...keys.map((key) => {
+            const value = item[key];
+            if (typeof value === 'object') {
+              return {
+                text: Object.entries(value)
+                  .map(([k, v]) => `${k} - ${v}`)
+                  .join('\n'),
+                fontSize: 10,
+                font: isGujarati(value) ? 'MuktaVaani' : 'Roboto',
+              };
+            }
+            const temp = value?.toString() || '';
+            return {
+              text: temp,
+              fontSize: 10,
+              font: isGujarati(temp) ? 'MuktaVaani' : 'Roboto',
+            };
+          }),
+        ];
+      });
+
+      mainContent = {
+        table: {
+          headerRows: 1,
+          widths: updatedColumns.map(() => '*'),
+          body: [
+            updatedColumns.map((col) => ({
+              text: col,
+              fillColor: '#243a50',
+              color: '#ffffff',
+              bold: true,
+              fontSize: 10,
+            })),
+            ...rows,
+          ],
+        },
+        layout: {
+          fillColor: (rowIndex) => (rowIndex === 0 ? '#243a50' : null),
+          hLineWidth: () => 0.1,
+          vLineWidth: () => 0.1,
+        },
+        margin: [0, 10],
+      };
+    }
+
+    const docDefinition = {
+      pageOrientation: orientation,
+      content: [...content, mainContent],
+      footer: (currentPage, pageCount) => {
+        return {
+          text: `Page ${currentPage} of ${pageCount} | ${footerText}`,
+          alignment: 'left',
+          margin: [14, 0],
+          fontSize: 8,
+          font: isGujarati(footerText) ? 'MuktaVaani' : 'Roboto',
+        };
+      },
+      header: {
+        text: headerText,
+        alignment: 'left',
+        margin: [14, 10],
+        fontSize: 10,
+        font: isGujarati(headerText) ? 'MuktaVaani' : 'Roboto',
+      },
+      defaultStyle: {
+        font: 'MuktaVaani',
+      },
+    };
+    pdfMake.createPdf(docDefinition).download(fileName);
+  };
+
+  return downloadPdf;
+};
+
+export default useDownloadPdf;

package/src/hooks/useDownloadXlsx.js

@@ -0,0 +1,55 @@
+import * as XLSX from 'xlsx-js-style';
+import { saveAs } from 'file-saver';
+import { useCallback } from 'react';
+
+/**
+ * Custom hook to generate and download Excel files using exceljs.
+ *
+ * @returns {function} A function to download Excel files.
+ */
+export function useDownloadXlsx() {
+  /**
+   * Downloads an Excel file.
+   *
+   * @param {Object} config - Configuration for the Excel download
+   * @param {Array<string>} config.columns - Columns (headers) for the Excel file.
+   * @param {Array<string>} config.keys - Keys to extract data dynamically from each object.
+   * @param {Array<Object>} config.data - Data to be included in the Excel file (array of objects).
+   * @param {string} config.filename - The name of the file to be downloaded (default: "download.xlsx").
+   */
+  const downloadXlsx = useCallback(async ({ columns, keys, data, filename = 'download.xlsx' }) => {
+    if (!Array.isArray(data) || data.length === 0) {
+      console.error('Data must be a non-empty array.');
+      return;
+    }
+
+    const workbook = XLSX.utils.book_new();
+
+    const worksheetData = [
+      ['S.No', ...columns],
+      ...data.map((item, index) => [
+        index + 1,
+        ...keys.map((key) => {
+          if (typeof item[key] === 'object' && item[key] !== null) {
+            return Object.entries(item[key])
+              .map(([subKey, value]) => `${subKey} - ${value}`)
+              .join('\n');
+          }
+          return item[key];
+        }),
+      ]),
+    ];
+
+    const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
+
+    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
+
+    const workbookOutput = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+    const blob = new Blob([workbookOutput], {
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    });
+    saveAs(blob, filename);
+  }, []);
+
+  return downloadXlsx;
+}

package/src/hooks/useListValueFieldValues.js

@@ -0,0 +1,30 @@
+import { FormConfiguratorUtil } from '@argusoft/medplat-form-engine';
+import useCaching from '@/hooks/useCaching';
+
+const notFound = -1;
+
+const useListValueFieldValues = () => {
+  const { peekCache, updateCache } = useCaching();
+
+  const fetchListValueFieldValues = async (ids) => {
+    const uniqueIds = [...new Set(ids)];
+    const idsToFetch = uniqueIds?.filter((id) => !peekCache(['lvfvd', id]));
+    const data = await FormConfiguratorUtil.fetchListValueDetailByIds(idsToFetch || []);
+    data?.forEach(({ id, value }) => {
+      updateCache(['lvfvd', id], value);
+    });
+  };
+
+  const getListValueFieldValue = async (id) => {
+    const data = peekCache(['lvfvd', id]) || notFound;
+    if (data === -1) {
+      await fetchListValueFieldValues([id]);
+      return peekCache(['lvfvd', id]) || notFound;
+    }
+    return data || notFound;
+  };
+
+  return { fetchListValueFieldValues, getListValueFieldValue };
+};
+
+export default useListValueFieldValues;

package/src/hooks/useLocationHierarchies.js

@@ -0,0 +1,63 @@
+import { FormConfiguratorUtil } from '@argusoft/medplat-form-engine';
+import { useSelector } from 'react-redux';
+import useCaching from '@/hooks/useCaching';
+
+const locationNotFound = { locationName: -1 };
+
+const useLocationHierarchies = () => {
+  const { getCachedData, peekCache, updateCache } = useCaching();
+  const lang = useSelector((state) => state.Translation.translationLanguage);
+
+  const fetchHierarchies = async (ids) => {
+    const uniqueLocationIds = [...new Set(ids)];
+    
+    // Filter out IDs that are already safely cached
+    const missingIds = uniqueLocationIds.filter((id) => {
+      const cachedData = peekCache(['locationHierarchy', id, lang]);
+      return !cachedData;
+    });
+
+    if (missingIds.length === 0) {
+      return; // All requested IDs are already in the cache!
+    }
+
+
+    const data = await FormConfiguratorUtil.fetchLocationHierarchyByIds(
+      missingIds,
+      lang
+    );
+
+    data?.forEach(({ locationId, locationName, locationHierarchy }) => {
+      updateCache(['locationHierarchy', locationId, lang], {
+        locationName,
+        locationHierarchy,
+      });
+    });
+  };
+
+  const getHierarchy = async (id) => {
+    const data = await getCachedData({
+      cacheKey: ['locationHierarchy', id, lang],
+      fetchFn: async () => {
+        const response = await FormConfiguratorUtil.fetchLocationHierarchyByIds([id], lang);
+        if (!response || response.length === 0) {
+          // Throwing an error prevents React Query from caching this empty response
+          throw new Error(`Location Hierarchy not found for id: ${id}`);
+        }
+        const result = response[0];
+        return {
+          locationName: result.locationName,
+          locationHierarchy: result.locationHierarchy
+        };
+      },
+      staleTime: Infinity,
+      cacheTime: 1000 * 60 * 30, // 30 minutes
+    });
+
+    return data || locationNotFound;
+  };
+
+  return { fetchHierarchies, getHierarchy };
+};
+
+export default useLocationHierarchies;

package/src/hooks/useLocationHierarchyTranslate.js

@@ -0,0 +1,16 @@
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+
+const useLocationHierarchyTranslate = () => {
+  const { translate } = useTranslateProvider();
+
+  const translateLocationHierarchy = (hierarchy) => {
+    const hierarchyValues = hierarchy?.split(' > ');
+    const translatedHierarchyValues = hierarchyValues?.map((h) => translate(h));
+    const translatedHierarchy = translatedHierarchyValues?.join(' > ');
+    return translatedHierarchy;
+  };
+
+  return { translateLocationHierarchy };
+};
+
+export default useLocationHierarchyTranslate;

package/src/hooks/useOnline.js

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+
+const useOnline = () => {
+  const [isOnline, setUseOnline] = useState(true);
+
+  const handleOnline = () => {
+    setUseOnline(true);
+  };
+
+  const handleOffline = () => {
+    setUseOnline(false);
+  };
+
+  useEffect(() => {
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, []);
+
+  return isOnline;
+};
+
+export default useOnline;

package/src/hooks/usePagination.js

@@ -0,0 +1,63 @@
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+
+/**
+ * Dynamic pagination hook that supports both infinite and traditional pagination.
+ *
+ * @param {Object} params - Parameters for pagination.
+ * @param {Array} params.key - Query key for React Query.
+ * @param {Function} params.queryFn - Query function that accepts an object with { limit, offset, searchString }.
+ * @param {number} [params.limit=100] - Number of items per page.
+ * @param {number} [params.currentPage] - Current page number (used only for traditional pagination).
+ * @param {string|null} [params.searchString=null] - Optional search term.
+ * @param {'infinite' | 'traditional'} [params.paginationType='infinite'] - Type of pagination to use.
+ *
+ * @returns {Object} - Returns the result object from the React Query hook.
+ */
+const usePagination = ({
+  key,
+  queryFn,
+  limit = 100,
+  staleTime = 0,
+  currentPage = 1,
+  searchString = null,
+  paginationType = 'infinite',
+  enabled = true,
+}) => {
+  if (paginationType === 'infinite') {
+    // Infinite scrolling pagination
+    const infiniteQuery = useInfiniteQuery({
+      staleTime: staleTime,
+      queryKey: key,
+      queryFn,
+      initialPageParam: { limit, offset: (currentPage - 1) * limit, searchString },
+      getNextPageParam: (lastPage, allPages, lastPageParam) => {
+        // Check if the last fetched page contains enough items to fetch another page
+        return lastPage?.length >= lastPageParam.limit
+          ? {
+              ...lastPageParam,
+              offset: lastPageParam.offset + lastPageParam.limit,
+              searchString,
+            }
+          : undefined;
+      },
+      enabled,
+    });
+    return infiniteQuery;
+  } else {
+    // Traditional (page-based) pagination
+    const traditionalQuery = useQuery({
+      queryKey: [...key, currentPage],
+      queryFn: () =>
+        queryFn({
+          limit,
+          offset: (currentPage - 1) * limit, // Subtract 1 from currentPage since it's 1-based
+          searchString,
+        }),
+      enabled,
+      keepPreviousData: true,
+    });
+    return traditionalQuery;
+  }
+};
+
+export default usePagination;