025.1 Navigation aware typescript components for the Second View (Material UI) - chempkovsky/CS82ANGULAR GitHub Wiki

Notes

07 Generating Rdl component

08 Generating code for Rdl Angular Routes

09 Test Rdl Component

10 Generating Rl component

11 Generating code for Rl Angular Routes

12 Test Rl Component

Notes

  • PhbkEnterpriseView-View is our second View.

  • The list of Navigation aware component includes

    • dialog based component
      • Rdl-component. This component is routed Lform, where Add/Update/Delete/View Item implemented as a popup Dialogs.
    • pure navigation based components
      • Rl-component. This component is a routed SForm. It uses Angular routing to navigate to Add/Update/Delete/View Item.
      • RA, RU, RD, RV` components.
        • these components support Angular routing.
        • these components use AForm, UForm, DForm, VForm-components to implement Add/Update/Delete/View Item functionality.

  • For dialog based components the development process consists of

    • Generation code for Rdl-component.
    • Generation code for Angular Routes to be inserted in const routes: Routes = [...] of the app-routing.module.ts-file
    • Modifying <mat-nav-list>...<mat-nav-list> of the app.component.html-file, to make navigation available to the user/

  • For pure navigation based components the development process consists of

    • Generation code for RA, RU, RD, RV, Rdl` components.
    • Generation code for Angular Routes to be inserted in const routes: Routes = [...] of the app-routing.module.ts-file
    • Modifying <mat-nav-list>...<mat-nav-list> of the app.component.html-file, to make navigation available for the user

07 Generating Rdl component

  • To generate Rdl

    • Run Visual Studio and Open PhonebookSolution solution
    • Right Click src/app/components/phbk-enterprise-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.

07 Batch Action dialog

  • repeat the steps described in the article

08 Generating code for Rdl Angular Routes

  • To generate Rdl Angular Routes
    • Run Visual Studio and Open PhonebookSolution solution
    • Right Click src/app/ of the src-project (Angular project) and select JavaScripts Wizard menu item to open the Wizard dialog
      • Note: We should right click src/app/-folder, since we will insert the generated code in the app-routing.module.ts-file. The last one is in the src/app/-folder.
Click to show the picture

project structure

  • 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.

08 Fourth page of the Wizard

  • repeat the steps described in the article

08 Fifth page of the Wizard

  • repeat the steps described in the article

08 Sixth page of the Wizard

  • repeat the steps described in the article

08 Modify AppRouting module file

  • open app-routing.module.ts- file
  • modify const routes: Routes = [...]-array as follows (insert generated code from the clipboard):
const routes: Routes = [
///////// begin RDLPhbkEnterpriseView
  { path: 'RDLPhbkEnterpriseView', 
  loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-rdl-lazy.routing.module').then(m => m.PhbkEnterpriseViewRdlLazyRoutingModule),
  data: { vn: 'PhbkEnterpriseView', va: 'l', ms: true, np: 'RDL', fh: 2, mh: 10, sf: true, /* title: 'Enterprises', */  dp: 1, uid: 'fcc588b4652048b6ae553d1adb6edaae' }  },
///////// end RDLPhbkEnterpriseView

  ...
  { path: 'authentication', loadChildren: () => import('./shared/modules/app-glbl-security.module').then(m => m.AppGlblSecurityModule) },  

  { path: 'home', component: AppGlblHomeComponent }, 
  { path: '',   redirectTo: '/home', pathMatch: 'full' }, 
//  { path: '**', component: AppGlblHomeComponent },
  { path: '**', component: AppGlblPagenotfoundComponent },

];

08 Modify AppComponentHtml file

  • open app.component.html- file
    • inside <mat-nav-list>...</mat-nav-list> insert recommended line
      <mat-nav-list>
        <a mat-list-item [routerLink]="['/home']" routerLinkActive="active"> <mat-icon>home</mat-icon> </a> 

<!--
        <a mat-list-item [routerLink]="['/admin1feature']" routerLinkActive="active">Admin1</a> 
