feat(orgs): implement the orgs search functionality

Author: thread-koder

components/Organizations.vue

@@ -23,7 +23,10 @@
         />
       </div>
     </div>
-    <PaginationBar @fetch-current-page="fetchCurrentPage" />
+    <div v-if="organizations?.length <= 0" class="flex justify-center py-14">
+      <p class="">Sorry, no organizations were found</p>
+    </div>
+    <PaginationBar v-else @fetch-current-page="fetchCurrentPage" />
   </div>
 </template>
 
@@ -32,7 +35,7 @@ import { mapState } from 'vuex'
 import OrganizationCard from './OrganizationCard.vue'
 import PaginationBar from './PaginationBar.vue'
 export default {
-  name: 'Organizations',
+  name: 'OrganizationsList',
   components: {
     OrganizationCard,
     PaginationBar,
@@ -44,14 +47,24 @@ export default {
     ...mapState({
       sortBy: 'orgs_sortBy',
       currentPage: 'currentPage',
+      orgSearchTerm: 'orgSearchTerm',
     }),
   },
   methods: {
     async fetchCurrentPage(page) {
-      const response = await this.$axios.get(
-        `/v1/orgs?page=${this.currentPage}&sort_by=${this.sortBy}`
-      )
-      this.$store.commit('setOrgs', response.data.orgs)
+      if (this.orgSearchTerm) {
+        const response = await this.$axios.get(
+          `/v1/orgs?page=${this.currentPage}&sort_by=${this.sortBy}&search=${this.orgSearchTerm}`,
+        )
+        this.$store.commit('setOrgs', response.data.orgs)
+        this.$store.commit('setPageCount', response.data.totalPages)
+      } else {
+        const response = await this.$axios.get(
+          `/v1/orgs?page=${this.currentPage}&sort_by=${this.sortBy}`,
+        )
+        this.$store.commit('setOrgs', response.data.orgs)
+        this.$store.commit('setPageCount', response.data.totalPages)
+      }
     },
   },
 }

components/OrganizationsInput.vue

@@ -1,6 +1,12 @@
 <template>
   <div :class="isOpen ? '' : 'hidden overflow-hidden lg:block'">
     <div class="sort-section has-border">
+      <div class="mb-5">
+        <SearchInput
+          placeholder="Search organization name or username"
+          @on-search="onSearch"
+        />
+      </div>
       <h6 class="text-xs font-bold pb-2">Sort by:</h6>
       <div class="flex lg:flex-col">
         <RadioButton
@@ -45,15 +51,48 @@ export default {
   computed: {
     ...mapGetters({
       getCurrentPage: 'getCurrentPage',
+      getOrgsSortBy: 'getOrgsSortBy',
+      getOrgSearchTerm: 'getOrgSearchTerm',
     }),
   },
   methods: {
     async onSortByChanged(sortBy) {
       this.$store.commit('setOrgsSortBy', sortBy)
-      const response = await this.$axios.get(
-        `v1/orgs?sort_by=${sortBy}&page=${this.getCurrentPage}`
-      )
-      this.$store.commit('setOrgs', response.data.orgs)
+
+      if (this.getOrgSearchTerm) {
+        const response = await this.$axios.get(
+          `v1/orgs?sort_by=${sortBy}&page=${this.getCurrentPage}&search=${this.getOrgSearchTerm}`,
+        )
+
+        this.$store.commit('setOrgs', response.data.orgs)
+        this.$store.commit('setPageCount', response.data.totalPages)
+      } else {
+        const response = await this.$axios.get(
+          `v1/orgs?sort_by=${sortBy}&page=${this.getCurrentPage}`,
+        )
+
+        this.$store.commit('setOrgs', response.data.orgs)
+        this.$store.commit('setPageCount', response.data.totalPages)
+      }
+    },
+
+    async onSearch(searchTerm) {
+      this.$store.commit('setCurrentPage', 1)
+      if (searchTerm) {
+        this.$store.commit('setOrgSearchTerm', searchTerm)
+        const response = await this.$axios.get(
+          `v1/orgs?sort_by=${this.getOrgsSortBy}&page=${this.getCurrentPage}&search=${searchTerm}`,
+        )
+        this.$store.commit('setOrgs', response.data.orgs)
+        this.$store.commit('setPageCount', response.data.totalPages)
+      } else {
+        this.$store.commit('setOrgSearchTerm', '')
+        const response = await this.$axios.get(
+          `v1/orgs?sort_by=${this.getOrgsSortBy}&page=${this.getCurrentPage}`,
+        )
+        this.$store.commit('setOrgs', response.data.orgs)
+        this.$store.commit('setPageCount', response.data.totalPages)
+      }
     },
   },
 }

store/index.js

@@ -11,6 +11,7 @@ export const state = () => ({
   period: 'last_30_days',
   chartPeriod: 'last_year',
   show: 'all',
+  orgSearchTerm: '',
 })
 
 export const getters = {
@@ -21,6 +22,7 @@ export const getters = {
   getPeriod: (state) => state.period,
   getChartPeriod: (state) => state.chartPeriod,
   getShow: (state) => state.show,
+  getOrgSearchTerm: (state) => state.orgSearchTerm,
 }
 
 export const mutations = {
@@ -60,4 +62,7 @@ export const mutations = {
   setShow(state, show) {
     state.show = show
   },
+  setOrgSearchTerm(state, searchTerm) {
+    state.orgSearchTerm = searchTerm
+  },
 }