Merge pull request #41 from ICEI-PUC-Minas-PPLCC-TI/projetos

Adicionando pesquisa de projetos
ICEI-PUC-Minas-PPLCC-TI · Dec 2, 2023 · 94bea7f · 94bea7f
2 parents 6815af8 + 66b1bb7
commit 94bea7f
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 5 deletions.
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
@@ -347,16 +347,28 @@ form .input-field label {
 	margin-top: 1em;
 }
 
+input,
+textarea,
+select {
+	outline: none;
+	border: 1px solid var(--grey);
+	border-radius: .5vmax;
+	padding: 0.5em;
+	font-size: 1.3em;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+	border: 2px solid var(--principal-blue);
+}
+
 form .input-field input,
 form .input-field textarea,
 form .input-field select {
 	max-width: 100%;
 	min-width: 100%;
 	margin-top: 0.5em;
-	padding: 0.5em;
-	border: 1px solid var(--grey);
-	border-radius: .5vmax;
-	font-size: 1.3em;
 }
 
 form button {

diff --git a/src/projetos/assets/css/projetos.css b/src/projetos/assets/css/projetos.css
@@ -1,3 +1,44 @@
+/* Search bar */
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin: 2em 0;
+}
+
+.actions .search-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.actions .search-bar>* {
+  margin: 0 .4em .6em;
+}
+
+.actions #add-project {
+  margin: auto .4em;
+}
+
+
+.search-bar>* {
+  font-size: 1em;
+}
+
+.search-bar select {
+  margin-left: 1em;
+  color: var(--black);
+}
+
+.search-bar button.search {
+  width: auto;
+  height: 100%;
+  margin: auto 1em;
+  padding: 0.5em 0.8em;
+	font-size: 1em;
+}
+
+
 .itens-list article p.dificuldade {
   display: inline-block;
 	padding: .3em .6em;

diff --git a/src/projetos/assets/js/app.js b/src/projetos/assets/js/app.js
@@ -181,3 +181,31 @@ async function deleteProject() {
     }
   }
 }
+
+
+// SEARCH
+document.querySelector('.search-bar').addEventListener('input', search, false);
+
+
+function normalizeString(str) {
+  return str.toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu, '');
+}
+
+function search() {
+  const query = normalizeString(document.querySelector('.search-bar #search').value);
+  const difficulty = document.querySelector('#difficulty').value;
+
+  const filteredProjects = projectsList.filter(project => {
+    const { dificuldade, titulo, categoria, conteudo, autor } = project;
+    return normalizeString(dificuldade).includes(difficulty) && (
+      normalizeString(titulo).includes(query) ||
+      normalizeString(categoria).includes(query) ||
+      normalizeString(conteudo).includes(query) ||
+      normalizeString(autor).includes(query)
+    )
+  });
+
+  const textoHTML = filteredProjects.map(generateHTML).join('');
+
+  document.querySelector("#projects").innerHTML = textoHTML;
+}
diff --git a/src/projetos/index.html b/src/projetos/index.html
@@ -46,7 +46,21 @@
 		<section class="projects-list">
       <h2>Projetos</h2>
 
-      <button class="add-item" id="add-project">Novo Projeto</button>
+
+			<section class="actions">
+				<form class="search-bar">
+					<input type="text" id="search" placeholder="Pesquisar...">
+
+					<select name="difficulty" id="difficulty">
+						<option value="">Todos</option>
+						<option value="easy">Fácil</option>
+						<option value="medium">Médio</option>
+						<option value="hard">Difícil</option>
+					</select>
+				</form>
+
+				<button class="add-item" id="add-project">Novo Projeto</button>
+			</section>
 
       <section class="itens-list" id="projects">
 				<article>