Add twig global variables for algolia configuration and implement sea…

…rching functionality through one classification
librecores · Jul 10, 2018 · a57e1b8 · a57e1b8
1 parent b7175f7
commit a57e1b8
Show file tree

Hide file tree

Showing 11 changed files with 76 additions and 55 deletions.
diff --git a/ansible/roles/web/templates/parameters.yml.j2 b/ansible/roles/web/templates/parameters.yml.j2
@@ -49,3 +49,4 @@ parameters:
     # Algolia Configuration
     env(ALGOLIA_APP_ID):  '{{ site_algolia_app_id }}'
     env(ALGOLIA_API_KEY): '{{ site_algolia_api_key }}'
+    ALGOLIA_SEARCH_KEY: '{{ site_algolia_search_key }}'
diff --git a/ansible/secrets.dist/dev-vagrant.secrets.yml b/ansible/secrets.dist/dev-vagrant.secrets.yml
@@ -18,3 +18,4 @@ site_smtp_password: 'INSERT_SMTP_PASSWORD_HERE'
 # Algolia
 site_algolia_app_id: 'INSERT_ALGOLIA_APP_ID_HERE'
 site_algolia_api_key: 'INSERT_ALGOLIA_API_KEY_HERE'
+site_algolia_search_key: 'INSERT_ALGOLIA_SEARCH_KEY_HERE'
diff --git a/ansible/secrets.dist/production-aws.secrets.yml b/ansible/secrets.dist/production-aws.secrets.yml
@@ -51,3 +51,4 @@ site_smtp_password: 'INSERT_SMTP_PASSWORD_HERE'
 # Algolia
 site_algolia_app_id: 'INSERT_ALGOLIA_APP_ID_HERE'
 site_algolia_api_key: 'INSERT_ALGOLIA_API_KEY_HERE'
+site_algolia_search_key: 'INSERT_ALGOLIA_SEARCH_KEY_HERE'
diff --git a/ansible/secrets.dist/staging-aws.secrets.yml b/ansible/secrets.dist/staging-aws.secrets.yml
@@ -51,3 +51,4 @@ site_smtp_password: 'INSERT_SMTP_PASSWORD_HERE'
 # Algolia
 site_algolia_app_id: 'INSERT_ALGOLIA_APP_ID_HERE'
 site_algolia_api_key: 'INSERT_ALGOLIA_API_KEY_HERE'
+site_algolia_search_key: 'INSERT_ALGOLIA_SEARCH_KEY_HERE'
diff --git a/site/app/config/config.yml b/site/app/config/config.yml
@@ -49,6 +49,9 @@ twig:
     form_themes:
         - 'bootstrap_3_layout.html.twig'
         - 'LibrecoresProjectRepoBundle:Form:fields.html.twig'
+    globals:
+        algolia_app_id: "%env(ALGOLIA_APP_ID)%"
+        algolia_search_key: "%ALGOLIA_SEARCH_KEY%"
 
 # Assetic Configuration
 assetic:

diff --git a/site/app/config/parameters.yml.dist b/site/app/config/parameters.yml.dist
@@ -51,4 +51,5 @@ parameters:
     # Algolia Configuration
     env(ALGOLIA_APP_ID):  ~
     env(ALGOLIA_API_KEY): ~
+    ALGOLIA_SEARCH_KEY: ~
 
diff --git a/site/src/Librecores/ProjectRepoBundle/Resources/views/Default/project_search.html.twig b/site/src/Librecores/ProjectRepoBundle/Resources/views/Default/project_search.html.twig
@@ -1,62 +1,63 @@
 {% extends 'layout.html.twig' %}
 
 {% block title %}
-LibreCores Search
+  LibreCores Search
 {% endblock %}
 
 {% block pagepath %}Home &raquo; LibreCores Search{% endblock %}
 
 {% block stylesheets %}
   {{ parent() }}
   {% stylesheets filter="cssrewrite"
-  "assets/css/instantsearch.min.css"
-  %}
-  <link rel="stylesheet" href="{{ asset_url }}" />
+  "assets/css/instantsearch.min.css" %}
+  <link rel="stylesheet" href="{{ asset_url }}"/>
   {% endstylesheets %}
 {% endblock %}
 
 {% block content %}
