# Angular Smart Workspace
 [](https://GitHub.com/srukshan98) [](https://github.com/srukshan98/ngs-workspace/issues) [](https://github.com/srukshan98/ngs-workspace)
This Library introduces an Intelligent way to hold your components dynamically in a tabular format in a modern side panel.
Below documentation is a 90% plagiarisation of Angular Mat Dialog documentation.
# Overview
The `NgsWorkspace` service can be used to open workspaces with Material Design styling and animations into a modern looking side panel.
### [Demo Link](https://stackblitz.com/github/srukshan98/ngs-workspace-sample)
The `NgsWorkspaceModule` should be added to the app module with optional default configuration ([IWorkspaceConfig](##-IWorkspaceConfig)).
```
@NgModule({
imports: [
...
NgsWorkspaceModule.forRoot({
placeholderComponent: NoTabComponent
}),
...
],
})
export class AppModule { }
```
A workspace is opened by calling the open method with a component to be loaded and an optional config object ([IWorkspaceTabConfig](##-IWorkspaceTabConfig)). The open method will return an instance of [NgsWorkspaceTabRef](##-WorkspaceTabRef):
```
let workspaceRef = workspace.open(UserProfileComponent, {
title: 'User Profile'
});
```
The NgsWorkspaceTabRef provides a handle on the opened workspace tab. It can be used to close the workspace tab and to receive notification when the workspace tab has been closed.
```
workspaceRef.afterClosed().subscribe(result => {
console.log(`Workspace result: ${result}`); // Cool!
});
workspaceRef.close('Cool!');
```
Components created via NgsWorkspace can inject NgsWorkspaceTabRef and use it to close the workspace in which they are contained. When closing, an optional result value can be provided. This result value is forwarded as the result of the afterClosed promise.
```
@Component({/* ... */})
export class YourWorkspaceTab {
constructor(public workspaceRef: NgsWorkspaceTabRef) { }
closeWorkspaceTab() {
this.workspaceRef.close('Cool!');
}
}
```
### Sharing data with the Workspace Tab component.
If you want to share data with your workspace tab, you can use the data option to pass information to the workspace tab component.
```
let workspaceRef = workspace.open(YourWorkspaceTab, {
data: { name: 'austin' },
});
```
To access the data in your workspace tab component, you have to use the `WORKSPACE_DATA` injection token:
```
import {Component, Inject} from '@angular/core';
import {WORKSPACE_DATA} from 'ngs-workspace';
@Component({
selector: 'your-workspace',
template: 'passed in {{ data.name }}',
})
export class YourWorkspaceTab {
constructor(@Inject(WORKSPACE_DATA) public data: {name: string}) { }
}
```
### Handling Errors Globally
```
this.workspace.emitErrors.subscribe((err: WorkspaceErrorModel) => {
if (err.message) {
this.snackBar.open(err.message);
}
});
```
### Adding Custom header to workspace
Add this to any html template in your project
```
```
or attach the template Reference or Component to workspace service to dynamically set the header
```
this.workspace.attachHeader(header);
```
# API reference
```
import {NgsWorkspaceModule} from 'ngs-workspace';
```
## Services
## NgsWorkspace
Service to open NgsWorkspace Tab.
### Properties
| Name | Description |
|---|---|
| slide: BehaviorSubject<'in' \| 'out'> | Slide in and out the workspace |
| afterAllClosed: Observable | Stream that emits when all open tabs have finished closing.|
| tabCount: Observable | An Observable that will emit on Tab count changes |
| onTabClosed: Subject> | An observable which will emit if a tab is closed |
| afterOpened: Subject> | Stream that emits when a tab has been opened. |
| openWorkspaces: WorkspaceTabRef[] | Keeps track of currently-open workspace tabs |
| emitErrors: Subject | Stream that emits all tab errors |
### Methods
| closeAll |
|---|
| Close all of the currently-open tabs |
| getWorkspaceById ||
|---|---|
| Finds an open tab by its id ||
| **Parameters** ||
| id
*number* | ID to use when looking up the tab|
| Returns ||
| WorkspaceTabRef\ \| undefined ||
| open ||
|---|---|
| Opens a workspace tab containing the given component ||
| **Parameters** ||
| component
*ComponentType\* | Type of the component to load into the tab |
| config?
*IWorkspaceTabConfig\* | Extra Configuration Options |
| Returns ||
| WorkspaceTabRef\ ||
| attachHeader ||
|---|---|
| Attach the given component or Template as the workspace header ||
| **Parameters** ||
| headerRef
*TemplateRef\ \| ComponentType\* | Type of the component or Template to load as the header |
## Directives
## WorkspaceClose
Button that will close the current workspace tab
Selector: ```[ngsWorkspaceClose]```
## WorkspaceHeader
A structural directive which will take it's content and add it to the workspace header.
Selector: ```[ngsWorkspaceHeader]```
## Classes
## WorkspaceTabRef
Reference to a tab opened via NgsWorkspace Service.
### Properties
| Name | Description |
|---|---|
| referenceId: number ||
| componentRef: ComponentRef\ | reference to component opened in tab |
### Methods
| close ||
|---|---|
| Close current workspace tab ||
| **Parameters** ||
| data
*R* | Data to passes down to parent component |
| minimize |
|---|
| Minimize the workspace |
| onTabVisit |
|---|
| Gets an observable that is notified when the tab is been visited |
| Returns |
| Observable\ |
| onTabLeave |
|---|
| Gets an observable that is notified when the tab is been left |
| Returns |
| Observable\ |
| onClose |
|---|
| Gets an observable that is notified when the tab is been closed |
| Returns |
| Observable\ |
| onOpen |
|---|
| Gets an observable that is notified when the tab is been opened |
| Returns |
| Observable\ |
## Interfaces
## IWorkspaceTabConfig
Configuration for opening a workspace tab with the NgsWorkspace service
### Properties
| Name | Description |
|---|---|
| title?: string | Title of the Workspace tab |
| data?: D \| null | Data being injected into the child component.|
| disableClose?: boolean | Whether the user can click on the tab close button to close the modal |
## IWorkspaceConfig
Configuration for workspace module root function
### Properties
| Name | Description |
|---|---|
| title?: string | Title of the Workspace tab |
| disableClose?: boolean | Whether the user can click on the tab close button to close the modal |
| minimizeOnNavigation?: boolean | Trigger the workspace to minimize on route change |
| maxWidth?: number \| string | Set a maximum workspace width |
| minWidth?: number \| string | Set a minimum workspace width |
| width?: number \| string | Set the initial workspace width |
| maxTabCount?: number | Limit the tab Count. Default to -1 (inifinite) |
| placeholderComponent?: ComponentType | Component to be rendered as empty workspace UI |
| direction?: 'RTL' \| 'LTR' | Direction in which the workspace is expanded |
| showSideBtn?: boolean | Set side button visibility |
| classes?: StyleType | object of custom class names to customize workspace |
| handleTabClose?: boolean | Disable workspace tab close button |
| tabChangeAnimation?: boolean | Visibility of tab change animation |
| animationDuration?: number | Duration of workspace animation in ms |
| animationTiming?: WorkspaceAnimationTimingType | Workspace animation Timing Function |
## WorkspaceErrorModel
Error Model Type the Workspace emits errors
### Properties
| Name | Description |
|---|---|
| ref: WorkspaceTabRef\ | Reference the Workspace tab |
| errorV2: WorkspaceErrorTypesV2 | Error Type enum.|
| message?: string | The Error message for the error, if any. |
| content?: string | The Error content, if any. |
## StyleType
Object of custom class names to customize workspace
### Properties
| Name | Description |
|---|---|
| container?: string[] | Array of custom class names attached to workspace container |
| body?: string[] | Array of custom class names attached to workspace tab body |
| tabLabel?: string[] | Array of custom class names attached to workspace tab label |
| tabContainer?: string[] | Array of custom class names attached to workspace tab container |
## Type aliases
### WorkspaceErrorTypesV2
The enum type of error that is thrown.
```
enum WorkspaceErrorTypesV2 {
SIMILAR_TAB_ERROR,
MAX_TAB_COUNT_EXCEEDED_ERROR,
CONSOLE_ERROR
}
```
### WorkspaceAnimationTimingType
Animation timing function types
```
export type WorkspaceAnimationTimingType = 'ease'
| 'linear'
| 'ease-in'
| 'ease-out'
| 'ease-in-out';
```
## Constants
### WORKSPACE_DATA
Injection token that can be used to access the data that was passed in to a tab.
```
const WORKSPACE_DATA: InjectionToken
```
# Versions
### v0.2.0
This Update include breaking changes, new features and some bug fixes
- The requirement to add the workspace component to a base component is now removed
- The workspace component is not exposed
- The method to add the workspace header has been altered
- New API exposed from Workspace service to attach header dynamically
- Exposed a Configuration to attach a custom class to workspace container "workspaceContainerClass"
- Updated Customizable classes api to contain Container, Body, TabLabel and TabContainer
- Exposed an external tab close handle
- Exposed tab count observable
- New tab change animation disable api
- Workspace animation customizability added
### v0.1.2
This Update include new features
- Added the ability to change the direction of the workspace(RTL or LTR)
- Added new Workspace header which can be added by a directive(ngsWorkspaceHeader)
- Added new Workspace Close directive(ngsWorkspaceClose)
- Added the ability to hide the side button
### v0.1.1
This Update include new feature and APIs
- Added New APIs to service
- afterAllClosed
- afterOpen
- openWorkspaces
- closeAll method
- getWorkspaceById method
- Global Error Handling added
### v0.1.0
This update include several bug and performance enhancement.
- Added a Workspace Container CSS Class
- Now the component reference is exposed from WorkspaceTabRef
- Default Error Enum is Deprecated
- New Error Enum added with Better description
# Collaboration
Please create a Github Issues to inform any issues and suggestions, also you can fix any code issues you find and create a pull request to integrate.