From 2a737bbe370b43461191b531516f7ea122fb7b05 Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Mon, 2 Dec 2019 18:46:07 +0900
Subject: [PATCH] inline edit is added

---
 .../src/assets/scss/global/_default.scss                  | 4 ++++
 .../src/lib/components/profile.component.html             | 8 ++++++--
 .../src/lib/components/profile.component.ts               | 3 +++
 .../src/lib/ucap-ui-profile.module.ts                     | 6 ++++++
 .../src/lib/components/file-upload-queue.component.ts     | 2 --
 projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts   | 7 +++++++
 6 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
index d6536dbb..eb52afce 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
@@ -349,6 +349,10 @@ $daesang-grey: (
     }
   }
 
+  .mat-form-field-appearance-legacy[inlineEdit] .mat-form-field-underline {
+    background-color: transparent;
+  }
+
   .messages .container {
     background: mat-color($accent, 50);
   }
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html b/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html
index d5a1936a..80045fde 100644
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html
@@ -40,7 +40,7 @@
         "
         (click)="profileImageFileInput.click()"
       >
-        <span class="mdi mdi-upload mdi-24px"></span>
+        <span class="mdi mdi-upload mdi-18px"></span>
       </button>
       <input
         type="file"
@@ -115,7 +115,7 @@
       </span>
     </div>
 
-    <ul>
+    <ul style="padding-top: 20px;">
       <li>
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -132,6 +132,10 @@
             d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
           ></path>
         </svg>
+        <!-- <mat-form-field ucapInlineEditInput style="width: 100%;">
+          <input matInput [formControl]="userIntroFormControl" />
+        </mat-form-field> -->
+        <!-- <ucap-inline-edit ([value])="(userInfo.intro)"></ucap-inline-edit> -->
         {{ userInfo.intro }}
       </li>
       <li>
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.ts b/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.ts
index e1a84944..1722c223 100644
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.ts
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.ts
@@ -11,6 +11,7 @@ import {
 import { UserInfo } from '@ucap-webmessenger/protocol-sync';
 import { UserInfoF } from '@ucap-webmessenger/protocol-query';
 import { FileUploadItem } from '@ucap-webmessenger/api-common';
+import { FormControl } from '@angular/forms';
 
 @Component({
   selector: 'ucap-profile-profile',
@@ -48,6 +49,8 @@ export class ProfileComponent implements OnInit {
   @ViewChild('profileImageFileInput', { static: false })
   profileImageFileInput: ElementRef<HTMLInputElement>;
 
+  userIntroFormControl = new FormControl('');
+
   profileImageFileUploadItem: FileUploadItem;
 
   constructor() {}
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/ucap-ui-profile.module.ts b/projects/ucap-webmessenger-ui-profile/src/lib/ucap-ui-profile.module.ts
index feb12152..a8d32a04 100644
--- a/projects/ucap-webmessenger-ui-profile/src/lib/ucap-ui-profile.module.ts
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/ucap-ui-profile.module.ts
@@ -3,12 +3,15 @@ import { MatCardModule } from '@angular/material/card';
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { ReactiveFormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { MatRippleModule, MatCheckboxModule } from '@angular/material';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
 
 import { UCapUiModule } from '@ucap-webmessenger/ui';
 
@@ -29,9 +32,12 @@ const SERVICES = [];
 @NgModule({
   imports: [
     CommonModule,
+    ReactiveFormsModule,
     FlexLayoutModule,
     MatButtonModule,
+    MatFormFieldModule,
     MatIconModule,
+    MatInputModule,
     MatRippleModule,
     MatCheckboxModule,
     MatCardModule,
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.ts
index 1d1ef39a..745a56f3 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.ts
@@ -2,8 +2,6 @@ import {
   Component,
   OnInit,
   Input,
-  Output,
-  EventEmitter,
   ElementRef,
   AfterViewInit
 } from '@angular/core';
diff --git a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
index d6c159ab..21caaeae 100644
--- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
@@ -2,6 +2,8 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { ReactiveFormsModule } from '@angular/forms';
+
 import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { MatButtonModule } from '@angular/material/button';
@@ -12,6 +14,8 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
 
 import { DragDropModule } from '@angular/cdk/drag-drop';
 
@@ -91,17 +95,20 @@ const SERVICES = [
 @NgModule({
   imports: [
     CommonModule,
+    ReactiveFormsModule,
     FlexLayoutModule,
     MatButtonModule,
     MatCardModule,
     MatDialogModule,
     MatIconModule,
+    MatInputModule,
     MatProgressBarModule,
     MatSliderModule,
     MatSnackBarModule,
     MatToolbarModule,
     MatTooltipModule,
     MatTabsModule,
+    MatFormFieldModule,
     DragDropModule
   ],
   exports: [...COMPONENTS, ...DIRECTIVES, ...PIPES],