Skip to content

Scheduler - Appointment Form - Fix resource items' names #32849

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Tucchhaa wants to merge 2 commits into
base: 25_2
Choose a base branch
from
+36 −63
Draft

Scheduler - Appointment Form - Fix resource items' names #32849

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
96c35e5
fix & test
Tucchhaa Mar 10, 2026
fa5d725
fix resources demo
Tucchhaa Mar 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/demos/Demos/Scheduler/Resources/Angular/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@
[colCountByScreen]="{ xs: 3 }"
>
<dxi-scheduler-item name="roomIdIcon"></dxi-scheduler-item>
<dxi-scheduler-item name="roomId"></dxi-scheduler-item>
<dxi-scheduler-item name="priorityId"></dxi-scheduler-item>
<dxi-scheduler-item name="roomIdEditor"></dxi-scheduler-item>
<dxi-scheduler-item name="priorityIdEditor"></dxi-scheduler-item>
</dxi-scheduler-item>
<dxi-scheduler-item name="assigneeIdGroup"></dxi-scheduler-item>
</dxi-scheduler-item>
Expand Down
4 changes: 2 additions & 2 deletions apps/demos/Demos/Scheduler/Resources/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,8 @@ const App = () => {
<Item name="resourcesGroup">
<Item name="roomIdGroup" colCount={3} colCountByScreen={{ xs: 3 }}>
<Item name="roomIdIcon" />
<Item name="roomId" />
<Item name="priorityId" />
<Item name="roomIdEditor" />
<Item name="priorityIdEditor" />
</Item>
<Item name="assigneeIdGroup" />
</Item>
Expand Down
4 changes: 2 additions & 2 deletions apps/demos/Demos/Scheduler/Resources/ReactJs/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,8 @@ const App = () => {
colCountByScreen={{ xs: 3 }}
>
<Item name="roomIdIcon" />
<Item name="roomId" />
<Item name="priorityId" />
<Item name="roomIdEditor" />
<Item name="priorityIdEditor" />
</Item>
<Item name="assigneeIdGroup" />
</Item>
Expand Down
4 changes: 2 additions & 2 deletions apps/demos/Demos/Scheduler/Resources/Vue/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@
name="roomIdGroup"
>
<DxItem name="roomIdIcon"/>
<DxItem name="roomId"/>
<DxItem name="priorityId"/>
<DxItem name="roomIdEditor"/>
<DxItem name="priorityIdEditor"/>
</DxItem>
<DxItem name="assigneeIdGroup"/>
</DxItem>
Expand Down
4 changes: 2 additions & 2 deletions apps/demos/Demos/Scheduler/Resources/jQuery/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@ $(() => {
},
items: [
'roomIdIcon',
'roomId',
'priorityId',
'roomIdEditor',
'priorityIdEditor',
],
},
'assigneeIdGroup',
Expand Down
70 changes: 20 additions & 50 deletions packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1076,44 +1076,33 @@ describe('Appointment Form', () => {
it('should create resourceEditorsGroup when resources have no custom icons', async () => {
const { scheduler, POM } = await createScheduler({
...getDefaultConfig(),
dataSource: [{
text: 'Resource test app',
startDate: new Date(2017, 4, 9, 9, 30),
endDate: new Date(2017, 4, 9, 11),
roomId: 1,
ownerId: 2,
}],
resources: [{
fieldExpr: 'roomId',
dataSource: [{ text: 'Room 1', id: 1 }, { text: 'Room 2', id: 2 }],
}, {
fieldExpr: 'ownerId',
dataSource: [{ text: 'Owner 1', id: 1 }, { text: 'Owner 2', id: 2 }],
}],
resources: [
{ fieldExpr: 'roomId' },
{ fieldExpr: 'ownerId' },
],
});
const dataSource = (scheduler as any).getDataSource();
const appointment = dataSource.items()[0];

scheduler.showAppointmentPopup(appointment);
scheduler.showAppointmentPopup();

const formItems = POM.popup.dxForm.option('items') as FormItem[];
const mainGroup = formItems.find((item) => item.name === 'mainGroup') as GroupItem;
const resourcesGroup = mainGroup?.items?.find((item) => item.name === 'resourcesGroup') as GroupItem;
const resourcesGroup = POM.popup.dxForm.itemOption('mainGroup.resourcesGroup') as GroupItem;

expect(resourcesGroup).toBeDefined();
expect(resourcesGroup?.items?.length).toBe(2);

expect(resourcesGroup?.items).toEqual(
expect.arrayContaining([
expect.objectContaining({
name: 'resourcesGroupContent',
name: 'resourcesGroupIcon',
}),
expect.objectContaining({
name: 'resourceEditorsGroup',
itemType: 'group',
items: expect.arrayContaining([
expect.objectContaining({
name: 'roomId',
name: 'roomIdEditor',
}),
expect.objectContaining({
name: 'ownerId',
name: 'ownerIdEditor',
}),
]),
}),
Expand All @@ -1124,34 +1113,15 @@ describe('Appointment Form', () => {
it('should create individual resource groups when resources have custom icons', async () => {
const { scheduler, POM } = await createScheduler({
...getDefaultConfig(),
dataSource: [{
text: 'Resource test app',
startDate: new Date(2017, 4, 9, 9, 30),
endDate: new Date(2017, 4, 9, 11),
roomId: 1,
ownerId: 2,
}],
resources: [
{
fieldExpr: 'roomId',
icon: 'home',
dataSource: [{ text: 'Room 1', id: 1 }, { text: 'Room 2', id: 2 }],
},
{
fieldExpr: 'ownerId',
icon: 'user',
dataSource: [{ text: 'Owner 1', id: 1 }, { text: 'Owner 2', id: 2 }],
},
{ fieldExpr: 'roomId', icon: 'home' },
{ fieldExpr: 'ownerId', icon: 'user' },
],
});
const dataSource = (scheduler as any).getDataSource();
const appointment = dataSource.items()[0];

scheduler.showAppointmentPopup(appointment);
scheduler.showAppointmentPopup();

const formItems = POM.popup.dxForm.option('items') as FormItem[];
const mainGroup = formItems.find((item) => item.name === 'mainGroup') as GroupItem;
const resourcesGroup = mainGroup?.items?.find((item) => item.name === 'resourcesGroup') as GroupItem;
const resourcesGroup = POM.popup.dxForm.itemOption('mainGroup.resourcesGroup') as GroupItem;

expect(resourcesGroup).toBeDefined();
expect(resourcesGroup?.items?.length).toBe(2);
Expand All @@ -1163,10 +1133,10 @@ describe('Appointment Form', () => {
itemType: 'group',
items: expect.arrayContaining([
expect.objectContaining({
name: 'roomId',
name: 'roomIdIcon',
}),
expect.objectContaining({
name: 'roomIdIcon',
name: 'roomIdEditor',
}),
]),
}),
Expand All @@ -1175,10 +1145,10 @@ describe('Appointment Form', () => {
itemType: 'group',
items: expect.arrayContaining([
expect.objectContaining({
name: 'ownerId',
name: 'ownerIdIcon',
}),
expect.objectContaining({
name: 'ownerIdIcon',
name: 'ownerIdEditor',
}),
]),
}),
Expand Down
9 changes: 6 additions & 3 deletions packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ const DATE_OPTIONS_GROUP_NAME = 'dateOptionsGroup';
const START_DATE_GROUP_NAME = 'startDateGroup';
const END_DATE_GROUP_NAME = 'endDateGroup';
const RESOURCES_GROUP_NAME = 'resourcesGroup';
const RESOURCE_EDITORS_GROUP_NAME = 'resourceEditorsGroup';
const SUBJECT_GROUP_NAME = 'subjectGroup';
const REPEAT_GROUP_NAME = 'repeatGroup';
const DESCRIPTION_GROUP_NAME = 'descriptionGroup';
Expand All @@ -134,6 +135,7 @@ const END_DATE_TIMEZONE_EDITOR_NAME = 'endDateTimeZoneEditor';
const SUBJECT_ICON_NAME = 'subjectIcon';
const DATE_ICON_NAME = 'dateIcon';
const REPEAT_ICON_NAME = 'repeatIcon';
const RESOURCES_GROUP_ICON_NAME = 'resourcesGroupIcon';
const DESCRIPTION_ICON_NAME = 'descriptionIcon';

export class AppointmentForm {
Expand Down Expand Up @@ -749,12 +751,13 @@ export class AppointmentForm {
let resourcesItems: FormItem[] = resourcesLoaders.map((resourceLoader) => {
const { dataSource, dataAccessor } = resourceLoader;
const dataField = resourceLoader.resourceIndex;
const name = `${dataField}Editor`;
const label = resourceLoader.resourceName ?? dataField;
const editorType = resourceLoader.allowMultiple ? 'dxTagBox' : 'dxSelectBox';

return {
itemType: 'simple',
name: dataField,
name,
dataField,
label: { text: label },
colSpan: 1,
Expand All @@ -781,13 +784,13 @@ export class AppointmentForm {
cssClass: `${CLASSES.resourcesGroup} ${CLASSES.groupWithIcon}`,
items: [
{
name: `${RESOURCES_GROUP_NAME}Icon`,
name: RESOURCES_GROUP_ICON_NAME,
colSpan: 1,
cssClass: `${CLASSES.formIcon} ${CLASSES.defaultResourceIcon}`,
template: createFormIconTemplate('addcircleoutline'),
},
{
name: `${RESOURCES_GROUP_NAME}Content`,
name: RESOURCE_EDITORS_GROUP_NAME,
itemType: 'group',
colSpan: 1,
items: resourcesItems,
Expand Down
Loading