linkedin2/templates/product.html

{% extends "base.html" %}

{% block title %}Главная{% endblock %}

{% block content %}
 <style>
    .select2-container {
      width: 100% !important;
    }
  </style>
  <style>
  .filter-link {
    font-size: 18px; /* Увеличиваем размер шрифта */
    font-weight: bold; /* Делаем текст жирным */
    padding: 10px 20px; /* Добавляем отступы для лучшего кликабельности */
    background-color: #7a61fe; /* Добавляем зелёный фон */
    color: white; /* Текст белый */
    border-radius: 5px; /* Слегка скругляем углы */
    text-align: center; /* Выравнивание по центру */
    cursor: pointer; /* Курсор в виде указателя при наведении */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Плавные анимации */
  }

  .filter-link:hover {
    background-color: #7a61fe; /* Темнее при наведении */
    transform: scale(1.002); /* Немного увеличиваем размер при наведении */
  }
</style>
 
                
                
                
                

   
        <!-- Другие поля формы -->
        

    
    {% include "filtr.html" %}
    

        
     

                <!-- BEGIN: Datatable -->



                <div class="intro-y datatable-wrapper box p-5 mt-5">
                    <table class="table table-report table-report--bordered display datatable w-full">
                        <thead>
                            <tr>
                                <th class="border-b-2 whitespace-no-wrap">TITLE &#10760;</th>
                                <th class="border-b-2 text-center whitespace-no-wrap">COMPANY &#10760;</th>
                                <th class="border-b-2 text-center whitespace-no-wrap">CLIENT &#10760;</th>
                                <th class="border-b-2 text-center whitespace-no-wrap">Requested on &#10760;</th>
                                <th class="border-b-2 text-center whitespace-no-wrap">Posted on &#10760;</th>
                                <th class="border-b-2 text-center whitespace-no-wrap">STATUS</th>
                                <th class="border-b-2 text-center whitespace-no-wrap">Assignee</th>


                                <th class="border-b-2 text-center whitespace-no-wrap">Applied on</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for job in jobs %}
                            <tr>
                                <td class="border-b">
                                    <a href="{{ job.job.link }}" target="_blank" class="font-medium whitespace-no-wrap">{{ job.job.job_title [:50] }}</a>
                                    <div class="text-gray-600 text-xs whitespace-no-wrap">{{ job.job.job_id  }}</div>
                                </td>
                                <td class="text-center border-b">{{job.job.job_company}}</td>
                                <td class="text-center border-b">
                                    
                                <a href="#" class="client-link text-blue-500" data-client-id="{{ job.client.id }}">{{ job.client.user_nicename }}</a>
            
                                </td>

                                <td class="text-center border-b">{{job.job.data_requested}}</td>
                                <td class="text-center border-b">{{job.job.date_posted}}</td>
                                <td class="text-center border-b">
                                    <select class="select2" onchange="updateStatus(this, '{{ job.id }}')">
                                        <option value="" {% if job.status is none %}selected{% endif %}>— Not selected —</option>
                                        <option value="Scheduled" {% if job.status == "Scheduled" %}selected{% endif %}>Scheduled</option>
                                        <option value="Requested" {% if job.status == "Requested" %}selected{% endif %}>Requested</option>
                                        <option value="In-Progress" {% if job.status == "In-Progress" %}selected{% endif %}>In-Progress</option>
                                        
                                        <option value="Paused" {% if job.status == "Paused" %}selected{% endif %} disabled>Paused</option>

                                        <option value="Applied" {% if job.status == "Applied" %}selected{% endif %}>Applied</option>
                                        <option value="Issues Applying" {% if job.status == "Issues Applying" %}selected{% endif %}>Issues Applying</option>
                                        <option value="Cancelled" {% if job.status == "Cancelled" %}selected{% endif %}>Cancelled</option>
                                    </select>
                                
                                </td>
                               <td class="text-center border-b">
                                    <select class="select2" onchange="updateAssignee(this, '{{ job.id }}')">
                                        <option value="" {% if job.assignee is none %}selected{% endif %}>— Not selected —</option>
                                        {% for user in users %}
                                            <option value="{{ user.id }}" {% if job.assignee == user.id %}selected{% endif %}>
                                                {{ user.username }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </td>
                                <td class="text-center border-b">-</td>
                            </tr>
                         {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                <!-- END: Datatable -->
<!-- Включаем модалку -->
<!-- Модальное окно -->
{% include "modal.html" %}
<script src="/static/dist/js/prod.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Инициализация Select2
    $('#clients-multiselect').select2();
    
    // Получение выбранных ID при изменении
    $('#clients-multiselect').on('change', function() {
        const selectedIds = $(this).val(); // Массив выбранных ID
        console.log("Selected Client IDs:", selectedIds);
        
        // Отправка на сервер (пример)
        fetch('/update-selected-clients', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token }}'
            },
            body: JSON.stringify({client_ids: selectedIds})
        })
        .then(response => response.json())
        .then(data => console.log(data));
    });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Инициализация всех select2
    $('.select2').select2();
    
    // Обработчик кнопки Search
    $('.button.bg-theme-1').on('click', function() {
        // Собираем все данные фильтров
        const filters = {
            clients: $('#clients-multiselect').val() || [],
            assignees: $('select[name="assignee"]').val() || [],
            statuses: $('select[placeholder="Select categories"]').val() || [],
            requested: $('#applied-select:eq(0)').val(),
            posted: $('#applied-select:eq(1)').val(),
            applied: $('#applied-select:eq(2)').val(),
            date_range: $('#date-range-input').val()
        };
        
        // Переходим на /productf с параметрами
        const queryString = new URLSearchParams();
        
        if (filters.clients.length) queryString.append('clients', filters.clients.join(','));
        if (filters.assignees.length) queryString.append('assignees', filters.assignees.join(','));
        if (filters.statuses.length) queryString.append('statuses', filters.statuses.join(','));
        if (filters.requested) queryString.append('requested', filters.requested);
        if (filters.posted) queryString.append('posted', filters.posted);
        if (filters.applied) queryString.append('applied', filters.applied);
        if (filters.date_range) queryString.append('date_range', filters.date_range);
        
        window.location.href = `/productf?${queryString.toString()}`;
    });
});
</script>

{% endblock %}