Merge pull request #75 from unb-mds/bidding-list

Bidding list
unb-mds · Jul 3, 2024 · a33a50d · a33a50d
2 parents 85d0927 + 625bdae
commit a33a50d
Show file tree

Hide file tree

Showing 18 changed files with 337,768 additions and 26 deletions.
diff --git a/backend/data_collection/database/data_copy.json b/backend/data_collection/database/data_copy.json
diff --git a/docs/Estudos/Estudos.md b/docs/Estudos/Estudos.md
@@ -13,7 +13,8 @@ hide:
 ## Figma e Prototipagem
 
 1. [Curso de Figma Grátis - Tutorial Completo](https://www.youtube.com/playlist?list=PLwgL9IEA0PxXzmOu0crRl9l6PT46nqtI9) - Curso explicativo de figma gratuito
-
+2. [Curso de Figma - Tutorial](https://www.youtube.com/playlist?list=PLwgL9IEA0PxWytUVrfWcU0QbCjQwKPulj) - Outro curso sobre figma que aprofunda um pouco mais
+
 ## Front-End
 
 1. [Curso para Iniciantes em JavaScript](https://www.youtube.com/watch?v=SajRjc9KKUE&list=PL0Zuz27SZ-6Oi6xNtL_fwCrwpuqylMsgT) - Série de vídeos para iniciantes cobrindo os fundamentos do JavaScript.
@@ -28,6 +29,8 @@ hide:
 3. [Introdução ao React - Vídeo no YouTube](https://www.youtube.com/watch?v=RVFAyFWO4go) - Vídeo introdutório explicando os conceitos básicos do React.
 4. [REACT.JS E AXIOS - CONSUMIR DADOS DE API COM REACT E AXIOS](https://www.youtube.com/watch?v=NbhoeLj6lBs&t=2263s&ab_channel=MatheusBattisti-HoradeCodar) - Curso em vídeo sobre consumir APIs no React.
 5. [React Router: O guia completo para navegação em aplicativos React](https://www.youtube.com/watch?v=7b42lVMdEjE&t=422s&ab_channel=MatheusBattisti-HoradeCodar) - Curso em vídeo sobre a biblioteca React Router.
+6. [Curso de React](https://www.youtube.com/playlist?list=PLnDvRpP8BneyVA0SZ2okm-QBojomniQVO) - Curso em vídeo completo sobre react
+7. [Curso de React Para Iniciantes](https://www.youtube.com/watch?v=hd2B7XQAFls) - Curso em vídeo de react para iniciantes
 
 ## Back-end
 1. [Documentação Django](https://docs.djangoproject.com/en/5.0/) - Documentação do framework que utilizaremos no backend em Python.

diff --git a/frontend/src/components/card-licitacoes/index.jsx b/frontend/src/components/card-licitacoes/index.jsx
@@ -1,20 +1,31 @@
 import React from 'react'
+import { setStatusBidding } from '../../utils/status-bidding'
 
 import styles from './style.module.css'
+import formatCurrency from '../../utils/format-currency'
+
+export default function CardLicitacoes({ data }) {
+
+  const statusBidding = setStatusBidding(data)
 
-export default function CardLicitacoes({titulo, data, preco, descricao}) {
   return (
     <div className={styles.cardWrapper}>
-      <h6>{titulo}</h6>
-      <div>
-        <p>{data}</p>
-        <p>{preco}</p>
+      <h5 className={styles.cardTitle}>{data["Nome_UG"]}</h5>
+      <div className={styles.cardStatus}>
+        <p className={styles.cardStatusText}>Status: {statusBidding}</p>
+        <p className={styles.cardStatusText}>{data['tipo']}</p>
       </div>
-      <div>
-        <p>{descricao}</p>
+      <div className={styles.licitacoesInfo}>
+        <div className={styles.cardSection}>
+          <p>Dara de publicação: {data["data_abertura"]}</p>
+          <p>Valor da licitação: {`R$ ${formatCurrency(data["Valor_Licitacao"])}`}</p>
+        </div>
+        <div>
+          <p className={styles.cardDescricao}>{data["Objeto"]}</p>
+        </div>
       </div>
       <div>
-        <a href="">Ver Mais</a>
+        <a href="" className={styles.cardButton}>Ver Mais</a>
       </div>
     </div>
   )

diff --git a/frontend/src/components/card-licitacoes/style.module.css b/frontend/src/components/card-licitacoes/style.module.css
@@ -1,7 +1,62 @@
 .cardWrapper {
-  background-color: var(--texto);
-  width: 450px;
-  color: var(--brancoTexto);
+  background-color: var(--cinza);
+  gap: 16px;
+  color: var(--branco);
   padding: 32px;
   text-align: center;
+  transition: 100ms ease-in-out;
+  box-shadow: -4px 4px 4px rgba(0, 0, 0, .25);
+
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
 }
+
+.cardTitle {
+  text-transform: uppercase;
+  font-size: 24px;
+}
+
+.cardSection {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 16px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid var(--branco);
+}
+
+.licitacoesInfo {
+  width: 100%;
+}
+
+.cardDescricao {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  line-height: 1.4em;
+  max-height: 7em;
+  height: 7em;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+  text-align: justify;
+}
+
+.cardButton {
+  color: var(--texto);
+  background-color: var(--branco);
+  padding: 4px 72px;
+  text-decoration: none;
+}
+
+.cardStatus{
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+}
+.cardStatusText{
+  font-weight: bold;
+}
diff --git a/frontend/src/components/header/style.module.css b/frontend/src/components/header/style.module.css
@@ -2,8 +2,6 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  /* position: fixed; */
-  width: 100vw;
   background-color: var(--branco);
 }
 

diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
@@ -9,6 +9,7 @@ import {
 import './styles/global.css'
 import AboutUs from './pages/about-us';
 import Dashboard from './pages/dashboard';
+import BiddingList from './pages/bidding-list';
 
 const router = createBrowserRouter([
   {
@@ -26,6 +27,10 @@ const router = createBrowserRouter([
   {
     path: "/dashboard",
     element: <Dashboard />
+  },
+  {
+    path: "/licitacoes",
+    element: <BiddingList />
   }
 ])
 

diff --git a/frontend/src/pages/bidding-list/filter/index.jsx b/frontend/src/pages/bidding-list/filter/index.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import styles from './style.module.css';
+
+export default function Filter() {
+  return (
+    <section className={styles.filterSection}>
+      <h2 className={styles.title}>Resultados obtidos de:</h2>
+      <h3 className={styles.subtitle}>"Palavras-chave de busca"</h3>
+      <span className={styles.description}>14 resultados obtidos</span>
+      <h3 className={styles.sectionTitle}>Modalidade de compra</h3>
+      <ul>
+        <li className={styles.listItemStyle}>
+          <input type='checkbox' name='licit1' />
+          <label htmlFor="licit1">Tipo de licitação</label>
+        </li>
+        <li className={styles.listItemStyle}>
+          <input type='checkbox' name='licit1' />
+          <label htmlFor="licit1">Tipo de licitação</label>
+        </li>
+        <li className={styles.listItemStyle}>
+          <input type='checkbox' name='licit1' />
+          <label htmlFor="licit1">Tipo de licitação</label>
+        </li>
+      </ul>
+      <h3 className={styles.sectionTitle}>Órgão</h3>
+      <ul>
+        <li className={styles.listItemStyle}>
+          <input type='checkbox' name='org1' />
+          <label htmlFor="org1">Órgão</label>
+        </li>
+        <li className={styles.listItemStyle}>
+          <input type='checkbox' name='org1' />
+          <label htmlFor="org1">Órgão</label>
+        </li>
+        <li className={styles.listItemStyle}>
+          <input type='checkbox' name='org1' />
+          <label htmlFor="org1">Órgão</label>
+        </li>
+      </ul>
+      <h3 className={styles.sectionTitle}>Status</h3>
+      <h3 className={styles.sectionTitle}>Preço</h3>
+      <input type="range" />
+      <h3 className={styles.sectionTitle}>Período</h3>
+    </section>
+  )
+}
diff --git a/frontend/src/pages/bidding-list/filter/style.module.css b/frontend/src/pages/bidding-list/filter/style.module.css
@@ -0,0 +1,30 @@
+.filterSection {
+  width: 346px;
+  background-color: var(--brancoTexto);
+  border-radius: 16px;
+  flex: 1;
+  padding: 32px 16px;
+}
+
+.title{
+  font-weight: bold;
+  font-size: 32px;
+}
+
+.subtitle{
+  font-size: 28px;
+  font-weight: normal;
+}
+
+.description{
+  font-size: 18px;
+}
+
+.sectionTitle{
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.listItemStyle {
+  list-style-type: none;
+}
diff --git a/frontend/src/pages/bidding-list/index.jsx b/frontend/src/pages/bidding-list/index.jsx
@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from 'react'
+import Header from '../../components/header'
+import Filter from './filter'
+import CardLicitacoes from '../../components/card-licitacoes';
+import search from '../../../assets/SearchDark.svg';
+import styles from './style.module.css'
+import { getLicitacoes, pagLicitacoes } from '../../services/licitacoes.service';
+
+
+export default function BiddingList() {
+
+  const licitacoes = getLicitacoes();
+  const [listaLicitacoes, setListaLicitacoes] = useState([]);
+  const [lengthBids, setLengthBids] = useState(10)
+
+
+  const loadMoreBids = () => {
+    (licitacoes.length - lengthBids < 10) ? setLengthBids(prevLength => prevLength += licitacoes.length - lengthBids) : setLengthBids(prevLength => prevLength += 10)
+  }
+
+  useEffect(() => {
+    setListaLicitacoes(pagLicitacoes(licitacoes, lengthBids, 0));
+  }, [lengthBids])
+  return (
+    <>
+      <Header />
+      <section className={styles.mainSection}>
+        <div className={styles.campoPesquisaWrapper} >
+          <div className={styles.campoPesquisa}>
+            <img src={search} className={styles.searchIcon} alt="" />
+            <input type="text" placeholder='Busque por uma licitação' className={styles.inputStyle} />
+          </div>
+          <div>
+            <div>
+              <a href="" className={styles.botaoBuscar}>Buscar</a>
+            </div>
+          </div>
+        </div>
+
+        <div className={styles.licitacoesSection}>
+          <Filter />
+          <div className={styles.cardsWrapper}>
+            {listaLicitacoes.map(item => {
+              return (
+                <CardLicitacoes key={item["N�mero Processo"]} data={item}/>
+              );
+            })}
+
+            {lengthBids >= licitacoes.length ? <></> :
+              <button className={styles.botaoCarregarMais} type='button' onClick={loadMoreBids}>Carregar Mais</button>
+            }
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}
diff --git a/frontend/src/pages/bidding-list/style.module.css b/frontend/src/pages/bidding-list/style.module.css
@@ -0,0 +1,83 @@
+.campoPesquisaWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 80px;
+  margin-bottom: 40px;
+}
+
+.campoPesquisa {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 3px solid var(--texto);
+  padding-bottom: 12px;
+  flex: 1;
+  gap: 24px;
+}
+
+.searchIcon {
+  width: 30px;
+}
+
+.inputStyle {
+  background-color: var(--background);
+  color: (--texto);
+  font-style: 'IBM Plex Sans';
+  font-weight: 400;
+  font-size: 23px;
+  border: none;
+  outline: none;
+  width: 100%;
+}
+
+.inputStyle:focus {
+  border: none;
+  outline: none;
+}
+
+.botaoBuscar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--texto);
+  text-decoration: none;
+  color: var(--brancoTexto);
+  font-family: 'IBM Plex Sans', sans-serif;
+  text-transform: uppercase;
+  font-weight: 600;
+  width: 222px;
+  height: 32px;
+}
+
+.mainSection {
+  display: flex;
+  flex-direction: column;
+  margin: 40px 128px;
+}
+
+.licitacoesSection {
+  display: flex;
+  gap: 32px;
+}
+
+.cardsWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+  flex: 1;
+}
+
+.botaoCarregarMais {
+  height: 2rem;
+  width: 70%;
+  background-color: var(--cinza);
+  color: var(--brancoTexto);
+  border: 0rem;
+  font-family: 'IBM Plex Sans', sans-serif;
+  box-shadow: -4px 4px 4px rgba(0, 0, 0, .25);
+  font-size: 1rem;
+
+}