I have a 3 AlertOptions inside one of the pages of my project. Two of them carries radio buttons and one has checkboxes.
The code for the entire page goes as follows:
import { Component } from '@angular/core';
import { AlertController, NavController, NavParams } from 'ionic-angular';
import { FormBuilder, FormGroup} from "@angular/forms";
import { JobsProvider } from "../../providers/jobs/jobs";
import { RestProvider } from "../../providers/rest/rest";
import { JobUserProvider } from "../../providers/job-user/job-user";
import {DateHelper} from "../../helper/date-helper";
@Component({
selector: 'page-add-a-job',
templateUrl: 'add-a-job.html',
})
export class AddAJobPage {
addAJobForm: FormGroup;
//form inputs
customer_name: string;
customer_po: string;
job_description: string;
//FOR THE JOB TYPES
private jobTypes = [[]];
private jobTypeSelected = '';
//FOR THE FOCUSED PEOPLE
private employees = [[]];
private employeesSelected = [];
private employeesNamesSelected = [];
//FOR THE PRIORITY LEVELS
private priorityLevels = [[]];
private priorityLevelSelected = '';
constructor(
private jobUserProvider: JobUserProvider,
private restProvider: RestProvider,
private jobsProvider: JobsProvider,
public alertController: AlertController,
public formBuilder: FormBuilder,
public navCtrl: NavController,
public navParams: NavParams) {
}
/*
Getting all the info necessary from the client
*/
ionViewDidLoad() {
//get the job types available
this.jobsProvider.getJobTypes()
.subscribe((types: any) =>{
//store them in a multidimensional array for easy access to both id and name
for(let type of types){
this.jobTypes[type.id] = type.name;
}
});
//get the priority levels available
this.jobsProvider.getPriorityLevels()
.subscribe((levels: any) =>{
//store them in a multidimensional array for easy access to both id and name
for(let level of levels){
this.priorityLevels[level.id] = level.name;
}
});
//get the users available
this.restProvider.getUsers()
.subscribe((employees: any)=>{
//store them in a multidimensional array for easy access to both id and name
for (let employee of employees){
this.employees[employee.id] = employee;
console.log('Employees retrieved:', employees)
}
})
}
//close the modal
closeModal(){
this.navCtrl.pop();
}
/*
Pop up window for type of job.
*/
presentTypeOfJob(){
let prompts = this.alertController.create({
title: 'Type of Job',
message: 'What type of job is this?',
inputs: [
{
type: 'radio',
label: this.jobTypes[1],
value: this.jobTypes[1]
},
{
type: 'radio',
label: this.jobTypes[2],
value: this.jobTypes[2]
}
],
buttons: [
{
text: "Cancel"
},
{
text: "Confirm",
handler: data =>{
//value goes to a variable for easy submission
this.jobTypeSelected = data
}
}
]
});
prompts.present();
}
/*
Pop up window for focused people on the job
*/
presentFocusForJob(){
let prompt = this.alertController.create();
prompt.setTitle("Focused Employees")
prompt.setMessage("Which employees would you like to focus for this job?")
for(let i=1; i < this.employees.length; i++){
prompt.addInput({
type: 'checkbox',
label: this.employees[i].name,
value: this.employees[i]
});
}
prompt.addButton('Cancel');
prompt.addButton({
text: 'Confirm',
handler: employees =>{
console.log('Checkbox Data:', employees);
this.employeesSelected = employees;
for(let employee of this.employeesSelected){
this.employeesNamesSelected.push(employee.name);
}
}
});
prompt.present();
}
/*
Pop up window for priority levels
*/
presentPriorityLevels(){
let prompt = this.alertController.create({
title: 'Priority Level',
message: 'What Level of priority does this job has?',
inputs: [
{
type: 'radio',
label: this.priorityLevels[1],
value: this.priorityLevels[1],
},
{
type: 'radio',
label: this.priorityLevels[2],
value: this.priorityLevels[2]
},
{
type: 'radio',
label: this.priorityLevels[3],
value: this.priorityLevels[3]
}
],
buttons: [
{
text: "Cancel"
},
{
text: "Confirm",
handler: data =>{
//value goes to a variable for easy submission
this.priorityLevelSelected = data
}
}
]
});
prompt.present();
}
/*
Adds a job to the db.
missing input for:
- quote
*/
addJob(){
let job = {
po_number: this.customer_po,
customer: this.customer_name,
description: this.job_description,
quote: 20,
job_type_id: this.jobTypes.indexOf(this.jobTypeSelected),
priority_level_id: this.priorityLevels.indexOf(this.priorityLevelSelected),
created_at: DateHelper.formatDate(new Date())
};
this.jobsProvider
.addJob(job)
.subscribe(data => {
//if no employees have been selected for focus, do NOT send information to the api
if(!this.employeesSelected.length || this.employeesSelected.length === 0){
this.closeModal();
}else {
//once the job is added, use the same job to add the focused employees selected
for (let i = 0; i < this.employeesSelected.length; i++) {
this.jobUserProvider.addJobUser(data.id, this.employeesSelected[i].id)
.subscribe(data => {
console.log(data);
})
//once the last one has been added, close the modal
if (i == this.employeesSelected.length - 1) {
this.closeModal();
}
}
}
//clear the selected employees
this.employeesSelected = [];
});
}
}
I am using phpStorm as IDE and inside my three methods presentTypeOfJob(), presentFocusForJob, and presentPriorityLevels I get errors that say:
Argument of type ‘{ title: string; message: string; inputs: { type: string; label: any; value: any; }; button…’ is not assignable to parameter of type ‘AlertOptions’. Types of property ‘inputs’ are incompatible. Type ‘{ type: string; label: any; value: any; }’ is not assignable to type ‘AlertInputOptions’. Type ‘{ type: string; label: any; value: any; }’ is not assignable to type ‘AlertInputOptions’. Types of property ‘value’ are incompatible. Type ‘any’ is not assignable to type ‘string’.
The code does not run at first build. However, if I really just delete the ‘s’ from ‘inputs’ in alerOptions, save, let it build, added again, and let it build IT WILL WORK.
I am not sure if there is deprecated methods in my code but if anybody knows something about this please let me know