form-craft-package 1.11.2 → 1.11.4

package/package.json

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

package/src/components/common/custom-hooks/use-lazy-modal-opener.hook.ts

@@ -1,20 +1,12 @@
-import { useState, useTransition } from 'react'
+import { useState } from 'react'
 
 export const useLazyModalOpener = () => {
   const [isModalOpen, setIsModalOpen] = useState(false)
-  const [isPendingTransition, startTransition] = useTransition()
+  const isPendingTransition = false
 
-  const openModal = () => {
-    startTransition(() => {
-      setIsModalOpen(true)
-    })
-  }
+  const openModal = () => setIsModalOpen(true)
 
-  const closeModal = () => {
-    startTransition(() => {
-      setIsModalOpen(false)
-    })
-  }
+  const closeModal = () => setIsModalOpen(false)
 
   return { isModalOpen, isPendingTransition, openModal, closeModal }
 }

package/src/components/form/layout-renderer/3-element/18-gallery/delete.modal.tsx

@@ -0,0 +1,148 @@
+import client from '../../../../../api/client'
+import { resolveConditionalText } from '../../../../../functions'
+import { TranslationTextSubTypeEnum, TranslationTextTypeEnum } from '../../../../../enums'
+import { Button_FillerPortal } from '../../../../common/button'
+import { useTranslation } from '../../../../common/custom-hooks'
+import useGetCurrentBreakpoint from '../../../../common/custom-hooks/use-window-width.hook'
+import { IElementBaseProps } from '..'
+import { IFormContext } from '../../1-row'
+import { Checkbox, Form, Image, Modal } from 'antd'
+import { useCallback, useMemo, useState } from 'react'
+
+export default function GalleryDeleteModal({
+  isOpen,
+  formContext,
+  formItem,
+  elementKey,
+  textConditions,
+  blobNames,
+  imageUrls,
+  onClose,
+  onSuccess,
+}: {
+  isOpen: boolean
+  formContext: IFormContext
+  blobNames: string[]
+  imageUrls: string[]
+  onClose: () => void
+  onSuccess: (blobNames: string[]) => void
+} & IElementBaseProps) {
+  const { formRef, formDataId, formId } = formContext
+  const { t } = useTranslation(formId)
+  const currentBreakpoint = useGetCurrentBreakpoint()
+  const [selectedBlobNames, setSelectedBlobNames] = useState<string[]>([])
+  const [isDeleting, setIsDeleting] = useState(false)
+  const allValues = Form.useWatch([], { form: formRef, preserve: true })
+
+  const label = useMemo(
+    () =>
+      resolveConditionalText({
+        elementKey,
+        textConditions,
+        t,
+        fieldValues: (allValues ?? {}) as Record<string, any>,
+        formDataId,
+        currentBreakpoint,
+        type: TranslationTextTypeEnum.Label,
+      }),
+    [allValues, currentBreakpoint, elementKey, formDataId, t, textConditions],
+  )
+
+  const [title, discardText, deleteText] = useMemo(
+    () =>
+      t([
+        { key: elementKey, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.DeleteModalTitle },
+        { key: elementKey, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.DeleteModalDiscard },
+        { key: elementKey, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.DeleteModalDelete },
+      ]),
+    [elementKey, t],
+  )
+
+  const toggleBlobName = useCallback(
+    (blobName: string) =>
+      setSelectedBlobNames((prev) =>
+        prev.includes(blobName) ? prev.filter((selectedBlobName) => selectedBlobName !== blobName) : [...prev, blobName],
+      ),
+    [],
+  )
+
+  const closeModal = useCallback(() => {
+    setSelectedBlobNames([])
+    onClose()
+  }, [onClose])
+
+  const deletePictures = useCallback(async () => {
+    if (!formId || !formDataId || !selectedBlobNames.length) return
+
+    setIsDeleting(true)
+    try {
+      await Promise.all(selectedBlobNames.map((blobName) => client.delete(`/api/attachment/${blobName}`)))
+      const formDataRes = await client.get(`/api/formdata/${formId}/${formDataId}`)
+      const parsedData = JSON.parse(formDataRes.data.data)
+      const fieldPath = Array.isArray(formItem.path) ? formItem.path : [formItem.path]
+      const existingBlobNames = fieldPath.reduce((current: any, key) => current?.[key], parsedData)
+      const remainingBlobNames = (Array.isArray(existingBlobNames) ? existingBlobNames : []).filter(
+        (blobName) => !selectedBlobNames.includes(blobName),
+      )
+      let current = parsedData
+      fieldPath.slice(0, -1).forEach((key) => {
+        current = current[key]
+      })
+      current[fieldPath[fieldPath.length - 1]] = remainingBlobNames
+      const res = await client.put(`/api/formdata/${formId}/${formDataId}`, {
+        name: formDataRes.data.name,
+        version: formDataRes.data.version,
+        private: formDataRes.data.private,
+        data: JSON.stringify(parsedData),
+      })
+      if (res.status === 200) {
+        setSelectedBlobNames([])
+        onSuccess(remainingBlobNames)
+      }
+    } finally {
+      setIsDeleting(false)
+    }
+  }, [formDataId, formId, formItem.path, onSuccess, selectedBlobNames])
+
+  return (
+    <Modal
+      open={isOpen}
+      title={title || label || 'Delete pictures'}
+      onCancel={closeModal}
+      footer={
+        <div className="flex justify-between">
+          <Button_FillerPortal outline onClick={closeModal}>
+            {discardText || 'Discard'}
+          </Button_FillerPortal>
+          <Button_FillerPortal primary loading={isDeleting} onClick={deletePictures}>
+            {deleteText || 'Delete Selected'}
+          </Button_FillerPortal>
+        </div>
+      }
+      width={800}
+    >
+      <div className="grid grid-cols-4 gap-2">
+        {imageUrls.map((src, idx) => (
+          <button
+            key={src}
+            type="button"
+            className={`overflow-hidden rounded-md border bg-gray-200 p-2 aspect-square relative ${selectedBlobNames.includes(blobNames[idx]) ? 'border-primary' : 'border-gray-300'}`}
+            onClick={() => toggleBlobName(blobNames[idx])}
+          >
+            <span className="absolute top-2 right-2 z-[1]">
+              <Checkbox checked={selectedBlobNames.includes(blobNames[idx])} />
+            </span>
+            <Image
+              src={src}
+              alt={`gallery_delete_${idx}`}
+              preview={false}
+              className="w-full h-full"
+              style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+              wrapperStyle={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+            />
+          </button>
+        ))}
+      </div>
+    </Modal>
+  )
+}

package/src/components/form/layout-renderer/3-element/18-gallery/index.tsx

@@ -0,0 +1,264 @@
+import { Empty, Form, Image } from 'antd'
+import { memo, useMemo, useState } from 'react'
+import { FaPlus, FaTrashAlt } from 'react-icons/fa'
+import { FaUpload } from 'react-icons/fa6'
+import { isNewFormDataPage, mapToFormItemRules, resolveConditionalText } from '../../../../../functions'
+import { DeviceBreakpointEnum, FormElementConditionalKeyEnum, TranslationTextSubTypeEnum, TranslationTextTypeEnum } from '../../../../../enums'
+import { IGalleryElementProps, IValidationRule } from '../../../../../types'
+import { Button_FillerPortal } from '../../../../common/button'
+import { useTranslation } from '../../../../common/custom-hooks'
+import { isValidationsMet } from '../../../../common/custom-hooks/use-node-condition.hook/visibility-utils'
+import { useFormPreservedItemValues } from '../../../../common/custom-hooks/use-preserved-form-items.hook'
+import useGetCurrentBreakpoint from '../../../../common/custom-hooks/use-window-width.hook'
+import { IElementBaseProps } from '..'
+import { IFormContext } from '../../1-row'
+import GalleryDeleteModal from './delete.modal'
+import GalleryUploadModal from './upload.modal'
+import GalleryPreviewModal from './preview.modal'
+
+function LayoutRenderer_Gallery({
+  formContext,
+  formItem,
+  elementProps,
+  isDisabled,
+  elementKey,
+  textConditions,
+  validations,
+}: {
+  formContext: IFormContext
+  elementProps: IGalleryElementProps
+  validations?: IValidationRule[]
+} & IElementBaseProps) {
+  const { formRef, formDataId, companyKey, formId } = formContext
+  const { t } = useTranslation(formId)
+  const currentBreakpoint = useGetCurrentBreakpoint()
+  const { baseServerUrl } = useFormPreservedItemValues(formRef)
+  const [isUploadModalOpen, setIsUploadModalOpen] = useState(false)
+  const [isPreviewModalOpen, setIsPreviewModalOpen] = useState(false)
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
+  const allValues = Form.useWatch([], { form: formRef, preserve: true })
+  const savedBlobNames = ((Form.useWatch(formItem.path, { form: formRef, preserve: true }) as string[]) ??
+    []) as string[]
+  const label = useMemo(
+    () =>
+      resolveConditionalText({
+        elementKey,
+        textConditions,
+        t,
+        fieldValues: (allValues ?? {}) as Record<string, any>,
+        formDataId,
+        currentBreakpoint,
+        type: TranslationTextTypeEnum.Label,
+      }),
+    [allValues, currentBreakpoint, elementKey, formDataId, t, textConditions],
+  )
+
+  const placeholder = useMemo(
+    () =>
+      resolveConditionalText({
+        elementKey,
+        textConditions,
+        t,
+        fieldValues: (allValues ?? {}) as Record<string, any>,
+        formDataId,
+        currentBreakpoint,
+        type: TranslationTextTypeEnum.Placeholder,
+      }),
+    [allValues, currentBreakpoint, elementKey, formDataId, t, textConditions],
+  )
+  const [emptyDescription = 'No pictures uploaded'] = useMemo(
+    () =>
+      t([
+        { key: elementKey, type: TranslationTextTypeEnum.Description, subType: TranslationTextSubTypeEnum.EmptyState },
+      ]),
+    [elementKey, t],
+  )
+
+  const validationRules = useMemo(() => {
+    const baseRules = mapToFormItemRules(elementKey, validations ?? [], formId, {
+      fieldValues: (allValues ?? {}) as Record<string, any>,
+      formDataId,
+      currentBreakpoint,
+    })
+    const requiredRule = baseRules.find((rule: any) => 'required' in rule && rule.required)
+    if (!requiredRule) return baseRules
+
+    return [
+      ...baseRules.filter((rule: any) => !('required' in rule && rule.required)),
+      {
+        validator(_: unknown, value: unknown) {
+          return Array.isArray(value) && value.length > 0
+            ? Promise.resolve()
+            : Promise.reject(new Error(requiredRule.message as string))
+        },
+      },
+    ]
+  }, [allValues, currentBreakpoint, elementKey, formDataId, formId, validations])
+
+  const { imageCountPerRow, imageUrls, visibleImageUrls, overflowCount } = useMemo(() => {
+    const gridConfig = elementProps.grid?.[currentBreakpoint] ?? elementProps.grid?.[DeviceBreakpointEnum.Default]
+    const imageCountPerRow = gridConfig?.count ?? 8
+    const visibleLimit = gridConfig?.row ? imageCountPerRow * gridConfig.row : savedBlobNames.length
+    const hasOverflow = gridConfig?.row != null && savedBlobNames.length > visibleLimit
+    const visibleBlobNames = hasOverflow ? savedBlobNames.slice(0, Math.max(visibleLimit - 1, 0)) : savedBlobNames
+    return {
+      imageCountPerRow,
+      imageUrls: savedBlobNames.map((blobName) => `${baseServerUrl}/api/attachment/${companyKey}/${blobName}`),
+      visibleImageUrls: visibleBlobNames.map((blobName) => `${baseServerUrl}/api/attachment/${companyKey}/${blobName}`),
+      overflowCount: hasOverflow ? savedBlobNames.length - visibleBlobNames.length : 0,
+    }
+  }, [baseServerUrl, companyKey, currentBreakpoint, elementProps.grid, savedBlobNames])
+  const isUploadButtonHidden = !isValidationsMet(
+    FormElementConditionalKeyEnum.ShowIf,
+    (allValues ?? {}) as { [key: string]: any },
+    elementProps.uploadButtonConditions,
+    { currentBreakpoint, formDataId },
+  )
+  const isUploadButtonDisabled = !isValidationsMet(
+    FormElementConditionalKeyEnum.EnableIf,
+    (allValues ?? {}) as { [key: string]: any },
+    elementProps.uploadButtonConditions,
+    { currentBreakpoint, formDataId },
+  )
+  const isDeleteButtonHidden = !isValidationsMet(
+    FormElementConditionalKeyEnum.ShowIf,
+    (allValues ?? {}) as { [key: string]: any },
+    elementProps.deleteButtonConditions,
+    { currentBreakpoint, formDataId },
+  )
+  const isDeleteButtonDisabled = !isValidationsMet(
+    FormElementConditionalKeyEnum.EnableIf,
+    (allValues ?? {}) as { [key: string]: any },
+    elementProps.deleteButtonConditions,
+    { currentBreakpoint, formDataId },
+  )
+
+  return (
+    <>
+      <Form.Item
+        name={formItem.name}
+        label={
+          <div className="w-full flex items-center justify-between gap-2">
+            {!elementProps.hasNoLabel && label ? (
+              <span>
+                {label} ({imageUrls.length})
+              </span>
+            ) : (
+              <span />
+            )}
+            <div className="flex items-center">
+              {!isDeleteButtonHidden && (
+                <Button_FillerPortal
+                  link
+                  short
+                  disabled={isDisabled || isNewFormDataPage(formDataId) || isDeleteButtonDisabled}
+                  onClick={() => setIsDeleteModalOpen(true)}
+                  className="text-danger underline hover:text-danger"
+                >
+                  <FaTrashAlt />
+                  Delete
+                </Button_FillerPortal>
+              )}
+              {!isUploadButtonHidden && (
+                <Button_FillerPortal
+                  link
+                  short
+                  disabled={isDisabled || isNewFormDataPage(formDataId) || isUploadButtonDisabled}
+                  onClick={() => setIsUploadModalOpen(true)}
+                >
+                  <FaUpload />
+                  {placeholder || 'Upload pictures'}
+                </Button_FillerPortal>
+              )}
+            </div>
+          </div>
+        }
+        labelAlign="left"
+        rules={validationRules}
+      >
+        {imageUrls.length ? (
+          <Image.PreviewGroup items={imageUrls}>
+            <div
+              className="grid gap-2"
+              style={{ gridTemplateColumns: `repeat(${imageCountPerRow}, minmax(0px, 1fr))` }}
+            >
+              {visibleImageUrls.map((src, idx) => (
+                <div
+                  key={src}
+                  className="overflow-hidden rounded-lg border border-gray-300 aspect-square p-2 bg-gray-200"
+                >
+                  <Image
+                    src={src}
+                    alt={`${elementKey}_${idx}`}
+                    className="rounded-md object-contain flex items-center justify-center"
+                    style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+                    wrapperStyle={{
+                      width: '100%',
+                      height: '100%',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                  />
+                </div>
+              ))}
+              {overflowCount > 0 && (
+                <button
+                  type="button"
+                  className="overflow-hidden rounded-md border border-gray-300 aspect-square text-primary text-[24px] font-bold bg-gray-200 flex items-center justify-center gap-2 hover:bg-gray-300"
+                  onClick={() => setIsPreviewModalOpen(true)}
+                >
+                  <FaPlus size={18} />
+                  {overflowCount}
+                </button>
+              )}
+            </div>
+          </Image.PreviewGroup>
+        ) : (
+          <Empty description={emptyDescription || undefined} />
+        )}
+      </Form.Item>
+      <GalleryUploadModal
+        isOpen={isUploadModalOpen}
+        formContext={formContext}
+        formItem={formItem}
+        elementKey={elementKey}
+        textConditions={textConditions}
+        isDisabled={isDisabled}
+        onDiscardSuccess={() => setIsUploadModalOpen(false)}
+        onSaveSuccess={(uploadedBlobNames) => {
+          formRef?.setFieldValue(formItem.path, [
+            ...((Array.isArray(formRef?.getFieldValue(formItem.path))
+              ? formRef?.getFieldValue(formItem.path)
+              : []) as string[]),
+            ...uploadedBlobNames,
+          ])
+          setIsUploadModalOpen(false)
+        }}
+      />
+      <GalleryPreviewModal
+        title={label}
+        isOpen={isPreviewModalOpen}
+        imageUrls={imageUrls}
+        onClose={() => setIsPreviewModalOpen(false)}
+      />
+      <GalleryDeleteModal
+        isOpen={isDeleteModalOpen}
+        formContext={formContext}
+        formItem={formItem}
+        elementKey={elementKey}
+        textConditions={textConditions}
+        isDisabled={isDisabled}
+        blobNames={savedBlobNames}
+        imageUrls={imageUrls}
+        onClose={() => setIsDeleteModalOpen(false)}
+        onSuccess={(remainingBlobNames) => {
+          formRef?.setFieldValue(formItem.path, remainingBlobNames)
+          setIsDeleteModalOpen(false)
+        }}
+      />
+    </>
+  )
+}
+
+export default memo(LayoutRenderer_Gallery)

package/src/components/form/layout-renderer/3-element/18-gallery/preview.modal.tsx

@@ -0,0 +1,33 @@
+import { Image, Modal } from 'antd'
+
+export default function GalleryPreviewModal({
+  title,
+  isOpen,
+  imageUrls,
+  onClose,
+}: {
+  title?: string
+  isOpen: boolean
+  imageUrls: string[]
+  onClose: () => void
+}) {
+  return (
+    <Modal open={isOpen} onCancel={onClose} footer={null} title={title} width={800}>
+      <Image.PreviewGroup items={imageUrls}>
+        <div className="grid grid-cols-4 gap-2">
+          {imageUrls.map((src, idx) => (
+            <div key={src} className="overflow-hidden rounded-md border border-gray-300 bg-gray-200 p-2 aspect-square">
+              <Image
+                src={src}
+                alt={`gallery_${idx}`}
+                className="w-full h-full"
+                style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+                wrapperStyle={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+              />
+            </div>
+          ))}
+        </div>
+      </Image.PreviewGroup>
+    </Modal>
+  )
+}

package/src/components/form/layout-renderer/3-element/18-gallery/upload.modal.tsx

@@ -0,0 +1,185 @@
+import client from '../../../../../api/client'
+import { isNewFormDataPage, resolveConditionalText } from '../../../../../functions'
+import { saveFile } from '../../../../../functions/forms/form'
+import { TranslationTextSubTypeEnum, TranslationTextTypeEnum } from '../../../../../enums'
+import { RcFile, UploadFile, UploadProps } from 'antd/es/upload'
+import { Form, Modal, Spin, Upload } from 'antd'
+import { useCallback, useMemo, useState } from 'react'
+import { FaUpload } from 'react-icons/fa6'
+import { Button_FillerPortal } from '../../../../common/button'
+import { useNotification, useTranslation } from '../../../../common/custom-hooks'
+import useGetCurrentBreakpoint from '../../../../common/custom-hooks/use-window-width.hook'
+import { IElementBaseProps } from '..'
+import { IFormContext } from '../../1-row'
+
+export default function GalleryUploadModal({
+  isOpen,
+  formContext,
+  formItem,
+  elementKey,
+  textConditions,
+  onDiscardSuccess,
+  onSaveSuccess,
+}: {
+  isOpen: boolean
+  formContext: IFormContext
+  onDiscardSuccess: () => void
+  onSaveSuccess: (blobNames: string[]) => void
+} & IElementBaseProps) {
+  const { formRef, formDataId, companyKey, formId } = formContext
+  const { t } = useTranslation(formId)
+  const currentBreakpoint = useGetCurrentBreakpoint()
+  const { warningModal } = useNotification()
+
+  const [uploadedFiles, setUploadedFiles] = useState<UploadFile[]>([])
+  const [isUploadLoading, setIsUploadLoading] = useState(false)
+  const [isSaving, setIsSaving] = useState(false)
+  const [isDiscarding, setIsDiscarding] = useState(false)
+
+  const allValues = Form.useWatch([], { form: formRef, preserve: true })
+
+  const label = useMemo(
+    () =>
+      resolveConditionalText({
+        elementKey,
+        textConditions,
+        t,
+        fieldValues: (allValues ?? {}) as Record<string, any>,
+        formDataId,
+        currentBreakpoint,
+        type: TranslationTextTypeEnum.Label,
+      }),
+    [allValues, currentBreakpoint, elementKey, formDataId, t, textConditions],
+  )
+
+  const placeholder = useMemo(
+    () =>
+      resolveConditionalText({
+        elementKey,
+        textConditions,
+        t,
+        fieldValues: (allValues ?? {}) as Record<string, any>,
+        formDataId,
+        currentBreakpoint,
+        type: TranslationTextTypeEnum.Placeholder,
+      }),
+    [allValues, currentBreakpoint, elementKey, formDataId, t, textConditions],
+  )
+
+  const [title = label, text = placeholder, discardText, saveText] = useMemo(
+    () =>
+      t([
+        { key: elementKey, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.UploadModalTitle },
+        { key: elementKey, type: TranslationTextTypeEnum.Placeholder, subType: TranslationTextSubTypeEnum.Secondary },
+        { key: elementKey, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.Discard },
+        { key: elementKey, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.UploadSave },
+      ]),
+    [elementKey, label, placeholder, t],
+  )
+
+  const uploadedBlobNames = useMemo(
+    () =>
+      uploadedFiles
+        .map((file) =>
+          typeof file.response === 'object' && file.response ? (file.response as { blobName?: string }).blobName : '',
+        )
+        .filter((blobName): blobName is string => !!blobName),
+    [uploadedFiles],
+  )
+
+  const uploadProps: UploadProps = {
+    multiple: true,
+    accept: 'image/*',
+    onChange: ({ fileList }) => setUploadedFiles(fileList),
+    showUploadList: { showRemoveIcon: false },
+    beforeUpload: (file) => {
+      if (!file.type.startsWith('image/')) {
+        warningModal({ title: '', content: 'Invalid file type!', okText: 'Okay' })
+        return false
+      }
+      return true
+    },
+    customRequest: async ({ file, onSuccess, onError }) => {
+      setIsUploadLoading(true)
+      const blobName = await saveFile(file as RcFile, (file as RcFile).name, companyKey)
+      setIsUploadLoading(false)
+      if (blobName) onSuccess?.({ blobName }, file as RcFile)
+      else onError?.(new Error('Upload failed'))
+    },
+  }
+
+  const discardUploadedFiles = useCallback(async () => {
+    setIsDiscarding(true)
+    try {
+      await Promise.all(uploadedBlobNames.map((blobName) => client.delete(`/api/attachment/${blobName}`)))
+      onDiscardSuccess()
+    } finally {
+      setIsDiscarding(false)
+    }
+  }, [onDiscardSuccess, uploadedBlobNames])
+
+  const saveUploadedFiles = useCallback(async () => {
+    if (!formId || !formDataId || isNewFormDataPage(formDataId)) return
+
+    setIsSaving(true)
+    try {
+      const formDataRes = await client.get(`/api/formdata/${formId}/${formDataId}`)
+      const parsedData = JSON.parse(formDataRes.data.data)
+      const fieldPath = Array.isArray(formItem.path) ? formItem.path : [formItem.path]
+      const existingBlobNames = fieldPath.reduce((current: any, key) => current?.[key], parsedData)
+      let current = parsedData
+      fieldPath.slice(0, -1).forEach((key) => {
+        current = current[key]
+      })
+      current[fieldPath[fieldPath.length - 1]] = [
+        ...(Array.isArray(existingBlobNames) ? existingBlobNames : []),
+        ...uploadedBlobNames,
+      ]
+      const res = await client.put(`/api/formdata/${formId}/${formDataId}`, {
+        name: formDataRes.data.name,
+        version: formDataRes.data.version,
+        private: formDataRes.data.private,
+        data: JSON.stringify(parsedData),
+      })
+      if (res.status === 200) onSaveSuccess(uploadedBlobNames)
+    } finally {
+      setIsSaving(false)
+    }
+  }, [formDataId, formId, formItem.path, onSaveSuccess, uploadedBlobNames])
+
+  return (
+    <Modal
+      open={isOpen}
+      closable={false}
+      maskClosable={false}
+      onCancel={() => {}}
+      title={title || 'Upload pictures'}
+      footer={
+        <div className="flex justify-between">
+          <Button_FillerPortal outline disabled={isUploadLoading} loading={isDiscarding} onClick={discardUploadedFiles}>
+            {discardText || 'Discard & Close'}
+          </Button_FillerPortal>
+          <Button_FillerPortal
+            primary
+            disabled={isUploadLoading || isDiscarding}
+            loading={isSaving}
+            onClick={saveUploadedFiles}
+          >
+            {saveText || 'Save Pictures'}
+          </Button_FillerPortal>
+        </div>
+      }
+    >
+      <Spin spinning={isUploadLoading}>
+        <Upload.Dragger {...uploadProps} fileList={uploadedFiles}>
+          <div className="flex flex-col items-center">
+            <FaUpload size={24} className="text-primary" />
+            <span className="font-semibold mt-2 text-secondary">
+              {text || 'Click or drag image files to this area'}
+            </span>
+          </div>
+        </Upload.Dragger>
+      </Spin>
+    </Modal>
+  )
+}

package/src/components/form/layout-renderer/3-element/7-file-upload.tsx

@@ -1,20 +1,20 @@
 import { Form, Input, Spin, Upload } from 'antd'
 import { memo, useCallback, useMemo, useState } from 'react'
-import { Button_FillerPortal } from '../../../common/button'
-import client from '../../../../api/client'
-import { FaEye, FaFileCircleCheck, FaUpload } from 'react-icons/fa6'
-import { IFileUploadElementProps, IFileUploadElementRules } from '../../../../types'
-import { useNotification } from '../../../common/custom-hooks'
 import { FaTrashAlt } from 'react-icons/fa'
-import { saveFile } from '../../../../functions/forms/form'
-import { IElementBaseProps } from '.'
-import { IFormContext } from '../1-row'
+import { FaEye, FaFileCircleCheck, FaUpload } from 'react-icons/fa6'
+import client from '../../../../api/client'
 import { ELEMENTS_DEFAULT_CLASS } from '../../../../constants'
+import { resolveConditionalText } from '../../../../functions'
+import { saveFile } from '../../../../functions/forms/form'
 import { TranslationTextSubTypeEnum, TranslationTextTypeEnum } from '../../../../enums'
+import { IFileUploadElementProps, IFileUploadElementRules } from '../../../../types'
+import { Button_FillerPortal } from '../../../common/button'
+import { useNotification } from '../../../common/custom-hooks'
 import { useTranslation } from '../../../common/custom-hooks/use-translation.hook/hook'
 import { translationStore } from '../../../common/custom-hooks/use-translation.hook/store'
 import useGetCurrentBreakpoint from '../../../common/custom-hooks/use-window-width.hook'
-import { resolveConditionalText } from '../../../../functions'
+import { IElementBaseProps } from '.'
+import { IFormContext } from '../1-row'
 
 const { VITE_API_BASE_URL } = import.meta.env
 
@@ -260,4 +260,3 @@ const getUploadRuleErrorMsg = (
 
   return null
 }
-

package/src/components/form/layout-renderer/3-element/9-form-data-render.tsx

@@ -33,6 +33,7 @@ const layoutConfigCache = new Map<string, LayoutCacheEntry>()
 function LayoutRenderer_LoadFormData({ elementKey, formContext, elementProps }: ILayoutRenderer_LoadFormData) {
   const { formId, formRef, formDataId } = formContext
   const { joins, baseFormId, targetFormId, idMatch, m2mRelFormId, displayConfig, filter: initialFilter } = elementProps
+  const savedDisplayConfig = displayConfig?.config
   const defaultHeaderFilter = useMemo(() => {
     if (!initialFilter || initialFilter.type !== FilterConfigTypeEnum.Custom) return ''
     return JSON.stringify(initialFilter.config).replaceAll('@', '$')
@@ -67,7 +68,7 @@ function LayoutRenderer_LoadFormData({ elementKey, formContext, elementProps }:
   )
   const [loading, setLoading] = useState(() => !cachedDataEntry)
   const [checkingForUpdates, setCheckingForUpdates] = useState(false)
-  const { cachedConfig, isConfigLoading } = useCacheFormLayoutConfig(targetFormId)
+  const { cachedConfig, isConfigLoading } = useCacheFormLayoutConfig(savedDisplayConfig ? undefined : targetFormId)
   const [hasInitialData, setHasInitialData] = useState(() => Boolean(cachedDataEntry))
   const lastChildInfo = useRef<{ formName: string; parentFormJoins: IFormJoin[] }>({
     formName: '',
@@ -211,6 +212,10 @@ function LayoutRenderer_LoadFormData({ elementKey, formContext, elementProps }:
 
   useEffect(() => {
     if (!layoutCacheKey || !cachedLayoutEntry) return
+    if (savedDisplayConfig) {
+      setListLayoutConfig((curr) => curr ?? cachedLayoutEntry.layout)
+      return
+    }
     if (cachedLayoutPrimedRef.current) {
       triggerInitialFetch()
       return
@@ -222,7 +227,65 @@ function LayoutRenderer_LoadFormData({ elementKey, formContext, elementProps }:
     m2mForeignKeysRef.current = cachedLayoutEntry.m2m
     setListLayoutConfig((curr) => curr ?? cachedLayoutEntry.layout)
     triggerInitialFetch()
-  }, [cachedLayoutEntry, layoutCacheKey, triggerInitialFetch])
+  }, [cachedLayoutEntry, layoutCacheKey, savedDisplayConfig, triggerInitialFetch])
+
+  useEffect(() => {
+    if (!targetFormId || !displayConfig?.translations) return
+    translationStore.setTranslations(targetFormId, displayConfig.translations)
+  }, [displayConfig?.translations, targetFormId])
+
+  useEffect(() => {
+    if (isNewFormDataPage(formDataId) || !savedDisplayConfig || !targetFormId) return
+
+    lastChildInfo.current = { formName: displayConfig?.formName ?? '', parentFormJoins: joins }
+    formJoinsRef.current = mergeJoins([
+      ...savedDisplayConfig.columns.map((c) => c.joins || []),
+      ...Object.values(savedDisplayConfig.header.elements).reduce((c: IFormJoin[], el) => {
+        if (el.props && 'filter' in el.props && Array.isArray(el.props.filter?.joins)) {
+          return [...c, el.props.filter.joins]
+        }
+        return c
+      }, []),
+    ])
+    dataProjectRef.current = savedDisplayConfig.columns.reduce((curr, c) => {
+      if (!c.key) return curr
+
+      return { ...curr, [getProjectionKey(c.key)]: `$${c.key}` }
+    }, {})
+    m2mForeignKeysRef.current =
+      displayConfig?.m2mCurrentFormFK && displayConfig?.m2mOtherFormFK
+        ? { currentForm: displayConfig.m2mCurrentFormFK, otherForm: displayConfig.m2mOtherFormFK }
+        : undefined
+
+    const nextLayoutConfig = {
+      configForFormId: targetFormId,
+      dataListConfig: {
+        ...savedDisplayConfig,
+        columns: savedDisplayConfig.columns.map((c) => (c.key ? { ...c, key: getProjectionKey(c.key) } : c)),
+      },
+    }
+    setListLayoutConfig(nextLayoutConfig)
+    if (layoutCacheKey)
+      layoutConfigCache.set(layoutCacheKey, {
+        layout: nextLayoutConfig,
+        joins: formJoinsRef.current,
+        project: { ...dataProjectRef.current },
+        lastChildInfo: lastChildInfo.current,
+        m2m: m2mForeignKeysRef.current,
+      })
+    cachedLayoutPrimedRef.current = true
+    triggerInitialFetch()
+  }, [
+    displayConfig?.formName,
+    displayConfig?.m2mCurrentFormFK,
+    displayConfig?.m2mOtherFormFK,
+    formDataId,
+    joins,
+    layoutCacheKey,
+    savedDisplayConfig,
+    targetFormId,
+    triggerInitialFetch,
+  ])
 
   useEffect(() => {
     if (cachedConfig?.id && cachedConfig.translations)
@@ -230,7 +293,7 @@ function LayoutRenderer_LoadFormData({ elementKey, formContext, elementProps }:
   }, [cachedConfig])
 
   useEffect(() => {
-    if (isNewFormDataPage(formDataId) || !cachedConfig) return
+    if (savedDisplayConfig || isNewFormDataPage(formDataId) || !cachedConfig) return
 
     const { relationships = [] } = cachedConfig
 
@@ -293,10 +356,10 @@ function LayoutRenderer_LoadFormData({ elementKey, formContext, elementProps }:
     cachedConfig,
     displayConfig?.id,
     formDataId,
-    triggerInitialFetch,
-    baseFormId,
-    targetFormId,
     layoutCacheKey,
+    savedDisplayConfig,
+    targetFormId,
+    triggerInitialFetch,
   ])
 
   useEffect(

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

@@ -60,6 +60,7 @@ const LayoutRenderer_AutoComplete = lazy(() => import('./14-auto-complete'))
 const LayoutRenderer_FormSubmissionPdf = lazy(() => import('./15-form-submission-pdf'))
 const LayoutRenderer_UserRoles = lazy(() => import('./16-user-role'))
 const LayoutRenderer_CustomComponent = lazy(() => import('./17-custom-component'))
+const LayoutRenderer_Gallery = lazy(() => import('./18-gallery'))
 
 type ILayoutRendererElement = {
   basePath: (string | number)[]
@@ -306,6 +307,18 @@ function LayoutRendererElement({
       )
     },
 
+    [ElementTypeEnum.Gallery]: () => {
+      if (!key) return <span className="text-warning">Gallery field could not render due to missing KEY!</span>
+      return (
+        <LayoutRenderer_Gallery
+          elementProps={props}
+          formContext={formContext}
+          validations={validationsAfterIsHidden}
+          {...elementBaseProps}
+        />
+      )
+    },
+
     [ElementTypeEnum.ReadFieldData]: () => {
       let style = (elementData as IReadFieldDataElement).style?.[currentBreakpoint]
       if (!style) style = (elementData as IReadFieldDataElement).style?.[DeviceBreakpointEnum.Default]

package/src/enums/index.ts

@@ -17,6 +17,7 @@ export enum ElementTypeEnum {
   RangePicker = 'RangePicker',
   TimePicker = 'TimePicker',
   FileUpload = 'FileUpload',
+  Gallery = 'Gallery',
   Switch = 'Switch',
   Container = 'Container',
   Placeholder = 'Placeholder',
@@ -134,7 +135,13 @@ export enum TranslationTextSubTypeEnum {
   RepeatButtonAdd = 'RepeatAdd',
   RepeatButtonRemove = 'RepeatRemove',
   Secondary = '2',
+  EmptyState = 'EmptyState',
+  DeleteModalTitle = 'DeleteModalTitle',
+  DeleteModalDiscard = 'DeleteModalDiscard',
+  DeleteModalDelete = 'DeleteModalDelete',
   UploadFileType = 'FileType',
+  UploadModalTitle = 'UploadModalTitle',
+  UploadSave = 'UploadSave',
   UploadSizeLimit = 'SizeLimit',
   ConfirmationTitle = 'ConfTitle',
   ConfirmationMsg = 'ConfMsg',

package/src/types/forms/layout-elements/index.ts

@@ -22,12 +22,15 @@ import {
   IDataFetchConfig,
   IEvaluationConfig,
   IFilterConfig,
+  IFormDataListConfig,
+  IFormTranslations,
   IReadFieldDataElementProps,
   IReportTableElementProps,
 } from '..'
 import {
   AlignTypeEnum,
   CountryEnum,
+  DeviceBreakpointEnum,
   ElementTypeEnum,
   FileTypeEnum,
   DndLayoutAddableNodeEnum,
@@ -179,6 +182,23 @@ export interface IFileUploadElementRules {
 
 /** -------------------------------------------------------------------------------------------- */
 
+export interface IGalleryElement extends BaseFormLayoutElement {
+  elementType: ElementTypeEnum.Gallery
+  props: IGalleryElementProps
+}
+export interface IGalleryElementProps {
+  hasNoLabel?: boolean
+  grid?: Partial<Record<DeviceBreakpointEnum, IGalleryElementGridConfig | null>>
+  uploadButtonConditions?: IFormLayoutElementConditions
+  deleteButtonConditions?: IFormLayoutElementConditions
+}
+export interface IGalleryElementGridConfig {
+  count?: number | null
+  row?: number | null
+}
+
+/** -------------------------------------------------------------------------------------------- */
+
 export interface IBooleanElement extends BaseFormLayoutElement {
   elementType: ElementTypeEnum.Switch | ElementTypeEnum.Checkbox
   props: {
@@ -284,9 +304,14 @@ export interface IFormDataLoadElementProps extends IDataFetchConfig {
   filter?: IFilterConfig
   pageBreak?: ReportPageBreakEnum // used for report
 }
-interface IFormDataLoadDisplayConfig {
+export interface IFormDataLoadDisplayConfig {
   id: string
   name: string
+  config?: IFormDataListConfig
+  formName?: string
+  translations?: IFormTranslations
+  m2mCurrentFormFK?: string
+  m2mOtherFormFK?: string
 }
 
 /** -------------------------------------------------------------------------------------------- */

package/src/types/index.ts

@@ -12,6 +12,7 @@ import {
   IFormDataLoadElement,
   IFormDndLayoutRowHeader,
   IFormSubmissionPdfElement,
+  IGalleryElement,
   IGridContainerConfig,
   IImageElement,
   IInputElement,
@@ -77,6 +78,7 @@ export type IDndLayoutElement =
   | IReadFieldDataElement
   | IBooleanElement
   | IFileUploadElement
+  | IGalleryElement
   | IButtonElement
   | ISignatureElement
   | ITextElement