@smartbit4all/ng-client 2.2.2 → 3.0.0

package/src/lib/smart-navigation/README.md

@@ -0,0 +1,141 @@
+# Smart Navigation
+
+## References
+
+These packages must be updated in case of a new version:
+
+-   [_@smartbit4all/tab-group_](https://www.npmjs.com/package/@smartbit4all/tab-group)
+-   [_@smartbit4all/view-context_](https://www.npmjs.com/package/@smartbit4all/view-context)
+
+---
+
+## How to use
+
+### Installation
+
+Go to your project, open the terminal and use the following command:
+
+    npm i @smartbit4all/navigation
+
+There are two ways to use the `SmartNavigationService`. The first one is to use it as a global service and provide it in the **app.module**. The second one is to use it as a local service and provide it in the header of the component.
+
+Provide the `SmartNavigationService` as a **global service** in the app.module:
+
+`app.module.ts:`
+
+    @NgModule({
+        declarations: [...],
+        imports: [
+            SmartNavigationModule,
+            ...
+        ],
+        providers: [
+            SmartNavigationService,
+            ...
+        ],
+        ...
+    })
+
+Provide the `SmartNavigationService` as a **local service** in the header of the component:
+
+`example.component.ts:`
+
+    @Component({
+        selector: 'app-example',
+        templateUrl: './example.component.html',
+        styleUrls: ['./example.component.css'],
+        providers: [SmartNavigationService]
+    })
+    export class ExampleComponent implements OnInit { ... }
+
+In order to **use this service**, the `ActivatedRoute` must be provided in each component.
+
+`example.component.ts:`
+
+    export class ExampleComponent {
+
+        constructor(
+            private navigationService: SmartNavigationService,
+            public route: ActivatedRoute
+        ) {
+            this.navigationService.route = this.route;
+        }
+    }
+
+### Usage
+
+From now on the **navigation between routes** is unified, handled by this service. The usage:
+
+    someFunction(urlToNavigate: string, uuid: string): void {
+    	this.navigationService.navigateTo([urlToNavigate], { uuid }); // equivalent to { uuid: uuid }
+    }
+
+**Getting the current path**:
+
+    let path = this.navigationService.getCurrentPath();
+
+**Subscribing to query changes** is more simple than ever, to catch every change just use this code snippet belove:
+
+    constructor(
+        private navigationService: SmartNavigationService,
+        public route: ActivatedRoute
+    ) {
+        this.navigationService.subscribeToQueryChange(this.handleQueryChange.bind(this));
+    }
+
+    handleQueryChange(params: Params): void {
+    	if (params) {
+    		let uuid: string = params['uuid'];
+    	}
+    }
+
+    ngOnDestroy(): void {
+    	this.navigationService.unsubscribeFromQueryChanges();
+    }
+
+It is not necessary to unsubscribe manually, however, I highly recommend it.
+
+**Subscribing to url changes** can be done easily as well:
+
+    constructor(private navigationService: SmartNavigationService, private route: ActivatedRoute) {
+        this.navigationService.route = this.route;
+        this.navigationService.subscribeToUrlChange(this.handleUrlChange.bind(this));
+    }
+
+    handleUrlChange(url: string): void { ... }
+
+---
+
+## Version logs
+
+## @smartbit4all/form v1.0.1
+
+**Type: Update**
+
+The package has been published.
+
+## @smartbit4all/navigation v0.1.1
+
+**Type: Feature**
+
+This package was designed to manage the Angular routing as simple as it should be.
+
+**The `SmartNavigation` interface:**
+
+    export interface SmartNavigation {
+        // properties
+        urlSubscription?: Subscription;
+        querySubscription?: Subscription;
+
+        // functions
+        navigateTo(
+            urls: string[],
+            queryParams?: Params,
+            queryParamsHandling?: QueryParamsHandling,
+            relativeToThis?: boolean
+        ): void;
+        subscribeToUrlChange(callback: (url: string) => void): void;
+        subscribeToQueryChange(callback: (params: Params) => void): void;
+        unsubscribeFromQueryChanges(): void;
+        getCurrentPath(): string;
+    }

package/src/lib/smart-tab-group/README.md

@@ -0,0 +1,155 @@
+# Smart Tab Group
+
+## References
+
+These packages must be updated in case of a new version:
+
+- There are no references yet
+
+---
+
+## How to use
+
+### Installation
+
+Go to your project, open the terminal and use the following command:
+
+    npm i @smartbit4all/tab-group
+
+Then import it in the AppModule:
+
+`app.module.ts:`
+
+    import { SmartTabGroupModule } from '@smartbit4all/tab-group';
+    ...
+    @NgModule({
+        declarations: [...]
+        imports: [
+            ...
+            SmartTabGroupModule,
+        ],
+        ...
+    })
+
+### Usage
+
+`example.component.html:`
+
+    <smart-tab-group [tabTiles]="tabs!" [route]="route">
+        <router-outlet></router-outlet>
+    </smart-tab-group>
+
+`example.component.ts:`
+
+    export class ExampleComponent {
+        tabs?: TabTile[];
+
+        constructor(public route: ActivatedRoute) {
+            this.setTabs();
+        }
+
+        setTabs(): void {
+            this.tabs = [
+                {
+                    tileName: 'Tab 1',
+                    url: '../tab_1',
+                    uuid: ''
+                },
+                {
+                    tileName: 'Tab 2',
+                    url: '../tab_2',
+                    uuid: ''
+                }
+            ];
+        }
+    }
+
+`app-routing.module.ts:`
+
+    const routes: Routes = [
+        {
+            path: '',
+            component: ExampleComponent,
+            children: [
+                {
+                    path: 'tab_1',
+                    component: ExampleTab1Component
+                },
+                {
+                    path: 'tab_2',
+                    component: ExampleTab2Component
+                }
+            ]
+        },
+    ]
+
+---
+
+## Version logs
+
+## @smartbit4all/form v1.0.5
+
+This update contains 2 major change:
+
+- TabTile model from now has an extra property for display additional data on the tab label
+- selectedTabChanged Subject added to component
+
+## keep it mind, this version uses the SmartNavigationService instead of the CompnentFactoryService!!!
+
+## @smartbit4all/form v1.0.1
+
+**Type: Update**
+
+The package has been published.
+
+## @smartbit4all/tab-group v0.1.1
+
+**Type: Feature**
+
+This version of the `SmartTabGroup` uses the `SmartNavigationService` package.
+
+In order to use this package make sure that the proper version of the **@smartbit4all/navigation** is installed.
+
+**Changes in the usage:**
+
+There are two versions for setting up a `SmartTabGroup`. In _versionA_ the url gets a `'../'` prefix which helps the relative navigation. However, in some cases it simply does not work. In that case get rid of the prefix mentioned before, and set the url as it is shown in _versionB_.
+
+    let versionA = [
+        {
+            tileName: 'Tab 1',
+            url: '../tab_1',
+            uuid: ''
+        }
+    ];
+
+    let versionB = [
+        {
+            tileName: 'Tab 1',
+            url: 'tab_1',
+            uuid: ''
+        }
+    ];
+
+## @smartbit4all/tab-group v0.0.2
+
+**Type: Bugfix**
+
+The **query parameters dissappeared** from the url **on navigating** to a new tab.
+
+The code snippet that has been replaced:
+
+    this.router.navigateByUrl(this.actualPath + "/" + this.tabTiles[$event.index].url);
+
+The new code snippet which has solved the issue:
+
+    this.router.navigate(
+        [this.actualPath, this.tabTiles[$event.index].url],
+        {
+            queryParamsHandling: "preserve",
+        });
+
+## @smartbit4all/tab-group v0.0.1
+
+**Type: Feature**
+
+The basic smart tab group with its features.