Refactor/sistema pesquisar

index.js

@@ -10,11 +10,11 @@ import { toast } from './scripts/utils/toast.js';
 
 const spinnerContainer = document.querySelector('.spinnerContainer');
 const questionsContainer = document.querySelector('.container');
-const pgInicioPerguntas = document.querySelector('.pg-inicio-perguntas ');
-const pgAnteriorPerguntas = document.querySelector('.pg-anterior-perguntas ');
-const pgProximoPerguntas = document.querySelector('.pg-proximo-perguntas ');
-const pgUltimoPerguntas = document.querySelector('.pg-ultimo-perguntas ');
-const pgNumerosPerguntas = document.querySelector('.pg-numeros-perguntas ');
+const pgInicioPerguntas = document.querySelector('.pg-inicio-perguntas');
+const pgAnteriorPerguntas = document.querySelector('.pg-anterior-perguntas');
+const pgProximoPerguntas = document.querySelector('.pg-proximo-perguntas');
+const pgUltimoPerguntas = document.querySelector('.pg-ultimo-perguntas');
+const pgNumerosPerguntas = document.querySelector('.pg-numeros-perguntas');
 
 pgNumerosPerguntas.innerHTML = `
   <div class="numero">1</div>
@@ -282,6 +282,13 @@ autoCompleteJS.input.addEventListener('input', async function (event) {
   }
 });
 
+autoCompleteJS.input.addEventListener('blur', async function (event) {
+  if (loading) return;
+  if (!event.target.value) {
+    await renderPerguntas();
+  }
+});
+
 autoCompleteJS.input.addEventListener('results', async function (event) {
   if (loading) return;
   await renderPerguntas({

layouts/header.php

@@ -1,5 +1,44 @@
-<header>
+<header style="position: relative;">
   <div class="header-content">
+    <a href="https://github.com/rrafaelc/projeto-faq-fatec" target="_blank" class="github-corner" aria-label="Ver código no GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true">
+        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
+      </svg>
+      <style>
+        .github-corner:hover .octo-arm {
+          animation: octocat-wave 560ms ease-in-out
+        }
+
+        @keyframes octocat-wave {
+
+          0%,
+          100% {
+            transform: rotate(0)
+          }
+
+          20%,
+          60% {
+            transform: rotate(-25deg)
+          }
+
+          40%,
+          80% {
+            transform: rotate(10deg)
+          }
+        }
+
+        @media (max-width:500px) {
+          .github-corner:hover .octo-arm {
+            animation: none
+          }
+
+          .github-corner .octo-arm {
+            animation: octocat-wave 560ms ease-in-out
+          }
+        }
+      </style>
+    </a>
     <div class="logo">
       <a href=<?= "$dir/" ?>><img src=<?= "$dir/img/fatec_ra_campinas_itapira_cor.svg"  ?> alt="Logo da fatec" /></a>
     </div>

layouts/painel-lateral.php

@@ -12,6 +12,12 @@
     </a>
     <a href=<?= "$dir/sistema/perguntas" ?>>Perguntas</a>
   </div>
+  <div class="pesquisar">
+    <a href=<?= "$dir/sistema/pesquisar" ?> class="icone">
+      <i class="fas fa-search"></i>
+    </a>
+    <a href=<?= "$dir/sistema/pesquisar" ?>>Pesquisar</a>
+  </div>
   <div class="curtidas">
     <a href=<?= "$dir/sistema/curtidas" ?> class="icone">
       <i class="fas fa-heart"></i>

scripts/autocomplete/css/autoComplete.custom.01.css

@@ -0,0 +1,129 @@
+.autoComplete_wrapper {
+  display: inline-block;
+  position: relative;
+}
+
+.autoComplete_wrapper > input {
+  height: 5rem;
+  width: 520px;
+  margin: 0;
+  padding: 0 2rem 0 3.2rem;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  font-size: 2rem;
+  text-overflow: ellipsis;
+  outline: none;
+  border-radius: 12px;
+  border: 1px solid var(--cinza-texto);
+  background-image: url(./images/search.svg);
+  background-size: 2rem;
+  background-position: left 1.05rem top 1.5rem;
+  background-repeat: no-repeat;
+  background-origin: border-box;
+  background-color: #fff;
+  transition: all 0.4s ease;
+  -webkit-transition: all -webkit-transform 0.4s ease;
+}
+
+.autoComplete_wrapper > input::placeholder {
+  transition: all 0.3s ease;
+  -webkit-transition: all -webkit-transform 0.3s ease;
+}
+
+.autoComplete_wrapper > input:hover::placeholder {
+  transition: all 0.3s ease;
+  -webkit-transition: all -webkit-transform 0.3s ease;
+}
+
+.autoComplete_wrapper > input:focus::placeholder {
+  padding: 0.1rem 0.6rem;
+  font-size: 0.95rem;
+}
+
+.autoComplete_wrapper > input:focus::selection {
+  background-color: rgba(255, 122, 122, 0.15);
+}
+
+.autoComplete_wrapper > input::selection {
+  background-color: rgba(255, 122, 122, 0.15);
+}
+
+.autoComplete_wrapper > input:hover {
+  transition: all 0.3s ease;
+  -webkit-transition: all -webkit-transform 0.3s ease;
+}
+
+.autoComplete_wrapper > ul {
+  position: absolute;
+  max-height: 226px;
+  overflow-y: scroll;
+  box-sizing: border-box;
+  left: 0;
+  right: 0;
+  margin: 0.5rem 0 0 0;
+  padding: 0;
+  z-index: 1;
+  list-style: none;
+  border-radius: 0.6rem;
+  background-color: #fff;
+  border: 1px solid rgba(33, 33, 33, 0.07);
+  box-shadow: 0 3px 6px rgba(149, 157, 165, 0.15);
+  outline: none;
+  transition: opacity 0.15s ease-in-out;
+  -moz-transition: opacity 0.15s ease-in-out;
+  -webkit-transition: opacity 0.15s ease-in-out;
+}
+
+.autoComplete_wrapper > ul[hidden],
+.autoComplete_wrapper > ul:empty {
+  display: block;
+  opacity: 0;
+  transform: scale(0);
+}
+
+.autoComplete_wrapper > ul > li {
+  margin: 0.3rem;
+  padding: 0.3rem 0.5rem;
+  text-align: left;
+  font-size: 2rem;
+  color: #212121;
+  border-radius: 0.35rem;
+  background-color: rgba(255, 255, 255, 1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: all 0.2s ease;
+}
+
+.autoComplete_wrapper > ul > li mark {
+  background-color: transparent;
+  font-weight: bold;
+}
+
+.autoComplete_wrapper > ul > li:hover {
+  cursor: pointer;
+  background-color: rgba(255, 122, 122, 0.15);
+}
+
+.autoComplete_wrapper > ul > li[aria-selected='true'] {
+  background-color: rgba(255, 122, 122, 0.15);
+}
+
+@media only screen and (max-width: 600px) {
+  .autoComplete_wrapper > input {
+    width: 30rem;
+  }
+}
+
+@media only screen and (max-width: 320px) {
+  .autoComplete_wrapper > input {
+    width: 25rem;
+  }
+}
+
+@media only screen and (max-width: 290px) {
+  .autoComplete_wrapper > input {
+    width: 20rem;
+  }
+}

sistema/pesquisar/index.php

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+  <script src="https://kit.fontawesome.com/1aacb3a88a.js" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="../../styles/global.css" />
+  <link rel="stylesheet" href="styles.css" />
+  <link rel="apple-touch-icon" sizes="180x180" href="../../img/favicon/apple-touch-icon.png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="../../img/favicon/favicon-32x32.png" />
+  <link rel="icon" type="image/png" sizes="16x16" href="../../img/favicon/favicon-16x16.png" />
+  <link rel="manifest" href="../../img/favicon/site.webmanifest" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
+  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
+  <link rel="stylesheet" href="../../scripts/autocomplete/css/autoComplete.custom.01.css">
+  <script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+
+  <script type="module" src="script.js" defer></script>
+  <title>Sistema FAQ | Pesquisar</title>
+</head>
+
+<body class="no-scroll">
+  <?php
+  $dir = '../..';
+  include '../../layouts/painel-lateral.php';
+  ?>
+  <div class="spinnerFull">
+    <div class="loader"></div>
+  </div>
+  <main>
+    <div class="header">
+      <div class="grupo">
+        <h1 class="title">Pesquisar</h1>
+        <div class="subgrupo">
+          <a href="../../sistema">Início</a>
+          <i class="fas fa-angle-right"></i>
+          <span>Pesquisar</span>
+        </div>
+      </div>
+      <div class="usuario">
+        <div class="foto">
+          <img src="" />
+        </div>
+        <div class="nome">
+          <span class="nome_completo"></span>
+          <span class="cargo"></span>
+        </div>
+        <i class="fas fa-angle-down botao"></i>
+        <div class="dropdown">
+          <a href="../../sistema/editar-dados">Editar dados</a>
+          <a id="deslogar">Deslogar</a>
+        </div>
+      </div>
+    </div>
+    <div class="pesquisar-por">
+      <div class="autoComplete_wrapper">
+        <input disabled placeholder="Quando abre o vestibular?" id="autoComplete" type="search" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off" maxlength="2048" tabindex="1">
+      </div>
+    </div>
+    <div class="dados">
+      <table class="perguntas">
+        <thead>
+          <tr>
+            <th>
+              <span>ID</span>
+            </th>
+            <th>
+              <span>Colaborador</span>
+            </th>
+            <th id="pergunta">
+              <span>Pergunta</span>
+            </th>
+            <th>
+              <span>Editado por</span>
+            </th>
+            <th>
+              <span>Prioridade</span>
+            </th>
+            <th>
+              <span>Data de edição</span>
+            </th>
+            <th>
+              <span>Ação</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody class="perguntas-tbody"></tbody>
+      </table>
+      <div class="spinnerContainer mostrar">
+        <div class="spinner loader"></div>
+      </div>
+      <div class="paginacao">
+        <div class="pg">
+          <span class="pg-inicio-pesquisar disabled" title="Ínicio"><i class="bi bi-chevron-double-left"></i></span>
+          <span class="pg-anterior-pesquisar disabled" title="Anterior"><i class="bi bi-chevron-left"></i></span>
+        </div>
+        <div class="numeros pg-numeros-pesquisar">
+        </div>
+        <div class="pg">
+          <span class="pg-proximo-pesquisar" title="Próximo"><i class="bi bi-chevron-right"></i></span>
+          <span class="pg-ultimo-pesquisar" title="Último"><i class="bi bi-chevron-double-right"></i></span>
+        </div>
+      </div>
+    </div>
+  </main>
+</body>
+
+</html>