add list view for grants and migrate to vue

app/assets/v2/css/grants/card.css

@@ -9,10 +9,22 @@
   margin-top: 1.0625rem;
 }
 
+.grant-item--list {
+  padding-bottom: 10px;
+}
+
+.grant-item--list:hover {
+  background-color: #EFEAFD;
+}
+
 .flip-card__flipper {
   border: 1px solid #D3D3D3;
 }
 
+.grant-item--list .grant-item__content {
+  margin-top: 0.938rem;
+}
+
 .grant-item__title {
   line-height: 24px;
   overflow-y: hidden;
@@ -25,6 +37,11 @@
   color: #454545;
 }
 
+.grant-item--list .grant-item__title {
+  font-size: 1rem;
+  margin-bottom: 2px;
+}
+
 .grant-item__pitch {
   color: #666666;
   height: 3.8rem;
@@ -65,6 +82,12 @@
   margin: 13px;
 }
 
+.grant-item--list .grant-item__img {
+  height: 3.1rem;
+  overflow: hidden;
+  margin: 10px 12px;
+}
+
 .grant-item__owner-image,
 .flip-card__flipper .grant__stakeholders-item {
   height: 35px;
@@ -97,6 +120,11 @@
   color: #0D0764;
 }
 
+.grant-item--list .grant-item__owner-image {
+  height: 20px;
+  width: 20px;
+}
+
 .grant-item__funding-label {
   color: #BBBDBF;
 }
@@ -208,6 +236,34 @@
   color: #040404;
 }
 
+.match__round--inline {
+  color: #069953;
+}
 .clr-prediction .amount {
   margin-top: 7px;
-}
+}
+
+.star-action:hover {
+  color: var(--gc-blue-hover) !important;
+}
+
+@media (max-width: 500px) {
+  .grant-item--list .grant-item__owner {
+    align-items: baseline;
+    display: flex;
+    flex-direction: column;
+  }
+  .grant-item--list .match, .grant-item--list .star-action {
+    margin-top: 5px !important;
+    margin-left: 0 !important;
+  }
+
+  .grant-item--list .match {
+    flex-direction: column;
+  }
+
+  .grant-item--list .grant-action {
+    padding-top: 5px !important;
+    padding-bottom: 5px !important;
+  }
+}

app/assets/v2/css/grants/grant.css

@@ -392,7 +392,7 @@
 }
 
 .grants-hero .title-round{
-  font-size: 24px; 
+  font-size: 24px;
 }
 
 .grants-hero .font-header,
@@ -450,7 +450,7 @@
   background: transparent !important;
 }
 
-#search_form .select2-container {
+#top-filters .select2-container, #search_form .select2-container {
   width: auto !important;
   font-weight: normal;
   text-align: left;
@@ -462,22 +462,22 @@
 
 }
 
-#search_form .select2-network-container {
+#top-filters .select2-network-container, #search_form .select2-network-container {
   width: 5rem !important;
 }
 
-#search_form .network-container .select2-container {
+#top-filters .select2-container, #search_form .network-container .select2-container {
   min-width: 5rem;
 }
 
-#search_form .select2-selection {
+#top-filters .select2-selection, #search_form .select2-selection {
   background: none;
   outline: none;
   border: none !important;
   color: var(--gc-blue);
 }
 
-#search_form .select2-selection span {
+#top-filters .select2-selection span, #search_form .select2-selection span {
   color: #3E00FF;
   font-weight: bold;
 }
@@ -634,10 +634,12 @@ background: linear-gradient(85.75deg, #03008D -17.8%, #000000 139.56%); /* W3C,
     height: 0;
     display: none;
   }
+
   #sidebar_container form#search_form {
     display: inline-block;
     width: 95%;
   }
+}
 
 /* sidebar_search.css */
 

app/assets/v2/js/grants/index.js