-<form name="search-form" method="get" action="{{ path('librecores_project_repo_project_search') }}">
-  <div class="librecores-search">
-    <div class="row">
-      <div class="col-sm-3">
-        <h1>Search</h1>
-      </div>
-      <div class="col-sm-9">
-        <div class="input-group" style="width:100%">
-          <input type="search" id="search-input" placeholder="Search for ..." class="form-control" value="t">
-          <span class="input-group-btn">
+  <form name="search-form" method="get" action="{{ path('librecores_project_repo_project_search') }}">
+    <div class="librecores-search">
+      <div class="row">
+        <div class="col-sm-3">
+          <h1>Search</h1>
+        </div>
+        <div class="col-sm-9">
+          <div class="input-group" style="width:100%">
+            <input type="search" id="search-input" placeholder="Search for ..." class="form-control">
+            <span class="input-group-btn">
             <button class="btn btn-default search-query" type="submit">
               <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
               Search
             </button>
           </span>
+          </div>
         </div>
+        <input type="hidden" id="q" name="query" value="{% if searchQuery %}{{ searchQuery }}{% endif %}">
+        <input type="hidden" id="type" name="type" value="{{ searchType }}">
       </div>
-      <input type="hidden" id="q" name="query" value="{% if searchQuery %}{{ searchQuery }}{% endif %}">
-      <input type="hidden" id="type" name="type" value="{{ searchType }}">
-    </div>
 
