Feature/enhance search

static/css/homepage.less

@@ -1,10 +1,23 @@
 
+// @mobile: "only screen and (max-width: 959px)";
 
+@media only screen and (max-width: 600px) {
+    .county-select-container{
+        margin-top: 10px !important;
+        margin-bottom: 10px !important;
+    }
+
+    .search-bar-container{
+        margin-top: unset !important;
+        margin-bottom: unset !important;
+        flex-grow: unset;
+    }
+
+}
 
 // the main header in the top part of the page
 #homepage-container {
     background: transparent;
-
     padding-bottom: 1em;
     padding-top: 0;
 
@@ -24,19 +37,75 @@
     }
 }
 
-.search-bar-container {
-    text-align: left;
-    margin-top: 30px;
-    margin-bottom: 30px;
+.flex-center-h {
+    display: flex;
+    justify-content: center;
+}
+
+.flex-center-v {
+    display: flex;
+    align-items: center;
+}
+
+.flex-center-hv {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+}
+
+.search-bar-wrapper {
+    display: flex;
+    flex-wrap: wrap;
 
-    #search-bar {
-        width: 100%;
-        background: #eee;
-        padding: 10px 20px;
-        font-size: 20px;
+    .county-select-container{
+        width: 140px;
+        margin-right: 10px;
+        margin-top: 30px;
+        margin-bottom: 30px;
+
+        select {
+            height: 100%;
+        }
+    }
+
+    .search-bar-container {
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: center;
+        text-align: left;
+        margin-top: 30px;
+        margin-bottom: 30px;
+        flex-grow: 1;
+
+        #search-bar {
+
+            width: 100%;
+            background: #eee;
+            padding: 10px 20px;
+            font-size: 20px;
+        }
+
+        .search-button-wrapper{
+            width: auto;
+            margin-left: 10px;
+
+            button {
+                height: 100%;
+            }
+        }
+
+        .easy-autocomplete {
+            width: 100% !important;
+            max-width: 945px !important;
+        }
+
     }
+
 }
 
+
+
 .about-section {
     margin-top: 6em;
 }

static/js/search.js

