layout is modified

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.html

@@ -12,7 +12,7 @@
     class="app-title mt-48 mb-8"
     [@animate]="{ value: '*', params: { delay: '100ms', y: '25px' } }"
   >
-    Chat App
+    M Messenger
   </span>
 
   <span
@@ -23,12 +23,4 @@
   >
     Select a contact to start a chat!
   </span>
-
-  <button
-    mat-raised-button
-    fxHide.gt-md
-    fuseMatSidenavToggler="chat-left-sidenav"
-  >
-    Select a contact to start a chat!
-  </button>
 </div>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.scss

@@ -0,0 +1,23 @@
+:host {
+  display: flex;
+  height: 100%;
+  flex: 1;
+
+  .big-circle {
+    border-radius: 50%;
+    width: 240px;
+    height: 240px;
+    line-height: 240px;
+    text-align: center;
+    border: 1px solid;
+  }
+
+  .app-title {
+    font-weight: 600;
+    font-size: 32px;
+  }
+
+  .secondary-text {
+    font-size: 16px;
+  }
+}

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html

@@ -1,34 +1,36 @@
-<mat-tab-group mat-stretch-tabs>
+<div class="container">
-  <mat-tab>
+  <mat-tab-group mat-stretch-tabs>
-    <ng-template mat-tab-label>
+    <mat-tab>
-      <mat-icon>group</mat-icon>
+      <ng-template mat-tab-label>
-    </ng-template>
+        <mat-icon>group</mat-icon>
-    <ng-template matTabContent>
+      </ng-template>
-      <app-layout-chat-left-sidenav-group></app-layout-chat-left-sidenav-group>
+      <ng-template matTabContent>
-    </ng-template>
+        <app-layout-chat-left-sidenav-group></app-layout-chat-left-sidenav-group>
-  </mat-tab>
+      </ng-template>
-  <mat-tab>
+    </mat-tab>
-    <ng-template mat-tab-label>
+    <mat-tab>
-      <mat-icon>chat</mat-icon>
+      <ng-template mat-tab-label>
-    </ng-template>
+        <mat-icon>chat</mat-icon>
-    <ng-template matTabContent>
+      </ng-template>
-      <app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
+      <ng-template matTabContent>
-    </ng-template>
+        <app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
-  </mat-tab>
+      </ng-template>
-  <mat-tab>
+    </mat-tab>
-    <ng-template mat-tab-label>
+    <mat-tab>
-      <mat-icon>device_hub</mat-icon>
+      <ng-template mat-tab-label>
-    </ng-template>
+        <mat-icon>device_hub</mat-icon>
-    <ng-template matTabContent>
+      </ng-template>
-      <app-layout-chat-left-sidenav-organization></app-layout-chat-left-sidenav-organization>
+      <ng-template matTabContent>
-    </ng-template>
+        <app-layout-chat-left-sidenav-organization></app-layout-chat-left-sidenav-organization>
-  </mat-tab>
+      </ng-template>
-  <mat-tab>
+    </mat-tab>
-    <ng-template mat-tab-label>
+    <mat-tab>
-      <mat-icon>phone</mat-icon>
+      <ng-template mat-tab-label>
-    </ng-template>
+        <mat-icon>phone</mat-icon>
-    <ng-template matTabContent>
+      </ng-template>
-      <app-layout-chat-left-sidenav-call></app-layout-chat-left-sidenav-call>
+      <ng-template matTabContent>
-    </ng-template>
+        <app-layout-chat-left-sidenav-call></app-layout-chat-left-sidenav-call>
-  </mat-tab>
+      </ng-template>
-</mat-tab-group>
+    </mat-tab>
+  </mat-tab-group>
+</div>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss

@@ -0,0 +1,4 @@
+::ng-deep .mat-tab-label,
+::ng-deep .mat-tab-label-active {
+  min-width: 0 !important;
+}

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html

@@ -1,5 +1,5 @@
 <!-- CHAT -->
-<div class="chat" fxFlex fxLayout="column">
+<div class="container" fxFlex fxLayout="column">
   <!-- CHAT TOOLBAR -->
   <mat-toolbar class="chat-toolbar">
     <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
@@ -7,18 +7,13 @@
         <!-- RESPONSIVE CHATS BUTTON-->
         <button
           mat-icon-button
-          fxHide.gt-md
-          class="responsive-chats-button mr-16"
-          fuseMatSidenavToggler="chat-left-sidenav"
           aria-label="chats button"
+          fxHide.gt-md
+          class="responsive-chats-button"
         >
           <mat-icon>chat</mat-icon>
         </button>
         <!-- / RESPONSIVE CHATS BUTTON-->
