I'm using a store to fetch the specializations of all hikers (so hiker has many specializations). However, I have a detail window where this specializations are added/removed/shown ony for currently selected hiker (yea, it's a detail window).
My problem here is that my store fetch data for all hikers, but I want it to show, when detailed window is up, only data for given hiker. Notice also that I'm showing data in data-grid, so the user possibly can add filters and I noticed that if I add a filter with store.filter({...}) and user add a filter with data-grid, my filters are removed (so basically they are useless.
Which approach should I use? Do you have any suggestion? I were thinking about 1 store for each hiker, but I don't like this solution.
Edit 1:
I also noticed that I can't create a filter in the same way as data-grid builds them:
Ext.create('Ext.util.Filter', {
type: 'numeric',
comparison: 'eq',
field: 'hiker_id',
property: 'hiker_id',
value: me.hiker.get('id'),
root: 'data'
})
Which is boring, because I imnplemented on server side a functionality that parses the grid filters already.
We just give our filters in json format to the store's extra params. And parse that back-end. The extra params stay the same while paging or refreshing the grid.
grid.getStore().getProxy().extraParams = { filter: yourFilter };
-How- are your users doing the filter?
store.filter accepts both arrays and functions, so you can do quite a bit with it, without actually juggling the data on the server. (eg manage an array that is being passed to the filter, test against an object somewhere, or whatever)
Permanent filter? Not so much, but since you can add multiple filters etc, it is relatively trivial to keep track of what filters are in place.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-method-filter
Related
Creating an eCommerce type react application and part of it is merchants can create product listings(item title, item description, item price, etc). How do I allow them to add options to the listing like Size, Color, etc. It seems more confusing than just having input fields that can change a state variable.
An example of what a completed array should look like after a user enters options:
const options = [
{
optionName: 'Size',
values: ['small', 'medium', 'large']
},
{
optionName: 'Color',
values: ['blue', 'black', 'white', 'tan'],
}
]
Above is how it should be constructed to be sent to server.
Let me know if any more clarification is needed.
What you're describing is dynamic form construction, and is always much more complicated than a static form. This is not an easy feature to implement.
What you've sketched out there as dummy API request data is essentially the solution -- you just need to provide UI that enables that solution. Presumably you have an object that holds all your form data, so you can add a field like userDefinedOptions that gets initialized with an empty array.
Then, you'll need UI elements to allow adding a new user-defined option, which will probably include the display name of the option, as well as the list of choices for that option. This UI would then call an event handler that inserts the inputted values into your list of user-defined options.
Dynamic forms can get very messy very fast, so I'd recommend looking into a form library to handle some of the overhead. You'll also need to validate the dynamic user data before sending it off to the API.
Hope that helps!
I have a react-admin Create View that I want to display and populate using ArrayInput which however seems to ignore the data of the list.
I tried to load the data with
const { data } = useQueryWithStore({
type: 'getList',
resource: 'comments',
});
and to set the source to it manually, but the ArrayInput seems unimpressed by all efforts to feed it some data.
I can iterate through the data array and render TextFields and remove buttons accordingly, while leaving the ArrayInput for adding new data, but that defeats the purpose and the beautiful interaction with ArrayInput. Is there something I'm missing? How should I pass the data for it to work as one would expect? I made a sandbox example for this HERE
For creating multiple rows of the entity with one form submit you will need a custom implementation or a work-around.
One of the most esiest ways could be to handle manually the submission of the form and alter the data and send separate requests for each entered entity.
Here in the docs is shown an example how you can pass the Create view a custom toolbar where you can implement your logic.
I have been implementing the ability to filter a table based on different fields and at first it seemed fairly straight forward, but now things are getting more complex and I want to make sure I am utilizing Angular's Digest cycle effectively.
Right now, when the user first hits a view and the controller gets instantiated, I call the API and GET an array of data from the server. I call this data a dataSet. This is the raw, unfiltered array of data.
Then on the page there are two different ways to filter, a search bar (<input>) and an actual filter menu where the user can toggle different values On/Off and have the table update accordingly in real-time. At first I thought it would be simple enough to place the filter logic inline inside of ng-repeat using a pipe, however this doesn't work with my pagination because the pagination continues to reflect the dataSet and not the filtered data. This led my HTML to look like
<tr ng-repeat="mailbox in model.IndividualMailboxes.filtered | orderBy:model.IndividualMailboxes.ordering.predicate:model.IndividualMailboxes.ordering.reverse | paginate:(model.IndividualMailboxes.currentPage - 1) * model.IndividualMailboxes.resultsPerPage | limitTo:model.IndividualMailboxes.resultsPerPage">
This then led me to creating a second array that I call filtered. I basically filter the dataSet array into this new filtered array. Then my ng-repeat and pagination both use the filtered set. This also forced me to place the actual filter in the controller and use filterFilter(arr, term) to filter the dataSet in 2 stages
function filterIndividualMailboxes() {
var verifiedList = [], searchList = [];
verifiedList = filterFilter($scope.model.IndividualMailboxes.dataSet, { Valid : $scope.model.IndividualMailboxes.showVerified });
searchList = filterFilter(verifiedList, $scope.model.IndividualMailboxes.search);
$scope.model.IndividualMailboxes.filtered = searchList;
}
The above function simply filters the dataSet by our filtering options (there is only 1 in this case) and then takes that set and filters it based on the search term that the user can input.
The problem with this implementation is it doesn't seem to fit into the digest cycle efficiently as I am having to call filterIndividualMailboxes() whenever the data is changed in any way. The easiest way to implement that was to just $watch() the entire model like this
$scope.$watch('model.IndividualMailboxes', function(){
filterIndividualMailboxes();
}, true);
But I am afraid that this isn't very efficient and not the most fluid way to deal with filtering in Angular.
Does anyone know of a more "Angular" way of doing this that fits right into the digest cycle?
I am using the data module to allow searching and filtering of table data. I am using views to display the data in a table with 3 exposed filters.
I want the user to select from specific values in 2 of the 3 filters. But I am currently only able to display a text box that allows the user to type a value.
You'll want to check out hook_views_pre_render(). Use it at first in conjunction with dpm() from the devel module to explore the view structure. Then you can directly alter the view (and its filters) before sending it on to be rendered. I would recommend using a php function, like array_unique(), or your own custom function, to loop through and uniquefy your results.
mymodule_views_pre_render(&$view) {
// make sure devel module is turned on first, then take this out when you're
// done exploring the view results
dpm($view);
// this part is pseudocode, I haven't memorized the view structure, but dpm() will
// show you what to actually put here
if( $view->name == "my_target_view_machine_name" ) {
// do your uniquefying here
}
}
When adding an exposed filter to a view, drupal gives you two options(Filter type expose): Single filter and Grouped filter, if you choose the Grouped filters, it will let you choose what type of widget do you want.(Radios/Select)
I have a TreeStore which fills with data from Json.
I'm applying filter on it.
if ( !filter.filterFn(node) ) {
node.remove();
}
For the first search attempt everything works great but at the second attempt not all data is used in the search. In order to use all data I need to do .load() for the storage.
But in this case the request to the server will be send and filter will be applied applied.
Is there any way to achieve this behavior?
I'm not certain I totally follow your question, but I think you want to remove the earlier filter before you apply a new filter.
You can add a line right before the call to add the filter.
Something like this:
yourTreeStore.filters.clear();
(where yourTreeStore is a reference to your Ext.data.TreeStore you are adding the filters to)