Merge pull request #4311 from gitcoinco/fe-filters-users

Fe filters users

app/assets/v2/css/forms/select.css

@@ -116,6 +116,7 @@ li.select2-tag__choice {
 .form__select2.select2-container--default.select2-selection--single {
   border-radius: 2px !important;
   border: 1px solid #D3D3D3 !important;
+  min-height: 2.5rem !important;
 }
 
 .g-multiselect .select2-container--default .select2-selection--multiple .select2-selection__clear {
@@ -172,3 +173,10 @@ li.select2-tag__choice {
 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
   color: #ffffff;
 }
+
+
+.select2-container--default
+.select2-selection--multiple
+.select2-selection__rendered {
+  line-height: 2.4em !important;
+}

app/assets/v2/css/users.css

@@ -66,3 +66,181 @@
   color: white;
   background-color: var(--gc-blue-hover);
 }
+
+.sidebar-container {
+  display: flex;
+}
+
+
+@media (min-width: 992px) {
+  .sidebar {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    overflow: auto;
+    height: 100vh;
+    max-width: 300px;
+    will-change: margin-left;
+    background-color: #F2F6F9;
+  }
+}
+
+.select2 {
+  width: 100% !important;
+}
+
+.fade-enter-active, .fade-leave-active {
+  /* transition: opacity .5s; */
+  transition: all 0.2s ease-in-out;
+
+}
+
+.fade-enter, .fade-leave-to {
+  margin-left: -300px;
+}
+
+.fade-enter-to {
+  margin-left: 0%;
+}
+
+.search-section {
+  background: #0C023B;
+}
+
+.btn-search {
+  font-size: 1.3em;
+  background: white;
+  border-left: 0;
+  color: #3E00FF;
+}
+
+/* loading */
+.rhombus-spinner {
+  height: 65px;
+  width: 65px;
+  position: relative;
+  transform: rotate(45deg);
+  margin: auto;
+  color: #25E899;
+}
+
+.rhombus-spinner .rhombus {
+  height: calc(65px / 7.5);
+  width: calc(65px / 7.5);
+  animation-duration: 2000ms;
+  top: calc(65px / 2.3077);
+  left: calc(65px / 2.3077);
+  border-radius: 30px;
+  background-color: currentColor;
+  position: absolute;
+  animation-iteration-count: infinite;
+}
+
+.rhombus-spinner .rhombus:nth-child(2n+0) {
+  margin-right: 0;
+}
+
+.rhombus-spinner .rhombus.child-1 {
+  animation-name: rhombus-spinner-animation-child-1;
+  animation-delay: calc(100ms * 1);
+}
+
+.rhombus-spinner .rhombus.child-2 {
+  animation-name: rhombus-spinner-animation-child-2;
+  animation-delay: calc(100ms * 2);
+}
+
+.rhombus-spinner .rhombus.child-3 {
+  animation-name: rhombus-spinner-animation-child-3;
+  animation-delay: calc(100ms * 3);
+}
+
+.rhombus-spinner .rhombus.child-4 {
+  animation-name: rhombus-spinner-animation-child-4;
+  animation-delay: calc(100ms * 4);
+}
+
+.rhombus-spinner .rhombus.child-5 {
+  animation-name: rhombus-spinner-animation-child-5;
+  animation-delay: calc(100ms * 5);
+}
+
+.rhombus-spinner .rhombus.child-6 {
+  animation-name: rhombus-spinner-animation-child-6;
+  animation-delay: calc(100ms * 6);
+}
+
+.rhombus-spinner .rhombus.child-7 {
+  animation-name: rhombus-spinner-animation-child-7;
+  animation-delay: calc(100ms * 7);
+}
+
+.rhombus-spinner .rhombus.child-8 {
+  animation-name: rhombus-spinner-animation-child-8;
+  animation-delay: calc(100ms * 8);
+}
+
+.rhombus-spinner .rhombus.big {
+  height: calc(65px / 3);
+  width: calc(65px / 3);
+  top: calc(65px / 3);
+  left: calc(65px / 3);
+  background-color: #3E00FF;
+  animation: rhombus-spinner-animation-child-big 2s infinite;
+  animation-duration: 2000ms;
+  animation-delay: 0.5s;
+}
+
+@keyframes rhombus-spinner-animation-child-1 {
+  50% {
+    transform: translate(-325%, -325%);
+  }
+}
+
+@keyframes rhombus-spinner-animation-child-2 {
+  50% {
+    transform: translate(0, -325%);
+  }
+}
+
+@keyframes rhombus-spinner-animation-child-3 {
+  50% {
+    transform: translate(325%, -325%);
+  }
+}
+
+@keyframes rhombus-spinner-animation-child-4 {
+  50% {
+    transform: translate(325%, 0);
+  }
+}
+
+@keyframes rhombus-spinner-animation-child-5 {
+  50% {
+    transform: translate(325%, 325%);
+  }
+}
+
+@keyframes rhombus-spinner-animation-child-6 {
+  50% {
+    transform: translate(0, 325%);
+  }
+}
+
+@keyframes rhombus-spinner-animation-child-7 {
+  50% {
+    transform: translate(-325%, 325%);
+  }
+}
+
+@keyframes rhombus-spinner-animation-child-8 {
+  50% {
+    transform: translate(-325%, 0);
+  }
+}
+
+@keyframes rhombus-spinner-animation-child-big {
+  50% {
+    transform: scale(0.5);
+  }
+}

app/assets/v2/js/users.js

@@ -10,6 +10,9 @@ Vue.mixin({
     fetchUsers: function(newPage) {
       let vm = this;
 
+      vm.isLoading = true;
+      vm.noResults = false;
+
       if (newPage) {
         vm.usersPage = newPage;
       }
@@ -20,6 +23,7 @@ Vue.mixin({
       } else {
         delete vm.params['search'];
       }
+
       let searchParams = new URLSearchParams(vm.params);
 
       let apiUrlUsers = `/api/v0.1/users_fetch/?${searchParams.toString()}`;
@@ -42,6 +46,13 @@ Vue.mixin({
         } else {
           vm.usersPage = 1;
         }
+
+        if (vm.users.length) {
+          vm.noResults = false;
+        } else {
+          vm.noResults = true;
+        }
+        vm.isLoading = false;
       });
     },
     searchUsers: function() {
@@ -140,10 +151,20 @@ if (document.getElementById('gc-users-directory')) {
       funderBounties: [],
       bountySelected: null,
       userSelected: [],
-      showModal: false
+      showModal: false,
+      showFilters: true,
+      skills: document.keywords,
+      selectedSkills: [],
+      noResults: false,
+      isLoading: true
     },
     mounted() {
       this.fetchUsers();
+      this.$watch('params', function(newVal, oldVal) {
+        this.searchUsers();
+      }, {
+        deep: true
+      });
     },
     created() {
       this.fetchBounties();
@@ -161,23 +182,3 @@ if (document.getElementById('gc-users-directory')) {
   });
 }
 
-Vue.component('modal', {
-  props: [ 'user', 'size' ],
-  template: '#modal-template',
-  data() {
-    return {
-      jqEl: null
-    };
-  },
-  mounted() {
-    let vm = this;
-
-    vm.jqEl = $(this.$el);
-  },
-  methods: {
-    closeModal() {
-      this.jqEl.bootstrapModal('hide');
-    }
-  }
-
-});

app/assets/v2/js/vue-components.js

@@ -0,0 +1,63 @@
+Vue.component('modal', {
+  props: [ 'user', 'size' ],
+  template: '#modal-template',
+  data() {
+    return {
+      jqEl: null
+    };
+  },
+  mounted() {
+    let vm = this;
+
+    vm.jqEl = $(this.$el);
+  },
+  methods: {
+    closeModal() {
+      this.jqEl.bootstrapModal('hide');
+    }
+  }
+
+});
+
+
+Vue.component('select2', {
+  props: [ 'options', 'value' ],
+  template: '#select2-template',
+  mounted: function() {
+    var vm = this;
+
+    $(this.$el).select2({ data: this.options })
+      .val(this.value)
+      .trigger('change')
+      .on('change', function() {
+        vm.$emit('input', this.value);
+      });
+  },
+  watch: {
+    value: function(value) {
+      // update value
+      $(this.$el).val(value).trigger('change');
+    },
+    options: function(options) {
+      // update options
+      $(this.$el).empty().select2({ data: options });
+    }
+  },
+  destroyed: function() {
+    $(this.$el).off().select2('destroy');
+  }
+});
+
+Vue.component('loading-screen', {
+  template: `<div class="rhombus-spinner">
+              <div class="rhombus child-1"></div>
+              <div class="rhombus child-2"></div>
+              <div class="rhombus child-3"></div>
+              <div class="rhombus child-4"></div>
+              <div class="rhombus child-5"></div>
+              <div class="rhombus child-6"></div>
+              <div class="rhombus child-7"></div>
+              <div class="rhombus child-8"></div>
+              <div class="rhombus big"></div>
+            </div>`
+});