Create match bounties area

app/assets/v2/css/board.css

@@ -81,6 +81,15 @@
   width: 100%;
 }
 
+.hackathon-alt {
+  color: var(--gc-blue-hover);
+  display: block;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: 12px;
+  letter-spacing: 1.6px;
+}
+
 @media (min-width: 768px) {
   .list-bounty-item_logo {
     width: 40px;

app/assets/v2/js/board.js

@@ -1,6 +1,9 @@
 let contributorBounties = {};
 let bounties = {};
 let authProfile = document.contxt.profile_id;
+let skills = document.skills;
+let network = document.contxt.env === 'prod' ? 'mainnet' : 'rinkeby';
+
 
 Vue.mixin({
   methods: {
@@ -45,6 +48,25 @@ Vue.mixin({
         vm.isLoading[type] = false;
         vm.error[type] = 'Error fetching bounties. Please contact [email protected]';
       });
+    },
+    fetchMatchingBounties: function() {
+      let vm = this;
+      const apiUrlbounties = `/api/v0.1/bounties/slim/?network=${network}&applicants=ALL&keywords=${vm.skills}&order_by=-web3_created&offset=0&limit=10`;
+
+      if (vm.matchingBounties.length) {
+        return;
+      }
+
+      const getbounties = fetchData (apiUrlbounties, 'GET');
+
+      $.when(getbounties).then(function(response) {
+        vm.matchingBounties = response;
+        vm.isLoading.matchingBounties = false;
+      }).catch(function() {
+        vm.isLoading.matchingBounties = false;
+      });
+
+
     },
     isExpanded(key, type) {
       return this.expandedGroup[type].indexOf(key) !== -1;
@@ -146,6 +168,9 @@ Vue.mixin({
         vm.checkData('funder');
         $('#funder-tab').tab('show');
       }
+    },
+    redirect(url) {
+      document.location.href = url;
     }
   }
 });
@@ -155,15 +180,18 @@ if (document.getElementById('gc-board')) {
     delimiters: [ '[[', ']]' ],
     el: '#gc-board',
     data: {
+      network: network,
       bounties: bounties,
       openBounties: [],
       submittedBounties: [],
       expiredBounties: [],
       contributors: [],
       contributorBounties: contributorBounties,
-      expandedGroup: {'submitted': [], 'open': [], 'started': []},
+      expandedGroup: {'submitted': [], 'open': [], 'started': [], 'bountiesMatch': []},
       disabledBtn: false,
       authProfile: authProfile,
+      skills: skills,
+      matchingBounties: [],
       isLoading: {
         'open': true,
         'openContrib': true,
@@ -174,7 +202,8 @@ if (document.getElementById('gc-board')) {
         'expired': true,
         'work_in_progress': true,
         'interested': true,
-        'work_submitted': true
+        'work_submitted': true,
+        'matchingBounties': true
       },
       error: {
         'open': '',
@@ -210,3 +239,7 @@ Vue.filter('moment', (date) => {
   moment.locale('en');
   return moment.utc(date).fromNow();
 });
+
+Vue.filter('humanizeEth', (number) => {
+  return parseInt(number, 10) / Math.pow(10, 18);
+});

app/dashboard/templates/board/contributor.html

@@ -39,6 +39,75 @@
       </div>
     </div>
   </header>
+  <section class="container">
+    <div class="row">
+      <div class="col-12">
+        <div class="bg-white rounded border my-4">
+          <div class="d-flex justify-content-between p-4 border-bottom btn-gc-blue btn-sm" @click="skills[0] ? (toggleCollapse(1, 'bountiesMatch'), fetchMatchingBounties()) : redirect('/settings/matching')">
+            <div v-if="skills[0]">
+              Bounties matching your skills: <b>[[ skills.join(', ') ]]</b> <a href="{% url 'matching_settings' %}" class="white underline">(Update Skills)</a>
+            </div>
+            <div v-else>
+              Update your skills to get the right matches <a href="{% url 'matching_settings' %}" class="white underline">Update Skills</a>
+            </div>
+            <div v-show="skills[0]">
+              View Matching Bounties <i class="fa fa-fw" :class="isExpanded(1, 'bountiesMatch')? 'fa-chevron-up': 'fa-chevron-down'"></i>
+            </div>
+          </div>
+
+          <div v-show="isExpanded(1, 'bountiesMatch')">
+            <ul class="list-unstyled list-bounty">
+              <li class="position-relative font-smaller-1 mt-3 p-3 list-bounty-item" v-for="(bounty, key) in matchingBounties">
+                <span class="fa-stack mr-2">
+                  <i class="fas fa-circle fa-stack-2x blue"></i>
+                  <i class="fas fa-user fa-stack-1x fa-inverse"></i>
+                </span>
+                <span class="font-weight-bold">New bounty matching your skills</span>
+                <div class="d-flex flex-column flex-lg-row justify-content-between align-items-center border p-3 my-2 ml-5 rounded">
+                  <div class="list-bounty-item_content my-auto">
+                    <div class="d-flex">
+                      <img :src="bounty.avatar_url" alt="Avatar" width="40" height="40" class="flex-shrink-0 mr-2 rounded-circle">
+                      <div class="d-flex flex-column w-100 ml-md-3">
+                        <div class="">
+                          <a :href="bounty.url" data-toggle="tooltip" title="View profile" class="text-dark">[[ bounty.title ]]</a>
+                          <span v-if="bounty.event" class="hackathon-alt">[[ bounty.event.name ]]</span>
+                        </div>
+                        <div class="d-flex flex-column flex-md-row justify-content-between font-smaller-2">
+                            <template v-if="bounty.project_type">
+                              <span class="my-1">[[ bounty.project_type ]]</span> <span class="d-md-block d-none mx-2 my-auto">&bull;</span>
+                            </template>
+                            <template v-if="bounty.expires_date">
+                              <time :datetime="[[ bounty.expires_date ]]" class="my-1" :title="[[ bounty.expires_date ]]">Expires [[ bounty.expires_date | moment ]]</time> <span class="d-md-block d-none mx-2 my-auto">&bull;</span>
+                            </template>
+                            <span class="my-1">[[bounty.value_in_token | humanizeEth ]] [[ bounty.token_name ]] ([[ bounty.value_in_usdt ]] USD)</span>
+                            <a :href="bounty.url" title="View bounty details" class="mx-md-2 my-1"><i class="fas fa-eye"></i> View Issue Details</a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div>
+                    <a :href="bounty.url" title="View bounty details" class="btn btn-sm btn-gc-blue">View Details</a>
+                  </div>
+                </div>
+              </li>
+              <li class="text-center my-5" :class="{'d-none': (isLoading.matchingBounties || matchingBounties && matchingBounties.length > 0) }">
+                <h4 class="h5 font-weight-semibold my-3">
+                  No matching bounties at the moment.
+                </h4>
+                <p class="text-black-70">Check back regularly for the latest matching bounties or <br> check out the <b>Issue Explorer</b> for more bounties!</p>
+              </li>
+              <li class="text-center">
+                <a :href="`/explorer?network=${network}&applicants=ALL&keywords=${skills}&order_by=-web3_created`" class="btn btn-outline-gc-blue w-75 font-smaller-2 gc-letter-spacing" target="_blank">VIEW MORE BOUNTIES</a>
+              </li>
+            </ul>
+            <loading-screen v-if="isLoading.matchingBounties"></loading-screen>
+          </div>
+
+
+        </div>
+      </div>
+    </div>
+  </section>
   <section class="container">
     <div class="row">
       <div class="col-12">

app/dashboard/templates/board/index.html

@@ -49,6 +49,11 @@
     {% include 'shared/footer.html' %}
     {% include 'shared/analytics.html' %}
     {% include 'shared/footer_scripts.html' with slim=1 %}
+    {% if keywords %}
+      <script>
+        document.skills = {{keywords | safe}}
+      </script>
+    {% endif %}
     <script src="{% static "v2/js/vue-components.js" %}"></script>
     <script src="{% static "v2/js/board.js" %}"></script>
     <script>

app/dashboard/views.py

@@ -3095,13 +3095,17 @@ def get_hackathons(request):
 def board(request):
     """Handle the board view."""
 
+    user = request.user if request.user.is_authenticated else None
+    keywords = user.profile.keywords
+
     context = {
         'is_outside': True,
         'active': 'dashboard',
         'title': 'Dashboard',
         'card_title': _('Dashboard'),
         'card_desc': _('Manage all your activity.'),
         'avatar_url': static('v2/images/helmet.png'),
+        'keywords': keywords,
     }
     return TemplateResponse(request, 'board/index.html', context)