Django + Django-filter + DRF + Ajax - dynamiczne buttony filtrujace wyniki

[krplo...@gmail.com]

Wtam,

Mam pewien problem otoz, proboje stworzyc w Django buttony ktore by dynamicznie filtrowaly wyniki. Podobnie do tych ktore sa na stronie https://justjoin.it/brands tj. filtrowanie po miescie i rodzaju firmy za pomoca przyciskow (obecnie mam to tylko, za pomoca formularza i selectow ale to brzydko wyglada) i chce zrobic to w formie przyciskow. Do tej pory zrobilem tak:

model Firmy, view z filtrem django-filter ktory umozliwa filtrowanie po rodzaju firmy, miescie, nastepnie stworzylem API z uzyciem django rest framework ktore jest dostepne na localhost/api/companies

Wszystko dziala poki co jak nalezy, ale utknalem w miejscu tj. nie wiem co dalej, czy utworzyc buttony i napisac w jQuery jakas funkcje ktora przekaze wartosci filtrowania do buttonow czy jak, ponizej screen pogladaowy

jak by to mialo wygladac

jak wyglada u mnie

ponizej kod

#models.py

from django.db import models
from django.db import models
from django.utils import timezone
from django.utils.text import slugify
from django.core.validators import MinValueValidator
from multiselectfield import MultiSelectField
import django_filters

TYPES = (
        ('Startup', 'Startup'),
        ('Software House', 'Software House'),
        ('E-commerce', 'E-commerce'),
        ('Corporation', 'Corporation'),
    )

CITIES = (
         ('Warszawa', 'Warszawa'),
         ('Poznan', 'Poznan'),
         ('Szczecin', 'Szczecin'),
         ('Gdansk', 'Gdansk'),
         ('Krakow', 'Krakow'),
         ('Wroclaw', 'Wroclaw'),
         ('Katowice', 'Katowice'),
         ('Gliwice', 'Gliwice')

    )

COMPANY_TECHNOLOGIES = (
        ('PHP', 'PHP'),
        ('js', 'JavaScript'),
        ('ang', 'Angular'),
        ('java', 'Java'),
        ('ruby', 'Ruby'),
        ('ror', 'Ruby on Rails'),
        ('jee', 'Java EE'),
        ('python', 'Python'),
        ('django' , 'Django'),
    )

STUDENTS = (
        ('No', 'No'),
        ('Yes', 'Yes')
    )


class Company(models.Model):
    name = models.CharField(max_length=100, blank=False)
    students = models.CharField(max_length=3, choices=STUDENTS)
    type = models.CharField(max_length=15, choices=TYPES)
    workers = models.PositiveIntegerField(validators=[MinValueValidator(1)])
    city = models.CharField(max_length=15,choices=CITIES)
    stack = MultiSelectField(choices=COMPANY_TECHNOLOGIES)
    stack_two = models.CharField(max_length=15, choices=COMPANY_TECHNOLOGIES, default='value')
    company_about = models.TextField(max_length=500, blank=False)  
    created_date = models.DateTimeField(default=timezone.now)
    published_date = models.DateTimeField(blank=True, null=True)
    slug = models.SlugField(unique=True)
    icon = models.ImageField(blank=True, null=True)
    image = models.ImageField(blank=True, null=True)

    def save(self, *args, **kwargs):
        self.slug = slugify(self.name)
        super(Company, self).save(*args, **kwargs)

    def publish(self):
        self.published_date = timezone.now()
        self.save()
       
    def __str__(self):

        return self.name

## views.py

from django.shortcuts import render, get_object_or_404, redirect
from django.utils import timezone
from .models import Company
from .filters import CompanyFilter
from rest_framework import viewsets
from .serializers import CompanySerializer
# Create your views here.

def companies_list(request):
    my_companies = Company.objects.all()

    ## filter by company type
    type = request.GET.get('type')
    if type:
        my_companies = Company.objects.filter(type=type)
    ## filter by company city
    city = Company.objects.all()
    if city:
        my_companies = Company.objects.filter(city=city)
    ## filter by company technologies
    stack = request.GET.get('stack')
    if stack:
        my_companies = Company.objects.filter(city=city)

    my_companies = my_companies.order_by('published_date')
    return render(request, 'company/companies_list.html', {'my_companies': my_companies})

def comp_list(request):
    f = CompanyFilter(request.GET, queryset=Company.objects.all())
    return render(request, 'company/comp_list.html', {'filter': f})

##def brands(request, slug):
  ##  brands = Company.objects.all()
    ##return render(request, 'company/comp_view.html', {'brands': brands})

def brands(request, pk):
    brand = get_object_or_404(Company, pk=pk)
    return render(request, 'company/comp_view.html', {'brand': brand})

#rest api


class CompanyViewSet(viewsets.ModelViewSet):
    """
    API endpoint that allows groups to be viewed or edited.
    """
    queryset = Company.objects.all()
    serializer_class = CompanySerializer

#urls.py

from django.urls import path
from django.conf.urls import url
from . import views
from django_filters.views import object_filter
from company.models import Company

urlpatterns = [
##    temporary disabled
    path('', views.comp_list, name='comp_list'),
    path('brands/', views.comp_list, name='comp_list'),    
    path('brands/<int:pk>/', views.brands, name='brands'),
    path('brands/<slug:slug>/', views.brands, name='comp_view'),
    url(r'^list/$', object_filter, {'model': Company}),

]

#filters.py

import django_filters
from .models import Company, COMPANY_TECHNOLOGIES
from django_filters import ChoiceFilter

class CompanyFilter(django_filters.FilterSet):

    class Meta:
        model = Company
        fields = ['type', 'city', 'students']

    def __init__(self, *args, **kwargs):
        super(CompanyFilter, self).__init__(*args, **kwargs)
        self.filters['type'].extra.update(
            {'empty_label': 'All'})
        self.filters['city'].extra.update(
            {'empty_label': 'All'})
        self.filters['students'].extra.update(
            {'empty_label': 'All'})

#serializers.py

from .models import Company
from rest_framework import serializers


class CompanySerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Company
        fields = ('url', 'type', 'city', 'stack', 'students')



Prosz o jakies sugestie jak to rozwiazac bo ja juz nie wiem, wiem ze trzeba to zrobic z uzyciem Ajax i JSona ale nie wiem jak to zlozyc w calosc
   

[Maciek Olko]

Najprościej możnaby dodać klasę do elementów, która powodowałaby ich ukrycie. Endpoint powinien uwzględniać filtry i przesyłać np. listę ID elementów wynikowych. Funkcja JS powinna iterować po elementach i aktualizowała by obecność klasy odpowiedzialnej za ukrywanie.

--
Otrzymujesz tę wiadomość, bo subskrybujesz grupę „django-pl - grupa polskiej społeczności Django” w Grupach dyskusyjnych Google.
Aby anulować subskrypcję tej grupy i przestać otrzymywać od niej wiadomości, wyślij e-maila na django-pl+...@googlegroups.com.
Aby opublikować wpis w tej grupie, wyślij e-maila na djan...@googlegroups.com.
Otwórz tę grupę na https://groups.google.com/group/django-pl.
Więcej opcji znajdziesz na https://groups.google.com/d/optout.

[krplo...@gmail.com]

Dzieki wielkie @Maciek, jak skoncze apke aby byla w pelni funkcjonalna to biore sie za to