Add organization search

.editorconfig

@@ -13,6 +13,9 @@ end_of_line              = lf
 [*.js]
 indent_size              = 4
 
+[*.tag]
+indent_size              = 4
+
 [*.md]
 trim_trailing_whitespace = false
 

.eslintignore

@@ -1,2 +1,3 @@
+/node_modules
 **/*/node_modules
 priv/static/js

client/javascripts/app.js

@@ -1,3 +1,6 @@
-const { addMap } = require('./leaflet')
+import { addMap } from './leaflet'
+import riot from 'riot'
+import './components/**/*'
 
+riot.mount('*')
 addMap('map', '/data/home.geojson')

client/javascripts/components/organization/organization-search.tag

@@ -0,0 +1,38 @@
+<organization-search>
+    <form role="search">
+        <input type="search" value={ keyword }  onkeyup={ update_query } placeholder="recherche">
+    </form>
+
+    <section class="organizations">
+        <organization each={ organizations.slice(0, 10) } name={ name } description={ description }/>
+    </section>
+
+    <script type="es6">
+        this.organizations = []
+        this.keyword       = ''
+        this.searching     = false
+
+        this.fetch_orgs = () => {
+            if (this.searching) { return }
+
+            this.searching  = true
+            this.oldKeyword = this.keyword
+
+            fetch(`${process.env.DATAGOUVFR_SITE}/api/1/organizations/?q=${this.oldKeyword}`)
+                .then(response => { return response.json() })
+                .then(data => {
+                    this.update({ organizations: data.data })
+                    this.searching = false
+
+                    if (this.oldKeyword !== this.keyword) {
+                        this.fetch_orgs()
+                    }
+                })
+        }
+
+        this.update_query = function(event) {
+            this.keyword = event.target.value
+            this.fetch_orgs()
+        }
+    </script>
+</organization-search>

client/javascripts/components/organization/organization.tag

@@ -0,0 +1,6 @@
+<organization>
+<section>
+    <h1> { opts.name } </h1>
+    <p>  { opts.description } </p>
+</section>
+</organization>

client/package.json

@@ -10,26 +10,28 @@
     "errors": "webpack --display-error-details"
   },
   "devDependencies": {
-    "babel-core": "^7.0.0-beta.0",
+    "babel-core": "^7.0.0-beta.1",
     "babel-loader": "^7.0.0",
-    "babel-preset-es2017": "^7.0.0-beta.0",
+    "babel-preset-es2015": "^7.0.0-beta.1",
+    "babel-preset-es2015-riot": "^1.1.0",
     "bourbon": "^5.0.0-beta.8",
     "bourbon-neat": "^2.1.0",
     "css-loader": "^0.28.4",
+    "exports-loader": "^0.6.4",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.0.0",
-    "img-loader": "^2.0.0",
+    "font-awesome": "^4.7.0",
+    "imports-loader": "^0.7.1",
     "import-glob-loader": "^1.1.0",
     "leaflet": "^1.2.0",
     "node-sass": "^4.5.3",
     "normalize.css": "^7.0.0",
     "purecss": "^1.0.0",
+    "riot": "^3.7.0",
+    "riot-tag-loader": "^1.0.0",
     "sass-loader": "^6.0.5",
     "typeplate-starter-kit": "^3.0.2",
-    "url-loader": "v0.5.9",
-    "webpack": "^3.5.6"
-  },
-  "dependencies": {
-    "font-awesome": "^4.7.0"
+    "webpack": "^3.5.6",
+    "whatwg-fetch": "2.0.3"
   }
 }

client/stylesheets/app.scss

@@ -24,6 +24,7 @@ $fa-font-path: '~font-awesome/fonts';
 @import 'components/buttons';
 @import 'components/logo';
 @import 'components/navigation';
+@import 'components/organization';
 
 // Contexts: special layout/component mashups, i.e. login, etc...
 @import 'contexts/login';

client/stylesheets/components/_organization.scss

@@ -0,0 +1,35 @@
+organization-search {
+  $width: 500px;
+  $lightblue: #e6e6fa;
+  $grey: #eee;
+
+  input {
+    background: $grey;
+    border: 0 none;
+    border-radius: 10px;
+    padding: 10px;
+    width: $width;
+  }
+
+  section.organizations {
+    padding-top: 2em;
+    margin-left: 1em;
+    organization {
+      section {
+        border-bottom: 1px solid $lightblue;
+
+        h1 {
+          font-size: 1em;
+          text-align: left;
+          margin-bottom: 0.2em;
+          margin-top: 1.5em;
+        }
+
+        p {
+          margin: 0;
+          margin-left: 0.5em;
+        }
+      }
+    }
+  }
+}

client/webpack.config.js

@@ -1,6 +1,9 @@
 const { resolve }       = require('path')
+const webpack           = require('webpack')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const extractSass       = new ExtractTextPlugin({ filename: '../css/app.css', allChunks: true })
+const fetchPolyfill     = new webpack.ProvidePlugin({ fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch' })
+const processEnv        = new webpack.DefinePlugin({ 'process.env': { 'DATAGOUVFR_SITE': JSON.stringify(process.env.DATAGOUVFR_SITE) } })
 
 module.exports = {
     entry: [
@@ -20,19 +23,44 @@ module.exports = {
             './images/marker-icon.png$': resolve('./node_modules/leaflet/dist/images/marker-icon.png'),
             './images/marker-icon-2x.png$': resolve('./node_modules/leaflet/dist/images/marker-icon-2x.png'),
             './images/marker-shadow.png$': resolve('./node_modules/leaflet/dist/images/marker-shadow.png')
-        },
-        extensions: ['.js', '.scss']
+        }
     },
-    plugins: [extractSass],
+    plugins: [
+        extractSass,
+        fetchPolyfill,
+        processEnv
+    ],
     devtool: 'source-map',
     module: {
         rules: [{
+            test: /\.(js|scss)$/,
+            exclude: [/node_modules/],
+            enforce: 'pre',
+            loader: 'import-glob-loader'
+        }, {
+            test: /\.tag$/,
+            exclude: /node_modules/,
+            enforce: 'pre',
+            loader: 'riot-tag-loader',
+            query: {
+                type: 'es6'
+            }
+        }, {
+            test: /\.tag$/,
+            exclude: [/node_modules/],
+            use: {
+                loader: 'babel-loader',
+                options: {
+                    presets: ['es2015-riot']
+                }
+            }
+        }, {
             test: /\.js$/,
             exclude: [/node_modules/],
             use: {
                 loader: 'babel-loader',
                 options: {
-                    presets: ['es2017']
+                    presets: ['es2015']
                 }
             }
         }, {
@@ -51,11 +79,6 @@ module.exports = {
                     }
                 }]
             })
-        }, {
-            test: /\.(js|scss)$/,
-            exclude: [/node_modules/],
-            enforce: 'pre',
-            loader: 'import-glob-loader'
         }, {
             test: /\.(jpe?g|png|gif|svg)$/,
             exclude: [/font-awesome/],