From c2e20e5e9e8c003db21b705cd6451eddb86e059c Mon Sep 17 00:00:00 2001
From: Tom Schmelzer <30869493+schmelto@users.noreply.github.com>
Date: Tue, 31 May 2022 15:49:17 +0200
Subject: [PATCH] feat: Add filter option (#209)

* feat: initial setup

* style format

* feat: add filter option

* style: format

* fix: pr issue
---
 css/blog.css      | 18 ----------
 css/issues.css    |  3 ++
 js/issues.js      | 90 ++++++++++++++++++++++++++++++++++++++++-------
 pages/issues.html |  3 ++
 4 files changed, 83 insertions(+), 31 deletions(-)
 delete mode 100644 css/blog.css
 create mode 100644 css/issues.css

diff --git a/css/blog.css b/css/blog.css
deleted file mode 100644
index b355c71..0000000
--- a/css/blog.css
+++ /dev/null
@@ -1,18 +0,0 @@
-summary:focus {
-  outline: none;
-}
-
-.h3_markdown {
-  font-size: 1rem;
-  padding-top: 1rem;
-}
-
-.h2_markdown {
-  font-size: 1.2rem;
-  padding-top: 1rem;
-}
-
-.h1_markdown {
-  font-size: 1.5rem;
-  padding-top: 1rem;
-}
diff --git a/css/issues.css b/css/issues.css
new file mode 100644
index 0000000..930856e
--- /dev/null
+++ b/css/issues.css
@@ -0,0 +1,3 @@
+.active {
+  border: 1px solid rgba(81, 203, 238, 1);
+}
diff --git a/js/issues.js b/js/issues.js
index 82396d6..556cfb0 100644
--- a/js/issues.js
+++ b/js/issues.js
@@ -7,25 +7,89 @@ let githubprojects = [
   'schmelto/abap',
 ];
 
+var githubissues = document.getElementById('githubissues');
+var githublabels = document.getElementById('githublabels');
+
+// get issues as promis
+function getIssues(project) {
+  return new Promise((resolve, reject) => {
+    fetch(`https://api.github.com/repos/${project}/issues`)
+      .then((response) => response.json())
+      .then((issues) => {
+        resolve(issues);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+}
+
+let all_issues = [];
+let all_labels = [];
+
 githubprojects.forEach((project) => {
-  getprojectissues(project);
+  getIssues(project).then((issues) => {
+    // push all issues to array
+    all_issues.push(...issues);
+    // get all labels
+    issues.forEach((issue) => {
+      all_labels.push(...issue.labels);
+    });
+  });
 });
 
-var githubissues = document.getElementById('githubissues');
+// await promis and create html
+Promise.all(githubprojects.map(getIssues)).then(() => {
+  // create labels
+  all_labels.forEach((label) => {
+    // only if not already in list
+    if (
+      !githublabels.querySelector(
+        `span[style="background-color: #${label.color}; color: ${invertColor(
+          label.color,
+          true
+        )}; margin-right: 5px"]`
+      )
+    ) {
+      githublabels.innerHTML += `<span class="badge" style="background-color: #${
+        label.color
+      }; color: ${invertColor(label.color, true)}; margin-right: 5px">${
+        label.name
+      }</span>`;
+    }
+  });
+
+  all_issues.forEach((issue) => {
+    if (!issue.pull_request) {
+      githubissues.innerHTML += createIssueCard(issue);
+    }
+  });
 
-function getprojectissues(project) {
-  fetch(`https://api.github.com/repos/${project}/issues`)
-    .then((response) => {
-      return response.json();
-    })
-    .then((issues) => {
-      issues.forEach((issue) => {
-        if (!issue.pull_request) {
-          githubissues.innerHTML += createIssueCard(issue);
-        }
+  // when click on label show only issues with that label and hightlight label
+  githublabels.addEventListener('click', (e) => {
+    let label = e.target.innerText;
+    let label_issues = all_issues.filter((issue) => {
+      return issue.labels.some((label_issue) => {
+        return label_issue.name === label;
       });
     });
-}
+    githubissues.innerHTML = '';
+    // if no label is selected show all issues
+    if (label_issues.length === 0) {
+      label_issues = all_issues;
+    }
+
+    label_issues.forEach((issue) => {
+      if (!issue.pull_request) {
+        githubissues.innerHTML += createIssueCard(issue);
+      }
+    });
+    githublabels.querySelectorAll('span').forEach((label) => {
+      label.classList.remove('active');
+    });
+    e.target.classList.add('active');
+  });
+});
 
 function createIssueCard(issue) {
   let labelstring = addLabels(issue.labels);
diff --git a/pages/issues.html b/pages/issues.html
index a62137c..eb4880e 100644
--- a/pages/issues.html
+++ b/pages/issues.html
@@ -11,6 +11,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
 	<link rel="stylesheet" href="../css/styles.css">
+	<link rel="stylesheet" href="../css/issues.css">
 	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 
@@ -32,6 +33,8 @@ <h3 class="text-center">List of open issues from some of my repositories.</h3>
         <h4 class="text-center">Click on the issue to see the full description.</h4>
       </div>
 
+			<div class="text-center" id="githublabels" style="border: none !important"></div>
+			<br><br><br>
       <div id="githubissues" class="flex-col-2"></div>
   </div>