doneit-web/src/app/pages/search/search.page.html

<!-- HEADER-->
<ion-header class="ion-no-border header-main d-flex ion-justify-content-between">
  <ion-progress-bar type="indeterminate" class="loader" *ngIf="showLoader"></ion-progress-bar>
  <ion-form>
    <div class="d-flex search-input-container ion-justify-content-between" >
      <div class="icon" (click)="basicSearch()">
        <ion-icon class="icon-z" slot="end" name="search"></ion-icon>
      </div>
      <div class="input-text d-flex ion-align-items-center">
        <ion-input [(ngModel)]='searchSubject' class="search-input" type="search" placeholder="Pesquisar"></ion-input>
      </div>
      <div class="icon" (click)="clearSearchInput()">
        <ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
      </div>
    </div>
  </ion-form>
  <!--  search -->
  <div *ngIf="!showAdvanceSearch" class="icon-z icon-most-searched-word-open" (click)="showHideAdvanceSearch(true)">
    <ion-icon src="assets/images/icons-most-searched-words-open.svg" class="icon" slot="end"></ion-icon>
  </div>
  <div *ngIf="showAdvanceSearch" class="icon-z icon-most-searched-word-open" (click)="showHideAdvanceSearch(false)" >
    <ion-icon src="assets/images/advance-search-show-modal.svg"  class="icon" slot="end"></ion-icon>
  </div>

  <div class="profile">
    <ion-icon class="icon" src="assets/images/icons-profile.svg"></ion-icon>
  </div>
</ion-header>

<ion-content class="main-content">

    <!-- Search drop down -->
    <div class="advance-search" *ngIf="showAdvanceSearch">
      <!--  -->
      <li class="d-flex date-container ion-justify-content-between">
        <div class="icon-mer icon">
          <ion-icon name="restaurant-outline" src="assets/images/icons-advance-search-document.svg"></ion-icon>
        </div>
        <div class="input-container d-flex ion-align-items-center">
          <ion-datetime [(ngModel)]='searchDocumentDate' display-timezone="utc"></ion-datetime>
          <div class="icon" (click)="clearInputDocumentDate()">
            <ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
          </div>
        </div>
      </li>
      <!-- Sender -->
      <li class="d-flex date-container ion-justify-content-between">
        <div class="icon-mer icon">
          <ion-icon name="restaurant-outline" src="assets/images/icons-advance-search-sender.svg"></ion-icon>
        </div>
        <div class="input-container d-flex ion-align-items-center">
          <ion-input [(ngModel)]='searchSender' class="search-input" (click)="openAdvanceSearchSelection()" type="search" placeholder="Remetentes"></ion-input>
          <div class="icon" (click)="clearInputRemetente()" >
            <ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
          </div>
        </div>
      </li>
      <!-- Organic entity -->
      <li class="d-flex date-container ion-justify-content-between">
        <div class="icon-mer icon">
          <ion-icon name="restaurant-outline" src="assets/images/icons-arrow-arrow-down-25-copy.svg"></ion-icon>
        </div>
        <div class="input-container d-flex ion-align-items-center">
          <ion-input [(ngModel)]='searchOrganicEntiry'  class="search-input" type="search" placeholder="Entidade Orgânica" (click)="openOrganicEntitySelection()"></ion-input>
          <div class="icon" (click)="clearInputOrganicEntity()" >
            <ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
          </div>
        </div>
      </li>
    </div>

    <!-- search result categories-->
    <div class="options" *ngIf="showDocuments">
      <div class="container ion-justify-content-between ion-align-items-center">
        <div class="d-flex ion-justify-content-center ion-text-center">
          <!-- SLIDE -->
          <ion-slides class="slide" pager="false" [options]="slideOpts">
            <ion-slide *ngFor="let category of searchCategories; index as i;">
              <div [ngClass]="{'active-category': category.Active}" class="button" (click)="filterDocList(category.Name)" (click)="activeCategoty(i)" >
                <p>{{ category.Name }}</p>
                <ion-label class="label">{{ category.Qtd }}</ion-label>
              </div>
            </ion-slide>
          </ion-slides>
        </div>

        <button class="icon-z icon-most-searched-word-open" ion-button icon-only >
          <ion-icon src="assets/images/icons-most-searched-words-open.svg" class="icon" slot="end"></ion-icon>
        </button>
      </div>
    </div>

    <div class="d-flex ion-wrap word-searh-result-container">      
      <!-- most searched word-->
      <div class="most-searched-words" *ngIf="!showDocuments">
        <p class="title ion-text-center">Palavras mais pesquisadas</p>
        <div class="most-searched-word-container">
        </div>
      </div>
      
      <!-- search result document-->
      <div class="search-result" *ngIf="showDocuments">
        <div class="header">
          <div class="d-flex ion-justify-content-between ion-align-items-center">
            <div class="d-flex sort-by ion-justify-content-center">
              <p>
                <span class="order">Order por:</span>
                <span *ngIf="ordinance == 'recent'" class="order-labal">Mais Recente</span>
                <span *ngIf="ordinance == 'old'" class="order-labal">Mais Antigo</span>
              </p>
            </div>
            <div>
              <ion-icon *ngIf="ordinance == 'old'" (click)="reorderList('recent')" src="assets/images/icons-arrow-arrow-up.svg"></ion-icon>
              <ion-icon *ngIf="ordinance == 'recent'" (click)="reorderList('old')" src="assets/images/icons-arrow-arrow-down-25.svg"></ion-icon>
            </div>
          </div>
        </div>
        <ul>
          <li *ngFor="let searchDocument of showSearchDocuments" class="d-flex">
            <div class="icon">
              <ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
            </div>
            <div class="content ion-align-items-center">
              <p class="result-name">{{ searchDocument.Assunto}}</p>
              <div class="d-flex ion-justify-content-between ">
                <span class="organic-entity">{{ searchDocument.EntidadeOrganicaNome }}</span>
                <span class="documente-date">{{ formateIsoDate(searchDocument.Data) }}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>

    </div>

</ion-content>