template page added

projects/ucap-webmessenger-app/src/app/app-routing.module.ts

@@ -13,6 +13,10 @@ const routes: Routes = [
   {
     path: 'account',
     loadChildren: './pages/account/account.page.module#AppAccountPageModule'
+  },
+  {
+    path: 'template',
+    loadChildren: './pages/template/template.page.module#AppTemplatePageModule'
   }
 ];
 

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

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

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

@@ -8,6 +8,7 @@ import * as AppStore from '@app/store';
 import * as AuthenticationStore from '@app/store/account/authentication';
 import * as CompanyStore from '@app/store/setting/company';
 import { Observable } from 'rxjs';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-page-account-login',
@@ -17,7 +18,7 @@ import { Observable } from 'rxjs';
 export class LoginPageComponent implements OnInit {
   companyList$: Observable<Company[]>;
 
-  constructor(private store: Store<any>) {}
+  constructor(private store: Store<any>, private router: Router) {}
 
   ngOnInit(): void {
     this.store.dispatch(
@@ -50,4 +51,8 @@ export class LoginPageComponent implements OnInit {
       })
     );
   }
+
+  onTemplate() {
+    this.router.navigate(['/template']);
+  }
 }

projects/ucap-webmessenger-app/src/app/pages/template/components/index.ts

@@ -0,0 +1,90 @@
+import { TemplatePageComponent } from './template.page.component';
+
+export const COMPONENTS = [TemplatePageComponent];
+
+import { A11yModule } from '@angular/cdk/a11y';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { PortalModule } from '@angular/cdk/portal';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { CdkStepperModule } from '@angular/cdk/stepper';
+import { CdkTableModule } from '@angular/cdk/table';
+import { CdkTreeModule } from '@angular/cdk/tree';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTreeModule } from '@angular/material/tree';
+
+export const MET_MODULES = [
+  A11yModule,
+  CdkStepperModule,
+  CdkTableModule,
+  CdkTreeModule,
+  DragDropModule,
+  MatAutocompleteModule,
+  MatBadgeModule,
+  MatBottomSheetModule,
+  MatButtonModule,
+  MatButtonToggleModule,
+  MatCardModule,
+  MatCheckboxModule,
+  MatChipsModule,
+  MatStepperModule,
+  MatDatepickerModule,
+  MatDialogModule,
+  MatDividerModule,
+  MatExpansionModule,
+  MatGridListModule,
+  MatIconModule,
+  MatInputModule,
+  MatListModule,
+  MatMenuModule,
+  MatNativeDateModule,
+  MatPaginatorModule,
+  MatProgressBarModule,
+  MatProgressSpinnerModule,
+  MatRadioModule,
+  MatRippleModule,
+  MatSelectModule,
+  MatSidenavModule,
+  MatSliderModule,
+  MatSlideToggleModule,
+  MatSnackBarModule,
+  MatSortModule,
+  MatTableModule,
+  MatTabsModule,
+  MatToolbarModule,
+  MatTooltipModule,
+  MatTreeModule,
+  PortalModule,
+  ScrollingModule
+];

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

@@ -0,0 +1,11 @@
+<div>
+  <h3>User-list-item</h3>
+  <div>
+    <ucap-profile-user-list-item [userInfo]="userInfo" [profileImageRoot]="profileImageRoot" [presence]='presence'>
+    </ucap-profile-user-list-item>
+    <ucap-profile-user-list-item [userInfo]="userInfo" [profileImageRoot]="profileImageRoot">
+    </ucap-profile-user-list-item>
+    <ucap-profile-user-list-item [userInfo]="userInfo" [profileImageRoot]="profileImageRoot" [checkable]='true'>
+    </ucap-profile-user-list-item>
+  </div>
+</div>

projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.spec.ts

