diff --git a/package-lock.json b/package-lock.json index 6c26ffc..d7e416b 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index b8b4f13..7f1a2f5 100644 --- a/package.json +++ b/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", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 161e13c..f0787e5 100644 --- a/src/app/app-routing.module.ts +++ b/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' }, { diff --git a/src/app/layouts/components/default.layout.component.html b/src/app/layouts/components/default.layout.component.html index f3a7cc4..2615bc8 100644 --- a/src/app/layouts/components/default.layout.component.html +++ b/src/app/layouts/components/default.layout.component.html @@ -92,28 +92,6 @@ - - - -
- - - -
-
-
diff --git a/src/app/pages/group/components/index.page.component.ts b/src/app/pages/group/components/index.page.component.ts index 9ac4bd3..fe6c5e3 100644 --- a/src/app/pages/group/components/index.page.component.ts +++ b/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(); + } + } } diff --git a/src/app/pages/group/components/sidenav.page.component.html b/src/app/pages/group/components/sidenav.page.component.html index e04db7f..25f90c1 100644 --- a/src/app/pages/group/components/sidenav.page.component.html +++ b/src/app/pages/group/components/sidenav.page.component.html @@ -1,3 +1,4 @@ -
- sidenav page of group is works! +
+ +
diff --git a/src/app/pages/group/components/sidenav.page.component.scss b/src/app/pages/group/components/sidenav.page.component.scss index e69de29..76d36e6 100644 --- a/src/app/pages/group/components/sidenav.page.component.scss +++ b/src/app/pages/group/components/sidenav.page.component.scss @@ -0,0 +1,3 @@ +.sidenav-container { + overflow: hidden; +} diff --git a/src/app/pages/group/components/sidenav.page.component.ts b/src/app/pages/group/components/sidenav.page.component.ts index 027ea39..469f8f3 100644 --- a/src/app/pages/group/components/sidenav.page.component.ts +++ b/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(); + } + } } diff --git a/src/app/pages/group/group.page.module.ts b/src/app/pages/group/group.page.module.ts index fa66058..9335a60 100644 --- a/src/app/pages/group/group.page.module.ts +++ b/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: [] }) diff --git a/src/app/pages/group/types/params.type.ts b/src/app/pages/group/types/params.type.ts new file mode 100644 index 0000000..99b5bb6 --- /dev/null +++ b/src/app/pages/group/types/params.type.ts @@ -0,0 +1,3 @@ +export enum QueryParams { + ID = 'id' +} diff --git a/src/app/sections/group/components/index.ts b/src/app/sections/group/components/index.ts new file mode 100644 index 0000000..4cbf983 --- /dev/null +++ b/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]; diff --git a/src/app/sections/group/components/list.section.component.html b/src/app/sections/group/components/list.section.component.html new file mode 100644 index 0000000..b63c805 --- /dev/null +++ b/src/app/sections/group/components/list.section.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/app/sections/group/components/list.section.component.scss b/src/app/sections/group/components/list.section.component.scss new file mode 100644 index 0000000..356b3ad --- /dev/null +++ b/src/app/sections/group/components/list.section.component.scss @@ -0,0 +1,2 @@ +.list-container { +} diff --git a/src/app/sections/group/components/list.section.component.spec.ts b/src/app/sections/group/components/list.section.component.spec.ts new file mode 100644 index 0000000..c60a7bb --- /dev/null +++ b/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!' + ); + }); +}); diff --git a/src/app/sections/group/components/list.section.component.ts b/src/app/sections/group/components/list.section.component.ts new file mode 100644 index 0000000..931bd05 --- /dev/null +++ b/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 {} +} diff --git a/src/app/sections/group/components/search.section.component.html b/src/app/sections/group/components/search.section.component.html new file mode 100644 index 0000000..0cafbea --- /dev/null +++ b/src/app/sections/group/components/search.section.component.html @@ -0,0 +1,3 @@ +
+ search section of group +
diff --git a/src/app/sections/group/components/search.section.component.scss b/src/app/sections/group/components/search.section.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/sections/group/components/search.section.component.spec.ts b/src/app/sections/group/components/search.section.component.spec.ts new file mode 100644 index 0000000..e45a1ca --- /dev/null +++ b/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!' + ); + }); +}); diff --git a/src/app/sections/group/components/search.section.component.ts b/src/app/sections/group/components/search.section.component.ts new file mode 100644 index 0000000..6485ad8 --- /dev/null +++ b/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 {} +} diff --git a/src/app/sections/group/group.section.module.ts b/src/app/sections/group/group.section.module.ts new file mode 100644 index 0000000..cee46f5 --- /dev/null +++ b/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 {}