We Keep Coding

Pass data in React FullCalendar with API call

I'm getting some data with an API call and Data looks like this
{
"events": [
{
"id": 7,
"comments": "",
"origin": "Terrassa, Spain",
"destination": "Delft, Netherlands",
"total_trucks": 0,
"material_type": "0",
"scheduled_date": "2019-09-29T01:01:00",
"offered_price": 0,
"weight": 7979879,
"status": "Assigned",
"posted_on": "2019-09-23T15:24:39.946644",
"All_India": true,
"Andhra_Pradesh": false,
"Assam": false,
"Bihar": false,
...
"West_Bengal": false,
"owner": 1,
"truck_type": 2,
"truck_name": 139
}
{
"id": 9,
"comments": "",
"origin": "Teyty, Spain",
"destination": "Derry, Netherlands",
"total_trucks": 0,
"material_type": "0",
"scheduled_date": "2019-09-29T01:01:00",
"offered_price": 0,
"weight": 7979879,
"status": "Assigned",
"posted_on": "2019-09-23T15:24:39.946644",
"All_India": true,
"Andhra_Pradesh": false,
"Assam": false,
"Bihar": false,
...
"West_Bengal": false,
"owner": 1,
"truck_type": 2,
"truck_name": 139
}
]
}
From this data I want schedule_date in 'date' field in my events of reactFullCalender and total_weight and total_trucks in title of those event.
What I've tried so far gives me output as Object object in events on calendar screen.
My code for that is:
<FullCalendar defaultView="dayGridMonth" plugins={[ dayGridPlugin ]}
events={[{ title: this.state.calendarEvents, date: '2019-09-22'] />
And my API call looks like this:
const calendarEvent = await getEventsData();
this.setState({calendarEvents:calendarEvent});
console.log(calendarEvent,
"calendarEvents");
And my states looks like this:
this.state = {
calendarEvents:[
{totalTrucks:''},
{totalWeight:''}]};}
All I want is that API call calendarEvent gets the data and I want to feed that in events in fullCalender

Can you use this:
setStateAsync(state) {
return new Promise((resolve) => {
this.setState(state, resolve)
});
To set your state asynchronously after we get it from the data.
This has a reference where we set State asynchronously.

jstree - tree nodes are recreated after adding a new node or removing an existing one

i built a tree with nodes using jstree. the user can choose the color background of the node with a colorpicker in the contextmenu.
Unfortunately i noticed that when a new node is created or another one removed, the tree seems to be recreated. indeed css stuff get lost and things added in node.data too.
how can i prevent this?
this is my code:
function treeCreation(){
var core = {
'check_callback': true,
};
var plugins = [
"contextmenu", "dnd", "search",
"state", "types", "wholerow"
];
var types = {
"default": {
'max_depth': 1
}
};
var contextmenu = {
"items": function($node) {
var tree = $("#tree").jstree(true);
return {
"Create": {
"separator_before": false,
"separator_after": false,
"label": "Create",
"action": function (obj) {
$node = tree.create_node($node);
tree.edit($node);
}
},
"Rename": {
"separator_before": false,
"separator_after": false,
"label": "Rename",
"action": function (obj) {
tree.edit($node);
}
},
"Remove": {
"separator_before": false,
"separator_after": false,
"label": "Remove",
"action": function (obj) {
tree.delete_node($node);
}
},
"Color": {
"separator_before": false,
"separator_after": false,
"label": "Color",
"action": function (obj) {
$('#colorpicker').trigger('click');
}
}
};
}
};
var animation = 400;
$('#tree').jstree({
"plugins" : plugins,
'core': core,
'animation': animation,
'types': types,
'contextmenu': contextmenu
});
}
i added custom callbacks because i needed to manipulate strings for translating the context-menu. Maybe it depends on that?

How to get the dataValueField when I select one node

I am using kendoTreeView. I want to get the unitId when one node is selected.
This is my code.
$("#treeview").kendoTreeView({
dataSource: dataSource,
dataTextField: "name",
dataValueField: 'unitId'
});
dataSource example:
{
"rows": [{
"_token": "8cfd3e2133d936a6a65c6f7cfb80268a",
"objectVersionNumber": null,
"unitId": 10002,
"parentId": 10001,
"unitCode": "100000",
"name": "Hand",
"description": null,
"managerPosition": null,
"companyId": null,
"enabledFlag": null,
"unitCategory": null,
"unitType": null,
"positionName": null,
"parentName": null,
"parentCode": null,
"hasChildren": true
}],
"success": true,
"total": 1
}

Which method of treeview are you using to capture the click event? You can write a select event that kendoTreeView provides which will give you data of the node you clicked/selected. You can refer this: https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview/events/select
If this doesn't work for you, can you share your DOJO or jsFiddle and I could further help.

Populate Material UI v1.0.0-beta.27 Select Component items with props on editing a row using DevExtreme React Grid

I'm trying to implement my own Grid based on this example. But when I edit a row, the current value in the dropdown menu disappears. When I click on the dropdown to reveal the other items, I can see them but when I try selecting picking an item, my app crashes and the console has this message - Uncaught Error: Material-UI: the 'value' property is required when using the 'Select' component with 'native=false'.
So my understanding is that the value for the Select component is not being set both initially during edit and also when it's onChange event executes.
My {rows} look like this
[
{
"email": "test#domain.tld",
"id": "5a5c26f4c54d2d0366fa801b",
"name": "Test",
"token": "User-sdf84r89fwer",
"user_type": {
"id": "5a5c25dbc54d2d0366fa801a",
"name": "Admin",
"permissions": {
"lists": {
"create": false,
"delete": false,
"read": false,
"update": false
},
"phases": {
"create": false,
"delete": false,
"read": false,
"update": false
}
},
"token": "UserType-k32k4kl9sdmfmk"
}
}
]
And my {columns} like this
[
{ name: 'name', title: 'Name' },
{ name: 'email', title: 'Email ID' },
{
name: 'user_type',
title: 'User Type',
getCellValue: row => (row.user_type ? row.user_type.name : undefined)
},
]
These render properly the first time. The user_type column is what I'm trying to populate with dropdown values. The user_types array looks like this out of which I only use the name and id properties.
[
{
"id": "5a5f6aadc54d2d269c0700ce",
"name": "Admin",
"permissions": {
"lists": {
"create": true,
"delete": true,
"read": true,
"update": true
},
"phases": {
"create": true,
"delete": true,
"read": true,
"update": true
}
},
"token": "UserType-k32k4kl9sdmfmk"
},
{
"id": "5a5f6c44c54d2d269c0700cf",
"name": "Moderator",
"permissions": {
"lists": {
"create": true,
"delete": true,
"read": true,
"update": true
},
"phases": {
"create": false,
"delete": false,
"read": false,
"update": false
}
},
"token": "UserType-k32k4kl9sdmfmk"
},
{
"id": "5a5f6cbbc54d2d269c0700d1",
"name": "Guest",
"permissions": {
"lists": {
"create": false,
"delete": false,
"read": true,
"update": false
},
"phases": {
"create": false,
"delete": false,
"read": false,
"update": false
}
},
"token": "UserType-k32k4kl9sdmfmk"
}
]
And finally based on the example, I pass the user_types as props to LookUpEditCellBase and use it like this,
const LookupEditCellBase = ({
userTypes, value, onValueChange, classes,
}) => (
<TableCell
className={classes.lookupEditCell}
>
<Select
value={value}
onChange={event => onValueChange(event.target.value)}
input={
<Input
classes={{ root: classes.inputRoot }}
/>
}
>
{userTypes.map(item => (
<MenuItem key={item.id} value={item.id}>{item.name}</MenuItem>
))}
</Select>
</TableCell>
);
Any idea what might be causing the Select field to not be able to read the value on edit and onChange? Every other piece is pretty much the same as the example. Been stumped for quite sometime now so any sort of help will be great!

Browser-sync reload constantly

I am creating project with JS, HTML, CSS and I am trying to makes my workflow faster and easier, so I decide to install browser-sync to help with auto-reloading page during coding process. And that would be great solution but browser-sync constantly after 30-60 sec reloading my page, what is annoying because during debugging when I change something in google chrome dev tools, like css properties, browser reload and changes gone. This is how I start browser-sync
browser-sync start --server --files .
And this is my bs-config.js
module.exports = {
"ui": {
"port": 3001,
"weinre": {
"port": 8080
}
},
"files": ["./css/*.css", "./scripts/*.js", "./*.html"],
"watchEvents": [
"change"
],
"watchOptions": {
"ignoreInitial": false
},
"server": false,
"proxy": false,
"port": 3000,
"middleware": false,
"serveStatic": [],
"ghostMode": {
"clicks": true,
"scroll": true,
"location": true,
"forms": {
"submit": true,
"inputs": true,
"toggles": true
}
},
"logLevel": "info",
"logPrefix": "Browsersync",
"logConnections": false,
"logFileChanges": true,
"logSnippet": true,
"rewriteRules": [],
"open": "local",
"browser": "default",
"cors": false,
"xip": false,
"hostnameSuffix": false,
"reloadOnRestart": false,
"notify": true,
"scrollProportionally": true,
"scrollThrottle": 0,
"scrollRestoreTechnique": "window.name",
"scrollElements": [],
"scrollElementMapping": [],
"reloadDelay": 0,
"reloadDebounce": 0,
"reloadThrottle": 0,
"plugins": [],
"injectChanges": true,
"startPath": null,
"minify": true,
"host": null,
"localOnly": false,
"codeSync": true,
"timestamps": true,
"clientEvents": [
"scroll",
"scroll:element",
"input:text",
"input:toggles",
"form:submit",
"form:reset",
"click"
],
"socket": {
"socketIoOptions": {
"log": false
},
"socketIoClientConfig": {
"reconnectionAttempts": 50
},
"path": "/browser-sync/socket.io",
"clientPath": "/browser-sync",
"namespace": "/browser-sync",
"clients": {
"heartbeatTimeout": 5000
}
},
"tagNames": {
"less": "link",
"scss": "link",
"css": "link",
"jpg": "img",
"jpeg": "img",
"png": "img",
"svg": "img",
"gif": "img",
"js": "script"
}
};
I didn't add any configs to it. I was trying to find solution but nothing help.
What I want is to reloading page only when I make and save changes to .htm, .css, .js files and I thought that is default behavior for browser-sync.