@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { TemplatePageComponent } from './template.page.component';
+
+describe('TemplatePageComponent', () => {
+  let component: TemplatePageComponent;
+  let fixture: ComponentFixture<TemplatePageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TemplatePageComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TemplatePageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,81 @@
+import { Component, OnInit } from '@angular/core';
+import { UserInfo } from '@ucap-webmessenger/protocol-sync';
+import { EmployeeType } from '@ucap-webmessenger/protocol-room';
+import { RoleCode } from '@ucap-webmessenger/protocol-authentication';
+import {
+  StatusBulkInfo,
+  TerminalStatusInfo,
+  TerminalStatusNumber
+} from '@ucap-webmessenger/protocol-status';
+import { StatusCode } from '@ucap-webmessenger/core';
+
+@Component({
+  selector: 'app-template.page',
+  templateUrl: './template.page.component.html',
+  styleUrls: ['./template.page.component.scss']
+})
+export class TemplatePageComponent implements OnInit {
+  profileImageRoot: string = 'http://27.122.224.170:8011/ProfileImage';
+
+  userInfo: UserInfo = buddyData;
+
+  presence: StatusBulkInfo = status;
+
+  constructor() {}
+
+  ngOnInit() {}
+}
+
+export const status: StatusBulkInfo = {
+  // 사용자SEQ
+  userSeq: 15,
+  // 상태코드(PC)
+  pcStatus: StatusCode.Away,
+  // 상태코드(통화)
+  phoneStatus: StatusCode.Offline,
+  // 상태코드(모바일)
+  mobileStatus: StatusCode.OnLine,
+  // 상태코드(PC화상)
+  conferenceStatus: StatusCode.Offline,
+  // 상태메시지
+  statusMessage: '다른용무중',
+  // 상태코드(Mobile화상)
+  mobileConferenceStatus: StatusCode.Offline,
+  // 상태코드(iMessenger)
+  imessengerStatus: StatusCode.Offline,
+  // 단말상태정보(s)
+  terminalStatus: TerminalStatusInfo.Idle,
+  // 단말상태번호(n)
+  terminalStatusNumber: TerminalStatusNumber.Idle
+};
+export const buddyData: UserInfo = {
+  seq: 15,
+  name: '채희중',
+  profileImageFile: '/2017/08/09/PF_15_174154508.jpeg',
+  grade: '책임',
+  intro: '프로필정보 변경됨.',
+  companyCode: 'GUC006',
+  hpNumber: '01089339833',
+  lineNumber: '01089339833',
+  email: 'hjchae72@lgcns.com',
+  isMobile: false,
+  deptName: 'UCAP TEAM',
+  isFavorit: false,
+  isBuddy: true,
+  isActive: true,
+  roleCd: RoleCode.CompanyExcludeSync,
+  employeeNum: ' ',
+  madn: '0033',
+  hardSadn: ' ',
+  fmcSadn: '0033',
+  nameEn: 'HUI JOONG CHAE',
+  nameCn: ' ',
+  gradeEn: 'Business Engineering',
+  gradeCn: ' ',
+  deptNameEn: ' ',
+  deptNameCn: ' ',
+  isPrivacyAgree: true,
+  isValidLogin: true,
+  employeeType: EmployeeType.Regular,
+  nickName: '채책임(닉)'
+};

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

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { TemplatePageComponent } from './components/template.page.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: '/template/page', pathMatch: 'full' },
+  {
+    path: 'page',
+    component: TemplatePageComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AppTemplateRoutingPageModule {}

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

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { UCapUiGroupModule } from '@ucap-webmessenger/ui-group';
+
+import { AppTemplateRoutingPageModule } from './template-routing.page.module';
+
+import { COMPONENTS, MET_MODULES } from './components';
+import { UcapUiProfileModule } from '@ucap-webmessenger/ui-profile';
+
+@NgModule({
+  imports: [
+    ...MET_MODULES,
+    CommonModule,
+    FlexLayoutModule,
+    UCapUiGroupModule,
+    UcapUiProfileModule,
+    AppTemplateRoutingPageModule
+  ],
+  declarations: [...COMPONENTS],
+  entryComponents: []
+})
+export class AppTemplatePageModule {}

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

@@ -5,11 +5,8 @@
     <mat-form-field appearance="outline">
       <mat-label>Company</mat-label>
       <mat-select formControlName="companyCode" required>
-        <mat-option
+        <mat-option *ngFor="let company of companyList" [value]="company.companyCode">{{ company.companyName }}
-          *ngFor="let company of companyList"
+        </mat-option>
-          [value]="company.companyCode"
-          >{{ company.companyName }}</mat-option
-        >
       </mat-select>
       <mat-error *ngIf="loginForm.get('companyCode').hasError('required')">
         Company is required
@@ -35,12 +32,7 @@
       </mat-error>
     </mat-form-field>
 
-    <div
+    <div class="remember-forgot-password" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center">
-      class="remember-forgot-password"
-      fxLayout="row"
-      fxLayout.xs="column"
-      fxLayoutAlign="space-between center"
-    >
       <mat-checkbox class="remember-me" aria-label="Remember Me">
         Remember Me
       </mat-checkbox>
@@ -50,14 +42,8 @@
       </a>
     </div>
 
-    <button
+    <button mat-raised-button color="accent" class="submit-button" aria-label="LOG IN" [disabled]="loginForm.invalid"
-      mat-raised-button
+      (click)="onClickLogin()">
-      color="accent"
-      class="submit-button"
-      aria-label="LOG IN"
-      [disabled]="loginForm.invalid"
-      (click)="onClickLogin()"
-    >
       LOGIN
     </button>
   </form>
@@ -66,4 +52,9 @@
     <span class="text">Don't have an account?</span>
     <a class="link">Create an account</a>
   </div>
+
+
+  <button mat-raised-button color="accent" class="submit-button" aria-label="Template" (click)="onClickTemplate()">
+    Template
+  </button>
 </div>

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

@@ -27,6 +27,8 @@ export class LoginComponent implements OnInit {
     rememberMe: boolean;
     notValid: () => void;
   }>();
+  @Output()
+  template = new EventEmitter();
 
   @ViewChild('loginPw', { static: true }) loginPwElementRef: ElementRef;
 
@@ -53,4 +55,8 @@ export class LoginComponent implements OnInit {
       }
     });
   }
