店家時間調整完成

MonospaceTW · Feb 17, 2018 · 0164a04 · 0164a04
1 parent f90aeef
commit 0164a04
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 26 deletions.
diff --git a/src/components/AuthWrapper/index.js b/src/components/AuthWrapper/index.js
@@ -38,7 +38,7 @@ const AuthWrapper = props => {
         }
       />
       <Switch>
-        <Route exact path="/" component={Store} />
+        <Route exact path="/store" component={Store} />
         <Route path="/create/store" component={CreateStore} />
       </Switch>
       <Sidebar openSidebar={() => false} isOpen={false} />

diff --git a/src/components/CreateStore/index.js b/src/components/CreateStore/index.js
@@ -1,6 +1,6 @@
 import React from "react";
+import moment from "moment";
 import propTypes from "prop-types";
-import TextField from "material-ui/TextField";
 import RaisedButton from "material-ui/RaisedButton";
 import styled from "styled-components";
 import TimePicker from "material-ui/TimePicker";
@@ -11,12 +11,29 @@ import ImageHandler from "./ImageHandler";
 import { Map } from "immutable";
 import { Grid, Row, Col } from "react-flexbox-grid";
 import { isEmpty } from "lodash";
+import { grey500, red500 } from "material-ui/styles/colors";
 
 const TelBlockContainer = styled.span`
   width: 80px;
   margin-right: 20px;
 `;
