Feature/group tags like mzm (#386)

* Added grouping capabilities to tags on ideas(plannen) on create plannen page

* Added tagid to checbox and label instead of non working option

* specify if theme labels should be shown

* Made it so tags can be grouped by use of extraData.theme

* Changed default of showing labels to false for and made name consistent

* Changed implementation to use type

* Put back cache

* Renamed theme fields to tagType

* Added cache key for if an empty list was fetched

* Added cachekey for empty list

packages/cms/lib/modules/openstad-pages/lib/load-tags.js

@@ -1,4 +1,5 @@
 const rp              = require('request-promise');
+const _ = require('lodash');
 const moment          = require('moment'); // returns the new locale, in this case 'de'
 const url             = require('url');
 const internalApiUrl  = process.env.INTERNAL_API_URL;
@@ -17,18 +18,23 @@ module.exports =  function (req, res, next) {
    */
   if (globalData.siteId) {
     let tags;
-
+    let retrievedEmpty = false;
     // if cacheIdeas is turned on, get ideas from cache
     // cacheIdeas is old key, should be refactored,
     // preferable we always have caching on
+
     if (globalData.cacheIdeas) {
       let cacheKey = 'tags-' + globalData.siteId;
       tags = cache.get(cacheKey);
+      retrievedEmpty = cache.get(globalData.siteId + '-retrieved-tags-empty');
     }
-
+    
     if (Array.isArray(tags)) {
       req.data.openstadTags = tags;
       next();
+    } else if(retrievedEmpty) {
+      req.data.openstadTags = [];
+      next();
     } else {
 
       var options = {
@@ -42,9 +48,14 @@ module.exports =  function (req, res, next) {
           //add tags to to the data object so it's available in templates
           //use openstadTags instead of tags  to prevent colliding with Apos
           req.data.openstadTags = response;
+          req.data.groupedOpenstadTags = _.groupBy(response, function(tag){return tag.type});
 
           // set the cache
           if (globalData.cacheIdeas) {
+            cache.set(globalData.siteId + '-retrieved-tags-empty', response.length === 0, {
+              life: cacheLifespan
+            })
+
             cache.set('tags-' +req.data.global.siteId, response, {
               life: cacheLifespan
             });

packages/cms/lib/modules/resource-form-widgets/lib/fields.js

@@ -148,7 +148,7 @@ const fields = [
               {
                 value: 'tags',
                 label: "Tags (currently only works for ideas)",
-                showFields: ['fieldKey', 'fieldRequired', 'fieldMin', 'fieldMax']
+                showFields: ['fieldKey', 'fieldRequired', 'tagType', 'showTagTypeLabels', 'fieldMin', 'fieldMax']
               },
               {
                 value: 'raw',
@@ -296,6 +296,27 @@ const fields = [
             type: 'string',
             textarea: true
           },
+          {
+            name: 'tagType',
+            label: 'Optionally specify the single type (one word) by which to fetch the tags.',
+            type: 'string'
+          },
+          {
+            name: 'showTagTypeLabels',
+            label: 'When the above option is empty, select if the corresponding types should be shown or not',
+            type: 'boolean',
+            choices: [
+              {
+                label: 'Yes',
+                value: true,
+              },
+              {
+                label: 'No',
+                value: false,
+              }
+            ],
+            def: false
+          },
           {
             name: 'notExtraDataKey',
             label: 'Save field in root if data object and not in extraData, will only work if column exists in database)',

packages/cms/lib/modules/resource-form-widgets/views/includes/fields/tags.html

@@ -1,17 +1,52 @@
 <div class="checkbox-container">
-  {% for tag in data.openstadTags %}
-  <div class="checkbox">
-    <input
-      type="checkbox"
-      name="tags[]"
-      value="{{tag.id}}"
-      id="checkbox-{{loop.index}}-{{option.value}}"
-      {% if field.fieldRequired %}required{% endif %}
-      {% if field.idea.tags %}checked{% endif %}
-    />
-    <label for="checkbox-{{loop.index}}-{{option.value}}" class="checkbox-label">
-       {{tag.name}}
-    </label>
+  {% if field.tagType 
+        and data.groupedOpenstadTags[field.tagType] 
+        and data.groupedOpenstadTags[field.tagType].length %}
+
+    {% for tag in data.groupedOpenstadTags[field.tagType] %}
+      <div class="checkbox">
+        <input
+          type="checkbox"
+          name="tags[]"
+          value="{{tag.id}}"
+          id="checkbox-{{loop.index}}-{{tag.id}}"
+          {% if field.fieldRequired %}required{% endif %}
+          {% if field.idea.tags %}checked{% endif %}
+        />
+        <label for="checkbox-{{loop.index}}-{{tag.id}}" class="checkbox-label">{{tag.name}}</label>
+      </div>    
+    {% endfor %}
+  {% endif %}
   </div>
+
+
+  {% if field.tagType === '' or field.tagType === undefined %}
+  {% for key, tagList in data.groupedOpenstadTags %}
+    {% set outer_loop = loop %}
+
+    {% if field.showTagTypeLabels %}
+      {% if outer_loop.length > 1 and key !== 'undefined' %}
+        <p>{{key}}</p>
+      {% endif %}
+
+      {% if outer_loop.length > 1 and key == 'undefined' %}
+        <p>Overig</p>
+      {% endif %}
+    {% endif %}
+
+      {% for tag in tagList %}
+      <div class="checkbox">
+        <input
+          type="checkbox"
+          name="tags[]"
+          value="{{tag.id}}"
+          id="checkbox-{{outer_loop.index}}-{{loop.index}}-{{tag.id}}"
+          {% if field.fieldRequired %}required{% endif %}
+          {% if field.idea.tags %}checked{% endif %}
+        />
+        <label for="checkbox-{{outer_loop.index}}-{{loop.index}}-{{tag.id}}" class="checkbox-label">{{tag.name}}</label>
+      </div>    
+    {% endfor %}
   {% endfor %}
+{% endif %}
 </div>

packages/cms/lib/modules/resource-overview-widgets/index.js

@@ -261,6 +261,8 @@ module.exports = {
                     return Object.assign({}, tag);
                 }) : [];
 
+                widget.groupedOpenstadTags = req.data.groupedOpenstadTags;
+
                 let response;
 
                 // if cache is turned on, check if current url is available in cache

packages/cms/lib/modules/resource-overview-widgets/lib/arrangeFields.js

@@ -55,7 +55,7 @@ module.exports = (self, options) => {
         {
             name: 'tags',
             label: 'Tags',
-            fields: ['displayTagFilters']
+            fields: ['displayTagFilters', 'tagType', 'showTagTypeLabels']
         },
         {
             name: 'include_exclude',

packages/cms/lib/modules/resource-overview-widgets/lib/fields.js

@@ -541,6 +541,26 @@ module.exports = [
       }
     ],
   },
+  {
+    name: 'tagType',
+    label: 'If specified only show tags belonging to a certain type',
+    type: 'string',
+  },
+  {
+    name: 'showTagTypeLabels',
+    label: 'If no tag type is specified, should the type name be shown per group?',
+    type: 'boolean',
+    choices: [
+      {
+        label: 'Yes',
+        value: true
+      },
+      {
+        label: 'No',
+        value: false,
+      }
+    ],
+  },
   {
     name: 'displaySorting',
     label: 'Display sorting',

packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tags.html

@@ -5,13 +5,47 @@
   </a>
 </div>
 <div class="resource-overview-tags-container hidden-xs">
-  {% for tag in data.widget.openstadTags %}
-  {% if data.widget.isTagSelected(tag, data.query) %}
-  <a href="{{data.widget.formatTagRemoveUrl(tag, data.query)}}" class="resource-tag resource-tag--selected openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}</a>
-  {% else %}
-  <a href="{{data.widget.formatTagSelectUrl(tag, data.query)}}" class="resource-tag openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}</a>
+
+  {% if data.widget.tagType and data.widget.groupedOpenstadTags[data.widget.tagType] and data.widget.groupedOpenstadTags[data.widget.tagType].length %}
+    {% for tag in data.widget.groupedOpenstadTags[data.widget.tagType] %}
+      {% if data.widget.isTagSelected(tag, data.query) %}
+        <a href="{{data.widget.formatTagRemoveUrl(tag, data.query)}}" class="resource-tag resource-tag--selected openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}asdfsaf</a>
+        {% else %}
+        <a href="{{data.widget.formatTagSelectUrl(tag, data.query)}}" class="resource-tag openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}fasfasfds</a>
+      {% endif %}
+    {% endfor %}
   {% endif %}
-  {% endfor %}
+
+
+
+
+  {% if data.widget.tagType === '' and data.widget.groupedOpenstadTags %}
+
+    {% for key, tagList in data.widget.groupedOpenstadTags %}
+
+      {% if data.widget.showTagTypeLabels %}
+        <div>
+
+          <p> {{ "tags" if key === 'undefined' else key }}</p>
+            {% for tag in tagList %}
+              {% if data.widget.isTagSelected(tag, data.query) %}
+                <a href="{{data.widget.formatTagRemoveUrl(tag, data.query)}}" class="resource-tag resource-tag--selected openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}</a>
+                {% else %}
+                <a href="{{data.widget.formatTagSelectUrl(tag, data.query)}}" class="resource-tag openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}</a>
+              {% endif %}
+            {% endfor %}
+          </div>
+      {% else%}
+      {% for tag in tagList %}
+        {% if data.widget.isTagSelected(tag, data.query) %}
+          <a href="{{data.widget.formatTagRemoveUrl(tag, data.query)}}" class="resource-tag resource-tag--selected openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}</a>
+          {% else %}
+          <a href="{{data.widget.formatTagSelectUrl(tag, data.query)}}" class="resource-tag openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}</a>
+        {% endif %}
+      {% endfor %}
+    {% endif%}  
+  {% endfor %}  
+{% endif %}
 </div>
 <div id="filter-tags-modal" class="content-modal content-modal--l">
   <div class="content-modal-content">