templates/candidatos.html

{% extends 'base.html' %} {% block head %}
<link rel="stylesheet" href="../static/candidatos.css" />
{% endblock %} {% block conteudo %}
<div class="page-content">
  <div class="modal-choose-vaga">
    <span id="choose-vaga-modal">Selecione a vaga</span>
    <select name="choose-vaga-select" id="select-vaga">
      <option value="" disabled selected hidden></option>
      {% for vaga in vagas %}
      <option value="{{vaga.id}}">{{vaga.cargo}}</option>
      {% endfor %}
    </select>
    <i id="new-candidate" class="bi bi-filetype-pdf"></i>
  </div>
</div>
<main class="page">
  <div class="container-candidatos">
    <div class="header-page-candidatos">
      <span id="header-field">Candidatos</span>
    </div>
    <div class="card-column">
      <ul id="filter-head" class="filter-head">
        <li>
          <div class="icons-filter-add">
            <i

              class="bi-nc bi-person-plus"

              id="add-candidato"

              title="Adicionar candidato"

            ></i>
          </div>
        </li>
        <div class="filter-content">
          <li class="dropdown">
            <i class="bi-fnl bi-funnel" id="view-filter"></i>
            <span class="dropdown-funnel">Filtrar por</span>
            <ul class="dropdown-menu">
              <li>Departamento</li>
              <li>Data de cadastro</li>
              <li>Fase</li>
            </ul>
          </li>
          <select id="status-dropdown">
            <option value=""></option>
          </select>
        </div>
        <li>
          <div class="icons-filter">
            <i

              id="ordenar-az"

              class="bi-sort bi-sort-alpha-down"

              data-sort-by="nome"

            ></i>
            <i data-info="hide" class="bi bi-eye-slash-fill"></i>
          </div>
        </li>
        <li>
          <div class="container-input">
            <input

              type="text"

              placeholder="Pesquisar"

              name="text"

              class="input-search"

            />
            <svg

              xmlns="http://www.w3.org/2000/svg"

              width="16"

              height="16"

              fill="#000000"

              class="bi bi-search"

              viewBox="0 0 16 16"

            >
              <path

                d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"

              />
            </svg>
          </div>
        </li>
      </ul>
    </div>
    {% if candidatos|length == 0 %}
    <div class="no-cards-available">
      <i class="bi bi-emoji-frown"></i>
      <span>Nenhum candidato disponível</span>
    </div>
    {% endif %}
    <div class="card-container">
      {% for candidato in candidatos %}{% if candidato.nome != none %}

      <div class="card-content {{candidato.vaga.departamento}}">
        <div

          class="status-bar {{ candidato.status  | replace(' ', '_') }}"

          data-category="{{candidato.status}}"

        ></div>
        <a href="/candidatos/{{candidato.id}}">
          <div class="card-avaliacao">
            <span>{{candidato.avaliacao_ia}}</span>
          </div>
          <div class="div-card-title">
            <p id="card-nome">{{candidato.nome}}</p>
            <p class="card-vaga-cargo">{{candidato.vaga.cargo}}</p>
            <p class="card-email">{{candidato.email}}</p>
            <p class="card-telefone">{{candidato.telefone}}</p>
          </div>
          <div class="div-card-body">
            <p class="card-data-cadastro">
              Cadastrado em {{candidato.data_cadastro.strftime('%d/%m/%Y ')}}
            </p>

            <div

              class="card-departamento"

              data-category="{{candidato.vaga.departamento}}"

            >
              <a href="/vagas/{{candidato.vaga.id}}">
                {{candidato.vaga.departamento}}
              </a>
            </div>
          </div>
        </a>
      </div>

      {% endif %}{% endfor %}
    </div>
  </div>
