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

<!-- HEADER-->
<ion-header class="ion-no-border header-main  d-md-flex flex-md-row-reverse">
  <ion-progress-bar type="indeterminate" class="loader" *ngIf="showLoader"></ion-progress-bar>
  <div class="top-box d-flex ion-justify-content-between">
    <ion-form  [class.d-none]="!showSearchInput">
      <div class="d-flex search-input-container ion-justify-content-between" >
        <div class="icon">
          <button class="btn-no-color" (click)="basicSearch()">
            <ion-icon class="icon-z" slot="end" name="search"></ion-icon>
          </button>
        </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 (click)="clearSearchInput()"  class="d-flex align-center icon">

          <ion-icon class="font-25" 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 align-md-baseline pl-10" (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>

    <div class="btn-modal-dismiss" *ngIf="showSearchInput">
      <button class="btn-no-color" (click)="close()">
        <ion-icon class="icon" src="assets/images/icons-search-close.svg"></ion-icon>
      </button>
    </div>
  </div>

  <!-- Search drop down -->
  <div class="advance-search pa-0 pt-10  flex-md-grow-1" *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'  placeholder="Data" 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 flex-md-grow-1 " *ngIf="showDocuments"
    style="border-bottom: 1px solid #f3f3f3;width: unset"
  >
    <div class="container ">
      <div class="d-flex  overflow-x-auto">
        <!-- SLIDE -->
        <div *ngFor="let category of searchCategories; index as i;" class="d-flex py-10" style="width:0px"  [ngClass]="{'active-category': category.Active}" class="button" (click)="filterDocList(category.Name)" (click)="activeCategoty(i)">

          <span>{{ category.Name }}</span>
          <ion-label class="label">{{ category.Qtd }}</ion-label>

        </div>
    
      </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>

</ion-header>

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

    <div class="height-100">
      <div class="d-flex seach-wrapper height-100 flex-row justify-space-between">

        <div class="d-flex height-100 overflow-y-auto flex-1"  *ngIf="!showDocuments || windowWidth >= 1024"
          style="border-right: 1px solid #ddd7d7;">
  
          <!-- most searched word-->
          <div class="most-searched-words d-md-flex flex-md-column">
            <p class="title ion-text-center">Assuntos mais recebidos</p>
            <div class="most-searched-word-container height-100 overflow-y-auto">
            </div>
          </div>
        </div>
        
        <div class=" height-100 overflow-y-auto flex-1"  *ngIf="showDocuments">      
          <div>
  
            <!-- search result document-->
            <div class="search-result" >
              <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 Recentes</span>
                      <span *ngIf="ordinance == 'old'" class="order-labal">Mais Antigos</span>
                    </p>
                  </div>
                  <div>
                    <div  *ngIf="ordinance == 'old'" (click)="reorderList('recent')">
                      <ion-icon src="assets/images/icons-arrow-arrow-up.svg"></ion-icon>
                    </div>

                    <div *ngIf="ordinance == 'recent'" (click)="reorderList('old')">
                      <ion-icon  src="assets/images/icons-arrow-arrow-down-25.svg"></ion-icon>
                    </div>
                  </div>
                </div>
              </div>
              <ul>
                <li *ngFor="let searchDocument of showSearchDocuments" (click)="viewDetail( searchDocument); selectItem(searchDocument)" class="d-flex">
                  <div class="icon">
                    <ion-icon *ngIf="itemIcons() == 'AccoesPresidenciais & ArquivoDespachoElect' "
                      src="assets/images/icons-search-document.svg"></ion-icon>
                    <ion-icon *ngIf="itemIcons() == 'Agenda' "
                      src="assets/images/icons-default-agenda.svg"></ion-icon> 
                    <ion-icon *ngIf="itemIcons() == 'AccoesPresidenciais' "
                      src="assets/images/icons-viagem.svg"></ion-icon>
                  </div>
                  <div class="content ion-align-items-center">
                    
                    <div class="d-flex ion-justify-content-between ">
                      <span class="result-name">{{ searchDocument.Assunto}}</span>
                      <span class="app-name" *ngIf="itemIcons() == 'AccoesPresidenciais & ArquivoDespachoElect' ">{{ searchDocument.appName}}</span>
                    </div>
                    <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>
          
        </div>
        
      </div>
    </div>

</ion-content>