From 6365639667892235aa11471438030bda14da5b0a Mon Sep 17 00:00:00 2001
From: Arkadii Yakovets <arkadii.yakovets@owasp.org>
Date: Fri, 20 Sep 2024 11:39:05 -0700
Subject: [PATCH] Update projects and contribute pages templates

---
 .../commands/owasp_enrich_projects.py         |  2 +-
 .../apps/owasp/templates/search/issue.html    | 36 ++++++++++---------
 .../apps/owasp/templates/search/project.html  | 36 ++++++++++---------
 3 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/backend/apps/owasp/management/commands/owasp_enrich_projects.py b/backend/apps/owasp/management/commands/owasp_enrich_projects.py
index db01c45e3..9d153faeb 100644
--- a/backend/apps/owasp/management/commands/owasp_enrich_projects.py
+++ b/backend/apps/owasp/management/commands/owasp_enrich_projects.py
@@ -42,7 +42,7 @@ def handle(self, *args, **options):
             prefix = f"{idx + offset + 1} of {active_projects_count - offset}"
             print(f"{prefix:<10} {project.owasp_url}")
 
-            open_ai.set_input(get_repository_file_content(project.index_md_raw_url))
+            open_ai.set_input(get_repository_file_content(project.get_index_md_raw_url()))
 
             # Generate summary
             if update_summary:
diff --git a/backend/apps/owasp/templates/search/issue.html b/backend/apps/owasp/templates/search/issue.html
index 11965fcf8..f9decd0b2 100644
--- a/backend/apps/owasp/templates/search/issue.html
+++ b/backend/apps/owasp/templates/search/issue.html
@@ -10,13 +10,13 @@
             <div class="row mb-4">
                 <div class="col-lg-6 mx-auto">
                     <div class="input-group">
-                        <input v-model="search"
+                        <input v-model="searchQuery"
                                type="text"
                                @input="handleInput"
                                class="form-control"
                                placeholder="Search for a project to contribute to...">
                         <button class="btn btn-outline-secondary"
-                                @click="search = ''"
+                                @click="searchQuery = ''"
                                 type="button"
                                 id="button-addon2">
                             <i class="fa-solid fa-xmark"></i>
@@ -99,9 +99,9 @@ <h6>
                                  data-bs-toggle="tooltip"
                                  data-bs-placement="bottom"
                                  title="Click to search by"
-                                 @click="clickSearch(lang)"
+                                 @click="clickSearch(language)"
                                  class="badge bg-secondary mx-1 mt-2"
-                                 v-for="lang in issue.idx_repository_language">${lang}</div>
+                                 v-for="language in issue.idx_repository_languages">${language}</div>
                         </div>
                         <div id="idx_topics">
                             <div>
