mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-04 15:41:37 +00:00
115 lines
4.5 KiB
HTML
115 lines
4.5 KiB
HTML
<div class="flex flex-col flex-auto min-w-0">
|
|
|
|
<!-- Header -->
|
|
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
|
<div class="flex-1 min-w-0">
|
|
<!-- Breadcrumbs -->
|
|
<div class="flex flex-wrap items-center font-medium">
|
|
<div>
|
|
<a class="whitespace-nowrap text-primary-500">User Interface</a>
|
|
</div>
|
|
</div>
|
|
<!-- Title -->
|
|
<div class="mt-2">
|
|
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
|
Advanced Search
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main -->
|
|
<div class="flex-auto p-6 sm:p-10">
|
|
|
|
<div class="max-w-3xl">
|
|
<div class="max-w-3xl prose prose-sm">
|
|
<p>
|
|
This page demonstrates a query parameters based search using Angular's built-in <code>routerLink</code> directive and its
|
|
<code>queryParams</code> input.
|
|
</p>
|
|
<p>
|
|
Fill the form, hit the <strong>Search</strong> button and then observe the address bar of your browser. If you reload the
|
|
page with the parameters, you will see that the form will be populated automatically. We also added an output window so
|
|
you can observe the query parameters object.
|
|
</p>
|
|
<p>
|
|
This method can be used for implementing <em>Advanced search</em> mechanics as well as <em>Filtering</em> similar to the
|
|
products filtering that you can find in most eCommerce websites.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Advanced search form -->
|
|
<form
|
|
class="flex flex-col items-start w-full max-w-3xl mt-8 p-8 space-y-8 rounded-2xl shadow overflow-hidden bg-card"
|
|
[formGroup]="searchForm">
|
|
|
|
<!-- Keywords -->
|
|
<mat-form-field class="fuse-mat-no-subscript w-full">
|
|
<mat-label>Keywords</mat-label>
|
|
<input
|
|
[autocomplete]="'off'"
|
|
[formControlName]="'keywords'"
|
|
matInput>
|
|
</mat-form-field>
|
|
|
|
<!-- Type -->
|
|
<mat-form-field class="fuse-mat-no-subscript w-full">
|
|
<mat-label>Type</mat-label>
|
|
<mat-select [formControlName]="'type'">
|
|
<mat-option [value]="'any'">Any</mat-option>
|
|
<mat-option [value]="'files'">Files</mat-option>
|
|
<mat-option [value]="'folders'">Folders</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<div class="flex items-center space-x-8">
|
|
<!-- In trash -->
|
|
<mat-checkbox
|
|
[color]="'primary'"
|
|
[formControlName]="'isTrashed'">
|
|
In trash
|
|
</mat-checkbox>
|
|
|
|
<!-- Archived -->
|
|
<mat-checkbox
|
|
[color]="'primary'"
|
|
[formControlName]="'isArchived'">
|
|
Archived
|
|
</mat-checkbox>
|
|
|
|
<!-- Starred -->
|
|
<mat-checkbox
|
|
[color]="'primary'"
|
|
[formControlName]="'isStarred'">
|
|
Starred
|
|
</mat-checkbox>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex items-center justify-end w-full mt-8">
|
|
<button
|
|
(click)="reset()"
|
|
type="button"
|
|
mat-button>Reset
|
|
</button>
|
|
<button
|
|
class="ml-2"
|
|
(click)="search()"
|
|
[color]="'primary'"
|
|
type="button"
|
|
mat-flat-button>Search
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Query params as json -->
|
|
<div class="dark w-full mt-8 p-4 rounded-2xl overflow-hidden">
|
|
<textarea
|
|
fuse-highlight
|
|
[code]="queryParams | json"
|
|
[lang]="'json'"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|