Feature/5 gerenciamento contratos

.github/workflows/code-analysis.yml

@@ -36,11 +36,3 @@ jobs:
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
           SONAR_TOKEN: ${{secrets.SONAR_TOKEN}}
 
-      - name: Envia cobertura para o Codecov
-        uses: codecov/codecov-action@v3
-        with:
-          token: ${{ secrets.CODECOV_TOKEN }}
-          fail_ci_if_error: true
-          flags: jest
-          name: 2023.2-PrintGo-FrontEnd
-          verbose: true

.github/workflows/metrics.yml

@@ -1,6 +1,7 @@
 name: Metrics and Release
 
 on:
+  workflow_dispatch:
   pull_request:
     branches:
       - main

docker-compose.yml

@@ -1,5 +1,3 @@
-version: '3.8'
-
 services: 
   app:
     container_name: app-front

scripts/metrics.js

@@ -1,26 +1,24 @@
-const REPO = '2023.2-PrintGo-FrontEnd'
+const REPO = '2024.1-PrintGo-FrontEnd'
 const OWNER = 'fga-eps-mds'
-const SONAR_ID = 'fga-eps-mds_2023.2-PrintGo-FrontEnd'
+const SONAR_ID = 'fga-eps-mds_2024.1-PrintGo-FrontEnd'
 
-const METRIC_LIST = [
-    'files',
-    'functions',
-    'complexity',
-    'comment_lines_density',
-    'duplicated_lines_density',
-    'coverage',
-    'ncloc',
-    'tests',
-    'test_errors',
-    'test_failures',
-    'test_execution_time',
-    'security_rating'
-];
+const METRIC_LIST = ['files',
+               'functions',
+               'complexity',
+               'comment_lines_density',
+               'duplicated_lines_density',
+               'coverage',
+               'ncloc',
+               'tests',
+               'test_errors',
+               'test_failures',
+               'test_execution_time',
+               'security_rating'];
 
 const SONAR_URL = `https://sonarcloud.io/api/measures/component_tree?component=${SONAR_ID}&metricKeys=${METRIC_LIST.join(',')}&ps=500`;
 
 module.exports = {
     SONAR_URL,
     REPO,
     OWNER
-};
+};

sonar-project.properties

@@ -1,4 +1,4 @@
-sonar.projectKey=fga-eps-mds_2023.2-PrintGo-FrontEnd
+sonar.projectKey=fga-eps-mds_2024.1-PrintGo-FrontEnd
 sonar.organization=fga-eps-mds-1
 sonar.sources=src
 sonar.tests=src
@@ -7,4 +7,4 @@ sonar.exclusions=node_modules/**, test/**, assets/**, .github/**, scripts/**
 
 
 sonar.javascript.lcov.reportPaths=coverage/lcov.info
-sonar.testExecutionReportPaths=reports/sonar-report.xml
+sonar.testExecutionReportPaths=reports/sonar-report.xml

src/App.js

@@ -22,6 +22,11 @@ import ForgottenPasswordPage from "./pages/ForgottenPassword";
 import RecoverPasswordPage from "./pages/RecoverPassword";
 import PrivateRoutes from "./components/utils/PrivateRoutes";
 import AdminRoutes from "./components/utils/AdminRoutes";
+import ListEquipment from "./components/forms/ListEquipment";
+import ContractForm from "./components/forms/ContractForm";
+import EditContractForm from "./components/forms/EditContractForm";
+import ContractList from "./pages/ContractList";
+import ViewContract from "./pages/ViewContract";
 
 function App() {
   return (
@@ -30,16 +35,23 @@ function App() {
         <Routes>
           <Route element={<PrivateRoutes />}>
             <Route path="/editarusuario/:id" element={<EditUserPage/>}/>
+            <Route path="/listimpressora" element={<ListEquipment/>}/>
+            <Route path="/editimpressora/:id" element={<EditPrinter/>}/>
+            <Route path="/visualizarimpressora/:id" element={<ViewPrinter/>}/>
             <Route path="/mudarsenha" element={<ChangePassword />} />
             <Route path="/cadastroimpressora" element={<RegisterPrinter />} />
-            <Route path="/editarimpressora/:printer" element={<EditPrinter />} />
+            {/* <Route path="/editarimpressora/:printer" element={<EditPrinter />} /> */}
             <Route path="/padraoimpressora" element={<PatternPrinter />} />
