System-navigator NPM

SystemNavigator

This library was generated with Angular CLI version 10.1.6. Github repo, in case you want to meddle with it: https://github.com/viettranisnottaken/system-navigator

Code scaffolding

Note: Don't forget to add --project system-navigator or else it will be added to the default project in your angular.json file.

Build

Run ng build system-navigator to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build system-navigator, go to the dist folder cd dist/system-navigator and run npm publish.

Running unit tests

Run ng test system-navigator to execute the unit tests via Karma.

Usage

You can either call API for the urls, or just pass them in via @Input()

Getting urls by calling API

Add SystemNavigatorModule to the module that you wish to use it in and use forChild({ api: 'someUrl'}) to pass in the url of the API that will provide information about the applications icons on the menu:

...
    import { SystemNavigatorModule } from 'system-navigator';

    @NgModule({
        declarations: [
            ...
        ],
        exports: [
            ...
            SystemNavigatorModule,
        ],
        providers: [
            HtmlClassService,
        ],
        imports: [
            ...
            SystemNavigatorModule.forChild({ api: 'https://sample-api.com/urls', headers: {'SomeHeader': '123'} }),
        ]
    })
    export class ThemeModule {
    }

Add <lib-system-navigator></lib-system-navigator> to where you want to use it.
Wrap a div around <lib-system-navigator></lib-system-navigator> to style it however you want. Like this:
```
<div class="menu-container">
    <lib-system-navigator></lib-system-navigator>
</div>
```

Passing data in `@Input()`

Add SystemNavigatorModule to the module that you wish to use. No need to run forChild()

...
    import { SystemNavigatorModule } from 'system-navigator';

    @NgModule({
        declarations: [
            ...
        ],
        exports: [
            ...
            SystemNavigatorModule,
        ],
        providers: [
            HtmlClassService,
        ],
        imports: [
            ...
            SystemNavigatorModule,
        ]
    })
    export class ThemeModule {
    }

Add <lib-system-navigator [inputAppUrls]="appUrls"></lib-system-navigator> to where you want to use it. appUrls has to be an Observable<AppUrl[]>

appUrls = of([
    {
    name: "admin",
    url: "https://google.com",
    image: null
    },
    {
    name: "marketing platform",
    url: "https://www.youtube.com/watch?v=kXYiU_JCYtU",
    image: "https://photo-1-baomoi.zadn.vn/w1000_r1/2020_05_04_105_34923369/882279561615ff4ba604.jpg"
    },
    {
    name: "marketing platform",
    url: "https://www.youtube.com/watch?v=kXYiU_JCYtU",
    image: "https://photo-1-baomoi.zadn.vn/w1000_r1/2020_05_04_105_34923369/882279561615ff4ba604.jpg"
    },
]),

    constructor(private http: HttpClient, private appService: AppService) {
        this.inputAppUrls = this.getUrls();
    }

    getUrls(): Observable<AppUrl[]> {
        return this.appService.getUrls(this.api, this.headers);
    }

Wrap a div around <lib-system-navigator [inputAppUrls]="appUrls"></lib-system-navigator> to style it however you want. Like this:
```
<div class="menu-container">
    <lib-system-navigator [inputAppUrls]="appUrls"></lib-system-navigator>
</div>
```

APIs

The library expect a response like this from your api:

{
  "status": true,
  "message": "ok",
  "httpCode": 200,
  "data": [
    {
      "name": "admin",
      "url": "https://google.com",
      "urlLogo": null
    },
    {
      "name": "marketing platform",
      "url": "https://www.youtube.com/watch?v=kXYiU_JCYtU",
      "urlLogo": "https://photo-1-baomoi.zadn.vn/w1000_r1/2020_05_04_105_34923369/882279561615ff4ba604.jpg"
    },
    {
      "name": "marketing platform",
      "url": "https://www.youtube.com/watch?v=kXYiU_JCYtU",
      "urlLogo": "https://photo-1-baomoi.zadn.vn/w1000_r1/2020_05_04_105_34923369/882279561615ff4ba604.jpg"
    },
  ],
  "errorCode": "ok"
}

Here are some interfaces

export interface AppUrl {
    name: string;
    url: string;
    urlLogo?: any;
    id?: number;
    index?: number;
}

export interface ServerResponse {
    status?: boolean;
    message?: string;
    httpCode?: number;
    data: AppUrl[];
    errorCode?: string;
}