-->
        <a mat-list-item [routerLink]="['RDLPhbkPhoneTypeView']" routerLinkActive="active">List of Phone Types (Dlg)</a>
        <a mat-list-item [routerLink]="['PhbkPhoneTypeView']" routerLinkActive="active">List of Phone Types</a>
        <a mat-list-item [routerLink]="['/simpledictionary']" routerLinkActive="active">Title for SimpleDictionary </a> 

        <a mat-list-item [routerLink]="['RDLPhbkEnterpriseView']" routerLinkActive="active">List of Enterprises (Dlg)</a>
      </mat-nav-list>

09 Test Rdl Component

09 Modify DbContext

  • open the PhbkDbContext.cs-file of the PhBkContext.csproj-project and modify OnModelCreating-method as follows
        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {

            modelBuilder.Entity<PhbkEnterprise>().HasAlternateKey(p => p.EntrprsName).HasName("EntrprsNameUK");
            modelBuilder.Entity<PhbkEnterprise>().HasKey(p => p.EntrprsId);
            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)" });

            modelBuilder.Entity<PhbkEnterprise>().HasData(new { EntrprsId = 1, EntrprsName = "Enterprise 1", EntrprsDesc = "Short description for Enterprise 1" });
            modelBuilder.Entity<PhbkEnterprise>().HasData(new { EntrprsId = 2, EntrprsName = "Enterprise 2", EntrprsDesc = "Short description for Enterprise 2" });
            modelBuilder.Entity<PhbkEnterprise>().HasData(new { EntrprsId = 3, EntrprsName = "Enterprise 3", EntrprsDesc = "Short description for Enterprise 3" });
            modelBuilder.Entity<PhbkEnterprise>().HasData(new { EntrprsId = 4, EntrprsName = "Enterprise 4", EntrprsDesc = "Short description for Enterprise 4" });

        }

09 Run PhBkWebApp

  • Delete copy of old database on SqlServer
  • With Visual Studio 2022 launch PhBkWebApp-app

09 Run Angular App

  • save changes of the app-routing.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
  • Here is a result
Click to show the picture

project structure

Click to show the picture

project structure

  • and
Click to show the picture

project structure

10 Generating Rl component

  • To generate Rdl

    • Run Visual Studio and Open PhonebookSolution solution
    • Right Click src/app/components/phbk-enterprise-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.

10 Batch Action dialog

  • On the Batch Action-dialog of the Wizard
    • select 01960-Rv.json
    • click start-button
    • select 01962-Ra.json
    • click start-button
    • select 01964-Ru.json
    • click start-button
    • select 01966-Rd.json
    • click start-button
    • select 01968-Rl.json
    • click start-button
Click to show the picture

project structure

11 Generating code for Rl Angular Routes

  • To generate Rl Angular Routes
    • Run Visual Studio and Open PhonebookSolution solution
    • Right Click src/app/ of the src-project (Angular project) and select JavaScripts Wizard menu item to open the Wizard dialog
      • Note: We should right click src/app/-folder, since we will insert the generated code in the app-routing.module.ts-file. The last one is in the src/app/-folder.
Click to show the picture

project structure

  • 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.

11 Fourth page of the Wizard

  • On the Fourth page of the Wizard
    • select 01980-R-lazy.routes.ts
    • click Next-button
Click to show the picture

project structure

11 Fifth page of the Wizard

  • On the Fourth page of the Wizard
    • select r-lazy.routes.ts.t4
    • click Next-button
Click to show the picture

project structure

11 Sixth page of the Wizard

  • Note 1: Do not save the generated file.
    • Instead copy the content into the clipboard
  • Note 2: The generated code contains instructions of how to modify app.component.html and app-routing.module.ts files.
Click to show the picture

project structure

11 Modify AppRouting module file

  • open app-routing.module.ts- file
  • modify const routes: Routes = [...]-array as follows (insert generated code from the clipboard):
