warehouse13/frontend/src/app/components/query-form/query-form.component.html

<mat-card class="query-card">
  <mat-card-header>
    <mat-card-title>
      <mat-icon>search</mat-icon>
      Query Artifacts
    </mat-card-title>
    <mat-card-subtitle>
      Search and filter your artifact collection
    </mat-card-subtitle>
  </mat-card-header>

  <mat-card-content>
    <form (ngSubmit)="queryArtifacts()" #queryFormRef="ngForm" class="query-form">
      <!-- Basic Search Section -->
      <div class="form-section">
        <h3>Basic Search</h3>
        <div class="form-row">
          <mat-form-field appearance="outline">
            <mat-label>Filename</mat-label>
            <input
              matInput
              name="filename"
              [(ngModel)]="queryForm.filename"
              (input)="onFilterChange()"
              placeholder="Search filename...">
            <mat-icon matSuffix>description</mat-icon>
          </mat-form-field>

          <mat-form-field appearance="outline">
            <mat-label>File Type</mat-label>
            <mat-select
              name="file_type"
              [(ngModel)]="queryForm.file_type"
              (selectionChange)="onFilterChange()">
              <mat-option value="">All Types</mat-option>
              <mat-option *ngFor="let type of fileTypes" [value]="type">
                {{ type.toUpperCase() }}
              </mat-option>
            </mat-select>
            <mat-icon matSuffix>category</mat-icon>
          </mat-form-field>
        </div>
      </div>

      <!-- Test Information Section -->
      <div class="form-section">
        <h3>Test Information</h3>
        <div class="form-row">
          <mat-form-field appearance="outline">
            <mat-label>Test Name</mat-label>
            <input
              matInput
              name="test_name"
              [(ngModel)]="queryForm.test_name"
              (input)="onFilterChange()"
              placeholder="Search test name...">
            <mat-icon matSuffix>quiz</mat-icon>
          </mat-form-field>

          <mat-form-field appearance="outline">
            <mat-label>Test Suite</mat-label>
            <input
              matInput
              name="test_suite"
              [(ngModel)]="queryForm.test_suite"
              (input)="onFilterChange()"
              placeholder="e.g., integration">
            <mat-icon matSuffix>folder</mat-icon>
          </mat-form-field>
        </div>

        <div class="form-row">
          <mat-form-field appearance="outline">
            <mat-label>Test Result</mat-label>
            <mat-select
              name="test_result"
              [(ngModel)]="queryForm.test_result"
              (selectionChange)="onFilterChange()">
              <mat-option value="">All Results</mat-option>
              <mat-option *ngFor="let result of testResults" [value]="result">
                <mat-icon>{{ getResultIcon(result) }}</mat-icon>
                {{ result | titlecase }}
              </mat-option>
            </mat-select>
            <mat-icon matSuffix>assignment_turned_in</mat-icon>
          </mat-form-field>

          <mat-form-field appearance="outline">
            <mat-label>Tags</mat-label>
            <input
              matInput
              name="tags"
              [(ngModel)]="tagsInput"
              (input)="onFilterChange()"
              placeholder="e.g., regression, smoke">
            <mat-icon matSuffix>label</mat-icon>
            <mat-hint>Comma-separated tags</mat-hint>
          </mat-form-field>
        </div>
      </div>

      <!-- Date Range Section -->
      <div class="form-section">
        <h3>Date Range</h3>
        <div class="form-row">
          <mat-form-field appearance="outline">
            <mat-label>Start Date</mat-label>
            <input
              matInput
              [matDatepicker]="startPicker"
              name="start_date"
              [(ngModel)]="queryForm.start_date">
            <mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
            <mat-datepicker #startPicker></mat-datepicker>
          </mat-form-field>

          <mat-form-field appearance="outline">
            <mat-label>End Date</mat-label>
            <input
              matInput
              [matDatepicker]="endPicker"
              name="end_date"
              [(ngModel)]="queryForm.end_date">
            <mat-datepicker-toggle matSuffix [for]="endPicker"></mat-datepicker-toggle>
            <mat-datepicker #endPicker></mat-datepicker>
          </mat-form-field>
        </div>
      </div>

      <!-- Search Progress -->
      <div class="search-progress" *ngIf="searching">
        <mat-spinner diameter="24"></mat-spinner>
        <span>Searching artifacts...</span>
      </div>

      <!-- Form Actions -->
      <div class="form-actions">
        <button
          mat-raised-button
          color="primary"
          type="submit"
          [disabled]="searching"
          class="search-button">
          <mat-icon>{{ searching ? 'hourglass_empty' : 'search' }}</mat-icon>
          {{ searching ? 'Searching...' : 'Search Artifacts' }}
        </button>
        <button
          mat-button
          type="button"
          (click)="clearQuery()"
          [disabled]="searching">
          <mat-icon>clear</mat-icon>
          Clear Filters
        </button>
      </div>
    </form>
  </mat-card-content>
</mat-card>

<!-- Active Filters Display -->
<mat-card class="filters-card" *ngIf="queryForm.filename || queryForm.file_type || queryForm.test_name || queryForm.test_suite || queryForm.test_result || tagsInput">
  <mat-card-header>
    <mat-card-title>
      <mat-icon>filter_list</mat-icon>
      Active Filters
    </mat-card-title>
  </mat-card-header>

  <mat-card-content>
    <mat-chip-set class="filter-chips">
      <mat-chip *ngIf="queryForm.filename" color="primary">
        <mat-icon matChipAvatar>description</mat-icon>
        Filename: {{ queryForm.filename }}
      </mat-chip>
      <mat-chip *ngIf="queryForm.file_type" color="accent">
        <mat-icon matChipAvatar>category</mat-icon>
        Type: {{ queryForm.file_type }}
      </mat-chip>
      <mat-chip *ngIf="queryForm.test_name" color="primary">
        <mat-icon matChipAvatar>quiz</mat-icon>
        Test: {{ queryForm.test_name }}
      </mat-chip>
      <mat-chip *ngIf="queryForm.test_suite" color="accent">
        <mat-icon matChipAvatar>folder</mat-icon>
        Suite: {{ queryForm.test_suite }}
      </mat-chip>
      <mat-chip *ngIf="queryForm.test_result" color="primary">
        <mat-icon matChipAvatar>assignment_turned_in</mat-icon>
        Result: {{ queryForm.test_result }}
      </mat-chip>
      <mat-chip *ngIf="tagsInput" color="accent">
        <mat-icon matChipAvatar>label</mat-icon>
        Tags: {{ tagsInput }}
      </mat-chip>
    </mat-chip-set>
  </mat-card-content>
</mat-card>