[APM-7] Feature enhancement for the create and edit folder directive (#3179)

* Add observable menu open state to the sidenav-layout component

* add documentation, fix inversed value

* Add success events to folder create/edit directives

* Overridable dialog titles for the directives

* Update the documentation
This commit is contained in:
Popovics András
2018-04-17 20:27:42 +01:00
committed by Eugenio Romano
parent 21ad4c2894
commit ee9393caf0
12 changed files with 569 additions and 242 deletions

View File

@@ -13,7 +13,9 @@ Creates folders.
```html
<adf-toolbar>
<button mat-icon-button
[adf-create-folder]="documentList.currentFolderId">
[adf-create-folder]="documentList.currentFolderId"
title="Title of the dialog"
(success)="doSomething($event)">
<mat-icon>create_new_folder</mat-icon>
</button>
</adf-toolbar>
@@ -30,12 +32,14 @@ Creates folders.
| Name | Type | Default value | Description |
| -- | -- | -- | -- |
| adf-create-folder | `string` | DEFAULT_FOLDER_PARENT_ID | Parent folder where the new folder will be located after creation. |
| title | `string` | null | The title of the opened dialog. |
### Events
| Name | Type | Description |
| -- | -- | -- |
| error | `EventEmitter<any>` | Emitted when an error occurs (for example a folder with same name already exists) |
| success | `EventEmitter<MinimalNodeEntryEntity>` | Emitted when the creation successfully happened |
## Details

View File

@@ -13,7 +13,9 @@ Allows folders to be edited.
```html
<adf-toolbar title="toolbar example">
<button mat-icon-button
[adf-edit-folder]="documentList.selection[0]?.entry">
[adf-edit-folder]="documentList.selection[0]?.entry"
title="Title of the dialog"
(success)="doSomething($event)">
<mat-icon>create</mat-icon>
</button>
</adf-toolbar>
@@ -30,12 +32,14 @@ Allows folders to be edited.
| Name | Type | Default value | Description |
| -- | -- | -- | -- |
| adf-edit-folder | `MinimalNodeEntryEntity` | | Folder node to edit. |
| title | `string` | null | The title of the opened dialog. |
### Events
| Name | Type | Description |
| -- | -- | -- |
| error | `EventEmitter<any>` | Emitted when an error occurs (for example a folder with same name already exists) |
| success | `EventEmitter<MinimalNodeEntryEntity>` | Emitted when the edition successfully happened |
## Details

View File

@@ -65,8 +65,7 @@ The layout will select between a small screen (ie, mobile) configuration and a l
configuration according to the screen size in pixels (the `stepOver` property sets the
number of pixels at which the switch will occur).
The small screen layout uses the Angular Material
[Sidenav component](https://material.angularjs.org/latest/api/directive/mdSidenav) which is
The small screen layout uses the Angular Material [Sidenav component](https://material.angularjs.org/latest/api/directive/mdSidenav) which is
described in detail on their website.
The ADF-style (ie, large screen) Sidenav has two states: **expanded** and **compact**.
@@ -83,6 +82,12 @@ Desktop layout (screen width greater than the `stepOver` value):
Mobile layout (screen width less than the `stepOver` value):
![Sidenav on mobile](../docassets/images/sidenav-layout-mobile.png)
### Public attributes
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| menuOpenState$ | Observable&lt;boolean&gt; | true | Another way to listen to menu open/closed state |
### Template context
Each template is given a context containing the following methods:
@@ -91,4 +96,13 @@ Each template is given a context containing the following methods:
Triggers menu toggling.
- `isMenuMinimized(): boolean`
Is the menu in minimized/compacted state? Only works for large screen layouts.
The expanded/compact (minimized) state of the navigation. This one only makes sense in case of desktop size, when the screen size is above the value of stepOver.
### menuOpenState$
Beside the template context's **isMenuMinimized** variable, another way to listen to the component's menu's open/closed state is the menuOpenState$ observable, which is driven by a BehaviorSubject at the background. The value emitted on this observable is the opposite of the isMenuMinimized template variable.
Every time the menu state is changed, the following values are emitted:
- true, if the menu got into opened state
- false, if the menu git into closed state