Candidato/jo dk

.gitignore

@@ -0,0 +1 @@
+vendor/

Public/components/container.php

@@ -0,0 +1,20 @@
+<div class="container">
+    <div class="table-responsive">
+        <div class="table-wrapper">
+            <div class="table-title">
+                <div class="row justify-content-between">
+                    <div class="col-12 col-sm-7 text-center text-sm-start">
+                        <h2 class=''>Gerenciamento de <b>Veículos</b></h2>
+                    </div>
+                    <div class="col-12 col-sm-3 col-lg-3 text-center text-sm-end mt-2 mt-sm-0">
+                        <a href="" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addModal"><i
+                                class="material-icons">&#xE147;</i> <span>Novo Veículo</span></a>
+
+                    </div>
+                </div>
+            </div>
+            <?php require './Public/components/table.php' ?>
+        </div>
+    </div>
+    <?php require './Public/components/toasts.php' ?>
+</div>

Public/components/table.php

@@ -0,0 +1,14 @@
+<table id='table' class="table table-striped table-hover col-lg-8">
+    <thead>
+        <tr>
+            <th>Placa</th>
+            <th>Marca</th>
+            <th class='d-none d-sm-table-cell'>Modelo</th>
+            <th class='d-none d-sm-table-cell'>Ano</th>
+            <th>Ações</th>
+        </tr>
+    </thead>
+
+    <tbody></tbody>
+
+</table>

Public/components/toasts.php

@@ -0,0 +1,36 @@
+
+<div class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 5">
+
+  <div id="infoToast" class="toast hide text-white bg-info" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-header ">
+      <strong class="me-auto"></strong>
+      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+    </div>
+    <div class="toast-body "> </div>
+  </div>
+
+  <div id="successToast" class="toast hide text-white bg-success" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-header ">
+      <strong class="me-auto"></strong>
+      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+    </div>
+    <div class="toast-body "></div>
+  </div>
+
+  <div id="warningToast" class="toast hide text-dark bg-warning" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-header ">
+      <strong class="me-auto"></strong>
+      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+    </div>
+    <div class="toast-body "></div>
+  </div>
+
+  <div id="errorToast" class="toast hide text-white bg-danger" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-header ">
+      <strong class="me-auto"></strong>
+      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+    </div>
+    <div class="toast-body "></div>
+  </div>
+
+</div>

Public/modals/add.php

@@ -0,0 +1,38 @@
+<div id="addModal" class="modal fade" aria-hidden="true">
+	<div class="modal-dialog">
+		<div class="modal-content">
+			<form>
+				<div class="modal-header text-white bg-success">
+					<h4 class="modal-title">Adicionar Veículo</h4>
+					<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+				</div>
+				<div class="modal-body">
+					<div class="form-group">
+						<label>Placa</label>
+						<input type="text" id='add-placa' class="form-control" required>
+					</div>
+					<div class="form-group">
+						<label>Marca</label>
+						<select class='form-select' name='marca_id' id='add-marca'>
+
+						</select>
+					</div>
+					<div class="form-group">
+						<label>Modelo</label>
+						<select class='form-select' id='add-modelo' name='modelo_id' >
+
+						</select>
+					</div>
+					<div class="form-group">
+						<label>Ano</label>
+						<input type="number" id='add-ano' class="form-control" required>
+					</div>
+				</div>
+				<div class="modal-footer">
+					<input type="button" class="btn btn-default" data-bs-dismiss="modal" value="Cancel">
+					<input type="submit" class="btn btn-success" value="Add">
+				</div>
+			</form>
+		</div>
+	</div>
+</div>

Public/modals/delete.php

@@ -0,0 +1,20 @@
+<div id="deleteModal" class="modal fade" aria-hidden="true">
+	<div class="modal-dialog">
+		<div class="modal-content">
+			<form id='deleteForm'>
+				<div class="modal-header text-white bg-danger">
+					<h4 class="modal-title">Apagar Veículo</h4>
+					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+				</div>
+				<div class="modal-body">
+					<p>Tem certeza de que vai apagar o veículo <br><span id='span-placa' class='fw-bold'></span></p>
+					<p class="text-warning"><small>Esta operação não poderá ser desfeita.</small></p>
+				</div>
+				<div class="modal-footer">
+					<input type="button" class="btn btn-default" data-bs-dismiss="modal" value="Cancel">
+					<input type="submit" class="btn btn-danger" value="Delete">
+				</div>
+			</form>
+		</div>
+	</div>
+</div>

Public/modals/edit.php

