From be5b3c1585d3c421063abaec737e8dfe71bb0d89 Mon Sep 17 00:00:00 2001
From: Mimir <mimirz@proton.me>
Date: Fri, 20 Oct 2023 19:42:03 +0200
Subject: [PATCH] Add view to search github projects

---
 .../api/src/api/projects/handlers/search.rs   |  2 +-
 frontend/src/components/NavBar.vue            |  4 ++
 frontend/src/main.ts                          |  2 +
 frontend/src/router/index.ts                  |  6 ++
 frontend/src/store/index.ts                   | 14 ++++
 frontend/src/types/searchGithubProject.ts     | 15 ++++
 frontend/src/views/ProjectsView.vue           | 72 +++++++++++++++++++
 frontend/src/views/SearchRepositoriesView.vue |  1 -
 8 files changed, 114 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/types/searchGithubProject.ts
 create mode 100644 frontend/src/views/ProjectsView.vue

diff --git a/backend/api/src/api/projects/handlers/search.rs b/backend/api/src/api/projects/handlers/search.rs
index 7dbdce4..501b692 100644
--- a/backend/api/src/api/projects/handlers/search.rs
+++ b/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))
 }
diff --git a/frontend/src/components/NavBar.vue b/frontend/src/components/NavBar.vue
index 93dcee2..0cb7a67 100644
--- a/frontend/src/components/NavBar.vue
+++ b/frontend/src/components/NavBar.vue
@@ -18,6 +18,10 @@ const items = ref([
   {
     label: 'Repositories',
     route: "/repository"
+  },
+  {
+    label: "Projects",
+    route: "/projects"
   }
 ]);
 
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 7c6802b..80ec0a8 100644
--- a/frontend/src/main.ts
+++ b/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");
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index dfdea34..bc63001 100644
--- a/frontend/src/router/index.ts
+++ b/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
 		}
 	]
 });
diff --git a/frontend/src/store/index.ts b/frontend/src/store/index.ts
index f0ee637..1d9ab2e 100644
--- a/frontend/src/store/index.ts
+++ b/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;
 		}
 	},
 });
diff --git a/frontend/src/types/searchGithubProject.ts b/frontend/src/types/searchGithubProject.ts
new file mode 100644
index 0000000..37578c7
--- /dev/null
+++ b/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[];
+}
\ No newline at end of file
diff --git a/frontend/src/views/ProjectsView.vue b/frontend/src/views/ProjectsView.vue
new file mode 100644
index 0000000..1b6b8f3
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/views/SearchRepositoriesView.vue b/frontend/src/views/SearchRepositoriesView.vue
index f67f129..b783861 100644
--- a/frontend/src/views/SearchRepositoriesView.vue
+++ b/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">