sozsoft/erp-platform
1
0
Fork 0
Code Issues 6 Pull requests Projects 3 Releases Packages Wiki Activity Actions

Grid ve Tree için Export düzenlemesi

Browse source
This commit is contained in:
Sedat Öztürk 2025-11-08 23:22:50 +03:00
parent c768eb2e1c
commit 5b006aef4a
31 changed files with 204 additions and 181 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
api/src/Kurs.Platform.Application.Contracts/ListForms/Chart/ChartExportDto.cs
View file

@ -15,6 +15,9 @@ public class ChartExportDto
/// <summary> UI bileşeninde istemci tarafında dışa aktarmayı etkinleştirir.
/// </summary>
public bool Enabled { get; set; }
/// <summary> UI bileşeninde istemci tarafında dışa aktarmayı etkinleştirir.
/// </summary>
public bool AllowExportSelectedData { get; set; }
///// <summary> Dışa aktarma formatı belirtir.
///// Desteklenen formatlar: 'GIF' | 'JPEG' | 'PDF' | 'PNG' | 'SVG'
///// </summary>

4
api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/TreeOptionDto.cs
View file

@ -5,6 +5,10 @@ namespace Kurs.Platform.ListForms;
/// </summary>
public class TreeOptionDto
{
/// <summary>
/// Parent kaydı belirten field adı (örn: "Id")
/// </summary>
public string KeyExpr { get; set; }
/// <summary>
/// Parent kaydı belirten field adı (örn: "parentId")
/// </summary>

6
api/src/Kurs.Platform.DbMigrator/Seeds/LanguagesData.json
View file

@ -5179,6 +5179,12 @@
"en": "Visible",
"tr": "Görünür"
},
{
"resourceName": "Platform",
"key": "ListForms.ListFormEdit.TreeKeyFieldName",
"en": "Key Field Name",
"tr": "Anahtar Alanı"
},
{
"resourceName": "Platform",
"key": "ListForms.ListFormEdit.ParentIdExpr",

2
api/src/Kurs.Platform.DbMigrator/Seeds/ListFormSeeder_Saas.cs
View file

@ -2613,7 +2613,7 @@ public class ListFormSeeder_Saas : IDataSeedContributor, ITransientDependency
DeleteCommand = DefaultDeleteCommand(nameof(TableNameEnum.Menu)),
DeleteFieldsDefaultValueJson = DefaultDeleteFieldsDefaultValueJson,
PagerOptionJson = DefaultPagerOptionJson,
TreeOptionJson = DefaultTreeOptionJson("ParentCode", true),
TreeOptionJson = DefaultTreeOptionJson("Code", "ParentCode", true),
EditingOptionJson = DefaultEditingOptionJson(AppCodes.Menus.Menu, 600, 600, true, true, true, true, false),
EditingFormJson = JsonSerializer.Serialize(new List<EditingFormDto>() {
new() { Order=1, ColCount=1, ColSpan=1, ItemType="group", Items=

3
api/src/Kurs.Platform.DbMigrator/Seeds/SeederDefaults.cs
View file

@ -77,8 +77,9 @@ public static class SeederDefaults
Mode = GridOptions.SelectionModeMultiple,
SelectAllMode = GridOptions.SelectionAllModeAllPages
});
public static string DefaultTreeOptionJson(string ParentIdExpr, bool AutoExpandAll = true) => JsonSerializer.Serialize(new TreeOptionDto
public static string DefaultTreeOptionJson(string KeyExpr, string ParentIdExpr, bool AutoExpandAll = true) => JsonSerializer.Serialize(new TreeOptionDto
{
KeyExpr = KeyExpr,
ParentIdExpr = ParentIdExpr,
RootValue = null,
AutoExpandAll = AutoExpandAll

62
ui/src/proxy/admin/charts/models.ts
View file

@ -179,70 +179,10 @@ export interface ChartDragBoxStyle {
opacity: number
}
// export interface ChartDto extends AuditedEntityDto<string> {
// listFormCode?: string
// userId?: string
// roleId?: string
// cultureName?: string
// commonJson?: string
// commonDto: ChartCommonDto
// adaptiveLayoutJson?: string
// adaptivelayoutDto: ChartAdaptivelayoutDto
// animationJson?: string
// animationDto: ChartAnimationDto
// annotationsJson?: string
// annotationsDto: ChartAnnotationDto[]
// argumentAxisJson?: string
// argumentAxisDto: ChartArgumentAxisDto
// commonAnnotationsSettingsJson?: string
// commonAnnotationSettingsDto: ChartCommonAnnotationDto
// commonAxisSettingsJson?: string
// commonAxisSettingsDto: ChartCommonAxisDto
// commonPaneSettingsJson?: string
// commonPaneSettingsDto: ChartCommonPaneDto
// commonSeriesSettingsJson?: string
// commonSeriesSettingsDto: ChartCommonSeriesSettingsDto
// crosshairJson?: string
// crosshairDto: ChartCrosshairDto
// exportJson?: string
// exportDto: ChartExportDto
// legendJson?: string
// legendDto: ChartLegendDto
// marginJson?: string
// marginDto: ChartMarginDto
// panesJson?: string
// panesDto: ChartPanesDto[]
// scrollBarJson?: string
// scrollBarDto: ChartScrollBarDto
// seriesJson?: string
// seriesDto: ChartSeriesDto[]
// sizeJson?: string
// sizeDto: ChartSizeDto
// titleJson?: string
// titleDto: ChartTitleDto
// tooltipJson?: string
// tooltipDto: ChartTooltipDto
// valueAxisJson?: string
// valueAxisDto: ChartValueAxisDto[]
// zoomAndPanJson?: string
// zoomAndPanDto: ChartZoomAndPanDto
// permissionJson?: string
// permissionDto: PermissionCrudDto
// isTenant: boolean
// isBranch: boolean
// isOrganizationUnit: boolean
// }
// export interface ChartEditDto extends ChartDto {
// editType: string
// dataSourceJson?: string
// dataSourceDto: ChartDataSourceDto
// dataSourceCode?: string
// }
export interface ChartExportDto {
backgroundColor?: string
enabled: boolean
allowExportSelectedData: boolean
margin: number
printingEnabled: boolean
}

48
ui/src/proxy/admin/list-form/options.ts
View file

@ -120,3 +120,51 @@ export const tabVisibilityConfig: Record<string, string[]> = {
'subForms',
],
}
export const themeOptions = [
{ value: 'generic.dark', label: 'Generic Dark' },
{ value: 'generic.light', label: 'Generic Carmine' },
{ value: 'generic.contrast', label: 'Generic Contrast' },
{ value: 'generic.carmine', label: 'Generic Darkmoon' },
{ value: 'generic.darkmoon', label: 'Generic Darkviolet' },
{ value: 'generic.darkviolet', label: 'Generic Greenmist' },
{ value: 'generic.greenmist', label: 'Generic Light' },
{ value: 'generic.softblue', label: 'Generic Soft Blue' },
{ value: 'material.blue.light', label: 'Material Blue Light' },
{ value: 'material.lime.light', label: 'Material Lime Light' },
{ value: 'material.orange.light', label: 'Material Orange Light' },
{ value: 'material.purple.light', label: 'Material Purple Light' },
{ value: 'material.teal.light', label: 'Material Teal Light' },
]
export const tooltipFormatListOptions = [
{ value: null, label: 'None' },
{ value: 'billions', label: 'Billions' },
{ value: 'currency', label: 'Currency' },
{ value: 'day', label: 'Day' },
{ value: 'dayOfWeek', label: 'Day of Week' },
{ value: 'decimal', label: 'Decimal' },
{ value: 'exponential', label: 'Exponential' },
{ value: 'fixedPoint', label: 'Fixed Point' },
{ value: 'hour', label: 'Hour' },
{ value: 'largeNumber', label: 'Large Number' },
{ value: 'longDate', label: 'Long Date' },
{ value: 'longDateLongTime', label: 'Long Date Long Time' },
{ value: 'longTime', label: 'Long Time' },
{ value: 'millions', label: 'Millions' },
{ value: 'millisecond', label: 'Millisecond' },
{ value: 'minute', label: 'Minute' },
{ value: 'month', label: 'Month' },
{ value: 'monthAndDay', label: 'Month And Day' },
{ value: 'monthAndYear', label: 'Month And Year' },
{ value: 'percent', label: 'Percent' },
{ value: 'quarter', label: 'Quarter' },
{ value: 'quarterAndYear', label: 'Quarter And Year' },
{ value: 'second', label: 'Second' },
{ value: 'shortDate', label: 'Short Date' },
{ value: 'shortDateShortTime', label: 'Short Date Short Time' },
{ value: 'shortTime', label: 'ShortTime' },
{ value: 'thousands', label: 'Thousands' },
{ value: 'trillions', label: 'Trillions' },
{ value: 'year', label: 'Year' },
]

1
ui/src/proxy/form/models.ts
View file

@ -378,6 +378,7 @@ export interface GridPivotOptionDto {
}
export interface TreeOptionDto {
keyExpr?: string
parentIdExpr?: string
hasItemsExpr?: string
rootValue?: any

47
ui/src/shared/options.ts
View file

@ -1,47 +0,0 @@
export const themeOptions = [
{ value: 'generic.dark', label: 'Generic Dark' },
{ value: 'generic.light', label: 'Generic Carmine' },
{ value: 'generic.contrast', label: 'Generic Contrast' },
{ value: 'generic.carmine', label: 'Generic Darkmoon' },
{ value: 'generic.darkmoon', label: 'Generic Darkviolet' },
{ value: 'generic.darkviolet', label: 'Generic Greenmist' },
{ value: 'generic.greenmist', label: 'Generic Light' },
{ value: 'generic.softblue', label: 'Generic Soft Blue' },
{ value: 'material.blue.light', label: 'Material Blue Light' },
{ value: 'material.lime.light', label: 'Material Lime Light' },
{ value: 'material.orange.light', label: 'Material Orange Light' },
{ value: 'material.purple.light', label: 'Material Purple Light' },
{ value: 'material.teal.light', label: 'Material Teal Light' },
]
export const tooltipFormatListOptions = [
{ value: null, label: 'None' },
{ value: 'billions', label: 'Billions' },
{ value: 'currency', label: 'Currency' },
{ value: 'day', label: 'Day' },
{ value: 'dayOfWeek', label: 'Day of Week' },
{ value: 'decimal', label: 'Decimal' },
{ value: 'exponential', label: 'Exponential' },
{ value: 'fixedPoint', label: 'Fixed Point' },
{ value: 'hour', label: 'Hour' },
{ value: 'largeNumber', label: 'Large Number' },
{ value: 'longDate', label: 'Long Date' },
{ value: 'longDateLongTime', label: 'Long Date Long Time' },
{ value: 'longTime', label: 'Long Time' },
{ value: 'millions', label: 'Millions' },
{ value: 'millisecond', label: 'Millisecond' },
{ value: 'minute', label: 'Minute' },
{ value: 'month', label: 'Month' },
{ value: 'monthAndDay', label: 'Month And Day' },
{ value: 'monthAndYear', label: 'Month And Year' },
{ value: 'percent', label: 'Percent' },
{ value: 'quarter', label: 'Quarter' },
{ value: 'quarterAndYear', label: 'Quarter And Year' },
{ value: 'second', label: 'Second' },
{ value: 'shortDate', label: 'Short Date' },
{ value: 'shortDateShortTime', label: 'Short Date Short Time' },
{ value: 'shortTime', label: 'ShortTime' },
{ value: 'thousands', label: 'Thousands' },
{ value: 'trillions', label: 'Trillions' },
{ value: 'year', label: 'Year' },
]

12
ui/src/shared/useListFormCustomDataSource.ts
View file

@ -3,11 +3,12 @@ import PivotGrid from 'devextreme-react/pivot-grid'
import CustomStore from 'devextreme/data/custom_store'
import { MutableRefObject, useCallback } from 'react'
import { getLoadOptions, getServiceAddress, setGridPanelColor } from '../views/list/Utils'
import { GridOptionsDto } from '../proxy/form/models'
import { GridOptionsDto, LayoutDto } from '../proxy/form/models'
import { GridColumnData } from '../views/list/GridColumnData'
import { dynamicFetch } from '../services/form.service'
import { MULTIVALUE_DELIMITER } from '../constants/app.constant'
import { TreeList } from 'devextreme-react'
import { layoutTypes, ListViewLayoutType } from '@/views/admin/listForm/edit/types'
const filteredGridPanelColor = 'rgba(10, 200, 10, 0.5)' // kullanici tanimli filtre ile filtrelenmis gridin paneline ait renk
@ -25,17 +26,20 @@ const useListFormCustomDataSource = ({
listFormCode: string,
searchParams?: URLSearchParams,
cols?: GridColumnData[],
chart?: boolean,
layout?: ListViewLayoutType | string,
) => {
const store: any = new CustomStore({
key: gridOptions.keyFieldName,
key:
layout === layoutTypes.tree
? gridOptions.treeOptionDto?.keyExpr
: gridOptions.keyFieldName,
useDefaultSearch: true,
load: async (loadOptions) => {
const parameters = getLoadOptions(loadOptions, {
listFormCode,
filter: '',
createDeleteQuery: searchParams?.get('createDeleteQuery'),
chart,
chart: layout === layoutTypes.chart,
})
// 1. Default filter'ı al
const defaultFilter = searchParams?.get('filter')

3
ui/src/views/admin/listForm/edit/ChartTabCommonSettings.tsx
View file

@ -14,11 +14,10 @@ import TabNav from '@/components/ui/Tabs/TabNav'
import { IdentityRoleDto } from '@/proxy/admin/models'
import { SelectBoxOption } from '@/shared/types'
import { Field, FieldProps, Form, Formik, FormikErrors, FormikTouched } from 'formik'
import { themeOptions, tooltipFormatListOptions } from '@/shared/options'
import { FormEditProps } from '../../listForm/edit/FormEdit'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { useStoreState } from '@/store/store'
import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
import { ListFormEditTabs, themeOptions } from '@/proxy/admin/list-form/options'
import { object } from 'yup'
import {
chartPaletteOptions,

3
ui/src/views/admin/listForm/edit/ChartTabCrosshair.tsx
View file

@ -1,11 +1,10 @@
import { Button, Card, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
import { tooltipFormatListOptions } from '@/shared/options'
import { SelectBoxOption } from '@/shared/types'
import { Field, FieldProps, Form, Formik } from 'formik'
import { FormEditProps } from '../../listForm/edit/FormEdit'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { useStoreState } from '@/store/store'
import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
import { ListFormEditTabs, tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
import { object } from 'yup'
import { chartSeriesDashStyleOptions } from './options'

21
ui/src/views/admin/listForm/edit/ChartTabExport.tsx
View file

@ -27,25 +27,21 @@ function ChartTabExport(props: FormEditProps) {
{({ touched, errors, resetForm, isSubmitting, values }) => (
<Form>
<FormContainer size="sm">
<FormItem
label="Enabled"
invalid={!!(errors.exportDto?.enabled && touched.exportDto?.enabled)}
errorMessage={errors.exportDto?.enabled as string}
>
<FormItem label="Enabled">
<Field name="exportDto.enabled" component={Checkbox} />
</FormItem>
<FormItem
label="Printing Enabled"
invalid={!!(errors.exportDto?.printingEnabled && touched.exportDto?.printingEnabled)}
errorMessage={errors.exportDto?.printingEnabled as string}
>
<FormItem label="Allow Export Selected Data">
<Field name="exportDto.allowExportSelectedData" component={Checkbox} />
</FormItem>
<FormItem label="Printing Enabled">
<Field name="exportDto.printingEnabled" component={Checkbox} />
</FormItem>
<FormItem
label="Background Color"
invalid={!!(errors.exportDto?.backgroundColor && touched.exportDto?.backgroundColor)}
invalid={errors.exportDto?.backgroundColor && touched.exportDto?.backgroundColor}
errorMessage={errors.exportDto?.backgroundColor}
>
<Field type="text" name="exportDto.backgroundColor" component={Input} />
@ -53,11 +49,12 @@ function ChartTabExport(props: FormEditProps) {
<FormItem
label="Margin"
invalid={!!(errors.exportDto?.margin && touched.exportDto?.margin)}
invalid={errors.exportDto?.margin && touched.exportDto?.margin}
errorMessage={errors.exportDto?.margin}
>
<Field type="number" name="exportDto.margin" component={Input} />
</FormItem>
<div className="mt-4">
<Button block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}

27
ui/src/views/admin/listForm/edit/FormTabTree.tsx
View file

@ -82,6 +82,31 @@ function FormTabTree(props: FormEditProps) {
{({ touched, errors, isSubmitting, values }) => (
<Form>
<FormContainer size="sm">
<FormItem
label={translate('::ListForms.ListFormEdit.TreeKeyFieldName')}
invalid={errors.treeOptionDto?.keyExpr && touched.treeOptionDto?.keyExpr}
errorMessage={errors.treeOptionDto?.keyExpr}
>
<Field
type="text"
name="treeOptionDto.keyExpr"
placeholder={translate('::ListForms.ListFormEdit.TreeKeyFieldName')}
>
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
isClearable={true}
options={fieldList}
value={fieldList?.filter(
(option) => option.value === values.treeOptionDto.keyExpr,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ParentIdExpr')}
invalid={errors.treeOptionDto?.parentIdExpr && touched.treeOptionDto?.parentIdExpr}
@ -102,8 +127,6 @@ function FormTabTree(props: FormEditProps) {
(option) => option.value === values.treeOptionDto.parentIdExpr,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
menuPlacement="auto"
maxMenuHeight={150}
/>
)}
</Field>

2
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx
View file

@ -7,7 +7,7 @@ import { Field, FieldProps, Form, Formik } from 'formik'
import { number, object, string } from 'yup'
import { dbSourceTypeOptions, listFormAlignmentOptions } from '../options'
import { FormFieldEditProps } from './FormFields'
import { tooltipFormatListOptions } from '@/shared/options'
import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
const schema = object().shape({
fieldName: string().required().max(100),

2
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGroupSummary.tsx
View file

@ -1,12 +1,12 @@
import { Container } from '@/components/shared'
import { Button, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models'
import { tooltipFormatListOptions } from '@/shared/options'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { Field, FieldProps, Form, Formik } from 'formik'
import { bool, object, string } from 'yup'
import { columnSummaryTypeListOptions } from '../options'
import { FormFieldEditProps } from './FormFields'
import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
const schema = object().shape({
columnGroupingDto: object()

3
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx
View file

@ -11,9 +11,8 @@ import {
pivotSettingsAreaOptions,
pivotSettingsGroupIntervalOptions,
pivotSortDirectionOptions,
sortDirectionOptions,
} from '../options'
import { tooltipFormatListOptions } from '@/shared/options'
import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
const schema = object().shape({
pivotSettingsDto: object().shape({

2
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabTotalSummary.tsx
View file

@ -1,12 +1,12 @@
import { Container } from '@/components/shared'
import { Button, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models'
import { tooltipFormatListOptions } from '@/shared/options'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { Field, FieldProps, Form, Formik } from 'formik'
import { bool, object, string } from 'yup'
import { columnSummaryTypeListOptions } from '../options'
import { FormFieldEditProps } from './FormFields'
import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
const schema = object().shape({
columnTotalSummaryDto: object()

29
ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx
View file

@ -24,7 +24,6 @@ import {
postListFormJsonRow,
putListFormJsonRow,
} from '@/services/admin/list-form.service'
import { tooltipFormatListOptions } from '@/shared/options'
import {
chartSeriesDashStyleOptions,
chartSeriesSelectionModeOptions,
@ -33,6 +32,7 @@ import {
} from '../options'
import { ChartPanesDto, ChartValueAxisDto } from '@/proxy/admin/charts/models'
import CreatableSelect from 'react-select/creatable'
import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
const schema = object().shape({
visible: boolean().notRequired(),
@ -55,7 +55,12 @@ const schema = object().shape({
backgroundColor: string().notRequired(),
customizeText: string().notRequired(),
format: string().notRequired(),
font: object().notRequired(),
font: object().shape({
color: string().notRequired(),
family: string().notRequired(),
size: number().notRequired(),
weight: number().notRequired(),
}),
}),
barOverlapGroup: string().notRequired(),
@ -478,31 +483,19 @@ function JsonRowOpDialogSeries({
</FormItem>
<Card className="my-2" header="Font">
<FormItem label="Color" errorMessage={errors.label?.font?.color}>
<FormItem label="Color">
<Field name="label.font.color" component={Input} />
</FormItem>
<FormItem
label="Family"
invalid={!!(errors.label?.font?.family && touched.label?.font?.family)}
errorMessage={errors.label?.font?.family}
>
<FormItem label="Family">
<Field name="label.font.family" component={Input} />
</FormItem>
<FormItem
label="Size"
invalid={!!(errors.label?.font?.size && touched.label?.font?.size)}
errorMessage={errors.label?.font?.size}
>
<FormItem label="Size">
<Field type="number" name="label.font.size" component={Input} />
</FormItem>
<FormItem
label="Weight"
invalid={!!(errors.label?.font?.weight && touched.label?.font?.weight)}
errorMessage={errors.label?.font?.weight}
>
<FormItem label="Weight">
<Field type="number" name="label.font.weight" component={Input} />
</FormItem>
</Card>

8
ui/src/views/admin/listForm/edit/types.ts
View file

@ -1,3 +1,11 @@
export type ChartOperation = '' | 'select' | 'insert' | 'update' | 'delete'
export type ChartDialogType = '' | 'pane' | 'serie' | 'annotation' | 'axis'
export type ListViewLayoutType = 'grid' | 'card' | 'pivot' | 'tree' | 'chart'
export const layoutTypes = {
grid: 'Grid',
card: 'Card',
pivot: 'Pivot',
tree: 'Tree',
chart: 'Chart',
}

4
ui/src/views/form/FormButtons.tsx
View file

@ -21,6 +21,7 @@ import { ROUTES_ENUM } from '@/routes/route.constant'
import { usePermission } from '@/utils/hooks/usePermission'
import { GridExtraFilterState } from '../list/Utils'
import { usePWA } from '@/utils/hooks/usePWA'
import { layoutTypes } from '../admin/listForm/edit/types'
const FormButtons = (props: {
isSubForm?: boolean
@ -67,6 +68,8 @@ const FormButtons = (props: {
const navigate = useNavigate()
const { translate } = useLocalization()
const layout = layoutTypes.grid
const { toolbarData } = useToolbar({
gridDto,
listFormCode,
@ -74,6 +77,7 @@ const FormButtons = (props: {
getSelectedRowsData,
refreshData,
getFilter,
layout,
})
const handleDelete = async (e: any) => {

2
ui/src/views/form/FormEdit.tsx
View file

@ -6,7 +6,7 @@ import FormButtons from './FormButtons'
import FormDevExpress from './FormDevExpress'
import SubForms from './SubForms'
import { FormProps } from './types'
import { useGridData } from './useGridData'
import { useGridData } from './useFormData'
import { useCurrentMenuIcon } from '@/utils/hooks/useCurrentMenuIcon'
import { Badge } from '@/components/ui'
import { useState } from 'react'

2
ui/src/views/form/FormNew.tsx
View file

@ -8,7 +8,7 @@ import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
import FormButtons from './FormButtons'
import FormDevExpress from './FormDevExpress'
import { FormProps } from './types'
import { useGridData } from './useGridData'
import { useGridData } from './useFormData'
import { useCurrentMenuIcon } from '@/utils/hooks/useCurrentMenuIcon'
import { Badge } from '@/components/ui'

2
ui/src/views/form/FormView.tsx
View file

@ -6,7 +6,7 @@ import FormButtons from './FormButtons'
import FormDevExpress from './FormDevExpress'
import SubForms from './SubForms'
import { FormProps } from './types'
import { useGridData } from './useGridData'
import { useGridData } from './useFormData'
import { useCurrentMenuIcon } from '@/utils/hooks/useCurrentMenuIcon'
import { Badge } from '@/components/ui'
import { useState } from 'react'

6
ui/src/views/form/useGridData.tsx → ui/src/views/form/useFormData.tsx
View file

@ -16,7 +16,8 @@ import { PermissionResults, RowMode, SimpleItemWithColData } from './types'
import { EditingFormItemDto, GridDto, PlatformEditorTypes } from '@/proxy/form/models'
import { getAccessDeniedPath } from '@/utils/routing'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { useLookupDataSource } from '../form/useLookupDataSource'
import { useLookupDataSource } from './useLookupDataSource'
import { layoutTypes } from '../admin/listForm/edit/types'
const useGridData = (props: {
mode: RowMode
@ -50,7 +51,7 @@ const useGridData = (props: {
isSubForm,
gridRef: undefined,
})
const { createSelectDataSource } = useListFormCustomDataSource({})
const { createSelectDataSource } = useListFormCustomDataSource({} as any)
const { getLookupDataSource } = useLookupDataSource({ listFormCode, isSubForm })
const fetchData = async () => {
@ -204,6 +205,7 @@ const useGridData = (props: {
listFormCode,
searchParams,
cols,
layoutTypes.grid,
)
setDataSource(dataSource)

9
ui/src/views/list/Card.tsx
View file

@ -14,6 +14,7 @@ import { GridExtraFilterState } from './Utils'
import { useStoreActions, useStoreState } from '@/store/store'
import { usePWA } from '@/utils/hooks/usePWA'
import CardItem from './CardItem'
import { layoutTypes } from '../admin/listForm/edit/types'
interface CardProps {
listFormCode: string
@ -112,7 +113,13 @@ const Card = (props: CardProps) => {
useEffect(() => {
if (gridDto) {
const dataSource = createSelectDataSource(gridDto.gridOptions, listFormCode, urlSearchParams)
const dataSource = createSelectDataSource(
gridDto.gridOptions,
listFormCode,
urlSearchParams,
[],
layoutTypes.card,
)
setGridDataSource(dataSource)
//listFormStates

11
ui/src/views/list/Chart.tsx
View file

@ -28,6 +28,7 @@ import {
postListFormJsonRow,
putListFormJsonRow,
} from '@/services/admin/list-form.service'
import { layoutTypes } from '../admin/listForm/edit/types'
interface ChartProps extends CommonProps, Meta {
id: string
@ -51,7 +52,7 @@ const Chart = (props: ChartProps) => {
const [searchParams] = useSearchParams()
const [chartOptions, setChartOptions] = useState<any>()
const { createSelectDataSource } = useListFormCustomDataSource({})
const { createSelectDataSource } = useListFormCustomDataSource({} as any)
const params = useParams()
const _listFormCode = props?.listFormCode ?? params?.listFormCode ?? ''
@ -94,7 +95,13 @@ const Chart = (props: ChartProps) => {
seriesDto,
}
const dataSource = createSelectDataSource(gridOptions, listFormCode, urlSearchParams, [], true)
const dataSource = createSelectDataSource(
gridOptions,
listFormCode,
urlSearchParams,
[],
layoutTypes.chart,
)
const options = {
dataSource: dataSource,

23
ui/src/views/list/Grid.tsx
View file

@ -67,6 +67,7 @@ import { ImportDashboard } from '@/components/importManager/ImportDashboard'
import WidgetGroup from '@/components/ui/Widget/WidgetGroup'
import { GridExtraFilterToolbar } from './GridExtraFilterToolbar'
import { getList } from '@/services/form.service'
import { layoutTypes } from '../admin/listForm/edit/types'
interface GridProps {
listFormCode: string
@ -128,6 +129,7 @@ const Grid = (props: GridProps) => {
}
}, [searchParams])
const layout = layoutTypes.grid
const { toolbarData, toolbarModalData, setToolbarModalData } = useToolbar({
gridDto,
listFormCode,
@ -135,6 +137,7 @@ const Grid = (props: GridProps) => {
getSelectedRowsData,
refreshData,
getFilter,
layout,
})
const { filterToolbarData, ...filterData } = useFilters({
@ -503,7 +506,13 @@ const Grid = (props: GridProps) => {
}
})
const dataSource = createSelectDataSource(gridDto.gridOptions, listFormCode, searchParams, cols)
const dataSource = createSelectDataSource(
gridDto.gridOptions,
listFormCode,
searchParams,
cols,
layoutTypes.grid,
)
setGridDataSource(dataSource)
}, [gridDto, searchParams])
@ -798,8 +807,8 @@ const Grid = (props: GridProps) => {
}}
>
<Export
enabled={true}
allowExportSelectedData={false}
enabled={gridDto.gridOptions.exportDto?.enabled}
allowExportSelectedData={gridDto.gridOptions.exportDto?.allowExportSelectedData}
formats={['pdf', 'xlsx', 'csv']}
/>
<Editing
@ -816,7 +825,9 @@ const Grid = (props: GridProps) => {
}
startEditAction={gridDto.gridOptions.editingOptionDto?.startEditAction}
popup={{
title: (mode === 'new' ? '✚ ' : '🖊️ ') + translate('::' + gridDto.gridOptions.editingOptionDto?.popup?.title),
title:
(mode === 'new' ? '✚ ' : '🖊️ ') +
translate('::' + gridDto.gridOptions.editingOptionDto?.popup?.title),
showTitle: gridDto.gridOptions.editingOptionDto?.popup?.showTitle,
hideOnOutsideClick:
gridDto.gridOptions.editingOptionDto?.popup?.hideOnOutsideClick,
@ -1109,9 +1120,7 @@ const Grid = (props: GridProps) => {
selectAllMode={gridDto.gridOptions.selectionDto?.selectAllMode}
showCheckBoxesMode={gridDto.gridOptions.selectionDto?.showCheckBoxesMode}
></Selection>
<Paging
defaultPageSize={gridDto.gridOptions.pageSize ?? 20}
/>
<Paging defaultPageSize={gridDto.gridOptions.pageSize ?? 20} />
<Pager
visible={gridDto.gridOptions.pagerOptionDto?.visible}
allowedPageSizes={gridDto.gridOptions.pagerOptionDto?.allowedPageSizes

2
ui/src/views/list/Pivot.tsx
View file

@ -38,6 +38,7 @@ import { FaCog, FaTimes, FaUndo } from 'react-icons/fa'
import { usePermission } from '@/utils/hooks/usePermission'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { usePWA } from '@/utils/hooks/usePWA'
import { layoutTypes } from '../admin/listForm/edit/types'
interface PivotProps {
listFormCode: string
@ -233,6 +234,7 @@ const Pivot = (props: PivotProps) => {
listFormCode,
searchParams,
cols,
layoutTypes.pivot,
)
setGridDataSource(dataSource)

25
ui/src/views/list/Tree.tsx
View file

@ -2,7 +2,13 @@
import Container from '@/components/shared/Container'
import { Dialog, Notification, toast } from '@/components/ui'
import { DX_CLASSNAMES } from '@/constants/app.constant'
import { DbTypeEnum, EditingFormItemDto, GridDto, ListFormCustomizationTypeEnum, PlatformEditorTypes } from '@/proxy/form/models'
import {
DbTypeEnum,
EditingFormItemDto,
GridDto,
ListFormCustomizationTypeEnum,
PlatformEditorTypes,
} from '@/proxy/form/models'
import {
getListFormCustomization,
postListFormCustomization,
@ -54,6 +60,7 @@ import { useToolbar } from './useToolbar'
import WidgetGroup from '@/components/ui/Widget/WidgetGroup'
import { GridExtraFilterToolbar } from './GridExtraFilterToolbar'
import { getList } from '@/services/form.service'
import { layoutTypes } from '../admin/listForm/edit/types'
interface TreeProps {
listFormCode: string
@ -116,6 +123,7 @@ const Tree = (props: TreeProps) => {
}
}, [searchParams])
const layout = layoutTypes.tree
const { toolbarData, toolbarModalData, setToolbarModalData } = useToolbar({
gridDto,
listFormCode,
@ -125,7 +133,7 @@ const Tree = (props: TreeProps) => {
expandAll,
collapseAll,
getFilter,
isTree: true
layout,
})
const { filterToolbarData, ...filterData } = useFilters({
@ -473,7 +481,13 @@ const Tree = (props: TreeProps) => {
const cols = getBandedColumns()
setColumnData(cols)
const dataSource = createSelectDataSource(gridDto.gridOptions, listFormCode, searchParams, cols)
const dataSource = createSelectDataSource(
gridDto.gridOptions,
listFormCode,
searchParams,
cols,
layoutTypes.tree,
)
setTreeListDataSource(dataSource)
}, [gridDto, searchParams])
@ -569,8 +583,8 @@ const Tree = (props: TreeProps) => {
height={gridDto.gridOptions.height || 'calc(100vh - 150px)'}
width={gridDto.gridOptions.width || '100%'}
dataStructure="plain"
keyExpr={gridDto.gridOptions.keyFieldName}
parentIdExpr={gridDto.gridOptions.treeOptionDto?.parentIdExpr || 'parentId'}
keyExpr={gridDto.gridOptions.treeOptionDto?.keyExpr}
parentIdExpr={gridDto.gridOptions.treeOptionDto?.parentIdExpr}
hasItemsExpr={gridDto.gridOptions.treeOptionDto?.hasItemsExpr}
rootValue={
gridDto.gridOptions.treeOptionDto?.rootValue === '' ||
@ -838,7 +852,6 @@ const Tree = (props: TreeProps) => {
sortedFormDto.forEach((e: any) => {
if (e.itemType !== 'tabbed') {
result.push({
itemType: e.itemType,
colCount: e.colCount,

7
ui/src/views/list/useToolbar.tsx
View file

@ -8,6 +8,7 @@ import { ToolbarItem } from 'devextreme/ui/data_grid_types'
import { useEffect, useState } from 'react'
import { useDialogContext } from '../shared/DialogContext'
import { usePWA } from '@/utils/hooks/usePWA'
import { layoutTypes, ListViewLayoutType } from '../admin/listForm/edit/types'
type ToolbarModalData = {
open: boolean
@ -23,9 +24,9 @@ const useToolbar = ({
getSelectedRowsData,
refreshData,
getFilter,
layout,
expandAll,
collapseAll,
isTree = false,
}: {
gridDto?: GridDto
listFormCode: string
@ -33,9 +34,9 @@ const useToolbar = ({
getSelectedRowsData: () => any
refreshData: () => void
getFilter: () => void
layout: ListViewLayoutType | string
expandAll?: () => void
collapseAll?: () => void
isTree?: boolean
}): {
toolbarData: ToolbarItem[]
toolbarModalData: ToolbarModalData | undefined
@ -80,7 +81,7 @@ const useToolbar = ({
})
// Add Expand All button for TreeList
if (isTree) {
if (layout === layoutTypes.tree && grdOpt.treeOptionDto?.parentIdExpr) {
items.push({
widget: 'dxButton',
name: 'expandAllButton',