-
-
{getAppointmentTimeText(appointmentData)}
+
+
+ {previewDetails?.userName && (
+
+
+
+
+ User Name
+
+
+ {previewDetails.userName}
+
+
+
+ )}
+
+
+
+ {previewDetails?.description && (
+
+
+
+ Description
+
+
+ {previewDetails.description}
+
+
+ )}
+
+
+
+ {getAppointmentTimeText(appointmentData)}
+
{gridDto?.gridOptions.schedulerOptionDto?.allowDeleting && (
)
},
- [getAppointmentHtml, getAppointmentTimeText, gridDto],
+ [getAppointmentHtml, getAppointmentPreviewDetails, getAppointmentTimeText, gridDto],
)
const onAppointmentFormOpening = useCallback(
@@ -258,23 +444,88 @@ const SchedulerView = (props: SchedulerViewProps) => {
(!e.appointmentData.id && !e.appointmentData[gridDto.gridOptions.keyFieldName || 'id'])
const currentMode = isNewAppointment ? 'new' : 'edit'
- setMode(currentMode)
- // Popup ayarlarını her açılışta yeniden yapılandır
- e.popup.option(
- 'title',
- (currentMode === 'new' ? '✚ ' : '🖊️ ') +
- translate('::' + gridDto.gridOptions.editingOptionDto?.popup?.title),
- )
- e.popup.option('showTitle', gridDto.gridOptions.editingOptionDto?.popup?.showTitle)
- e.popup.option('width', gridDto.gridOptions.editingOptionDto?.popup?.width)
- e.popup.option('height', isPopupFullScreen ? '100%' : 'auto')
- e.popup.option(
- 'maxHeight',
- isPopupFullScreen ? '100%' : gridDto.gridOptions.editingOptionDto?.popup?.height || '90vh',
- )
- e.popup.option('resizeEnabled', gridDto.gridOptions.editingOptionDto?.popup?.resizeEnabled)
- e.popup.option('fullScreen', isPopupFullScreen)
+ if (isNewAppointment) {
+ const appointmentData = (e.appointmentData ?? {}) as Record
+ const defaultValues: Record = {}
+ const sequenceDefaults: Promise[] = []
+
+ for (const colFormat of gridDto.columnFormats ?? []) {
+ const fieldName = colFormat.fieldName
+
+ if (
+ !fieldName ||
+ colFormat.defaultValue === null ||
+ colFormat.defaultValue === undefined
+ ) {
+ continue
+ }
+
+ if (
+ typeof colFormat.defaultValue === 'string' &&
+ colFormat.defaultValue === '@AUTONUMBER'
+ ) {
+ defaultValues[fieldName] = autoNumber()
+ } else if (colFormat.defaultValueType === FieldCustomValueTypeEnum.Sequence) {
+ sequenceDefaults.push(
+ getNextSequenceValue(String(colFormat.defaultValue))
+ .then((response) => {
+ const value = response.data
+ appointmentData[fieldName] = value
+ e.form.updateData(fieldName, value)
+ })
+ .catch((error) => {
+ console.error('Sequence default value alınamadı:', {
+ fieldName,
+ defaultValue: colFormat.defaultValue,
+ error,
+ })
+ }),
+ )
+ } else {
+ defaultValues[fieldName] = colFormat.defaultValue
+ }
+ }
+
+ Object.assign(appointmentData, defaultValues)
+ e.form.option('formData', {
+ ...(e.form.option('formData') ?? {}),
+ ...appointmentData,
+ })
+
+ void Promise.all(sequenceDefaults)
+ }
+
+ const popupOptions = gridDto.gridOptions.editingOptionDto?.popup
+ const popupFullScreen =
+ useMobileEditPopup || isPopupFullScreen || (popupOptions?.fullScreen ?? false)
+
+ // Popup ayarlarını Grid ile aynı ölçü ve cihaz kurallarıyla yapılandır.
+ e.popup.option({
+ animation: {},
+ deferRendering: true,
+ dragEnabled: popupOptions?.dragEnabled,
+ fullScreen: popupFullScreen,
+ height: getEditPopupHeight(useMobileEditPopup, popupFullScreen),
+ hideOnOutsideClick: popupOptions?.hideOnOutsideClick,
+ maxHeight: getEditPopupMaxHeight(useMobileEditPopup, popupFullScreen, popupOptions?.height),
+ maxWidth: useMobileEditPopup ? '100%' : popupOptions?.width,
+ position: useMobileEditPopup
+ ? {
+ my: 'top center',
+ at: 'top center',
+ of: typeof window !== 'undefined' ? window : undefined,
+ }
+ : popupOptions?.position,
+ resizeEnabled: popupOptions?.resizeEnabled,
+ restorePosition: popupOptions?.restorePosition,
+ showTitle: popupOptions?.showTitle,
+ title: (currentMode === 'new' ? '✚ ' : '🖊️ ') + translate('::' + popupOptions?.title),
+ width: useMobileEditPopup ? '100%' : popupOptions?.width,
+ wrapperAttr: useMobileEditPopup
+ ? { class: 'dx-scheduler-appointment-popup mobile-edit-popup' }
+ : undefined,
+ })
// Toolbar butonlarını ekle
e.popup.option('toolbarItems', [
@@ -342,8 +593,8 @@ const SchedulerView = (props: SchedulerViewProps) => {
toolbar: 'top',
location: 'after',
options: {
- icon: 'fullscreen',
- hint: translate('::Tam Ekran'),
+ icon: popupFullScreen ? 'collapse' : 'fullscreen',
+ hint: popupFullScreen ? translate('::Normal Boyut') : translate('::Tam Ekran'),
stylingMode: 'text',
onClick: () => {
// Popup'tan mevcut fullScreen durumunu al
@@ -356,19 +607,16 @@ const SchedulerView = (props: SchedulerViewProps) => {
// Popup'ı güncelle
e.popup.option('fullScreen', newFullScreenState)
- // Width ve height'i da güncelle
- if (newFullScreenState) {
- e.popup.option('width', '100%')
- e.popup.option('height', '100%')
- e.popup.option('maxHeight', '100%')
- } else {
- e.popup.option('width', gridDto.gridOptions.editingOptionDto?.popup?.width || 600)
- e.popup.option('height', 'auto')
- e.popup.option(
- 'maxHeight',
- gridDto.gridOptions.editingOptionDto?.popup?.height || '90vh',
- )
- }
+ e.popup.option({
+ height: getEditPopupHeight(useMobileEditPopup, newFullScreenState),
+ maxHeight: getEditPopupMaxHeight(
+ useMobileEditPopup,
+ newFullScreenState,
+ popupOptions?.height,
+ ),
+ maxWidth: useMobileEditPopup ? '100%' : popupOptions?.width,
+ width: useMobileEditPopup ? '100%' : popupOptions?.width,
+ })
},
},
},
@@ -423,18 +671,6 @@ const SchedulerView = (props: SchedulerViewProps) => {
}
}
- // Set defaultValue for @AUTONUMBER fields
- if (
- typeof listFormField?.defaultValue === 'string' &&
- listFormField?.defaultValue === '@AUTONUMBER' &&
- currentMode === 'new'
- ) {
- editorOptions = {
- ...editorOptions,
- value: autoNumber(),
- }
- }
-
// EditorType belirleme
let editorType: any = i.editorType2
if (i.editorType2 === PlatformEditorTypes.dxGridBox) {
@@ -507,6 +743,9 @@ const SchedulerView = (props: SchedulerViewProps) => {
colSpan: i.colSpan,
editorOptions,
editorScript: i.editorScript,
+ isRequired:
+ listFormField.validationRuleDto?.some((rule) => rule.type === 'required') ?? false,
+ validationRules: (listFormField.validationRuleDto ?? []) as ValidationRule[],
}
if (i.captionName) {
@@ -549,21 +788,23 @@ const SchedulerView = (props: SchedulerViewProps) => {
const groupItems = sortedItems.map(mapFormItem).filter(isVisibleFormItem)
if (e.itemType !== 'tabbed') {
- // Grup kullanmadan direkt items'ları ekle - form'un colCount'u geçerli olsun
- result.push(...groupItems)
+ result.push({
+ itemType: e.itemType,
+ colCount: e.colCount || 1,
+ colSpan: e.colSpan || 1,
+ caption: e.caption,
+ items: groupItems,
+ })
} else if (e.itemType === 'tabbed' && tabbedItems.length > 0 && e === tabbedItems[0]) {
- // Tabbed için caption OLMAMALI - sadece tabs array içinde title kullan
result.push({
itemType: 'tabbed',
- // colCount tabbed item için OLMAMALI - sadece colSpan
+ colCount: 1,
colSpan: 1,
- // caption kullanma! Tabs içindeki title'lar yeterli
tabs: tabbedItems.map((tabbedItem: any) => {
- // Backend'den gelen colCount ve colSpan değerlerini kullan
- const effectiveColCount = tabbedItem.colCount || 2
+ const effectiveColCount = tabbedItem.colCount || 1
return {
- title: tabbedItem.caption, // Her tab'ın title'ı
+ title: tabbedItem.caption,
colCount: effectiveColCount,
items: tabbedItem.items
?.sort((a: any, b: any) =>
@@ -578,46 +819,68 @@ const SchedulerView = (props: SchedulerViewProps) => {
})
}
- // Form'u tamamen yeniden yapılandır
- const hasTabbedItems = result.some((item: any) => item.itemType === 'tabbed')
-
- // Form'u tamamen yeniden baştan yapılandır
- e.form.option(
- 'colCount',
- hasTabbedItems ? 1 : getEditingFormGroups(gridDto)?.[0]?.colCount || 2,
- )
- e.form.option(
- 'colCount',
- hasTabbedItems ? 1 : getEditingFormGroups(gridDto)?.[0]?.colCount || 2,
- )
+ e.form.option('colCount', 1)
e.form.option('showValidationSummary', false)
e.form.option('items', result)
-
- // Yeni versiyonlarda bu şekilde Style değiştirme işlemi yapmak zorunda olmayabiliriz.
- // Yani geçici olarak eklenmiştir.
- // Tabbed varsa belirli class'lara sahip elementi bul ve flex-direction'ı değiştir
- if (hasTabbedItems) {
- setTimeout(() => {
- const targetElement = document.querySelector(
- '.dx-item-content.dx-box-item-content.dx-box-flex.dx-box.dx-widget.dx-collection',
- )
- if (targetElement) {
- const htmlElement = targetElement as HTMLElement
-
- // Mevcut style'ı al ve flex-direction: row'u column'a çevir
- const currentStyle = htmlElement.getAttribute('style') || ''
- const updatedStyle = currentStyle.replace(
- /flex-direction:\s*row/gi,
- 'flex-direction: column',
- )
- htmlElement.setAttribute('style', updatedStyle)
- }
- }, 100)
- }
},
- [gridDto, translate, isPopupFullScreen, listFormCode],
+ [gridDto, translate, isPopupFullScreen, listFormCode, useMobileEditPopup],
)
+ const configuredEditPopup = gridDto?.gridOptions.editingOptionDto?.popup
+ const schedulerPopupFullScreen =
+ useMobileEditPopup || isPopupFullScreen || (configuredEditPopup?.fullScreen ?? false)
+ const schedulerPopupWidth = useMobileEditPopup ? '100%' : configuredEditPopup?.width
+ const schedulerEditingPopup = useMemo(
+ () =>
+ configuredEditPopup
+ ? {
+ animation: {},
+ deferRendering: true,
+ dragEnabled: configuredEditPopup.dragEnabled,
+ fullScreen: schedulerPopupFullScreen,
+ height: getEditPopupHeight(useMobileEditPopup, schedulerPopupFullScreen),
+ hideOnOutsideClick: configuredEditPopup.hideOnOutsideClick,
+ maxHeight: getEditPopupMaxHeight(
+ useMobileEditPopup,
+ schedulerPopupFullScreen,
+ configuredEditPopup.height,
+ ),
+ maxWidth: schedulerPopupWidth,
+ position: useMobileEditPopup
+ ? {
+ my: 'top center',
+ at: 'top center',
+ of: typeof window !== 'undefined' ? window : undefined,
+ }
+ : configuredEditPopup.position,
+ resizeEnabled: configuredEditPopup.resizeEnabled,
+ restorePosition: configuredEditPopup.restorePosition,
+ width: schedulerPopupWidth,
+ wrapperAttr: useMobileEditPopup
+ ? { class: 'dx-scheduler-appointment-popup mobile-edit-popup' }
+ : undefined,
+ onShowing: (event: any) => {
+ event.component.option({
+ fullScreen: schedulerPopupFullScreen,
+ height: getEditPopupHeight(useMobileEditPopup, schedulerPopupFullScreen),
+ maxHeight: getEditPopupMaxHeight(
+ useMobileEditPopup,
+ schedulerPopupFullScreen,
+ configuredEditPopup.height,
+ ),
+ maxWidth: schedulerPopupWidth,
+ width: schedulerPopupWidth,
+ })
+ },
+ }
+ : undefined,
+ [configuredEditPopup, schedulerPopupFullScreen, schedulerPopupWidth, useMobileEditPopup],
+ )
+ const schedulerDescriptionExpr =
+ gridDto?.gridOptions.schedulerOptionDto?.descriptionExpr ??
+ gridDto?.columnFormats?.find((column) => column.fieldName?.toLowerCase() === 'description')
+ ?.fieldName
+
return (
<>
0 ? 'mt-2' : ''}>
@@ -652,6 +915,7 @@ const SchedulerView = (props: SchedulerViewProps) => {
className="list-view-toolbar-host"
dataSource={schedulerDataSource}
dateSerializationFormat="yyyy-MM-ddTHH:mm:ss"
+ descriptionExpr={schedulerDescriptionExpr}
textExpr={gridDto.gridOptions.schedulerOptionDto?.textExpr || 'text'}
startDateExpr={gridDto.gridOptions.schedulerOptionDto?.startDateExpr || 'startDate'}
endDateExpr={gridDto.gridOptions.schedulerOptionDto?.endDateExpr || 'endDate'}
@@ -736,10 +1000,12 @@ const SchedulerView = (props: SchedulerViewProps) => {