-            <Route path="/editarpadrao/:padrao" element={<EditPattern />} />
+            <Route path="/editarpadrao" element={<EditPattern />} />
             <Route path="/impressorascadastradas" element={<PrintersList />} />
             <Route path="/visualizarimpressora/:printerData" element={<ViewPrinter/>}/>
             <Route path="/listapadroes" element={<PatternList />} />
             <Route path="/padroescadastrados" element={<PatternList />} />
-            <Route path="/visualizarpadrao/:padrao" element={<ViewPattern />} />
+            <Route path="/visualizarpadrao" element={<ViewPattern />} />
+            <Route path="/cadastrarContrato" element={<ContractForm />} />
+            <Route path="/editarContrato" element={<EditContractForm />} />
+            <Route path="/listagemContrato" element={<ContractList />} />
+            <Route path="/verContrato/:id" element={<ViewContract />} />
             <Route element={<AdminRoutes/>}>
               <Route path="/listausuarios" element={<UsersList />} />
               <Route path="/cadastro" element={<CreateUserPage />} />

src/api/api.js

@@ -7,8 +7,9 @@ export async function login(email, password) {
   };
 
   try {
-    const response = await api.post('/user/login', data);
-    return {type: 'success', token: response.data.token };
+    // const response = await api.post('/user/login', data);
+    let token_mock = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjEyMyIsImVtYWlsIjoidXNlckBleGFtcGxlLmNvbSIsIm5vbWUiOiJEYW5pZWwiLCJjYXJnb3MiOiJhZG1pbiJ9.tMm8nEv6qtGnL4XJIFRQJcgw6qafUUDpxgR8LUHXX08"
+    return {type: 'success', token: token_mock };
   } catch (error) {
     console.error('Erro ao fazer login:', error);
     return {type: 'error', error}; 
@@ -28,4 +29,4 @@ export async function changePassword(data) {
   } catch(error) {
     return {type: 'error', error}; 
   }
-}
+}

src/components/Button.js

@@ -1,27 +1,49 @@
 import React from 'react';
-import PropTypes from 'prop-types'; // Import PropTypes
+import PropTypes from 'prop-types';
 import '../style/components/button.css';
 
-const Button = ({ textColor, bgColor, borderColor, children, onClick }) => {
-  const buttonStyle = {
-    '--text-color': textColor,
-    '--bg-color': bgColor,
-    '--border-color': borderColor,
-  };
-
-  return (
-    <button className="button" style={buttonStyle} onClick={onClick}>
-      {children}
-    </button>
-  );
+const Button = ({ type, size, text, onClick, bgColor }) => {
+    const typeClasses = {
+        success: 'button-success',
+        error: 'button-error',
+        info: 'button-info',
+        warning: 'button-warning',
+        icon: 'button-icon'
+    };
+
+    const sizeClasses = {
+        small: 'button-small',
+        medium: 'button-medium',
+        large: 'button-large',
+    };
+
+    const buttonClass = `button ${typeClasses[type] || 'button-info'} ${sizeClasses[size] || 'button-medium'}`;
+
+    return (
+        <button className={buttonClass} onClick={onClick} 
+        style={
+            {background: bgColor,
+             width:"150px",
+             height:"50px",
+             borderRadius:"25px",
+             color:"white"}}>
+
+            {text}
+        </button>
+    );
 };
 
 Button.propTypes = {
-  textColor: PropTypes.string, // Validate textColor as a string
-  bgColor: PropTypes.string,   // Validate bgColor as a string
-  borderColor: PropTypes.string, // Validate borderColor as a string
-  children: PropTypes.node,   // Validate children as a React node
-  onClick: PropTypes.func,    // Validate onClick as a function
+    type: PropTypes.oneOf(['success', 'error', 'info', 'warning', 'icon']),
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
+    text: PropTypes.string.isRequired,
+    bgColor: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired,
+};
+
+Button.defaultProps = {
+    type: 'info',
+    size: 'medium',
 };
 
 export default Button;

src/components/cards/BigInfoCard.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import "../../style/components/BigInfoCard.css";
+
+const BigInfoCard = ({ className, title, info }) => {
+    return (
+        <div className={`big-card-info ${className}`}>
+            <span className="big-card-title">{title}</span>
+            <span className="big-card-info-value">{info}</span>
+        </div>
+    );
+};
+
+BigInfoCard.propTypes = {
+    title: PropTypes.string.isRequired,
+    info: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+    ]).isRequired,
+    className: PropTypes.string,
+};
+
+export default BigInfoCard;

