ghostfolio/libs/ui/src/lib/assistant/assistant.html

<div
  [style.width]="deviceType === 'mobile' ? '85vw' : '30rem'"
  (click)="$event.stopPropagation();"
  (keydown.tab)="$event.stopPropagation()"
>
  <div class="align-items-center d-flex search-container">
    <ion-icon class="ml-2 mr-0" name="search-outline" />
    <input
      #search
      autocomplete="off"
      autocorrect="off"
      class="border-0 p-2 w-100"
      name="search"
      type="text"
      [formControl]="searchFormControl"
      [placeholder]="placeholder"
    />
    <div
      *ngIf="deviceType !== 'mobile' && !searchFormControl.value"
      class="hot-key-hint mx-1 px-1"
    >
      /
    </div>
    <button
      *ngIf="searchFormControl.value"
      class="h-100 no-min-width px-3 rounded-0"
      mat-button
      (click)="initialize()"
    >
      <ion-icon class="m-0" name="close-circle-outline" />
    </button>
    <button
      *ngIf="!searchFormControl.value"
      class="h-100 no-min-width px-3 rounded-0"
      mat-button
      (click)="onCloseAssistant()"
    >
      <ion-icon class="m-0" name="close-outline" />
    </button>
  </div>
  <div
    *ngIf="isLoading || searchFormControl.value"
    class="overflow-auto py-3 result-container"
  >
    <div>
      <div class="h6 mb-1 px-2" i18n>Holdings</div>
      <gf-assistant-list-item
        *ngFor="let searchResultItem of searchResults?.holdings"
        mode="holding"
        [item]="searchResultItem"
        (clicked)="onCloseAssistant()"
      />
      <ng-container *ngIf="searchResults?.holdings?.length === 0">
        <ngx-skeleton-loader
          *ngIf="isLoading"
          animation="pulse"
          class="mx-2"
          [theme]="{
            height: '1.5rem',
            width: '100%'
          }"
        />
        <div *ngIf="!isLoading" class="px-2 py-1" i18n>No entries...</div>
      </ng-container>
    </div>
    <div *ngIf="hasPermissionToAccessAdminControl" class="mt-3">
      <div class="h6 mb-1 px-2" i18n>Asset Profiles</div>
      <gf-assistant-list-item
        *ngFor="let searchResultItem of searchResults?.assetProfiles"
        mode="assetProfile"
        [item]="searchResultItem"
        (clicked)="onCloseAssistant()"
      />
      <ng-container *ngIf="searchResults?.assetProfiles?.length === 0">
        <ngx-skeleton-loader
          *ngIf="isLoading"
          animation="pulse"
          class="mx-2"
          [theme]="{
            height: '1.5rem',
            width: '100%'
          }"
        />
        <div *ngIf="!isLoading" class="px-2 py-1" i18n>No entries...</div>
      </ng-container>
    </div>
  </div>
</div>
<form [formGroup]="filterForm">
  <div
    *ngIf="!(isLoading || searchFormControl.value) && user?.settings?.isExperimentalFeatures"
    class="filter-container"
  >
    <div class="p-3">
      <mat-form-field appearance="outline" class="w-100 without-hint">
        <mat-label i18n>Date Range</mat-label>
        <mat-select
          [formControl]="dateRangeFormControl"
          (selectionChange)="onChangeDateRange($event.value)"
        >
          @for (range of dateRangeOptions; track range) {
          <mat-option [value]="range.value">{{ range.label }}</mat-option>
          }
        </mat-select>
      </mat-form-field>
    </div>
    <mat-tab-group
      animationDuration="0"
      mat-align-tabs="start"
      [mat-stretch-tabs]="false"
      (click)="$event.stopPropagation();"
    >
      <mat-tab>
        <ng-template mat-tab-label
          ><ion-icon name="albums-outline" /><span
            class="d-none d-sm-block ml-2"
            i18n
            >Accounts</span
          ></ng-template
        >
        <div class="p-3">
          <mat-radio-group color="primary" formControlName="account">
            <mat-radio-button class="d-flex flex-column" i18n [value]="null"
              >No account</mat-radio-button
            >
            @for (account of accounts; track account.id) {
            <mat-radio-button class="d-flex flex-column" [value]="account.id"
              >{{ account.name }}</mat-radio-button
            >
            }
          </mat-radio-group>
        </div>
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label
          ><ion-icon name="pricetag-outline" /><span
            class="d-none d-sm-block ml-2"
            i18n
            >Tags</span
          ></ng-template
        >
        <div class="p-3">
          <mat-radio-group color="primary" formControlName="tag">
            <mat-radio-button class="d-flex flex-column" i18n [value]="null"
              >No tag</mat-radio-button
            >
            @for (tag of tags; track tag.id) {
            <mat-radio-button class="d-flex flex-column" [value]="tag.id"
              >{{ tag.name }}</mat-radio-button
            >
            }
          </mat-radio-group>
        </div>
      </mat-tab>
    </mat-tab-group>
    <div class="p-3">
      <button
        class="w-100"
        color="primary"
        i18n
        mat-flat-button
        [disabled]="!hasFilter(filterForm.value)"
        (click)="onResetFilters()"
      >
        Reset Filters
      </button>
    </div>
  </div>
</form>