Grid Widget güncellemesi

2025-09-12 14:26:35 +03:00 · 2025-09-12 14:26:35 +03:00 · 928894e5c5
commit 928894e5c5
parent b94719b925
14 changed files with 2100 additions and 1995 deletions
--- a/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/WidgetEditDto.cs
+++ b/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/WidgetEditDto.cs
@ -10,7 +10,7 @@ public class WidgetEditDto
    public string ValueClassName { get; set; } = "text-3xl";
    public string Color { get; set; }
    public string Icon { get; set; }
-    public string Subtitle { get; set; }
+    public string SubTitle { get; set; }
    public string OnClick { get; set; }
    public string ClassName { get; set; }
 }
--- a/api/src/Kurs.Platform.Application.Contracts/ListForms/Select/WidgetDto.cs
+++ b/api/src/Kurs.Platform.Application.Contracts/ListForms/Select/WidgetDto.cs
@ -4,6 +4,7 @@ public class WidgetDto
 {
    public int ColGap { get; set; }
    public int ColSpan { get; set; }
+    public string ClassName { get; set; }
    public List<WidgetItemDto> Items { get; set; }
 }

@ -14,7 +15,6 @@ public class WidgetItemDto
    public string ValueClassName { get; set; } = "text-3xl";
    public string Color { get; set; }
    public string Icon { get; set; }
-    public string Subtitle { get; set; }
+    public string SubTitle { get; set; }
    public string OnClick { get; set; }
-    public string ClassName { get; set; }
 }
--- a/api/src/Kurs.Platform.Application/ListForms/ListFormSelectAppService.cs
+++ b/api/src/Kurs.Platform.Application/ListForms/ListFormSelectAppService.cs
@ -228,6 +228,7 @@ public class ListFormSelectAppService : PlatformAppService, IListFormSelectAppSe
                    {
                        ColGap = widget.ColGap,
                        ColSpan = widget.ColSpan,
+                        ClassName = widget.ClassName,
                        Items = []
                    };

@ -244,9 +245,8 @@ public class ListFormSelectAppService : PlatformAppService, IListFormSelectAppSe
                                    Value = dynamicItem.ContainsKey(widget.Value) ? dynamicItem[widget.Value]?.ToString() : string.Empty,
                                    Color = dynamicItem.ContainsKey(widget.Color) ? dynamicItem[widget.Color]?.ToString() : string.Empty,
                                    Icon = dynamicItem.ContainsKey(widget.Icon) ? dynamicItem[widget.Icon]?.ToString() : string.Empty,
-                                    Subtitle = dynamicItem.ContainsKey(widget.Subtitle) ? dynamicItem[widget.Subtitle]?.ToString() : string.Empty,
+                                    SubTitle = dynamicItem.ContainsKey(widget.SubTitle) ? dynamicItem[widget.SubTitle]?.ToString() : string.Empty,
                                    OnClick = dynamicItem.ContainsKey(widget.OnClick) ? dynamicItem[widget.OnClick]?.ToString() : string.Empty,
-                                    ClassName = dynamicItem.ContainsKey(widget.ClassName) ? dynamicItem[widget.ClassName]?.ToString() : string.Empty,
                                });
                            }
                        }
--- a/api/src/Kurs.Platform.Domain/Queries/Widget.cs
+++ b/api/src/Kurs.Platform.Domain/Queries/Widget.cs
@ -13,7 +13,7 @@ public class Widget : ValueObject
    public string ValueClassName { get; set; } = "text-3xl";
    public string Color { get; set; }
    public string Icon { get; set; }
-    public string Subtitle { get; set; }
+    public string SubTitle { get; set; }
    public string OnClick { get; set; }
    public string ClassName { get; set; }

@ -27,7 +27,7 @@ public class Widget : ValueObject
        yield return ValueClassName;
        yield return Color;
        yield return Icon;
-        yield return Subtitle;
+        yield return SubTitle;
        yield return OnClick;
        yield return ClassName;
    }
--- a/ui/dev-dist/sw.js
+++ b/ui/dev-dist/sw.js
@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
    "revision": "3ca0b8505b4bec776b69afdba2768812"
  }, {
    "url": "index.html",
-    "revision": "0.buc1mitnpmo"
+    "revision": "0.h9qpsacvko"
  }], {});
  workbox.cleanupOutdatedCaches();
  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
