search-form.component.coffee

import { Component, Inject, EventEmitter } from '@angular/core'
import { FormsModule, FormBuilder } from '@angular/forms'

export class FormInputComponent
    @annotations = [
        new Component
            selector: 'form-input'
            inputs: [ 'placeholder', 'value', 'name']
            outputs: [ 'valueChange' ]
            template: """
<div>
    {{ name }} -> {{ value }}
    <input [placeholder]="placeholder" [formControlName]="name" >
</div>
"""
    ]
    constructor: ->
        @valueChange = new EventEmitter()

        Object.defineProperty @, 'value',
            set: (val) ->
                console.log val
                @_value = val
                @valueChange.emit @_value
            get: ->
                @_value

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ReactiveFormsModule } from '@angular/forms'

export class ParInputFormModule
    @annotations = [
        new NgModule
            imports: [
                BrowserModule
                ReactiveFormsModule
                FormsModule
            ]
            declarations: [
                FormInputComponent
            ]
            exports: [
                FormInputComponent
            ]
    ]


export class EventSearchFormComponent
    @annotations = [
        new Component
            selector: 'event-search-form'
            template: """
    <form [formGroup]="eventsFilterForm">
          <form-input name="unit" ></form-input>
        outer {{ blah }}
      <div class="button-bar">
        <div class="button button-assertive" (click)="createForm()">Reset All</div>
        <div class="button button-balanced" (click)="search()">Search</div>
      </div>
    </form>
    """
    ]
    @parameters = [
        [ FormBuilder ]
        [ new Inject 'Server' ]
        [ new Inject 'Server' ]
        [ new Inject 'Events' ]
        [ new Inject '$state' ]
    ]

    constructor: (@fb, @Server, @Events, @$state) ->
        @createForm()
        window.y = @

    createForm: =>
        @formDefaults =
            unit: 'ud'
            incident_type: ''
            address: ''
            incident_id: ''
            start_time: null
            end_time: null
        @eventsFilterForm = @fb.group @formDefaults

    search: =>
        filters = {}
        # copy
        @Server.searchEvents @eventsFilterForm.value
        .then ->
            @Events.searchFiltered = true
            @$state.go 'base.map.eventlist'