bug fixed

package-lock.json

@@ -2049,15 +2049,20 @@
       "integrity": "sha512-gVGOTfGmp58U0nHEn0UkjMc9AWQEmopNXDbyIrltMwR5XCKweC9AWXAiQzDxCb3sN07cSozEseFBJzJ7XO+dwg=="
     },
     "@ucap/ng-ui": {
-      "version": "0.0.3",
-      "resolved": "http://10.81.13.221:8081/nexus/repository/npm-all/@ucap/ng-ui/-/ng-ui-0.0.3.tgz",
-      "integrity": "sha512-U/tpzUgXSGrWzetmmqEcLYYzgCUEew3C0CcfYSr+ajkt4AvHqcFijqXARVHXVahfAkMXZU69/8etDhzWmOcvGw=="
+      "version": "0.0.4",
+      "resolved": "http://10.81.13.221:8081/nexus/repository/npm-all/@ucap/ng-ui/-/ng-ui-0.0.4.tgz",
+      "integrity": "sha512-DcrZx55uGvvc70vUxP2fkgQhORMMBgkKWRdG5zH1PpgB4wY1Od887DgFJISEQzbcFNBNr6TiX+I8e64maGQp0A=="
     },
     "@ucap/ng-ui-authentication": {
       "version": "0.0.16",
       "resolved": "http://10.81.13.221:8081/nexus/repository/npm-all/@ucap/ng-ui-authentication/-/ng-ui-authentication-0.0.16.tgz",
       "integrity": "sha512-ThtIkyBty14Yp9xgWoCWW0v2YMlQHGJgZyXAX8tP8Pvl0MdUEV8eRXAnEz5fTdHg2Fa26AK6LXsPVnhixO3HsQ=="
     },
