017.1 Typescript Classes for the First View (Material UI) - chempkovsky/CS82ANGULAR GitHub Wiki

• 01 Run JavaScripts Wizard
• 01 First page of the Wizard
• 01 Second page of the Wizard
• 01 Third page of the Wizard
  • 01 Set UI List properties
  • 01 Set UI Form properties
  • 01 Go to Fourth page
• 01 Fourth page of the Wizard
• 01 Batch Action dialog
• 01 After script finished
  • 01 Note

• 02 Run JavaScripts Wizard
• 02 First page of the Wizard
• 02 Second page of the Wizard
• 02 Third page of the Wizard
• 02 Fourth page of the Wizard
• 02 Batch Action dialog
• 02 After script finished

• 03 Batch Action dialog
• 03 After script finished

• 06 Run Visual Studio Code
• 06 Temporary Modify AppModule
• 06 Temporary Modify AppCmponentHtml
• 06 Modify PhbkDbContext
• 06 Run PhBkWebApp
• 06 Run Angular App
  • 06 The possible error you must be aware
  • 06 Temporary solution
  • 06 Lform component
• 06 Remove Temporary Modification

PhbkPhoneTypeView-View is our very first View.

• According to the agreement specified in the article 016 Naming the folders we have created two subfolders

• To generate interfaces
  • Run Visual Studio and Open PhonebookSolution solution
  • Right Click src/app/components/phbk-phone-type-view of the src-project (Angular project) and select JavaScripts Wizard menu item to open the Wizard dialog

• On the first page of the dialog the destination folder is shown. The destination folder is the folder in which the generated file will be created. Click Next-button

• On the second page of the Wizard we select DbContext that will be used to choose the entity for the View. Select PhBkContext.csproj and the PhBkContext class using the drop-down lists. Click Next-button.

• On the third page of the Wizard
  • select the View for which we need to get the name
    • in our case we have selected PhbkPhoneTypeView-View

• After PhbkPhoneTypeView-View selected
  • On the left panel click UI List properties-node
    • On the right panel you define the view of the tabled data
      • with Up/Down buttons you define the order of the columns to be shown
      • with Shown-checkboxes you define which columns will be available to the user
      • with New Line-checkboxes you define which columns will be shown by default

• After PhbkPhoneTypeView-View selected
  • On the left panel click UI Form properties-node
    • On the right panel you define the view and functionality of the Add/Update/Delete/View Item forms
      • with Up/Down buttons you define the order of the controls to be shown
      • with Shown-checkboxes you define which properties will be available to the user
      • with New Line-checkboxes you define how to layout the controls on the form
      • with Input type xxx-combo-boxes you define which type of controls to use for each property of the current ModelView

• Note:
  • SearchDialog, Typeahead and Combo input types can only be applied when the property is used by master-detail relations

• After UI Form properties and UI List properties are defined click Next-button and go to the Fourth page

• On the Fourth page of the Wizard click batch processing-button

• On the Batch Action-dialog of the Wizard
  • select 01100-Interfaces.json
  • click start-button

• After script finished
  • close Batch Action-dialog
  • close JavaScripts Wizard-dialog
• New interfaces-subfolder has been added
  • three files have been added

• Only after script finished
  • UI Form properties and UI List properties settings becomes persistent. So you don't need to set them again the next script is executed.

• To generate interfaces
  • Run Visual Studio and Open PhonebookSolution solution
  • Right Click src/app/services/phbk-phone-type-view of the src-project (Angular project) and select JavaScripts Wizard menu item to open the Wizard dialog

• On the first page of the dialog the destination folder is shown. The destination folder is the folder in which the generated file will be created. Click Next-button

Repeat the actions of the 01 Second page of the Wizard

Repeat the actions of the 01 Third page of the Wizard

• Note: you do not need to set up UI Form properties and UI List properties again. After running any script, these settings become permanent and will be available the next time you run the wizard.

Repeat the actions of the 01 Fourth page of the Wizard

• On the Batch Action-dialog of the Wizard
  • select 01400-WebApiService.json
  • click start-button

• After script finished
  • close Batch Action-dialog
  • close JavaScripts Wizard-dialog
• New interfaces-subfolder has been added
  • two files have been added

• Sform-component (search form) is a tabled presentation of the data for the given ModelView. With Sform-component the uses can define the search filter and send request for the data.

• Sform-component is used by

  • Sdlg-dialog
  • Lform-component
  • RList-component
  • RDList-component

• To generate Sform

  • Run Visual Studio and Open PhonebookSolution solution
  • Right Click src/app/components/phbk-phone-type-view of the src-project (Angular project) and select JavaScripts Wizard menu item to open the Wizard dialog

• repeat the steps as they described at 01 Generating interfaces until Batch Action dialog

  • Note: you do not need to set up UI Form properties and UI List properties again.

• On the Batch Action-dialog of the Wizard
  • select 01420-SForm.json
  • click start-button

• After script finished
  • close Batch Action-dialog
  • close JavaScripts Wizard-dialog
