Added "placeholder" option to entity-form text field. (#87)

data/Generator/templates/react-app/src/entities/_entity/components/CreateForm.js

@@ -61,7 +61,7 @@ export default class {= formName =} extends React.Component {
 
   render() {
     return (
-      <div style={ { margin: '20px' } }>
+      <div className={this.props.className}>
         <form noValidate onSubmit={this.handleSubmit} action="javascript:void(0);">
 
           {=# formFields =}
@@ -88,9 +88,16 @@ export default class {= formName =} extends React.Component {
           <div>
             <TextField
               label="{= name =}"
+              {=# placeholder =}
+              placeholder="{= placeholder =}"
+              {=/ placeholder =}
               value={this.getField('{= name =}')}
               onChange={event => this.setField('{= name =}', event.target.value)}
               margin="normal"
+              fullWidth
+              InputLabelProps={{
+                shrink: true
+              }}
             />
           </div>
           {=/ show =}

data/Generator/templates/react-app/src/entities/_entity/components/List.js

@@ -64,7 +64,7 @@ export class {= listName =} extends React.Component {
       this.props.{= entityLowerName =}List
 
     return (
-      <div style={ { margin: '20px' } }>
+      <div className={this.props.className}>
         <Paper>
           <Table>
             <TableHead>

examples/todoApp/src/Todo.jsx

@@ -57,12 +57,14 @@ export default class Todo extends React.Component {
             or add font-awesome to the index.html.  */}
         </button>
 
-        <NewTaskForm
-          onCreate={task => this.props.addTask(task)}
-          submitButtonLabel={'Create new task'}
-        />
 
-        <div className="taskListContainer">
+        <div className="contentContainer">
+          <NewTaskForm
+            className="newTaskForm"
+            onCreate={task => this.props.addTask(task)}
+            submitButtonLabel={'Create new task'}
+          />
+
           <TaskList
             editable
             filter={TASK_FILTERS[this.state.taskFilterName]}

examples/todoApp/todoApp.wasp

@@ -28,8 +28,12 @@ page Main {
             align-items: center;
         }
 
-        .taskListContainer {
-            width: 60%;
+        .contentContainer {
+            width: 30%;
+        }
+
+        .newTaskForm {
+            width: 100%;
         }
 
         .selected {
@@ -53,7 +57,8 @@ page Main {
 entity-form<Task> NewTaskForm {
     fields: {
         description: {
-            show: true
+            show: true,
+            placeholder: "What needs to be done?"
         },
         isDone: {
             show: false,

src/Generator/Entity/EntityForm.hs

@@ -45,6 +45,7 @@ data FormFieldTemplateData = FormFieldTemplateData
     , _fieldType :: !Wasp.EntityFieldType
     , _fieldShow :: !Bool
     , _fieldDefaultValue :: !WEF.DefaultValue
+    , _fieldPlaceholder :: Maybe String
     } deriving (Show)
 
 instance ToJSON FormFieldTemplateData where
@@ -56,6 +57,7 @@ instance ToJSON FormFieldTemplateData where
             , "defaultValue" .= case (_fieldDefaultValue f) of
                 (WEF.DefaultValueString s) -> s
                 (WEF.DefaultValueBool b) -> Util.toLowerFirst $ show b
+            , "placeholder" .= _fieldPlaceholder f
             ]
     
 -- | Given entity and an entity form for it, creates a single data structure
@@ -86,6 +88,7 @@ createFormFieldTD entityForm entityField = FormFieldTemplateData
                             defaultValueIfNothingInForm
                             id 
                             $ formFieldConfig >>= WEF._fieldDefaultValue
+    , _fieldPlaceholder = formFieldConfig >>= WEF._fieldPlaceholder
     }
     where
         -- Configuration of a form field within entity-form, if there is any.

src/Parser/Entity/EntityForm.hs

@@ -122,11 +122,13 @@ createFieldConfig (fieldName, options) = WEF.Field
     { WEF._fieldName = fieldName
     , WEF._fieldShow = maybeGetFieldOptionShow options
     , WEF._fieldDefaultValue = maybeGetFieldOptionDefaultValue options
+    , WEF._fieldPlaceholder = maybeGetFieldOptionPlaceholder options
     }
     
 data FieldOption
     = FieldOptionShow Bool
     | FieldOptionDefaultValue WEF.DefaultValue
+    | FieldOptionPlaceholder String
     deriving (Show, Eq)
 
 -- | Parses a single field option, e.g. "show" or "defaultValue".
@@ -134,6 +136,7 @@ fieldOption :: Parser FieldOption
 fieldOption = choice
     [ FieldOptionShow <$> P.waspPropertyBool "show"
     , FieldOptionDefaultValue <$> defaultValue
+    , FieldOptionPlaceholder <$> P.waspPropertyStringLiteral "placeholder"
     ]
 
 defaultValue :: Parser WEF.DefaultValue
@@ -147,3 +150,6 @@ maybeGetFieldOptionShow options = U.headSafe [b | FieldOptionShow b <- options]
 
 maybeGetFieldOptionDefaultValue :: [FieldOption] -> Maybe WEF.DefaultValue
 maybeGetFieldOptionDefaultValue options  = U.headSafe [dv | FieldOptionDefaultValue dv <- options]
+
+maybeGetFieldOptionPlaceholder :: [FieldOption] -> Maybe String
+maybeGetFieldOptionPlaceholder options = U.headSafe [s | FieldOptionPlaceholder s <- options]

src/Wasp/EntityForm.hs

@@ -65,6 +65,7 @@ data Field = Field
     { _fieldName :: !String
     , _fieldShow :: Maybe Bool
     , _fieldDefaultValue :: Maybe DefaultValue
+    , _fieldPlaceholder :: Maybe String
     } deriving (Show, Eq)
 
 data DefaultValue

test/Parser/ParserTest.hs

@@ -78,11 +78,13 @@ spec_parseWasp =
                                 { EF._fieldName = "description"
                                 , EF._fieldShow = Just True
                                 , EF._fieldDefaultValue = Just $ EF.DefaultValueString "doable task"
+                                , EF._fieldPlaceholder = Just "What will you do?"
                                 }
                             , EF.Field
                                 { EF._fieldName = "isDone"
                                 , EF._fieldShow = Just False
                                 , EF._fieldDefaultValue = Just $ EF.DefaultValueBool False
+                                , EF._fieldPlaceholder = Nothing
                                 }
                             ]
                         }

test/Parser/valid.wasp

@@ -53,7 +53,8 @@ entity-form<Task> CreateTaskForm {
     fields: {
         description: {
             show: true,
-            defaultValue: "doable task"
+            defaultValue: "doable task",
+            placeholder: "What will you do?"
         },
         isDone: {
             show: false,