AlertOptions weird behaviour


#1

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


#2

It’s telling you literally exactly what the problem is.

Alert input options are defined as follows:

export interface AlertInputOptions {
  type?: string;
  name?: string | number;
  placeholder?: string;
  value?: string;
  label?: string;
  checked?: boolean;
  disabled?: boolean;
  id?: string;
  handler?: Function;
  min?: string | number;
  max?: string | number;
}

So label has to be a string and value has to be a string.

You’ve declared jobTypes as an array of arrays: private jobTypes = [[]];

So when you try to set label to this.jobTypes[1] and value to this.jobTypes[1], you are trying to set label and value to untyped ARRAYS. It’s explicitly telling you about value in this case, telling you that that property value must be a string, it cannot be an array of anything. Again I’m just repeating what the error message is telling you.


#3

I get that part and thank you, yet what I still don’t understand is how is this still working for me… i mean, the first time it throws the error, but doing the little hack i mentioned it runs smooth!