Pessoal!!
Estou desenvolvendo um sistema mvc de apontamento de horas. Estou com duvidas em fazer um filtro, para filtrar os apontamentos dos meses anteriores
Pessoal!!
Estou desenvolvendo um sistema mvc de apontamento de horas. Estou com duvidas em fazer um filtro, para filtrar os apontamentos dos meses anteriores
Oii Evelyn, tudo bem?
Que legal que você está desenvolvendo um sistema de apontamento de horas! Vou te dar uma ideia de como você pode fazer.
Vou te dar um exemplo prático em PHP com um banco de dados MySQL, supondo que você já tenha uma tabela de apontamentos com uma coluna de data.
SELECT * FROM apontamentos WHERE MONTH(data) < MONTH(CURDATE()) AND YEAR(data) = YEAR(CURDATE());
Essa consulta seleciona todos os apontamentos cujo mês é anterior ao mês atual e que estão no mesmo ano.
class ApontamentoController {
public function filtrarMesesAnteriores() {
$model = new ApontamentoModel();
$resultados = $model->getApontamentosMesesAnteriores();
// Aqui você pode passar os resultados para a sua view
include 'views/apontamentos_mes_anterior.php';
}
}
getApontamentosMesesAnteriores:class ApontamentoModel {
public function getApontamentosMesesAnteriores() {
$db = new PDO('mysql:host=localhost;dbname=seu_banco_de_dados', 'usuario', 'senha');
$sql = "SELECT * FROM apontamentos WHERE MONTH(data) < MONTH(CURDATE()) AND YEAR(data) = YEAR(CURDATE())";
$stmt = $db->prepare($sql);
$stmt->execute();
return $stmt->fetchAll(PDO::FETCH_ASSOC);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Apontamentos dos Meses Anteriores</title>
</head>
<body>
<h1>Apontamentos dos Meses Anteriores</h1>
<table>
<tr>
<th>Data</th>
<th>Horas</th>
<th>Descrição</th>
</tr>
<?php foreach ($resultados as $apontamento): ?>
<tr>
<td><?php echo $apontamento['data']; ?></td>
<td><?php echo $apontamento['horas']; ?></td>
<td><?php echo $apontamento['descricao']; ?></td>
</tr>
<?php endforeach; ?>
</table>
</body>
</html>
Esses são os passos básicos para criar um filtro de apontamentos dos meses anteriores no seu sistema MVC. Claro, você pode precisar ajustar algumas partes conforme a estrutura do seu projeto.
Indico que você participe do Discord da Alura onde você pode trocar ideias com pessoas de diferentes áreas.
Um abraço e bons estudos.
Obrigada pelas informações!
Estou desenvolvendo em c#, você recomenda fazer em javascript?
Oii! Sim, você pode fazer a filtragem tanto no backend (C#) quanto no frontend (JavaScript), dependendo das suas necessidades específicas.
Abraços.
Pode me ajudar a cria em c#?
Vou te dar uma ideia de como fazer, daí você vai precisar adaptar para o seu projeto.
Vamos assumir que você está usando o Entity Framework para interagir com o banco de dados.
Primeiro, vamos definir o modelo Apontamento se ainda não estiver definido:
public class Apontamento
{
public int Id { get; set; }
public DateTime Data { get; set; }
public int Horas { get; set; }
public string Descricao { get; set; }
}
Defina o contexto do Entity Framework:
public class AppDbContext : DbContext
{
public DbSet<Apontamento> Apontamentos { get; set; }
protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
{
optionsBuilder.UseSqlServer("YourConnectionStringHere");
}
}
Crie um repositório para gerenciar a lógica de acesso aos dados:
public class ApontamentoRepository
{
private readonly AppDbContext _context;
public ApontamentoRepository(AppDbContext context)
{
_context = context;
}
public List<Apontamento> GetApontamentosMesesAnteriores()
{
var now = DateTime.Now;
return _context.Apontamentos
.Where(a => a.Data.Month < now.Month && a.Data.Year == now.Year)
.ToList();
}
}
Agora, vamos criar o controlador que chama o repositório e passa os dados para a view:
public class ApontamentoController : Controller
{
private readonly ApontamentoRepository _repository;
public ApontamentoController(AppDbContext context)
{
_repository = new ApontamentoRepository(context);
}
public IActionResult MesesAnteriores()
{
var apontamentos = _repository.GetApontamentosMesesAnteriores();
return View(apontamentos);
}
}
Por fim, crie a view MesesAnteriores.cshtml para exibir os apontamentos filtrados:
@model IEnumerable<SeuProjeto.Models.Apontamento>
<!DOCTYPE html>
<html>
<head>
<title>Apontamentos dos Meses Anteriores</title>
</head>
<body>
<h1>Apontamentos dos Meses Anteriores</h1>
<table>
<tr>
<th>Data</th>
<th>Horas</th>
<th>Descrição</th>
</tr>
@foreach (var apontamento in Model)
{
<tr>
<td>@apontamento.Data.ToString("dd/MM/yyyy")</td>
<td>@apontamento.Horas</td>
<td>@apontamento.Descricao</td>
</tr>
}
</table>
</body>
</html>
Espero que isso te ajude a avançar com seu projeto!
Um abraço.
Preciso de um filtro que precise exibir as datas iniciais e finais do período que está. Mostrar o período que está selecionado e se o usuário quiser alterar ele altera.
Preciso fazer esse filtro, se o usuario quiser ver os apontamentos de outras datas, ele consegue.
Lembrando que o sistema é mvc c#, uso o sql server
Atualmente meu javascript é esse
@section scripts {
<script type="text/javascript">
$('#IDExportBtn').hide();
function toggleBotaoExportar() {
var botaoExporta = $('#IDExportBtn');
var tabelaDados = $('#tabelaDados tbody');
if (tabelaDados.children.length > 0) {
botaoExporta.show();
} else {
botaoExporta.hide();
}
}
function fetchDataAndPopulateTables(startDate, endDate) {
var settings = {
"url": "@Url.Content("~/")" + "v1/apontamento/gethoursbusiness",
"method": "POST",
"timeout": 0,
"data": JSON.stringify({ startDate: startDate, endDate: endDate }),
"contentType": "application/json"
};
var totalAppointedHours = 0;
var totals = {};
$.ajax(settings).done(function (response) {
$('#tabelaDados tbody').empty();
var startDate = null;
var endDate = null;
response.forEach(function (item) {
if (!(item.clientName in totals)) {
totals[item.clientName] = {
totalAppointedHours: 0,
totalAccuracy: 0,
pep: item.pep
};
}
if (!startDate || new Date(item.startDay) < new Date(startDate)) {
startDate = item.startDay;
}
if (!endDate || new Date(item.endDay) > new Date(endDate)) {
endDate = item.endDay;
}
totals[item.clientName].totalAppointedHours += parseInt(item.appointed.hoursAppointed);
totals[item.clientName].totalAccuracy += parseFloat(item.appointed.accuracy);
totalAppointedHours += parseInt(item.appointed.hoursAppointed);
});
$('#startDate').val(startDate);
$('#endDate').val(endDate);
Object.keys(totals).forEach(function (clientName) {
var accuracyPercentage = (totals[clientName].totalAppointedHours / totalAppointedHours) * 100;
var totalRows = "<tr>" +
"<td>" + clientName + "</td>" +
"<td>" + totals[clientName].pep + "</td>" +
"<td>" + totals[clientName].totalAppointedHours + "</td>" +
"<td>" + accuracyPercentage.toFixed(2) + "</td>" +
"</tr>";
$('#tabelaDados tbody').append(totalRows);
});
toggleBotaoExportar();
});
}
$(document).on('click', '#IDExportBtn', function () {
var table = $('#tabelaDados')[0];
var rows = table.rows;
var csvContent = "data:text/csv;charset=utf-8,";
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].cells;
var rowArray = [];
for (var j = 0; j < cells.length; j++) {
rowArray.push(cells[j].innerText.trim());
}
csvContent += rowArray.join(",") + "\n";
}
var encodeUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodeUri);
link.setAttribute("download", "table_data.csv");
document.body.appendChild(link);
link.click();
});
$(document).on('click', '#IDBtnCalc', function () {
fetchDataAndPopulateTables();
});
$(document).on('submit', '#filterForm', function (e) {
e.preventDefault();
var startDate = $('#startDate').val();
var endDate = $('#endDate').val();
fetchDataAndPopulateTables(startDate, endDate);
});
$(document).ready(function () {
fetchDataAndPopulateTables();
});
</script>
}
Evelyn, vou te ajudar com uma ideia. Você vai precisar implementar.
Tenha certeza de que o modelo Apontamento está definido corretamente:
public class Apontamento
{
public int Id { get; set; }
public DateTime Data { get; set; }
public int Horas { get; set; }
public string Descricao { get; set; }
}
O mesmo com contexto do Entity Framework:
public class AppDbContext : DbContext
{
public DbSet<Apontamento> Apontamentos { get; set; }
protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
{
optionsBuilder.UseSqlServer("YourConnectionStringHere");
}
}
Vamos criar um método no repositório para buscar os apontamentos em um intervalo de datas específico:
public class ApontamentoRepository
{
private readonly AppDbContext _context;
public ApontamentoRepository(AppDbContext context)
{
_context = context;
}
public List<Apontamento> GetApontamentosPorPeriodo(DateTime startDate, DateTime endDate)
{
return _context.Apontamentos
.Where(a => a.Data >= startDate && a.Data <= endDate)
.ToList();
}
}
Vamos ajustar o controlador para lidar com a filtragem por datas:
public class ApontamentoController : Controller
{
private readonly ApontamentoRepository _repository;
public ApontamentoController(AppDbContext context)
{
_repository = new ApontamentoRepository(context);
}
[HttpGet]
public IActionResult Filtro()
{
return View();
}
[HttpPost]
public IActionResult Filtro(DateTime startDate, DateTime endDate)
{
var apontamentos = _repository.GetApontamentosPorPeriodo(startDate, endDate);
return View("MesesAnteriores", apontamentos);
}
}
A seguir, um exemplo de como criar a view para selecionar e exibir os apontamentos filtrados:
Filtro.cshtml (Formulário de seleção de datas)
@model IEnumerable<SeuProjeto.Models.Apontamento>
<!DOCTYPE html>
<html>
<head>
<title>Filtro de Apontamentos</title>
</head>
<body>
<h1>Filtro de Apontamentos</h1>
<form asp-action="Filtro" method="post">
<label for="startDate">Data Inicial:</label>
<input type="date" id="startDate" name="startDate" required>
<label for="endDate">Data Final:</label>
<input type="date" id="endDate" name="endDate" required>
<button type="submit">Filtrar</button>
</form>
</body>
</html>
MesesAnteriores.cshtml (Exibição dos apontamentos filtrados)
@model IEnumerable<SeuProjeto.Models.Apontamento>
<!DOCTYPE html>
<html>
<head>
<title>Apontamentos Filtrados</title>
</head>
<body>
<h1>Apontamentos Filtrados</h1>
<table>
<tr>
<th>Data</th>
<th>Horas</th>
<th>Descrição</th>
</tr>
@foreach (var apontamento in Model)
{
<tr>
<td>@apontamento.Data.ToString("dd/MM/yyyy")</td>
<td>@apontamento.Horas</td>
<td>@apontamento.Descricao</td>
</tr>
}
</table>
</body>
</html>
Você já possui um bom código JavaScript para manipulação dos dados. Vou apenas ajustar a função fetchDataAndPopulateTables para aceitar os parâmetros startDate e endDate do formulário:
function fetchDataAndPopulateTables(startDate, endDate) {
var settings = {
"url": "@Url.Action("Filtro", "Apontamento")",
"method": "POST",
"timeout": 0,
"data": JSON.stringify({ startDate: startDate, endDate: endDate }),
"contentType": "application/json"
};
$.ajax(settings).done(function (response) {
$('#tabelaDados tbody').empty();
// Logica para preencher a tabela
});
}
$(document).on('submit', '#filterForm', function (e) {
e.preventDefault();
var startDate = $('#startDate').val();
var endDate = $('#endDate').val();
fetchDataAndPopulateTables(startDate, endDate);
});
$(document).ready(function () {
fetchDataAndPopulateTables();
});
Lembre de ajustar os nomes dos campos, IDs e URLs conforme necessário para o seu projeto. Para tópicos de projetos pessoais, indico que converse com pessoas no discord também.
Abraços e boa sorte com seu projeto!