diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/index.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/index.ts index 17ab1479..17c0e49b 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/index.ts +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/index.ts @@ -1,4 +1,5 @@ import { IntroComponent } from './intro.component'; +import { LeftNaviComponent } from './left-nav.component'; import { LeftSideComponent } from './left-side.component'; import { MessagesComponent } from './messages.component'; import { RightSideComponent } from './right-side.component'; @@ -9,6 +10,7 @@ import { RIGHT_DRAWER_COMPONENTS } from './right-drawer'; export const COMPONENTS = [ IntroComponent, + LeftNaviComponent, LeftSideComponent, MessagesComponent, RightSideComponent, diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.html new file mode 100644 index 00000000..03a8bba4 --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.html @@ -0,0 +1,127 @@ +
+ + + + +
+ + + + +
+ + + + +
+ + + +
+ + + + +
+ + + + + + + + +
+ + + + + +
+ + + +
+ + + +
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.scss new file mode 100644 index 00000000..0d0b4c8e --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.scss @@ -0,0 +1,125 @@ +::ng-deep .mat-tab-label, +::ng-deep .mat-tab-label-active { + min-width: 0 !important; +} + +::ng-deep .mat-tab-body-wrapper, +::ng-deep .mat-tab-body { + height: 100%; + width: 100%; +} +::ng-deep .mat-tab-header { + border-bottom: none !important; + width: 100%; +} + +.left-side-tabs-body { + position: relative; + height: 100%; + div[id^='tabs'] { + height: 100%; + width: 100%; + position: relative; + } +} + +.container { + display: flex; + height: 100%; +} + +.mat-tab-group { + display: flex; + flex-direction: row; +} + +.myprofile { + position: absolute; + display: flex; + flex-flow: column; + justify-content: center; + height: 80px; + width: 68px; + bottom: 10px; + color: #ffffff; + font-size: 11px; + text-align: center; + z-index: 1; + cursor: pointer; +} + +::ng-deep .organization-side { + flex-direction: column; + height: 100%; +} +::ng-deep .global-menu { + .mat-tab-label-container { + .mat-tab-list { + .mat-tab-labels { + flex-flow: column; + height: 360px; + padding-top: 10px; + border-bottom: none; + .mat-tab-label { + width: 100%; + height: 80px; + padding: 0; + } + } + .mat-ink-bar { + background-color: none; + height: 0; + } + } + } +} +.left-group-side { + position: relative; + height: 100%; +} + +::ng-deep .mat-tab-label { + .mat-tab-label-content { + .icon-item { + background: var(--white); + border-radius: 4px; + display: inline-flex; + width: 36px; + height: 36px; + border-radius: 50%; + justify-content: center; + align-items: center; + transform: scale(0.9); + transition: transform 0.3s cubic-bezier(0.4, 0, 0, 1); + + svg { + width: 24px; + height: 24px; + stroke: #ffffff; + stroke-width: 1.5; + stroke-linecap: square; + stroke-linejoin: miter; + fill: none; + } + .mat-badge-content { + right: -4px !important; + } + } + } + &[aria-selected='true'] { + opacity: 1; + .mat-tab-label-content { + .icon-item { + transform: scale(1); + } + } + } +} + +::ng-deep .ps { + .ps-content { + position: relative; + width: 100%; + height: 100%; + } +} diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.spec.ts new file mode 100644 index 00000000..26d5d3e2 --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LeftNaviComponent } from './left-nav.component'; + +describe('App::Layout::Messenger::LeftNaviComponent', () => { + let component: LeftNaviComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [LeftNaviComponent] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LeftNaviComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.ts new file mode 100644 index 00000000..ff44f3f2 --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.ts @@ -0,0 +1,116 @@ +import { UserSelectDialogType } from '../../../types/userselect.dialog.type'; +import { + Component, + OnInit, + Output, + EventEmitter, + ViewChildren, + QueryList, + ElementRef, + OnDestroy, + ViewChild +} from '@angular/core'; +import { NGXLogger } from 'ngx-logger'; +import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui'; +import { + CreateChatDialogComponent, + CreateChatDialogData, + CreateChatDialogResult +} from '@app/layouts/messenger/dialogs/chat/create-chat.dialog.component'; +import { Subscription, Observable, merge } from 'rxjs'; +import { Store, select } from '@ngrx/store'; + +import * as AppStore from '@app/store'; +import * as ChatStore from '@app/store/messenger/chat'; +import * as MessageStore from '@app/store/messenger/message'; +import * as SyncStore from '@app/store/messenger/sync'; +import * as SettingsStore from '@app/store/messenger/settings'; +import { UserInfo } from '@ucap-webmessenger/protocol-sync'; +import { + UserInfoSS, + UserInfoF, + UserInfoDN +} from '@ucap-webmessenger/protocol-query'; +import { MatTabChangeEvent } from '@angular/material'; +import { LoginResponse } from '@ucap-webmessenger/protocol-authentication'; +import { OpenProfileOptions } from '@ucap-webmessenger/protocol-buddy'; +import { SessionStorageService } from '@ucap-webmessenger/web-storage'; +import { VersionInfo2Response } from '@ucap-webmessenger/api-public'; +import { MessageType } from '@ucap-webmessenger/api-message'; +import { tap } from 'rxjs/operators'; +import { + MessageWriteDialogComponent, + MessageWriteDialogResult, + MessageWriteDialogData +} from '../dialogs/message/message-write.dialog.component'; +import { + EnvironmentsInfo, + KEY_ENVIRONMENTS_INFO, + KEY_VER_INFO, + MainMenu +} from '@app/types'; +import { MessageBoxComponent } from './left-sidenav/message.component'; +import { environment } from '../../../../environments/environment'; +import { TranslateService } from '@ngx-translate/core'; + +@Component({ + selector: 'app-layout-messenger-left-nav', + templateUrl: './left-nav.component.html', + styleUrls: ['./left-nav.component.scss'], + animations: ucapAnimations +}) +export class LeftNaviComponent implements OnInit, OnDestroy { + badgeChatUnReadCount: number; + badgeChatUnReadCountSubscription: Subscription; + badgeMessageUnReadCount$: Observable; + badgeMessageInterval: any; + + MainMenu = MainMenu; + + constructor(private store: Store, private logger: NGXLogger) {} + + ngOnInit() { + this.badgeChatUnReadCountSubscription = this.store + .pipe( + select(AppStore.MessengerSelector.SyncSelector.selectChatUnreadCount) + ) + .subscribe(count => { + this.badgeChatUnReadCount = count; + }); + + /** About Message Badge */ + this.badgeMessageUnReadCount$ = this.store.pipe( + select(AppStore.MessengerSelector.MessageSelector.unReadMessageCount) + ); + + this.getMessageUnreadCount(); + this.badgeMessageInterval = setInterval( + () => this.getMessageUnreadCount(), + 5 * 60 * 1000 + ); + } + + ngOnDestroy(): void { + if (!!this.badgeChatUnReadCountSubscription) { + this.badgeChatUnReadCountSubscription.unsubscribe(); + } + + if (!!this.badgeMessageInterval) { + clearInterval(this.badgeMessageInterval); + } + + this.logger.debug('-----------------------LeftNaviComponent ngOnDestroy'); + } + + onSelectedTabChange(event: MatTabChangeEvent) { + this.store.dispatch( + SettingsStore.selectedGnbMenuIndex({ + menuIndex: event.tab.ariaLabel as MainMenu + }) + ); + } + + getMessageUnreadCount(): void { + this.store.dispatch(MessageStore.retrieveUnreadCount({})); + } +} diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html index 5ce5889d..a308f7b7 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html @@ -1,167 +1,9 @@
- - - - -
- - - - -
- - - - -
- - - -
- - - - - -
- - - - - - - - -
- - - - - - -
- - - -
- - - - - -