src/components/cards/SmallInfoCard.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import "../../style/components/SmallInfoCard.css";
+
+const SmallInfoCard = ({ className, title, imageSrc, info }) => {
+    const titleClass = className === 'grey-info-card' ? 'info-card-title' : 'blue-info-card-title';
+    const infoClass = className === 'grey-info-card' ? 'info-card-info' : 'blue-info-card-info';
+    return (
+        <div className={className}>
+            <img src={imageSrc} alt={title} className="info-card-image" />
+            <div className="info-card-content">
+                <span className={titleClass}>{title}</span>
+                <span className={infoClass}>{info}</span>
+            </div>
+        </div>
+    );
+};
+
+SmallInfoCard.propTypes = {
+    title: PropTypes.string.isRequired,
+    imageSrc: PropTypes.string.isRequired,
+    info: PropTypes.string.isRequired,
+    className: PropTypes.string,
+};
+
+export default SmallInfoCard;

src/components/containers/DateContainer.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import "../../style/components/DateContainer.css";
+
+const DateContainer = ({ label, value, onChange, className, error }) => {
+    return (
+        <div className='date-container-form'>
+            <span className="form-subtitle">{label}</span>
+            <div>
+                <input
+                    type="date"
+                    value={value}
+                    onChange={onChange}
+                    className={error ? `input-error ${className}` : `number-field ${className}`}
+                />
+            </div>
+        </div>
+    );
+};
+
+DateContainer.propTypes = {
+    label: PropTypes.string.isRequired,
+    value: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    className: PropTypes.string,
+    error: PropTypes.string,
+};
+
+DateContainer.defaultProps = {
+    value: '',
+    className: '',
+    error: '',
+};
+
+export default DateContainer;
+

src/components/containers/DropdownSection.js

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import "../../style/components/FilterContainer.css"
+
+const DropdownSection = ({ title }) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const toggleOpen = () => {
+        setIsOpen(!isOpen);
+    };
+
+    return (
+        <div className="dropdown-section">
+            <div className="dropdown-header" onClick={toggleOpen}>
+                {title}
+                <img 
+                    src={process.env.PUBLIC_URL + '/seta-direita 1.png'} 
+                    className={`arrow ${isOpen ? 'up' : 'down'}`} 
+                    alt="seta"
+                />
+            </div>
+            {isOpen && (
+                <div className="dropdown-content">
+                <label><input type="checkbox" /> Valor 1</label>
+                <label><input type="checkbox" /> Valor 2</label>
+                <label><input type="checkbox" /> Valor 3</label>
+                </div>
+            )}
+        </div>
+    );
+};
+
+DropdownSection.propTypes = {
+    title: PropTypes.string.isRequired,
+};
+
+export default DropdownSection;

src/components/containers/FilterContainer.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import DropdownSection from './DropdownSection';
+import "../../style/components/FilterContainer.css"
+
+const FilterContainer = () => {
+    return (
+        <div className="filter-container">
+            <header className="filter-header">
+                <h1>Equipamentos disponíveis</h1>
+            </header>
+            <main>
+                <DropdownSection title="Equipamento" />
+                <DropdownSection title="Modelo" />
+                <DropdownSection title="Número de série" />
+                <DropdownSection title="Localização" />
+            </main>
+        </div>
+    );
+};
+
+export default FilterContainer;