-const OrderInCountTextField = styled(TextField)``;
+
+const Input = styled.input`
+  width: ${props => props.width || "200px"};
+  height: 22px;
+  font-size: 0.9em;
+  line-height: 1.2em;
+  border: 0px solid white;
+  border-bottom: 1px solid ${grey500};
+  &::placeholder {
+    color: ${props => props.error ? red500 : grey500};
+  }
+  &:focus{
+    &::placeholder {
+      color: ${grey500}
+    }
+  }
+`;
 
 const OrderInSelectField = styled(SelectField)`
   width: 50px;
@@ -106,15 +123,18 @@ class CreateStore extends React.Component {
     if (error === true) {
       return this.setState({ errors });
     } else {
-      this.props.handleCreateStore({
-        data
-      });
+      data.time.start = moment(data.time.start).format("hh:ss");
+      data.time.end = moment(data.time.end).format("hh:ss");
+      console.log(data.time);
+      // this.props.handleCreateStore({
+      //   data
+      // });
     }
   };
 
   render() {
-    const { data, errors, imageLoading } = this.state;
-    const { store } = this.props;
+    const { data, imageLoading } = this.state;
+    const { store, history } = this.props;
 
     return (
       <Grid style={{ width: "60%", marginTop: 20 }}>
@@ -128,10 +148,9 @@ class CreateStore extends React.Component {
             />
           </div>
           <div>
-            <TextField
+            <Input
               name="name"
-              hintText="請輸入店名"
-              errorText={errors.account}
+              placeholder="請輸入店名"
               value={data.name}
               onChange={e => {
                 const newData = {
@@ -143,10 +162,9 @@ class CreateStore extends React.Component {
             />
           </div>
           <div>
-            <TextField
+            <Input
               name="address"
-              hintText="請輸入地址"
-              errorText={errors.password}
+              placeholder="請輸入地址"
               value={data.address}
               onChange={e => {
                 const newData = {
@@ -159,7 +177,7 @@ class CreateStore extends React.Component {
           </div>
           <div>
             <TelBlockContainer>
-              <TextField
+              <Input
                 name="telblock"
                 onChange={e => {
                   const { data } = this.state;
@@ -172,13 +190,13 @@ class CreateStore extends React.Component {
                   };
                   this.setState({ data: newData });
                 }}
-                hintText="請輸入區碼"
-                style={{ width: 80 }}
+                placeholder="請輸入區碼"
+                width="80px"
                 value={data.tel.block}
               />
             </TelBlockContainer>
             <span>
-              <TextField
+              <Input
                 name="telnum"
                 value={data.tel.num}
                 onChange={e => {
@@ -192,8 +210,7 @@ class CreateStore extends React.Component {
                   };
                   this.setState({ data: newData });
                 }}
-                errorText={errors.telNum}
-                hintText="請輸入號碼或手機"
+                placeholder="請輸入電話"
                 value={data.tel.num}
               />
             </span>
@@ -245,9 +262,9 @@ class CreateStore extends React.Component {
               外送條件:
             </Col>
             <Col xs={3} md={3}>
-              <OrderInCountTextField
+              <Input
                 name="orderincount"
-                style={{ width: 80 }}
+                width="80px"
                 type="number"
                 value={data.orderIn.count}
                 onChange={e => {
@@ -291,6 +308,12 @@ class CreateStore extends React.Component {
               style={{ margin: 12 }}
               onClick={() => this.submit(data)}
             />
+            <RaisedButton
+              label="取消"
+              primary={true}
+              style={{ margin: 12 }}
+              onClick={() => history.push("/store")}
+            />
           </div>
         </div>
       </Grid>

diff --git a/src/components/Store/ListTable.js b/src/components/Store/ListTable.js
@@ -6,7 +6,7 @@ import Avatar from "material-ui/Avatar";
 import Paper from "material-ui/Paper";
 import Divider from "material-ui/Divider";
 import { red900 } from "material-ui/styles/colors";
-import { List } from "material-ui/List";
+import { List, ListItem } from "material-ui/List";
 import { Col } from "react-flexbox-grid";
 
 class ListTable extends React.Component {
@@ -17,6 +17,7 @@ class ListTable extends React.Component {
 
   render() {
     return this.props.storeList.map((store, index) => {
+      console.log(store);
       return (
         <Col key={store.StoreKey} xs={12} md={3}>
           <Paper
@@ -29,6 +30,9 @@ class ListTable extends React.Component {
             <List>
               <Avatar src={store.logo.url} size={120} style={{ margin: 10 }} />
               <Divider />
+              <ListItem style={{margin: 0}} primaryText="營業時間" secondaryText={`${store.time.start} ~ ${store.time.end}`}/>
+              <ListItem primaryText="電話" secondaryText={`${store.tel.block} -${store.tel.num}`}/>
+              <Divider />
               <RaisedButton
                 label="編輯菜單"
                 onClick={() =>
@@ -37,6 +41,7 @@ class ListTable extends React.Component {
                 style={{ margin: 5 }}
                 icon={<FontIcon className="fa fa-gear" />}
               />
+
               <RaisedButton
                 style={{ margin: 5 }}
                 label="刪除"

diff --git a/src/components/Store/index.js b/src/components/Store/index.js
@@ -1,4 +1,5 @@
 import { Grid, Row } from "react-flexbox-grid";
+import {Map} from "immutable";
 import React from "react";
 import propTypes from "prop-types";
 import FontIcon from "material-ui/FontIcon";
@@ -9,7 +10,7 @@ import _ from "lodash";
 
 class StoreList extends React.Component {
   static propTypes = {
-    router: propTypes.object.isRequired
+    store: propTypes.instanceOf(Map).isRequired
   };
   constructor(props) {
     super(props);

diff --git a/src/components/__tests__/CreateStore.test.js b/src/components/__tests__/CreateStore.test.js
@@ -4,7 +4,7 @@ import CreateStore from "../CreateStore";
 import initialState from "../../reducers/initialState";
 import getMuiTheme from "material-ui/styles/getMuiTheme";
 import { spy } from "sinon";
-import { shallow, mount } from "enzyme";
+import { mount } from "enzyme";
 import { cyan500 } from "material-ui/styles/colors";
 
 const { describe, it, expect } = global;

diff --git a/src/containers/Store.js b/src/containers/Store.js
@@ -2,7 +2,9 @@ import {connect} from "react-redux";
 import Store from "../components/Store";
 import { withRouter } from "react-router-dom";
 
-const mapStateToProps = state => ({});
+const mapStateToProps = ({store}) => ({
+  store
+});
 
 const mapDispatchToProps = dispatch => {
   return {};