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

<div (click)="$event.stopPropagation()">
  <div
    [style.width]="deviceType === 'mobile' ? '85vw' : '30rem'"
    (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">
    <ng-container *ngIf="!(isLoading || searchFormControl.value)">
      <div class="date-range-selector-container 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>
      <div class="p-3">
        <div class="mb-3">
          <mat-form-field appearance="outline" class="w-100 without-hint">
            <mat-label i18n>Accounts</mat-label>
            <mat-select formControlName="account">
              <mat-option [value]="null" />
              @for (account of accounts; track account.id) {
                <mat-option [value]="account.id">
                  <div class="d-flex">
                    <gf-symbol-icon
                      *ngIf="account.Platform?.url"
                      class="mr-1"
                      [tooltip]="account.Platform?.name"
                      [url]="account.Platform?.url"
                    /><span>{{ account.name }}</span>
                  </div>
                </mat-option>
              }
            </mat-select>
          </mat-form-field>
        </div>
        <div class="mb-3">
          <mat-form-field appearance="outline" class="w-100 without-hint">
            <mat-label i18n>Tags</mat-label>
            <mat-select formControlName="tag">
              <mat-option [value]="null" />
              @for (tag of tags; track tag.id) {
                <mat-option [value]="tag.id">{{ tag.label }}</mat-option>
              }
            </mat-select>
          </mat-form-field>
        </div>
        <div class="mb-3">
          <mat-form-field appearance="outline" class="w-100 without-hint">
            <mat-label i18n>Asset Classes</mat-label>
            <mat-select formControlName="assetClass">
              <mat-option [value]="null" />
              @for (assetClass of assetClasses; track assetClass.id) {
                <mat-option [value]="assetClass.id">{{
                  assetClass.label
                }}</mat-option>
              }
            </mat-select>
          </mat-form-field>
        </div>
        <div class="d-flex w-100">
          <button
            i18n
            mat-button
            [disabled]="!hasFilter(filterForm.value)"
            (click)="onResetFilters()"
          >
            Reset Filters
          </button>
          <span class="gf-spacer"></span>
          <button
            color="primary"
            i18n
            mat-flat-button
            [disabled]="!filterForm.dirty"
            (click)="onApplyFilters()"
          >
            Apply Filters
          </button>
        </div>
      </div>
    </ng-container>
  </form>
</div>