noydb/oworms-ui

View on GitHub
src/app/component/filter/modal/filter-modal.component.html

Summary

Maintainability
Test Coverage
<div id="overlay" [class.show]="show">
    <h2>Advanced Filter</h2>

    <form [formGroup]="form">
        <div>
            <fieldset>
                <input formControlName="word" name="word" placeholder="word"/>
            </fieldset>

            <fieldset>
                <ow-select titleLabel="parts of speech"
                           (valueChange)="selectPartOfSpeech($event)"
                           [multiSelect]="true"
                           [values]="selectedPos"
                           [options]="posOptions"
                           [transparent]="true"/>
            </fieldset>

            <fieldset>
                <textarea [required]="true"
                          formControlName="definition"
                          name="definition"
                          placeholder="definition"></textarea>
            </fieldset>

            <fieldset>
                <textarea formControlName="origin" name="origin" placeholder="origin"></textarea>
            </fieldset>
        </div>

        <div>
            <fieldset>
                <input formControlName="example"
                       name="example"
                       placeholder="example"/>
            </fieldset>
            <fieldset>
                <ow-select titleLabel="tags"
                           (valueChange)="selectTags($event)"
                           [multiSelect]="true"
                           [values]="selectedTags"
                           [options]="tagOptions$ | async"
                           [transparent]="true"/>
            </fieldset>
            <fieldset>
                <input formControlName="note" name="note" placeholder="note"/>
            </fieldset>
        </div>
    </form>

    <section id="actions">
        <button (click)="filter()" [disabled]="noValues">
            Filter
        </button>
        <button (click)="cancel()" class="below transparent">
            Cancel
        </button>
    </section>
</div>