--- a/ui/src/components/ui/Widget/Widget.tsx
+++ b/ui/src/components/ui/Widget/Widget.tsx
@ -18,9 +18,9 @@ interface WidgetProps {
  title: string
  value: string | number
  valueClassName?: string
-  color: colorType
-  icon: (typeof iconList)[number]
-  subtitle?: string
+  color?: colorType
+  icon?: (typeof iconList)[number]
+  subTitle?: string
  onClick?: () => void
  className?: string
 }
@ -29,9 +29,9 @@ export default function Widget({
  title,
  value,
  valueClassName = 'text-3xl',
-  color,
-  icon,
-  subtitle,
+  color = 'blue',
+  icon = 'FaChartBar',
+  subTitle = '-',
  onClick,
  className,
 }: WidgetProps) {
@ -42,7 +42,7 @@ export default function Widget({
  useEffect(() => {
    let isMounted = true
    import('react-icons/fa').then((icons) => {
-      if (isMounted && icon in icons) {
+      if (isMounted && icon && icon in icons) {
        setIconComponent(() => (icons as any)[icon])
      }
    })
@ -64,6 +64,8 @@ export default function Widget({
    orange: { bg: 'from-orange-100 to-orange-200', text: 'text-orange-600' },
  }

+  const safeColor = color && colorMap[color] ? color : 'green'
+
  return (
    <div
      onClick={onClick}
@ -76,13 +78,15 @@ export default function Widget({
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm font-semibold text-gray-600 uppercase tracking-wide">{title}</p>
-          <p className={`${valueClassName} font-bold mt-1 ${colorMap[color].text}`}>{value}</p>
-          {subtitle && <p className="text-sm text-gray-500 mt-1">{subtitle}</p>}
+          <p className={`${valueClassName} font-bold mt-1 ${colorMap[safeColor].text}`}>{value}</p>
+          <p className="text-sm text-gray-500 mt-1">{subTitle}</p>
        </div>
        <div
-          className={`w-12 h-12 bg-gradient-to-br ${colorMap[color].bg} rounded-xl flex items-center justify-center shadow-sm`}
+          className={`w-12 h-12 bg-gradient-to-br ${colorMap[safeColor].bg} rounded-xl flex items-center justify-center shadow-sm`}
        >
-          {IconComponent ? <IconComponent className={`w-6 h-6 ${colorMap[color].text}`} /> : null}
+          {IconComponent ? (
+            <IconComponent className={`w-6 h-6 ${colorMap[safeColor].text}`} />
+          ) : null}
        </div>
      </div>
    </div>
--- a/ui/src/components/ui/Widget/WidgetGroup.tsx
+++ b/ui/src/components/ui/Widget/WidgetGroup.tsx
@ -1,29 +1,30 @@
 import classNames from 'classnames'
 import Widget, { type colorType } from './Widget'
-import { WidgetEditDto } from '@/proxy/form/models'
+import { WidgetEditDto, WidgetGroupDto } from '@/proxy/form/models'

-interface WidgetGroup {
-  colGap?: number
-  colSpan?: number
-  items: WidgetEditDto[]
-}
-
-export default function WidgetGroup(widgets: WidgetGroup[]) {
-  return widgets.map((group, gIdx) => (
-    <div key={gIdx} className={classNames(`grid grid-cols-12 gap-${group.colGap ?? 4}`)}>
+export default function WidgetGroup({ widgetGroups }: { widgetGroups: WidgetGroupDto[] }) {
+  return (
+    <div>
+      {widgetGroups.map((group, gIdx) => (
+        <div
+          key={gIdx}
+          className={classNames(`grid grid-cols-12 gap-${group.colGap} ${group.className || ''}`)}
+        >
          {group.items.map((item: WidgetEditDto, order: number) => (
-        <div key={`${gIdx}-${order}`} className={classNames(`col-span-${group.colSpan ?? 3}`)}>
+            <div key={`${gIdx}-${order}`} className={classNames(`col-span-${group.colSpan}`)}>
              <Widget
                title={item.title}
                value={item.value}
                color={item.color as colorType}
-            icon={item.icon ?? 'FaChartBar'}
-            subtitle={item.subTitle}
+                icon={item.icon}
+                subTitle={item.subTitle}
                valueClassName={item.valueClassName}
-            onClick={() => item.onClick}
+                onClick={eval(item.onClick)}
              />
            </div>
          ))}
        </div>
-  ))
+      ))}
+    </div>
+  )
 }
--- a/ui/src/components/ui/Widget/iconList.ts
+++ b/ui/src/components/ui/Widget/iconList.ts
--- a/ui/src/proxy/form/models.ts
+++ b/ui/src/proxy/form/models.ts
@ -702,10 +702,18 @@ export enum ColumnSortDirectionEnum {
  'Desc' = 'desc',
 }

+export interface WidgetGroupDto {
+  colGap?: number
+  colSpan?: number
+  className?: string
+  items: WidgetEditDto[]
+}
+
 export interface WidgetEditDto {
  colGap: number
  colSpan: number
  sqlQuery?: string
+  className?: string
  title: string
  value: string
  valueClassName: string
@ -713,5 +721,4 @@ export interface WidgetEditDto {
  icon: string
  subTitle: string
  onClick: string
-  className: string
 }
--- a/ui/src/shared/useListFormCustomDataSource.ts
+++ b/ui/src/shared/useListFormCustomDataSource.ts
@ -1,9 +1,9 @@
 import DataGrid from 'devextreme-react/data-grid'
 import PivotGrid from 'devextreme-react/pivot-grid'
 import CustomStore from 'devextreme/data/custom_store'
-import { MutableRefObject, useCallback } from 'react'
+import { MutableRefObject, useCallback, useState } from 'react'
 import { getLoadOptions, getServiceAddress, setGridPanelColor } from '../views/list/Utils'
-import { GridOptionsDto } from '../proxy/form/models'
+import { GridOptionsDto, WidgetGroupDto } from '../proxy/form/models'
 import { GridColumnData } from '../views/list/GridColumnData'
 import { dynamicFetch } from '../services/form.service'
 import { MULTIVALUE_DELIMITER } from '../constants/app.constant'
@ -23,6 +23,7 @@ const useListFormCustomDataSource = ({
      listFormCode: string,
      searchParams?: URLSearchParams,
      cols?: GridColumnData[],
+      setWidgetGroups?: (widgetGroups: WidgetGroupDto[]) => void,
    ) => {
      return new CustomStore({
        key: gridOptions.keyFieldName,
@ -71,6 +72,8 @@ const useListFormCustomDataSource = ({
            parameters.filter = JSON.stringify(parameters.filter)
            const response = await dynamicFetch('list-form-select/select', 'GET', parameters)

+            if (setWidgetGroups) setWidgetGroups(response.data.widgets ?? [])
+
            // Column format multiValue ise, gelen stringi array yapmaliyiz
            if (columns) {
              columns.forEach((col: any) => {
@ -123,6 +126,7 @@ const useListFormCustomDataSource = ({
              totalCount: response.data.totalCount,
              summary: response.data.summary,
              groupCount: response.data.groupCount,
+              widgets: response.data.widgets,
            }
            return retValue
          } catch (error: any) {
--- a/ui/src/views/admin/listForm/edit/FormTabWidgets.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabWidgets.tsx
@ -9,7 +9,7 @@ import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useState } from 'react'
-import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa';
+import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa'
 import JsonRowOpDialogEditForm from './json-row-operations/JsonRowOpDialogEditForm'
 import { JsonRowDialogData } from './json-row-operations/types'
 import JsonRowOpDialogWidget from './json-row-operations/JsonRowOpDialogWidget'
@ -58,14 +58,14 @@ function FormTabWidgets(props: { listFormCode: string }) {
              <Th>{translate('::ListForms.ListFormEdit.WidgetColGap')}</Th>
              <Th>{translate('::ListForms.ListFormEdit.WidgetColSpan')}</Th>
              <Th>{translate('::ListForms.ListFormEdit.WidgetSqlQuery')}</Th>
+              <Th>{translate('::ListForms.ListFormEdit.WidgetClassName')}</Th>
+              <Th>{translate('::ListForms.ListFormEdit.WidgetValueClassName')}</Th>
              <Th>{translate('::ListForms.ListFormEdit.WidgetTitle')}</Th>
              <Th>{translate('::ListForms.ListFormEdit.WidgetValue')}</Th>
-              <Th>{translate('::ListForms.ListFormEdit.WidgetValueClassName')}</Th>
              <Th>{translate('::ListForms.ListFormEdit.WidgetColor')}</Th>
              <Th>{translate('::ListForms.ListFormEdit.WidgetIcon')}</Th>
              <Th>{translate('::ListForms.ListFormEdit.WidgetSubtitle')}</Th>
              <Th>{translate('::ListForms.ListFormEdit.WidgetOnClick')}</Th>
-              <Th>{translate('::ListForms.ListFormEdit.WidgetClassName')}</Th>
            </Tr>
          </THead>
          <TBody>
@ -113,14 +113,14 @@ function FormTabWidgets(props: { listFormCode: string }) {
                <Td>{row.colGap}</Td>
                <Td>{row.colSpan}</Td>
                <Td>{row.sqlQuery}</Td>
+                <Td>{row.className}</Td>
+                <Td>{row.valueClassName}</Td>
                <Td>{row.title}</Td>
                <Td>{row.value}</Td>
-                <Td>{row.valueClassName}</Td>
                <Td>{row.color}</Td>
                <Td>{row.icon}</Td>
                <Td>{row.subTitle}</Td>
                <Td>{row.onClick}</Td>
-                <Td>{row.className}</Td>
              </Tr>
            ))}
          </TBody>
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx
@ -5,13 +5,14 @@ import {
  FormItem,
  Input,
  Notification,
+  Select,
  toast,
 } from '@/components/ui'
 import { ListFormJsonRowDto } from '@/proxy/admin/list-form/models'
 import { SelectBoxOption } from '@/shared/types'
 import { useStoreActions, useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
-import { Field, Form, Formik } from 'formik'
+import { Field, FieldProps, Form, Formik } from 'formik'
 import { Dispatch, SetStateAction, useEffect, useState } from 'react'
 import { number, object, string } from 'yup'
 import { JsonRowDialogData } from './types'
@ -21,6 +22,7 @@ import {
  postListFormJsonRow,
  putListFormJsonRow,
 } from '@/services/admin/list-form.service'
+import { colSpanOptions } from '../options'

 const schema = object().shape({
  colGap: number().required('Column Gap Required'),
@ -103,15 +105,15 @@ function JsonRowOpDialogWidget({
              data.widgetValues ?? {
                colGap: 0,
                colSpan: 0,
-                sqlQuery: '',
-                title: '',
-                value: '',
-                valueClassName: '',
-                color: '',
-                icon: '',
-                subTitle: '',
-                onClick: '',
                className: '',
+                sqlQuery: '',
+                title: 'Title',
+                value: 'Value',
+                valueClassName: '',
+                color: 'Color',
+                icon: 'Icon',
+                subTitle: 'SubTitle',
+                onClick: '',
              }
            }
            validationSchema={schema}
@ -153,12 +155,12 @@ function JsonRowOpDialogWidget({
                <FormContainer size="sm">
                  <div className="max-h-96 overflow-y-auto p-2">
                    <FormItem
-                      label="Column Gap"
+                      label="Column Gap (Sütun Boşluğu)"
                      invalid={errors.colGap && touched.colGap}
                      errorMessage={errors.colGap}
                    >
                      <Field
-                        type="text"
+                        type="number"
                        autoComplete="off"
                        name="colGap"
                        placeholder="Column Gap"
@ -167,17 +169,24 @@ function JsonRowOpDialogWidget({
                    </FormItem>

                    <FormItem
-                      label="Column Span"
+                      label="Column Span (Sütun Genişliği)"
                      invalid={errors.colSpan && touched.colSpan}
                      errorMessage={errors.colSpan}
                    >
-                      <Field
-                        type="text"
-                        autoComplete="off"
-                        name="colSpan"
-                        placeholder="Column Span"
-                        component={Input}
+                      <Field type="text" autoComplete="off" name="colSpan" placeholder="colSpan">
+                        {({ field, form }: FieldProps<SelectBoxOption>) => (
+                          <Select
+                            field={field}
+                            form={form}
+                            isClearable={true}
+                            options={colSpanOptions}
+                            value={colSpanOptions?.filter(
+                              (option: any) => option.value === values.colSpan,
+                            )}
+                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
                          />
+                        )}
+                      </Field>
                    </FormItem>

                    <FormItem
@ -191,6 +200,36 @@ function JsonRowOpDialogWidget({
                        name="sqlQuery"
                        placeholder="Sql Query"
                        component={Input}
+                        rows={6}
+                        textArea={true}
+                      />
+                    </FormItem>
+
+                    <FormItem
+                      label="Class Name"
+                      invalid={errors.className && touched.className}
+                      errorMessage={errors.className}
+                    >
+                      <Field
+                        type="text"
+                        autoComplete="off"
+                        name="className"
+                        placeholder="Class Name"
+                        component={Input}
+                      />
+                    </FormItem>
+
+                    <FormItem
+                      label="Value Class Name"
+                      invalid={errors.valueClassName && touched.valueClassName}
+                      errorMessage={errors.valueClassName}
+                    >
+                      <Field
+                        type="text"
+                        autoComplete="off"
+                        name="valueClassName"
+                        placeholder="Value Class Name"
+                        component={Input}
                      />
                    </FormItem>

@ -223,21 +262,7 @@ function JsonRowOpDialogWidget({
                    </FormItem>

                    <FormItem
-                      label="Value Class Name"
-                      invalid={errors.valueClassName && touched.valueClassName}
-                      errorMessage={errors.valueClassName}
-                    >
-                      <Field
-                        type="text"
-                        autoComplete="off"
-                        name="valueClassName"
-                        placeholder="Value Class Name"
-                        component={Input}
-                      />
-                    </FormItem>
-
-                    <FormItem
-                      label="Color"
+                      label="Color Field"
                      invalid={errors.color && touched.color}
                      errorMessage={errors.color}
                    >
@ -251,7 +276,7 @@ function JsonRowOpDialogWidget({
                    </FormItem>

                    <FormItem
-                      label="Icon"
+                      label="Icon Field"
                      invalid={errors.icon && touched.icon}
                      errorMessage={errors.icon}
                    >
@ -264,6 +289,48 @@ function JsonRowOpDialogWidget({
                      />
                    </FormItem>

+                    {/* <FormItem
+                      label="Color"
+                      invalid={errors.color && touched.color}
+                      errorMessage={errors.color}
+                    >
+                      <Field type="text" autoComplete="off" name="color" placeholder="Color">
+                        {({ field, form }: FieldProps<SelectBoxOption>) => (
+                          <Select
+                            field={field}
+                            form={form}
+                            isClearable={true}
+                            options={widgetColorOptions}
+                            value={widgetColorOptions?.filter(
+                              (option: any) => option.value === values.color,
+                            )}
+                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                          />
+                        )}
+                      </Field>
+                    </FormItem>
+
+                    <FormItem
+                      label="Icon"
+                      invalid={errors.icon && touched.icon}
+                      errorMessage={errors.icon}
+                    >
+                      <Field type="text" autoComplete="off" name="icon" placeholder="Icon">
+                        {({ field, form }: FieldProps<SelectBoxOption>) => (
+                          <Select
+                            field={field}
+                            form={form}
+                            isClearable={true}
+                            options={widgetIconOptions}
+                            value={widgetIconOptions?.filter(
+                              (option: any) => option.value === values.icon,
+                            )}
+                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                          />
+                        )}
+                      </Field>
+                    </FormItem> */}
+
                    <FormItem
                      label="Sub Title"
                      invalid={errors.subTitle && touched.subTitle}
@ -272,7 +339,7 @@ function JsonRowOpDialogWidget({
                      <Field
                        type="text"
                        autoComplete="off"
-                        name="subtitle"
+                        name="subTitle"
                        placeholder="Sub Title"
                        component={Input}
                      />
@ -291,21 +358,6 @@ function JsonRowOpDialogWidget({
                        component={Input}
                      />
                    </FormItem>
-
-                    <FormItem
-                      label="Class Name"
-                      invalid={errors.className && touched.className}
-                      errorMessage={errors.className}
-                    >
-                      <Field
-                        type="text"
-                        autoComplete="off"
-                        name="className"
-                        placeholder="Class Name"
-                        component={Input}
-                      />
-                    </FormItem>
-
                  </div>
                  <div className="text-right mt-4">
                    <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
--- a/ui/src/views/admin/listForm/edit/options.ts
+++ b/ui/src/views/admin/listForm/edit/options.ts
@ -25,6 +25,8 @@ import {
  GridColumnJoinTypeListEnum,
 } from '../../../../proxy/admin/list-form-field/models'
 import { enumToList } from '../../../../utils/enumUtils'
+import { colSpan, iconList, WidgetColorEnum } from '@/components/ui/Widget/iconList'
+import { SelectBoxOption } from '@/shared/types'

 export const sortModeOptions = [
  { value: 'none', label: 'None' },
@ -216,3 +218,13 @@ export const cascadeFilterOperator = enumToList<string>(ColumnCascadeFilterOpera
 export const pivotSettingsAreaOptions = enumToList<string>(PivotSettingsAreaEnum)
 export const pivotSettingsGroupIntervalOptions = enumToList<string>(PivotSettingsGroupIntervalEnum)
 export const pivotSortDirectionOptions = enumToList<string>(ColumnSortDirectionEnum)
+export const widgetColorOptions = enumToList<string>(WidgetColorEnum)
+export const widgetIconOptions = iconList.map((icon) => ({
+  value: icon,
+  label: icon,
+}))
+
+export const colSpanOptions = colSpan.map((span) => ({
+  value: span,
+  label: span,
+}))
--- a/ui/src/views/list/Grid.tsx
+++ b/ui/src/views/list/Grid.tsx
@ -7,6 +7,7 @@ import {
  GridDto,
  ListFormCustomizationTypeEnum,
  PlatformEditorTypes,
+  WidgetGroupDto,
 } from '@/proxy/form/models'
 import { getList } from '@/services/form.service'
 import {
@ -64,6 +65,7 @@ import { TagBoxEditorComponent } from './editors/TagBoxEditorComponent'
 import { useFilters } from './useFilters'
 import { useToolbar } from './useToolbar'
 import { ImportDashboard } from '@/components/importManager/ImportDashboard'
+import WidgetGroup from '@/components/ui/Widget/WidgetGroup'

 interface GridProps {
  listFormCode: string
@ -88,6 +90,7 @@ const Grid = (props: GridProps) => {
  const [columnData, setColumnData] = useState<GridColumnData[]>()
  const [formData, setFormData] = useState<any>()
  const [mode, setMode] = useState<RowMode>('view')
+  const [widgetGroups, setWidgetGroups] = useState<WidgetGroupDto[]>([])

  const preloadExportLibs = () => {
    import('exceljs')
@ -404,7 +407,9 @@ const Grid = (props: GridProps) => {
      listFormCode,
      searchParams,
      cols,
+      setWidgetGroups,
    )
+
    setGridDataSource(dataSource)
  }, [gridDto, searchParams])

@ -503,6 +508,9 @@ const Grid = (props: GridProps) => {
  }

  return (
+    <>
+      <WidgetGroup widgetGroups={widgetGroups} />
+
      <Container className={DX_CLASSNAMES}>
        {!isSubForm && (
          <Helmet
@ -578,7 +586,8 @@ const Grid = (props: GridProps) => {
                popup={{
                  title: gridDto.gridOptions.editingOptionDto?.popup?.title,
                  showTitle: gridDto.gridOptions.editingOptionDto?.popup?.showTitle,
-                hideOnOutsideClick: gridDto.gridOptions.editingOptionDto?.popup?.hideOnOutsideClick,
+                  hideOnOutsideClick:
+                    gridDto.gridOptions.editingOptionDto?.popup?.hideOnOutsideClick,
                  width: gridDto.gridOptions.editingOptionDto?.popup?.width,
                  height: gridDto.gridOptions.editingOptionDto?.popup?.height,
                  fullScreen: gridDto.gridOptions.editingOptionDto?.popup?.fullScreen,
@ -805,6 +814,7 @@ const Grid = (props: GridProps) => {
        </Dialog>
        <GridFilterDialogs gridRef={gridRef} listFormCode={listFormCode} {...filterData} />
      </Container>
+    </>
  )
 }