Add view to search github projects

backend/api/src/api/projects/handlers/search.rs

@@ -20,7 +20,7 @@ pub async fn get_search<S: ProjectsContract>(
  service: Data<S>,
  params: Query<SearchGithubProjectParams>,
 ) -> Result<HttpResponse> {
- let params = params.into_inner().into();
+ let params = params.into_inner();
  let value = service.search(params).await?;
  Ok(HttpResponse::Ok().json(value))
 }

frontend/src/components/NavBar.vue

@@ -18,6 +18,10 @@ const items = ref([
  {
  label: 'Repositories',
  route: "/repository"
+ },
+ {
+ label: "Projects",
+ route: "/projects"
  }
 ]);
 

frontend/src/main.ts

@@ -16,6 +16,7 @@ import TabMenu from "primevue/tabmenu";
 import Chart from "primevue/chart";
 import Dropdown from "primevue/dropdown";
 import ProgressSpinner from "primevue/progressspinner";
+import MultiSelect from "primevue/multiselect";
 
 const app = createApp(App);
 const pinia = createPinia();
@@ -31,5 +32,6 @@ app.component("TabMenu", TabMenu);
 app.component("Chart", Chart);
 app.component("Dropdown", Dropdown);
 app.component("ProgressSpinner", ProgressSpinner);
+app.component("MultiSelect", MultiSelect);
 
 app.mount("#app");

frontend/src/router/index.ts

@@ -4,6 +4,7 @@ import CryptoView from "@/views/CryptoView.vue";
 import RepositoryView from "@/views/RepositoryView.vue";
 import StatisticsView from "@/views/StatisticsView.vue";
 import SearchRepositoriesView from "@/views/SearchRepositoriesView.vue";
+import ProjectsView from "@/views/ProjectsView.vue";
 
 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
@@ -32,6 +33,11 @@ const router = createRouter({
  path: "/repository",
  name: "repositories",
  component: SearchRepositoriesView
+ },
+ {
+ path: "/projects",
+ name: "projects",
+ component: ProjectsView
  }
  ]
 });

frontend/src/store/index.ts

@@ -7,6 +7,7 @@ import type { Issue } from "@/types/issues";
 import type { RepositoryView } from "@/types/repositoryView";
 import type { LanguageCount } from "@/types/languageCount";
 import type { SearchRepository, SearchRepositoryParams } from "@/types/searchRepository";
+import type { SearchGithubProject, SearchGithubProjectParams } from "@/types/searchGithubProject";
 
 export const useCryptocurrenciesStore = defineStore("cryptocurrencies", {
  actions: {
@@ -53,6 +54,19 @@ export const useCryptocurrenciesStore = defineStore("cryptocurrencies", {
  params: params
  });
  return response.data;
+ },
+
+ async searchProjects(params: SearchGithubProjectParams): Promise<Pagination<SearchGithubProject>> {
+ const response = await client.get("/api/v1/projects", {
+ params: {
+ languagesUsed: params.languagesUsed?.reduce((a,b) => `${a},${b}`),
+ page: params.page,
+ perPage: params.perPage,
+ order: params.order,
+ orderBy: params.orderBy
+ } as SearchGithubProjectParams,
+ });
+ return response.data;
  }
  },
 });

frontend/src/types/searchGithubProject.ts

@@ -0,0 +1,15 @@
+export interface SearchGithubProject {
+ id: string;
+ name: string;
+ repositories: number;
+ languagesUsed: string[];
+ issues: number;
+}
+
+export interface SearchGithubProjectParams {
+ page?: number;
+ perPage?: number;
+ order?: string;
+ orderBy?: string;
+ languagesUsed?: string[];
+}

frontend/src/views/ProjectsView.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { useCryptocurrenciesStore } from '@/store';
+import type { SearchGithubProject, SearchGithubProjectParams } from '@/types/searchGithubProject';
+import { onMounted, ref, watch } from 'vue';
+
+
+const store = useCryptocurrenciesStore();
+const perPage = ref(10);
+const page = ref(0);
+const totalRecords = ref(0);
+const languages = ref<any[] | undefined>(undefined);
+
+const allLanguages = ref<any[]>([]);
+
+const projects = ref<SearchGithubProject[]>([]);
+
+function search() {
+ const params = {
+ page: page.value,
+ perPage: perPage.value,
+ languagesUsed: undefined
+ } as SearchGithubProjectParams;
+
+ if (languages.value) {
+ params.languagesUsed = languages.value.map(language => language.name);
+ }
+
+ store.searchProjects(params).then(response => {
+ projects.value = response.data;
+ totalRecords.value = response.totalItems;
+ })
+}
+
+function changePage(pageState: { page: number }) {
+ page.value = pageState.page;
+}
+
+onMounted(() => {
+ store.getLanguageCounts().then(languagesResponse => {
+ allLanguages.value = languagesResponse.map((language) => {
+ return { name: language.language }
+ });
+ });
+
+ search()
+});
+
+
+watch([page, perPage, languages], search);
+
+</script>
+<template>
+ <div>
+ <h1>
+ Projects
+ </h1>
+ <div>
+ <MultiSelect v-model="languages" :options="allLanguages" optionLabel="name" placeholder="Select Languages"
+ filter :showToggleAll="false" display="chip" />
+ </div>
+ <br />
+ <div v-if="projects.length">
+ <DataTable :value="projects">
+ <Column field="name" header="Name"></Column>
+ <Column field="languagesUsed" header="Languages Used"></Column>
+ <Column field="repositories" header="Repositories"></Column>
+ <Column field="issues" header="Total Issues"></Column>
+ </DataTable>
+ <Paginator :rows="perPage" :totalRecords="totalRecords" :page="page" @page="changePage"></Paginator>
+ </div>
+ </div>
+</template>

frontend/src/views/SearchRepositoriesView.vue

@@ -68,7 +68,6 @@ watch([perPage, page, archived, fork, language], search);
  </div>
  <br>
  <div v-if="repositories.length">
-
  <DataTable :value="repositories" showGridlines>
  <Column field="repositoryName" header="Name">
  <template #body="slotProps">