@@ -1,3 +1,15 @@
+Vue.component('grant-card', {
+  delimiters: [ '[[', ']]' ],
+  props: [ 'grant', 'cred', 'token', 'view', 'short'],
+  methods: {
+    get_clr_prediction: function(indexA, indexB) {
+      if (this.grant.clr_prediction_curve && this.grant.clr_prediction_curve.length) {
+        return this.grant.clr_prediction_curve[indexA][indexB];
+      }
+    }
+  }
+});
+
 $(document).ready(() => {
   $('#sort_option').select2({
     minimumResultsForSearch: Infinity
@@ -59,6 +71,170 @@ $(document).ready(() => {
 
   });
 
+  if (document.getElementById('grants-showcase')) {
+    Vue.component('grant-sidebar', {
+      name: 'grant-sidebar',
+      props: [ 'filter_grants', 'grant_types', 'type', 'selected_category', 'keyword', 'following', 'set_type' ],
+      data: function() {
+        return {
+          search: this.keyword
+        };
+      },
+      methods: {
+        toggleFollowing: function(state, event) {
+          event.preventDefault;
+          this.filter_grants({following: state});
+        }
+      }
+    });
+
+    var app = new Vue({
+      delimiters: [ '[[', ']]' ],
+      el: '#grants-showcase',
+      components: ['grant-sidebar'],
+      data: {
+        grants: [],
+        page: 1,
+        limit: 6,
+        sort: 'weighted_shuffle',
+        network: 'mainnet',
+        keyword: document.keyword,
+        current_type: document.current_type,
+        following: document.following,
+        state: 'active',
+        category: document.selected_category,
+        credentials: false,
+        grant_types: [],
+        lock: false,
+        view: 'list',
+        shortView: true
+      },
+      methods: {
+        setView: function(mode, event) {
+          event.preventDefault();
+          this.view = mode;
+        },
+        setCurrentType: function(currentType, q) {
+          this.current_type = currentType;
+          if ([ 'about', 'stats', 'activity' ].indexOf(currentType) !== -1) {
+            // window.location = `/grants/${currentType}`;
+          }
+
+          if (this.current_type === 'all') {
+            window.history.pushState('', '', `/grants/?${q || ''}`);
+          } else {
+            window.history.pushState('', '', `/grants/${this.current_type}?${q || ''}`);
+          }
+        },
+        filter_grants: function(filters) {
+          if (filters.type !== null && filters.type !== undefined) {
+            this.current_type = filters.type;
+          }
+          if (filters.category !== null && filters.category !== undefined) {
+            this.category = filters.category;
+          }
+          if (filters.keyword !== null && filters.keyword !== undefined) {
+            this.keyword = filters.keyword;
+          }
+          if (filters.following !== null && filters.following !== undefined) {
+            this.following = filters.following;
+          }
+          if (filters.sort !== null && filters.sort !== undefined) {
+            this.sort = filters.sort;
+          }
+
+          this.page = 1;
+          const query_elements = {};
+
+          if (this.category && this.current_type !== 'all') {
+            query_elements['category'] = this.category;
+          }
+
+          if (this.keyword) {
+            query_elements['keyword'] = this.keyword;
+          }
+
+          if (this.following) {
+            query_elements['following'] = this.following;
+          }
+          if (this.sort !== 'weighted_shuffle') {
+            query_elements['sort'] = this.sort;
+          }
+          const q = $.param(query_elements);
+
+          this.setCurrentType(this.current_type, q);
+          this.fetchGrants(this.page);
+        },
+        fetchGrants: async function(page, append_mode) {
+          if (this.lock)
+            return;
+
+          this.lock = true;
+
+          const base_params = {
+            page: page || this.page,
+            limit: this.limit,
+            sort_option: this.sort,
+            network: this.network,
+            keyword: this.keyword,
+            state: this.state,
+            category: this.category,
+            type: this.current_type
+          };
+
+          if (this.following) {
+            base_params['following'] = this.following;
+          }
+
+          const params = new URLSearchParams(base_params).toString();
+          const response = await fetchData(`/grants/cards_info?${params}`);
+
+          if (append_mode) {
+            this.grants = this.grants.concat(response.grants);
+          } else {
+            this.grants = response.grants;
+          }
+
+          this.credentials = response.credentials;
+          this.grant_types = response.grant_types;
+
+          this.lock = false;
+          return this.grants;
+        },
+        scroll: async function(event) {
+          let vm = this;
+
+
+          const scrollHeight = $(document).height();
+          const scrollPos = $(window).height() + $(window).scrollTop();
+
+          if (((scrollHeight - 300) >= scrollPos) / scrollHeight == 0) {
+            const grants = await vm.fetchGrants(vm.page + 1, true);
+
+            if (grants && grants.length) {
+              vm.page = vm.page + 1;
+            }
+          }
+        }
+      },
+      mounted() {
+        let vm = this;
+
+        this.fetchGrants(this.page);
+        this.scroll();
+
+        $('#sort_option2').select2({
+          minimumResultsForSearch: Infinity,
+          templateSelection: function(data, container) {
+            // Add custom attributes to the <option> tag for the selected option
+            vm.filter_grants({sort: data.id});
+
+            return data.text;
+          }
+        });
+      }
+    });
+  }
 });
 
 const etherscanUrlConvert = (elem, network) => {
@@ -102,7 +278,7 @@ $('.grants_nav a').on('click', function(event) {
     document.location.href = $(this).attr('href');
     return;
   }
-  
+
   const typeValue = $(this).data('type');
   const categoryValue = $(this).data('category');
   const params = { 'type': typeValue, 'category': categoryValue};
@@ -144,3 +320,29 @@ $('#minimize').on('click', () => {
   });
 });
 
+$(document).on('click', '.star-action', async(e) => {
+  e.preventDefault();
+  const element = (e.target.tagName === 'BUTTON') ? $(e.target) : $(e.target.parentElement);
+  const grantId = element.data('grant');
+  const favorite_url = `/grants/${grantId}/favorite`;
+
+  let response = await fetchData(favorite_url, 'POST');
+
+  if (response.action === 'follow') {
+    element.find('i').addClass('fa');
+    element.find('i').removeClass('far');
+    element.find('span').text('Following');
+    element.removeClass('text-muted');
+  } else {
+    element.find('i').removeClass('fa');
+    element.find('i').addClass('far');
+    element.find('span').text('Follow');
+    element.addClass('text-muted');
+
+    if (window.location.pathname === '/grants/following') {
+      element.closest('.grant-card').hide();
+    }
+  }
+
+  console.log(response);
+});

app/dashboard/models.py

@@ -2437,11 +2437,14 @@ def view_props_for(self, user):
         if self.likes.exists():
             vp.metadata['liked'] = self.likes.filter(profile=user.profile).exists()
             vp.metadata['likes_title'] = "Liked by " + ",".join(self.likes.values_list('profile__handle', flat=True)) + '. '
-        vp.metadata['favorite'] = self.favorite_set.filter(user=user).exists()
+        vp.metadata['favorite'] = self.favorites(user).exists()
         vp.metadata['poll_answered'] = self.has_voted(user)
 
         return vp
 
+    def favorites(self, user):
+        self.favorite_set.filter(user=user, grant=None)
+
     @property
     def tip_count_usd(self):
         network = 'rinkeby' if settings.DEBUG else 'mainnet'