1
resposta

[Dúvida] como faz para filtrar os dados por semana o Nextjs 14.x

Fiz um codigo que tem a funcao de receber dados de uma api (youtrack) filtrar por mes e adcionar as tarefas em uma tabela. mas agr queria saber como faz para fazer um filtragem por semana domingo - sabado ou data inicial - data final.

const MonthReport = () => {
  const [issues, setIssues] = useState<IssuesProps | null>(null)
  const [file, setFile] = useState<any>(null)
  const [residualHoursPreviousMonth, setResidualHoursPreviousMonth] = useState<number>()
  const [contractHours, setContractHours] = useState(100)
  const [selectedMonth, setSelectedMonth] = useState<number>(new Date().getMonth() - 1)

  useEffect(() => {AREA DE REQUISISAO DA API}, [])


  const handlerDownload = () => {
    const month: number = Number(prompt("Qual mês deseja fazer o relatório? (número do mês)"));
    const kubeReview: KubeReviewProps = {
      name: 'REVISÃO MANUAL DA PLATAFORMA KUBERNETES + ',
      hours: 0.25
    };
    const dateNow: Date = new Date();

    const columns = [
      { title: "Data/Mês", dataKey: "date" },
      { title: "Data semana", dataKey: "week" },
      { title: "Atividades", dataKey: "summary" },
      { title: "Horas", dataKey: "hours" },
    ];

    if (!issues) return;

    const dataGroupedByDate: { [key: string]: { date: string; week: string; summary: string; hours: number }[] } = {};


    issues.data.forEach(issue => {
      issue.timeTracking.workItems.forEach(workItem => {
        const date = formatDate(workItem.date);
        const week = getDayOfWeek(new Date(workItem.date).getDay());
        const summary = kubeReview.name + workItem.text;
        const hours = ((workItem.duration?.minutes || 0) / 60) + kubeReview.hours;

        if (!dataGroupedByDate[date]) {
          dataGroupedByDate[date] = [];
        }

        dataGroupedByDate[date].push({ date, week, summary, hours });
      });
    });

    const groupedData = Object.values(dataGroupedByDate).map(activities => {
      const totalHours = activities.reduce((total, activity) => total + activity.hours, 0);
      const combinedSummary = activities.map(activity => activity.summary).join(" + ");
      return {
        date: activities[0].date,
        week: activities[0].week,
        summary: combinedSummary,
        hours: totalHours
      };
    }).sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());

    const resultHours = {
      totalHours: calculationTotalHoursMonth(groupedData),
      contractHours: contractHours,
      residualHoursPreviousMonth: residualHoursPreviousMonth,
      residualHours: getResidualHours(residualHoursPreviousMonth, contractHours, calculationTotalHoursMonth(groupedData)),
    };

    const additionalRows = [
      { date: "", week: "Total de Horas", summary: "", hours: resultHours.totalHours },
      { date: "", week: "HORAS RESIDUAIS MÊS ANTERIOR", summar: "", hours: resultHours.residualHoursPreviousMonth },
      { date: "", week: "Horas Contratadas", summary: "", hours: resultHours.contractHours },
      { date: "", week: "Horas Residuais", summary: "", hours: resultHours.residualHours }
    ];

    const combinedData = [...groupedData, ...additionalRows];

    const pdf = new jsPDF();

    const imgLogoGole = logoGole.src;
    pdf.addImage(imgLogoGole, 'PNG', 10, 10, 20, 20);
    pdf.addImage(file, 'PNG', 35, 13, 15, 15);

    pdf.setFont("Time New Roman");
    pdf.setFontSize(18);
    pdf.text("Relatório de Horas", 105, 20, { align: 'center', });

    const firstDay: string = groupedData.length > 0 ? groupedData[0].date : "";
    const lastDay: string = groupedData.length > 0 ? groupedData[groupedData.length - 1].date : "";

    pdf.setFontSize(12);
    pdf.text(`${firstDay} a ${lastDay} de ${getMonthNow(month)} de ${dateNow.getFullYear()}`, 105, 30, { align: 'center', horizontalScale: 1 });

    autoTable(pdf, {
      columns: columns,
      body: combinedData,
      theme: "grid",
      startY: 40,
      headStyles: { fillColor: "#1a1a37" },
    });

    console.log("horas residuais: ", residualHoursPreviousMonth)
    pdf.save('tabela.pdf');
  };

  return (
    <>
      <Modal>
        <input type="file" onChange={handlerFile} required /> <br />
        <input type="number" name="residual-hours" id="residual-hours" placeholder="Horas residuais do mes passado" onChange={handlerResidualHoursPreviousMonth} />
        <input type="number" name="residual-hours" id="residual-hours" placeholder="Horas contratadas" onChange={handlerContractHours} value={contractHours} />
        <button onClick={handlerDownload}>Aqui!</button>
        {/* <button onClick={getWeekReport}>Relatorio semanal aqui!</button> */}
        <WeekReport />
      </Modal>
    </>
  )
}
// getWeekReport
export default MonthReport

Aceito sugestões e criticas. Desde já agradeço a atenção!!

1 resposta

Oii Samuel, tudo bem?

Vou dar minhas sugestões aqui e deixo aberto para que outras pessoas possam contribuir também!

Penso que pra filtrar os dados por semana, você pode começar modificando a função handlerDownload pra incluir a lógica de filtragem por semana. Isso vai envolver a adição de inputs pra selecionar a data inicial e final da semana que você deseja. Esses inputs podem ser do tipo date ou pode criar um intervalo de datas usando dois inputs.

Daí dentro da função handlerDownload, cê vai precisar implementar a lógica de filtragem. Aí você precisa verificar se cada atividade tá dentro do intervalo de datas selecionado. Se estiver, essa atividade deve ser incluída nos dados que serão baixados.

Depois filtrar os dados, você pode atualizar a tabela para exibir apenas as atividades da semana selecionada, se necessário.

Indico que você use o Discord da Alura caso queira chegar em mais pessoas para esse tipo de dúvida de cunho pessoal, lá temos uma comunidade bem grande e disposta a ajudar.

Um abraço e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software