Skip to content
This repository has been archived by the owner on Feb 20, 2019. It is now read-only.

Commit

Permalink
[ui][fix] improve user flow
Browse files Browse the repository at this point in the history
  • Loading branch information
@maexrakete
maexrakete committed Nov 19, 2018
1 parent 0f3f0ad commit 4e3b71d
Show file tree
Hide file tree
Showing 5 changed files with 100 additions and 67 deletions.
2 changes: 1 addition & 1 deletion ui/actions/demo-actions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const DemoActionCreators = {
getRentIndexError: new ActionCreator<'GET_RENTINDEX_ERROR', AxiosError>('GET_RENTINDEX_ERROR'),

getRentCalculateStart: new ActionCreator<'GET_RENTCALCULATE_START', undefined>('GET_RENTCALCULATE_START'),
getRentCalculateDone: new ActionCreator<'GET_RENTCALCULATE_DONE', RentResult>('GET_RENTCALCULATE_DONE'),
getRentCalculateDone: new ActionCreator<'GET_RENTCALCULATE_DONE', RentResult[]>('GET_RENTCALCULATE_DONE'),
getRentCalculateError: new ActionCreator<'GET_RENTCALCULATE_ERROR', AxiosError>('GET_RENTCALCULATE_ERROR'),
};

Expand Down
158 changes: 96 additions & 62 deletions ui/components/rent-index-query.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import * as React from "react";
import { Form, Col, FormGroup, Label, Input, Row, Button, Card, CardBody, CardTitle, ListGroupItem, ListGroup, Alert } from "reactstrap";
import { Form, Col, FormGroup, Label, Input, Row, Button, Card, CardBody, CardTitle, ListGroupItem, ListGroup, Alert, Table } from "reactstrap";
import { State } from "../reducers/state";
import { BoundActions, actionBinder } from "../actions/bindable";
import { connect } from "react-redux";
import { RentIndexListItem, QuestionCatalog, Question, QuestionCatalogRequest, Address } from "../models/rentindex";
import { RentIndexListItem, QuestionCatalog, Question, QuestionCatalogRequest, Address, RentResult } from "../models/rentindex";
import { bind } from "decko";
import { isBoolean, isString } from "util";

Expand Down Expand Up @@ -46,6 +46,11 @@ export class RentIndexImpl extends React.Component<RentIndexProps, RentIndexStat
}
}


componentWillMount() {
this.props.getRentIndexList()
}

@bind
changeCity(event: React.ChangeEvent<HTMLInputElement>) {
const city = this.props.rentIndexList.filter(i => i.name === event.target.value);
Expand Down Expand Up @@ -155,7 +160,7 @@ export class RentIndexImpl extends React.Component<RentIndexProps, RentIndexStat
@bind
updateAddress(field: keyof Address): (event: React.ChangeEvent<HTMLInputElement>) => void {
return (event: React.ChangeEvent<HTMLInputElement>) => {
const o = {
this.setState({
rentIndexRequest: {
...this.state.rentIndexRequest,
...{
Expand All @@ -165,8 +170,7 @@ export class RentIndexImpl extends React.Component<RentIndexProps, RentIndexStat
},
},
},
}
this.setState(o)
})
}
}

Expand All @@ -176,6 +180,35 @@ export class RentIndexImpl extends React.Component<RentIndexProps, RentIndexStat
this.state.city && this.props.calculateRentIndex(this.state.city.name, this.state.selectedYear as number, this.state.rentIndexRequest)
}

renderResult(results: RentResult[] | null) {
const result = results && results[0];
if (!result || result.rentIndex == undefined) return null;

return (
<Row>
<Col xs="12">
<h3>Result</h3>
<Table>
<thead>
<tr>
<th>Min</th>
<th>Avg</th>
<th>Max</th>
</tr>
</thead>
<tbody>
<tr>
<td>{result.rentIndex.min}</td>
<td>{result.rentIndex.avg}</td>
<td>{result.rentIndex.max}</td>
</tr>
</tbody>
</Table>
</Col>
</Row>
)
}

