I want to implement checkbox-based filtering on my page. When I click on checkbox I want to change state and make ajax call based on checked items.
I have created toggleCheckbox(id) action and reducer that adds/removes id from selected items, but I have no idea where should I place ajax call.
Any ideas?
Your component should dispatch the async action, to avoid duplicating the logic for toggling the selected items move it to the async action and change the normal action from toggle to set. Like this:
const toggleCheckbox = id => (dispatch, getState) => {
const items = toggle(id, getState().selectedItems);
dispatch(setSelectedItems(items));
// call API with "items"
};
Network calls are asynchronous, and actions are by default synchronous. They are just plain objets. To handle asynchronous behaviour you need a side-effect library like redux-sagas or redux-thunks. Take a look at https://redux.js.org/docs/advanced/AsyncActions.html and https://redux-saga.js.org
Related
I have a q-dialog component that has 2 buttons - CANCEL and OK. Cancel button uses v-close-popup but OK can't use that as it is doing some async data fetching, fill some UI element on the dialog and do some processing before it closes automatically. I tried to use v-close-popup and it results in undefined UI element when document.getElementById is called on the existing UI element because the dialog has closed before the processing completes. I need the UI element in the processing part because I use easyqrcodejs which needs a UI element to generate QR code. Any idea and insight is appreciated. Thanks.
Without your code is difficult to know exactly what you need.
TEMPLATE
<q-dialog v-model="isDialogOpen" />
SCRIPT
setup() {
async function fetchData() {
// do some await things here
// done with await update v-model (if using Composition API)
isDialogOpen.value = false;
}
// ...
return { isDialogOpen }
}
If you update your question with some code, I will update mine. 😁
I am using Radzen Blazor Tree component in a Blazor project. By default the component comes with an event listener for single click on RadzenTreeItem. I am hoping to add functionality such that a single click on a RadzenTreeItem and a double click on a RadzenTreeItem produces different changes to the app. I am thinking of accomplishing this by using a JSInterop for the dblclick event listener, but I know this would require having individual html ids for each RadzenTreeItem and I am not sure how to go about creating unique ids for a RadzenTreeItem since the tree has a dynamic size. My question is how to create unique ids for a RadzenTreeItem if each item is being created in a RenderFragment or is there a better way to allow double click functionality?
Below is an example of the C# RenderFragment that is used to display the RadzenTreeItem:
public static RenderFragment<RadzenTreeItem> TreeDesign = (RadzenTreeItem context) => builder =>
{
builder.OpenComponent<RadzenIcon>(0);
builder.AddAttribute(1, "Icon", "crop_16_9");
builder.CloseComponent();
builder.AddContent(4, context.Text);
};
Below is an example of the html code that is calling the RenderFragment and creating the tree:
<RadzenTree Data="#entries" Change="#OnChange">
<RadzenTreeLevel Template="#TreeDesign" Text="#GetTextForNode" />
</RadzenTree>
5 months old - but I'll give you a shot on how I handle double click years ago in Silverlight.... I created an Observable that would give me an event when there were two clicks within 250MS of each other... this is called a Hot Observable in which the events simply flow by, and when a criteria matches the events, it can raise another event... I can try and dig up the code, as researching for a a double-click event and protection for blazor events.
To add perhaps a bit more clarity - this would listen to the click event you refer to, and if there were two clicks, it would invoke method A, other wise would invoke B for a single click...
A triple click would then become 1 double click, and one single click - but that would depend on the time between the first and thrid event using the Observable...
Maybe it will help someone in the future:
builder =>
{
builder.OpenComponent<RadzenIcon>(0);
builder.AddAttribute(1, "Icon", "crop_16_9");
builder.CloseComponent();
builder.OpenElement(2, "div");
builder.AddAttribute<MouseEventArgs>(3, "ondblclick", RuntimeHelpers.TypeCheck<EventCallback<MouseEventArgs>>(EventCallback.Factory.Create<MouseEventArgs>(this,
(args) => OnDoubleClick(args, context)
)));
builder.AddContent(10, context.Text);
builder.CloseElement();
};
};
private void OnDoubleClick(MouseEventArgs args, RadzenTreeItem item)
{
//
}
Using a clarity datagrid version 2.3
Seeing an issue where if the user starts typing into the input field of datagrid column filter, the filter input focuses out automatically as soon as a key is pressed.
Since the datagrid is paginated and server driven, this causes the API to get fired as soon as a
key is pressed after the debounce time.
The automatic focus out of the input field cause the filter to only have a single character and the API gets triggered since the debouce is only 800.
Have looked at clarity github for any reported issues, doesn't look like its reported or anyone having similar issue.
Expected behavior should be the input focus out should not happend until the user moves the cursor away or presses enter, which is when the debounce should kickin after which the api should be called.
HTML:
<clr-datagrid
(clrDgRefresh)= refreshDataGrid($event)>
...
</clr-datagrid>
TS Component:
debouncer = new Subject<any>();
ngOnInit() {
this.debouncer.asObservable().pipe(
debounceTime(800)
).subscribe(state => {
// do something here.. like call an API to filter the grid.
})
}
refreshDataGrid(state) {
this.debouncer.next(state);
}
Any help is appreciated.
Currently I'm hacking my component, to make sure the focus is not lost on the input field until done so by the user.
refreshDataGrid(state) {
const isClrFilterInputField = document.querySelector('.datagrid-filter .clr-input');
if (isClrFilterInputField instanceof HTMLElement) {
isClrFilterInputField.focus();
}
this.debouncer.next(state);
}
This is still not a clean answer, but as far as I have searched, this seems like an issue with clarity datagrid itself, until I hear from someone with a cleaner answer.
Most likely the upgrade version might have this fixed.
Yet to check that.
Unfortunately I think we designed the datagrid to emit the changes on each filter value change with debouncing intended to be done on the app side as consumers see fit.
That said, it is possible to accomplish what you describe. I've implmented a quick and dirty guard based on events but there may be better ways. I'll add code snippets here and a link to the working stackblitz at the end.
You are on the right track with the debouncer. But we don't need to debounce with time, we only need to 'debounce' on certain events.
Instead of debouncing with time, what if we debounce with an #HostListener for clicks on the filter input? (I'll leave it as an exercise for you to implement a HostListener for the focusin event since focusin bubble's up and blur does not). To do that we need:
A Hostlistener that can hear keydown.enter event on the filter input
A guard to prevent requests
A property to store the datagrid state as user enters text
In general the code needs to:
Fetch data when component inits but not after unless directed
Keep track of state events that get emitted from the datagrid
listen to keydown.enter events (and any other events like the filter input focusout - becuase it bubbles up, unlike blur)
Check that the event was generated on a datagrid filter input
dismiss the guard
make the request
re-enlist the guard
Here is a rough attempt that does that:
export class DatagridFullDemo {
refreshGuard = true; // init to true to get first run data
debouncer = new Subject<any>(); // this is now an enter key debouncer
datagridState: ClrDatagridStateInterface; // a place to store datagrid state as it is emitted
ngOnInit() {
// subscribe to the debouncer and pass the state to the doRefresh function
this.debouncer.asObservable().subscribe(state => {
this.doRefresh(state);
});
}
// a private function that takes a datagrid state
private doRefresh(state: ClrDatagridStateInterface) {
// Guard against refreshes ad only run them when true
if (this.refreshGuard) {
this.loading = true;
const filters: { [prop: string]: any[] } = {};
console.log("refresh called");
if (state.filters) {
for (const filter of state.filters) {
const { property, value } = <{ property: string; value: string }>(
filter
);
filters[property] = [value];
}
}
this.inventory
.filter(filters)
.sort(<{ by: string; reverse: boolean }>state.sort)
.fetch(state.page.from, state.page.size)
.then((result: FetchResult) => {
this.users = result.users;
this.total = result.length;
this.loading = false;
this.selectedUser = this.users[1];
// Set the guard back to false to prevent requests
this.refreshGuard = false;
});
}
}
// Listen to keydown.enter events
#HostListener("document:keydown.enter", ["$event"]) enterKeydownHandler(
event: KeyboardEvent
) {
// Use a host listener that checks the event element parent to make sure its a datagrid filter
const eventSource: HTMLElement = event.srcElement as HTMLElement;
const parentElement = eventSource.parentElement as HTMLElement;
if (parentElement.classList.contains("datagrid-filter")) {
// tell our guard its ok to refresh
this.refreshGuard = true;
// pass the latest state to the debouncer to make the request
this.debouncer.next(this.datagridState);
}
}
refresh(state: ClrDatagridStateInterface) {
this.datagridState = state;
this.debouncer.next(state);
}
}
Here is a working stackblitz: https://stackblitz.com/edit/so-60980488
I'm building a calendar-based web app with fullcalendar, which is for college students to use. There are some categories I've defined. e.g, sport, art, mind, etc... every event in the fullcalendar would be assigned to a category.
What i want to do is: there're some checkboxes corresponding categories on the top of the calendar, and the user can check or uncheck some checkboxed to hide/show the related events
how would I achieve this?
One way is to put appropriate classes on each event by setting the 'className' property on the event objects you're sending to the calendar and use jquery to hide those events (e.g. $(.myClassName).hide()) when they check the checkboxes. The trouble is the events would vanish leaving a gap where they were which might not be what you want.
A better way would be to add a filter function to the events option when you first call fullCalendar like this:
fullCalendar({
...
events: {
url: ....,
success: function(events) {
$.map(events, function (e) {
if (userHasFilteredOut(e))
return null;
else
return e;
});
},
...
});
This will filter out the events before they are displayed. The function userHasFilteredOut returns true if the event object passed in is of a class the user's checkbox values indicate is filtered out. When the user checks or unchecks a checkbox, you will need to refetch all the events from the server. You need to do this:
$('#mycal').fullCalendar('refetchEvents');
How can I open a synchronous dialog in Flex? I need to call a function from an External Interface (JavaScript) that will open a simple dialog in the Flex application and returns an value according to the button the user has clicked (OK/Cancel).
So it should by a synchronous call to a dialog, i.e. the call waits until the user has closed the dialog like this.
//This function is called by JavaScript
function onApplicationUnload():Boolean
{
var result:Boolean;
result = showDialogAndWaitForResult();
return result
}
Does anybody know how I can do this? I could write a loop that waits until the dialog has set a flag and then reads the result to return it, but there must be something that is way more elegant and reusable for waiting of the completion of other asynchronous calls.
EDIT:
Unfortunately a callback does not work as the JavaScript function that calls onApplicationUnload() itself has to return a value (similar to the onApplicationUnload() function in Flex). This JavaScript function has a fixed signature as it is called by a framework and I cannot change it. Or in other words: The call from JavaScript to Flex must also be synchronous.
Flex doesn't work in a synchronous fashion, as it is a single thread application and so needs your code to hand execution back to the "core" in order to handle user input etc.
The way to do it is to make your dialogue's behaviour asynchronous:
function onApplicationUnload():void
{
showDialog(resultMethod);
}
function resultMethod(result:Boolean):void
{
ExternalInterface.call("javaScriptCallback", [result]);
}
You can't do that in Flex. As David mentioned, Flex is single-threaded, so you can't have your function block while the dialog is being processed.
Your best bet might be to use a Javascript popup. You'll have a lot less control over the window, but it should behave the way you want (blocking the function until it's been closed).
Have your Flex code use an event to wait for the dialog. In the main thread, register an event handler that waits for the dialog to close. On OK in the dialog, dispatch the dialog complete event.
With Cairngorm, this is something like:
In the main thread:
CairngormEventDispatcher.getInstance().addEventListener(ClosingDialogCompleteEvent.DIALOG_COMPLETE, onClosingDialogComplete);
(if you want to avoid returning until complete, loop on a timer and global variable.)
In the dialog closing handler:
CairngormEventDispatcher.dispatchEvent(new ClosingDialogCompleteEvent(<parameters>));
The event handler:
public function onClosingDialogComplete (e: ClosingDialogCompleteEvent):void
{
param1 = e.param1;
param2 = e.param2;
// etc.
// Continue processing or set the global variable that signals the main thread to continue.
}
For this to work, the class ClosingDialogCompleteEvent has to be defined. Partial code for the class is:
package com. ... .event // You define where the event lives.
{
import com.adobe.cairngorm.control.CairngormEvent;
public class ClosingDialogCompleteEvent extends CairngormEvent
{
// Event type.
public static const DIALOG_COMPLETE:String = "dialogComplete";
public var param1:String;
public var param2:String;
public function ClosingDialogCompleteEvent(param1:String, param2:String)
{
super(DIALOG_COMPLETE);
this.param1 = param1;
this.param2 = param2;
}
}
}
Waiting on an event is the best way to synchronize in Flex. It works well for startup dialogs too. In a flex-only application it works especially well.
I have explained a workaround to create synchronous alert in flex
http://reallypseudorandom.blogspot.com/2010/05/flash-asynchronous-alert-and-pause.html
OK... after all I found a possible solution. But I guess hardly everybody is going to do that seriously :-(
The solution focuses around using a while loop to check for a result and then return the function that is being called by JavaScript. However we need a way to sleep in the while loop, while we are waiting for the result. However calls to JavaScript are synchronous. Now the trick is to make a sleep in JavaScript, which is also not directly available here, but can be done using a synchronous XML Http Request like described on this blog.
As I said - I won't recommend this only as last resort. For my problem I have resorted to ugly JavaScript popups.
Have your dialog call another function in flex to process the result of the user selection:
private function deleteFileCheck():void
{
Alert.show("Are you sure you want to delete this file?",
"Confirm Delete",
Alert.YES| Alert.NO,
this, deleteFileHandler, null, Alert.NO);
}
private function deleteFileHandler(event:CloseEvent):void
{
if (event.detail == Alert.YES)
{
...do your processing here
}
}
You can fake a synchronous dialog in flex by popping up a dialog then disabling everything in the background. You can see this in action if you do Alert.show("Hello World"); in an application. The background will grey out and the user won't be able to click on any UI in the background. The app will "wait" until the user clicks the OK button.