From 3064213ed5259c16864fb7a0034b92d372f6895c Mon Sep 17 00:00:00 2001 From: leejinho Date: Tue, 3 Mar 2020 17:44:02 +0900 Subject: [PATCH] =?UTF-8?q?=EC=A1=B0=EC=A7=81=EB=8F=84=20UX=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/layouts/messenger/components/index.ts | 8 +- .../components/left-side.component.html | 7 +- .../components/left-sidenav/index.ts | 2 + .../organization-tree.component.html | 23 ++ .../organization-tree.component.scss | 44 ++++ .../organization-tree.component.spec.ts | 24 ++ .../organization-tree.component.ts | 171 +++++++++++++ .../components/main-contents.component.html | 21 ++ .../components/main-contents.component.scss | 0 .../main-contents.component.spec.ts | 25 ++ .../components/main-contents.component.ts | 43 ++++ .../components/main-contents/index.ts | 9 + .../{ => main-contents}/intro.component.html | 0 .../{ => main-contents}/intro.component.scss | 0 .../intro.component.spec.ts | 0 .../{ => main-contents}/intro.component.ts | 2 +- .../messages.component.html | 0 .../messages.component.scss | 0 .../messages.component.spec.ts | 0 .../{ => main-contents}/messages.component.ts | 14 +- .../main-contents/organization.component.html | 25 ++ .../main-contents/organization.component.scss | 74 ++++++ .../organization.component.spec.ts | 25 ++ .../main-contents/organization.component.ts | 12 + .../components/main.page.component.html | 10 +- .../src/app/store/messenger/query/actions.ts | 62 ++++- .../src/app/store/messenger/query/effects.ts | 241 +++++++++++++++++- .../src/app/store/messenger/query/reducers.ts | 79 +++++- .../src/app/store/messenger/query/state.ts | 35 ++- .../src/lib/models/selected-dept.ts | 12 + .../src/public-api.ts | 1 + 31 files changed, 941 insertions(+), 28 deletions(-) create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization-tree.component.html create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization-tree.component.scss create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization-tree.component.spec.ts create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization-tree.component.ts create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.html create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.scss create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.spec.ts create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.ts create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/index.ts rename projects/ucap-webmessenger-app/src/app/layouts/messenger/components/{ => main-contents}/intro.component.html (100%) rename projects/ucap-webmessenger-app/src/app/layouts/messenger/components/{ => main-contents}/intro.component.scss (100%) rename projects/ucap-webmessenger-app/src/app/layouts/messenger/components/{ => main-contents}/intro.component.spec.ts (100%) rename projects/ucap-webmessenger-app/src/app/layouts/messenger/components/{ => main-contents}/intro.component.ts (87%) rename projects/ucap-webmessenger-app/src/app/layouts/messenger/components/{ => main-contents}/messages.component.html (100%) rename projects/ucap-webmessenger-app/src/app/layouts/messenger/components/{ => main-contents}/messages.component.scss (100%) rename projects/ucap-webmessenger-app/src/app/layouts/messenger/components/{ => main-contents}/messages.component.spec.ts (100%) rename projects/ucap-webmessenger-app/src/app/layouts/messenger/components/{ => main-contents}/messages.component.ts (99%) create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.html create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.scss create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.spec.ts create mode 100644 projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.ts create mode 100644 projects/ucap-webmessenger-protocol-query/src/lib/models/selected-dept.ts 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 17c0e49b..3d25cee8 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,21 +1,21 @@ -import { IntroComponent } from './intro.component'; import { LeftNaviComponent } from './left-nav.component'; import { LeftSideComponent } from './left-side.component'; -import { MessagesComponent } from './messages.component'; +import { MainContentsComponent } from './main-contents.component'; import { RightSideComponent } from './right-side.component'; import { RightDrawerComponent } from './right-drawer.component'; import { LEFT_SIDENAV_COMPONENTS } from './left-sidenav'; +import { MAIN_CONTENTS_COMPONENTS } from './main-contents'; import { RIGHT_DRAWER_COMPONENTS } from './right-drawer'; export const COMPONENTS = [ - IntroComponent, LeftNaviComponent, LeftSideComponent, - MessagesComponent, + MainContentsComponent, RightSideComponent, RightDrawerComponent, ...LEFT_SIDENAV_COMPONENTS, + ...MAIN_CONTENTS_COMPONENTS, ...RIGHT_DRAWER_COMPONENTS ]; 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 8b6f3d27..339aea63 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 @@ -27,7 +27,10 @@ MainMenu.Organization === currentTabLable ? 'block' : 'none' " > - +
+
+

{{ 'organization.chart' | translate }}