render() {
if (this.props.loading) <h1>Loading</h1>
return (
Expand Down Expand Up @@ -219,64 +252,65 @@ export class RentIndexImpl extends React.Component<RentIndexProps, RentIndexStat
</Col>
</Row>
<br />
<Row>
<Col xs="4">
<FormGroup>
<Label>Zip Code</Label>
<Input type="number" name="zip" required={true} value={this.state.rentIndexRequest.address.postalCode} id="zip" onChange={this.updateAddress("postalCode")} />
</FormGroup>
</Col>
<Col xs="8">
<FormGroup>
<Label>City</Label>
<Input name="city" id="city" required={true} value={this.state.rentIndexRequest.address.locality} onChange={this.updateAddress("locality")} />
</FormGroup>
</Col>
<Col xs="8">
<FormGroup>
<Label>Street</Label>
<Input name="street" id="street" required={true} value={this.state.rentIndexRequest.address.route} onChange={this.updateAddress("route")} />
</FormGroup>
</Col>
<Col xs="4">
<FormGroup>
<Label>Number</Label>
<Input name="streetnumber" id="streetnumber" required={true} value={this.state.rentIndexRequest.address.streetNumber} onChange={this.updateAddress("streetNumber")} />
</FormGroup>
</Col>
<Col xs="12">
<FormGroup>
<Label>Country</Label>
<Input type="select" name="country" id="country" required={true} value={this.state.rentIndexRequest.address.country} onChange={this.updateAddress("country")}>
<option value="DE">Germany</option>
</Input>
</FormGroup>
</Col>
<Col xs="12">
<FormGroup>
<Label>Area</Label>
<Input name="area" id="area" type="number" required={true} value={this.state.rentIndexRequest.areas[0] | 0} onChange={this.updateArea} />
</FormGroup>
</Col>
</Row>
<br />
<Row>
<Col xs="12"><h3>Question Catalog</h3></Col>
{
this.props.rentIndex && this.props.rentIndex.questionCatalogs.map(this.renderQuestionCatalog)
|| <Col xs="12"><Alert color="warning">Select city and year first.</Alert></Col>
}
<Col xs="12">
<Button type="submit" onClick={this.submit}>Submit</Button>
</Col>
</Row>
{this.state.city && this.state.selectedYear && this.props.rentIndex && <div>
<Row>
<Col xs="4">
<FormGroup>
<Label>Zip Code</Label>
<Input type="number" name="zip" required={true} value={this.state.rentIndexRequest.address.postalCode} id="zip" onChange={this.updateAddress("postalCode")} />
</FormGroup>
</Col>
<Col xs="8">
<FormGroup>
<Label>City</Label>
<Input name="city" id="city" required={true} value={this.state.rentIndexRequest.address.locality} onChange={this.updateAddress("locality")} />
</FormGroup>
</Col>
<Col xs="8">
<FormGroup>
<Label>Street</Label>
<Input name="street" id="street" required={true} value={this.state.rentIndexRequest.address.route} onChange={this.updateAddress("route")} />
</FormGroup>
</Col>
<Col xs="4">
<FormGroup>
<Label>Number</Label>
<Input name="streetnumber" id="streetnumber" required={true} value={this.state.rentIndexRequest.address.streetNumber} onChange={this.updateAddress("streetNumber")} />
</FormGroup>
</Col>
<Col xs="12">
<FormGroup>
<Label>Country</Label>
<Input type="select" name="country" id="country" required={true} value={this.state.rentIndexRequest.address.country} onChange={this.updateAddress("country")}>
<option value="DE">Germany</option>
</Input>
</FormGroup>
</Col>
<Col xs="12">
<FormGroup>
<Label>Area</Label>
<Input name="area" id="area" type="number" required={true} value={this.state.rentIndexRequest.areas[0] | 0} onChange={this.updateArea} />
</FormGroup>
</Col>
</Row>
<br />
<Row>
<Col xs="12"><h3>Question Catalog</h3></Col>
{
this.props.rentIndex && this.props.rentIndex.questionCatalogs.map(this.renderQuestionCatalog)
|| <Col xs="12"><Alert color="warning">Select city and year first.</Alert></Col>
}
<br />
<Col xs="12">
{this.renderResult(this.props.result)}
</Col>
<Col xs="12">
<Button type="submit" onClick={this.submit}>Submit</Button>
</Col>
</Row>
</div>
}
<br />
{this.props.result && <Row>
<Col xs="12">
<h3>Result</h3>
<Alert>{JSON.stringify(this.props.result)}</Alert>
</Col>
</Row>}
</Form>
)
}
Expand Down
2 changes: 1 addition & 1 deletion ui/models/rentindex.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export interface QuestionCatalogRequest {
}

export interface RentResult {
rentIndex: {
rentIndex?: {
min: number
max: number
avg: number
Expand Down
2 changes: 1 addition & 1 deletion ui/reducers/state.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export interface DemoState {
export interface RentIndexState {
rentIndexList: RentIndexList
rentIndex: RentIndex | null
result: RentResult | null
result: RentResult[] | null
loading: boolean
error: AxiosError | null
}
Expand Down
3 changes: 1 addition & 2 deletions ui/router.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { State } from "./reducers/state";
import { Router, Routes } from "./helper/routing";
import { NavigationPage, NavigationActionCreators } from "./actions/navigation";
import { checkToken, registerToken, openXLStoreApp, getRentIndexList } from "./actions/demo";
import { checkToken, registerToken, openXLStoreApp } from "./actions/demo";
import { Promise } from "es6-promise";
import * as cookie from "cookie";

Expand Down Expand Up @@ -60,7 +60,6 @@ const routes: Routes<State> = {
"/demo/rentindex": {
name: NavigationPage.RentIndex,
action: (dispatch) => {
getRentIndexList(dispatch)();
dispatch(NavigationActionCreators.navigateTo.create({ name: NavigationPage.RentIndex, params: {} }))
return Promise.resolve(undefined)
},
Expand Down

0 comments on commit 4e3b71d

Please sign in to comment.