-    <div class="row">
-      <div class="col-sm-3">
-        {# sidebar for search refinements #}
-        <ul class="list-group">
-          <a id="projects" href="#" class=" search-type list-group-item {{ searchType == 'projects' ? 'active' : '' }} btn">
-            <i class="fa fa-code"></i> Projects</a>
-          <a id="organization" href="#" class=" search-type list-group-item {{ searchType == 'organization' ? 'active' : '' }} btn">
-            <i class="fa fa-users"></i> Organization</a>
-          <a id="user" href="#" class=" search-type list-group-item {{ searchType == 'user' ? 'active' : '' }} btn">
-            <i class="fa fa-user"></i> Users</a>
-        </ul>
-      </div>
-      <div class="col-sm-9">
-        <div id="stats"></div>
-        <div id="hits"></div>
-        <div id="pagination"></div>
+      <div class="row">
+        <div class="col-sm-3">
+          {# sidebar for search refinements #}
+          <ul class="list-group">
+            <a id="projects" href="#"
+               class=" search-type list-group-item {{ searchType == 'projects' ? 'active' : '' }} btn">
+              <i class="fa fa-code"></i> Projects</a>
+            <a id="organization" href="#"
+               class=" search-type list-group-item {{ searchType == 'organization' ? 'active' : '' }} btn">
+              <i class="fa fa-users"></i> Organization</a>
+            <a id="user" href="#" class=" search-type list-group-item {{ searchType == 'user' ? 'active' : '' }} btn">
+              <i class="fa fa-user"></i> Users</a>
+          </ul>
+        </div>
+        <div class="col-sm-9">
+          <div id="stats"></div>
+          <div id="hits"></div>
+          <div id="pagination"></div>
+        </div>
       </div>
     </div>
-  </div>
-</form>
+  </form>
   {# Templates for instant search #}
 
   {# User Template #}
@@ -87,7 +88,7 @@ LibreCores Search
             <div>{{{ _highlightResult.tagName.value }}}</div>
             <div class="classification-container">
             {{#_highlightResult.classifications}}
-               <a href="#" class="classifiation-tag">{{{ value }}}</a>
+               <a href="/search?query={{ value }}&type=projects" class="classifiation-tag">{{{ value }}}</a>
             {{/_highlightResult.classifications}}
             </div>
             <div><i>
@@ -119,19 +120,19 @@ LibreCores Search
 {% endblock %}
 
 {% block pagejs %}
-{# do not use autofocus attribute to work around FF bug 712130 (FOUC) #}
+  {# do not use autofocus attribute to work around FF bug 712130 (FOUC) #}
 
-$(function() {
+  $(function() {
   searchFunctions();
   options =  {
-  appId: 'ENTER_APPLICATION_ID',
-  apiKey: 'ENTER_APPLICATION_KEY',
-  indexName: '{{ searchType }}',
-  searchParameters: {
-    hitsPerPage: 10,
+    appId: '{{ algolia_app_id }}',
+    apiKey: '{{ algolia_search_key }}',
+    indexName: '{{ searchType }}',
+    searchParameters: {
+      hitsPerPage: 10,
     },
   }
   // Algolia instantsearch configuration
-  algoliaInstantSearch(options, '{{searchType}}');
-});
+  algoliaInstantSearch(options, '{{ searchType }}');
+  });
 {% endblock %}
diff --git a/site/src/Librecores/ProjectRepoBundle/Resources/views/Project/view.html.twig b/site/src/Librecores/ProjectRepoBundle/Resources/views/Project/view.html.twig
@@ -60,7 +60,7 @@
   <div class="classification-container">
     {% if classifications %}
       {% for classification in classifications %}
-        <a href="" class="classifiation-tag">{{ classification.getClassification() }}</a>
+        <a href="{{ path('librecores_project_repo_project_search') }}?query={{ classification.getClassification() }}&type=projects" class="classifiation-tag">{{ classification.getClassification() }}</a>
       {% endfor %}
     {% endif %}
   </div>

diff --git a/site/src/Librecores/SiteBundle/Resources/views/Default/home.html.twig b/site/src/Librecores/SiteBundle/Resources/views/Default/home.html.twig
@@ -238,7 +238,11 @@
 {% block pagejs %}
 {# do not use autofocus attribute to work around FF bug 712130 (FOUC) #}
 $(function() {
+  algoliaConfig = {
+    applicationId: '{{ algolia_app_id }}',
+    searchKey: '{{ algolia_search_key }}'
+  }
   $("#search-form-input").focus();
-  algoliaAutocomplete();
+  algoliaAutocomplete(algoliaConfig);
 });
 {% endblock %}
diff --git a/site/web/assets/css/librecores.css b/site/web/assets/css/librecores.css
@@ -745,7 +745,7 @@ a.classifiation-tag:hover {
   background: none;
 }
 
-#search-input input {
+.ais-search-box .ais-search-box--input {
   height: 35px;
   padding: 6px 25px;
   font-size: 15px;
@@ -755,15 +755,16 @@ a.classifiation-tag:hover {
   background-image: none;
   border: 1px solid #ccc;
   border-radius: 4px;
+
 }
-#search-input input, #search-input input:focus {
+.ais-search-box--input input:focus {
   transition: border-color .3s ease-in;
   outline: 0;
 }
-#search-input input:focus {
+.ais-search-box--input input:focus {
   border-color: #3fb0ac;
 }
-#search-input input::-webkit-input-placeholder, #search-input input:-moz-placeholder, #search-input input:-moz-placeholder, #search-input input:-ms-input-placeholder {
+.ais-search-box--input input::-webkit-input-placeholder, #search-input input:-moz-placeholder, #search-input input:-moz-placeholder, #search-input input:-ms-input-placeholder {
   font-weight: 100;
   color: #999;
 }
@@ -781,7 +782,9 @@ a.classifiation-tag:hover {
   font-style: normal;
   background-color: rgba(58, 150, 207, 0.1);
 }
+.ais-search-box {
 
+}
 #stats .ais-stats--time {
   font-size: 0.8em;
   color: #999;

diff --git a/site/web/assets/js/search.js b/site/web/assets/js/search.js
@@ -1,11 +1,11 @@
-function algoliaAutocomplete() {
-  var client = algoliasearch('ENTER_APPLICATION_ID', 'ENTER_APPLICATION_KEY')
+function algoliaAutocomplete(algoliaConfig) {
+  var client = algoliasearch(algoliaConfig.applicationId, algoliaConfig.searchKey)
   var projects = client.initIndex('projects');
   var classifications = client.initIndex('classifications');
   var organization = client.initIndex('organization');
   var user = client.initIndex('user');
 
-  autocomplete('#search-form-input', {debug:true}, [
+  autocomplete('#search-form-input', {} ,[
     {
       source: autocomplete.sources.hits(projects, { hitsPerPage: 5 }),
       displayKey: 'name',
@@ -36,8 +36,10 @@ function algoliaAutocomplete() {
       templates: {
         header: '<div class="aa-suggestions-category">Users</div>',
         suggestion: function(suggestion) {
+          var name = suggestion._highlightResult.name == null ?
+            suggestion._highlightResult.username.value : suggestion._highlightResult.name.value;
           return '<span>' +
-            suggestion._highlightResult.name.value + '</span>  <span>'
+             name + '</span>  <span>'
             + suggestion._highlightResult.username.value + '</span>';
         }
       }
@@ -141,6 +143,9 @@ function getTemplate(templateName) {
 }
 
 function getTimeDiff(item) {
+  if(item.dateLastActivityOccurred === null) {
+    return 0 + ' days before';
+  }
   var time = item.dateLastActivityOccurred.date;
   var date = new Date(time);
   var today = new Date();