• New interfaces-subfolder has been added
  • seven files have been added
    • sform-folder
    • sdlg-folder
    • phbk-phone-type-view-s.module.ts-file, which declares Angular module

• To generate SForm.module.service
  • Run Visual Studio and Open PhonebookSolution solution
  • Right Click src/app/services/phbk-phone-type-view of the src-project (Angular project) and select JavaScripts Wizard menu item to open the Wizard dialog
• repeat the steps as they described at 02 Generating service and datasource until Batch Action dialog
  • Note: you do not need to set up UI Form properties and UI List properties again.
• On the Batch Action-dialog of the Wizard
  • select 01420-SForm.module.service.json
    • click start-button

• Aform, Uform, Dform, Vform are the components, which implement Add, Update, Delete, View item action
• To generate Aform, Uform, Dform, Vform
  • Run Visual Studio and Open PhonebookSolution solution
  • Right Click src/app/components/phbk-phone-type-view of the src-project (Angular project) and select JavaScripts Wizard menu item to open the Wizard dialog
• repeat the steps as they described at 01 Generating interfaces until Batch Action dialog
  • Note: you do not need to set up UI Form properties and UI List properties again.
• On the Batch Action-dialog of the Wizard
  • select 01500-Vform.json
    • click start-button
  • select 01502-Aform.json
    • click start-button
  • select 01504-Uform.json
    • click start-button
  • select 01506-Dform.json
    • click start-button
• As a result
• aform and adlg folders and phbk-phone-type-view-a.module.ts have been created for AForm
• uform and udlg folders and phbk-phone-type-view-u.module.ts have been created for UForm
• dform and ddlg folders and phbk-phone-type-view-d.module.ts have been created for DForm
• vform and vdlg folders and phbk-phone-type-view-v.module.ts have been created for VForm

• To generate XXXForm.module.service
  • Run Visual Studio and Open PhonebookSolution solution
  • Right Click src/app/services/phbk-phone-type-view of the src-project (Angular project) and select JavaScripts Wizard menu item to open the Wizard dialog
• repeat the steps as they described at 02 Generating service and datasource until Batch Action dialog
  • Note: you do not need to set up UI Form properties and UI List properties again.
• On the Batch Action-dialog of the Wizard
  • select 01550-Vform.module.service.json
    • click start-button
  • select 01552-Aform.module.service.json
    • click start-button
  • select 01554-Uform.module.service.json
    • click start-button
  • select 01556-Dform.module.service.json
    • click start-button

• Lform is a static form which
  • uses SForm to show tabular data
  • uses adlg, udlg, ddlg, vdlg to modify data items for the given view
• To generate Lform
  • Run Visual Studio and Open PhonebookSolution solution
  • Right Click src/app/components/phbk-phone-type-view of the src-project (Angular project) and select JavaScripts Wizard menu item to open the Wizard dialog
• repeat the steps as they described at 01 Generating interfaces until Batch Action dialog
  • Note: you do not need to set up UI Form properties and UI List properties again.
• On the Batch Action-dialog of the Wizard
  • select 01600-Lform.json
    • click start-button

• at first run cmd (command prompt)
• with the command prompt execute the commands
  • the last command has . (dot sign) at the end

C:\Users\yury>e:
E:\>cd E:\Development\PhonebookSolution\AngularPhonebook
E:\Development\PhonebookSolution\AngularPhonebook>code .

• with Visual Studio Code open app.module.ts-file
  • at the begining of the file add the line of code

import { PhbkPhoneTypeViewLModule } from './components/phbk-phone-type-view/phbk-phone-type-view-l.module';

• modify imports: [...]-section: Add reference onto PhbkPhoneTypeViewLModule-module.

  imports: [
    ...
    PhbkPhoneTypeViewLModule,
  ],

• with Visual Studio Code open app.component.html-file
  • at the end of the file
    • comment <router-outlet></router-outlet>-line
    • add <app-phbk-phone-type-view-lform></app-phbk-phone-type-view-lform>-line

   ...
      </mat-toolbar>

         <!-- <router-outlet></router-outlet> -->
        <app-phbk-phone-type-view-lform></app-phbk-phone-type-view-lform>

    </mat-sidenav-content>
  </mat-sidenav-container>

• With Visual Studio 2022 open the PhbkDbContext.cs-file of PhBkContext.csproj-project
• Add the constructor to the class
• Modify OnModelCreating(ModelBuilder modelBuilder)-method

        public PhbkDbContext(DbContextOptions<PhbkDbContext> options)
          : base(options)
        {
            Database.EnsureCreated();
        }
        ...
        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            modelBuilder.Entity<PhbkPhoneType>().HasKey(p => p.PhoneTypeId);


            modelBuilder.Entity<PhbkPhoneType>().HasData(new { PhoneTypeId = 1, PhoneTypeName = "Office phone", PhoneTypeDesc = "Office phone (one or more than one)" });
            modelBuilder.Entity<PhbkPhoneType>().HasData(new { PhoneTypeId = 2, PhoneTypeName = "Home phone", PhoneTypeDesc = "Home phone (one or more than one)" });
            modelBuilder.Entity<PhbkPhoneType>().HasData(new { PhoneTypeId = 3, PhoneTypeName = "Office mobile", PhoneTypeDesc = "Office mobile phone (one or more than one)" });
            modelBuilder.Entity<PhbkPhoneType>().HasData(new { PhoneTypeId = 4, PhoneTypeName = "Personal mobile", PhoneTypeDesc = "Personal mobile phone (one or more than one)" });
        }

