I'm trying to implement server-side column filtering for a table in my React app, but I'm having trouble converting the "ColumnFiltersState" object that I'm using on the frontend into the format that the backend (which uses the "nestjs-paginate" library) is expecting. The "ColumnFiltersState" object contains a "value" field that can be of type "unknown" and I'm not sure how to handle it. I have a couple of possible solutions in mind:
One solution could be to use the "filterFn" property for each column, and pass in the filter operator that the backend is expecting (e.g. '$eq', '$gt', etc.) along with the value.
Another approach would be to define a separate mapping function that maps the "ColumnFiltersState" object into the format that the backend is expecting, using the appropriate filter operator and value for each column, but then how we would know witch operator to use, maybe add custom meta prop to the coulmnDef.
Can anyone provide some guidance on how to correctly map the column filters for the backend, and which solution would be the best approach? I would really appreciate any feedback or advice on the best approach, and even better if there is an example code to help me understand the solution better.
I use Redux Form and react-datepicker
It works very nice, and I would like to get it work ideally according to my needs.
I need to show the date in localized format (let's say DD/MM/YYYY), and in the same time save value attribute of the input in static format ("YYYY-MM-DD").
I could add a hidden input with such value format, but if it's possible to avoid it using datepicker customization, it would be great!
Thanks for your advice in advance.
UPD:
Take a look on screenshots:
This is how it works now (nothing has to be changed here).
And value is synchronized with the locale. I want to keep the locale to present my date in the locale format for the user, and keep the format unchanged ("YYYY-MM-DD" forever) for the back end.
Here is the link to codesandbox.
You can use state and moment.js package to have date in several formats.
EDIT: the key thing is redux form. Datepicker is just view that can show exactly what you need. So, what you can do is: change redux form field value (or what you are using) and just have another state field (let's say 'dateForDatepicker') which value you'll pass to datepicker.
GOOD SOLUTION: https://stackoverflow.com/a/42726079/7479959
I am trying to display initial values on my redux form when it first load. Every fields work except the date input field. I tried to use moment to format string (YYYYMMDD) to MM/DD/YYYY and it's not working. No matter how I formatted, the field fail to display and instead showing the default place holder character mm/dd/yyyy until I selected a date. I am using the default redux-form input component date type. How should I do this right? Appreciate for any help.
When you are setting the initial date in your state, you need to provide it as per ISO-8601 standards, so YYYY-MM-DD, i.e. 2018-08-22 for 22nd August 2018.
I have never used redux-form library before, but I found a codesandbox example in their guide, and managed to get it to work here by just relying on them having followed the ISO standard. Feel free to play around with it.
Basically I have an editable-date field in my angular app which is shown to user like:
mm/dd/yyyy when the field is not selected
But I want to show to user as: dd/mm/yyyy. Where to set the format for display to user when field is not selected ?
Make a custom directive that require ngModel and changes the model view value.
(this i would do in case i'm working with breeze entities for example, and i don't want to actually change the value or affect the entityState)
If that doesn't bother you, than use moment to format the date how you like.
(moment is a powerful js library with advanced format options)
I'd like to modify the currency filter to handle custom money formats in the input value.
(eg., AUD 3.00 -> $3.00).
One option is to write my own filter from scratch. However this seems like a lot of duplication, given the existing filter is great, I just need to trim a few characters off the front first.
Ideally, I'd have something like this:
.filter('money', function($filters) {
return function(text){
var currency = text.substring(4)
return $filters('currency')(currency)
};
});
Is is possible to either:
Call one filter from another?
Access the internal methods (eg, formatNumber() shown here
What other options are open to me for this?
Call one filter from another?
Yes and the best solution I found was to create a new filter:
angular.module('ui.filters').filter('customCurrency',
[ '$filter', function(filter) {
var currencyFilter = filter('currency');
return function(amount, currencySymbol) {
return currencyFilter(amount.substr(4), currencySymbol);
}
} ]);
This transforms values like "AUD 30.00" to "$30.00"
You cannot, from what I tried, as of version 1.0.1 override a filter. I tried to create a filter using the same name and trying to reference the original filter causes an infinite loop.
Here is an excellent point to consider:
However, I would suggest not doing so - even if that is allowed.
Predefined filters are the public API of AngularJS. What if some parts
of AngularJS use some of them internally or one day you install some
add-on which depends on that filter?
See also, basically the same conclusion even though I believe op didn't really need a custom filter.
Access the internal methods (eg, formatNumber())?
If the function is not exposed then the authors deemed it wasn't a public api they wanted to make available. The authors might have a particular implemetation specific function that might not be obvious right away.
PS: The module is whatever you need the filter to be in. I separate some functionality in different modules and require them when I build my main module
var App = angular.module('App', [ 'ui' ]);
The best way to do this is,
<div> {{amount | currency:'$'}} </div>
in your html.
This will automatically rip off the first few characters that correspond to the currency type and replace them with the string argument '$' you pass.
Angular's currency filter allows you to use the default currency symbol from the locale service, or you can provide the filter with a custom currency symbol. If your app will be used only in one locale, it is fine to rely on the default currency symbol. However, if you anticipate that viewers in other locales might use your app, you should provide your own currency symbol to make sure the actual value is understood.
For example, if you want to display account balance of 1000 dollars with the following binding containing currency filter: {{ 1000 | currency }}, and your app is currently in en-US locale. '$1000.00' will be shown. However, if someone in a different local (say, Japan) views your app, her browser will specify the locale as ja, and the balance of '¥1000.00' will be shown instead. This will really upset your client.
In this case, you need to override the default currency symbol by providing the currency filter with a currency symbol as a parameter when you configure the filter, for example, USD$1,000.00. This way, Angular will always show a balance of 'USD$1000' and disregard any locale changes.
See the notes on localization: http://docs.angularjs.org/guide/i18n