templates/vagas.html

{% extends 'base.html' %} {% block head %}
<link rel="stylesheet" href="../static/vagas.css" />
{% endblock %} {% block conteudo %}
<main class="page">
  <div class="container-vagas">
    <div class="header-page-vagas">
      <span id="header-field">Central de vagas</span>
    </div>
    <div class="card-column">
      <ul id="filter-head" class="filter-head">
        <li>
          <a href="{{ url_for('nova_vaga') }}">
            <i

              class="bi bi-door-open"

              title="Criar vaga"

              style="cursor: pointer"

            ></i>
          </a>
        </li>
        <div class="filter-content">
          <li class="dropdown">
            <i id="view-filter" class="bi-fnl bi-funnel"></i>
            <span class="dropdown-funnel">Filtrar por</span>
            <ul class="dropdown-menu">
              <li>Departamento</li>
              <li>Data de publicação</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"></i>
            <i id="show-hide" 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>
    <div class="card-container">
      <!-- Itere sobre as vagas para exibir os cards -->
      {% for vaga in vagas %}

      <div

        class="card-content {{vaga.departamento}}"

        data-vaga-id="{{ vaga.id }}"

      >
        <div id="status-bar-color" class="status-bar {{ vaga.status }}"></div>
        <div class="div-card-title">
          <h5 class="card-title">{{vaga.cargo}} | {{vaga.nivel}}</h5>
          <p class="card-departamento">{{vaga.departamento}}</p>
        </div>
        <p class="card-data-publicacao">
          Publicado em {{vaga.data_abertura.strftime('%d/%m/%Y')}}
        </p>
      </div>

      {% endfor %}
    </div>
  </div>
</main>

{% endblock %} {% block finalscript %}
<script src="https://cdn.datatables.net/2.0.3/js/dataTables.min.js"></script>
<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();

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

        var status = $("#status-bar-color").hasClass("ativo")

          ? "ativo"

          : "inativo";

        if (status === "ativo") {

          $(this).show();

        }

      });

      $("#view-filter").removeClass().addClass("bi-fnl 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-content").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("");

          $(".card-content .status-bar.inativo").parent().hide();

        });

      } else if (opcaoSelecionada === "data de publicação") {

        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("");

        });

      }

    });

  });

</script>
<script>

  $(document).ready(function () {

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

      itemSelector: ".card-content",

      layoutMode: "fitRows",

      percentPosition: true,

      fitRows: {

        gutter: 30,

      },

      transitionDuration: "0.3s",



      getSortData: {

        vaga: ".card-title",

        departamento: "[value]",

        data_publicacao: "[value]",

      },

    });



    $("#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: "*" });

        }

      }

    });



    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 () {

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

          return cardNome.includes(searchText);

        },

      });

    });

  });

</script>

<script>

  $("#vagas-link").toggleClass("active");

</script>

<script>

  $(document).on("click", ".card-content", function () {

    var vagaId = $(this).data("vaga-id");

    window.location.href = "/vagas/" + vagaId;

  });

</script>
<script>

  $(document).ready(function () {

    $(".bi-nc").click(function () {

      window.location.href = "/nova_vaga";

    });

  });

</script>

<script>

  $(document).ready(function () {

    // Ocultar inicialmente os cards com a classe "inativo" na barra de status

    $(".card-content .status-bar.inativo").parent().hide();

    var icon = $("#show-hide");

    icon.click(function () {

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

        var statusBar = $("#status-bar-color");

        var status = statusBar.hasClass("ativo") ? "ativo" : "inativo";

        var icon = $("#view-filter");



        if (status === "ativo") {

          $(this).show();

        } else {

          $(this).toggle();

        }

      });



      if (icon.hasClass("bi bi-eye-fill")) {

        icon.removeClass("bi bi-eye-fill").addClass("bi bi-eye-slash-fill");

        icon.attr("data-info", "hide");

      } else {

        icon.removeClass("bi bi-eye-slash-fill").addClass("bi bi-eye-fill");

        icon.attr("data-info", "show");

      }

    });

  });

</script>
<script>

  $(document).ready(function () {

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

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

    });

  });

</script>
{% endblock %}