@@ -0,0 +1,38 @@
+<div id="editModal" class="modal fade" aria-hidden="true">
+	<div class="modal-dialog">
+		<div class="modal-content">
+			<form>
+				<div class="modal-header text-dark bg-info">
+					<h4 class="modal-title">Editar Veículo</h4>
+					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+				</div>
+				<div class="modal-body">
+					<div class="form-group">
+						<label>Placa</label>
+						<input id='edit-placa' name='placa' type="text" class="form-control" required>
+					</div>
+					<div class="form-group">
+						<label>Marca</label>
+						<select class='form-select' name='marca_id' id='edit-marca'>
+
+						</select>
+					</div>
+					<div class="form-group">
+						<label>Modelo</label>
+						<select class='form-select' id='edit-modelo' name='modelo_id' >
+
+						</select>
+					</div>
+					<div class="form-group">
+						<label>Ano</label>
+						<input id='edit-ano' name='ano' type="text" class="form-control" required>
+					</div>
+				</div>
+				<div class="modal-footer">
+					<input type="button" class="btn btn-default" data-bs-dismiss="modal" value="Cancel">
+					<input type="submit" class="btn btn-info" value="Save">
+				</div>
+			</form>
+		</div>
+	</div>
+</div>

Public/template.php

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="pt-BR">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="../css/main.css">
+
+    <title>Hello, world!</title>
+  </head>
+  <body>
+
+    <?php require './Public/components/container.php' ?>
+
+    <?php require './Public/modals/add.php' ?>
+
+    <?php require './Public/modals/edit.php' ?>
+
+    <?php require './Public/modals/delete.php' ?>
+
+
+
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+
+    <script type='module' src="../js/main.js"></script>
+  </body>
+</html>

README.md

@@ -1,64 +1,25 @@
 Teste para desenvolvedor do Estadão
 ==============================
 
-Olá candidato,
+Olá Devs,
 
-Esse teste consiste em 2 etapas para avaliarmos seu conhecimento em PHP e Front-End (HTML5, CSS e JavaScript)
-
-Para realizar o teste, você deve dar um fork neste repositório e depois clona-lo na pasta <document_root> da máquina que está realizando o teste.
-
-Crie um branch com seu nome, e quando finalizar todo o desenvolvimento, você deverá enviar um pull-request com sua versão.
-
-O teste
+Vou passar aqui os meios que usei para construir o CRUD
 --------
-
+ 
 ### Back-End/PHP
 
-A primeira etapa será o desenvolvimento **backend/PHP**:
-
-**Descrição:**
-
-- Você deverá desenvolver uma 'mini api' para que seja possível realizar operações CRUD do objeto Carro.
-> **Obs:**
-> - Você pode usar arquivo (txt, json) como banco de dados.
-> - Cada carro deve ter ID, Marca, Modelo, Ano.
+Optei por utilizar MySql pois me pareceu mais próximo do mundo real
 
-Sugerimos o retorno dessa 'mini api' nas seguinte urls:
-
- - `/carros` - [GET] deve retornar todos os carros cadastrados.
- - `/carros` - [POST] deve cadastrar um novo carro.
- - `/carros/{id}`[GET] deve retornar o carro com ID especificado.
- - `/carros/{id}`[PUT] deve atualizar os dados do carro com ID especificado.
- - `/carros/{id}`[DELETE] deve apagar o carro com ID especificado.
+Para não 'reiventar a roda' e para ganhar algum tempo, estou usando usando dois componentes do **coffeecode**, um para abstração e persistencia do BD`datalayer`, e o outro para as gerir as rotas `router`
+> https://packagist.org/packages/coffeecode/
 
 ### Front-End
 
-Para a segunda etapa do teste, você deverá desenvolver uma SPA (Single Page Application) e nela deve ser possível:
-
-- Ver a lista de carros cadastrados
-- Criar um novo carro
-- Editar um carro existente
-- Apagar um carro existente
-
-> **Obs:**
-> - A página deve ser responsiva.
-> - A página deve funcionar 100% via AJAX, sem outros carregamentos de páginas.
-> - Ao criar/editar um carro, o campo "marca" deverá ser um `SELECT`
-
-### Ambiente
-
-Esse teste com um ambiente Docker funcional, ou seja, basta rodar os comandos para subir o container da aplicação e acessar a URL do projeto no navegador.
+Estou utilizando Javascript puro, com isso adicionei também o `bootstrap 5`, que é o primeira versão do bootstrap a não usar Jquery.
+> https://getbootstrap.com/docs/5.0/getting-started/introduction/
 
-Para rodar o ambiente, é necessário ter o Docker Compose instalado, e rodar o seguinte comando:
-> docker-compose up -d nginx
+Para a importação de um arquivo js a outro utilizei `modulos`, o que no momento ainda não foi iplementado no safari por exemplo
 
-Após o ambiente subir, basta acessar a URL abaixo e começar a desenvolver:
-> http://localhost:8080
 
-### Observações importantes:
-- O teste só será considerado se rodar através do Docker.
-- Caso seja necessário, você pode alterar **qualquer** configuração do Docker. Atente-se apenas para que o ambiente não precise de nenhuma configuração adicional.
-- Você não deve se prender aos arquivos do repositório. Fique a vontade para criar outros.
-- Você pode usar frameworks, tanto para o front-end, quanto para o back-end, mas um código limpo será melhor avaliado.
-- Você pode usar ferramentas de automação (Grunt, Gulp), mas deverá informar o uso completo para funcionamento do teste.
-- Será considerado ponto positivo no teste a utilização de JS puro, orientação a objetos, design patterns e rotinas para testes.
+### Obs
+> Fico a disposição para qualquer duvida ou sugestões