+    "@ucap/ng-ui-group": {
+      "version": "0.0.3",
+      "resolved": "http://10.81.13.221:8081/nexus/repository/npm-all/@ucap/ng-ui-group/-/ng-ui-group-0.0.3.tgz",
+      "integrity": "sha512-VH0X1xy2IaHwe0ihkKn9N3fmpz8KD5xAmf8tSTC/DbvoxCI2r7nlRddvh9emthOkdKIqXhbaO20Q1oKrXUGvxg=="
+    },
     "@ucap/ng-ui-organization": {
       "version": "0.0.2",
       "resolved": "http://10.81.13.221:8081/nexus/repository/npm-all/@ucap/ng-ui-organization/-/ng-ui-organization-0.0.2.tgz",

package.json

@@ -74,9 +74,10 @@
     "@ucap/ng-store-organization": "~0.0.4",
     "@ucap/ng-web-socket": "~0.0.2",
     "@ucap/ng-web-storage": "~0.0.3",
-    "@ucap/ng-ui": "~0.0.3",
+    "@ucap/ng-ui": "~0.0.4",
     "@ucap/ng-ui-organization": "~0.0.2",
     "@ucap/ng-ui-authentication": "~0.0.16",
+    "@ucap/ng-ui-group": "~0.0.3",
     "@ucap/ng-ui-skin-default": "~0.0.1",
     "@ucap/pi": "~0.0.5",
     "@ucap/protocol": "~0.0.17",

src/app/app-routing.module.ts

@@ -10,7 +10,7 @@ import { AppSessionResolver } from './resolvers/app-session.resolver';
 const routes: Routes = [
   {
     path: '',
-    redirectTo: '/organization/(content:index)',
+    redirectTo: '/group/(content:index)',
     pathMatch: 'full'
   },
   {

src/app/layouts/components/default.layout.component.html

@@ -92,28 +92,6 @@
           </div>
         </ng-template>
       </mat-tab>
-
-      <mat-tab>
-        <ng-template mat-tab-label>
-          <div class="icon-item">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="30"
-              height="30"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="#000000"
-              stroke-width="1.5"
-              stroke-linecap="butt"
-              stroke-linejoin="bevel"
-            >
-              <polygon
-                points="21.368 12.001 3 21.609 3 14 11 12 3 9.794 3 2.394"
-              />
-            </svg>
-          </div>
-        </ng-template>
-      </mat-tab>
     </mat-tab-group>
   </div>
   <div class="content-container" fxFlexFill>

src/app/pages/group/components/index.page.component.ts

@@ -1,12 +1,37 @@
-import { Component, Inject } from '@angular/core';
+import { Subscription } from 'rxjs';
+
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Router, ActivatedRoute, Params } from '@angular/router';
 
 import { LogService } from '@ucap/ng-logger';
 
+import { QueryParams } from '../types/params.type';
+
 @Component({
   selector: 'app-pages-group-index',
   templateUrl: './index.page.component.html',
   styleUrls: ['./index.page.component.scss']
 })
-export class IndexPageComponent {
-  constructor(private logService: LogService) {}
+export class IndexPageComponent implements OnInit, OnDestroy {
+  private paramsSubscription: Subscription;
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private router: Router,
+    private logService: LogService
+  ) {}
+
+  ngOnInit(): void {
+    this.paramsSubscription = this.activatedRoute.queryParams.subscribe(
+      (params: Params) => {
+        console.log('IndexPageComponent', params[QueryParams.ID]);
+      }
+    );
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.paramsSubscription) {
+      this.paramsSubscription.unsubscribe();
+    }
+  }
 }

src/app/pages/group/components/sidenav.page.component.html

@@ -1,3 +1,4 @@
-<div fxFlexFill>
-  sidenav page of group is works!
+<div fxFlexFill class="sidenav-container">
+  <app-sections-group-search></app-sections-group-search>
+  <app-sections-group-list fxFlexFill></app-sections-group-list>
 </div>

src/app/pages/group/components/sidenav.page.component.scss

@@ -0,0 +1,3 @@
+.sidenav-container {
+  overflow: hidden;
+}

src/app/pages/group/components/sidenav.page.component.ts

@@ -1,12 +1,37 @@
-import { Component, Inject } from '@angular/core';
+import { Subscription } from 'rxjs';
+
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { ActivatedRoute, Router, Params } from '@angular/router';
 
 import { LogService } from '@ucap/ng-logger';
 
+import { QueryParams } from '../types/params.type';
+
 @Component({
   selector: 'app-pages-group-sidenav',
   templateUrl: './sidenav.page.component.html',
   styleUrls: ['./sidenav.page.component.scss']
 })
-export class SidenavPageComponent {
-  constructor(private logService: LogService) {}
+export class SidenavPageComponent implements OnInit, OnDestroy {
+  private queryParamsSubscription: Subscription;
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private router: Router,
+    private logService: LogService
+  ) {}
+
+  ngOnInit(): void {
+    this.queryParamsSubscription = this.activatedRoute.queryParams.subscribe(
+      (params: Params) => {
+        console.log('SidenavPageComponent', params[QueryParams.ID]);
+      }
+    );
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.queryParamsSubscription) {
+      this.queryParamsSubscription.unsubscribe();
+    }
+  }
 }

src/app/pages/group/group.page.module.ts

@@ -3,6 +3,8 @@ import { CommonModule } from '@angular/common';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 
+import { AppGroupSectionModule } from '@app/sections/group/group.section.module';
+
 import { AppGroupRoutingPageModule } from './group-routing.page.module';
 
 import { IndexPageComponent } from './components/index.page.component';
@@ -13,7 +15,12 @@ export const COMPONENTS = [IndexPageComponent, SidenavPageComponent];
 export { IndexPageComponent, SidenavPageComponent };
 
 @NgModule({
-  imports: [CommonModule, FlexLayoutModule, AppGroupRoutingPageModule],
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    AppGroupSectionModule,
+    AppGroupRoutingPageModule
+  ],
   declarations: [...COMPONENTS],
   entryComponents: []
 })