@@ -164,13 +164,13 @@ <h5>How to tackle it</h5>
                 return {
                     issues: [],
                     selectedIssue: {},
-                    search: '',
-                    isManual: true,
+                    searchQuery: '',
+                    isManualSearch: false,
                 };
             },
             watch: {
-                search() {
-                    if (this.isManual) {
+                searchQuery() {
+                    if (this.isManualSearch) {
                         this.handleInput();
                     } else {
                         this.getIssues();
@@ -179,7 +179,7 @@ <h5>How to tackle it</h5>
             },
             methods: {
                 async getIssues() {
-                    const response = await fetch(`/api/v1/owasp/search/issue?q=${this.search}`)
+                    const response = await fetch(`/api/v1/owasp/search/issue?q=${this.searchQuery}`)
                         .then(res => res.json())
                         .then(json => {
                             json.forEach(issue => {
@@ -189,36 +189,38 @@ <h5>How to tackle it</h5>
                                 issue.idx_created_at = dayjs.unix(issue.idx_created_at || '').fromNow(true);
                                 issue.idx_updated_at = dayjs.unix(issue.idx_updated_at || '').fromNow(true);
                                 issue.idx_labels = issue.idx_labels.length ? issue.idx_labels.slice(0, 10) : [];
-                                issue.idx_repository_language = issue.idx_repository_languages.length ? issue.idx_repository_languages.slice(0, 10) : [];
+                                issue.idx_repository_languages = issue.idx_repository_languages.length ? issue.idx_repository_languages.slice(0, 10) : [];
                             });
                             this.issues = json;
                         })
-                        .catch((err) => console.error("There was an error! ", err));
+                        .catch(err => console.error("There was an error! ", err));
                 },
                 showIssueDetails(issue) {
                     this.selectedIssue = issue;
                 },
                 handleInput(event) {
+                    this.isManualSearch = true;
                     clearTimeout(this.timeout);
                     this.timeout = setTimeout(this.getIssues, 1000);
                 },
-                clickSearch(search) {
-                    this.isManual = false;
-                    this.search = search;
+                clickSearch(searchQuery) {
+                    this.isManualSearch = false;
+                    this.searchQuery = searchQuery;
                     document.body.scrollTop = 0;
                     document.documentElement.scrollTop = 0;
                 }
             },
             mounted() {
                 dayjs.extend(dayjs_plugin_relativeTime);
-                this.getIssues();
+
                 const url = new URL(window.location.href);
                 const params = new URLSearchParams(url.search);
                 const searchQuery = params.get('q');
                 if (searchQuery) {
-                    this.isManual = false;
-                    this.search = searchQuery;
+                    this.isManualSearch = false;
+                    this.searchQuery = searchQuery;
                 }
+                this.getIssues();
             }
         }).mount('#app');
     </script>
diff --git a/backend/apps/owasp/templates/search/project.html b/backend/apps/owasp/templates/search/project.html
index 320bbacc5..c97f6196c 100644
--- a/backend/apps/owasp/templates/search/project.html
+++ b/backend/apps/owasp/templates/search/project.html
@@ -10,13 +10,13 @@
             <div class="row mb-4">
                 <div class="col-lg-6 mx-auto">
                     <div class="input-group">
-                        <input v-model="search"
+                        <input v-model="searchQuery"
                                type="text"
                                @input="handleInput"
                                class="form-control"
                                placeholder="Search for a project to contribute to...">
                         <button class="btn btn-outline-secondary"
-                                @click="search = ''"
+                                @click="searchQuery = ''"
                                 type="button"
                                 id="button-addon2">
                             <i class="fa-solid fa-xmark"></i>
@@ -128,8 +128,8 @@ <h4 class="px-1">
                 return {
                     projects: [],
                     selectedProject: {},
-                    search: '',
-                    isManual: true,
+                    searchQuery: '',
+                    isManualSearch: true,
                     levelStyleMap: {
                         2: {
                             color: "#53AAE5",
@@ -151,8 +151,8 @@ <h4 class="px-1">
                 };
             },
             watch: {
-                search() {
-                    if (this.isManual) {
+                searchQuery() {
+                    if (this.isManualSearch) {
                         this.handleInput();
                     } else {
                         this.getProjects();
@@ -161,42 +161,44 @@ <h4 class="px-1">
             },
             methods: {
                 async getProjects() {
-                    const response = await fetch(`/api/v1/owasp/search/project?q=${this.search}`)
-                        .then((res) => res.json())
-                        .then((json) => {
+                    const response = await fetch(`/api/v1/owasp/search/project?q=${this.searchQuery}`)
+                        .then(res => res.json())
+                        .then(json => {
                             json.forEach(project => {
-                                project.idx_summary_md = marked.parse(project.idx_summary || '');
                                 project.idx_created_at = dayjs.unix(project.idx_created_at || '').fromNow(true);
+                                project.idx_summary_md = marked.parse(project.idx_summary || '');
                                 project.idx_topics = project.idx_topics ? project.idx_topics.sort(() => Math.random() - 0.5).slice(0, 20) : [];
                             });
                             this.projects = json;
                         })
-                        .catch((err) => console.error("There was an error! ", err));
+                        .catch(err => console.error("There was an error! ", err));
                 },
                 showProjectDetails(project) {
                     this.selectedProject = project;
                 },
                 handleInput(event) {
+                    this.isManualSearch = true;
                     clearTimeout(this.timeout);
                     this.timeout = setTimeout(this.getProjects, 1000);
                 },
-                clickSearch(search) {
-                    this.isManual = false;
-                    this.search = search;
+                clickSearch(searchQuery) {
+                    this.isManualSearch = false;
+                    this.searchQuery = searchQuery;
                     document.body.scrollTop = 0;
                     document.documentElement.scrollTop = 0;
                 }
             },
             mounted() {
                 dayjs.extend(dayjs_plugin_relativeTime);
-                this.getProjects();
+
                 const url = new URL(window.location.href);
                 const params = new URLSearchParams(url.search);
                 const searchQuery = params.get('q');
                 if (searchQuery) {
-                    this.isManual = true;
-                    this.search = searchQuery;
+                    this.isManualSearch = true;
+                    this.searchQuery = searchQuery;
                 }
+                this.getProjects();
             }
         }).mount('#app');
     </script>