</main>
{% include 'animation_publish.html' %} {% endblock %} {% block finalscript %}
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script>

  $(document).ready(function () {

    // Adiciona um ouvinte de evento para o clique em um item do menu dropdown

    $(".dropdown-menu li").click(function () {

      // Encontra o texto da opção selecionada

      var selectedText = $(this).text();

      // Atualiza o texto do span .dropdown-funnel com o texto da opção selecionada

      $(this).closest(".dropdown").find(".dropdown-funnel").text(selectedText);

      $(this)

        .closest(".dropdown")

        .find("#view-filter")

        .removeClass()

        .addClass("bi-funnel-fill")

        .attr("title", "Limpar filtros");

      // Fecha o menu dropdown

      $(this).closest(".dropdown").find(".dropdown-menu").slideUp();

    });



    // Adiciona um ouvinte de evento para o clique no link dropdown

    $(".dropdown-funnel").click(function () {

      // Encontra o menu dropdown correspondente

      var dropdownMenu = $(this).next(".dropdown-menu");

      // Alterna a visibilidade do menu dropdown

      dropdownMenu.slideToggle();

      $("#status-dropdown").empty();

    });



    function limparFiltros() {

      $(".dropdown-funnel").text("Filtrar por");

      $("#status-dropdown").empty();

      $("#view-filter").removeClass().addClass("bi-funnel");

    }



    // Evento de clique no botão de limpar filtro

    $("#view-filter").click(function () {

      limparFiltros();

    });

  });

</script>
<script>

  $(document).ready(function () {

    $(".dropdown-menu li").click(function () {

      $(".card-candidatos").show();

      var opcaoSelecionada = $(this).text().toLowerCase();



      // Atualiza o texto do span para refletir a opção selecionada

      $(".dropdown-funnel").text(

        opcaoSelecionada.charAt(0).toUpperCase() + opcaoSelecionada.slice(1)

      );



      // Atualiza o valor do select com base no filtro selecionado

      if (opcaoSelecionada === "departamento") {

        // Preencha o select com departamentos

        var departamentos = [];



        $(".card-departamento").each(function () {

          var departamento = $(this).text().trim();

          if (!departamentos.includes(departamento)) {

            departamentos.push(departamento);

          }

        });



        // Limpa o select

        $("#status-dropdown").empty();



        // Adiciona as opções ao select

        departamentos.forEach(function (departamento) {

          $("#status-dropdown").append(

            '<option data-filter=".' +

              departamento +

              '" value="' +

              departamento +

              '">' +

              departamento +

              "</option>"

          );

          $("#status-dropdown").val("");

        });

      } else if (opcaoSelecionada === "data de cadastro") {

        var datas = ["15 dias", "30 dias", "45 dias"];

        $("#status-dropdown").empty();

        datas.forEach(function (data) {

          $("#status-dropdown").append(

            '<option data-filter=".' +

              data.trim() +

              ' " value="' +

              data.trim() +

              '">' +

              data.trim() +

              "</option>"

          );

          $("#status-dropdown").val("");

        });

      } else if (opcaoSelecionada === "fase") {

        var statusList = [];



        $(".status-bar").each(function () {

          var status = $(this).attr("class").split(" ")[1]; // Remove a classe "status-bar" e espaços em branco

          if (!statusList.includes(status)) {

            statusList.push(status);

          }

        });



        // Limpa o select

        $("#status-dropdown").empty();



        // Adiciona as opções ao select

        statusList.forEach(function (status) {

          $("#status-dropdown").append(

            '<option data-filter=".' +

              status +

              '" value="' +

              status +

              '">' +

              status.replace("_", " ") +

              "</option>"

          );

          $("#status-dropdown").val("");

        });

      }

    });

  });

