harsha-global/harsha-angular

harsha-angular's Issues

Cannot search by ProjectID and teamSize. Only by ProjectName and DateOfStart works. (NodeJS)

Overview:

I'm currently on lecture #42, Git folder 19 and having problem searching by ProjectID and TeamSize when making a request to NodeJS server. Searching by ProjectName and DateOfStart works perfectly fine though.

Problem:

After I make a request in my Angular project by "ProjectID" and "teamSize" I get the following error in NodeJS server console.

TypeError: (project[req.params.searchby] || "").toUpperCase is not a function

Code

Angular Project Service code

export class ProjectsService {

  urlPrefix: string = "http://localhost:9090";

  constructor(private httpClient: HttpClient) { }

  SearchProjects(searchBy: string, searchText: string): Observable<Project[]> {
    return this.httpClient.get<Project[]>(
      this.urlPrefix + '/api/projects/search/' + searchBy + '/' + searchText,
      { responseType: 'json' }
    );
  }
}

Angular Project Component code

export class ProjectsComponent implements OnInit {
 .  
 .
 .
  projects: Project[] = [];
  searchBy: string = 'ProjectName';
  searchText: string = '';

  constructor(private projectsService: ProjectsService) { }
.
.
.
.

  onSearchClick() {
    this.projectsService
      .SearchProjects(this.searchBy, this.searchText)
      .subscribe(
        (response: Project[]) => {
          this.projects = response;
        },
        (error) => {
          console.log(error);
        }
      );
  }

}

HTML

    <div class="col-8 mx-auto">
        <div class="form-group form-row">
            <label for="drpSearchBy" class="col-form-label col-3">Search:</label>
            <div class="col-9">
                <select class="form-control" id="drpSearchBy" name="SearchBy" [(ngModel)]="searchBy">
                    <option value="ProjectID">Project ID</option>
                    <option value="ProjectName">Project Name</option>
                    <option value="DateOfStart">Date of Start</option>
                    <option value="TeamSize">Team Size</option>
                </select>
            </div>
        </div>
        <div class="form-group form-row">
            <label for="textSearchText" class="col-form-label col-3">Search:</label>
            <div class="col-9">
                <div class="input-group">
                    <input type="text" class="form-control" id="txtSearchText" name="SearchText"
                        [(ngModel)]="searchText" />
                    <div class="input-group-append" (click)="onSearchClick()">
                        <span class="input-group-text"><i class="fa fa-search"></i></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

Here is my current codebase https://github.com/ramfattah/TaskManager

thank you