Grant categories for new grants

app/assets/v2/js/grants/detail.js

@@ -3,12 +3,53 @@ const editableFields = [
   '#form--input__reference-url',
   '#contract_owner_address',
   '#grant-members',
-  '#amount_goal'
+  '#amount_goal',
+  '#grant-categories'
 ];
 
+function getCategoryIndex(categoryName, categories) {
+  const resultSet = categories.filter(category => {
+    const name = category[0];
+
+    return name === categoryName;
+  });
+
+  if (resultSet.length === 1) {
+    const matchingCategory = resultSet[0];
+
+    const index = matchingCategory[1];
+
+    return index.toString();
+  }
+
+  return '-1';
+}
+
+function updateValuesOfExistingCategories() {
+  $.get('/grants/categories', data => {
+    if (!data || !data.categories) {
+      return;
+    }
+
+    $('#grant-categories option:selected').each(function() {
+      const categoryName = $(this).text();
+
+      const categoryIndex = getCategoryIndex(categoryName.toLowerCase(), data.categories);
+
+      $(this).val(categoryIndex);
+    });
+  });
+}
+
+function initGrantCategoriesInput() {
+  grantCategoriesSelection('#grant-categories', '/grants/categories');
+  updateValuesOfExistingCategories();
+}
+
 $(document).ready(function() {
   showMore();
   addGrantLogo();
+  initGrantCategoriesInput();
 
   setInterval (() => {
     notifyOwnerAddressMismatch(
@@ -73,12 +114,14 @@ $(document).ready(function() {
     let edit_reference_url = $('#form--input__reference-url').val();
     let edit_amount_goal = $('#amount_goal').val();
     let edit_grant_members = $('#grant-members').val();
+    let edit_categories = $('#grant-categories').val();
 
     let data = {
       'edit-title': edit_title,
       'edit-reference_url': edit_reference_url,
       'edit-amount_goal': edit_amount_goal,
-      'edit-grant_members[]': edit_grant_members
+      'edit-grant_members[]': edit_grant_members,
+      'edit-categories[]': edit_categories
     };
 
     if (grant_description !== undefined) {

app/assets/v2/js/grants/new.js

@@ -56,6 +56,10 @@ const processReceipt = receipt => {
   saveGrant(formData, true);
 };
 
+const setupGrantCategoriesInput = (grantType) => {
+  grantCategoriesSelection('.categories', `/grants/categories?type=${grantType}`);
+};
+
 const init = () => {
   if (localStorage['grants_quickstart_disable'] !== 'true') {
     window.location = document.location.origin + '/grants/quickstart';
@@ -196,6 +200,8 @@ const init = () => {
             formData.append('transaction_hash', $('#transaction_hash').val());
             formData.append('network', $('#network').val());
             formData.append('team_members[]', $('#input-team_members').val());
+            formData.append('categories[]', $('#input-categories').val());
+            formData.append('grant_type', $('#input-grant_type').val());
             saveGrant(formData, false);
 
             document.issueURL = linkURL;
@@ -290,5 +296,13 @@ const init = () => {
     $('.select2-selection__rendered').hover(function() {
       $(this).removeAttr('title');
     });
+
+
+    setupGrantCategoriesInput('tech');
+
+    $('#input-grant_type').on('change', function() {
+      $('.categories').val(null).trigger('change');
+      setupGrantCategoriesInput(this.value);
+    });
   });
 };

app/assets/v2/js/grants/shared.js

@@ -3,6 +3,71 @@ var compiledSubscription;
 var compiledSplitter;
 var contractVersion;
 
+function grantCategoriesSelection(target, apiUrl) {
+  $(target).each(function() {
+    if (!$(this).length) {
+      return;
+    }
+
+    $(this).select2({
+      ajax: {
+        url: apiUrl,
+        dataType: 'json',
+        delay: 250,
+        data: function(params) {
+
+          let query = {
+            term: params.term[0] === '@' ? params.term.slice(1) : params.term
+          };
+
+          return query;
+        },
+        processResults: function(data) {
+          return {
+            results: data.categories.map(category => {
+              const name = category[0];
+              const humanisedName = name.charAt(0).toUpperCase() + name.substring(1);
+
+              const index = category[1];
+
+              return {value: name, text: humanisedName, id: index};
+            })
+          };
+        },
+        cache: true
+      },
+      data: false,
+      allowClear: true,
+      theme: undefined,
+      placeholder: 'Search by grant category',
+      minimumInputLength: 1,
+      escapeMarkup: function(markup) {
+        return markup;
+      },
+      templateResult: function(category) {
+        if (category.loading) {
+          return category.text;
+        }
+
+        return `<div class="d-flex align-items-baseline">
+                      <div>${category.text}</div>
+                    </div>`;
+      },
+      templateSelection: function(category) {
+        let selected;
+
+        if (category.id) {
+          selected = `<span class="ml-2">${category.text}</span>`;
+        } else {
+          selected = category.text;
+        }
+
+        return selected;
+      }
+    });
+  });
+}
+
 // Waiting State screen
 var enableWaitState = container => {
   $(container).hide();

app/grants/migrations/0041_auto_20200207_0816.py

@@ -0,0 +1,31 @@
+# Generated by Django 2.2.4 on 2020-02-07 08:16
+
+from django.db import migrations, models
+import economy.models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('grants', '0040_auto_20200205_1543'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='GrantCategory',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('created_on', models.DateTimeField(db_index=True, default=economy.models.get_time)),
+                ('modified_on', models.DateTimeField(default=economy.models.get_time)),
+                ('category', models.CharField(help_text='Grant Category', max_length=50)),
+            ],
+            options={
+                'abstract': False,
+            },
+        ),
+        migrations.AddField(
+            model_name='grant',
+            name='categories',
+            field=models.ManyToManyField(to='grants.GrantCategory'),
+        ),
+    ]

app/grants/models.py

@@ -68,6 +68,42 @@ def keyword(self, keyword):
             Q(reference_url__icontains=keyword)
         )
 
+class GrantCategory(SuperModel):
+    @staticmethod
+    def all_categories():
+        all_tech_categories = GrantCategory.tech_categories()
+        filtered_media_categories = [category for category in GrantCategory.media_categories() if category not in all_tech_categories]
+        return all_tech_categories + filtered_media_categories
+
+    @staticmethod
+    def tech_categories():
+        return [
+            'security',
+            'scalability',
+            'defi',
+            'education',
+            'wallets',
+            'community',
+            'eth2.0',
+            'eth1.x',
+        ]
+
+    @staticmethod
+    def media_categories():
+        return [
+            'education',
+            'twitter',
+            'reddit',
+            'blog',
+            'notes',
+        ]
+
+    category = models.CharField(
+        max_length=50,
+        blank=False,
+        null=False,
+        help_text=_('Grant Category'),
+    )
 
 class Grant(SuperModel):
     """Define the structure of a Grant."""
@@ -229,6 +265,7 @@ class Meta:
         null=True,
         blank=True,
     )
+    categories = models.ManyToManyField(GrantCategory)
 
     # Grant Query Set used as manager.
     objects = GrantQuerySet.as_manager()
@@ -1080,7 +1117,7 @@ def psave_contrib(sender, instance, **kwargs):
             "url":instance.subscription.grant.url,
             "network":instance.subscription.grant.network,
         }
-        )
+    )
 
 @receiver(pre_save, sender=Contribution, dispatch_uid="presave_contrib")
 def presave_contrib(sender, instance, **kwargs):
@@ -1101,7 +1138,7 @@ def presave_contrib(sender, instance, **kwargs):
         'amount_per_period_usdt': float(sub.amount_per_period_usdt),
         'amount_per_period': float(sub.amount_per_period),
         'tx_id': ele.tx_id,
-        }
+    }
 
 
 def next_month():

app/grants/templates/grants/card/front.html

@@ -91,6 +91,16 @@ <h2 class="grant-item__title font-subheader"><a href="{% url 'grants:details' gr
           </div>
         {% endif %}
       </div>
+
+      <div class="mt-2 row">
+        <div class="col">
+          <div>
+            {% for category in grant.categories.all %}
+              <span class="badge badge-primary">{{category.category}}</span>
+            {% endfor %}
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </a>

app/grants/templates/grants/detail/info.html

@@ -135,6 +135,19 @@ <h1 class="font-title-xl my-4 font-weight-bold">
 
     </div>
 
+    <div id="edit-grant-category" class="my-2 mb-4">
+      <p class="sub-title mb-0">{% trans "Categories" %}</p>
+      <div>
+        <div class="form__select2">
+          <select id="grant-categories" class="form__input" name="grant-categories[]" multiple="multiple" disabled>
+            {% for category in grant.categories.all %}
+            <option value="{{ category.id }}" selected="selected">{{ category.category|title }}</option>
+            {% endfor %}
+          </select>
+        </div>
+      </div>
+    </div>
+
     {% if grant_is_inactive %}
       <button type="button" class="button button--primary shadow-none font-weight-bold button--full py-3" disabled>
         {% trans "Grant Has Ended" %}
@@ -333,4 +346,4 @@ <h5 class="font-subheader pb-2">{% trans "Gas Settings" %}</h5>
     <span id="grant_contract_owner_address" class="hidden">{{ grant.contract_owner_address }}</span>
 
   </div>
-</div>
+</div>

app/grants/templates/grants/index.html

@@ -232,9 +232,12 @@ <h2 class="text-uppercase font-weight-semibold font-bigger-3 pt-4 mt-2 px-4">
 
             <div class="col-12 col-xl-8">
               <ul class="grants_nav grants_keyword_nav pl-0 mb-0 pb-1 pt-2 mt-2 mt-xl-0 text-center text-xl-left font-body font-weight-semibold">
-                {% for category in nav_options %}
-                  <a  data-type="keyword" data-value="{{category.keyword}}" class="mr-3 mr-md-2 mr-lg-3 {% if keyword == category.keyword %}selected{% endif %}"  >
-                    {{category.label}}
+                <a data-type="category" data-value="" class="mr-3 mr-md-2 mr-lg-3 {% if selected_category == '' %} selected {% endif %}">
+                  All
+                </a>
+                {% for category in categories %}
+                  <a data-type="category" data-value="{{category}}" class="mr-3 mr-md-2 mr-lg-3 {% if selected_category == category %} selected {% endif %}">
+                    {{category|title}}
                   </a>
                 {% endfor %}
               </ul>

app/grants/templates/grants/new.html

@@ -81,6 +81,16 @@ <h1 class="text-center font-title-xl">{% trans "Create a Grant" %}</h1>
                   <input type="url" class="form__input form__input-lg " id="input-url" name="reference_url" required/>
                 </div>
 
+                <div class="form__group-horizontal pb-3">
+                  <label class="font-body" for="input-grant_type">{% trans "Grant Type" %}</label>
+                  <div>
+                    <select id="input-grant_type" class="form__input form__input-lg">
+                      <option value="tech">{% trans "Technology" %}</option>
+                      <option value="media">{% trans "Media" %}</option>
+                    </select>
+                  </div>
+                </div>
+
                 <div class="form__group-horizontal pb-3">
                   <label class="font-body" for="input-team_members">{% trans "Team members" %}</label>
                   <div class="form__select2 g-multiselect">
@@ -89,6 +99,14 @@ <h1 class="text-center font-title-xl">{% trans "Create a Grant" %}</h1>
                   </div>
                 </div>
 
+                <div class="form__group-horizontal pb-3">
+                  <label class="font-body">{% trans "Grant Categories" %}</label>
+                  <div class="form__select2 g-multiselect">
+                    <select id="input-categories" class="form__input form__input-lg categories" name="categories[]" multiple="multiple">
+                    </select>
+                  </div>
+                </div>
+
                 <div class="form__group-horizontal pb-3">
                   <div class="row">
                     <div class="col-12 col-md-6">
@@ -116,7 +134,7 @@ <h1 class="text-center font-title-xl">{% trans "Create a Grant" %}</h1>
                   <label class="font-body">{% trans "Project Logo" %}</label>
                   <div class="form__drop" id="js-drop">
                     <input id="img-project" type="file" name="input_image" accept="image/*">
-                    <span>{% trans "Drag & Drop or Browse" %} </span> 
+                    <span>{% trans "Drag & Drop or Browse" %} </span>
                     <span> | {% trans "Square or 16:9; above 400x400 preferred" %}</span>
                     <img id="preview"/>
                   </div>
@@ -141,6 +159,7 @@ <h5 class="font-subheader pb-2">{% trans "Gas Settings" %}</h5>
                   <input type="hidden" id="contract_version" name="contract_version" value="1">
                   <input type="hidden" id="token_address" name="token_address" value="">
                   <input type="hidden" id="token_symbol" name="token_symbol" value="">
+                  <input type="hidden" id="category" name="category" value="">
                   <input type="hidden" id="network" name="network">
                   <input type="hidden" id="trusted_relayer" name="trusted_relayer" value="{{ trusted_relayer }}">
                 </div>