Grid Widget güncellemesi

ui/src/components/ui/Widget/WidgetGroup.tsx

@@ -1,8 +1,11 @@
 import classNames from 'classnames'
 import Widget, { type colorType } from './Widget'
 import { WidgetEditDto, WidgetGroupDto } from '@/proxy/form/models'
+import { useNavigate } from 'react-router-dom'
 
 export default function WidgetGroup({ widgetGroups }: { widgetGroups: WidgetGroupDto[] }) {
+  const navigate = useNavigate()
+
   return (
     <div>
       {widgetGroups.map((group, gIdx) => (
@@ -19,7 +22,12 @@ export default function WidgetGroup({ widgetGroups }: { widgetGroups: WidgetGrou
                 icon={item.icon}
                 subTitle={item.subTitle}
                 valueClassName={item.valueClassName}
-                onClick={eval(item.onClick)}
+                onClick={() => {
+                  if (item.onClick) {
+                    // eslint-disable-next-line no-eval
+                    eval(item.onClick)
+                  }
+                }}
               />
             </div>
           ))}

ui/src/views/admin/listForm/edit/FormTabWidgets.tsx

@@ -10,7 +10,6 @@ import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useState } from 'react'
 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'
 
@@ -35,7 +34,7 @@ function FormTabWidgets(props: { listFormCode: string }) {
         <Table compact>
           <THead>
             <Tr>
-              <Th className="text-center">
+              <Th className="text-center min-w-[100px]">
                 <Button
                   shape="circle"
                   variant="plain"
@@ -60,12 +59,6 @@ function FormTabWidgets(props: { listFormCode: string }) {
               <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.WidgetColor')}</Th>
-              <Th>{translate('::ListForms.ListFormEdit.WidgetIcon')}</Th>
-              <Th>{translate('::ListForms.ListFormEdit.WidgetSubtitle')}</Th>
-              <Th>{translate('::ListForms.ListFormEdit.WidgetOnClick')}</Th>
             </Tr>
           </THead>
           <TBody>
@@ -115,12 +108,6 @@ function FormTabWidgets(props: { listFormCode: string }) {
                 <Td>{row.sqlQuery}</Td>
                 <Td>{row.className}</Td>
                 <Td>{row.valueClassName}</Td>
-                <Td>{row.title}</Td>
-                <Td>{row.value}</Td>
-                <Td>{row.color}</Td>
-                <Td>{row.icon}</Td>
-                <Td>{row.subTitle}</Td>
-                <Td>{row.onClick}</Td>
               </Tr>
             ))}
           </TBody>

ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx

@@ -96,6 +96,7 @@ function JsonRowOpDialogWidget({
       preventScroll={true}
       onClose={handleClose}
       onRequestClose={handleClose}
+      width={data.operation === 'create' || data.operation === 'update' ? 'sm' : '450px'}
     >
       {(data.operation === 'create' || data.operation === 'update') && (
         <>
@@ -103,13 +104,13 @@ function JsonRowOpDialogWidget({
           <Formik
             initialValues={
               data.widgetValues ?? {
-                colGap: 0,
+                colGap: 3,
-                colSpan: 0,
+                colSpan: 3,
-                className: '',
                 sqlQuery: '',
+                className: 'mb-3',
+                valueClassName: 'bg-5 text-sm',
                 title: 'Title',
                 value: 'Value',
-                valueClassName: '',
                 color: 'Color',
                 icon: 'Icon',
                 subTitle: 'SubTitle',
@@ -153,7 +154,7 @@ function JsonRowOpDialogWidget({
             {({ touched, errors, values, isSubmitting }) => (
               <Form>
                 <FormContainer size="sm">
-                  <div className="max-h-96 overflow-y-auto p-2">
+                  <div className="max-h-full overflow-y-auto p-2">
                     <FormItem
                       label="Column Gap (Sütun Boşluğu)"
                       invalid={errors.colGap && touched.colGap}
@@ -205,6 +206,95 @@ function JsonRowOpDialogWidget({
                       />
                     </FormItem>
 
+                    <div className="bg-gray-100 p-1 rounded-md pb-2">
+                      <span className="text-gray-500 font-bold">SQL Query Fields</span>
+                    </div>
+                    <div className="grid grid-cols-6 gap-2">
+                      <FormItem
+                        label="Title Field"
+                        invalid={errors.title && touched.title}
+                        errorMessage={errors.title}
+                      >
+                        <Field
+                          type="text"
+                          autoComplete="off"
+                          name="title"
+                          placeholder="Title Field"
+                          component={Input}
+                        />
+                      </FormItem>
+
+                      <FormItem
+                        label="Value Field"
+                        invalid={errors.value && touched.value}
+                        errorMessage={errors.value}
+                      >
+                        <Field
+                          type="text"
+                          autoComplete="off"
+                          name="value"
+                          placeholder="Value Field"
+                          component={Input}
+                        />
+                      </FormItem>
+
+                      <FormItem
+                        label="Color Field"
+                        invalid={errors.color && touched.color}
+                        errorMessage={errors.color}
+                      >
+                        <Field
+                          type="text"
+                          autoComplete="off"
+                          name="color"
+                          placeholder="Color"
+                          component={Input}
+                        />
+                      </FormItem>
+
+                      <FormItem
+                        label="Icon Field"
+                        invalid={errors.icon && touched.icon}
+                        errorMessage={errors.icon}
+                      >
+                        <Field
+                          type="text"
+                          autoComplete="off"
+                          name="icon"
+                          placeholder="Icon"
+                          component={Input}
+                        />
+                      </FormItem>
+
+                      <FormItem
+                        label="Sub Title Field"
+                        invalid={errors.subTitle && touched.subTitle}
+                        errorMessage={errors.subTitle}
+                      >
+                        <Field
+                          type="text"
+                          autoComplete="off"
+                          name="subTitle"
+                          placeholder="Sub Title"
+                          component={Input}
+                        />
+                      </FormItem>
+
+                      <FormItem
+                        label="On Click"
+                        invalid={errors.onClick && touched.onClick}
+                        errorMessage={errors.onClick}
+                      >
+                        <Field
+                          type="text"
+                          autoComplete="off"
+                          name="onClick"
+                          placeholder="On Click"
+                          component={Input}
+                        />
+                      </FormItem>
+                    </div>
+
                     <FormItem
                       label="Class Name"
                       invalid={errors.className && touched.className}
@@ -233,62 +323,6 @@ function JsonRowOpDialogWidget({
                       />
                     </FormItem>
 
-                    <FormItem
-                      label="Title Field"
-                      invalid={errors.title && touched.title}
-                      errorMessage={errors.title}
-                    >
-                      <Field
-                        type="text"
-                        autoComplete="off"
-                        name="title"
-                        placeholder="Title Field"
-                        component={Input}
-                      />
-                    </FormItem>
-
-                    <FormItem
-                      label="Value Field"
-                      invalid={errors.value && touched.value}
-                      errorMessage={errors.value}
-                    >
-                      <Field
-                        type="text"
-                        autoComplete="off"
-                        name="value"
-                        placeholder="Value Field"
-                        component={Input}
-                      />
-                    </FormItem>
-
-                    <FormItem
-                      label="Color Field"
-                      invalid={errors.color && touched.color}
-                      errorMessage={errors.color}
-                    >
-                      <Field
-                        type="text"
-                        autoComplete="off"
-                        name="color"
-                        placeholder="Color"
-                        component={Input}
-                      />
-                    </FormItem>
-
-                    <FormItem
-                      label="Icon Field"
-                      invalid={errors.icon && touched.icon}
-                      errorMessage={errors.icon}
-                    >
-                      <Field
-                        type="text"
-                        autoComplete="off"
-                        name="icon"
-                        placeholder="Icon"
-                        component={Input}
-                      />
-                    </FormItem>
-
                     {/* <FormItem
                       label="Color"
                       invalid={errors.color && touched.color}
@@ -330,34 +364,6 @@ function JsonRowOpDialogWidget({
                         )}
                       </Field>
                     </FormItem> */}
-
-                    <FormItem
-                      label="Sub Title"
-                      invalid={errors.subTitle && touched.subTitle}
-                      errorMessage={errors.subTitle}
-                    >
-                      <Field
-                        type="text"
-                        autoComplete="off"
-                        name="subTitle"
-                        placeholder="Sub Title"
-                        component={Input}
-                      />
-                    </FormItem>
-
-                    <FormItem
-                      label="On Click"
-                      invalid={errors.onClick && touched.onClick}
-                      errorMessage={errors.onClick}
-                    >
-                      <Field
-                        type="text"
-                        autoComplete="off"
-                        name="onClick"
-                        placeholder="On Click"
-                        component={Input}
-                      />
-                    </FormItem>
                   </div>
                   <div className="text-right mt-4">
                     <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>

ui/src/views/list/Grid.tsx

@@ -520,7 +520,7 @@ const Grid = (props: GridProps) => {
           ></Helmet>
         )}
         {gridDto && columnData && (
-          <>
+          <div className="p-1">
             <DataGrid
               ref={gridRef as any}
               id={'Grid-' + listFormCode}
@@ -802,7 +802,7 @@ const Grid = (props: GridProps) => {
             >
               <ImportDashboard gridDto={gridDto} />
             </Dialog>
-          </>
+          </div>
         )}
 
         <Dialog