Change UserCreate style and add required validation

Related to issue #9 Signed-off-by: Luiz Guilherme Silva <[email protected]> Signed-off-by: Marcelo Oliveira <[email protected]>
TechVet-2017 · Apr 23, 2017 · cdbd99d · cdbd99d
1 parent 0c06286
commit cdbd99d
Showing 1 changed file with 45 additions and 11 deletions.
diff --git a/src/Categories/Users.js b/src/Categories/Users.js
@@ -10,6 +10,13 @@ const UserFilter = props => (
   </Filter>
 );
 
+const TextInputValidation = (value) => {
+  if (!value) {
+    return ['Campo obrigatório'];
+  }
+  return [];
+};
+
 export const UserList = props => (
   <List {...props} filters={<UserFilter />} title={'Lista de Usuários'}>
     <Responsive
@@ -35,26 +42,53 @@ export const UserList = props => (
 
 const UserName = ({ record }) => {
   return <span>Usuário {record ? `"${record.userName}"` : ''}</span>;
+export const UserCreate = props => (
+  <Create {...props}>
+    <SimpleForm>
+      <TextInput
+        source="userFullName"
+        label="Nome Completo"
+        validation="{TextInputValidation}"
+      />
+      <TextInput
+        source="userName"
+        label="Nome de Usuário"
+        validation="{TextInputValidation}"
+      />
+      <TextInput
+        type="password"
+        source="userPassword"
+        label="Senha"
+        validation="{TextInputValidation}"
+      />
+    </SimpleForm>
+  </Create>
+);
+
+const UserName = ({ user }) => {
+  return <span>Usuário {user ? `"${user.userName}"` : ''}</span>;
 };
 
 export const UserEdit = props => (
   <Edit title={<UserName />} {...props}>
     <SimpleForm>
-      <TextInput source="userFullName" label="Nome Completo" />
-      <TextInput source="userName" label="Nome de Usuário" />
-      <TextInput type="password" source="userPassword" label="Senha" />
+      <TextInput
+        source="userFullName"
+        label="Nome Completo"
+      />
+      <TextInput
+        source="userName"
+        label="Nome de Usuário"
+      />
+      <TextInput
+        type="password"
+        source="userPassword"
+        label="Senha"
+      />
     </SimpleForm>
   </Edit>
 );
 
-export const UserCreate = props => (
-  <Create {...props}>
-    <SimpleForm>
-      <TextInput source="userFullName" label="Nome Completo" />
-      <TextInput source="userName" label="Nome de Usuário" />
-      <TextInput type="password" source="userPassword" label="Senha" />
-    </SimpleForm>
-  </Create>
 export const UserShow = props => (
   <Show title={<UserName />} {...props}>
     <SimpleShowLayout>