Genel Grid düzenlemesi
This commit is contained in:
parent
c11781e2b9
commit
b394c8d837
6 changed files with 36 additions and 21 deletions
|
|
@ -82,7 +82,7 @@ define(['./workbox-a959eb95'], (function (workbox) { 'use strict';
|
||||||
"revision": "3ca0b8505b4bec776b69afdba2768812"
|
"revision": "3ca0b8505b4bec776b69afdba2768812"
|
||||||
}, {
|
}, {
|
||||||
"url": "/index.html",
|
"url": "/index.html",
|
||||||
"revision": "0.sjlnuata16g"
|
"revision": "0.el21c3n5m38"
|
||||||
}], {});
|
}], {});
|
||||||
workbox.cleanupOutdatedCaches();
|
workbox.cleanupOutdatedCaches();
|
||||||
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("/index.html"), {
|
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("/index.html"), {
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import CustomStore from 'devextreme/data/custom_store'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import { FaPlus, FaTrash, FaEdit, FaFileAlt, FaSave } from 'react-icons/fa'
|
import { FaPlus, FaTrash, FaEdit, FaFileAlt, FaSave } from 'react-icons/fa'
|
||||||
import { useNavigate } from 'react-router-dom'
|
import { useNavigate } from 'react-router-dom'
|
||||||
import { GridColumnData } from '../list/GridColumnData'
|
import { GridColumnData, GridExtraFilterState } from '../list/GridColumnData'
|
||||||
import { useToolbar } from '../list/useToolbar'
|
import { useToolbar } from '../list/useToolbar'
|
||||||
import { PermissionResults, RowMode } from './types'
|
import { PermissionResults, RowMode } from './types'
|
||||||
import { GridDto } from '@/proxy/form/models'
|
import { GridDto } from '@/proxy/form/models'
|
||||||
|
|
@ -49,6 +49,7 @@ const FormButtons = (props: {
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
const [deleteRowId, setDeleteRowId] = useState<string>()
|
const [deleteRowId, setDeleteRowId] = useState<string>()
|
||||||
|
const [extraFilters, setExtraFilters] = useState<GridExtraFilterState[]>([])
|
||||||
|
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const { translate } = useLocalization()
|
const { translate } = useLocalization()
|
||||||
|
|
@ -59,6 +60,8 @@ const FormButtons = (props: {
|
||||||
getSelectedRowsData,
|
getSelectedRowsData,
|
||||||
refreshData,
|
refreshData,
|
||||||
getFilter,
|
getFilter,
|
||||||
|
extraFilters,
|
||||||
|
setExtraFilters,
|
||||||
})
|
})
|
||||||
|
|
||||||
const handleDelete = async (e: any) => {
|
const handleDelete = async (e: any) => {
|
||||||
|
|
|
||||||
|
|
@ -67,7 +67,7 @@ const FormEdit = (
|
||||||
></Helmet>
|
></Helmet>
|
||||||
)}
|
)}
|
||||||
<div className="flex items-center justify-between mb-4">
|
<div className="flex items-center justify-between mb-4">
|
||||||
<h3>{translate('::App.Languages.Language')}</h3>
|
<h3>{translate('::' + gridDto?.gridOptions.title)}</h3>
|
||||||
{permissionResults && (
|
{permissionResults && (
|
||||||
<FormButtons
|
<FormButtons
|
||||||
mode={mode}
|
mode={mode}
|
||||||
|
|
|
||||||
|
|
@ -62,7 +62,7 @@ const FormView = (
|
||||||
></Helmet>
|
></Helmet>
|
||||||
)}
|
)}
|
||||||
<div className="flex items-center justify-between mb-4">
|
<div className="flex items-center justify-between mb-4">
|
||||||
<h3>{translate('::App.Languages.Language')}</h3>
|
<h3>{translate('::' + gridDto?.gridOptions.title)}</h3>
|
||||||
{permissionResults && (
|
{permissionResults && (
|
||||||
<FormButtons
|
<FormButtons
|
||||||
mode={mode}
|
mode={mode}
|
||||||
|
|
|
||||||
|
|
@ -397,41 +397,53 @@ const Grid = (props: GridProps) => {
|
||||||
}, [gridDto])
|
}, [gridDto])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!gridDto) {
|
if (!gridDto) return
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set columns
|
|
||||||
const cols = getBandedColumns()
|
const cols = getBandedColumns()
|
||||||
setColumnData(cols)
|
setColumnData(cols)
|
||||||
|
|
||||||
// Filters'i AND ile birleştir
|
// 1. extraFilters'tan gelenleri ekle
|
||||||
let filterArray: any[] = []
|
const filterArray: any[] = []
|
||||||
extraFilters.forEach((f) => {
|
extraFilters.forEach((f) => {
|
||||||
if (f.value) {
|
if (f.value) {
|
||||||
if (filterArray.length > 0) {
|
if (filterArray.length > 0) filterArray.push('and')
|
||||||
filterArray.push('and')
|
|
||||||
}
|
|
||||||
filterArray.push([f.fieldName, f.operator, f.value])
|
filterArray.push([f.fieldName, f.operator, f.value])
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const params = new URLSearchParams()
|
// 2. searchParams içindeki kolonları filtreye çevir
|
||||||
if (filterArray.length > 0) {
|
const params = new URLSearchParams(searchParams)
|
||||||
params.set('filter', JSON.stringify(filterArray))
|
if (cols?.length) {
|
||||||
|
cols.forEach((col) => {
|
||||||
|
if (!col.dataField) return
|
||||||
|
const sValue = params.get(col.dataField)
|
||||||
|
if (sValue) {
|
||||||
|
if (filterArray.length > 0) filterArray.push('and')
|
||||||
|
filterArray.push([col.dataField, '=', sValue])
|
||||||
|
// orijinal paramı kaldır
|
||||||
|
params.delete(col.dataField)
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set data source
|
// 3. oluşan filtreleri `filter` paramına yaz
|
||||||
const dataSource: CustomStore<any, any> = createSelectDataSource(
|
if (filterArray.length > 0) {
|
||||||
|
params.set('filter', JSON.stringify(filterArray))
|
||||||
|
} else {
|
||||||
|
params.delete('filter')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4. datasource oluştur
|
||||||
|
const dataSource = createSelectDataSource(
|
||||||
gridDto.gridOptions,
|
gridDto.gridOptions,
|
||||||
listFormCode,
|
listFormCode,
|
||||||
searchParams,
|
params,
|
||||||
cols,
|
cols,
|
||||||
setWidgetGroups,
|
setWidgetGroups,
|
||||||
)
|
)
|
||||||
|
|
||||||
setGridDataSource(dataSource)
|
setGridDataSource(dataSource)
|
||||||
}, [gridDto, searchParams])
|
}, [gridDto, searchParams, extraFilters])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
refListFormCode.current = listFormCode
|
refListFormCode.current = listFormCode
|
||||||
|
|
|
||||||
|
|
@ -56,7 +56,7 @@ export function GridExtraFilterToolbar({
|
||||||
) : (
|
) : (
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="border rounded px-1 py-0.5"
|
className="border rounded px-1 py-1"
|
||||||
value={inputValues[fs.fieldName] ?? current?.value ?? ''}
|
value={inputValues[fs.fieldName] ?? current?.value ?? ''}
|
||||||
placeholder={fs.caption}
|
placeholder={fs.caption}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue