So I have a structure like so:
{
documentGroup: {
Id: 000
Children: [
{
Id: 000
Status: 1
},
{
Id: 000
Status: 2
},...
]
},
},
Is there a way to write an ngIf statement to check if all Children elements have Status == 1?
EDIT:
When I try this
documentGroup.children.every(({status}) => status === 1)
I get the error:
Parser Error: Missing expected ) at column 41 in [documentGroup.children.every(({status}) => status === 1)
You will need add a new function into your component's .ts file which would do the check for you and you can then reference it in the template as follows (documentsObj is the object that contains the object in your example):
.ts:
isAllStatusOne(): boolean {
return this.documentsObj.documentGroup.Children.every(({Status}) => Status === 1);
}
.html:
*ngIf="isAllStatusOne()"
The above code should trigger change detection at the start and any time a property value changes in the documentsObj object which should then proceed to check if all Children have a Status property that is 1. If they all are 1 - every should return true and the nested elements/components should be rendered.
Alternatively you can use find which when using with Status !== 1 condition would return undefined when all Status properties are 1, hence coupled with ! at the start it will result in true:
isAllStatusOne(): boolean {
return !this.documentsObj.documentGroup.Children.find(({Status}) => Status !== 1);
}
you could also make use of an angular pipe, to check the status and return something else instead (in your case, you could check the status and return true or false).
Transforming Data Using Pipes
Related
I have a contact model that uses maps but the return is null thus causing aysnc suspension. I have tried tried setting these maps to return an empty list but to no avail do I manage to resolve the issue.
ContactModel{
//factory method constructor
emails: List<Email>.from(parsedJson['Emails'].map((x)=>Email.fromJson(x))),
tasks: List<Tasks>.from(parsedJson["Tasks"].map((x) => Tasks.fromJson(x))),
notes: List<Notes>.from(parsedJson["Notes"].map((x) => Notes.fromJson(x))),
}
The error returns as : No such method map called on null. Receiver null
I have tried to resolve the issue by writing it as such
ContactModel{
//factory method constructor
emails: List<Email>.from(parsedJson['Emails'].map((x)=>Email.fromJson(x))).toList() ?? [],
tasks: List<Tasks>.from(parsedJson["Tasks"].map((x) => Tasks.fromJson(x))).toList() ?? [],
notes: List<Notes>.from(parsedJson["Notes"].map((x) => Notes.fromJson(x))).toList() ?? [],
}
You can try null checking the json like so :
ContactModel{
emails: parsedJson['Emails'] != null ? List<Email>.from(parsedJson['Emails'].map((x)=>Email.fromJson(x))).toList() : [],
tasks: parsedJson['Tasks'] != null ? List<Tasks>.from(parsedJson["Tasks"].map((x) => Tasks.fromJson(x))).toList() : [],
notes:parsedJson['Notes'] != null ? List<Notes>.from(parsedJson["Notes"].map((x) => Notes.fromJson(x))).toList() : [],
}
Basically, I always check 2 things when working with JSON types :
You must check your JSON contains the key you're looking for
You must check null value being returned if the key exist.
I recommend you doing this double check like this :
if(parsedJson.isNotEmpty) {
List<dynamic> emails = [];
if (parsedJson.containsKey('Email') && parsedJson['Email'] is List) {
emails = List<Email>.from(parsedJson['Emails'].map((x)=>Email.fromJson(x)))
}
ContactModel({emails: emails});
}
This way, you always make sure you've got the right type, and avoid production error (imagine your API going nuts). It's more verbose, I know, but to me, good code requires accuracy
I am trying to add a new key-value pair to the already loaded JSON Array. I am adding the new key-value pair to customize the header column cells in react bootstrap table but getting the below errors. Can any one please help?
'Columns' in the below state is where I wanted to add new key-value pair
state = {
data: MYResult.Products || [],
actualData: MYResult.Products || [],
columns: MYResult.ParametricList_Attributes || [],
isCompareClicked: false,
isDisabled: true,
selected: []
};
This is how I am adding the key-value pair -
componentDidMount(){
checkbox = (column, colIndex) => {
return (
<h5>{ column.text }<checkbox/></h5>
);
}
console.log(this.state.columns) ;
newColumn = this.state.columns.map((column) => {
return {...column, headerFormatter: checkbox};
});
this.setState({columns: newColumn });
}
Full code here - https://codesandbox.io/s/o1r988qkz Please uncomment the componentDidMount() to see the issue
Firstly, there's a typo in dcolumn and column.
And regarding the not defined error, you need to define it using const. Use like:
const checkbox = (column, colIndex) => {
return (
<h5>{column.text}<checkbox /></h5>
);
}
JavaScript variables need to be declared when they are used. Public class syntax can not be used everywhere. The error you're getting is self-evident - 'checkbox is not defined'.
Refer this on how to use it: https://tylermcginnis.com/javascript-private-and-public-class-fields/
I simply declared the undeclared variables in your example and the code worked.
I am trying to populate the project select dropdown with data from the server.
I am using yii2.
My controller data action:
public function actionData()
{
$list = new OptionsConnector(null, "PHPYii");
$list->render_table("project", "id", "id(value),name(label)");
$connector = new JSONSchedulerConnector(null, "PHPYii");
$connector->set_options("project", $list);
$connector->configure(
new Booking(), "id", "start, end, activity, user, subsubproject, status, comment"
);
$connector->render();
}
I get an error message:
Exception 'Error' with message 'Call to a member function find() on
string'
And I think this line is the cause: $connector->set_options("project", $list);
What should I change?
UPDATE:
So I am here now:
public function actionData() {
$list = new JSONOptionsConnector(null, "PHPYii");
$list->enable_log("text1.log");
$list->configure(
new Subsubproject(),
"-","id, name"
);
$list->render();
$connector = new JSONSchedulerConnector(null, "PHPYii");
$connector->enable_log("text2.log");
$connector->set_options("subsubprojects", $list);
$connector->configure(
new Booking(),
"id", "start, end, activity, user, subsubproject, status,comment"
);
$connector->render();
}
and I get this:
0: Object { key: undefined, id: 1, name: "Thing1", … }
1: Object { key: undefined, id: 2, name: "Thing2", … }
2: Object { key: undefined, id: 3, name: "Thing3", … }
I don't have keys... How can I get some? :)
1) You don't need to call the render method of JSONOptionsConnector directly. Calling it ends processing of the request if I'm not mistaken, so the SchedulerConnector takes no effect
Try commenting out $list->render(); line.
2) The response format seems a bit off. This may be a bug of PHPYii wrapper of dhtmlx connector, I'm not sure
According to source codes the client-side needs value and label properties from options, and while handler returns id and name.
You can try something following:
public function actionData() {
$list = new JSONOptionsConnector(null, "PHPYii");
$list->enable_log("text1.log");
$list->configure(
new Subsubproject(),
"id","id(value), name(label)"
// or
// "id(value)","id(value), name(label)"
);
$connector->enable_log("text2.log");
$connector->set_options("subsubprojects", $list);
$connector->configure(
new Booking(),
"id", "start, end, activity, user, subsubproject, status,comment"
);
$connector->render();
}
This should produce a json response containing a list of booking and subprojects.
However, I can't test this code so something may still be wrong.
You can try it and see whether the result JSON looks right.
If it doesn't get you any closer, I honestly would produce json manually rather than using a connector with PHPYii wrapper. That way you'll have direct control over what is returned from your controller and won't have another black box there.
You'll need to return a json of the following structure from your action:
https://docs.dhtmlx.com/scheduler/data_formats.html#jsonwithcollections
so you'll have something like this in your action:
return $this->asJson([
"data"=> $preparedEventsArray
"collections" => [
"subprojects"=> $preparedSubprojects
]
]);
where $preparedEventsArray is an array of event objects as shown in docs, and $subprojects - your value/label objects
Note that names of properties in the data collection - "id","start_date","end_date","text" - are mandatory, you'll have to map your data model to this structure,
e.g.
start -> start_date
end -> end_date
activity -> text
all other properties can have their names unchanged.
The official docs don't have a sample code for Yii2, unfortunately.
There are common docs for server formats
https://docs.dhtmlx.com/scheduler/server_integration.html
And tutorials for PHP Slim framework and Laravel, which is not exactly what you need, but the closest thing the current documentation has.
I have some code which polls until a task is complete
See below
this.simulationStatus =
interval(2000).pipe(
switchMap(
() => from(this.simulationService.getSimulationStatus(this.route.snapshot.paramMap.get('jobId')))),
takeUntil(this.stopPoll),
tap(simulation => {
if (simulation && simulation.complete) {
if (this.stopCount == 1) {
// Get once after complete
this.stopPoll.next(true);
}
this.stopCount++;
}
})
);
I have tried using takeUntil and takeWhile the problem is that that the last value is never published once the task is complete.
To get around this I have to include the tap method to with the stopPoll subject and incrementing the stopCount to get the last value.
So the above works but just feels a bit messy, I'm sure there must be a better way of achieving this?
I would have expected takeUntil to publish the last value or have an override to tell it to e.g takeUntil(observable, {publishLast: true})
BTW Update, the observable is subscribed to by an Angular 6 template
Thanks in advance
One thing you can do is use a custom takeWhile-like operator like this:
const completeWith = <T>(predicate: (arg: T) => boolean) => (
source: Observable<T>,
) =>
new Observable<T>(observer =>
source.subscribe(
value => {
observer.next(value);
if (predicate(value)) {
observer.complete();
}
},
error => observer.error(error),
() => observer.complete(),
),
);
It doesn't seem like a good idea to see it as a variation of takeWhite because it's not just taking values while a condition holds, but also emits an extra value.
It might be that a more elegant solution would be make the simulation status observable emit two kinds of values: next notifications and completion notifications, similarly to how materialize/dematerialize operators work.
This has in the meantime been implemented in rxjs as takeWhile(condition, ?inclusive):
timer(0, 10).pipe(
takeWhile((x) => x < 3, true)
)
emits 0, 1, 2, 3
You can also create subject and emit using next() if you want to complete the observable.
this.stopPoll: Subject<any> = new Subject<any>();
If you want to do complete the subscription. you can call this.stopPoll.next(true);
you can access the data in subscribe()
this.simulationStatus.subscribe(success=>{}, failure=>{}, complete=>{});
Situation
In a project I have this code to select data from a table. Please note, it is working, I only don't get the result I expect.
serviceSurveyQuestions.find({
query: {
survey_id: this.survey_id,
user_id: this.$store.state.auth.user.id, //TODO move this to the hook!!
//todo make satus also not equal new
$or: [
{ status_id: process.env.mfp.statusSurveyQuestionStarted },
{ status_id: process.env.mfp.statusSurveyQuestionPlanned }
],
$sort: {
survey_question_question: 1
},
$limit: 150,
$select: [
'survey_question_question',
'survey_question_at',
'survey_question_answer',
'survey_question_details',
'survey_question_source_id',
'survey_question_source_answer_id',
'survey_question_source_user_id',
'survey_question_step',
'survey_question_dep_step',
'id'
]
}
}).then(page => {
this.listSurveyQuestions = page;
});
When I see what would be in one item of listSurveyQuestion I will see this:
{
"survey_question_question": "PEN 10 Scope vaststellen",
"survey_question_at": "2017-06-23T06:46:10.038Z",
"survey_question_answer": "",
"survey_question_details": "tester done",
"survey_question_source_id": 83499707,
"survey_question_source_answer_id": 74864,
"survey_question_source_user_id": 83488216,
"survey_question_step": 10,
"survey_question_dep_step": null,
"id": 4651,
"source_user": {
"user_id": 1005
},
"status": {
"status": "Planned"
},
"language": {
"language": "Dutch"
,
"source": {
"source": "MexonInControl - Pob - Dev (local)"
},
"survey_question": [{
"answer_type_id": 1014,
"answer_en": null,
"answer_nl": null,
"answer_explanation_en": null,
"answer_explanation_nl": null,
"survey_question_next_id": 4652
} ]
}
I know the result is comming from the configuration in my get and find hook of the service being called.
Expected Result
What I expect to happen is that the data returned is only the columns defined in the $SELECT. If I leave this as is, it will work but I'm getting to much data from the database which can be seen later as a security breach. Not with this example, but with other tables it will.
** Question **
So what do I need to change to have this functioning as expected. You could adapt the return of the service, but then I can't use the same service in other situations for the columns aren't available. Or can you pass an option to the service which will result in if (parameter = view 1) then return view 1 and so on.
** Solving **
Remark 1:
So I just see the 'cause' is a bit different. The configured hooks returns more columns from the question table which are not shown. So my guess here is that if you don't configure the includes in the find query, it will pass all includes. I need to check that and if this is the case, see if there is a option to not select the 'includes' as well.
Assuming that the hook you are referring to is setting hook.params.sequelize similar to this answer you will have to check if you included properties are also set in the $select query with something like this:
// GET /my-service?include=1
function (hook) {
const include = [];
const select = hook.params.query.$select;
// Go through all properties that are added via includes
['includeProp1', 'includeProp2'].forEach(propertyName => {
// If no $select or the include property is part of the $select
if(!select || select.indexOf(propertyName) !== -1) {
include.push({ model: ModelForIncludeProp1 });
}
});
hook.params.sequelize = { include };
return Promise.resolve(hook);
}