I'm using i18n(v9) to translate a lot of text in a big react project. It's working as intended in cases like:
<Intro
title={details.title}
subtitle={t('resume-upload subtitle')}
description={t('resume-upload description 2')}
/>
However, In a form component that uses these 2 imports:
import { Form } from 'mobx-react-form';
import validatorjs from 'validatorjs';
When I try to translate labels within the code like this:
setup() {
const { t } = this.props;
return {
fields: [
{
name: 'step',
value: 0
},
{
name: 'firstName',
label: t('Firstname'),
rules: 'required|string|between:2,25'
},
{
name: 'lastName',
label: t('Achternaam'),
rules: 'required|string|between:2,25'
},
{
name: 'emailaddress',
label: t('Email'),
rules: 'required|email|string'
},
{
name: 'phonenumber',
label: t('Telephone number'),
rules: 'required|string|telephone'
},
{
name: 'cv',
label: t('resume')
},
{
name: 'terms',
label: 'Terms',
value: false
},
{
name: 'newFile',
label: '',
value: true
},
{
name: 'noFile',
label: '',
value: false
}
]
};
}
}
export default withNamespaces()(UploadForm);
The t function gives an error in a parent file:
TypeError: form.values is not a function
Is there a way to translate json files like the way I'm attempting?
Related
I have a very large json file with an error that I need to fix.
{
id: 1,
name: 'Human',
type: {
id: { <==== here
id: 2,
name: 'Body',
image: 'body.png',
}, <==== here
},
},
I need to remove this id: { and the closing brace } lines inside type. How to remove them to make the object look like this?
{
id: 1,
name: 'Human',
type: {
id: 1,
name: 'Body',
image: 'body.png',
},
},
i'm looking for a solution to update an echart when new data comes in. Currently i have a chart and a drop down with some data.When i open the page, data is displaying at the chart perfectly fine. But when i use the drop down and change option to next data, nothing is happening. The previous data is still on the chart. Any ideas how to update the chart (object) when data changes ?
My code:
chart1: EChartOption = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Tests Open','Tests Approved', 'Tests Failed']
},
toolbox: {
show: true,
feature: {
mark: { show: true },
magicType: { title: '1', show: true, type: ['line', 'bar',] },
restore: { title: 'Restore', show: true },
saveAsImage: { title: 'Save Chart',show: true }
}
},
xAxis: [
{
type: 'category',
axisTick: { show: false },
data: []
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Tests Open',
type: 'bar',
data: [],
itemStyle: {
color: '#FDD051'
}
},
{
name: 'Tests Approved',
type: 'bar',
data: [],
itemStyle: {
color: '#2EAD6D'
}
},
{
name: 'Tests Failed',
type: 'bar',
data: [],
itemStyle: {
color:'#F0533F'
}
},
]
};
refreshChart(statistics: TestResultSiteStatistics) : void {
let months = [];
let open = [];
let approved = [];
let failed = [];
for (let month in statistics.monthly){
months.push(month);
approved.push(statistics.monthly[month].approved);
open.push(statistics.monthly[month].open);
failed.push(statistics.monthly[month].failed);
}
this.chart1.xAxis[0].data = months;
this.chart1.series[0].data = open;
this.chart1.series[1].data = failed;
this.chart1.series[2].data = approved;
}
<div #chart style="height:590px; width:1190px;" echarts [options]="chart1" ></div>
You cannot add data directly to instance because Echarts incapsulated diffucult logic to process data. You need to use method myChart.setOption({series: [new_data]}). It explained in API docs: https://echarts.apache.org/en/api.html#echartsInstance.setOption and https://echarts.apache.org/en/tutorial.html#Loading%20and%20Updating%20of%20Asynchronous%20Data
I was able to add a custom action to the table but I still don't know how to use that custom action to open a record in a different page/modal when it's clicked. How to assign the ID to that record row? How to pass it to a different view?
in the component.html
<ng2-smart-table [settings]="settings" [source]="source" (custom)="onCustomAction($event)"></ng2-smart-table>
in the component.ts
settings = {
mode: 'external',
hideSubHeader: true,
actions: {
position: 'right',
add: false,
edit:false,
delete: false,
custom: [
{ name: 'viewRecord', title: '<i class="far fa-file-alt"></i>'},
],
},
columns: {
firstName: {
title: 'First Name',
type: 'string',
},
lastName: {
title: 'Last Name',
type: 'string',
},
username: {
title: 'Username',
type: 'string',
},
email: {
title: 'E-mail',
type: 'string',
},
age: {
title: 'Age',
type: 'number',
},
},
};
onCustomAction(event): void {
//WHAT TO DO HERE?
}
SOLVED
onCustomAction(event): void {
//get action name to switch in case of different actions.
var actionName = event.action;
//get row id.
var id = event.data.id;
//navigate to edit/view url.
this.router.navigate(url)
}
your can inject NbdialogService in constuctor to open in dialog/Modal
private dialogService: NbDialogService
onCustomAction(event) {
switch (event.action) {
case 'view-details':
this.service.getDetails(event.data.Id)
.pipe(
tap(res => {
this.dialogService.open(UserDetailsComponent, { // inject your component will be displayed in modal
context: {
details: res,
},
});
})
).subscribe();
break;
default:
console.log('Not Implemented Action');
break;
}
or navigate sure as you did by this.router.navigate(url)
Using JSON Schema 7 to perform validations
Is the below validation possible using json schema.
{
properties : [{name: "a"}, {name: "b"}, {name: "c"}],
rules : [{ prop : ["a","b"] }, { prop : ["a"] }, {prop: ["c"]}]
}
The "prop" property in object is dependent values in properties.
ie only of "properties.name" exists then that value can be added to the "prop" array
Note:
The "properties" array can have any object of type {name : }
"name" can have any possible string, which i don't know beforehand
I have been going through documentation, but can find a answer.
Is this validation not supported in Json Schema yet?
You can't do it with a static JSON schema.
To archive it you would need a dynamic schema validation, but this could be dangerous to code injection from malicious users:
const Ajv = require('ajv')
const ajv = new Ajv({ allErrors: true, jsonPointers: true })
const data = {
properties: [{ name: 'a' }, { name: 'b' }, { name: 'c' }],
rules: [{ prop: ['a', 'b'] }, { prop: ['a', 'zz'] }, { prop: ['c'] }]
}
const validProp = data.properties.map(_ => _.name)
const schema = {
type: 'object',
required: ['properties', 'rules'],
properties: {
properties: {
type: 'array',
items: {
type: 'object',
required: ['name'],
properties: {
name: { type: 'string' }
}
}
},
rules: {
type: 'array',
items: {
type: 'object',
required: ['prop'],
properties: {
prop: {
type: 'array',
uniqueItems: true,
items: {
type: 'string',
enum: validProp // here happen the validation
}
}
}
}
}
}
}
const isValid = ajv.validate(schema, data)
if (!isValid) {
console.log(ajv.errors)
}
I am using graphql with mongoose and I am trying to access a nested object array in a json of this form:
"Plans": [
{
"id": ...
"name": ...
"frequency": ...
"lastExecuted": ...
"Steps": {
"Step": [
{
"id": ...
"shortDescription": ...
"description": ...
...
},
{...],
}
I created a mongoose model:
const PlanModel = Mongoose.model("Plan", {
name: String,
frequency: GraphQLString,
lastExecuted: String,
Steps: []
})
Intuitively I would insert my Stepmodel in the array, but this is giving me an error.
So I tried populating the array with the resolver:
Plans: {
type: GraphQLList(PlanType),
args: getGraphQLQueryArgs(PlanType),
resolve: (root, args, context, info) => {
return PlanModel
.find()
.populate("Steps")
.populate("Steps.Step")
.exec();
}
},
This is my PlanType:
const PlanType = new GraphQLObjectType({
name: 'Plan',
fields: () => ({
id: {
type: GraphQLID
},
name: {
type: GraphQLString
},
frequency: {
type: GraphQLString
},
lastExecuted: {
type: GraphQLString
},
maintenanceSteps: {
type: GraphQLList(StepType)
},
})
})
My GraphQL query returns an empty array in this case. I know this is a common problem, but I couldn't find any solution for my problem
The solution to my problem was adding another type:
const StepsType = new GraphQLObjectType({
name: 'Steps',
fields: () => ({
Step: {
type: GraphQLList(StepType)
}
})
})
const PlanType = new GraphQLObjectType({
name: 'Plan',
fields: () => ({
_id: {
type: GraphQLID
},
id: {
type: GraphQLString
},
name: {
type: GraphQLString
},
frequency: {
type: GraphQLString
},
lastExecuted: {
type: GraphQLString
},
status: {
type: GraphQLString
},
Steps: {
type: StepsType
},
})
})