I am using react-bootstrap-table2 pagination in my react application.I am using a state to update the sizePerPage dynamically.But it is not working. When I console the state, I am able to see the change, but it is not updating the pagination.
Here is my code:
const [sizePerPage,setSizePerPage] = useState(10);
const pagination = paginationFactory({
page:1,
sizePerPage:sizePerPage,
.......
onPageChange:function(page,sizePerPage),
onSizePerPageChange:function(page,sizePerPage)
});
Here I am changing the state:
<select onChange={e=>setSizePerPage(e.target.value)}>
<option value={10}>10</option>
<option value={25}>25</option>
<option value={50}>50</option>
</select>
Rest of the things are working fine.
I think you have a typo in your code.
onSizePerPageChange:function(page,sizePerpage)
Should be:
onSizePerPageChange:function(page,sizePerPage)
If there is no reason you need a custom dropdown list you can use the built-in feature by doing this:
const pagination = paginationFactory({
sizePerPageList: [{
text: '10', value: 10
}, {
text: '25', value: 25
}, {
text: '50', value: 50
}],
});
Related
I'm trying to make a filtering system for my website and was wondering how I could filter a GET request by specifying what to filter from the frontend.
Here is what I'm trying to do:
If someone selects the filter options "SDG 2: Zero Hunger", "1: Discussion Project", and "Demographic", the user will click submit and then only the first card that has all those things will show up on the right of it, not the second one underneath it.
I've tried using URLSearchParams but I haven't been able to get it to work. I'm not sure how to go about this problem as the other stackoverflow forums for similar questions use that. This is the react frontend code I have (the only parts that matter are handleSubmit and componentDidUpdate), right now I just want to console.log the object that I got from the database which I filtered:
import React, { useEffect, useState } from 'react'
class Dropdown extends React.Component {
constructor(props) {
super(props);
this.state = {
sdg: 'SDG 1: No Poverty',
assignment_type: 1,
theme: 'Demographic'
};
this.handleSDGChange = this.handleSDGChange.bind(this);
this.handleAssignmentChange = this.handleAssignmentChange.bind(this);
this.handleThemeChange = this.handleThemeChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
// Handling all 3 input changes
handleSDGChange(event) {
this.setState({sdg: event.target.value});
}
handleAssignmentChange(event) {
this.setState({assignment_type: event.target.value});
}
handleThemeChange(event) {
this.setState({theme: event.target.value});
}
componentDidUpdate() {
const fetchProjects = async () => {
const response = await fetch('/api/projects' + URLSearchParams({ sdg: this.state.sdg})) // Will add other 2 later, testing out 1 first
const json = await response.json() // contains array of projects
if (response.ok) {
console.log(json)
}
else {
console.log(json.error)
}
}
fetchProjects()
}
// Handling all 3 input submissions
handleSubmit(event) {
console.log(this.state.sdg)
alert(this.state.sdg + '--- Assignment Type: ' + this.state.assignment_type + '--- Theme: ' + this.state.theme);
event.preventDefault();
this.componentDidUpdate()
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>SDG:</label>
<select value={this.state.sdg} onChange={this.handleSDGChange}>
{/* <option>Select SDG</option> */}
<option value="SDG 1: No Poverty">SDG 1: No Poverty</option>
<option value="SDG 2: Zero Hunger">SDG 2: Zero Hunger</option>
<option value="SDG 3: Good Health & Well Being">SDG 3: Good Health & Well Being</option>
</select>
<label>Assignment Type:</label>
<select value={this.state.assignment_type} onChange={this.handleAssignmentChange}>
<option value="1">1: Discussion Project</option>
<option value="2">2: PDF Case study</option>
<option value="3">3: Community Project</option>
</select>
<label>Theme:</label>
<select value={this.state.theme} onChange={this.handleThemeChange}>
<option value="Demographic">Demographic</option>
<option value="Economical">Economical</option>
<option value="Socio-cultural">Socio-cultural</option>
<option value="Technological">Technological</option>
<option value="Ecological">Ecological</option>
<option value="Poltical">Poltical</option>
</select>
<input type="submit" value="Submit" />
</form>
);
}
}
export default Dropdown
I'm also unsure how I can access this data in my express.js backend, here is what my GET route looks like:
const getProjects = async (req, res) => {
const projects = await Project.find({}).sort({ createdAt: -1 })
res.status(200).json(projects)
}
How do I send my parameters for the GET request from my class component to the backend which then can query the MongoDB and get only the filtered objects?
I even tried it by giving classnames and removing div and adding it back. Can somene help?
//Page1.js
<div className="email" >
<MyInput className="input1" name="email" type="email" onChange={formikProps.handleChange}/>
</div>
//Page1.test.js
describe("testing email",()=>{
test("email check",()=>{
let wrapper = shallow(<Page1/>)
wrapper.find('MyInput[name="email"]').simulate('onChange', {target: {
name: 'email',
value: 'ale#gmail.com'
}})
expect(wrapper.state('email')).toEqual('ale#gmail.com')
})
})
The first argument to simulate has to be the event name to be simulated not the name of the event handler.
wrapper.find('MyInput[name="email"]').simulate('change', {target: {
name: 'email', value: 'ale#gmail.com' }})
Shallow doesn't render child components. It will render just the react wrapper. For testing events and interactions, use mount. Also you can use console.log(wrapper.debug()) to see the content of wrapper. It will help you to identify the problem
I need to hide/show a certain option group (<optgroup>) conditionally and I've tried the top solution from this question - Select2: Hide certain options dynamically
It hides every option (as required), but group title stays visible, although it has no child items. How to hide the whole option group in select2?
I think you can disable <optgroup> in Select2 only using data array source, not using options in HTML.
See issues on Select2 github repo:
https://github.com/select2/select2/issues/4876
https://github.com/select2/select2/pull/5035
Here is a snippet which exemplifies the two approach:
var data = [{
text: 'group1',
children: [{
id: '1',
text: 'option 1'
}, {
id: '2',
text: 'option 2',
disabled: false,
}, {
id: '3',
text: 'option 3',
disabled: true,
}]
},
{
text: 'group2',
disabled: true,
children: [{
id: '4',
text: 'option 4',
disabled: true,
}, {
id: '5',
text: 'option 5'
}]
}];
$(document).ready(function() {
$('#test').select2({ data: data, });
$('#test2').select2();
});
var group2Disabled = true;
toggleGroup2 = function() {
group2Disabled = !group2Disabled;
console.log("toggleGroup2", group2Disabled);
var gr2 = data.find(findGroup2);
gr2.disabled = !gr2.disabled;
$('#test').empty().select2({data:data}).trigger("change");
}
function findGroup2(el) {
return el.text === 'group2';
}
select {
width: 40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>
<label>Select List #1 (data)</label>
<select id="test"></select>
<button onclick="toggleGroup2()">toggle disable Group2</button>
<br><br><br>
<label>Select List #2 (html)</label>
<select id="test2">
<optgroup label="group1">
<option>option 1</option>
<option>option 2</option>
<option disabled="true">option 3</option>
</optgroup>
<optgroup label="group2" disabled="true">
<option disabled="true">option 4</option>
<option>option 5</option>
</optgroup>
</select>
Or you can check this jsfiddle: https://jsfiddle.net/beaver71/u0jekg44/
You can use this .css to hide the options and the optgoup
.select2-results__option[aria-disabled=true]
{
display: none;
}
Don't forget to put the disabled="true" attribute in both elements. You can also set this attribute dynamically using JQuery ($(theOption).prop('disabled', true)).
for whoever stumbles upon this, no, you do nοt need to alter the data source in order to disable an opt group
like Mateus wrote, css to hide disabled options and optgroups:
.select2-results__option[aria-disabled=true]
{
display: none;
}
and javascript logic to disable optgroups, if they have no options enabled:
mySelect.find("optgroup").each(function(){
let totalOptions = $(this).find("option").length
let disabledOptions = $(this).find("option:disabled").length
if( totalOptions == disabledOptions ) $(this).prop('disabled', true)
else $(this).prop('disabled', false)
})
I need to filter items inside an ngFor loop, by changing the category in a drop-down list. Therefore, when a particular category is selected from the list, it should only list the items containing that same category.
HTML Template:
<select>
<option *ngFor="let model of models">{{model.category}}</option>
</select>
<ul class="models">
<li *ngFor="let model of models" (click)="gotoDetail(model)">
<img [src]="model.image"/>
{{model.name}},{{model.category}}
</li>
</ul>
Items Array:
export var MODELS: Model[] = [
{ id: 1,
name: 'Model 1',
image: 'img1',
category: 'Cat1',
},
{ id: 2,
name: 'Model 2',
image: 'img2',
category: 'Cat3',
},
{ id: 3,
name: 'Model 3',
image: 'img3',
category: 'Cat1',
},
{ id: 4,
name: 'Model 4',
image: 'img4',
category: 'Cat4',
},
...
];
Also, the drop-down list contains repeated category names. It is necessary for it to list only unique categories (strings).
I know that creating a custom pipe would be the right way to do this, but I don't know how to write one.
Plunker: http://plnkr.co/edit/tpl:2GZg5pLaPWKrsD2JRted?p=preview
Here is a sample pipe:
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'matchesCategory'
})
export class MathcesCategoryPipe implements PipeTransform {
transform(items: Array<any>, category: string): Array<any> {
return items.filter(item => item.category === category);
}
}
To use it:
<li *ngFor="let model; of models | matchesCategory:model.category" (click)="gotoDetail(model)">
===== for the plunkr example ====
You need your select changes to reflect in some variable
First define in your class a member:
selectedCategory: string;
then update your template:
<select (change)="selectedCategory = $event.target.value">
<option *ngFor="let model of models ">{{model.category}}</option>
</select>
last, use the pipe:
<li *ngFor="let model; of models | matchesCategory:selectedCategory" (click)="gotoDetail(model)">
==== comments after seeing the plunker ====
I noticed you used promise. Angular2 is more rxjs oriented. So the first thing I'd change is in your service, replace:
getModels(): Promise<Model[]> {
return Promise.resolve(MODELS);
}
to:
getModels(): Observable<Array<Model>> {
return Promise.resolve(MODELS);
}
and
getModels(id: number): Observable<Model> {
return getModels().map(models => models.find(model.id === id);
}
then in your ModelsComponent
models$: Observable<Array<Model>> = svc.getModels();
uniqueCategories$: Observable<Array<Model>> = this.models$
.map(models => models.map(model => model.category)
.map(categories => Array.from(new Set(categories)));
Your options will become:
<option *ngFor="let category; of uniqueCategories$ | async">{{model.category}}</option>
and your list:
<li *ngFor="let model; of models$ | async | matchesCategory:selectedCategory" (click)="gotoDetail(model)">
This is a very drafty solution since you have many duplicates and you keep querying the service. Take this as a starting point and query the service only once, then derive specific values from the result you got.
If you'd like to keep you code, just implement a UniqueValuesPipe, its transform will get a single parameter and filter it to return unique categories using the Array.from(new Set(...)). You will need though to map it to strings (categories) first.
I am trying to created a nested repeater or a nested list view using WinJS 4.0, but I am unable to figure out how to bind the data source of the inner listview/repeater.
Here is a sample of what I am trying to do (note that the control could be Repeater, which I would prefer):
HTML:
<div id="myList" data-win-control="WinJS.UI.ListView">
<span data-win-bind="innerText: title"></span>
<div data-win-control="WinJS.UI.ListView">
<span data-win-bind="innerText: name"></span>
</div>
</div>
JS:
var myList = element.querySelector('#myList).winControl;
var myData = [
{
title: "line 1",
items: [
{name: "item 1.1"},
{name: "item 1.2"}
]
},
{
title: "line 2",
items: [
{name: "item 2.1"},
{name: "item 2.2"}
]
}
];
myList.data = new WinJS.Binding.List(myData);
When I try this, nothing renders for the inner list. I have attempted trying to use this answer Nested Repeaters Using Table Tags and this one WinJS: Nested ListViews but I still seem to have the same problem and was hoping it was a little less complicated (like KnockOut).
I know it is mentioned that WinJS doesn't support nested ListViews, but that seems to be a few years ago and I am hoping that is still not the issue.
Update
I was able to get the nested repeater to work correctly, thanks to Kraig's answer. Here is what my code looks like:
HTML:
<div id="myTemplate" data-win-control="WinJS.Binding.Template">
<div
<span>Bucket:</span><span data-win-bind="innerText: name"></span>
<span>Amount:</span><input type="text" data-win-bind="value: amount" />
<button class="removeBucket">X</button>
<div id="bucketItems" data-win-control="WinJS.UI.Repeater"
data-win-options="{template: select('#myTemplate')}"
data-win-bind="winControl.data: lineItems">
</div>
</div>
</div>
<div id="budgetBuckets" data-win-control="WinJS.UI.Repeater"
data-win-options="{data: Data.buckets,template: select('#myTemplate')}">
</div>
JS: (after the "use strict" statement)
WinJS.Namespace.define("Data", {
buckets: new WinJS.Binding.List([
{
name: "A",
amount: 5,
lineItems: new WinJS.Binding.List( [
{ name: 'test item1', amount: 50 },
{ name: 'test item2', amount: 25 }
]
)
}
])
})
*Note that this answers part of my question, however, I would really like to do this all after a repo call and set the repeater data source programmatically. I am going to keep working towards that and if I get it I will post that as the accepted answer.
The HTML Repeater control sample for Windows 8.1 has an example in scenario 6 with a nested Repeater, and in this case the Repeater is created through a Template control. That's a good place to start. (I discuss this sample in Chapter 7 of Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition, starting on page 372, or 374 for the nested part.)
Should still work with WinJS 4, though I haven't tried it.
Ok, so I have to give much credit to Kraig because he got me on the correct path to getting this worked out and the referenced book Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition is amazing.
The original issue was a combination of not using templates correctly (using curly braces in the data-win-bind attribute), not structuring my HTML correctly and not setting the child lists as WinJS.Binding.List data source. Below is the final working code structure to created a nested repeater when binding the data from code only:
HTML:
This is the template for the child lists. It looks similar, but I plan on add more things so I wanted it separate instead of recursive as referenced in the book. Note that the inner div after the template control declaration was important for me.
<div id="bucketItemTemplate" data-win-control="WinJS.Binding.Template">
<div>
<span>Description:</span>
<span data-win-bind="innerText: description"></span>
<span>Amount:</span>
<input type="text" data-win-bind="value: amount" />
<button class="removeBucketItem">X</button>
</div>
</div>
This is the main repeater template for the lists. Note that the inner div after the template control declaration was important for me. Another key point was using the "winControl.data" property against the property name of the child lists.
<div id="bucketTemplate" data-win-control="WinJS.Binding.Template">
<div>
<span>Bucket:</span>
<span data-win-bind="innerText: bucket"></span>
<span>Amount:</span>
<input type="text" data-win-bind="value: amount" />
<button class="removeBucket">X</button>
<div id="bucketItems" data-win-control="WinJS.UI.Repeater"
data-win-options="{template: select('#bucketItemTemplate')}"
data-win-bind="winControl.data: lineItems">
</div>
</div>
</div>
This is the main control element for the nested repeater and it is pretty basic.
<div id="budgetBuckets" data-win-control="WinJS.UI.Repeater"
data-win-options="{template: select('#bucketTemplate')}">
</div>
JavaScript:
The JavaScript came down to a few simple steps:
Getting the winControl
var bucketsControl = element.querySelector('#budgetBuckets').winControl;
Looping through the elements and making the child lists into Binding Lists - the data here is made up but could have easily came from the repo:
var bucketsData = selectedBudget.buckets;
for (var i = 0; i < bucketsData.length; i++) {
bucketsData[i].lineItems =
new WinJS.Binding.List([{ description: i, amount: i * 10 }]);
}
Then finally converting the entire data into a Binding list and setting it to the "data" property of the winControl.
bucketsControl.data = new WinJS.Binding.List(bucketsData);
*Note that this is the entire JavaScript file, for clarity.
(function () {
"use strict";
var nav = WinJS.Navigation;
WinJS.UI.Pages.define("/pages/budget/budget.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
var bindableBuckets;
require(['repository'], function (repo) {
//we can setup our save button here
var appBar = document.getElementById('appBarBudget').winControl;
appBar.getCommandById('cmdSave').addEventListener('click', function () {
//do save work
}, false);
repo.getBudgets(nav.state.budgetSelectedIndex).done(function (selectedBudget) {
var budgetContainer = element.querySelector('#budgetContainer');
WinJS.Binding.processAll(budgetContainer, selectedBudget);
var bucketsControl = element.querySelector('#budgetBuckets').winControl;
var bucketsData = selectedBudget.buckets;
for (var i = 0; i < bucketsData.length; i++)
{
bucketsData[i].lineItems = new WinJS.Binding.List([{ description: i, amount: i * 10 }]);
}
bucketsControl.data = new WinJS.Binding.List(bucketsData);
});
});
WinJS.UI.processAll();
}
});
})();