• With Visual Studio 2022 launch PhBkWebApp-app

• save changes of the app.module.ts-file
• save changes of the app.component.html-file
• with Visual Studio Code open the terminal and run the command

ng serve -o

• Take a look at the picture:

The port of the request is equal to 4200 instead of 5165, which is defined in the file assets/app-config.json and which is expected.

http://localhost:4200/phbkphonetypeviewwebapi/getmanybyrepprim?phoneTypeIdOprtr=eq&page=0&pagesize=10

In the shared/services/app-glbl-settings.service.ts-file find the getWebApiPrefix(vwNm: string): string-method, which returns the port with a help of this._settings.config.webApiUrl-property.

constructor(private _snackBar: MatSnackBar, protected _settings: AppConfigService) {}
...
public getWebApiPrefix(vwNm: string): string {
        let reslt: string = '';
        if(!(vwNm === null)) {
            if(!(vwNm === null)) {
                //
                // here: defining url by ViewName
                //
               reslt =  this._settings.config.webApiUrl; 
            }
        }
        return reslt;
    } 

_settings-param is of type AppConfigService. AppConfigService is defined In the shared/services/app-config.service.ts- file:

@Injectable()
export class AppConfigService {
    public _appConfig: IAppConfig  = {
      webApiUrl: '',
      securityUrl: '',
      permissionWebApi: '',
    }; 
    constructor (private injector: Injector) { }
    loadAppConfig() {
        let http = this.injector.get(HttpClient);
          firstValueFrom(http.get<IAppConfig>('/assets/app-config.json')).then((data) => {
            
            this._appConfig = data;
          }).catch(()=>{
            console.warn("Error loading app-config.json, using envrionment file instead");
          });
    }
    get config(): IAppConfig {
        return this._appConfig;
    }
}

• Conclusion: there is not enough time to load the '/assets/app-config.json'-file before the app-phbk-phone-type-view-lform-component starts.

• Let's temporary modify getWebApiPrefix()-method in the shared/services/app-glbl-settings.service.ts-file as it is shown below

constructor(private _snackBar: MatSnackBar, protected _settings: AppConfigService) {}
...
public getWebApiPrefix(vwNm: string): string {
        let reslt: string = '';
        if(!(vwNm === null)) {
            if(!(vwNm === null)) {
                //
                // here: defining url by ViewName
                //
               // reslt =  this._settings.config.webApiUrl; 
               reslt = 'http://localhost:5165/';
            }
        }
        return reslt;
    } 

• save changes of the shared/services/app-glbl-settings.service.ts-file
• save changes of the app.module.ts-file
• save changes of the app.component.html-file
• start Angular project
• Here is a result
  • the component is shown
  • Add/Update/Delete/View Item-functions are avaiilable

• The layout of the forms is responsive

• filtering by Primary key

• full scan filtering.
  • for the table with a few rows full scan filtering is acceptable. For the big tables we should deny such a functionality. After adding the security feature to the project we will shown how to do it without modifying the code. Removing fragments of code is not a good idea, since full scan filtering may be useful for administrators and advanced users.

• stop running app
• Open app.component.html-file
  • uncomment router-outlet
  • remove <app-phbk-phone-type-view-lform></app-phbk-phone-type-view-lform>
  • the end of the file must be as follows:

      ...
      </mat-toolbar>
         <router-outlet></router-outlet>
    </mat-sidenav-content>
  </mat-sidenav-container>

• Open shared/services/app-glbl-settings.service.ts-file and remove modification of getWebApiPrefix()-method. It must be as follows:

    public getWebApiPrefix(vwNm: string): string {
        let reslt: string = '';
        if(!(vwNm === null)) {
            if(!(vwNm === null)) {
                //
                // here: defining url by ViewName
                //
               reslt =  this._settings.config.webApiUrl; 
            }
        }
        return reslt;
    } 

• Open app.module.ts-file and remove import { PhbkPhoneTypeViewLModule } from ...-operator. The line to be removed:

import { PhbkPhoneTypeViewLModule } from './components/phbk-phone-type-view/phbk-phone-type-view-l.module';

• Open app.module.ts-file and remove PhbkPhoneTypeViewLModule from imports: [...]-array. It must become as follows:

  ...
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    AppMaterialModule,
    AppFormatterModule,
    AppFlexLayoutModule,
    HttpClientModule,
  ],
  ...