-
-        <!-- CHAT CONTACT-->
-
-        <!-- / CHAT CONTACT-->
       </div>
 
       <div>
@@ -31,11 +26,7 @@
         </button>
 
         <mat-menu #contactMenu="matMenu">
-          <button
+          <button mat-menu-item (click)="selectContact()">
-            mat-menu-item
-            fuseMatSidenavToggler="chat-right-sidenav"
-            (click)="selectContact()"
-          >
             Contact Info
           </button>
         </mat-menu>
@@ -45,7 +36,7 @@
   <!-- / CHAT TOOLBAR -->
 
   <!-- CHAT CONTENT -->
-  <div id="chat-content" fxFlex="1 1 auto" fusePerfectScrollbar>
+  <div fxFlex="1 1 auto" class="chat-content">
     <!-- CHAT MESSAGES -->
     <ucap-chat-messages></ucap-chat-messages>
     <!-- CHAT MESSAGES -->
@@ -53,7 +44,7 @@
   <!-- / CHAT CONTENT -->
 
   <!-- CHAT FOOTER -->
-  <div class="chat-footer" fxFlex="0 0 auto" fxLayout="column">
+  <div fxFlex="0 0 auto" fxLayout="column">
     <!-- REPLY FORM -->
     <ucap-chat-form></ucap-chat-form>
     <!-- / REPLY FORM -->

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss

