Reactreactivo (#228)

* agrega ejemplo de react para formularios * agrega ejemplo de react para formularios * imprime el estado
pasosdeJesus · Aug 27, 2020 · c17822c · c17822c
1 parent 5e88fa7
commit c17822c
Show file tree

Hide file tree

Showing 12 changed files with 666 additions and 20 deletions.
diff --git a/Gemfile b/Gemfile
@@ -36,6 +36,8 @@ gem 'prawn-table'
 
 gem 'puma' # Servidor de aplicaciones
 
+gem 'react-rails' 
+
 gem 'rails', '~> 6.0.0.rc1' # Rails con internacionalización
 
 gem 'rails-i18n'

diff --git a/app/views/sivel2_gen/casos/agregaubi.html.erb b/app/views/sivel2_gen/casos/agregaubi.html.erb
@@ -0,0 +1,2 @@
+<div id="root"></div>
+<%= javascript_pack_tag 'agregaubi' %>
diff --git a/config/routes.rb b/config/routes.rb
@@ -13,6 +13,7 @@
   get "/casos/busca" => 'casos#busca'
   get '/casos/lista' => 'casos#lista'
   get '/casos/mapaosm' => 'casos#mapaosm'
+  get '/casos/agregaubi' => 'casos#agregaubi'
   get '/casos/importarrelatos' => 'casos#importarrelatos'
   get '/casos/nuevaubicacion' => 'casos#nueva_ubicacion'
   get '/casos/nuevavictima' => 'casos#nueva_victima'

diff --git a/lib/sivel2_gen/concerns/controllers/casos_controller.rb b/lib/sivel2_gen/concerns/controllers/casos_controller.rb
@@ -452,7 +452,10 @@ def mapaosm
             @fechahasta = Sip::FormatoFechaHelper.fin_semestre(Date.today - 182)
             render 'mapaosm', layout: 'application'
           end
-
+
+          def agregaubi
+            render 'agregaubi', layout: 'application'
+          end
 
           def pestanas_formulariocaso
             #byebug

diff --git a/test/dummy/app/javascript/components/UbiFormu.js b/test/dummy/app/javascript/components/UbiFormu.js
@@ -0,0 +1,91 @@
+import React, {useState, Fragment} from 'react'
+import ReactDOM from 'react-dom'
+
+const UbiForm = () => {
+
+  const [datos, setDatos] = useState({
+    nombre: '',
+    apellido: '',
+    pais: '',
+    departamento: ''
+  })
+
+  const handleInputChange = (event) => {
+    setDatos({
+      ...datos,
+      [event.target.name] : event.target.value
+    })
+  }
+
+  const enviarDatos = (event) => {
+    event.preventDefault();
+  }
+
+  return (
+    <Fragment>
+      <h1> Contador de ejemplo </h1>
+      <form onSubmit={enviarDatos}>
+        <div className="row">
+          <div className="col-md-3">
+            <label htmlFor="nombre">Nombre</label>
+            <input 
+              placeholder="Ingrese Nombre" 
+              id="nombre"
+              name="nombre"
+              className="form-control"
+              onChange={handleInputChange}
+            ></input>
+          </div>
+          <div className="col-md-3">
+            <label htmlFor="apellido">Apellido</label>
+            <input 
+              placeholder="Ingrese Apellido" 
+              id="apellido"
+              name="apellido"
+              className="form-control"
+              onChange={handleInputChange}
+            ></input>
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-md-3">
+            <label htmlFor="pais">País</label>
+            <select 
+              className="form-control" 
+              id="pais"
+              name="pais"
+              onChange={handleInputChange}
+              >
+              <option>Colombia</option>
+              <option>Venezuela</option>
+              <option>Perú</option>
+              <option>Ecuador</option>
+              <option>Panamá</option>
+            </select>
+          </div>
+          <div className="col-md-3">
+            <label htmlFor="departamento">Departamento</label>
+            <select 
+              className="form-control" 
+              id="departamento"
+              name="departamento"
+              onChange={handleInputChange}
+              >
+              <option>Valle</option>
+              <option>Cauca</option>
+              <option>Nariño</option>
+            </select>
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-md-3">
+            <button className="btn btn-primary" type="submit">Agregar</button>
+          </div>
+        </div>
+        <p>{JSON.stringify(datos)}</p>
+      </form>
+    </Fragment>
+  )
+}
+
+export default UbiForm
diff --git a/test/dummy/app/javascript/packs/agregaubi.js b/test/dummy/app/javascript/packs/agregaubi.js
@@ -0,0 +1,8 @@
+// Mapa con casos e indicadores, fuentes de Covid19.health
+
+ import React from 'react'
+ import ReactDOM from 'react-dom'
+ import { render } from 'react-dom'
+ import UbiFormu from '../components/UbiFormu'
+
+ render( <UbiFormu />, document.getElementById('root') )
diff --git a/test/dummy/app/javascript/packs/application.js b/test/dummy/app/javascript/packs/application.js
@@ -36,3 +36,4 @@ import 'jquery-ui/ui/focusable'
 
 var L = require('leaflet');
 var mc= require('leaflet.markercluster');
+
diff --git a/test/dummy/app/views/layouts/application.html.erb b/test/dummy/app/views/layouts/application.html.erb
@@ -88,6 +88,8 @@
             mr519_gen.formularios_path,
             desplegable: true %>
         <% end %>
+        <%= opcion_menu "Aregar ubicaciones", 
+          sivel2_gen.casos_agregaubi_path, desplegable: true %>
       <% end %>
       <%= opcion_menu "Salir #{current_usuario.nusuario}", 
         main_app.sign_out_path %>

diff --git a/test/dummy/babel.config.js b/test/dummy/babel.config.js
@@ -18,54 +18,69 @@ module.exports = function(api) {
   return {
     presets: [
       isTestEnv && [
-        require('@babel/preset-env').default,
+        '@babel/preset-env',
         {
           targets: {
             node: 'current'
-          }
-        }
+          },
+          modules: 'commonjs'
+        },
+        '@babel/preset-react'
       ],
       (isProductionEnv || isDevelopmentEnv) && [
-        require('@babel/preset-env').default,
+        '@babel/preset-env',
         {
           forceAllTransforms: true,
           useBuiltIns: 'entry',
           corejs: 3,
           modules: false,
           exclude: ['transform-typeof-symbol']
         }
+      ],
+      [
+        '@babel/preset-react',
+        {
+          development: isDevelopmentEnv || isTestEnv,
+          useBuiltIns: true
+        }
       ]
     ].filter(Boolean),
     plugins: [
-      require('babel-plugin-macros'),
-      require('@babel/plugin-syntax-dynamic-import').default,
-      isTestEnv && require('babel-plugin-dynamic-import-node'),
-      require('@babel/plugin-transform-destructuring').default,
+      'babel-plugin-macros',
+      '@babel/plugin-syntax-dynamic-import',
+      isTestEnv && 'babel-plugin-dynamic-import-node',
+      '@babel/plugin-transform-destructuring',
       [
-        require('@babel/plugin-proposal-class-properties').default,
+        '@babel/plugin-proposal-class-properties',
         {
           loose: true
         }
       ],
       [
-        require('@babel/plugin-proposal-object-rest-spread').default,
+        '@babel/plugin-proposal-object-rest-spread',
         {
           useBuiltIns: true
         }
       ],
       [
-        require('@babel/plugin-transform-runtime').default,
+        '@babel/plugin-transform-runtime',
         {
           helpers: false,
           regenerator: true,
           corejs: false
         }
       ],
       [
-        require('@babel/plugin-transform-regenerator').default,
+        '@babel/plugin-transform-regenerator',
         {
           async: false
         }
+      ],
+      isProductionEnv && [
+        'babel-plugin-transform-react-remove-prop-types',
+        {
+          removeImport: true
+        }
       ]
     ].filter(Boolean)
   }

diff --git a/test/dummy/config/webpacker.yml b/test/dummy/config/webpacker.yml
@@ -34,6 +34,7 @@ default: &default
     - .woff2
 
   extensions:
+    - .jsx
     - .mjs
     - .js
     - .sass

diff --git a/test/dummy/package.json b/test/dummy/package.json
@@ -1,9 +1,12 @@
 {
   "dependencies": {
+    "@babel/preset-react": "^7.10.4",
     "@fortawesome/fontawesome-free": "^5.11.2",
+    "@material-ui/core": "^4.11.0",
     "@rails/ujs": "^6.0.1",
     "@rails/webpacker": "^4.0.2",
-    "bootstrap": "^4.3.1",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "bootstrap": "^4.5.2",
     "bootstrap-datepicker": "^1.9.0",
     "chosen-js": "^1.8.7",
     "expose-loader": "^0.7.5",
@@ -12,7 +15,11 @@
     "jquery-ui": "^1.12.1",
     "leaflet": "^1.6.0",
     "leaflet.markercluster": "^1.4.1",
+    "material-ui": "^0.20.2",
     "popper.js": "^1.16.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "serialize-javascript": "2.1.1",
     "turbolinks": "^5.2.0"
   },