</script>
<script>

  $(document).ready(function () {

    var $listing = $(".card-container").isotope({

      layoutMode: "fitRows",

      fitRows: {

        gutter: 5,

      },



      getSortData: {

        nome: "#card-nome",

      },

    });



    $("#status-dropdown").change(function () {

      var opcaoSelecionada = $(".dropdown-funnel").text();

      var filterValue = $(this)

        .children("option:selected")

        .attr("data-filter")

        .trim();

      if (opcaoSelecionada === "Departamento") {

        $listing.isotope({ filter: filterValue });

      } else if (opcaoSelecionada === "Data de cadastro") {

        var hoje = new Date();

        var filtroDias;



        if (filterValue === ".15 dias") {

          filtrarPorData(15);

        } else if (filterValue === ".30 dias") {

          filtrarPorData(30);

        } else if (filterValue === ".45 dias") {

          filtrarPorData(45);

        } else {

          // Se nenhuma opção for selecionada, exibe todos os itens

          $listing.isotope({ filter: "*" });

        }

      } else if (opcaoSelecionada === "Fase") {

        var faseSelecionada = $(this).children("option:selected").attr("value");

        filtrarPorFase(faseSelecionada);

      }

    });



    function filtrarPorFase(faseSelecionada) {

      $listing.isotope({

        filter: function () {

          // Verifica se o candidato atual tem a classe de status correspondente à fase selecionada

          var statusCandidato = $(this)

            .find(".status-bar")

            .attr("class")

            .split(" ")[1];



          // Retorna true se a fase selecionada estiver presente nas classes de status do candidato atual

          return statusCandidato === faseSelecionada;

        },

      });

    }

    function filtrarPorData(filtroDias) {

      var hoje = new Date();

      var dataCorte = new Date(hoje);

      dataCorte.setDate(hoje.getDate() - filtroDias);

      $listing.isotope({

        filter: function () {

          var dataPublicacaoStr = $(this)

            .find(".card-data-cadastro")

            .text()

            .trim();

          dataPublicacaoStr = dataPublicacaoStr.replace(

            /^Cadastrado\s+em\s+/i,

            ""

          );

          var partesData = dataPublicacaoStr.split("/");

          var dia = parseInt(partesData[0], 10); // Converte o dia para número inteiro

          var mes = parseInt(partesData[1], 10) - 1; // Converte o mês para número inteiro (0-based)

          var ano = parseInt(partesData[2], 10);

          var dataTexto = new Date(ano, mes, dia);

          return dataTexto >= dataCorte;

        },

      });

    }



    $("#view-filter").click(function () {

      $listing.isotope({ filter: "*" });

    });



    $("#ordenar-az").click(function () {

      var $biSort = $("#ordenar-az");

      if ($biSort.hasClass("bi-sort-alpha-down")) {

        $biSort.removeClass().addClass("bi-sort-alpha-up-alt");

        $listing.isotope({ sortBy: "vaga", sortAscending: false });

      } else {

        $biSort.removeClass().addClass("bi-sort-alpha-down");

        $listing.isotope({ sortBy: "vaga", sortAscending: true });

      }

    });

    $(".input-search").on("input", function () {

      var searchText = $(this).val().toLowerCase();

      $listing.isotope({

        filter: function () {

          // Obtém o texto do nome do card atual

          var cardNome = $(this).find("#card-nome").text().toLowerCase();

          // Retorna true se o texto do nome do card contiver o texto de pesquisa

          return cardNome.includes(searchText);

        },

      });

    });

  });

</script>
<script>

  $(document).ready(function () {

    $("#candidatos-navbar-a").toggleClass("active");

  });

</script>
<script>

  $(document).ready(function () {

    $("#header-field").click(function () {

      location.reload(); // Atualiza a página

    });

  });

</script>
<script>

  $(document).ready(function () {

    $(".icons-filter-add").click(function () {

      $(".page-content").fadeIn(300);

    });

  });

</script>
<script>

  $(document).ready(function () {

    // Função para fechar o modal ao clicar fora dele

    $(document).mouseup(function (e) {

      var container = $(".modal-choose-vaga");

      var pageContent = $(".page-content");

      // Verifica se o clique foi fora do modal ou no ícone do PDF

      if (

        !container.is(e.target) &&

        container.has(e.target).length === 0 &&

        !$("#upload-pdf").is(e.target)

      ) {

        pageContent.hide(); // Esconde o page content

      }

    });

  });

</script>

{%endblock %}