refactoring
This commit is contained in:
parent
465a3124d3
commit
8d73524de6
16
package-lock.json
generated
16
package-lock.json
generated
|
|
@ -9975,6 +9975,16 @@
|
|||
"deep-freeze-strict": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"ngx-logger": {
|
||||
"version": "4.0.5",
|
||||
"resolved": "https://registry.npmjs.org/ngx-logger/-/ngx-logger-4.0.5.tgz",
|
||||
"integrity": "sha512-RUvu6TeDga+nUFGMwGiUn+GTCwpshfF4rsfS02i8euGXE9Lq9PPPzHg10sgonPCYBYj4GAx+bdPRv8BQpRyldQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"tslib": "^1.9.0",
|
||||
"vlq": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"ngx-perfect-scrollbar": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-8.0.0.tgz",
|
||||
|
|
@ -14377,6 +14387,12 @@
|
|||
"extsprintf": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"vlq": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/vlq/-/vlq-1.0.1.tgz",
|
||||
"integrity": "sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==",
|
||||
"dev": true
|
||||
},
|
||||
"vm-browserify": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.0.tgz",
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@
|
|||
"moment": "^2.24.0",
|
||||
"ng-packagr": "^5.4.0",
|
||||
"ngrx-store-freeze": "^0.2.4",
|
||||
"ngx-logger": "^4.0.5",
|
||||
"ngx-perfect-scrollbar": "^8.0.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"parallel-webpack": "^2.4.0",
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const routes: Routes = [
|
|||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forRoot(routes, { enableTracing: true })],
|
||||
imports: [RouterModule.forRoot(routes, { enableTracing: false })],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AppRoutingModule {}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
:host {
|
||||
width: 100%;
|
||||
height: auto !important;
|
||||
}
|
||||
|
|
@ -24,6 +24,8 @@ import { UCapWebStorageModule } from '@ucap-webmessenger/web-storage';
|
|||
|
||||
import { UCapUtilModule } from '@ucap-webmessenger/util';
|
||||
|
||||
import { LoggerModule, NgxLoggerLevel } from 'ngx-logger';
|
||||
|
||||
import { environment } from '../environments/environment';
|
||||
|
||||
import { AppProviderModule } from './app-provider.module';
|
||||
|
|
@ -77,7 +79,11 @@ import { GUARDS } from './guards';
|
|||
AppProviderModule,
|
||||
AppRoutingModule,
|
||||
AppStoreModule,
|
||||
AppTranslateModule
|
||||
AppTranslateModule,
|
||||
|
||||
LoggerModule.forRoot({
|
||||
level: NgxLoggerLevel.DEBUG
|
||||
})
|
||||
],
|
||||
providers: [...GUARDS],
|
||||
declarations: [AppComponent],
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { ucapAnimations } from '@ucap-webmessenger/ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout-chat-left-sidenav',
|
||||
templateUrl: './left-sidenav.component.html',
|
||||
styleUrls: ['./left-sidenav.component.scss'],
|
||||
animations: ucapAnimations
|
||||
})
|
||||
export class LeftSidenavComponent implements OnInit {
|
||||
constructor() {}
|
||||
|
||||
ngOnInit() {}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { ucapAnimations } from '@ucap-webmessenger/ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout-chat-right-sidenav',
|
||||
templateUrl: './right-sidenav.component.html',
|
||||
styleUrls: ['./right-sidenav.component.scss'],
|
||||
animations: ucapAnimations
|
||||
})
|
||||
export class RightSidenavComponent implements OnInit {
|
||||
constructor() {}
|
||||
|
||||
ngOnInit() {}
|
||||
}
|
||||
|
|
@ -1,15 +1,15 @@
|
|||
import { IntroComponent } from './intro.component';
|
||||
import { LeftSidenavComponent } from './left-sidenav.component';
|
||||
import { LeftSideComponent } from './left-side.component';
|
||||
import { MessagesComponent } from './messages.component';
|
||||
import { RightSidenavComponent } from './right-sidenav.component';
|
||||
import { RightSideComponent } from './right-side.component';
|
||||
|
||||
import { LEFT_SIDENAV_COMPONENTS } from './left-sidenav';
|
||||
|
||||
export const COMPONENTS = [
|
||||
IntroComponent,
|
||||
LeftSidenavComponent,
|
||||
LeftSideComponent,
|
||||
MessagesComponent,
|
||||
RightSidenavComponent,
|
||||
RightSideComponent,
|
||||
|
||||
...LEFT_SIDENAV_COMPONENTS
|
||||
];
|
||||
|
|
@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
|||
|
||||
import { IntroComponent } from './intro.component';
|
||||
|
||||
describe('Chat::IntroComponent', () => {
|
||||
describe('App::Layout::Messenger::IntroComponent', () => {
|
||||
let component: IntroComponent;
|
||||
let fixture: ComponentFixture<IntroComponent>;
|
||||
|
||||
|
|
@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
|
|||
import { ucapAnimations } from '@ucap-webmessenger/ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout-chat-intro',
|
||||
selector: 'app-layout-messenger-intro',
|
||||
templateUrl: './intro.component.html',
|
||||
styleUrls: ['./intro.component.scss'],
|
||||
animations: ucapAnimations
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<mat-tab-group md-stretch-tabs>
|
||||
<mat-tab-group mat-stretch-tabs>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon>group</mat-icon>
|
||||
|
|
@ -1,19 +1,19 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { LeftSidenavComponent } from './left-sidenav.component';
|
||||
import { LeftSideComponent } from './left-side.component';
|
||||
|
||||
describe('Chat::LeftSidenavComponent', () => {
|
||||
let component: LeftSidenavComponent;
|
||||
let fixture: ComponentFixture<LeftSidenavComponent>;
|
||||
describe('App::Layout::Messenger::LeftSideComponent', () => {
|
||||
let component: LeftSideComponent;
|
||||
let fixture: ComponentFixture<LeftSideComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [LeftSidenavComponent]
|
||||
declarations: [LeftSideComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(LeftSidenavComponent);
|
||||
fixture = TestBed.createComponent(LeftSideComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { ucapAnimations } from '@ucap-webmessenger/ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout-messenger-left-side',
|
||||
templateUrl: './left-side.component.html',
|
||||
styleUrls: ['./left-side.component.scss'],
|
||||
animations: ucapAnimations
|
||||
})
|
||||
export class LeftSideComponent implements OnInit {
|
||||
constructor() {}
|
||||
|
||||
ngOnInit() {}
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
|||
|
||||
import { MessagesComponent } from './messages.component';
|
||||
|
||||
describe('Chat::MessagesComponent', () => {
|
||||
describe('App::Layout::Messenger::MessagesComponent', () => {
|
||||
let component: MessagesComponent;
|
||||
let fixture: ComponentFixture<MessagesComponent>;
|
||||
|
||||
|
|
@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
|
|||
import { ucapAnimations } from '@ucap-webmessenger/ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout-chat-messages',
|
||||
selector: 'app-layout-messenger-messages',
|
||||
templateUrl: './messages.component.html',
|
||||
styleUrls: ['./messages.component.scss'],
|
||||
animations: ucapAnimations
|
||||
|
|
@ -1,19 +1,19 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { RightSidenavComponent } from './right-sidenav.component';
|
||||
import { RightSideComponent } from './right-side.component';
|
||||
|
||||
describe('Chat::RightSidenavComponent', () => {
|
||||
let component: RightSidenavComponent;
|
||||
let fixture: ComponentFixture<RightSidenavComponent>;
|
||||
describe('App::Layout::Messenger::RightSideComponent', () => {
|
||||
let component: RightSideComponent;
|
||||
let fixture: ComponentFixture<RightSideComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [RightSidenavComponent]
|
||||
declarations: [RightSideComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(RightSidenavComponent);
|
||||
fixture = TestBed.createComponent(RightSideComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { ucapAnimations } from '@ucap-webmessenger/ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout-messenger-right-side',
|
||||
templateUrl: './right-side.component.html',
|
||||
styleUrls: ['./right-side.component.scss'],
|
||||
animations: ucapAnimations
|
||||
})
|
||||
export class RightSideComponent implements OnInit {
|
||||
constructor() {}
|
||||
|
||||
ngOnInit() {}
|
||||
}
|
||||
|
|
@ -27,4 +27,4 @@ import { COMPONENTS } from './components';
|
|||
declarations: [...COMPONENTS],
|
||||
entryComponents: []
|
||||
})
|
||||
export class AppChatLayoutModule {}
|
||||
export class AppMessengerLayoutModule {}
|
||||
|
|
@ -1,43 +1,26 @@
|
|||
<div id="messenger" class="page-layout carded fullwidth inner-scroll">
|
||||
<div class="container">
|
||||
<!-- TOP BACKGROUND -->
|
||||
<div class="top-bg accent"></div>
|
||||
<div></div>
|
||||
<!-- / TOP BACKGROUND -->
|
||||
|
||||
<!-- CENTER -->
|
||||
<div class="center">
|
||||
<div>
|
||||
<!-- CONTENT CARD -->
|
||||
<div class="content-card">
|
||||
<mat-sidenav-container>
|
||||
<!-- LEFT SIDENAV -->
|
||||
<mat-sidenav
|
||||
class="sidenav left-sidenav"
|
||||
position="start"
|
||||
opened="true"
|
||||
mode="side"
|
||||
matIsLockedOpen="gt-md"
|
||||
>
|
||||
<app-layout-chat-left-sidenav></app-layout-chat-left-sidenav>
|
||||
</mat-sidenav>
|
||||
<!-- / LEFT SIDENAV -->
|
||||
|
||||
<!-- CONTENT -->
|
||||
<app-layout-chat-intro *ngIf="!selectedChat"></app-layout-chat-intro>
|
||||
|
||||
<app-layout-chat-messages
|
||||
<div>
|
||||
<div class="left-side">
|
||||
<app-layout-messenger-left-side></app-layout-messenger-left-side>
|
||||
</div>
|
||||
<div>
|
||||
<app-layout-messenger-intro
|
||||
*ngIf="!selectedChat"
|
||||
></app-layout-messenger-intro>
|
||||
<app-layout-messenger-messages
|
||||
*ngIf="selectedChat"
|
||||
></app-layout-chat-messages>
|
||||
<!-- / CONTENT -->
|
||||
<!-- RIGHT SIDENAV -->
|
||||
<mat-sidenav
|
||||
class="sidenav right-sidenav"
|
||||
position="end"
|
||||
opened="true"
|
||||
mode="side"
|
||||
>
|
||||
<app-layout-chat-right-sidenav></app-layout-chat-right-sidenav>
|
||||
</mat-sidenav>
|
||||
<!-- / RIGHT SIDENAV -->
|
||||
</mat-sidenav-container>
|
||||
></app-layout-messenger-messages>
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<app-layout-messenger-right-side></app-layout-messenger-right-side>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / CONTENT CARD -->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,55 +1,12 @@
|
|||
#messenger {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
height: auto !important;
|
||||
|
||||
.center {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
|
||||
.content-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
border-radius: 8px;
|
||||
|
||||
.mat-sidenav-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
.container {
|
||||
width: 100%;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.left-sidenav {
|
||||
.left-side {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.right-sidenav {
|
||||
.right-side {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
> .mat-sidenav-content,
|
||||
> .mat-drawer-content {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
min-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
> .mat-drawer-content {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
mat-sidenav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 400px;
|
||||
max-width: 90%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
|
|||
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
|
||||
import { AppChatLayoutModule } from '@app/layouts/chat/chat.layout.module';
|
||||
import { AppMessengerLayoutModule } from '@app/layouts/messenger/messenger.layout.module';
|
||||
|
||||
import { AppMessengerRoutingPageModule } from './messenger-routing.page.module';
|
||||
|
||||
|
|
@ -13,7 +13,7 @@ import { COMPONENTS } from './components';
|
|||
imports: [
|
||||
CommonModule,
|
||||
MatSidenavModule,
|
||||
AppChatLayoutModule,
|
||||
AppMessengerLayoutModule,
|
||||
AppMessengerRoutingPageModule
|
||||
],
|
||||
declarations: [...COMPONENTS],
|
||||
|
|
|
|||
|
|
@ -14,12 +14,14 @@ import {
|
|||
} from '@ucap-webmessenger/protocol-authentication';
|
||||
|
||||
import * as AuthenticationStore from '../store/account/authentication';
|
||||
import { NGXLogger } from 'ngx-logger';
|
||||
|
||||
@Injectable()
|
||||
export class AppNotificationService {
|
||||
constructor(
|
||||
private protocolService: ProtocolService,
|
||||
private store: Store<any>
|
||||
private store: Store<any>,
|
||||
private logger: NGXLogger
|
||||
) {}
|
||||
|
||||
public subscribe(): void {
|
||||
|
|
@ -32,7 +34,7 @@ export class AppNotificationService {
|
|||
),
|
||||
tap(message => {
|
||||
const logoutRes = decodeLogout(message);
|
||||
console.log('logoutRes', logoutRes);
|
||||
this.logger.debug('logoutRes', logoutRes);
|
||||
this.store.dispatch(AuthenticationStore.logout());
|
||||
})
|
||||
)
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import { catchError, exhaustMap, map, withLatestFrom } from 'rxjs/operators';
|
|||
|
||||
import { Store, select } from '@ngrx/store';
|
||||
|
||||
import { NGXLogger } from 'ngx-logger';
|
||||
|
||||
import {
|
||||
buddy2,
|
||||
buddy2Success,
|
||||
|
|
@ -38,7 +40,7 @@ export class Effects {
|
|||
withLatestFrom(
|
||||
this.store.pipe(
|
||||
select(state => {
|
||||
console.log('state', state);
|
||||
this.logger.debug('state', state);
|
||||
return state.messenger.sync.buddy2SyncDate as string;
|
||||
})
|
||||
)
|
||||
|
|
@ -72,7 +74,7 @@ export class Effects {
|
|||
withLatestFrom(
|
||||
this.store.pipe(
|
||||
select(state => {
|
||||
console.log('state', state);
|
||||
this.logger.debug('state', state);
|
||||
return state.messenger.sync.group2SyncDate as string;
|
||||
})
|
||||
)
|
||||
|
|
@ -104,6 +106,7 @@ export class Effects {
|
|||
private actions$: Actions,
|
||||
private store: Store<any>,
|
||||
private syncProtocolService: SyncProtocolService,
|
||||
private sessionStorageService: SessionStorageService
|
||||
private sessionStorageService: SessionStorageService,
|
||||
private logger: NGXLogger
|
||||
) {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ import { PublicApiService } from '@ucap-webmessenger/api-public';
|
|||
import { StatusCode } from '@ucap-webmessenger/api';
|
||||
import { SessionStorageService } from '@ucap-webmessenger/web-storage';
|
||||
|
||||
import { NGXLogger } from 'ngx-logger';
|
||||
|
||||
import { fetch, fetchSuccess, fetchFailure } from './actions';
|
||||
|
||||
@Injectable()
|
||||
|
|
@ -22,7 +24,7 @@ export class Effects {
|
|||
this.publicApiService.versionInfo2(req).pipe(
|
||||
map(res => {
|
||||
if (res.statusCode === StatusCode.Success) {
|
||||
console.log('fetchSuccess', res);
|
||||
this.logger.debug('fetchSuccess', res);
|
||||
return fetchSuccess(res);
|
||||
} else {
|
||||
return fetchFailure({ error: 'Failed' });
|
||||
|
|
@ -47,6 +49,7 @@ export class Effects {
|
|||
private actions$: Actions,
|
||||
private publicApiService: PublicApiService,
|
||||
private sessionStorageService: SessionStorageService,
|
||||
private router: Router
|
||||
private router: Router,
|
||||
private logger: NGXLogger
|
||||
) {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,8 @@ import { PacketBodyValue } from '../types/packet-body-value.type';
|
|||
import { SSVC_TYPE_ERROR_RES, ServerErrorCode } from '../types/service';
|
||||
import { ProtocolMessage } from '../models/protocol';
|
||||
|
||||
import { NGXLogger } from 'ngx-logger';
|
||||
|
||||
interface RequestState {
|
||||
subject: Subject<ProtocolMessage>;
|
||||
request: {
|
||||
|
|
@ -45,7 +47,10 @@ export class ProtocolService {
|
|||
private serverMessageSubject: Subject<ProtocolMessage> | null = null;
|
||||
private serverMessage$: Observable<ProtocolMessage> | null = null;
|
||||
|
||||
constructor(@Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig) {
|
||||
constructor(
|
||||
@Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig,
|
||||
private logger: NGXLogger
|
||||
) {
|
||||
this.pendingRequests = new Map();
|
||||
this.input$ = new QueueingSubject<string>();
|
||||
this.serverMessageSubject = new Subject();
|
||||
|
|
@ -106,16 +111,23 @@ export class ProtocolService {
|
|||
(error: Error) => {
|
||||
const { message } = error;
|
||||
if (message === NormalClosureMessage) {
|
||||
console.log('server closed the websocket connection normally');
|
||||
this.logger.info(
|
||||
'server closed the websocket connection normally'
|
||||
);
|
||||
} else {
|
||||
console.log('socket was disconnected due to error:', message);
|
||||
this.logger.error(
|
||||
'socket was disconnected due to error:',
|
||||
message
|
||||
);
|
||||
}
|
||||
},
|
||||
() => {
|
||||
// The clean termination only happens in response to the last
|
||||
// subscription to the observable being unsubscribed, any
|
||||
// other closure is considered an error.
|
||||
console.log('the connection was closed in response to the user');
|
||||
this.logger.info(
|
||||
'the connection was closed in response to the user'
|
||||
);
|
||||
}
|
||||
);
|
||||
} catch (error) {
|
||||
|
|
@ -170,7 +182,7 @@ export class ProtocolService {
|
|||
if (this.pendingRequests.has(requestId)) {
|
||||
this.pendingRequests.delete(requestId);
|
||||
}
|
||||
console.log(
|
||||
this.logger.debug(
|
||||
'ProtocolService::pendingRequests.size',
|
||||
this.pendingRequests.size
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<mat-expansion-panel *ngFor="let group of groupList">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title> {{ group.name }} </mat-panel-title>
|
||||
<mat-panel-description>{{ group.name }} </mat-panel-description>
|
||||
<mat-panel-description> </mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user