GITC-505: Grants explorer search improvements (#9627)

* update top-filter to include search term * wip - delay search when typing * updated template and component for dealying search * integrate master branch * updates from linter fixes * updating loading image size based on design feedback * update with linter fix * update assertion to use default value as expected amount * integrating feedback from pr review Co-authored-by: Kevin Solorio <kevin.solorio@hey.com> Co-authored-by: Aditya Anand M C <aditya.anandmc@gmail.com>
gitcoinco · Nov 3, 2021 · 8f40afc · 8f40afc
1 parent c646a37
commit 8f40afc
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 26 deletions.
diff --git a/app/app/urls.py b/app/app/urls.py
@@ -366,15 +366,13 @@
         name='hackathon_project_page'
     ),
     path('modal/save_project/', dashboard.views.hackathon_save_project, name='hackathon_save_project'),
-
     url(r'^hackathon/<str:hackathon>/?$/?', dashboard.views.hackathon, name='hackathon'),
     url(r'^hackathon/<str:hackathon>/<str:panel>/?$/?', dashboard.views.hackathon, name='hackathon'),
 
     # list all hackathons
     re_path(r'^hackathon-list/?$', dashboard.views.get_hackathons, name='get_hackathons'),
     re_path(r'^hackathon/?$', dashboard.views.get_hackathons, name='get_hackathons'),
     re_path(r'^hackathons/?$', dashboard.views.get_hackathons, name='get_hackathons'),
-
     url(r'^register_hackathon/', dashboard.views.hackathon_registration, name='hackathon_registration'),
     path('api/v0.1/hackathon/<str:hackathon>/save/', dashboard.views.save_hackathon, name='save_hackathon'),
     path('api/v1/hackathon/<str:hackathon>/prizes', dashboard.views.hackathon_prizes, name='hackathon_prizes_api'),
@@ -737,7 +735,11 @@
         name='no_applicant_reminder'
     ),
     re_path(r'^_administration/email/match_distribution$', retail.emails.match_distribution, name='match_distribution'),
-    re_path(r'^_administration/email/clr_match_claim$', retail.emails.grant_match_distribution_final_txn, name='clr_match_claim'),
+    re_path(
+        r'^_administration/email/clr_match_claim$',
+        retail.emails.grant_match_distribution_final_txn,
+        name='clr_match_claim'
+    ),
 
     # docs
     re_path(r'^_administration/docs/', include('django.contrib.admindocs.urls')),
@@ -785,7 +787,11 @@
 
     # for robots
     url(r'^robots.txt/?', retail.views.robotstxt, name='robotstxt'),
-    path('sitemap.xml', cache_page(604800)(sitemap_index), {'sitemaps': sitemaps}, name='django.contrib.sitemaps.views.index'),
+    path(
+        'sitemap.xml',
+        cache_page(604800)(sitemap_index), {'sitemaps': sitemaps},
+        name='django.contrib.sitemaps.views.index'
+    ),
     path(
         'sitemap-<section>.xml',
         cache_page(604800)(sitemap), {'sitemaps': sitemaps},

diff --git a/app/assets/v2/js/grants/index.js b/app/assets/v2/js/grants/index.js
@@ -127,7 +127,8 @@ if (document.getElementById('grants-showcase')) {
       fetchedPages: [],
       handle: document.contxt.github_handle,
       editingCollection: false,
-      createCollectionRedirect: false
+      createCollectionRedirect: false,
+      activeTimeout: null
     },
     methods: {
       toggleStyle: function(style) {
@@ -159,7 +160,6 @@ if (document.getElementById('grants-showcase')) {
 
         vm.clrData = clrJson;
       },
-
       changeBanner: function() {
         this.regex_style = document.all_routing_policies &&
           document.all_routing_policies.find(policy => {
@@ -187,7 +187,16 @@ if (document.getElementById('grants-showcase')) {
           vm.updateUrlParams();
         }
       },
-      filterCollection: async function(collection_id) {
+      delayedChangeQuery: function() {
+        if (this.activeTimeout) {
+          window.clearTimeout(this.activeTimeout);
+        }
+        this.activeTimeout = setTimeout(() => {
+          this.changeQuery({page: 1});
+          this.activeTimeout = null;
+        }, 500);
+      },
+      filterCollection: async function(collectionId) {
         let vm = this;
 
         // clear previous state
@@ -341,7 +350,6 @@ if (document.getElementById('grants-showcase')) {
             list: CartData.loadCart()
           }
         });
-
         vm.lock = false;
 
         return vm.grants;

diff --git a/app/dashboard/tests/test_dashboard_models.py b/app/dashboard/tests/test_dashboard_models.py
@@ -209,21 +209,6 @@ def test_can_submit_standard_bounty_after_expiration_date_if_deadline_extended()
         )
         assert bounty.can_submit_after_expiration_date is True
 
-    # @staticmethod
-    # def test_title_or_desc():
-    #     bounty = Bounty.objects.create(
-    #         title='TitleTest',
-    #         idx_status=0,
-    #         is_open=False,
-    #         web3_created=datetime(2008, 10, 31, tzinfo=pytz.UTC),
-    #         expires_date=datetime(2008, 11, 30, tzinfo=pytz.UTC),
-    #         github_url='https://github.com/gitcoinco/web/issues/1',
-    #         raw_data={}
-    #     )
-    #     assert bounty.title_or_desc == "TitleTest"
-    #     bounty.title = None
-    #     assert bounty.title_or_desc == "HTTP API Documentation"
-
     @staticmethod
     def test_github_issue_number():
         bounty = Bounty.objects.create(

diff --git a/app/grants/templates/grants/explorer.html b/app/grants/templates/grants/explorer.html
@@ -226,7 +226,7 @@
                     v-model="params.keyword"
                     @focus="searchVisible=true"
                     @blur="searchVisible=false"
-                    @input="changeQuery({page: 1})"
+                    @input="delayedChangeQuery()"
                     @keyup.enter="changeQuery({page: 1})"/>
                   <div class="navCart dropdown gc-cart" v-if="!searchVisible && sticky_active">
                     <a href="" class="gc-cart__icon d-block" role="button" @click="$refs.navCart.init()"
@@ -323,7 +323,13 @@
                   </template>
                 </div>
 
-                <div class="infinite-container row"  v-if="grants && grants.length">
+                <!-- Loading State -->
+                <div v-if="lock" class="d-flex flex-column justify-content-center">
+                  <img class="d-block w-25 mx-auto" src="/static/v2/images/loading_v2.gif">
+                </div>
+
+                <!-- Grant Cards -->
+                <div v-else-if="grants && grants.length" class="infinite-container row" >
                   <div :class="`col-12 ${view == 'grid' ? 'col-md-6 col-xl-4' : ''} mb-4 infinite-item grant-card`" v-for="(grant, id) in grants">
                     <a class="text-decoration-none" :href="grant.details_url">
                       {% include 'grants/components/card.html' %}
@@ -332,7 +338,7 @@
                 </div>
 
                 <!-- No grants state -->
-                <div class="col-12 mb-3 text-muted font-subheader" v-else>
+                <div v-else class="col-12 mb-3 text-muted font-subheader">
                   <p>
                     <span class="font-weight-bold">0</span> grants
                     <template v-if="params.keyword">- ‘[[params.keyword]]’</template>