[VUE 3] Update Resources - selected on filter not updating

[eferro@qubicaamf.com]

Hi everyone,
I'm using Calendar and I trying to pass an updated Resources props by clicking a custom button on tbar.

My scenario.
I have List and DayResourceView.
In both views the Events prop is the same, but I need to change the Resources props.

In the sidebar I need to see different Resources (checkbox filters) based on list view or DayResourceView.

Screenshot 2025-02-24 at 07.23.31.png (143.73 KiB) Viewed 7208 times

Screenshot 2025-02-24 at 07.24.38.png (209.51 KiB) Viewed 7208 times

In the lateral sidebar you can see the updated Resources, but the reference model for seeing the selected ones seems to remain referred to the previous one.

Some code here.

// TBar config
tbar: {
			items: {
				customButton1 : {
					type: "button",
					text: "Test Attraction 3",
					weight: 650,
					onClick() {
						EventsManager.emitSelectAttraction(3); // the emit is working
					}
				},
				customButton2 : {
					type: "button",
					text: "Test Attraction 2",
					weight: 650,
					onClick() {
						EventsManager.emitSelectAttraction(2); // the emit is working
					}
				}
			}
		},

// BryntumCalendar init
			<BryntumCalendar
				ref="calendar"
				:events="events"
				:resources="resourcesBryntum"
				v-bind="calendarConfig"
				:on-active-item-change="({activeItem}) => setCurrentCalendarMode(activeItem.modeName)"
			/>

const setCurrentBryntumResources = (attractionId = 1) => {
			if (currentCalendarMode.value == "list")
				resourcesBryntum.value = toRaw(attractions.value);
		
		else if (currentCalendarMode.value == "dayresource") {
			const tmpResources = toRaw(resources.value);
			const filteredResourcesByAttraction = tmpResources.filter(resource => {
				return resource.attractionId === attractionId;
			});

			resourcesBryntum.value = filteredResourcesByAttraction;
		}
	};

How can I update correctly the Resources elements?

[tasnim]

Hi,

In the lateral sidebar you can see the updated Resources, but the reference model for seeing the selected ones seems to remain referred to the previous one.

If I understood correctly, you mean that after adding new resources with props when you select a new resource it doesn't get selected.
If that's the case, could you please share a reproducible test case which we can run locally and debug it for you?

[eferro@qubicaamf.com]

Sorry, I explained myself poorly.

As you can see from the screenshots shared, by clicking on the custom button, the list of filters in the sidebar updates, but they are always all deselected.

For example

• In the sidebar there are filters resources "First Attraction", "Laser Game", "Axe Game", "Beer Pong", "Cinema 4D",.....
• Select the custom header button
• The calendar view changes and the resources filters on the sidebar are "1 Game" and "2 Games"
• BUT all new resources filters are unchecked
  Then
• I select both ("1 Game" and "2 Game")
• I'm going to go to list view
• Correct resource filters are present in the sidebar ("First Attraction", "Laser Game", "Axe Game", "Beer Pong", "Cinema 4D",.....)
• BUT only the "First Attraction" and the "Laser Game" are selected (same ID as "1 Game" and "2 Game")

I hope I have been exhaustive

[marcio]

Hey,

Thanks for clarifying, to understand your use case, what's the expectation when you click the button? To have all the resources deselected? Could you please provide more context on that?

Also, what's your calendar configuration look like? Could you please share a runnable test case for us to debug?

[Animal]

It's up to you to select what resources your use case needs to have selected.

We cannot really inject any opinions about what should be selected into your app. That would be very presumptuous of us. We allow applications to control the selection in the resourceFilter

You might do one of these:

calendar.widgetMap.resourceFilter.select(resourceRecordsToSelect, true);

or

calendar.widgetMap.resourceFilter.select(resourceIdsToSelect, true);

See https://bryntum.com/products/calendar/docs/api/Scheduler/widget/ResourceFilter#function-select for details.

[eferro@qubicaamf.com]

Ok, thanks for the replay! I will implement that way!