diff --git a/docs/projects/centurion_erp/development/forms.md b/docs/projects/centurion_erp/development/forms.md index 2a0c893f..ab2795c7 100644 --- a/docs/projects/centurion_erp/development/forms.md +++ b/docs/projects/centurion_erp/development/forms.md @@ -51,6 +51,18 @@ All forms must meet the following requirements: ``` +## Details Form + +A details form is for the display of a models data. This form should inherit from a base form and contain any additional fields as is required for the display of the models data. Additional requirements are as follows: + +- `tab` is defined as a `dict` within the class. _See [Template](./templates.md#detail)._ + +- There is an `__init__` class defined that sets up the additional fields. + + !!! danger "Requirement" + Ensure that there is a call to the super-class `__init__` method so that the form is correctly initialised. i.e. `super().__init__(*args, **kwargs)` + + ## Abstract Classes diff --git a/docs/projects/centurion_erp/development/index.md b/docs/projects/centurion_erp/development/index.md index 382ba600..ca040fa5 100644 --- a/docs/projects/centurion_erp/development/index.md +++ b/docs/projects/centurion_erp/development/index.md @@ -19,6 +19,8 @@ Centurion ERP is a Django Application. We have added a lot of little tid bits th - [Models](./models.md) +- [Templates](./templates.md) + - [Testing](./testing.md) - [Views](./views.md) diff --git a/docs/projects/centurion_erp/development/templates.md b/docs/projects/centurion_erp/development/templates.md index 36d5cf04..31eddf4c 100644 --- a/docs/projects/centurion_erp/development/templates.md +++ b/docs/projects/centurion_erp/development/templates.md @@ -7,6 +7,17 @@ about: https://gitlab.com/nofusscomputing/infrastructure/configuration-managemen --- This section of the documentation contains the details related to the templates used within Centurion ERP for rendering data for the end user to view. + + +## Templates + +- Base + +- Detail + + +## Base + The base template is common to all templates and is responsible for the rendering of the common layout. Each subsequent template includes this template. This enables **ALL** pages within the site to share the same layout. ![Base template layout](./media/layout-template-view-base.png) @@ -16,11 +27,25 @@ Point of note is that the orange area of the template is what each template is " This view contains the following areas: - Page Header + + _Site header._ + - Navigation + + _Site navigation._ + - Page Title + + _represents the "what" to the contents of the page. i.e. for a device this would be the device name._ + - Content Area + + _The views content_ + - Page footer + _Site footer_ + !!! note This template should not be included directly as it is incomplete and requires subsequent templates to populate the contents of the orange area. @@ -36,7 +61,7 @@ This view contains the following areas: - Section navigation tabs - Section Content -The page title represents the "what" to the contents of the page. i.e. for a device this would be the device name. A detail page contains navigation tabs to aid in displaying multiple facets of an item, with each "tabbed" page containing one or more sections. Point of note is that the tabs are only rendered within the top section of each "tabbed" page. +A detail page contains navigation tabs to aid in displaying multiple facets of an item, with each "tabbed" page containing one or more sections. Point of note is that the tabs are only rendered within the top section of each "tabbed" page. Base definition for defining a detail page is as follows: @@ -55,3 +80,109 @@ Base definition for defining a detail page is as follows: {% endblock %} ``` + +!!! tip + Need to navigate directly to a tab, add `tab=` to the url query string + + +### Providing data for the view + +For the view to render the page, you must define the data as part of the form class. + + + + The variable name to use is `tabs` The layout/schema is as follows: + + +#### Full Example + +This example is a full example with two tabs: `details` and `rendered_config` + +``` python + +tabs: dict = { + "details": { + "name": "Details", + "slug": "details", + "sections": [ + { + "layout": "double", + "left": [ + 'name', + 'config_key_variable', + 'template', + 'organization', + 'c_created', + 'c_modified' + ], + "right": [ + 'model_notes', + ] + } + ] + }, + "rendered_config": { + "name": "Rendered Config", + "slug": "rendered_config", + "sections": [ + { + "layout": "single", + "fields": [ + 'config_variables', + ], + "json": [ + 'config_variables' + ] + } + ] + } +} + +``` + +additional fields can be defined as part of the form `__init__` method. + +``` python + +def __init__(self, *args, **kwargs): + + super().__init__(*args, **kwargs) + + self.fields['config_variables'] = forms.fields.JSONField( + widget = forms.Textarea( + attrs = { + "cols": "80", + "rows": "100" + } + ), + label = 'Rendered Configuration', + initial = self.instance.config_variables, + ) + + self.fields['c_created'] = forms.DateTimeField( + label = 'Created', + input_formats=settings.DATETIME_FORMAT, + disabled = True, + initial = self.instance.created, + ) + + self.fields['c_modified'] = forms.DateTimeField( + label = 'Modified', + input_formats=settings.DATETIME_FORMAT, + disabled = True, + initial = self.instance.modified, + ) + +``` + +You can add an edit button to any tab by defining the following as part of the `__init__` method: + +``` py + +self.tabs['details'].update({ + "edit_url": reverse('ITIM:_service_change', args=(self.instance.pk,)) +}) + +``` + +in this example, the details tab will display an `Edit` button. The `Edit` button will only display at the end of the first section of any tab it has been defined for. diff --git a/mkdocs.yml b/mkdocs.yml index 01f1527d..3f2d9ceb 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -152,12 +152,12 @@ nav: - projects/centurion_erp/development/models.md + - projects/centurion_erp/development/templates.md + - projects/centurion_erp/development/testing.md - projects/centurion_erp/development/views.md - - projects/centurion_erp/development/templates.md - - User: - projects/centurion_erp/user/index.md