+
+ + +
+
+
+ +
+
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization-tree.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization-tree.component.scss new file mode 100644 index 00000000..84c86450 --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization-tree.component.scss @@ -0,0 +1,44 @@ +@charset 'utf-8'; + +@mixin ellipsis($row) { + overflow: hidden; + text-overflow: ellipsis; + @if $row == 1 { + display: block; + white-space: nowrap; + word-wrap: normal; + } @else if $row >= 2 { + display: -webkit-box; + -webkit-line-clamp: $row; + -webkit-box-orient: vertical; + word-wrap: break-word; + } +} + +.current-head { + h3 { + display: inline-flex; + padding-left: 10px; + align-items: center; + width: 100%; + } + .btn-box { + height: 100%; + margin-left: auto; + display: inline-flex; + align-items: center; + svg { + stroke: #333333; + } + } +} + +.oraganization-tab { + // height: calc(100% - 120px); + flex-direction: inherit; + display: flex; + .oraganization-tab-tree { + height: 100%; + overflow-y: auto; + } +} diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization-tree.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization-tree.component.spec.ts new file mode 100644 index 00000000..01b3330d --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization-tree.component.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OrganizationComponent } from './organization.component'; + +describe('Chat::LeftSidenav::OrganizationComponent', () => { + let component: OrganizationComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [OrganizationComponent] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(OrganizationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization-tree.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization-tree.component.ts new file mode 100644 index 00000000..eb947a7d --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization-tree.component.ts @@ -0,0 +1,171 @@ +import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core'; +import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui'; +import { Observable, Subscription, BehaviorSubject, combineLatest } from 'rxjs'; +import { + DeptInfo, + QueryProtocolService, + DeptSearchType, + UserInfoSS +} from '@ucap-webmessenger/protocol-query'; +import { Store, select } from '@ngrx/store'; +import { NGXLogger } from 'ngx-logger'; + +import * as AppStore from '@app/store'; +import * as QueryStore from '@app/store/messenger/query'; +import * as StatusStore from '@app/store/messenger/status'; +import { SessionStorageService } from '@ucap-webmessenger/web-storage'; +import { LoginInfo, KEY_LOGIN_INFO, MainMenu } from '@app/types'; +import { take, tap } from 'rxjs/operators'; +import { LoginResponse } from '@ucap-webmessenger/protocol-authentication'; +import { Company } from '@ucap-webmessenger/api-external'; +import { TranslateService } from '@ngx-translate/core'; + +import { OrganizationService } from '@ucap-webmessenger/ui-organization'; + +@Component({ + selector: 'app-layout-chat-left-sidenav-organization-tree', + templateUrl: './organization-tree.component.html', + styleUrls: ['./organization-tree.component.scss'], + animations: ucapAnimations +}) +export class OrganizationTreeComponent implements OnInit, OnDestroy { + companyList$: Observable; + companyCode: string; + + departmentInfoList$: Observable; + myDepartmentUserInfoListSubscription: Subscription; + + loginInfo: LoginInfo; + loginRes: LoginResponse; + loginResSubscription: Subscription; + + isShowSearch = false; + searchUserInfos: UserInfoSS[] = []; + + organizationTreeActivatedSubject: BehaviorSubject< + boolean + > = new BehaviorSubject(false); + organizationTreeActivatedSubscription: Subscription; + + constructor( + private store: Store, + private sessionStorageService: SessionStorageService, + private queryProtocolService: QueryProtocolService, + private organizationService: OrganizationService, + private logger: NGXLogger + ) { + this.loginInfo = this.sessionStorageService.get(KEY_LOGIN_INFO); + } + + ngOnInit() { + this.companyCode = this.loginInfo.companyCode; + this.companyList$ = this.store.pipe( + select(AppStore.SettingSelector.CompanySelector.companyList) + ); + + this.departmentInfoList$ = this.store.pipe( + select(AppStore.MessengerSelector.QuerySelector.departmentInfoList) + ); + + this.loginResSubscription = this.store + .pipe( + take(1), + select(AppStore.AccountSelector.AuthenticationSelector.loginRes), + tap(loginRes => { + this.loginRes = loginRes; + }) + ) + .subscribe(); + + this.myDepartmentUserInfoListSubscription = this.store + .pipe( + select( + AppStore.MessengerSelector.QuerySelector.myDepartmentUserInfoList + ) + ) + .subscribe(list => { + if (!list) { + this.store + .pipe( + take(1), + select(AppStore.AccountSelector.AuthenticationSelector.loginRes), + tap(loginRes => { + if (!!loginRes) { + this.store.dispatch( + QueryStore.selectedDept({ + seq: loginRes.departmentCode, + name: loginRes.userInfo.deptName, + nameEn: loginRes.userInfo.deptNameEn, + nameCn: loginRes.userInfo.deptNameCn + }) + ); + } + this.loginRes = loginRes; + }) + ) + .subscribe(); + return; + } + }); + + this.organizationTreeActivatedSubscription = combineLatest([ + this.store.pipe( + select(AppStore.MessengerSelector.SettingsSelector.gnbMenuIndex) + ), + this.store.pipe( + select( + AppStore.MessengerSelector.SettingsSelector.organizationTreeActivated + ) + ) + ]).subscribe(([menu, activate]) => { + this.organizationTreeActivatedSubject.next( + menu === MainMenu.Organization || activate + ); + }); + } + + ngOnDestroy(): void { + if (!!this.loginResSubscription) { + this.loginResSubscription.unsubscribe(); + } + if (!!this.myDepartmentUserInfoListSubscription) { + this.myDepartmentUserInfoListSubscription.unsubscribe(); + } + if (!!this.organizationTreeActivatedSubscription) { + this.organizationTreeActivatedSubscription.unsubscribe(); + } + } + + /** 유저검색 */ + onKeyDownEnterOrganizationTenantSearch(params: { + companyCode: string; + searchWord: string; + }) { + if (params.searchWord.trim().length > 1) { + this.store.dispatch( + QueryStore.searchDeptUser({ + companyCode: params.companyCode, + search: params.searchWord + }) + ); + } + } + /** 검색 취소 */ + onClickCancel() { + this.store.dispatch(QueryStore.cancelSearchDeptUser({})); + } + + /** 조직도 부서 선택 */ + onSelectedOrganization(deptInfo: DeptInfo) { + this.onClickCancel(); + + this.store.dispatch( + QueryStore.selectedDept({ + seq: deptInfo.seq, + name: deptInfo.name, + nameEn: deptInfo.nameEn, + nameCn: deptInfo.nameCn + }) + ); + } +} diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.html new file mode 100644 index 00000000..66c9325c --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.html @@ -0,0 +1,21 @@ + + + + + + diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.spec.ts new file mode 100644 index 00000000..8d86c4d6 --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MainContentsComponent } from './main-contents.component'; + +describe('MainContentsComponent', () => { + let component: MainContentsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MainContentsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MainContentsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.ts new file mode 100644 index 00000000..8b83f7ec --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents.component.ts @@ -0,0 +1,43 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { Observable } from 'rxjs'; +import { OpenProfileOptions } from '@ucap-webmessenger/protocol-buddy'; + +import * as AppStore from '@app/store'; +import { select, Store } from '@ngrx/store'; + +import { MainMenu } from '@app/types'; + +@Component({ + selector: 'app-layout-messenger-main-contents', + templateUrl: './main-contents.component.html', + styleUrls: ['./main-contents.component.scss'] +}) +export class MainContentsComponent implements OnInit { + @Input() + selectedChat: Observable; + + @Output() + openProfile = new EventEmitter<{ + userSeq: number; + }>(); + @Output() + closeRightDrawer = new EventEmitter(); + + MainMenu = MainMenu; + gnbMenuIndex$: Observable; + + constructor(private store: Store) {} + + ngOnInit() { + this.gnbMenuIndex$ = this.store.pipe( + select(AppStore.MessengerSelector.SettingsSelector.gnbMenuIndex) + ); + } + + onClickOpenProfile(params: { + userSeq: number; + openProfileOptions?: OpenProfileOptions; + }) {} + + onCloseRightDrawer() {} +} diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/index.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/index.ts new file mode 100644 index 00000000..7fd20024 --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/index.ts @@ -0,0 +1,9 @@ +import { IntroComponent } from './intro.component'; +import { MessagesComponent } from './messages.component'; +import { OrganizationComponent } from './organization.component'; + +export const MAIN_CONTENTS_COMPONENTS = [ + IntroComponent, + MessagesComponent, + OrganizationComponent +]; diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/intro.component.html similarity index 100% rename from projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.html rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/intro.component.html diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/intro.component.scss similarity index 100% rename from projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.scss rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/intro.component.scss diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/intro.component.spec.ts similarity index 100% rename from projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.spec.ts rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/intro.component.spec.ts diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/intro.component.ts similarity index 87% rename from projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.ts rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/intro.component.ts index 3bbdb0ac..8f5d4d47 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.ts +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/intro.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { ucapAnimations } from '@ucap-webmessenger/ui'; -import { environment } from '../../../../environments/environment'; +import { environment } from '../../../../../environments/environment'; @Component({ selector: 'app-layout-messenger-intro', diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/messages.component.html similarity index 100% rename from projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/messages.component.html diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/messages.component.scss similarity index 100% rename from projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/messages.component.scss diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/messages.component.spec.ts similarity index 100% rename from projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.spec.ts rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/messages.component.spec.ts diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/messages.component.ts similarity index 99% rename from projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts rename to projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/messages.component.ts index 076fc93e..f27580eb 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/messages.component.ts @@ -95,7 +95,7 @@ import { CreateChatDialogComponent, CreateChatDialogData, CreateChatDialogResult -} from '../dialogs/chat/create-chat.dialog.component'; +} from '../../dialogs/chat/create-chat.dialog.component'; import { FileViewerDialogComponent, FileViewerDialogData, @@ -108,18 +108,18 @@ import { EditChatRoomDialogComponent, EditChatRoomDialogResult, EditChatRoomDialogData -} from '../dialogs/chat/edit-chat-room.dialog.component'; +} from '../../dialogs/chat/edit-chat-room.dialog.component'; import { SelectGroupDialogComponent, SelectGroupDialogResult, SelectGroupDialogData -} from '../dialogs/group/select-group.dialog.component'; +} from '../../dialogs/group/select-group.dialog.component'; import { GroupDetailData } from '@ucap-webmessenger/protocol-sync'; -import { environment } from '../../../../environments/environment'; +import { environment } from '../../../../../environments/environment'; import { MassDetailComponent, MassDetailDialogData -} from '../dialogs/chat/mass-detail.component'; +} from '../../dialogs/chat/mass-detail.component'; import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native'; import { TranslateService } from '@ngx-translate/core'; @@ -127,14 +127,14 @@ import { ClipboardDialogComponent, ClipboardDialogData, ClipboardDialogResult -} from '../dialogs/chat/clipboard.dialog.component'; +} from '../../dialogs/chat/clipboard.dialog.component'; import { AppFileService } from '@app/services/file.service'; import { FileType } from '@ucap-webmessenger/protocol-file'; import { ConferenceDetailDialogComponent, ConferenceDetailDialogResult, ConferenceDetailDialogData -} from '../dialogs/conference/conference-detail.dialog.component'; +} from '../../dialogs/conference/conference-detail.dialog.component'; import { ConferenceService } from '@ucap-webmessenger/api-prompt'; import { AuthResponse } from '@ucap-webmessenger/protocol-query'; diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.html new file mode 100644 index 00000000..c6274c15 --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.html @@ -0,0 +1,25 @@ +
+ +
+
+ icon +
+
+

+ title +

+
+
+ +
+
+ + +
+ contents +
+ +
+
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.scss new file mode 100644 index 00000000..41009eb4 --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.scss @@ -0,0 +1,74 @@ +@charset 'utf-8'; +:host { + display: flex; + width: 100%; + height: 100%; +} +@mixin ellipsis($row) { + overflow: hidden; + text-overflow: ellipsis; + @if $row == 1 { + display: block; + white-space: nowrap; + word-wrap: normal; + } @else if $row >= 2 { + display: -webkit-box; + -webkit-line-clamp: $row; + -webkit-box-orient: vertical; + word-wrap: break-word; + } +} +.container { + position: relative; + width: 100%; +} +.organization-toolbar { + position: relative; + display: flex; + flex-flow: column; + width: 100%; + height: auto; + align-items: center; + background-color: #ffffff !important; + border-bottom: 1px solid #dddddd; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); + z-index: 1; + padding: 0; + .organization-header { + width: 100%; + align-items: center; + display: flex; + justify-content: space-between; + justify-items: center; + padding: 4px 20px; + + .organization-info { + display: flex; + flex-flow: row; + overflow: hidden; + align-items: center; + .organization-name { + font-size: 0.94rem; + line-height: normal; + @include ellipsis(1); + } + } + .organization-option { + margin-left: auto; + margin-right: -10px; + .icon-button { + transform: translateY(-2px); + i { + font-size: 0.9em; + } + } + } + } +} + +.organization-content { + position: relative; + background: transparent; + overflow: auto; + -webkit-overflow-scrolling: touch; +} diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.spec.ts new file mode 100644 index 00000000..928b99cc --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OrganizationComponent } from './organization.component'; + +describe('OrganizationComponent', () => { + let component: OrganizationComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ OrganizationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(OrganizationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.ts new file mode 100644 index 00000000..5b95421b --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.ts @@ -0,0 +1,12 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-layout-messenger-organization', + templateUrl: './organization.component.html', + styleUrls: ['./organization.component.scss'] +}) +export class OrganizationComponent implements OnInit { + constructor() {} + + ngOnInit() {} +} diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html index 7a85bfed..f97fe8ce 100644 --- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html +++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html @@ -25,14 +25,12 @@
--> - - + > +