form-craft-package 1.10.13-dev.2 → 1.10.13-dev.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-craft-package",
-  "version": "1.10.13-dev.2",
+  "version": "1.10.13-dev.4",
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/components/common/custom-hooks/use-find-dynamic-form.hook.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
 import { useParams } from 'react-router-dom'
 import { IDynamicForm } from '../../../types'
 import { LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
@@ -6,6 +6,7 @@ import { LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
 export const useFindDynamiForm = () => {
   const { formName: formSlug } = useParams<{ formName: string }>()
   const [foundItem, setFoundItem] = useState<IDynamicForm | null | undefined>(undefined)
+  const lastResolvedRef = useRef<{ slug?: string; id?: number | null }>({})
 
   useEffect(() => {
     if (!formSlug) return
@@ -16,8 +17,15 @@ export const useFindDynamiForm = () => {
         const list: IDynamicForm[] = JSON.parse(stored)
         let match = list.find((entry) => entry.slug === formSlug)
         if (!match) match = list.find((entry) => entry.name.split(' ').join('-').toLowerCase() === formSlug)
+
+        const nextId = match?.id ?? null
+        if (lastResolvedRef.current.slug === formSlug && lastResolvedRef.current.id === nextId) return
+        lastResolvedRef.current = { slug: formSlug, id: nextId }
+
         setFoundItem(match ?? null)
       } else {
+        if (lastResolvedRef.current.slug === formSlug && lastResolvedRef.current.id === null) return
+        lastResolvedRef.current = { slug: formSlug, id: null }
         setFoundItem(null)
       }
     } catch (err) {
@@ -41,5 +49,5 @@ export const useFindDynamiForm = () => {
     }
   }, [])
 
-  return { formInfo: foundItem, getFormById }
+  return useMemo(() => ({ formInfo: foundItem, getFormById }), [foundItem, getFormById])
 }

package/src/components/form/1-list/table.tsx

@@ -83,7 +83,15 @@ export default function FormDataListTableComponent({
       processOptions(layoutsConfigs.dataListConfig.columns).then((optionValues) => {
         setTableColumns((curr) =>
           curr.map((col) => {
-            if ('optionFieldPath' in col) return { ...col, render: (optionKey) => optionValues[optionKey] ?? '-' }
+            if ('optionFieldPath' in col)
+              return {
+                ...col,
+                render: (optionKey) => {
+                  if (Array.isArray(optionKey)) return optionKey.map((k) => optionValues[k]).join(', ') ?? '-'
+
+                  return optionValues[optionKey] ?? '-'
+                },
+              }
             return col
           }),
         )

package/src/components/form/2-details/index.tsx

@@ -1,5 +1,5 @@
 import { Form, Spin } from 'antd'
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react'
 import { IDndLayoutStructure_Responsive, IFormDataDetailsFetchConfig } from '../../../types'
 import { LayoutRendererRow } from '../layout-renderer/1-row'
 import FormDataListSkeleton_Details from '../../common/loading-skeletons/details'
@@ -49,13 +49,15 @@ import {
   queryParamsToObject,
 } from '../../../functions/forms'
 
-export default function FormDataDetailsComponent(props: IFormDataDetailsComponent) {
+const FormDataDetailsComponent = memo(function FormDataDetailsComponent(props: IFormDataDetailsComponent) {
   return (
     <BlurEventBusProvider>
       <FormDataDetailsComponentChild {...props} />
     </BlurEventBusProvider>
   )
-}
+})
+
+export default FormDataDetailsComponent
 
 function FormDataDetailsComponentChild({
   isPublic,
@@ -441,3 +443,4 @@ interface IDataDetailsPrivateProps {
   formId: number
   formKey?: string
 }
+

package/src/components/form/layout-renderer/3-element/11-breadcrumb/index.tsx

@@ -1,127 +1,132 @@
-import { IBreadcrumb, useBreadcrumb } from '../../../../common/custom-hooks/use-breadcrumb.hook'
-import { Button_FillerPortal } from '../../../../common/button'
-import { useNavigate } from 'react-router-dom'
-import { FaChevronLeft, FaChevronRight } from 'react-icons/fa6'
-import React, { memo, useMemo, useSyncExternalStore } from 'react'
-import { ELEMENTS_DEFAULT_CLASS } from '../../../../../constants'
-import { IElementBaseProps } from '../'
-import useGetCurrentBreakpoint from '../../../../common/custom-hooks/use-window-width.hook'
-import { Select } from 'antd'
-import { CountryEnum, DeviceBreakpointEnum, PageViewTypEnum } from '../../../../../enums'
-import { useConfigContext } from '../../../../companies/context'
-import { buildBreadcrumbTranslationKey } from '../../../../../functions'
-import { translationStore } from '../../../../common/custom-hooks/use-translation.hook/store'
-
-import './index.scss'
-
-function LayoutRenderer_Breadcrumb(_: { formId?: number } & IElementBaseProps) {
-  const currentBreakpoint = useGetCurrentBreakpoint()
-  const navigate = useNavigate()
-  const { breadcrumbs, sliceCrumbAt } = useBreadcrumb()
-  const { config } = useConfigContext()
-  const { selectedLanguage } = useSyncExternalStore(
-    translationStore.subscribe.bind(translationStore),
-    translationStore.getSnapshot.bind(translationStore),
-  )
-
-  const translations = config?.translations
-  const fallbackTexts = { Detail: 'detail', List: 'list', New: 'New' }
-  const getTranslation = useMemo(
-    () => (key: string) => (selectedLanguage ? translations?.[key]?.[selectedLanguage as CountryEnum] ?? '' : ''),
-    [selectedLanguage, translations],
-  )
-  const getFormName = useMemo(
-    () =>
-      (bc: IBreadcrumb) =>
-        bc.formId
-          ? getTranslation(buildBreadcrumbTranslationKey(bc.formId, 'Name')) || bc.formName?.split(' ')?.[0] || bc.label
-          : bc.label,
-    [getTranslation],
-  )
-  const getBreadcrumbText = useMemo(
-    () =>
-      (bc: IBreadcrumb, field: 'Detail' | 'List' | 'New') => {
-        const formText = bc.formId ? getTranslation(buildBreadcrumbTranslationKey(bc.formId, field)) : ''
-        const defaultText = getTranslation(buildBreadcrumbTranslationKey('Default', field))
-        return formText || defaultText || fallbackTexts[field]
-      },
-    [getTranslation],
-  )
-
-  const showAsSelect = useMemo(
-    () =>
-      ([DeviceBreakpointEnum.Mobile, DeviceBreakpointEnum.TabletPortrait].includes(currentBreakpoint) &&
-        breadcrumbs.length > 1) ||
-      breadcrumbs.length > 3,
-    [currentBreakpoint, breadcrumbs],
-  )
-
-  if (showAsSelect)
-    return (
-      <Select
-        suffixIcon={null}
-        value={breadcrumbs[breadcrumbs.length - 1].href}
-        optionFilterProp="label"
-        allowClear={false}
-        className={`${ELEMENTS_DEFAULT_CLASS.Breadcrumb} responsive max-w-[250px]`}
-        onChange={(bc) => {
-          const decodedUri = decodeURIComponent(bc)
-          const bcIdx = breadcrumbs.findIndex((bc) => bc.href === decodedUri)
-
-          sliceCrumbAt(bcIdx)
-          navigate(decodedUri)
-        }}
-        options={breadcrumbs.map((bc) => ({
-          value: bc.href,
-          label: (
-            <div className="flex gap-2 items-center">
-              <FaChevronLeft className="text-primary" size={10} />
-              {renderText(bc, getFormName, getBreadcrumbText)}
-            </div>
-          ),
-        }))}
-      />
-    )
-
-  return (
-    <div className={`${ELEMENTS_DEFAULT_CLASS.Breadcrumb} flex items-center text-12`}>
-      {breadcrumbs.map((bc, bcIdx) => (
-        <React.Fragment key={bcIdx}>
-          <Button_FillerPortal
-            link
-            disabled={breadcrumbs.length - 1 === bcIdx}
-            onClick={() => {
-              sliceCrumbAt(bcIdx)
-              navigate(bc.href)
-            }}
-          >
-            {renderText(bc, getFormName, getBreadcrumbText)}
-          </Button_FillerPortal>
-          {breadcrumbs.length - 1 !== bcIdx && <FaChevronRight className="text-primary" />}
-        </React.Fragment>
-      ))}
-    </div>
-  )
+import { IBreadcrumb, useBreadcrumb } from '../../../../common/custom-hooks/use-breadcrumb.hook'
+import { Button_FillerPortal } from '../../../../common/button'
+import { useNavigate } from 'react-router-dom'
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa6'
+import React, { memo, useMemo, useSyncExternalStore } from 'react'
+import { ELEMENTS_DEFAULT_CLASS } from '../../../../../constants'
+import { IElementBaseProps } from '../'
+import useGetCurrentBreakpoint from '../../../../common/custom-hooks/use-window-width.hook'
+import { Select } from 'antd'
+import { CountryEnum, DeviceBreakpointEnum, PageViewTypEnum } from '../../../../../enums'
+import { useConfigContext } from '../../../../companies/context'
+import { buildBreadcrumbTranslationKey } from '../../../../../functions'
+import { translationStore } from '../../../../common/custom-hooks/use-translation.hook/store'
+
+import './index.scss'
+
+function LayoutRenderer_Breadcrumb(_: { formId?: number } & IElementBaseProps) {
+  const currentBreakpoint = useGetCurrentBreakpoint()
+  const navigate = useNavigate()
+  const { breadcrumbs, sliceCrumbAt } = useBreadcrumb()
+  const { config } = useConfigContext()
+  const { selectedLanguage } = useSyncExternalStore(
+    translationStore.subscribe.bind(translationStore),
+    translationStore.getSnapshot.bind(translationStore),
+  )
+
+  const translations = config?.translations
+  const fallbackTexts = { Detail: 'detail', List: 'list', New: 'New' }
+  const getTranslation = useMemo(
+    () => (key: string) => (selectedLanguage ? translations?.[key]?.[selectedLanguage as CountryEnum] ?? '' : ''),
+    [selectedLanguage, translations],
+  )
+  const getFormName = useMemo(
+    () =>
+      (bc: IBreadcrumb, field: 'Detail' | 'List' | 'New') =>
+        bc.formId
+          ? getTranslation(buildBreadcrumbTranslationKey(bc.formId, field)) || bc.formName?.split(' ')?.[0] || bc.label
+          : bc.label,
+    [getTranslation],
+  )
+  const getBreadcrumbText = useMemo(
+    () =>
+      (field: 'Detail' | 'List' | 'New') => {
+        const defaultText = getTranslation(buildBreadcrumbTranslationKey('Default', field))
+        return defaultText || fallbackTexts[field]
+      },
+    [getTranslation],
+  )
+
+  const showAsSelect = useMemo(
+    () =>
+      ([DeviceBreakpointEnum.Mobile, DeviceBreakpointEnum.TabletPortrait].includes(currentBreakpoint) &&
+        breadcrumbs.length > 1) ||
+      breadcrumbs.length > 3,
+    [currentBreakpoint, breadcrumbs],
+  )
+
+  if (showAsSelect)
+    return (
+      <Select
+        suffixIcon={null}
+        value={breadcrumbs[breadcrumbs.length - 1].href}
+        optionFilterProp="label"
+        allowClear={false}
+        className={`${ELEMENTS_DEFAULT_CLASS.Breadcrumb} responsive max-w-[250px]`}
+        onChange={(bc) => {
+          const decodedUri = decodeURIComponent(bc)
+          const bcIdx = breadcrumbs.findIndex((bc) => bc.href === decodedUri)
+
+          sliceCrumbAt(bcIdx)
+          navigate(decodedUri)
+        }}
+        options={breadcrumbs.map((bc) => ({
+          value: bc.href,
+          label: (
+            <div className="flex gap-2 items-center">
+              <FaChevronLeft className="text-primary" size={10} />
+              {renderText(bc, getFormName, getBreadcrumbText)}
+            </div>
+          ),
+        }))}
+      />
+    )
+
+  return (
+    <div className={`${ELEMENTS_DEFAULT_CLASS.Breadcrumb} flex items-center text-12`}>
+      {breadcrumbs.map((bc, bcIdx) => (
+        <React.Fragment key={bcIdx}>
+          <Button_FillerPortal
+            link
+            disabled={breadcrumbs.length - 1 === bcIdx}
+            onClick={() => {
+              sliceCrumbAt(bcIdx)
+              navigate(bc.href)
+            }}
+          >
+            {renderText(bc, getFormName, getBreadcrumbText)}
+          </Button_FillerPortal>
+          {breadcrumbs.length - 1 !== bcIdx && <FaChevronRight className="text-primary" />}
+        </React.Fragment>
+      ))}
+    </div>
+  )
+}
+
+export default memo(LayoutRenderer_Breadcrumb)
+
+const renderText = (
+  bc: IBreadcrumb,
+  getFormName: (bc: IBreadcrumb, field: 'Detail' | 'List' | 'New') => string,
+  getBreadcrumbText: (field: 'Detail' | 'List' | 'New') => string,
+) => {
+  const label =
+    bc.type === PageViewTypEnum.Details
+      ? getFormName(bc, 'Detail')
+      : bc.type === PageViewTypEnum.List
+        ? getFormName(bc, 'List')
+        : bc.type === PageViewTypEnum.New
+          ? getFormName(bc, 'New')
+          : bc.label
+  const detailText = getBreadcrumbText('Detail')
+  const listText = getBreadcrumbText('List')
+  const newText = getBreadcrumbText('New')
+
+  return (
+    <span className="font-normal italic">
+      {bc.type === PageViewTypEnum.New ? `${newText} ` : ''}
+      {label}
+      {bc.type === PageViewTypEnum.Details ? ` ${detailText}` : bc.type === PageViewTypEnum.List ? ` ${listText}` : ''}
+    </span>
+  )
 }
-
-export default memo(LayoutRenderer_Breadcrumb)
-
-const renderText = (
-  bc: IBreadcrumb,
-  getFormName: (bc: IBreadcrumb) => string,
-  getBreadcrumbText: (bc: IBreadcrumb, field: 'Detail' | 'List' | 'New') => string,
-) => {
-  const label = getFormName(bc)
-  const detailText = getBreadcrumbText(bc, 'Detail')
-  const listText = getBreadcrumbText(bc, 'List')
-  const newText = getBreadcrumbText(bc, 'New')
-
-  return (
-    <span className="font-normal italic">
-      {bc.type === PageViewTypEnum.New ? `${newText} ` : ''}
-      {label}
-      {bc.type === PageViewTypEnum.Details ? ` ${detailText}` : bc.type === PageViewTypEnum.List ? ` ${listText}` : ''}
-    </span>
-  )
-}
-

package/src/components/form/layout-renderer/3-element/3-read-field-data.tsx

@@ -2,8 +2,14 @@ import { Form } from 'antd'
 import { renderData, resolveConditionalText } from '../../../../functions/forms'
 import { useFormPreservedItemValues } from '../../../common/custom-hooks/use-preserved-form-items.hook'
 import { memo, useMemo } from 'react'
-import { DataRenderTypeEnum, ReadFieldDataValueTypeEnum, TranslationTextTypeEnum } from '../../../../enums'
-import { IReadFieldDataElementProps } from '../../../../types'
+import {
+  DataRenderTypeEnum,
+  LOCAL_STORAGE_KEYS_ENUM,
+  ReadFieldDataValueTypeEnum,
+  TranslationTextTypeEnum,
+  UserFormPlaceholders,
+} from '../../../../enums'
+import { IReadFieldDataElementProps, ISystemRole } from '../../../../types'
 import { IFormContext } from '../1-row'
 import { evaluateValue } from '../../../../functions/forms/evaluate-value'
 import { ELEMENTS_DEFAULT_CLASS } from '../../../../constants'
@@ -59,6 +65,27 @@ function LayoutRenderer_ReadFieldData({
     [elementKey, textConditions, t, formValues, formContext.formDataId, currentBreakpoint],
   )
 
+  const roles = useMemo(() => {
+    if (
+      elementProps.valueType !== ReadFieldDataValueTypeEnum.Evaluated &&
+      elementProps.field === UserFormPlaceholders.LoginUserFieldKey_Roles &&
+      Array.isArray(fieldValue)
+    ) {
+      const storageRoles: ISystemRole[] = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.UserRoles)
+        ? (JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.UserRoles) as string) ?? [])
+        : []
+
+      return fieldValue
+        .map((selectedR) => {
+          const rInfo = storageRoles.find((r) => r.id === selectedR)?.name
+          return rInfo
+        })
+        .filter(Boolean)
+        .join(', ')
+    }
+    return null
+  }, [elementProps])
+
   return (
     <div className={`${ELEMENTS_DEFAULT_CLASS.ReadFieldData} flex items-center gap-2`}>
       {label && <span>{label}: </span>}
@@ -67,10 +94,12 @@ function LayoutRenderer_ReadFieldData({
           elementProps.renderConfig?.type === DataRenderTypeEnum.Image
             ? attachmentUrl
             : elementProps.renderConfig?.type === DataRenderTypeEnum.Conditional
-            ? formValues
-            : elementProps.valueType === ReadFieldDataValueTypeEnum.Evaluated
-            ? evaluatedValue
-            : fieldValue,
+              ? formValues
+              : elementProps.valueType === ReadFieldDataValueTypeEnum.Evaluated
+                ? evaluatedValue
+                : roles
+                  ? roles
+                  : fieldValue,
           elementProps.renderConfig ?? { type: DataRenderTypeEnum.Default },
         ) ?? 'N/A'}
       </span>
@@ -85,4 +114,3 @@ type ILayoutRenderer_ReadFieldData = {
   elementProps: IReadFieldDataElementProps
   style?: { [key: string]: any }
 } & IElementBaseProps
-

package/src/enums/form.enum.ts

@@ -80,6 +80,7 @@ export enum FieldElementOptionSourceEnum {
   Static = 'Static',
   DynamicForm = 'DynamicForm',
   ReadFromDetails = 'ReadFromDetails', // used in data list header
+  Roles = 'Roles',
 }
 export enum FormDataListViewTypeEnum {
   Table = 'Table',
@@ -207,7 +208,8 @@ export enum PatternPlacholdersEnum {
   CyrillicLowercase = 'c',
   Digit = 'D',
 }
-export enum TemplateDataReplacementFieldTypesEnum { // used for /api/template/{key}/{blobName}
+export enum TemplateDataReplacementFieldTypesEnum {
+  // used for /api/template/{key}/{blobName}
   Text = 1,
   Html,
   Image,

package/src/functions/forms/data-render-functions.tsx

@@ -70,8 +70,8 @@ export const renderTableColumns = (
                 colRaw.align === AlignTypeEnum.Center
                   ? 'justify-center'
                   : colRaw.align === AlignTypeEnum.Right
-                  ? 'justify-end'
-                  : ''
+                    ? 'justify-end'
+                    : ''
               }`}
               onClick={(e) => e.stopPropagation()}
             >
@@ -144,6 +144,7 @@ export const renderData = (data?: any, renderConfig?: IDataRenderConfig): ReactN
     case DataRenderTypeEnum.Conditional:
       return renderConditionalData(data, renderConfig)
     case DataRenderTypeEnum.Default:
+      return data
     case DataRenderTypeEnum.Buttons:
     default:
       return data

package/src/functions/forms/get-data-list-option-value.ts

@@ -1,6 +1,6 @@
 import { fetchFormDataAsLookup } from '.'
-import { FieldElementOptionSourceEnum, TranslationTextTypeEnum } from '../../enums'
-import { IFormDataListColumn } from '../../types'
+import { FieldElementOptionSourceEnum, LOCAL_STORAGE_KEYS_ENUM, TranslationTextTypeEnum } from '../../enums'
+import { IFormDataListColumn, ISystemRole } from '../../types'
 import client from '../../api/client'
 import { REACT_QUERY_CLIENT } from '../../constants'
 import { translationStore } from '../../components/common/custom-hooks/use-translation.hook/store'
@@ -27,7 +27,8 @@ export async function processOptions(options: IFormDataListColumn[]): Promise<{
   groupedRequests.forEach((paths, formId) => {
     const cachedConfig = REACT_QUERY_CLIENT.getQueryData(['layoutConfig', String(formId)])
 
-    if (cachedConfig) apiCallPromises.push(Promise.resolve({ _id: formId, Data: extractByDotPaths(paths, cachedConfig) }))
+    if (cachedConfig)
+      apiCallPromises.push(Promise.resolve({ _id: formId, Data: extractByDotPaths(paths, cachedConfig) }))
     else
       apiCallPromises.push(
         client.post(`/api/form/${formId}`, { project: JSON.stringify(paths) }).then((res) => res.data),
@@ -74,6 +75,14 @@ export async function processOptions(options: IFormDataListColumn[]): Promise<{
             })
           }),
         )
+      } else if (optionSource.type === FieldElementOptionSourceEnum.Roles) {
+        const storageRoles: ISystemRole[] = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.UserRoles)
+          ? (JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.UserRoles) as string) ?? [])
+          : []
+
+        storageRoles.forEach((r) => {
+          finalResult[r.id as string] = r.name
+        })
       }
     })
   })

package/src/functions/forms/index.ts

@@ -58,10 +58,10 @@ export const extractFiltersFromLayout = (elements: { [key: string]: IDndLayoutEl
         bsonDataType: el.key.includes(BSON_DATA_IDENTIFIER_PREFIXES.ObjectId)
           ? BSON_DATA_IDENTIFIER_PREFIXES.ObjectId
           : el.key.includes(BSON_DATA_IDENTIFIER_PREFIXES.Number)
-          ? BSON_DATA_IDENTIFIER_PREFIXES.Number
-          : el.key.includes(BSON_DATA_IDENTIFIER_PREFIXES.Date)
-          ? BSON_DATA_IDENTIFIER_PREFIXES.Date
-          : undefined,
+            ? BSON_DATA_IDENTIFIER_PREFIXES.Number
+            : el.key.includes(BSON_DATA_IDENTIFIER_PREFIXES.Date)
+              ? BSON_DATA_IDENTIFIER_PREFIXES.Date
+              : undefined,
       }
     }
   })
@@ -153,11 +153,14 @@ export const queryParamsToObject = (query: string): Record<string, string | unde
   return query
     .replace(/^\?/, '') // Remove leading "?" if present
     .split('&')
-    .reduce((acc, param) => {
-      const [key, value] = param.split('=').map(decodeURIComponent) // Decode and split by "="
-      if (key) acc[key] = !['null', 'undefined'].includes(value) ? value : undefined // Add key-value to the object
-      return acc
-    }, {} as Record<string, string | undefined>)
+    .reduce(
+      (acc, param) => {
+        const [key, value] = param.split('=').map(decodeURIComponent) // Decode and split by "="
+        if (key) acc[key] = !['null', 'undefined'].includes(value) ? value : undefined // Add key-value to the object
+        return acc
+      },
+      {} as Record<string, string | undefined>,
+    )
 }
 
 /** ---------------------------------------------------------------------------------------------------------  */
@@ -284,6 +287,10 @@ export const replaceAndGetFileBlob = async (
         }
 
         if (rep.type === TemplateDataReplacementFieldTypesEnum.Image) {
+          const isEmpty = typeof repValue !== 'string' || repValue.length === 0
+          if (isEmpty)
+            return { placeholder: rep.placeholder, value: '-', type: TemplateDataReplacementFieldTypesEnum.Text }
+
           const imageRenderConfig = rep.renderConfig.type === DataRenderTypeEnum.Image ? rep.renderConfig : undefined
           const imageRenderOptions: { imageWidth?: number; imageHeight?: number } = {
             imageWidth: 624, // Page width minus margins