next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html

<mat-card class="confirm-card mat-elevation-z">
  <mat-card-header>
    <mat-card-title
      cdkDrag
      cdkDragRootElement=".cdk-overlay-pane"
      cdkDragHandle
      class="card-header"
      >{{ 'search.label' | translate }}</mat-card-title
    >
    <button class="icon-button btn-dialog-close" (click)="onCancel()">
      <i class="mdi mdi-window-close"></i>
    </button>
  </mat-card-header>
  <mat-card-content>
    <div fxLayout="column" fxFlex="1 1 auto" class="rightDrawer-notice">
      <div class="search-area">
        <ucap-integrated-search-form
          [searchWord]="!!currentSearchWord ? currentSearchWord : ''"
          (search)="onSearch($event)"
        >
        </ucap-integrated-search-form>
        <div class="organization-option">
          <mat-form-field>
            <mat-label>{{ 'search.fieldCompany' | translate }}</mat-label>
            <mat-select
              #filterCompany
              [formControl]="fcCompany"
              multiple
              (openedChange)="onOpenedChange($event)"
            >
              <mat-select-trigger>
                {{ fcCompany.value ? fcCompany.value[0] : '' }}
                <span
                  *ngIf="fcCompany.value?.length > 1"
                  class="example-additional-selection"
                >
                  (+{{
                    'search.andOthers'
                      | translate: { count: fcCompany.value.length - 1 }
                  }})
                </span>
              </mat-select-trigger>
              <mat-option
                *ngFor="let option of filterCompanyOption"
                [value]="option"
                >{{ option }}</mat-option
              >
            </mat-select>
          </mat-form-field>
          <mat-form-field>
            <mat-label>{{ 'search.fieldGrade' | translate }}</mat-label>
            <mat-select
              #filterGrade
              [formControl]="fcGrade"
              multiple
              (openedChange)="onOpenedChange($event)"
            >
              <mat-select-trigger>
                {{ fcGrade.value ? fcGrade.value[0] : '' }}
                <span
                  *ngIf="fcGrade.value?.length > 1"
                  class="example-additional-selection"
                >
                  (+{{
                    'search.andOthers'
                      | translate: { count: fcGrade.value.length - 1 }
                  }})
                </span>
              </mat-select-trigger>
              <mat-option
                *ngFor="let option of filterGradeOption"
                [value]="option"
                >{{ option }}</mat-option
              >
            </mat-select>
          </mat-form-field>
          <mat-form-field>
            <mat-label>{{ 'search.fieldWorkPlace' | translate }}</mat-label>
            <mat-select
              #filterWorkPlace
              [formControl]="fcWorkPlace"
              multiple
              (openedChange)="onOpenedChange($event)"
            >
              <mat-select-trigger>
                {{ fcWorkPlace.value ? fcWorkPlace.value[0] : '' }}
                <span
                  *ngIf="fcWorkPlace.value?.length > 1"
                  class="example-additional-selection"
                >
                  (+{{
                    'search.andOthers'
                      | translate: { count: fcWorkPlace.value.length - 1 }
                  }})
                </span>
              </mat-select-trigger>
              <mat-option
                *ngFor="let option of filterWorkPlaceOption"
                [value]="option"
                >{{ option }}</mat-option
              >
            </mat-select>
          </mat-form-field>
          <mat-form-field>
            <mat-label>{{ 'presence.label' | translate }}</mat-label>
            <mat-select
              #filterPresence
              [formControl]="fcPresence"
              multiple
              (openedChange)="onOpenedChange($event)"
            >
              <mat-select-trigger>
                {{ setFilterOptionSelectedTextPresence() }}
                <span
                  *ngIf="fcPresence.value?.length > 1"
                  class="example-additional-selection"
                >
                  (+{{
                    'search.andOthers'
                      | translate: { count: fcPresence.value.length - 1 }
                  }})
                </span>
              </mat-select-trigger>
              <mat-option [value]="StatusCode.OnLine">{{
                'presence.online' | translate
              }}</mat-option>
              <mat-option [value]="StatusCode.Away">{{
                'presence.away' | translate
              }}</mat-option>
              <mat-option [value]="StatusCode.Busy">{{
                'presence.statusMessage1' | translate
              }}</mat-option>
              <mat-option [value]="StatusCode.Offline">{{
                'presence.offline' | translate
              }}</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
      </div>
      <div style="position: relative;">
        <div
          *ngIf="searchingProcessing$ | async"
          style="position: absolute; width: 100%; z-index: 101;"
        >
          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
        </div>
      </div>
      <div class="contents-table">
        <div fxFlex="0 0 auto" class="table-box">
          <ucap-organization-detail-table
            [loginRes]="loginRes"
            [presence$]="presenceSubject.asObservable()"
            [departmentUserInfoList]="departmentUserInfoList"
            [profileImageRoot]="profileImageRoot"
            [selectedUserList]="selectedUserList"
            (openProfile)="onClickOpenProfile($event)"
            (toggleAllUser)="onToggleAllUser($event)"
            (toggleUser)="onToggleUser($event)"
            (sendCall)="onClickCall($event)"
            class="integrate-search-org detail-table"
          ></ucap-organization-detail-table>
        </div>
        <div class="footer-fix search-result-footer">
          <mat-accordion>
            <mat-expansion-panel>
              <mat-expansion-panel-header>
                <mat-panel-title>
                  {{ 'organization.selectedUser' | translate }}
                  <span *ngIf="selectedUserList.length > 0">
                    ({{ selectedUserList.length }})
                    {{ 'common.units.persons' | translate }}
                  </span>
                </mat-panel-title>
                <mat-panel-description> </mat-panel-description>
              </mat-expansion-panel-header>

              <div class="list-chip">
                <mat-chip-list aria-label="User selection">
                  <mat-chip
                    *ngFor="let userInfo of selectedUserList"
                    (removed)="onClickDeleteUser(userInfo)"
                  >
                    {{ userInfo.name }}
                    <mat-icon matChipRemove>clear</mat-icon>
                  </mat-chip>
                </mat-chip-list>
              </div>
              <div class="btn-box">
                <ul>
                  <li>
                    <button
                      mat-flat-button
                      [disabled]="
                        selectedUserList.length > 0 ? 'false' : 'true'
                      "
                      (click)="onClickAddGroup()"
                      class="mat-primary"
                    >
                      {{ 'organization.addToGroup' | translate }}
                    </button>
                  </li>
                  <li>
                    <button
                      mat-flat-button
                      [disabled]="
                        selectedUserList.length > 0 ? 'false' : 'true'
                      "
                      (click)="onClickChatOpen()"
                      class="mat-primary"
                    >
                      {{ 'organization.startChat' | translate }}
                    </button>
                  </li>
                  <li *ngIf="!!authInfo && authInfo.canVideoConference">
                    <button
                      mat-flat-button
                      [disabled]="
                        selectedUserList.length > 0 ? 'false' : 'true'
                      "
                      (click)="onClickConference()"
                      class="mat-primary"
                    >
                      {{ 'organization.startVideoConference' | translate }}
                    </button>
                  </li>
                  <li>
                    <button
                      mat-flat-button
                      [disabled]="
                        selectedUserList.length > 0 ? 'false' : 'true'
                      "
                      (click)="onClickMessage()"
                      class="mat-primary"
                    >
                      {{ 'organization.startMessage' | translate }}
                    </button>
                  </li>
                </ul>
              </div>
            </mat-expansion-panel>
          </mat-accordion>
        </div>
      </div>
      <div class="footer-fix search-result-footer">
        <ul>
          <li>
            <button mat-flat-button (click)="onCancel()" class="mat-primary">
              {{ 'search.clearAndColse' | translate }}
            </button>
          </li>
          <li>
            <button mat-flat-button (click)="onClickHide()" class="mat-primary">
              {{ 'search.fold' | translate }}
            </button>
          </li>
        </ul>
      </div>
    </div>
  </mat-card-content>
</mat-card>