src/app/pages/group/types/params.type.ts

@@ -0,0 +1,3 @@
+export enum QueryParams {
+  ID = 'id'
+}

src/app/sections/group/components/index.ts

@@ -0,0 +1,4 @@
+import { ListSectionComponent } from './list.section.component';
+import { SearchSectionComponent } from './search.section.component';
+
+export const COMPONENTS = [ListSectionComponent, SearchSectionComponent];

src/app/sections/group/components/list.section.component.html

@@ -0,0 +1,3 @@
+<div fxFlexFill class="list-container">
+  <ucap-group-expansion-list></ucap-group-expansion-list>
+</div>

src/app/sections/group/components/list.section.component.scss

@@ -0,0 +1,2 @@
+.list-container {
+}

src/app/sections/group/components/list.section.component.spec.ts

@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ListSectionComponent } from './list.section.component';
+
+describe('app::sections::group::ListSectionComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [ListSectionComponent]
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(ListSectionComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'ucap-lg-web'`, () => {
+    const fixture = TestBed.createComponent(ListSectionComponent);
+    const app = fixture.componentInstance;
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(ListSectionComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain(
+      'ucap-lg-web app is running!'
+    );
+  });
+});

src/app/sections/group/components/list.section.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+
+import { LogService } from '@ucap/ng-logger';
+import {
+  VirtualScrollStrategy,
+  FixedSizeVirtualScrollStrategy,
+  VIRTUAL_SCROLL_STRATEGY
+} from '@angular/cdk/scrolling';
+
+@Component({
+  selector: 'app-sections-group-list',
+  templateUrl: './list.section.component.html',
+  styleUrls: ['./list.section.component.scss'],
+  providers: [
+    {
+      provide: VIRTUAL_SCROLL_STRATEGY,
+      useValue: new FixedSizeVirtualScrollStrategy(60, 3, 3)
+    }
+  ]
+})
+export class ListSectionComponent implements OnInit, OnDestroy {
+  constructor(private logService: LogService) {}
+
+  ngOnInit(): void {}
+
+  ngOnDestroy(): void {}
+}

src/app/sections/group/components/search.section.component.html

@@ -0,0 +1,3 @@
+<div>
+  search section of group
+</div>

src/app/sections/group/components/search.section.component.spec.ts

@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { SearchSectionComponent } from './search.section.component';
+
+describe('app::sections::group::SearchSectionComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [SearchSectionComponent]
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(SearchSectionComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'ucap-lg-web'`, () => {
+    const fixture = TestBed.createComponent(SearchSectionComponent);
+    const app = fixture.componentInstance;
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(SearchSectionComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain(
+      'ucap-lg-web app is running!'
+    );
+  });
+});

src/app/sections/group/components/search.section.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+
+import { LogService } from '@ucap/ng-logger';
+
+@Component({
+  selector: 'app-sections-group-search',
+  templateUrl: './search.section.component.html',
+  styleUrls: ['./search.section.component.scss']
+})
+export class SearchSectionComponent implements OnInit, OnDestroy {
+  constructor(private logService: LogService) {}
+
+  ngOnInit(): void {}
+
+  ngOnDestroy(): void {}
+}

src/app/sections/group/group.section.module.ts

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+import { I18nModule, UCAP_I18N_NAMESPACE } from '@ucap/ng-i18n';
+
+import { GroupUiModule } from '@ucap/ng-ui-group';
+
+import { COMPONENTS } from './components';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    MatCheckboxModule,
+    I18nModule,
+    GroupUiModule
+  ],
+  exports: [...COMPONENTS],
+  declarations: [...COMPONENTS],
+  entryComponents: [],
+  providers: [
+    {
+      provide: UCAP_I18N_NAMESPACE,
+      useValue: ['group']
+    }
+  ]
+})
+export class AppGroupSectionModule {}