Grid Popupformun Resize ve FullScreen butonu eklenmesi
This commit is contained in:
Sedat Öztürk
parent
226e71d1a7
commit
2d8a856626
5 changed files with 59 additions and 20 deletions
|
|
@ -14,4 +14,7 @@ public class GridEditingPopupDto
|
|||
/// <summary> guncelleme asamasinda popup ekranin disinda bir alana tiklanirsa popup ekran kapansin
|
||||
/// </summary>
|
||||
public bool HideOnOutsideClick { get; set; } = true;
|
||||
/// <summary> popup ekranin küçültülüp büyütülebilmesini saglar
|
||||
/// </summary>
|
||||
public bool ResizeEnabled { get; set; } = true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4837,6 +4837,12 @@
|
|||
"en": "Full Screen",
|
||||
"tr": "Tam Ekran"
|
||||
},
|
||||
{
|
||||
"resourceName": "Platform",
|
||||
"key": "ListForms.ListFormEdit.ResizeEnabled",
|
||||
"en": "Resize Enabled",
|
||||
"tr": "Küçültme/Büyütme İzni"
|
||||
},
|
||||
{
|
||||
"resourceName": "Platform",
|
||||
"key": "ListForms.ListFormEdit.EditingForm",
|
||||
|
|
|
|||
|
|
@ -426,6 +426,7 @@ export interface GridEditingPopupDto {
|
|||
height: number
|
||||
fullScreen: boolean
|
||||
hideOnOutsideClick: boolean
|
||||
resizeEnabled: boolean
|
||||
}
|
||||
|
||||
export interface GridFilterRowDto {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,5 @@
|
|||
import { Container } from '@/components/shared'
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Checkbox,
|
||||
FormContainer,
|
||||
FormItem,
|
||||
Input,
|
||||
Select,
|
||||
} from '@/components/ui'
|
||||
import { Button, Card, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
|
||||
import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
|
||||
import { useStoreState } from '@/store'
|
||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||
|
|
@ -348,6 +340,20 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
|
|||
component={Checkbox}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label={translate('::ListForms.ListFormEdit.ResizeEnabled')}
|
||||
invalid={
|
||||
errors.editingOptionDto?.popup?.resizeEnabled &&
|
||||
touched.editingOptionDto?.popup?.resizeEnabled
|
||||
}
|
||||
errorMessage={errors.editingOptionDto?.popup?.resizeEnabled}
|
||||
>
|
||||
<Field
|
||||
name="editingOptionDto.popup.resizeEnabled"
|
||||
placeholder={translate('::ListForms.ListFormEdit.ResizeEnabled')}
|
||||
component={Checkbox}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label={translate('::ListForms.ListFormEdit.EditingHideOnOutsideClick')}
|
||||
invalid={
|
||||
|
|
|
|||
|
|
@ -93,6 +93,7 @@ const Grid = (props: GridProps) => {
|
|||
const [mode, setMode] = useState<RowMode>('view')
|
||||
const [extraFilters, setExtraFilters] = useState<GridExtraFilterState[]>([])
|
||||
const [gridDto, setGridDto] = useState<GridDto>()
|
||||
const [isPopupFullScreen, setIsPopupFullScreen] = useState(false)
|
||||
|
||||
const preloadExportLibs = () => {
|
||||
import('exceljs')
|
||||
|
|
@ -262,6 +263,7 @@ const Grid = (props: GridProps) => {
|
|||
}
|
||||
|
||||
setMode('new')
|
||||
setIsPopupFullScreen(gridDto?.gridOptions.editingOptionDto?.popup?.fullScreen ?? false)
|
||||
|
||||
for (const colFormat of gridDto?.columnFormats) {
|
||||
if (!colFormat.fieldName) {
|
||||
|
|
@ -357,6 +359,7 @@ const Grid = (props: GridProps) => {
|
|||
|
||||
function onEditingStart(e: DataGridTypes.EditingStartEvent<any, any>) {
|
||||
setMode('edit')
|
||||
setIsPopupFullScreen(gridDto?.gridOptions.editingOptionDto?.popup?.fullScreen ?? false)
|
||||
const columns = e.component.option('columns') as GridColumnData[]
|
||||
// FormEditingExtraItem field ise datayı doldur
|
||||
columns?.forEach((col) => {
|
||||
|
|
@ -452,6 +455,10 @@ const Grid = (props: GridProps) => {
|
|||
})),
|
||||
)
|
||||
}
|
||||
|
||||
if (gridDto.gridOptions.editingOptionDto?.popup) {
|
||||
setIsPopupFullScreen(gridDto.gridOptions.editingOptionDto?.popup?.fullScreen ?? false)
|
||||
}
|
||||
}, [gridDto])
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -700,9 +707,11 @@ const Grid = (props: GridProps) => {
|
|||
onExporting={onExporting}
|
||||
onEditCanceled={() => {
|
||||
setMode('view')
|
||||
setIsPopupFullScreen(false)
|
||||
}}
|
||||
onSaved={() => {
|
||||
setMode('view')
|
||||
setIsPopupFullScreen(false)
|
||||
}}
|
||||
onRowInserted={() => {
|
||||
props.refreshData?.()
|
||||
|
|
@ -807,16 +816,32 @@ const Grid = (props: GridProps) => {
|
|||
}
|
||||
startEditAction={gridDto.gridOptions.editingOptionDto?.startEditAction}
|
||||
popup={{
|
||||
title: 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,
|
||||
width: gridDto.gridOptions.editingOptionDto?.popup?.width,
|
||||
height: gridDto.gridOptions.editingOptionDto?.popup?.height,
|
||||
fullScreen: gridDto.gridOptions.editingOptionDto?.popup?.fullScreen,
|
||||
resizeEnabled: gridDto.gridOptions.editingOptionDto?.popup?.resizeEnabled,
|
||||
fullScreen: isPopupFullScreen,
|
||||
toolbarItems: [
|
||||
{
|
||||
widget: 'dxButton',
|
||||
toolbar: 'top',
|
||||
location: 'after',
|
||||
options: {
|
||||
icon: isPopupFullScreen ? 'collapse' : 'fullscreen',
|
||||
hint: isPopupFullScreen
|
||||
? translate('::Normal Boyut')
|
||||
: translate('::Tam Ekran'),
|
||||
stylingMode: 'text',
|
||||
onClick: () => setIsPopupFullScreen(!isPopupFullScreen),
|
||||
},
|
||||
},
|
||||
],
|
||||
}}
|
||||
form={{
|
||||
colCount: 1,
|
||||
colCount: 1,
|
||||
onFieldDataChanged: (e) => {
|
||||
if (e.dataField) {
|
||||
const formItem = gridDto.gridOptions.editingFormDto
|
||||
|
|
@ -839,7 +864,9 @@ const Grid = (props: GridProps) => {
|
|||
.sort((a: any, b: any) => (a.order >= b.order ? 1 : -1))
|
||||
|
||||
// Tabbed item'ları grupla
|
||||
const tabbedItems = sortedFormDto.filter((e: any) => e.itemType === 'tabbed')
|
||||
const tabbedItems = sortedFormDto.filter(
|
||||
(e: any) => e.itemType === 'tabbed',
|
||||
)
|
||||
const result: any[] = []
|
||||
|
||||
// Helper function: item mapper
|
||||
|
|
@ -956,11 +983,8 @@ const Grid = (props: GridProps) => {
|
|||
const maxItemColSpan = Math.max(
|
||||
...(e.items?.map((i: any) => i.colSpan || 1) || [1]),
|
||||
)
|
||||
const effectiveColCount = Math.max(
|
||||
maxItemColSpan,
|
||||
e.colCount || 1,
|
||||
)
|
||||
|
||||
const effectiveColCount = Math.max(maxItemColSpan, e.colCount || 1)
|
||||
|
||||
result.push({
|
||||
itemType: e.itemType,
|
||||
colCount: effectiveColCount,
|
||||
|
|
@ -985,7 +1009,7 @@ const Grid = (props: GridProps) => {
|
|||
// Tabbed için caption OLMAMALI - sadece tabs array içinde title kullan
|
||||
result.push({
|
||||
itemType: 'tabbed',
|
||||
colCount: 1,
|
||||
colCount: 1,
|
||||
colSpan: 1,
|
||||
// caption kullanma! Tabs içindeki title'lar yeterli
|
||||
tabs: tabbedItems.map((tabbedItem: any) => {
|
||||
|
|
@ -998,7 +1022,6 @@ const Grid = (props: GridProps) => {
|
|||
tabbedItem.colCount || 1,
|
||||
)
|
||||
|
||||
|
||||
return {
|
||||
title: tabbedItem.caption, // Her tab'ın title'ı
|
||||
colCount: effectiveColCount,
|
||||
|
|
|
|||
Loading…
Reference in a new issue