Metadata-Version: 1.1
Name: django-angular-dynamic-forms
Version: 0.5.1
Summary: Angular forms for django rest framework
Home-page: https://github.com/mesemus/django-angular-dynamic-forms
Author: Mirek Simek
Author-email: miroslav.simek@gmail.com
License: MIT
Description: # Django Rest Framework integration with Angular dynamic forms
        
        The aim of this project is to enable easy creation of Angular2 UI 
        for django web applications. Django side provides REST api (via 
        django-rest-framework) and optionally layout information. Angular2
        side provides implementation of dynamic form that automatically downloads
        layout information and initial data from the REST api, renders form,
        submits data to django server, displays validation errors and after
        successful submission notifies the parent component. There are two 
        implementations: 
        * "in-page" - the form is rendered directly in the parent container
        * "dialog"  - caller can use `DjangoFormDialogService.open(...)`
          to open create/edit in dialog and be notified when the dialog is
          closed. 
        
        # Demo application
         * clone the project
         * create new virtualenv for django project:
        ```
          virtualenv --python=python3 venv
          source venv/bin/activate
        ```
         * run django sample server
        ```
          cd lib/sandbox-django/testserver
          export DJANGO_SETTINGS_MODULE=testserver.settings
          ./manage.py migrate
          ./manage.py runserver 8000
        ```
         * install dependencies
        ```
          npm install
        ``` 
         * run the demo
        ```
         ng serve
        ``` 
         * Point browser to `http://localhost:4200` and enjoy
        
        # Usage
        
        ## Django side
        
        In order to render the form, angular part of the library needs 
        to obtain additional metadata from django rest framework
        - definition of fields and their layout. This functionality 
        is implemented in `AngularFormMixin` that adds a new path
        `.../form/` returning the metadata. For example:
        
        ```
        > curl http://localhost:8000/api/1.0/cities/form/
        
        {
            "method": "post",
            "form_title": "Creating a new city",
            "layout": [
                {
                    "read_only": false,
                    "id": "name",
                    "max_length": 100,
                    "type": "string",
                    "label": "Name",
                    "required": true
                }
            ],
            "has_initial_data": false,
            "actions": [
                {
                    "id": "create",
                    "label": "Create"
                },
                {
                    "id": "cancel",
                    "cancel": true,
                    "label": "Cancel"
                }
            ]
        }
        
        ``` 
        
        
        When defining ViewSet, use this mixin:
        
        ```
        class CityViewSet(AngularFormMixin, viewsets.ModelViewSet):
            """
            API for cities
            """
            queryset = City.objects.all()
            serializer_class = CitySerializer
            permission_classes = (permissions.AllowAny,)
        ```
        
        and use Router or register the path yourself:
        
        ```
        router = DefaultRouter()
        router.register(r'cities', CityViewSet)
        
        urlpatterns = [
            url(r'^', include(router.urls)),
        ]
        ```
        
        ## Angular side
        
        ### In-page
        
        For the in-page use case, add `<inpage-django-form>` tag directly into
        the template and bind the `django_url` to:
         * collection URL to create a new object inside the collection (for example, `http://localhost:8000/api/1.0/cities/`)
         * concrete object to edit the object  (for example, `http://localhost:8000/api/1.0/cities/1/`)
        
        Optionally bind `submit` and `cancel` events to get notification after 
        the form was submitted or cancelled.
        
        See `app.component.html` for a working example.
        
        ### Dialog
        
        The dialog version is even easier to use:
        
        ```
            constructor(private dialog: DjangoFormDialogService) {}
            
            private open() {
                this.dialog.open('http://localhost:8000/api/1.0/cities/', 
                // ok
                (data, response) => {
                    console.log('submit ok', data, response);
                }, 
                // cancel
                data => {
                    console.log('submit cancelled', data);
                });
            }
        ```
        
        # Documentation
        
        TBD
        
Keywords: django-rest-framework django angular2 forms ng-dynamic-forms
Platform: UNKNOWN
Classifier: Development Status :: 3 - Alpha
Classifier: Intended Audience :: Developers
Classifier: Topic :: Software Development :: Libraries
Classifier: License :: OSI Approved :: MIT License
Classifier: Programming Language :: Python :: 3.4
Classifier: Programming Language :: Python :: 3.5
Classifier: Programming Language :: Python :: 3.6
