Make DRF browsable API Interfaces for filters

[iamtio]

Can anyone make DRF browsable API Interfaces for filters like django-filter have? It would be cool feature.
My example

[florianm]

@iamtio that's a neat snippet, thanks for sharing!

FYI I got it to work like so:

Django==1.10.6
djangorestframework==3.6.1
djangorestframework-filters==0.9.1
djangorestframework-gis==0.11

api.py: I changed your template string to be a Template, and template_render to Template.render().

from django.template import Context, Template

class InBBoxHTMLMixin:
    template = Template("""
    {% load i18n %}
    <style type="text/css">
    #geofilter input[type="text"]{
        width: 100px;
    }
    </style>
  <h2>{% trans "Limit results to area" %}</h2>
    <form id="geofilter" action="" method="get">

        <div class="form-group row">
            <div class="col-md-2"></div>
            <div class="col-md-2">
            <div class="controls">
            <input type="text" class="form-control" id="gf-north" placeholder="North">
            </div>
            </div>
        </div>

        <div class="form-group row">
            <div class="col-md-2">
            <div class="controls">
            <input type="text" class="form-control" id="gf-west" placeholder="West">
            </div>
            </div>

            <div class="col-md-2"></div>
            <div class="col-md-2">
            <div class="controls">
            <input type="text" class="form-control" id="gf-east" placeholder="East">
            </div>
            </div>
        </div>

        <div class="form-group row">
            <div class="col-md-2"></div>
            <div class="col-md-2">
            <div class="controls">
            <input type="text" class="form-control" id="gf-south" placeholder="South">
            </div>
            </div>
        </div>

        <input id="gf-result" type="hidden" name="{{bbox_param}}">
        <button type="submit" class="btn btn-primary">{% trans "Submit" %}
        </button>
    </form>
    <script language="JavaScript">
    (function() {
        document.getElementById("geofilter").onsubmit = function(){
            var result = document.getElementById("gf-result");
            var box = [
                document.getElementById("gf-south").value,
                document.getElementById("gf-west").value,
                document.getElementById("gf-north").value,
                document.getElementById("gf-east").value
            ];
            if(!box.every(function(i){ return i.length }))
                return false;
            result.value = box.join(",");
        }
    })();
    </script>
    """)

    def to_html(self, request, queryset, view):
        return self.template.render(Context({'bbox_param': self.bbox_param}))


class CustomBBoxFilter(InBBoxHTMLMixin, InBBoxFilter):
    bbox_param = 'position_bbox'


class MySerializer(GeoFeatureModelSerializer):

    pagination_class = GeoJsonPagination
    filter_backends = (CustomBBoxFilter, DjangoFilterBackend, )

Now someone make this into a little leaflet map to draw the bbox and we're cookin'!

[sebclarke]

Sorry if this is the wrong place to report this, but I am interested in having this as well for the standard GeometryFilter as well as the InBBoxFilter.

It also seems to be almost there already... I notice that the GeometryFilter defines a custom widget, but uses the BaseGeometryWidget from the django gis forms. When I try and browse the api section with this filter using DRF interface, I get an error about the template name being a folder, presumably as the BaseGeometryWidget does not define an actual template.

I tried substituting OpenLayersWidget for BaseGeometryWidget in the GeometryFilter's init call, and that stops the error showing, but judging by the javascript errors I then see on the console, it looks like it is not including the pre-requisite javascript definitions from the Media subclass in the OpenLayersWidget class from the gis form widgets.

I am now kinda stuck, as I do not understand the internals of how the DRF api browsing pages are put together, and how that Javascript is supposed to end up getting included. Any thoughts or ideas? Is this a sensible approach or am I barking completely up the wrong tree? Apologies if any of this is unclear, I am completely new to DRF in general, and this GIS extension in particular - however, if someone could explain how this should be done I would be more than happy to try and implement it and submit a pull request!

[nemesifier]

@blueyed do you have any useful suggestion for @sebclarke?

[blueyed]

@nemesisdesign
No, sorry.