blank page (layout) without any theme in the solution #10280

6 Answer(s)

• 

  0

  ismcagdas created 3 years ago

  Support Team

  Hi @billyteng

  I assume you have placed your new page under app.module (either admin or main module). If this page is accessed only for authenticated users, you can create a new layour similar to one of existing theme layouts and conditioanlly place it here https://github.com/aspnetzero/aspnet-zero-core/blob/dev/angular/src/app/app.component.html#L12. You can for example set, theme to "empty" and render your custom layout in that case;

  <my-empty-layout *ngIf="theme=='empty'"></my-empty-layout>
  

  Save Cancel
• 

  0

  billyteng created 3 years ago

  Hi ismcagdas

  Now new layout is ok. I created ThemeEmptyLayoutComponent as you guide with

  @Component({
      templateUrl: './themeEmpty-layout.component.html',
      selector: 'themeEmpty-layout',
      animations: [appModuleAnimation()]
  })
  

  themeEmpty-layout.component.html file include

  <div [@routerTransition] class="d-flex flex-column flex-root">
      <topbar></topbar>
      <router-outlet></router-outlet>
  </div>
  

  Then I add <themeEmpty-layout *ngIf="theme=='themeEmpty'"></themeEmpty-layout> into app.component.html and ThemeEmptyLayoutComponent into app.module.ts I have already checked admin role is show your themes and user role is show emptytheme in app.component.ts file. It is ok. Now I created frontpage component,module,routing,html files under frontpage folder in main folder. In Html file

  <div [@routerTransition]>
  my textbox forms
  </div>
  
  In Component
  @Component({
      templateUrl: './frontpage.component.html',
      encapsulation: ViewEncapsulation.None,
      animations: [appModuleAnimation()],
  })
  export class FrontPageComponent extends AppComponentBase implements OnInit, AfterViewInit {
  }
  

  In routing

  ....component: FrontPageComponent,....
  export class FrontPageRoutingModule {}
  
  In Module
  declarations:FrontPageComponent
  imports:imports
  export class FrontPageModule {}
  

  Last, In main-routing.module file

   {
          path: 'frontpage',
          loadChildren: () => import('./frontpage/frontpage.module').then(m => m.FrontPageModule),
          data: { permission: 'Pages.FrontPage' }
  },
  

  In app-routing.module file I have comment to notifications

  // { path: 'notifications', component: NotificationsComponent },
    { path: 'frontpage', component:FrontPageComponent },                     
  
  // path: '**', redirectTo: 'notifications'
  path: '**', redirectTo: 'frontpage'
  

  Now after I user login, show empty layout but not show any my textbox forms. Is there anything way to show. Why empty layout <router-outlet></router-outlet> not work?

  After user login (not admin) current logic is if user got permission then show dasboard or show notifications based on permission.

  please suggest me.

  Save Cancel
• 

  0

  musa.demir created 3 years ago

  Hi @billyteng

  Can you please share the content of the frontpage.component.html

  Save Cancel
• 

  0

  billyteng created 3 years ago

  Module File

  import { AgmCoreModule } from '@agm/core';

  @NgModule({ declarations: [ FrontPageComponent,
  FrontPagePickupInfoLookupTableModalComponent,

  ],
  imports: [AppSharedModule, FrontPageRoutingModule, AdminSharedModule,
      AgmCoreModule.forRoot({
      apiKey: '',
      libraries: ['places']
    })
  ],
  

  }) export class FrontPageModule {}

  Component File @Component({ templateUrl: './frontpage.component.html', encapsulation: ViewEncapsulation.None, animations: [appModuleAnimation()], }) export class FrontPageComponent extends AppComponentBase implements OnInit, AfterViewInit { }

  Routing File const routes: Routes = [ { path: '', component: FrontPageComponent, pathMatch: 'full', }, ];

  @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule], }) export class FrontPageRoutingModule {}

  

  Save Cancel
• 

  0

  billyteng created 3 years ago

  <div [@routerTransition]>
  <div class="content d-flex flex-column flex-column-fluid" style="background-color:azure">
  <div [class]="containerClass"> <div class="row"> <div class="col-4">
  <h3 class="card-title align-items-start flex-column"> <span class="font-weight-bolder text-dark"> ROUTE (MAX. 20 STOPS) </span> </h3> <div class="card card-custom gutter-b"> <div class="card-body"> <div class="form-group m-form__group"> <label for="PickupLocation">{{ l('Pick Up Location') }}</label>
  <div class="input-group">
  <input
  class="form-control" id="PickupLocation" name="pickupLocation" [(ngModel)]="pickupLocation" type="text"
  (ngModelChange)="modelChangeFn($event)"
  (keydown.enter)="$event.preventDefault()" placeholder="Enter address" autocorrect="off" autocapitalize="off" spellcheck="off" #search
  />
  <input class="form-control" name="latitude" [(ngModel)]="latitude" type="text" hidden /> <input class="form-control" name="longitude" [(ngModel)]="longitude" type="text" hidden/>
  <!-- <validation-messages [formCtrl]="addressInput"></validation-messages> --> <div class="input-group-append"> <button class="btn btn-primary blue" (click)="openPickupInfoModal()" type="button" [disabled]="pickInfoBtn"> <i class="fa fa-search"></i> {{ l('Pickup Info') }} </button> </div> <div class="input-group-prepend"> <button class="btn btn-danger btn-icon" type="button" (click)="setPickupNull()"> <i class="fa fa-times"></i> </button> </div> </div> </div> <!-- class="card-body" --> <div *ngIf="pickupOk" [perfectScrollbar]> <div class="table-responsive"> <!--begin::Table--> <table class="table"> <!--begin::Thead--> <thead> <tr> <td class="m-widget11__label">Address</td> <td class="m-widget11__app">Name</td> <td class="m-widget11__sales">Phone Number</td> <td class="m-widget11__change">Floor/House/Room</td> <td class="m-widget11__label"></td>
  </tr> </thead> <!--end::Thead--> <!--begin::Tbody--> <tbody> <tr *ngFor="let p of pickupList; let i = index">
  <td>{{p.address}}</td> <td>{{p.name}}</td>
  <td>{{p.phoneNumber }}</td> <td>{{p.floorHouseRoom }}</td> <td> <button class="btn btn-danger btn-icon" type="button" (click)="remove(i,p)"> <i class="fa fa-times"></i> </button></td> </tr> </tbody> </table> </div> </div>
  </div> </div>
  </div> <div class="col-6"> <agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom" style="height:100%;width: 100%;"> <agm-marker [latitude]="latitude" [longitude]="longitude" [markerDraggable]="true" (dragEnd)="markerDragEnd($event)"></agm-marker> </agm-map> </div> </div> </div>
  </div>
  <frontpagePickupInfoLookupTableModal #frontpagePickupInfoLookupTableModal (modalSave)="getDeliveryInfo()"></frontpagePickupInfoLookupTableModal>
  </div>

  Save Cancel
• 

  0

  billyteng created 3 years ago

  Hi Sir,

  Any updates ?

  Thanks

  Save Cancel