Gantt düzenlemesi 2

2025-12-02 12:28:54 +03:00 · 2025-12-02 12:28:54 +03:00 · 5a4244dee3
commit 5a4244dee3
parent 7cf448ec13
8 changed files with 169 additions and 141 deletions
--- a/api/src/Erp.Platform.DbMigrator/Seeds/ListFormSeeder_Project.cs
+++ b/api/src/Erp.Platform.DbMigrator/Seeds/ListFormSeeder_Project.cs
@ -2124,9 +2124,10 @@ public class ListFormSeeder_Project : IDataSeedContributor, ITransientDependency
                        new() {
                            Order=1, ColCount=2, ColSpan=1, ItemType="group", Items =[
                                new EditingFormItemDto { Order = 1, DataField="Name", ColSpan = 1, IsRequired = true, EditorType2 = EditorTypes.dxTextBox },
-                                new EditingFormItemDto { Order = 2, DataField="Description", ColSpan = 2, EditorType2 = EditorTypes.dxTextArea },
-                                new EditingFormItemDto { Order = 3, DataField="StartDate", ColSpan = 1, IsRequired = true, EditorType2 = EditorTypes.dxDateBox, EditorOptions = EditorOptionValues.DateTimeFormat },
-                                new EditingFormItemDto { Order = 4, DataField="EndDate", ColSpan = 1, IsRequired = true, EditorType2 = EditorTypes.dxDateBox, EditorOptions = EditorOptionValues.DateTimeFormat },
+                                new EditingFormItemDto { Order = 2, DataField="Progress", ColSpan = 1, EditorType2 = EditorTypes.dxNumberBox },
+                                new EditingFormItemDto { Order = 3, DataField="StartDate", ColSpan = 1, IsRequired = true, EditorType2 = EditorTypes.dxDateBox, EditorOptions = EditorOptionValues.DateFormat },
+                                new EditingFormItemDto { Order = 4, DataField="EndDate", ColSpan = 1, IsRequired = true, EditorType2 = EditorTypes.dxDateBox, EditorOptions = EditorOptionValues.DateFormat },
+                                new EditingFormItemDto { Order = 5, DataField="Description", ColSpan = 2, EditorType2 = EditorTypes.dxTextArea },
                            ]}
                    }),
                }, autoSave: true