@@ -5,7 +5,8 @@ $(function () {
      */
     var api = '/api/ngos';
     var searcEl = $("#search-bar");
-    var ngos = [];
+    var allNgos = [];
+    var filteredNgos = [];
     var latinCharMap = {
       'ă': 'a',
       'â': 'a',
@@ -16,15 +17,81 @@ $(function () {
       'ţ': 't'
     };
 
+    const selectElement = $('#search-ong-judet-select')
+    const searchButton = $('#search-button')
+    const resultWrapper = $('#search-result-wrapper')
+    const defaultLogo = 'https://storage.googleapis.com/redirectioneaza/logo_bw.png'
+    const maxDescLength = 125;
+
+    function generateSelectOptions(localNgos){
+
+        function createCountyOption(county, label){
+            selectElement
+            .append(`<option value="${county}">${label}</option>`)
+        }
+
+        var counties = localNgos.reduce(function(acc, ngo) {
+
+            acc['judete'] = acc['judete'] || []
+            acc['sectoare'] = acc['sectoare'] || []
+            // check if it's sector
+            if(!isNaN(ngo.active_region)){
+
+                acc['sectoare'] = acc['sectoare'].includes(ngo.active_region) || ngo.active_region === null ? acc['sectoare'] : [...acc['sectoare'], ngo.active_region]
+
+            }else{
+                if(ngo.active_region === "RO"){
+                    // remove RO.
+                    acc['judete'] = acc['judete']
+                }else{
+                    acc['judete'] = acc['judete'].includes(ngo.active_region) ? acc['judete'] : [...acc['judete'], ngo.active_region]
+                }
+            }
+            return acc
+
+        }, {})
+
+        var judete = counties['judete'];
+        var sectoare = counties['sectoare']
+
+        sectoare = sectoare.sort(function(a, b) {
+            return a - b;
+        })
+
+        judete = judete.sort(function(a, b) {
+
+            if(a < b)
+                return -1
+            if(a > b)
+                return 1
+            return 0;
+
+        })
+
+        createCountyOption("none", "Zona de activitate")
+        createCountyOption("RO", "Toată țara")
+        selectElement.append(`
+            <optgroup label="Bucuresti">
+                ${sectoare.map(function(sector){
+                    return `<option value="${sector}">Sector ${sector}</option>`
+                }).join('')}
+            </optgroup>
+        `)
+        judete.forEach((county) => createCountyOption(county, county))
+        active_regions = [...judete, ...sectoare, "RO", "none"]
+
+    }
+
+
     function latinise(str) {
       return str.replace(/[^\u0000-\u007E]/g, function(c) {
         return latinCharMap[c] || c;
       });
     }
 
-    function setupEasyAutocomplete() {
+    function setupEasyAutocomplete(givenNgos) {
         var options = {
-            data: ngos,
+            data: givenNgos,
             getValue: "name",
             template: {
                 type: "iconLeft",
@@ -53,15 +120,96 @@ $(function () {
         searcEl.easyAutocomplete(options);
     }
 
+    function getShortenDescription(desc){
+        if(desc.length > maxDescLength){
+            var shortenedStr = desc.substr(0, maxDescLength)
+            shortenedStr = shortenedStr.substr(0, Math.min(shortenedStr.length, shortenedStr.lastIndexOf(" ")))
+
+            return `${shortenedStr} ...`
+        }else{
+            return desc
+        }
+    }
+
     $.get(api).done(function (response) {
-        ngos = response;
-        setupEasyAutocomplete()
+        allNgos = response;
+        filteredNgos = allNgos
+        generateSelectOptions(allNgos)
+        setupEasyAutocomplete(filteredNgos)
     })
 
+    selectElement.on("change", function(){
+
+        const value = String(this.value)
+        if(value === "none"){
+            setupEasyAutocomplete(allNgos)
+            filteredNgos = allNgos
+        }else{
+            filteredNgos = allNgos.filter((ngo) => ngo.active_region === value)
+            setupEasyAutocomplete(filteredNgos)
+        }
+
+    })
+
+    function generateNgosOnSearch() {
+        const searchValue = searcEl.val().toLocaleLowerCase()
+        const selectedCounty = selectElement.val()
+        const latinisedSearch = latinise(searchValue)
+
+        if(selectedCounty === 'none' && !searchValue) {
+            window.location.href = "/asociatii"
+            return;
+        }
+
+        const countyAndSearchItem = filteredNgos.filter(function(ngo){
+            const latinisedName = latinise(ngo.name).toLocaleLowerCase();
+            return latinisedName.search(latinisedSearch) > -1;
+        })
+
+        resultWrapper.html('')
+
+        const hasValue = countyAndSearchItem.length > 0
+        resultWrapper.css('border-bottom', "1px solid lightgrey");
+        if(hasValue){
+            countyAndSearchItem.map(function(ngo){
+                resultWrapper.append(`
+                <div class="col-xs-12 col-sm-4 col-md-3">
+                    <div class="ong-panel panel panel-default">
+                        <a href="${ngo.url}">
+                            <div class="ong-logo">
+                                <img src="${ngo.logo ? ngo.logo : defaultLogo}" class="img-responsive center-block" alt="${ngo.name}-logo" />
+                            </div>
+                            <div class="panel-heading">${ngo.name}</div>
+                        </a>
+                    <div class="panel-body">
+                        ${getShortenDescription(ngo.description)}
+                    </div>
+                    </div>
+                </div>
+                `)
+            }).join('')
+        }else{
+            resultWrapper.append(`
+                <p>Nu s-a găsit niciun rezultat.</p>
+            `)
+        }
+    }
+
+    searchButton.on("click", function(){
+        generateNgosOnSearch()
+    })
+
+    $('#search-bar').on("keydown", function (event) {
+        if (event.which === 13) {
+            generateNgosOnSearch()
+        }
+    }); 
     // var doit;
     // window.onresize = function(){
     //   clearTimeout(doit);
     //   doit = setTimeout(setupEasyAutocomplete, 100);
     // };
 
 })
+
+// $('#serch-ong-judet-option').text("Change it")

views/all-ngos.html

@@ -13,8 +13,8 @@
         <h1>Asociatii pentru care poti redirectiona 3.5%</h1>
     </div>
 
-    <div class="row">
-        <div class="col-xs-12 col-md-10 col-md-offset-1 search-bar-container">
+    <div class="search-bar-wrapper" style="margin-bottom: 30px;">
+        <div class="search-bar-container">
             <input id="search-bar" type="text" placeholder="Caută un ONG" />
         </div>
     </div>