const routes: Routes = [

///////// begin PhbkEnterpriseView  
  { path: 'PhbkEnterpriseView/ViewPhbkEnterpriseView/:hf2/:id2', 
  loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-rv-lazy.routing.module').then(m => m.PhbkEnterpriseViewRvLazyRoutingModule),
  data: { vn: 'PhbkEnterpriseView', va: 'v', /* sf: true,  title: 'View Enterprise', */ hf: 'hf2',  id: 'id2', dp: 2}},

{ path: 'PhbkEnterpriseView/AddPhbkEnterpriseView/:hf2', 
  loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-ra-lazy.routing.module').then(m => m.PhbkEnterpriseViewRaLazyRoutingModule),
  data: { vn: 'PhbkEnterpriseView', va: 'a', /* sf: true,  title: 'Add Enterprise', */ hf: 'hf2',  dp: 2}},

{ path: 'PhbkEnterpriseView/UpdPhbkEnterpriseView/:hf2/:id2', 
  loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-ru-lazy.routing.module').then(m => m.PhbkEnterpriseViewRuLazyRoutingModule),
  data: { vn: 'PhbkEnterpriseView', va: 'u', /* sf: true,  title: 'Update Enterprise', */ hf: 'hf2',  id: 'id2',  dp: 2}},

{ path: 'PhbkEnterpriseView/DelPhbkEnterpriseView/:hf2/:id2', 
  loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-rd-lazy.routing.module').then(m => m.PhbkEnterpriseViewRdLazyRoutingModule),
  data: { vn: 'PhbkEnterpriseView', va: 'd', /* sf: true,  title: 'Delete Enterprise', */ hf: 'hf2',  id: 'id2',  dp: 2}},

{ path: 'PhbkEnterpriseView', 
  loadChildren: () => import('./components/phbk-enterprise-view/phbk-enterprise-view-rl-lazy.routing.module').then(m => m.PhbkEnterpriseViewRlLazyRoutingModule),
  data: { vn: 'PhbkEnterpriseView', va: 'l', ms: true,  fh: 2, mh: 10, sf: true, /* title: 'Enterprises', */  dp: 1, uid: '00f49a2e5d0945f6bb083b33a22dc6bd' }  },
///////// end PhbkEnterpriseView

  ...
  { path: 'authentication', loadChildren: () => import('./shared/modules/app-glbl-security.module').then(m => m.AppGlblSecurityModule) },  

  { path: 'home', component: AppGlblHomeComponent }, 
  { path: '',   redirectTo: '/home', pathMatch: 'full' }, 
//  { path: '**', component: AppGlblHomeComponent },
  { path: '**', component: AppGlblPagenotfoundComponent },

];

11 Modify AppComponentHtml file

  • open app.component.html- file
    • inside <mat-nav-list>...</mat-nav-list> insert recommended line
      <mat-nav-list>
        <a mat-list-item [routerLink]="['/home']" routerLinkActive="active"> <mat-icon>home</mat-icon> </a> 

<!--
        <a mat-list-item [routerLink]="['/admin1feature']" routerLinkActive="active">Admin1</a> 
-->
        <a mat-list-item [routerLink]="['RDLPhbkPhoneTypeView']" routerLinkActive="active">List of Phone Types (Dlg)</a>
        <a mat-list-item [routerLink]="['PhbkPhoneTypeView']" routerLinkActive="active">List of Phone Types</a>
        <a mat-list-item [routerLink]="['/simpledictionary']" routerLinkActive="active">Title for SimpleDictionary </a> 

        <a mat-list-item [routerLink]="['RDLPhbkEnterpriseView']" routerLinkActive="active">List of Enterprises (Dlg)</a>
        <a mat-list-item [routerLink]="['PhbkEnterpriseView']" routerLinkActive="active">List of Enterprises</a>
      </mat-nav-list>

12 Test Rl Component

12 Run PhBkWebApp

  • With Visual Studio 2022 launch PhBkWebApp-app

12 Run Angular App

  • save changes of the app-routing.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
  • Here is a result
Click to show the picture

project structure

  • and Update Item-form
Click to show the picture

project structure

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