Coder Social home page Coder Social logo

drf_htmx_renderer's Introduction

DRF HTMX Renderer

DRF HTMX Renderer is a (renderer)[https://www.django-rest-framework.org/api-guide/renderers/] for Django REST Framework.

In the vain of the browsable API or the admin renderer shipped with DRF, it allows for browsing the API directly in your browser and making it fully human-friendly.

To learn more about this project, you can watch this talk - Slides available here.

The aim of the project is to provide a customizable and extendable interface for data management that can be presented to the final user.

Install

With pip

pip install drf-htmx-renderer

From github

git clone [email protected]:nanuxbe/drf_htmx_renderer.git
cd drf_htmx_renderer
pip install -e .
pip install -r requirements-dev.txt

python manage.py runserver

Settings

Add these to Django settings.py

DRF_AUTO_METADATA_ADAPTER = 'htmx_renderer.adapters.HTMXEndpointAdapter'
DRF_AUTO_BASE_SERIALIZER = 'htmx_renderer.serializers.HTMXModelSerializer'
DRF_AUTO_BASE_VIEWSET = 'htmx_renderer.views.ModelViewSet'

REST_FRAMEWORK = {
    'DEFAULT_RENDERER_CLASSES': [
        'htmx_renderer.renderers.TemplateHTMLRenderer',
        'rest_framework.renderers.JSONRenderer',
    ],
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
    'PAGE_SIZE': 50,
}

Add htmx_renderer in to INSTALLED_APPS:

INSTALLED_APPS = [
    ...

    # API
    'rest_framework',
    'drf_auto_endpoint',
    'htmx_renderer',

    # TEMPLATES
    'bootstrap5',
    'mathfilters',
]

URLs

Add this to the main urls.py

from drf_auto_endpoint.router import router

urlpatterns = [
    ...
    path('api/v1/', include(router.urls)),
    ...
]

Getting started

Create an endpoint for your model

Inside <your_app>/endpoints.py create an endpoint:

from drf_auto_endpoint.endpoints import Endpoint
from drf_auto_endpoint.router import register

from .models import MyModel


@register
class MyModelEndpoint(Endpoint):
    model = MyModel

Restart Django's development serve and point it to http://localhost:8000/api/v1/

For further customization of your endpoint, refer to DRF-Schema-Adapter's documentation

Building

This project uses standardized pyproject.toml for the package. To build it simply invoke

python -m build

(note, you may need to install build package first).

To install package in development mode you can use

pip install -e .

Development

Sample (demo) app

One way to start the development is to run our demo app and explore examples. Source code is available in sample subdirectory.

Create migrations

python manage.py migrate

Start development server

python manage.py runserver

drf_htmx_renderer's People

Contributors

gbdlin avatar lauranox avatar nanuxbe avatar snowkoli avatar viciu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

drf_htmx_renderer's Issues

Enable wizards

Wizards are detail or bulk actions that have a serializer attached to them, usually requiring a POST.

The idea here is, when performing a GET, the form for that serializer would be renderered

The new method on the ViewSet could b transfered to this mechanism later on

Add settings

Currently identified:

  • ability to use DRF's render_form templatetag or this package's widgets
  • themes?

Feel free to suggest more

Form widgets

Create widgets (ie: templates) for the following field types:

  • checkbox
  • null-boolean
  • number (default widget)
  • foreignkey
  • tomany-table
  • textarea
  • select
  • date (default widget)
  • time (default widget)
  • datetime (default widget)
  • text (default widget)
  • email (default widget)
  • url
  • manytomany-lists
  • generic-foreignkey
  • duration
  • file
  • image
  • tabset
  • json

Permission check

Check permissions before displaying buttons:

  • Create new
  • Edit
  • Delete

Retrieve:
check edit permission and display a readonly version of the form if the user is not allowed to edit

UX: Add interactivity to notify the user something is happening

When using a slow connection it's not always obvious that clicking on a link or a button did anything:

Use AlpineJS or HTMX's swap mechanism to add interactivity, for example:

  • disable a button/link after clicking it
  • add loading animations
  • add transitions

Attach errors to fields

This might not be possible when using widgets and not DRF's render_form

Use AlpineJS to attach form validation error messages to fields.

This will probably require a rework of the 400 error template

Conditional display

DRF Schema adapter provides the ability to specify conditional display.

Create a templatetag that checks for the condition and renders the widget or not. This templatetag could be used in the _include_field.htnl template

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.