Improve search page

src/app/pages/search/organic-entity/organic-entity-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { OrganicEntityPage } from './organic-entity.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: OrganicEntityPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class OrganicEntityPageRoutingModule {}

src/app/pages/search/organic-entity/organic-entity.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { OrganicEntityPageRoutingModule } from './organic-entity-routing.module';
+
+import { OrganicEntityPage } from './organic-entity.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    OrganicEntityPageRoutingModule
+  ],
+  declarations: [OrganicEntityPage]
+})
+export class OrganicEntityPageModule {}

src/app/pages/search/organic-entity/organic-entity.page.html

@@ -0,0 +1,23 @@
+<ion-header class="main-header">
+
+  <div class="icon" (click)="close()">
+    <ion-icon name="chevron-back" slot="start"></ion-icon>
+  </div>
+
+  <ion-toolbar>
+    <ion-title>Remetentes</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="main-container">
+    <div class="input-text d-flex ion-align-items-center">
+      <ion-input [(ngModel)]='findEntity' class="search-input" type="search" placeholder="Pesquisar" (ngModelChange)="filterContact($event)" ></ion-input>
+    </div>
+    <ul>
+      <li *ngFor="let organicEntity of showOrganicEntities" (click)="selectOrganicEntidy(organicEntity.Description)">
+        {{ organicEntity.Description }}
+      </li>
+    </ul>
+  </div>
+</ion-content>

src/app/pages/search/organic-entity/organic-entity.page.scss

@@ -0,0 +1,39 @@
+.main-header{
+  display: flex;
+  align-items: center;
+}
+.icon{
+  color: #797979;
+  width: 45px;
+  height: 45px;
+  display: flex;
+  justify-content: center;
+  font-size: 25px;
+  align-items: center;
+}
+
+.main-container{
+    padding: 0px 20px;
+    .input-text {
+      margin-top: 20px;
+      width: 100%;
+      height: 45px;
+      border-radius: 5px;
+      border: 1px solid #ebebeb;
+    }
+    ul{
+      padding: 0px;
+      margin: 0px;
+      padding-top: 10px;
+      li{    
+        padding-top: 5px;
+        padding-bottom: 10px;
+        margin: 0px;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #ebebeb;
+        list-style:  none;
+        font-family: Roboto;
+        font-size: 15px;
+      }
+    }
+  }

src/app/pages/search/organic-entity/organic-entity.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { OrganicEntityPage } from './organic-entity.page';
+
+describe('OrganicEntityPage', () => {
+  let component: OrganicEntityPage;
+  let fixture: ComponentFixture<OrganicEntityPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OrganicEntityPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(OrganicEntityPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/search/organic-entity/organic-entity.page.ts

@@ -0,0 +1,58 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { from } from 'rxjs';
+import { OrganicEntityService } from 'src/app/services/organic-entity.service';
+import { OrganicEntity } from 'src/app/models/organic-entity.model';
+
+@Component({
+  selector: 'app-organic-entity',
+  templateUrl: './organic-entity.page.html',
+  styleUrls: ['./organic-entity.page.scss'],
+})
+export class OrganicEntityPage implements OnInit {
+
+  organicEntities: OrganicEntity[];
+  showOrganicEntities: OrganicEntity[];
+  findEntity: string;
+
+  
+  constructor(private modalController:ModalController,
+    private OrganicEntityService: OrganicEntityService) {
+
+    }
+
+  ngOnInit() {
+    this.getOrganicEntity();
+  }
+
+
+  getOrganicEntity(){
+    this.OrganicEntityService.getOrganicEntity().subscribe(res=>{
+      console.log(res)
+      this.organicEntities = res;
+    });
+  }
+
+  filterContact(){
+
+    const findEntity = this.findEntity.toLowerCase();
+    
+    const entities = this.organicEntities.filter((Entity) => {
+
+      if (Entity.Description.toLowerCase().indexOf(findEntity) == 0){
+       return true;
+      }
+
+    });
+
+    this.showOrganicEntities = entities;
+  }
+
+  selectOrganicEntidy(selectedOraganicEntit: string){
+    this.close(selectedOraganicEntit)
+  }
+
+  close(username: string){
+    this.modalController.dismiss(username);
+  }
+}