Grid Widget güncellemesi
This commit is contained in:
Sedat ÖZTÜRK
parent
928894e5c5
commit
70592958f1
4 changed files with 107 additions and 106 deletions
|
|
@ -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>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
colSpan: 0,
|
||||
className: '',
|
||||
colGap: 3,
|
||||
colSpan: 3,
|
||||
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}>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue