We Keep Coding

How do you set filename for Webdatarocks default export

As the title suggests i cant for the life of me find a way to give the exported file a name except "Pivot"
The HTML/Vue part only has the Pivot and a select dropdown that filters by date and that works fine, it's only the export that i'm struggling with
<template>
<v-card>
<v-progress-linear
v-if="loading"
class="position-absolute"
style="z-index: 1"
color="red"
height="10"
indeterminate></v-progress-linear>
<v-card-title style="text-align:center"> Reports </v-card-title>
<v-card-text v-if="!loading">
<v-row>
<v-col cols="3" offset="1">
<v-select
v-model="selectedDate"
:items="reportdates"
label="Period:"
item-title="rd_date_label"
item-value="rd_date"
density="compact"
hide-details>
</v-select>
</v-col>
</v-row>
<br />
<v-row>
<Pivot id="pivotid"
ref="pivotref"
height="650px"
:report="report"
:toolbar="toolbar"
:beforetoolbarcreated="beforetoolbarcreated">
</Pivot>
</v-row>
</v-card-text>
</v-card>
</template>
Javascript part with my methods and data structure
<script>
import { mapGetters } from 'vuex'
import 'webdatarocks/webdatarocks.css'
import Pivot from "../../Common/Pivot.vue";
import '../../Common/webdatarocks.css';
export default {
name: 'Reports',
props: {
curDate: String,
},
components: {
Pivot
},
computed: {
...mapGetters (['reportdates', 'worktask']),
},
mounted() {
},
created() {
this.loadingData();
},
data() {
return {
isAdmin: null,
loading: false,
loaded: {
reportdates: false,
worktask: false,
},
selectedDate: null,
datachanged: null,
toolbar: true,
beforetoolbarcreated: this.customizeToolbar,
report: {
dataSource: {
data: [],
},
formats: [{
name: "hours",
maxDecimalPlaces: 2,
maxSymbols: 20,
textAlign: "right"
}],
slice: {
rows: [{
uniqueName: "Employee"
}
// ,{
// uniqueName: "Date"
// },
],
columns: [
{
uniqueName: "Client"
},
{
uniqueName: "[Measures]"
},],
measures: [{
uniqueName: "Hours",
aggregation: "sum",
format: "hours"
}]
},
options: {
grid: {
type: "compact",
title: "",
showFilter: true,
showHeaders: true,
showTotals: true,
showGrandTotals: "on",
showHierarchies: true,
showHierarchyCaptions: true,
showReportFiltersArea: true
},
configuratorActive: false,
configuratorButton: true,
showAggregations: true,
showCalculatedValuesButton: true,
drillThrough: true,
showDrillThroughConfigurator: true,
sorting: "on",
datePattern: "dd/MM/yyyy",
dateTimePattern: "dd/MM/yyyy HH:mm:ss",
saveAllFormats: false,
showDefaultSlice: true,
defaultHierarchySortName: "asc",
},
}
}
},
watch: {
reportdates() {
this.loaded.reportdates = true;
let fdate = this.reportdates.find(r => r.rd_date_label === this.curDate);
this.selectedDate = fdate.rd_date;
this.checkLoading();
},
worktask() {
this.loaded.worktask = true;
this.checkLoading();
//console.log('worktask: ' + this.worktask.length);
this.report.dataSource.data = this.getJSONData();
},
async selectedDate() {
//console.log('selectedDate: ' + this.selectedDate);
let fdate = this.reportdates.find(r => r.rd_date_label === this.curDate);
let tUserEmail = window.Laravel.user.email;
let tUserId = window.Laravel.user.id;
if(window.Laravel.user.role === "USR"){
if (fdate.rd_date == this.selectedDate) {
this.report.dataSource.data = [];
this.$store.dispatch('fetchWorkTaskReportDataUser', { rdate : this.selectedDate, tUserEmail : tUserEmail, });
} else {
let dstr = new Date(this.selectedDate).toISOString().slice(0, 7);
const params = Object.assign({}, this.$route.params);
params.curDate = dstr;
await this.$router.push({ params });
this.$router.go();
}
}else{
if (fdate.rd_date == this.selectedDate) {
this.report.dataSource.data = [];
this.$store.dispatch('fetchWorkTaskReportData', { rdate : this.selectedDate, tUserEmail : tUserEmail, });
} else {
let dstr = new Date(this.selectedDate).toISOString().slice(0, 7);
const params = Object.assign({}, this.$route.params);
params.curDate = dstr;
await this.$router.push({ params });
this.$router.go();
}
}
// if (fdate.rd_date == this.selectedDate) {
// this.report.dataSource.data = [];
// this.$store.dispatch('fetchWorkTaskReportDataUser', { rdate : this.selectedDate, tUserEmail : tUserEmail, });
// } else {
// let dstr = new Date(this.selectedDate).toISOString().slice(0, 7);
// const params = Object.assign({}, this.$route.params);
// params.curDate = dstr;
// await this.$router.push({ params });
// this.$router.go();
// }
}
},
methods: {
loadingData() {
this.loading = true;
// let tUserId = window.Laravel.user.id;
// if(window.Laravel.user.role === "ADM"){
// console.log("Admin");
// this.$store.dispatch('fetchReportDates',{
// tUserId : tUserId,
// });
// }else{
// console.log("User");
// this.$store.dispatch('fetchReportDatesUser',{
// tUserId : tUserId,
// })}
this.$store.dispatch('fetchReportDates',{
// tUserId : tUserId,
})
},
checkLoading() {
this.loading = !(this.loaded.reportdates && this.loaded.worktask);
},
getText(item) {
return item;
},
customizeToolbar(toolbar) {
var tabs = toolbar.getTabs();
toolbar.getTabs = function() {
delete tabs[0];
delete tabs[1];
delete tabs[2];
delete tabs[7];
return tabs;
}
},
getJSONData() {
return this.worktask
for(let r=0; r < this.worktask.length; r++){
returns.push(this.worktask[r]);
}
return returns;
},
},
}

This can be done by customizing the default tabs from the Toolbar and using the exporTo() API call. For example, here's how you can change the name of the exported PDF file:
function customizeToolbar(toolbar) {
// get all tabs
let tabs = toolbar.getTabs();
toolbar.getTabs = function() {
let exportTab = tabs.find(tab => tab.id == "wdr-tab-export");
if (!exportTab) return tabs;
let exportToPdfTab = exportTab.menu.find(tab => tab.id == "wdr-tab-export-pdf");
exportToPdfTab.handler = () => {
this.pivot.exportTo("pdf", {
filename: "custom-name" // set the necessary name
});
}
return tabs;
}
}
Please check the following CodePen: https://codepen.io/webdatarocks/pen/QWxYLRy?editors=1010

How to filter array of object value and update the values using useState in React JS

I have a array of object
const formFields = {
firstName: {
value: '',
label: 'FirstName',
type: 'text',
placeHolder: 'Enter Firstname',
helperText: '',
required: false,
error: false
},
lastName: {
value: '',
label: 'LastName',
type: 'text',
placeHolder: 'Enter LastName',
helperText: '',
required: false,
error: false
},
emailID: {
value: 'sfas',
label: 'emailID',
type: 'email',
placeHolder: 'Enter Email ID',
helperText: '',
required: true,
error: false
},
password: {
value: '',
label: 'password',
type: 'password',
placeHolder: 'Enter password',
helperText: '',
required: true,
error: false
},
confirmPassword: {
value: '',
label: 'confirmPassword',
type: 'password',
placeHolder: 'Enter Confirm Password',
helperText: '',
required: true,
error: false
}
}
const [inpValues, setInpValues] = useState(formFields)
Filter and Update
I am trying to filter the object by values where required === true and value.length === 0
and update the filtered array values like helperText = "Enter the " + label and error = true
const validate = () => {
const requiredFields = Object.values(inpValues).filter((fields) => {
if (fields.required === true && fields.value.length === 0) {
//How to setInpValues
//setInpValues(...inpValues, fields: { fields.helperText = "Enter the " + fields.label})
//fields.error = true
}
})
}
<MyButton color="primary" handleOnClick={validate} text="SIGN UP"></MyButton>

The validate function should be, this will also take care of reverting the error back in case of validity.
const validate = () => {
let newValues={...inpValues}
const requiredFields = Object.keys(newValues).forEach((key) => {
let field=newValues[key];
if (field.required === true && field.value.length === 0) {
field.helperText=`Enter the ${field.label}`;
field.error = true;
newValues[key]= field;
}else{
newValues[key].error=false;
newValues[key].helperText='';
}
})
setInpValues(newValues);
}

The array filter callback function expects you to return a boolean that says if the current value should be filtered out or not. I think something like
const validate = () => {
const requiredFields = Object.values(inpValues).filter((fields) => {
if (fields.required === true && fields.value.length === 0) {
return true;
}
return false;
})
setInpValues(requiredFields)
}
this would solve it. In this example you first filter the input values and when they're filtered, you set them to the state. This sets inputValues to be all the required fields, every time you click.

Validation on auto-populated field in a form in not working - ReactJS

I have a form which has validation set up for all of the fields. For the validation I check if each input value is required, has the required max length and min length. Once complete I do a final check to see if the whole form is valid.
The above validations work for the fields where the user physically types into the input field (which is how the tutorial I was following said to do it). However I amended the Country input field and the Email input field so that they were pre-filled. Country contains a default string of England,UK and the email field is pre-filled with the email that the user filled in when signing up from the state this.props.email. Now my form only returns as valid if I type something into those two fields next to the pre-filled data..after many hours of debugging I cannot see why...
See code below:
state = {
orderForm: {
name: {
elementType: "input",
elementConfig: {
type: "text",
placeholder: "Your Name"
},
value: "",
validation: {
required: true
},
valid: false,
touched: false
},
postCode: {
elementType: "input",
elementConfig: {
type: "text",
placeholder: "PostCode"
},
value: "",
validation: {
required: true,
minLength: 5,
maxLength: 8
},
valid: false,
touched: false
},
country: {
elementType: "input",
elementConfig: {
type: "text",
placeholder: "Country"
},
value: "England, UK",
validation: {
required: true
},
valid: false,
touched: false
},
email: {
elementType: "input",
elementConfig: {
type: "email",
placeholder: "Your E-Mail"
},
value: this.props.email,
validation: {
required: true
},
valid: false
},
formIsValid: false
};
inputChangedHandler = (event, inputIdentifier) => {
const updatedOrderForm = {
...this.state.orderForm
};
const updatedFormElement = {
...updatedOrderForm[inputIdentifier]
};
updatedFormElement.value = event.target.value;
updatedFormElement.valid = checkValidity(
updatedFormElement.value,
updatedFormElement.validation
);
updatedFormElement.touched = true; // ensures that the user types something in the input field
updatedOrderForm[inputIdentifier] = updatedFormElement;
let formIsValid = true;
for (let inputIdentifier in updatedOrderForm) {
formIsValid = updatedOrderForm[inputIdentifier].valid && formIsValid;
}
this.setState({ orderForm: updatedOrderForm, formIsValid: formIsValid });
};
render() {
const formElementsArray = [];
for (let key in this.state.orderForm) {
formElementsArray.push({
id: key,
config: this.state.orderForm[key]
});
}
let form = (
<form>
{formElementsArray.map(formElement => {
return (
<Input
inputtype={formElement.config.elementType}
key={formElement.id}
elementType={formElement.config.elementType}
elementConfig={formElement.config.elementConfig}
value={formElement.config.value}
invalid={!formElement.config.valid}
shouldValidate={formElement.config.validation}
touched={formElement.config.touched}
changed={event =>
this.inputChangedHandler(
event,
formElement.id,
formElement.config.value
)
}
/>
);
})}
<Button
clicked={this.orderHandler}
btnType="Success"
disabled={!this.state.formIsValid}
>
PLACE ORDER HERE
</Button>
</form>
);```
validation function
export const checkValidity = (value, validation) => {
let isValid = true;
if (validation.required) {
isValid = value.trim() !== "" && isValid;
}
if (validation.minLength) {
isValid = value.length >= validation.minLength && isValid;
}
if (validation.maxLength) {
isValid = value.length <= validation.maxLength && isValid;
}
return isValid;
};

I would assume since you initially set country to false in state.orderForm.country, it will remain false unless changes are made.
country: {
elementType: "input",
elementConfig: {
type: "text",
placeholder: "Country"
},
value: "England, UK",
validation: {
required: true
},
valid: false,
touched: false
}
Since country already has a placeholder for 'England, UK' - and you consider that a valid submission, then change valid to true, as seen below. Your checkValidity function should cover you if the user enters invalid data.
country: {
elementType: "input",
elementConfig: {
type: "text",
placeholder: "Country"
},
value: "England, UK",
validation: {
required: true
},
valid: true,
touched: false
}
Also, you can probably shorten the checkValidity function to something roughly like below:
export const checkValidity = (value, validation) => {
if (
value.trim() !== ""
&& value.length >= validation.minLength
&& value.length <= validation.maxLength
) {
return true
}
return false
}

rerender component when my state change state in ReactJS

I have a specific problem in my React-Redux app. so I display rerender my component, when my this.state.boolean change value. A few lines of code express more than a thousand words:
Please look on my method appendTable setstate boolean to false, and when this end operations, setState boolean to true. I would like to rerender my component only then my boolean state changing state.
class TableComponent extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
columnStatic: [{ name: "customerName", title: "Client" }],
columnsDynamic: [],
columnBands: [],
columns: [],
tableColumnExtensions: [],
percentColumns: [],
boolean: true
};
this.handleDateWeek = this.handleDateWeek.bind(this);
this.appendTable = this.appendTable.bind(this);
this.Auth = new AuthService();
}
componentDidMount() {
this.handleDateWeek();
}
componentDidUpdate(prevProps) {
if (
this.props.isLoading === false &&
prevProps.isLoading !== this.props.isLoading
)
this.appendTable();
}
handleDateWeek() {
this.props.handleLastWeek(this.props.dateFrom, this.props.dateTo);
}
appendTable() {
this.setState(
{
columnStatic: [{ name: "customerName", title: "Klient" }],
columnsDynamic: [],
columnBands: [],
columns: [],
tableColumnExtensions: [],
percentColumns: [],
boolean: false
},
() => {
var i = 1;
var j = 1;
var k = 1;
var l = 0;
var dateArray = [];
this.props.dataApi.map(dA => {
dA.data.map(dat => {
if (dateArray.indexOf(dat.date) > -1) {
return;
}
dateArray.push(dat.date);
this.setState(prevState => ({
columnsDynamic: [
...prevState.columnsDynamic,
{ name: "ordersAmount" + i++, title: "Zamówienia" },
{ name: "earnings" + i++, title: "Obrót (brutto)" }
],
columnBands: [
...prevState.columnBands,
{
title: `${dat.date}`,
children: [
{ columnName: "ordersAmount" + j++ },
{ columnName: "earnings" + j++ }
]
}
],
percentColumns: [
...prevState.percentColumns,
`ordersAmount${l++ % 2 != 0 ? l : l++}`
],
tableColumnExtensions: [
...prevState.tableColumnExtensions,
{
columnName: "ordersAmount" + k++,
width: 90,
align: "right"
},
{
columnName: "earnings" + k++,
width: 150,
align: "right"
}
],
boolean: true
}));
});
});
}
);
}
...
return (
<Fragment>
<div className="tableContainerHead">
{this.props.isLoading ? (
<Loading />
) : (
<Fragment>
<Grid
rows={dataApi}
columns={columns.concat(columnStatic, columnsDynamic)}
>
<PercentTypeProvider for={percentColumns} />
...
);

You could add the method shouldComponentUpdate():
shouldComponentUpdate(nextProps, nextState) {
return (nextState.boolean !== this.state.boolean) ? true : false;
}
It should now re-render only when the boolean property has been updated.
I suggest you change the name of that property though, as Boolean is a reserved keyword and it is very close. Perhaps something more semantically descriptive?

How can I avoid this behavior in react-native?

I'm currently working on an input with mask in react-native, however I'd like to avoid input of non-numeric characters. I did, however I'd like to avoid the behavior below:
enter image description here
'use strict';
import React, { Component, PropTypes } from 'react';
import { styles, cleanStyle, dirtyStyle } from './styles';
import { colors } from '../../config/styles';
import {
Animated,
Easing,
Platform,
StyleSheet,
Text,
TextInput,
View,
Keyboard,
} from 'react-native';
const textPropTypes = Text.propTypes || View.propTypes;
const textInputPropTypes = TextInput.propTypes || textPropTypes;
const propTypes = {
...textInputPropTypes,
inputStyle: textInputPropTypes.style,
labelStyle: textPropTypes.style,
disabled: PropTypes.bool,
style: View.propTypes.style,
};
const SMInput = React.createClass({
propTypes,
getDefaultProps() {
return {
editable: true,
onlyNumbers: false,
underlineColorAndroid: 'transparent'
};
},
getInitialState() {
Keyboard.addListener('keyboardDidChangeFrame', () => {
console.log('keyboardDidChangeFrame');
});
const state = {
text: (this.props.value) ? this.props.value.toString() : '',
dirty: !!this.props.value,
borderColor: new Animated.Value(0),
labelColor: new Animated.Value(0),
maxLength: this.props.maxLength,
placeHolder: '',
};
const style = state.dirty ? dirtyStyle : cleanStyle;
state.labelStyle = {
fontSize: new Animated.Value(style.fontSize),
top: new Animated.Value(style.top),
position: new Animated.Value(style.position),
}
return state;
},
_animate(dirty) {
const animateTime = 150;
const nextStyle = dirty ? dirtyStyle : cleanStyle;
const labelStyle = this.state.labelStyle;
const anims = Object.keys(nextStyle).map(prop => {
return Animated.timing(
labelStyle[prop],
{
toValue: nextStyle[prop],
duration: animateTime,
},
Easing.ease
)
});
setTimeout(() => {
if (this.props.placeholder && dirty) {
this.setState({
placeHolder: this.props.placeholder
});
}
}, 120);
anims.push(
Animated.timing (
this.state.borderColor, {
toValue: dirty ? 1 : 0,
duration: animateTime,
}
)
);
anims.push(
Animated.timing (
this.state.labelColor, {
toValue: dirty ? 1 : 0,
duration: animateTime,
}
)
);
Animated.parallel(anims).start();
},
_onFocus() {
this._animate(true);
this.setState({ dirty: true });
if (this.props.onFocus) {
this.props.onFocus(arguments);
}
},
_onBlur() {
if (!this.state.text) {
this._animate(false);
this.setState({ dirty: false });
}
if (this.props.onBlur) {
this.props.onBlur(arguments);
}
if (this.props.placeholder) {
this.setState({
placeHolder: ''
});
}
},
onChangeText(text) {
this.setMask(text);
if (this.props.onChangeText) {
this.props.onChangeText(text);
}
},
setMask(text) {
//function mask(inputName, mask) {
var mask = '00/00/0000';
this.setState({
maxLength: mask.length
});
var value = text;
var literalPattern = /[0\*]/;
var numberPattern = /[0-9]/;
var newValue = '';
for (var vId = 0, mId = 0 ; mId < mask.length ; ) {
if (mId >= value.length) {
break;
}
// Number expected but got a different value, store only the valid portion
if (mask[mId] == '0' && value[vId].match(numberPattern) == null) {
break;
}
// Found a literal
while (mask[mId].match(literalPattern) == null) {
if (value[vId] == mask[mId]) {
break;
}
newValue += mask[mId++];
}
newValue += value[vId++];
mId++;
}
this.setState({
text: newValue
})
},
updateText(event) {
const text = event.nativeEvent.text;
this.setState({ text })
if (this.props.onEndEditing) {
this.props.onEndEditing(event);
}
},
_renderLabel() {
const labelColor = this.state.labelColor.interpolate({
inputRange: [ 0, 1 ],
outputRange: [ colors.darkPurple50, colors.purple100 ]
});
return (
<View style={ styles.wrapper }>
<Animated.Text
ref='label'
style={ [this.state.labelStyle, styles.label, this.props.labelStyle, { color: labelColor } ] }
>
{this.props.children}
</Animated.Text>
</View>
)
},
render() {
const borderColor = this.state.borderColor.interpolate({
inputRange: [ 0, 1 ],
outputRange: [ colors.gray80, colors.purple100 ]
});
const props = {
autoCapitalize: this.props.autoCapitalize,
autoCorrect: this.props.autoCorrect,
autoFocus: this.props.autoFocus,
bufferDelay: this.props.bufferDelay,
clearButtonMode: this.props.clearButtonMode,
clearTextOnFocus: this.props.clearTextOnFocus,
controlled: this.props.controlled,
editable: this.props.editable,
enablesReturnKeyAutomatically: this.props.enablesReturnKeyAutomatically,
keyboardType: this.props.keyboardType,
multiline: this.props.multiline,
onBlur: this._onBlur,
onChange: this.props.onChange,
onChangeText: this.onChangeText,
onEndEditing: this.updateText,
onFocus: this._onFocus,
onSubmitEditing: this.props.onSubmitEditing,
password: this.props.password,
returnKeyType: this.props.returnKeyType,
selectTextOnFocus: this.props.selectTextOnFocus,
selectionState: this.props.selectionState,
style: [styles.input],
maxLength: this.state.maxLength,
underlineColorAndroid: this.props.underlineColorAndroid, // android TextInput will show the default bottom border
onKeyPress: this.props.onKeyPress,
spellCheck: this.props.spellCheck,
mask: this.props.mask,
placeholder: this.state.placeHolder,
placeholderTextColor: colors.darkPurple50,
value: this.state.text,
};
const elementStyles = [styles.element];
if (this.props.inputStyle) {
props.style.push(this.props.inputStyle);
}
if (this.props.style) {
elementStyles.push(this.props.style);
}
if (!this.props.editable) {
elementStyles.push(styles.elementNotEditable);
props.style.push(styles.inputNotEditable);
}
return (
<Animated.View style={ [elementStyles, { borderColor: borderColor }] }>
{ this._renderLabel() }
<TextInput
{ ...props }
>
</TextInput>
</Animated.View>
);
},
});
SMInput.propTypes = {
disabled: PropTypes.bool,
style: Text.propTypes.style,
};
export default SMInput;