Feature/textbox templates (#495)

Author: tanvirchahal

ckanext/querytool/fanstatic/css/main.css

@@ -1035,3 +1035,44 @@ $("#field-ckan-homepage-style").closest('.control-group').hide();
 $("#field-ckan-site-intro-text").closest('.control-group').hide();
 $("#field-ckan-site-about").closest('.control-group').hide();
 
+
+//Render chart title for textbox
+$(document).ready(function(){
+  $('.textbox').each(function(){
+    var content = $(this).html();
+    var measure = $(this).attr("data-measure");
+    var queryFilters = $(this).attr("data-filters");
+    queryFilters = JSON.parse(queryFilters);
+    var optionalFilter = undefined;
+    
+    console.log(queryFilters);
+
+    //var dynamicTitle = this.options.map_custom_title_field;
+    var dynamicTitle = renderChartTitle(content,{
+      measure: {name: measure, alias: measure},
+      filters: queryFilters,
+      optionalFilter: optionalFilter,
+    });
+    $(this).html(dynamicTitle);
+  })
+ });
+
+
+function renderChartTitle (title, options) {
+
+  // Configure nunjucks
+  var env = nunjucks.configure({tags: {variableStart: '{', variableEnd: '}'}});
+
+  // Prepare data
+  var data = {measure: options.measure.alias};
+  for (let filter of options.filters) data[filter.slug] = filter.value;
+  console.log(options);
+  if (options.optionalFilter) data.optional_filter = options.optionalFilter.value.toString();
+
+  // Render and return
+  try {
+      return env.renderString(title, data);
+  } catch (error) {
+      return title;
+  }
+}

ckanext/querytool/fanstatic/javascript/dist/visualizations_settings.js

@@ -224,4 +224,16 @@ body {
   margin-top:10px !important;
   padding:12px 15px !important;
   float:right !important;
+}
+
+.textbox_desc {
+    width: 400px;
+}
+
+.textbox_dropdown {
+    width: 415px;
+}
+
+.textbox_info {
+    width:393px !important; 
 }

ckanext/querytool/fanstatic/javascript/vitals.js

@@ -629,6 +629,19 @@
             </div>
             {# {% endif %} #}
 
+            {# X sorting #}
+            {% set sort_options = h.querytool_get_chart_sort() %}
+            <div id="chart_field_sort_div_{{ n }}" class="control-group control-select {% if chart and chart.category_name %}hidden{% endif %}">
+              <label class="control-label" for="chart_field_sort_{{ n }}">{{ _('Data sorting') }}</label>
+              <div class="controls ">
+                <select id="chart_field_sort_{{ n }}" name="chart_field_sort_{{ n }}" >
+                  {% for sort in sort_options %}
+                  <option value="{{ sort.value }}" {% if chart %}{{ 'selected' if sort.value == chart.sort }}{% endif %} >{{ sort.text }}</option>
+                  {% endfor %}
+                </select>
+              </div>
+            </div>
+
           </div>
         </div>
       </div>

ckanext/querytool/fanstatic/less/main.less

@@ -1,17 +1,56 @@
- {% import 'macros/form.html' as form %}
-  {% if box %}
-     {% set text_description = box.description %}
-     {% set column_width = box.column_width %}
-  {% endif %}
-  <div id="text_box_{{ n }}" class="item text-boxs-section text_box visualization-fields-section">
-    <div class="item-wrapper">
+{% import 'macros/form.html' as form %}
+{% if box %}
+   {% set text_description = box.description %}
+   {% set column_width = box.column_width %}
+{% endif %}
 
-      {{ form.markdown('text_box_description_' ~ n, id='text_box_description_' ~ n, label=_('Content'), placeholder=_('Description'), value=text_description) }}
-      {{ form.select('text_box_column_width_' ~ n, id='text_box_column_width_' ~ n, label=_('Column Width'), options=[{'text':_('Half'), 'value': 'Half'},{'text': _('Full'), 'value': 'Full'}], selected=column_width) }}
+<div id="text_box_{{ n }}" class="item text-boxs-section text_box visualization-fields-section">
+  <div class="item-wrapper">
 
-      <ul class="inline text-right chart-actions">
-        <li class="remove"><a class="btn delete-item-btn">{% block delete_button_text %}<span class="fa fa-trash-o" aria-hidden="true"></span> {{ _('Delete') }}{% endblock %}</a></li>
-      </ul>
-      <span class="grippy"></span>
+    <div class="control-group title">
+      <label class="control-label" for="text_box_description_1">Content</label>
+      <div class="controls editor">
+        
+        <textarea id="text_box_description_{{ n }}" class="textbox_desc" name="text_box_description_{{ n }}" cols="20" rows="5" placeholder="Description">{{ text_description }}</textarea>
+        <div class="control-group title-vars">
+          <div class=" ">
+            {% set filters = h.querytool_parse_json(info_query_filters or main_filters or '[]') %}
+            {% set filters = filters|sort(attribute='order') %}
+            <select class="textbox_dropdown">
+              <option value="" disabled selected>{{_('Add variable to title')}}</option>
+              <optgroup label="{{_('Capitalized')}}">
+                <option value="{measure|capitalize}">{{_('Measure')}}</option>
+                {% for filter in filters %}
+                  <option value="{{'{%s|capitalize}' % filter.slug}}">{{ filter.alias }}</option>
+                {% endfor %}
+              </optgroup>
+              <optgroup label="{{_('lowercase')}}" class='text-lowercase'>
+                <option value="{measure|lower}">{{_('Measure')}}</option>
+                {% for filter in filters %}
+                  <option value="{{'{%s|lower}' % filter.slug}}">{{ filter.alias }}</option>
+                {% endfor %}
+              </optgroup>
+            </select>
+
+          </div>
+        </div>
+        <div class="control-group title-help">
+          <div class=" ">
+            {% set template_tooltip = "<pre><p>" + _('Variables') + "<br>---<br>{measure}<br>{optional_filter}<br>*" + _('use drop-down list to select variables based on application filters') + "</p><p>" + _('Processed variables') + "<br>---<br>{measure|capitalize}<br>{measure|lower}<br>{measure|upper}<br>" + _('etc') + "</p></pre><p><b><a href='https://mozilla.github.io/nunjucks/templating.html#variables' target='_blank'>" + _('Full templates syntax') + "</a></b></p><p class='muted'><b>" + _('Please note:') + " " + "</b>" + _('Single braces \'{}\' are used for variables') + "</p>" %}
+            <span class="editor-info-block textbox_info">{{_('You can use')}} <a href="#templates" title="" data-trigger="focus" data-target="popover" data-content="{{ template_tooltip }}" data-html="true" data-original-title="{{_('Templates quick reference')}}" data-container="body">{{_('Templates')}}</a> {{_('here')}}</span>
+          </div>
+        </div>
+        
+      </div>
     </div>
+
+    
+
+    {{ form.select('text_box_column_width_' ~ n, id='text_box_column_width_' ~ n, label=_('Column Width'), options=[{'text':_('Half'), 'value': 'Half'},{'text': _('Full'), 'value': 'Full'}], selected=column_width) }}
+
+    <ul class="inline text-right chart-actions">
+      <li class="remove"><a class="btn delete-item-btn">{% block delete_button_text %}<span class="fa fa-trash-o" aria-hidden="true"></span> {{ _('Delete') }}{% endblock %}</a></li>
+    </ul>
+    <span class="grippy"></span>
   </div>
+</div>

ckanext/querytool/templates/ajax_snippets/chart_item.html

@@ -103,7 +103,8 @@
     measure_label, info_query_filters = data.main_filters, bar_width = data.bar_width,
     donut_hole = data.donut_hole %} {% endif %} {% if
     item.type == 'text_box' %} {% snippet 'ajax_snippets/text_box_item.html', n
-    = item.order, box = item %} {% endif %} {% if item.type == 'image' %} {%
+    = item.order, box = item, main_filters =
+    data.main_filters %} {% endif %} {% if item.type == 'image' %} {%
     snippet 'ajax_snippets/image_item.html', n = item.order, data = item %} {%
     endif %} {% if item.type == 'map' %} {% snippet
     'ajax_snippets/map_item.html', n = item.order, map = item, sql_string =

ckanext/querytool/templates/ajax_snippets/text_box_item.html

@@ -279,7 +279,7 @@ <h3 id="item-title-{{chart_id}}">{{ item.map_custom_title_field }}</h3>
           %}
         {% endif %}
         {% if item.type == 'text_box' %}
-          <div class="item-content" >
+          <div class="item-content textbox" data-filters="{{ querytool.public_main_filters }}" data-measure="{{ measure_label }}"  id="textbox-{{chart_id}}">
             {{ h.render_markdown(h.get_translated(item, 'description'), True, True) }}
           </div>
         {% endif %}