@@ -1,208 +1,27 @@
 :host {
   display: flex;
-  flex: 1 0 auto;
+  width: 100%;
-  overflow: hidden;
+  height: 100%;
-  max-width: 100%;
+  flex: 1;
+
+  .container {
+    width: 100%;
+    height: 100%;
 
-  .chat {
     .chat-toolbar {
-      min-height: 64px;
+      height: 49px;
+      min-height: 49px;
       border-bottom: 1px solid;
 
       .responsive-chats-button {
         padding: 0;
       }
-
-      .chat-contact {
-        cursor: pointer;
-
-        .avatar {
-          margin-right: 16px;
-        }
-      }
     }
 
-    #chat-content {
+    .chat-content {
       background: transparent;
       overflow: auto;
       -webkit-overflow-scrolling: touch;
-
-      .chat-messages {
-        position: relative;
-        padding: 16px 0 40px 40px;
-
-        .message-row {
-          position: relative;
-          display: flex;
-          flex-direction: column;
-          align-items: flex-start;
-          justify-content: flex-end;
-          padding: 0 16px 4px 16px;
-
-          .avatar {
-            position: absolute;
-            left: -32px;
-            margin: 0;
-          }
-
-          .bubble {
-            position: relative;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 12px;
-            max-width: 100%;
-
-            .message {
-              white-space: pre-wrap;
-              line-height: 1.2;
-            }
-
-            .time {
-              position: absolute;
-              display: none;
-              width: 100%;
-              font-size: 11px;
-              margin-top: 8px;
-              top: 100%;
-              left: 0;
-              white-space: nowrap;
-            }
-          }
-
-          &.contact {
-            .bubble {
-              border-top-left-radius: 5px;
-              border-bottom-left-radius: 5px;
-
-              border-top-right-radius: 20px;
-              border-bottom-right-radius: 20px;
-
-              .time {
-                margin-left: 12px;
-              }
-            }
-
-            &.first-of-group {
-              .bubble {
-                border-top-left-radius: 20px;
-              }
-            }
-
-            &.last-of-group {
-              .bubble {
-                border-bottom-left-radius: 20px;
-              }
-            }
-          }
-
-          &.me {
-            padding-left: 40px;
-
-            .avatar {
-              order: 2;
-              margin: 0 0 0 16px;
-            }
-
-            .bubble {
-              margin-left: auto;
-
-              border-top-left-radius: 20px;
-              border-bottom-left-radius: 20px;
-
-              border-top-right-radius: 5px;
-              border-bottom-right-radius: 5px;
-
-              .time {
-                justify-content: flex-end;
-                right: 0;
-                margin-right: 12px;
-              }
-            }
-
-            &.first-of-group {
-              .bubble {
-                border-top-right-radius: 20px;
-              }
-            }
-
-            &.last-of-group {
-              .bubble {
-                border-bottom-right-radius: 20px;
-              }
-            }
-          }
-
-          &.contact + .me,
-          &.me + .contact {
-            padding-top: 20px;
-            margin-top: 20px;
-          }
-
-          &.first-of-group {
-            .bubble {
-              border-top-left-radius: 20px;
-              padding-top: 13px;
-            }
-          }
-
-          &.last-of-group {
-            .bubble {
-              border-bottom-left-radius: 20px;
-              padding-bottom: 13px;
-
-              .time {
-                display: flex;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .chat-footer {
-      border-top: 1px solid;
-      padding: 8px 8px 8px 16px;
-
-      .reply-form {
-        position: relative;
-
-        .message-text {
-          padding: 16px 8px;
-
-          .mat-form-field-wrapper {
-            padding: 0;
-
-            .mat-form-field-flex {
-              padding: 0;
-
-              .mat-form-field-infix {
-                padding: 0;
-                border: none;
-                border-radius: 20px;
-                border: 1px solid;
-
-                textarea {
-                  overflow: hidden;
-                  margin: 16px 48px 16px 16px;
-                  width: calc(100% - 64px);
-                  padding: 0;
-                }
-              }
-            }
-
-            .mat-form-field-underline {
-              display: none !important;
-            }
-          }
-        }
-
-        .send-message-button {
-          position: absolute;
-          right: 16px;
-          bottom: 21px;
-        }
-      }
     }
   }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.html

@@ -0,0 +1 @@
+dd

projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { FlexLayoutModule } from '@angular/flex-layout';
+
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTabsModule } from '@angular/material/tabs';
@@ -15,6 +17,7 @@ import { COMPONENTS } from './components';
 @NgModule({
   imports: [
     CommonModule,
+    FlexLayoutModule,
     MatIconModule,
     MatMenuModule,
     MatTabsModule,

projects/ucap-webmessenger-app/src/app/pages/account/account.page.module.ts

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { FlexLayoutModule } from '@angular/flex-layout';
+
 import { UCapUiAccountModule } from '@ucap-webmessenger/ui-account';
 
 import { AppAccountRoutingPageModule } from './account-routing.page.module';
@@ -8,7 +10,12 @@ import { AppAccountRoutingPageModule } from './account-routing.page.module';
 import { COMPONENTS } from './components';
 
 @NgModule({
-  imports: [CommonModule, UCapUiAccountModule, AppAccountRoutingPageModule],
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    UCapUiAccountModule,
+    AppAccountRoutingPageModule
+  ],
   declarations: [...COMPONENTS],
   entryComponents: []
 })

projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.html

@@ -1,7 +1,7 @@
-<div id="login" fxLayout="column">
+<div class="login" fxLayout="column">
-  <div id="login-wrapper" fxLayout="column" fxLayoutAlign="center center">
+  <div class="login-wrapper" fxLayout="column" fxLayoutAlign="center center">
     <ucap-account-login
-      [companies]="companies"
+      [companyList]="companyList$ | async"
       (login)="onLogin($event)"
     ></ucap-account-login>
   </div>

projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss

@@ -1,8 +1,8 @@
-#login {
+.login {
   width: 100%;
   background-size: cover;
 
-  #login-wrapper {
+  .login-wrapper {
     flex: 1 0 auto;
     padding: 32px;
   }

projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.ts

@@ -1,16 +1,13 @@
 import { Component, OnInit } from '@angular/core';
 
-import { take, map } from 'rxjs/operators';
+import { Store, select } from '@ngrx/store';
 
-import { Store } from '@ngrx/store';
+import { Company } from '@ucap-webmessenger/api-external';
 
-import {
+import * as AppStore from '@app/store';
-  ExternalApiService,
+import * as AuthenticationStore from '@app/store/account/authentication';
-  CompanyListResponse,
+import * as CompanyStore from '@app/store/setting/company';
-  Company
+import { Observable } from 'rxjs';
-} from '@ucap-webmessenger/api-external';
-
-import * as AuthenticationStore from '../../../store/account/authentication';
 
 @Component({
   selector: 'app-page-account-login',
@@ -18,23 +15,20 @@ import * as AuthenticationStore from '../../../store/account/authentication';
   styleUrls: ['./login.page.component.scss']
 })
 export class LoginPageComponent implements OnInit {
-  companies: Company[];
+  companyList$: Observable<Company[]>;
 
-  constructor(
+  constructor(private store: Store<any>) {}
-    private externalApiService: ExternalApiService,
-    private store: Store<any>
-  ) {}
 
   ngOnInit(): void {
-    this.externalApiService
+    this.store.dispatch(
-      .companyList({ companyGroupCode: 'LG' })
+      CompanyStore.companyList({
-      .pipe(
+        companyGroupCode: 'LG'
-        take(1),
+      })
-        map((res: CompanyListResponse) => {
+    );
-          this.companies = res.companyList;
+
-        })
+    this.companyList$ = this.store.pipe(
-      )
+      select(AppStore.SettingSelector.CompanySelector.companyList)
-      .subscribe();
+    );
   }
 
   onLogin(value: {

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html

@@ -1,28 +1,16 @@
 <div class="container">
-  <!-- TOP BACKGROUND -->
+  <div class="left-side">
-  <div></div>
+    <app-layout-messenger-left-side></app-layout-messenger-left-side>
-  <!-- / TOP BACKGROUND -->
+  </div>
-
+  <div class="contents">
-  <!-- CENTER -->
+    <app-layout-messenger-intro
-  <div>
+      *ngIf="!selectedChat"
-    <!-- CONTENT CARD -->
+    ></app-layout-messenger-intro>
-    <div>
+    <app-layout-messenger-messages
-      <div class="left-side">
+      *ngIf="selectedChat"
-        <app-layout-messenger-left-side></app-layout-messenger-left-side>
+    ></app-layout-messenger-messages>
-      </div>
+  </div>
-      <div>
+  <div class="right-side">
-        <app-layout-messenger-intro
+    <app-layout-messenger-right-side></app-layout-messenger-right-side>
-          *ngIf="!selectedChat"
-        ></app-layout-messenger-intro>
-        <app-layout-messenger-messages
-          *ngIf="selectedChat"
-        ></app-layout-messenger-messages>
-      </div>
-      <div class="right-side">
-        <app-layout-messenger-right-side></app-layout-messenger-right-side>
-      </div>
-    </div>
-    <!-- / CONTENT CARD -->
   </div>
-  <!-- / CENTER -->
 </div>

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss

@@ -1,12 +1,19 @@
 .container {
-  width: 100%;
+  height: 100%;
-  height: auto !important;
-}
 
-.left-side {
+  .left-side {
-  width: 300px;
+    float: left;
-}
+    width: 300px;
-
+    height: 100%;
-.right-side {
+  }
-  width: 70px;
+  .contents {
+    float: left;
+    width: calc(100% - 360px);
+    height: 100%;
+  }
+  .right-side {
+    float: left;
+    width: 60px;
+    height: 100%;
+  }
 }

projects/ucap-webmessenger-app/src/app/pages/messenger/messenger.page.module.ts

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { FlexLayoutModule } from '@angular/flex-layout';
+
 import { MatSidenavModule } from '@angular/material/sidenav';
 
 import { AppMessengerLayoutModule } from '@app/layouts/messenger/messenger.layout.module';
@@ -12,6 +14,7 @@ import { COMPONENTS } from './components';
 @NgModule({
   imports: [
     CommonModule,
+    FlexLayoutModule,
     MatSidenavModule,
     AppMessengerLayoutModule,
     AppMessengerRoutingPageModule

projects/ucap-webmessenger-app/src/app/store/setting/company/actions.ts

@@ -0,0 +1,21 @@
+import { createAction, props } from '@ngrx/store';
+
+import {
+  CompanyListRequest,
+  CompanyListResponse
+} from '@ucap-webmessenger/api-external';
+
+export const companyList = createAction(
+  '[Setting::Company] companyList',
+  props<CompanyListRequest>()
+);
+
+export const companyListSuccess = createAction(
+  '[Setting::Company] companyList Success',
+  props<CompanyListResponse>()
+);
+
+export const companyListFailure = createAction(
+  '[Setting::Company] companyList Failure',
+  props<{ error: any }>()
+);

projects/ucap-webmessenger-app/src/app/store/setting/company/effects.ts

@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+
+import { Actions, ofType, createEffect } from '@ngrx/effects';
+
+import { of } from 'rxjs';
+import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
+
+import { StatusCode } from '@ucap-webmessenger/api';
+
+import { NGXLogger } from 'ngx-logger';
+
+import { companyList, companyListSuccess, companyListFailure } from './actions';
+import { ExternalApiService } from '@ucap-webmessenger/api-external';
+
+@Injectable()
+export class Effects {
+  fetch$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(companyList),
+      map(action => action),
+      exhaustMap(req =>
+        this.externalApiService.companyList(req).pipe(
+          map(res => {
+            if (res.statusCode === StatusCode.Success) {
+              return companyListSuccess(res);
+            } else {
+              return companyListFailure({ error: 'Failed' });
+            }
+          }),
+          catchError(error => of(companyListFailure({ error })))
+        )
+      )
+    )
+  );
+
+  constructor(
+    private actions$: Actions,
+    private externalApiService: ExternalApiService,
+    private logger: NGXLogger
+  ) {}
+}

projects/ucap-webmessenger-app/src/app/store/setting/company/index.ts

@@ -0,0 +1,4 @@
+export * from './actions';
+export * from './effects';
+export * from './reducers';
+export * from './state';

projects/ucap-webmessenger-app/src/app/store/setting/company/reducers.ts

@@ -0,0 +1,13 @@
+import { createReducer, on } from '@ngrx/store';
+import { initialState } from './state';
+import { companyListSuccess } from './actions';
+
+export const reducer = createReducer(
+  initialState,
+  on(companyListSuccess, (state, action) => {
+    return {
+      ...state,
+      companyList: action.companyList
+    };
+  })
+);

projects/ucap-webmessenger-app/src/app/store/setting/company/state.ts

@@ -0,0 +1,19 @@
+import { Selector, createSelector } from '@ngrx/store';
+import { Company } from '@ucap-webmessenger/api-external';
+
+export interface State {
+  companyList: Company[] | null;
+}
+
+export const initialState: State = {
+  companyList: null
+};
+
+export function selectors<S>(selector: Selector<any, State>) {
+  return {
+    companyList: createSelector(
+      selector,
+      (state: State) => state.companyList
+    )
+  };
+}

projects/ucap-webmessenger-app/src/app/store/setting/index.ts

@@ -1,12 +1,14 @@
 import { Type } from '@angular/core';
 import { Action, combineReducers, Selector, createSelector } from '@ngrx/store';
 
+import * as CompanyStore from './company';
 import * as InitStore from './init';
 import * as OptionStore from './option';
 import * as QueryStore from './query';
 import * as VersionInfoStore from './version-info';
 
 export interface State {
+  company: CompanyStore.State;
   init: InitStore.State;
   option: OptionStore.State;
   query: QueryStore.State;
@@ -14,6 +16,7 @@ export interface State {
 }
 
 export const effects: Type<any>[] = [
+  CompanyStore.Effects,
   InitStore.Effects,
   OptionStore.Effects,
   QueryStore.Effects,
@@ -22,6 +25,7 @@ export const effects: Type<any>[] = [
 
 export function reducers(state: State | undefined, action: Action) {
   return combineReducers({
+    company: CompanyStore.reducer,
     init: InitStore.reducer,
     option: OptionStore.reducer,
     query: QueryStore.reducer,
@@ -31,6 +35,12 @@ export function reducers(state: State | undefined, action: Action) {
 
 export function selectors<S>(selector: Selector<any, State>) {
   return {
+    CompanySelector: CompanyStore.selectors(
+      createSelector(
+        selector,
+        (state: State) => state.company
+      )
+    ),
     InitSelector: InitStore.selectors(
       createSelector(
         selector,

projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html

@@ -6,7 +6,7 @@
       <mat-label>Company</mat-label>
       <mat-select formControlName="companyCode" required>
         <mat-option
-          *ngFor="let company of companies"
+          *ngFor="let company of companyList"
           [value]="company.companyCode"
           >{{ company.companyName }}</mat-option
         >

projects/ucap-webmessenger-ui-account/src/lib/components/login.component.ts

@@ -17,7 +17,7 @@ import { Company } from '@ucap-webmessenger/api-external';
 })
 export class LoginComponent implements OnInit {
   @Input()
-  companies?: Company[];
+  companyList?: Company[];
 
   @Output()
   login = new EventEmitter<{

projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html

@@ -1,5 +1,5 @@
 <div
-  class="chat-form"
+  class="container"
   fxFlex="0 0 auto"
   fxLayout="row"
   fxLayoutAlign="center center"

projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss

@@ -1,39 +1,6 @@
-.chat-form {
+.container {
-  position: relative;
+  display: flex;
-
+  width: 100%;
-  .message-text {
+  height: 100%;
-    padding: 16px 8px;
+  flex: 1;
-
-    .mat-form-field-wrapper {
-      padding: 0;
-
-      .mat-form-field-flex {
-        padding: 0;
-
-        .mat-form-field-infix {
-          padding: 0;
-          border: none;
-          border-radius: 20px;
-          border: 1px solid;
-
-          textarea {
-            overflow: hidden;
-            margin: 16px 48px 16px 16px;
-            width: calc(100% - 64px);
-            padding: 0;
-          }
-        }
-      }
-
-      .mat-form-field-underline {
-        display: none !important;
-      }
-    }
-  }
-
-  .send-message-button {
-    position: absolute;
-    right: 16px;
-    bottom: 21px;
-  }
 }