+
+  onClickTemplate() {
+    this.template.emit();
+  }
 }

projects/ucap-webmessenger-ui-profile/src/lib/components/list-item.component.html

@@ -1,10 +1,5 @@
-<button
+<button mat-button class="contact" (click)="onClickItem()" ngClass="{'unread':contact.unread}"
-  mat-button
+  [@animate]="{ value: '*', params: { y: '100%' } }">
-  class="contact"
-  (click)="onClickItem()"
-  ngClass="{'unread':contact.unread}"
-  [@animate]="{ value: '*', params: { y: '100%' } }"
->
   <div fxLayout="row" fxLayoutAlign="start center">
     <div class="avatar-wrapper" fxFlex="0 1 auto" fxLayoutAlign="center center">
       <img class="avatar" />

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html

@@ -0,0 +1,12 @@
+<div matRipple>
+  <span *ngIf='presence'>{{ presence.pcStatus }} </span>
+  <img src='{{ profileImageRoot + userInfo.profileImageFile }}'>
+  <span>
+    {{ userInfo.name }} {{ userInfo.grade }}
+  </span>
+  <span>
+    {{ userInfo.deptName }}
+  </span>
+  <span>{{ userInfo.intro }}</span>
+  <mat-checkbox *ngIf='checkable'></mat-checkbox>
+</div>

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { UserListItemComponent } from './user-list-item.component';
+
+describe('UserListItemComponent', () => {
+  let component: UserListItemComponent;
+  let fixture: ComponentFixture<UserListItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UserListItemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserListItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { UserInfo } from '@ucap-webmessenger/protocol-sync';
+import {
+  UserInfoSS,
+  UserInfoF,
+  UserInfoDN
+} from '@ucap-webmessenger/protocol-query';
+import { StatusBulkInfo, StatusInfo } from '@ucap-webmessenger/protocol-status';
+
+@Component({
+  selector: 'ucap-profile-user-list-item',
+  templateUrl: './user-list-item.component.html',
+  styleUrls: ['./user-list-item.component.scss']
+})
+export class UserListItemComponent implements OnInit {
+  @Input()
+  userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
+
+  @Input()
+  profileImageRoot: string;
+
+  @Input()
+  presence?: StatusBulkInfo | StatusInfo;
+
+  @Input()
+  checkable = false;
+  @Input()
+  compactable = false;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

projects/ucap-webmessenger-ui-profile/src/lib/ucap-ui-profile.module.ts

@@ -7,13 +7,22 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 
 import { ListItemComponent } from './components/list-item.component';
+import { UserListItemComponent } from './components/user-list-item.component';
+import { MatRippleModule, MatCheckboxModule } from '@angular/material';
 
-const COMPONENTS = [ListItemComponent];
+const COMPONENTS = [ListItemComponent, UserListItemComponent];
 
 const SERVICES = [];
 
 @NgModule({
-  imports: [CommonModule, FlexLayoutModule, MatButtonModule, MatIconModule],
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    MatButtonModule,
+    MatIconModule,
+    MatRippleModule,
+    MatCheckboxModule
+  ],
   exports: [...COMPONENTS],
   declarations: [...COMPONENTS]
 })