048 Angular project configuration for Lookup resource Web Api - chempkovsky/CS82ANGULAR GitHub Wiki

Notes

Steps required to accomplish the task

Notes

  • read the article 034 CREATING LOOKUP RESOURCE PROJECTS
    • LpPhBkWebApp added to the solution. It means, we got additional Url.
      • We need to obtain this new Url.
      • We need to add new Url to the config of the Angular project.
      • We need a mechanism of getting correct Url for different Views.

Steps required to accomplish the task

Url of LpPhBkWebApp

  • open Properties/launchSettings.json-file of the LpPhBkWebApp.csproj
    • the Url is http://localhost:5055

config of the Angular project

AppConfig interface

  • modify the src\app\shared\interfaces\app-config.interface.ts-file. We need to add one more property to the interface definition.
    • Add the line "divisionLpWebApi": string,
    • Here is a new version
Click to show the code 
export interface IAppConfig {
    "webApiUrl": string,
    "securityUrl": string,
    "permissionWebApi": string,
    "divisionLpWebApi": string,
}

assets AppConfig

  • modify the src\assets\app-config.json-file
    • Add the line "divisionLpWebApi": "http://localhost:5055/"
    • Here is a new version
Click to show the code 
{
  "webApiUrl": "http://localhost:5165/",
  "securityUrl": "https://localhost:7229/",
  "permissionWebApi": "https://localhost:7229/",
  "divisionLpWebApi": "http://localhost:5055/"
}

AppConfig service

  • modify the src\app\shared\services\app-config.service.ts-file
    • Add the line divisionLpWebApi: '',
    • Here is fragment a new version
Click to show the code 
...
@Injectable()
export class AppConfigService {
    public _appConfig: IAppConfig  = {
      webApiUrl: '',
      securityUrl: '',
      permissionWebApi: '',
      divisionLpWebApi: '',
    }; 
    constructor (private injector: Injector) { }
...

AppGlblSettings service

  • modify the src\app\shared\services\app-glbl-settings.service.ts-file
  • in the getWebApiPrefix-method we need to replace the line
              reslt = this._settings.config.webApiUrl;
  • with the code
              if (vwNm === 'LpdDivisionView' || vwNm === 'LprDivision01View' || vwNm === 'LprDivision02View') {
                reslt = this._settings.config.divisionLpWebApi; 
              } else {
                reslt = this._settings.config.webApiUrl; 
              }
  • Here is a new version of the getWebApiPrefix-method
Click to show the code 
    public getWebApiPrefix(vwNm: string): string {
        let reslt: string = '';
        if(!(vwNm === null)) {
                //
                // here: defining url by ViewName
                //
              if (vwNm === 'LpdDivisionView' || vwNm === 'LprDivision01View' || vwNm === 'LprDivision02View') {
                reslt = this._settings.config.divisionLpWebApi; 
              } else {
                reslt = this._settings.config.webApiUrl; 
              }
        }
        return reslt;
    }

Test

  • To start both Web Api apps right click solution node and select Properties-menu item
    • in the Properties-dialog click Common Properties/Startup Project
      • click Multiple Startup Projects and select both PhBkWebApp and LpPhBkWebApp
Click to show the picture

project structure

  • run Webapi apps

  • run angular app

  • along mode

    • click list of Divisions and make sure that filtering by Lookup resource is available only for re01 table
Click to show the picture

project structure

  • one-to-many mode
    • click list of Enterprises
      • select Divisions as detail ()
    • and make sure that filtering by Lookup resource is available only for re02 table
Click to show the picture

project structure

  • Make sure that for both modes (along and one-to-many) lookup is functional and filtering is functional.
Click to show the picture

project structure

  • check if insert, update, delete operations on Division Item modify Lookup resource. You must be aware, sometimes updated item goes into another place of the query result. Query of the Lookup resource returns items without sorting.

  • Note: for both modes all database queries are performed on a unique or primary key!!!

⚠️ **GitHub.com Fallback** ⚠️