@ -2209,9 +2210,10 @@ public class ListFormSeeder_Project : IDataSeedContributor, ITransientDependency
                new() {
                    ListFormCode = listForm.ListFormCode,
                    CultureName = LanguageCodes.En,
-                    SourceDbType = DbType.DateTime,
+                    SourceDbType = DbType.Date,
                    FieldName = "StartDate",
-                    Width = 150,
+                    Alignment = "center",
+                    Width = 100,
                    ListOrderNo = 5,
                    Visible = true,
                    IsActive = true,
@ -2225,9 +2227,10 @@ public class ListFormSeeder_Project : IDataSeedContributor, ITransientDependency
                new() {
                    ListFormCode = listForm.ListFormCode,
                    CultureName = LanguageCodes.En,
-                    SourceDbType = DbType.DateTime,
+                    SourceDbType = DbType.Date,
                    FieldName = "EndDate",
-                    Width = 150,
+                    Alignment = "center",
+                    Width = 100,
                    ListOrderNo = 6,
                    Visible = true,
                    IsActive = true,
@ -2243,7 +2246,9 @@ public class ListFormSeeder_Project : IDataSeedContributor, ITransientDependency
                    CultureName = LanguageCodes.En,
                    SourceDbType = DbType.Decimal,
                    FieldName = "Progress",
-                    Width = 100,
+                    Format = "fixedPoint",
+                    Alignment = "right",
+                    Width = 70,
                    ListOrderNo = 7,
                    Visible = true,
                    IsActive = true,
--- a/ui/src/views/admin/listForm/edit/ChartTabCommonSettings.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabCommonSettings.tsx
@ -90,7 +90,16 @@ function ChartTabCommonSettings(props: FormEditProps) {
                    }
                    errorMessage={errors.commonDto?.containerBackgroundColor}
                  >
-                    <Field name="commonDto.containerBackgroundColor" component={Input} />
+                    <Field name="commonDto.containerBackgroundColor">
+                      {({ field, form }: FieldProps) => (
+                        <Input
+                          {...field}
+                          type="color"
+                          className='!h-10 !p-0 !m-0 !border-0'
+                          onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                        />
+                      )}
+                    </Field>
                  </FormItem>

                  <FormItem
--- a/ui/src/views/admin/listForm/edit/FormTabDetails.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabDetails.tsx
@ -283,20 +283,6 @@ function FormTabDetails(
              )}

              <div className="flex gap-2">
-                <FormItem
-                  label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.GanttLayout')}
-                  invalid={errors.layoutDto?.gantt && touched.layoutDto?.gantt}
-                  errorMessage={errors.layoutDto?.gantt}
-                >
-                  <Field
-                    className="w-20"
-                    autoComplete="off"
-                    name="layoutDto.gantt"
-                    placeholder={translate('::ListForms.ListFormEdit.DetailsLayoutDto.GanttLayout')}
-                    component={Checkbox}
-                  />
-                </FormItem>
-
                <FormItem
                  label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.GridLayout')}
                  invalid={errors.layoutDto?.grid && touched.layoutDto?.grid}
@ -366,6 +352,20 @@ function FormTabDetails(
                    component={Checkbox}
                  />
                </FormItem>
+
+                <FormItem
+                  label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.GanttLayout')}
+                  invalid={errors.layoutDto?.gantt && touched.layoutDto?.gantt}
+                  errorMessage={errors.layoutDto?.gantt}
+                >
+                  <Field
+                    className="w-20"
+                    autoComplete="off"
+                    name="layoutDto.gantt"
+                    placeholder={translate('::ListForms.ListFormEdit.DetailsLayoutDto.GanttLayout')}
+                    component={Checkbox}
+                  />
+                </FormItem>
              </div>

              <FormItem
--- a/ui/src/views/list/GanttView.tsx
+++ b/ui/src/views/list/GanttView.tsx
@ -1,28 +1,34 @@
 import Container from '@/components/shared/Container'
-import { Dialog, Notification, toast } from '@/components/ui'
 import { DX_CLASSNAMES } from '@/constants/app.constant'
 import { GridDto } from '@/proxy/form/models'
 import { useLocalization } from '@/utils/hooks/useLocalization'
-import useResponsive from '@/utils/hooks/useResponsive'
 import Gantt, {
  Column,
+  ContextMenu,
  Editing,
+  FilterRow,
  GanttRef,
+  HeaderFilter,
  Item,
+  Sorting,
  Tasks,
  Toolbar,
  Validation,
 } from 'devextreme-react/gantt'
-import DataSource from 'devextreme/data/data_source'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet'
 import { getList } from '@/services/form.service'
 import { useListFormCustomDataSource } from './useListFormCustomDataSource'
-import { useToolbar } from './useToolbar'
-import { useFilters } from './useFilters'
 import { addCss, addJs } from './Utils'
 import { layoutTypes } from '../admin/listForm/edit/types'
 import WidgetGroup from '@/components/ui/Widget/WidgetGroup'
+import { ROUTES_ENUM } from '@/routes/route.constant'
+import { usePWA } from '@/utils/hooks/usePWA'
+import { GanttScaleType } from 'devextreme/ui/gantt'
+import { useListFormColumns } from './useListFormColumns'
+import CustomStore from 'devextreme/data/custom_store'
+import { GridColumnData } from './GridColumnData'
+import { Loading } from '@/components/shared'

 interface GanttViewProps {
  listFormCode: string
@ -36,15 +42,18 @@ interface GanttViewProps {
 const GanttView = (props: GanttViewProps) => {
  const { listFormCode, searchParams, isSubForm, level, gridDto: extGridDto } = props
  const { translate } = useLocalization()
-  const { smaller } = useResponsive()
+  const isPwaMode = usePWA()

-  const ganttRef = useRef<GanttRef>()
+  const gridRef = useRef<GanttRef>()
  const refListFormCode = useRef('')
  const widgetGroupRef = useRef<HTMLDivElement>(null)

-  const [ganttDataSource, setGanttDataSource] = useState<DataSource<any, any>>()
+  const [ganttDataSource, setGanttDataSource] = useState<CustomStore<any, any>>()
+  const [columnData, setColumnData] = useState<GridColumnData[]>()
  const [gridDto, setGridDto] = useState<GridDto>()
  const [widgetGroupHeight, setWidgetGroupHeight] = useState(0)
+  const [scaleType, setScaleType] = useState<GanttScaleType>('weeks')
+  const layout = layoutTypes.gantt || 'gantt'

  useEffect(() => {
    const initializeGantt = async () => {
@ -59,44 +68,9 @@ const GanttView = (props: GanttViewProps) => {
    }
  }, [listFormCode, extGridDto])

-  const layout = layoutTypes.gantt || 'gantt'
-  const { toolbarData, toolbarModalData, setToolbarModalData } = useToolbar({
-    gridDto,
-    listFormCode,
-    getSelectedRowKeys: () => Promise.resolve([]),
-    getSelectedRowsData: () => [],
-    refreshData,
-    getFilter: () => undefined,
-    layout,
-  })
-
-  const { filterToolbarData, ...filterData } = useFilters({
-    gridDto,
-    gridRef: ganttRef as any,
-    listFormCode,
-  })
-
-  const { createSelectDataSource } = useListFormCustomDataSource({ gridRef: ganttRef as any })
-
-  function refreshData() {
-    ganttRef.current?.instance()?.refresh()
-  }
-
-  function onTaskInserted() {
-    props.refreshData?.()
-  }
-
-  function onTaskUpdated() {
-    props.refreshData?.()
-  }
-
-  function onTaskDeleted() {
-    props.refreshData?.()
-  }
-
  useEffect(() => {
-    if (ganttRef?.current) {
-      const instance = ganttRef?.current?.instance()
+    if (gridRef?.current) {
+      const instance = gridRef?.current?.instance()
      if (instance) {
        instance.option('dataSource', undefined)
      }
@ -107,6 +81,14 @@ const GanttView = (props: GanttViewProps) => {
    }
  }, [listFormCode])

+  const { createSelectDataSource } = useListFormCustomDataSource({ gridRef })
+  const { getBandedColumns } = useListFormColumns({
+    gridDto,
+    listFormCode,
+    isSubForm,
+    gridRef,
+  })
+
  useEffect(() => {
    if (!gridDto) {
      return
@ -129,7 +111,10 @@ const GanttView = (props: GanttViewProps) => {
  useEffect(() => {
    if (!gridDto) return

-    const customStore = createSelectDataSource(
+    const cols = getBandedColumns()
+    setColumnData(cols)
+
+    const dataSource = createSelectDataSource(
      gridDto.gridOptions,
      listFormCode,
      searchParams,
@ -137,12 +122,6 @@ const GanttView = (props: GanttViewProps) => {
      undefined,
    )

-    // Gantt için DataSource wrapper'ı oluştur
-    const dataSource = new DataSource({
-      store: customStore,
-      reshapeOnPush: true,
-    })
-
    setGanttDataSource(dataSource)
  }, [gridDto, searchParams, createSelectDataSource])

@ -171,26 +150,35 @@ const GanttView = (props: GanttViewProps) => {
    }
  }, [gridDto?.widgets])

-  // Gantt için sütunları oluştur
-  const getGanttColumns = useCallback(() => {
-    if (!gridDto?.columnFormats) return []
+  const settingButtonClick = useCallback(() => {
+    window.open(
+      ROUTES_ENUM.protected.saas.listFormManagement.edit.replace(':listFormCode', listFormCode),
+      isPwaMode ? '_self' : '_blank',
+    )
+  }, [])

-    return gridDto.columnFormats
-      .filter((col) => col.canRead && col.isActive && col.visible)
-      .map((col) => {
-        const column: any = {
-          dataField: col.fieldName,
-          caption: col.captionName ? translate('::' + col.captionName) : col.fieldName,
-          width: col.width > 0 ? col.width : undefined,
-          alignment: col.alignment,
-          format: col.format,
-        }
+  const getSettingButtonOptions = useCallback(
+    () => ({
+      icon: 'preferences',
+      stylingMode: 'icon',
+      onClick: () => {
+        settingButtonClick()
+      },
+    }),
+    [settingButtonClick],
+  )

-        return column
-      })
-  }, [gridDto, translate])
-
-  const ganttColumns = getGanttColumns()
+  const getRefreshButtonOptions = useCallback(
+    () => ({
+      icon: 'refresh',
+      text: translate('::ListForms.ListForm.Refresh'),
+      stylingMode: 'icon',
+      onClick: () => {
+        gridRef.current?.instance()?.refresh()
+      },
+    }),
+    [settingButtonClick],
+  )

  return (
    <>
@ -208,17 +196,25 @@ const GanttView = (props: GanttViewProps) => {
            <link rel="stylesheet" href="/css/gantt/dx-gantt.min.css" />
          </Helmet>
        )}
-        {!gridDto && <div className="p-4">Loading gantt configuration...</div>}
-        {gridDto && !ganttDataSource && <div className="p-4">Loading data source...</div>}
-        {gridDto && ganttDataSource && (
+        {!gridDto && (
+          <div className="p-4">
+            <Loading loading>Loading gantt configuration...</Loading>
+          </div>
+        )}
+        {gridDto && !ganttDataSource && (
+          <div className="p-4">
+            <Loading loading>Loading data source...</Loading>
+          </div>
+        )}
+        {gridDto && columnData && ganttDataSource && (
          <>
            <div className="p-1">
              <Gantt
-                ref={ganttRef as any}
+                ref={gridRef as any}
                key={`Gantt-${listFormCode}-${ganttDataSource ? 'loaded' : 'loading'}`}
                id={'Gantt-' + listFormCode}
                taskListWidth={500}
-                scaleType="weeks"
+                scaleType={scaleType}
                rootValue={
                  gridDto.gridOptions.treeOptionDto?.rootValue === '' ||
                  gridDto.gridOptions.treeOptionDto?.rootValue === undefined
@ -230,13 +226,8 @@ const GanttView = (props: GanttViewProps) => {
                    ? gridDto.gridOptions.height
                    : gridDto.gridOptions.fullHeight
                      ? `calc(100vh - ${170 + widgetGroupHeight}px)`
-                      : 700
+                      : undefined
                }
-                showResources={true}
-                showDependencies={true}
-                onTaskInserted={onTaskInserted}
-                onTaskUpdated={onTaskUpdated}
-                onTaskDeleted={onTaskDeleted}
              >
                <Tasks
                  dataSource={ganttDataSource}
@ -249,52 +240,59 @@ const GanttView = (props: GanttViewProps) => {
                />

                <Toolbar>
-                  <Item name="undo" />
-                  <Item name="redo" />
-                  <Item name="separator" />
+                  {/* <Item name="undo" /> */}
+                  {/* <Item name="redo" /> */}
+                  {/* <Item name="separator" /> */}
                  <Item name="collapseAll" />
                  <Item name="expandAll" />
                  <Item name="separator" />
-                  <Item name="addTask" />
-                  <Item name="deleteTask" />
-                  <Item name="separator" />
+                  {/* <Item name="addTask" /> */}
+                  {/* <Item name="deleteTask" /> */}
+                  {/* <Item name="separator" /> */}
                  <Item name="zoomIn" />
                  <Item name="zoomOut" />
+                  <Item name="separator" />
+                  <Item
+                    location="after"
+                    widget="dxSelectBox"
+                    options={{
+                      width: 150,
+                      items: [
+                        { value: 'auto', text: translate('::Auto') },
+                        { value: 'minutes', text: translate('::Minutes') },
+                        { value: 'hours', text: translate('::Hours') },
+                        { value: 'days', text: translate('::Days') },
+                        { value: 'weeks', text: translate('::Weeks') },
+                        { value: 'months', text: translate('::Months') },
+                        { value: 'quarters', text: translate('::Quarters') },
+                        { value: 'years', text: translate('::Years') },
+                      ],
+                      displayExpr: 'text',
+                      valueExpr: 'value',
+                      value: scaleType,
+                      onValueChanged: (e: any) => setScaleType(e.value),
+                    }}
+                  />
+                  <Item location="after" widget="dxButton" options={getRefreshButtonOptions()} />
+                  <Item location="after" widget="dxButton" options={getSettingButtonOptions()} />
                </Toolbar>

-                <Editing
-                  enabled={gridDto.gridOptions.editingOptionDto?.allowUpdating}
-                  allowTaskAdding={gridDto.gridOptions.editingOptionDto?.allowAdding}
-                  allowTaskUpdating={gridDto.gridOptions.editingOptionDto?.allowUpdating}
-                  allowTaskDeleting={gridDto.gridOptions.editingOptionDto?.allowDeleting}
-                  allowDependencyAdding={false}
-                  allowDependencyDeleting={false}
-                  allowResourceAdding={false}
-                  allowResourceDeleting={false}
-                />
-
+                <Editing enabled={false} />
+                <FilterRow visible={gridDto.gridOptions.filterRowDto?.visible}></FilterRow>
+                <HeaderFilter visible={gridDto.gridOptions.headerFilterDto.visible}></HeaderFilter>
+                <Sorting mode={gridDto.gridOptions?.sortMode}></Sorting>
                <Validation autoUpdateParentTasks={true} />
+                <ContextMenu enabled={false} />

-                {ganttColumns.map((col: any) => (
-                  <Column
-                    key={col.dataField}
-                    dataField={col.dataField}
-                    caption={col.caption}
-                    width={col.width}
-                  />
-                ))}
+                {columnData
+                  .filter((col) => col.type != 'buttons')
+                  .map((col: any) => (
+                    <Column key={col.dataField} {...col} />
+                  ))}
              </Gantt>
            </div>
          </>
        )}
-
-        <Dialog
-          isOpen={toolbarModalData?.open || false}
-          onClose={() => setToolbarModalData(undefined)}
-          onRequestClose={() => setToolbarModalData(undefined)}
-        >
-          {toolbarModalData?.content}
-        </Dialog>
      </Container>
    </>
  )
--- a/ui/src/views/list/Grid.tsx
+++ b/ui/src/views/list/Grid.tsx
@ -70,6 +70,7 @@ import { getList } from '@/services/form.service'
 import { layoutTypes } from '../admin/listForm/edit/types'
 import { useListFormCustomDataSource } from './useListFormCustomDataSource'
 import { useListFormColumns } from './useListFormColumns'
+import { Loading } from '@/components/shared'

 interface GridProps {
  listFormCode: string
@ -811,10 +812,20 @@ const Grid = (props: GridProps) => {
            defaultTitle="Erp Platform"
          ></Helmet>
        )}
-        {!gridDto && <div className="p-4">Loading grid configuration...</div>}
-        {gridDto && !columnData && <div className="p-4">Loading columns...</div>}
+        {!gridDto && (
+          <div className="p-4">
+            <Loading loading>Loading grid configuration...</Loading>
+          </div>
+        )}
+        {gridDto && !columnData && (
+          <div className="p-4">
+            <Loading loading>Loading columns...</Loading>
+          </div>
+        )}
        {gridDto && columnData && !gridDataSource && (
-          <div className="p-4">Loading data source...</div>
+          <div className="p-4">
+            <Loading loading>Loading data source...</Loading>
+          </div>
        )}
        {gridDto &&
          columnData &&
--- a/ui/src/views/list/List.tsx
+++ b/ui/src/views/list/List.tsx
@ -96,7 +96,8 @@ const List = () => {

        <div className="flex gap-1">
          {gridDto?.gridOptions?.layoutDto.gantt &&
-            gridDto?.gridOptions?.treeOptionDto?.parentIdExpr && (
+            gridDto?.gridOptions?.treeOptionDto?.parentIdExpr &&
+            gridDto?.gridOptions?.treeOptionDto?.titleExpr && (
              <Button
                size="xs"
                variant={viewMode === 'gantt' ? 'solid' : 'default'}
--- a/ui/src/views/list/useFilters.tsx
+++ b/ui/src/views/list/useFilters.tsx
@ -18,6 +18,7 @@ import { setGridPanelColor } from './Utils'
 import { usePermission } from '@/utils/hooks/usePermission'
 import { usePWA } from '@/utils/hooks/usePWA'
 import { ROUTES_ENUM } from '@/routes/route.constant'
+import { GanttRef } from 'devextreme-react/cjs/gantt'

 export interface ISelectBoxData {
  value?: string
@ -144,6 +145,7 @@ const useFilters = ({
    | MutableRefObject<DataGridRef<any, any> | undefined>
    | MutableRefObject<PivotGridRef | undefined>
    | MutableRefObject<TreeListRef<any, any> | undefined>
+    | MutableRefObject<GanttRef | undefined>
  listFormCode: string
 }): {
  filterToolbarData: ToolbarItem[]
--- a/ui/src/views/list/useListFormCustomDataSource.ts
+++ b/ui/src/views/list/useListFormCustomDataSource.ts
@ -9,6 +9,7 @@ import { GridColumnData } from './GridColumnData'
 import { dynamicFetch } from '@/services/form.service'
 import { MULTIVALUE_DELIMITER } from '@/constants/app.constant'
 import { TreeListRef } from 'devextreme-react/cjs/tree-list'
+import { GanttRef } from 'devextreme-react/cjs/gantt'

 const filteredGridPanelColor = 'rgba(10, 200, 10, 0.5)' // kullanici tanimli filtre ile filtrelenmis gridin paneline ait renk

@ -19,6 +20,7 @@ const useListFormCustomDataSource = ({
    | MutableRefObject<DataGridRef<any, any> | undefined>
    | MutableRefObject<PivotGridRef | undefined>
    | MutableRefObject<TreeListRef<any, any> | undefined>
+    | MutableRefObject<GanttRef | undefined>
 }) => {
  const createSelectDataSource = useCallback(
    (