###### tags: `會議紀錄`
###### Thunder:
###### CodeReview A1: `Textarea height auto` `a1notice` `e-c-order 電商各自Service`
###### CodeReview 行動版:`List刪除問題 event.target.innerText` `套件mbsc設置maxLength無效問題`
###### CodeReview CSS: `行動版 #新增客戶-新增聯絡人CSS md ios`
###### Announcement:
###### Attendee: 政儀、永佳、偉恩、弘翊、政儒
# 📌[R]2020/04/29前端會議
## 踩雷事件
### ⚡無踩雷事件

## 寫法交流
### ⛏網頁版
#### #1 Textarea height auto
* 備註欄位的畫面顯示高度要與內容的高度一致，讓內容可以一次看清。
* 透過scrollHeight 來設定高度

==textarea-auto-resize-directive.ts==

import { Directive, HostListener, Input, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[appTextareaAutoResize]'
})

/**自動調整Textarea 高度 */
export class TextareaAutoResizeDirective implements OnInit {

  /**設定最大高度 */
  @Input('appTextareaAutoResize') maxHeight: number;

  @HostListener('input', ['$event.target'])
  onInput(textArea: HTMLTextAreaElement): void {
    this.autoResize();
  }

  constructor(
    private element: ElementRef
  ) { }

  ngOnInit(): void {
    this.autoResize(); // 設定初始高度
  }

  private autoResize(): void {
    const textArea = this.element.nativeElement as HTMLTextAreaElement;
    let newHeight: number;

    if (textArea) {
      textArea.style.overflow = "hidden";
      textArea.style.height = "auto";
      if (this.maxHeight) {
        newHeight = Math.min(textArea.scrollHeight, this.maxHeight);
      } else {
        newHeight = textArea.scrollHeight;
      }
      textArea.style.height = newHeight + "px";
    }
  }
}

* 如果想讓textarea id=memo每支都使用，但又不想一支一支調整掛上，可以調整selector

元件是textatea且id=memo的

@Directive({
  selector: 'textarea[id="Memo"]'
})

不分元件id=memo的

@Directive({
  selector: '[id="Memo"]'
})

#### #2 a1notice
A1有時候跳出自己跳出訊息，類似
這是透過a1notice來接收顯示(SignalR)，如果有要新增訊息內容，要一定要記得維護下面的程式

==a1-notice-message-controller.ts==
* 若訊息是要在特定的時候顯示，就要在 controlMessage 中做以下處理

controlMessage(iA1NoticeRespone: IA1NoticeRespone) {
    // 需特殊處理
    if ((msgCode === ('' + [msgCode]))) {
      this.[Subject].next(msgCode);
      return;
    }
}

* 如果沒有特別需求，訊息會在完成時直接顯示訊息。

==a1-notice-message-controller.enum.ts==
* 這支是用來維護NoticeCode編到幾號了

enum NoticeCode {
    /**errorMessageContext的訊息*/
    errorMsg0000 = [0000],
}

#### #3 e-c-order 電商各自自己的Service
==e-c-to-orders-component.ts==
這支目前程式會越來越大包，可以把ECToOrdersService拆成各自電商自己一支。

### ⛏行動版
#### #1 List刪除問題 event.target.innerText
* Q: 安卓、電腦使用可以正常刪除，但蘋果不能刪除
* A: event.target會依照目前環境給值，所以在不同環境下，可能會拿到不同的參數值

actions: {
      left: [
        {
          text: '刪除',
          color: "#f70000",
          action: (event, inst) => {
            console.log('刪除', event.target.innerText);
            // const aa = this.delete.emit({ data: event.target.innerText, index: event.index });
            this.delete.emit({ data: this.dataToShow[event.index - 1], index: event.index });
          }
        }
      ],
}

#### #2 新增客戶-新增聯絡人CSS md ios
* Q: 安卓的手機上警示窗的button會被蓋住。
* A: 加入CSS控制，==.md只有安卓有效、.ios只有蘋果有效==

ion-app.md .createContactN{
}

ion-app.ios .createContactN{
}

#### #3 套件mbsc設置maxLength無效問題
>[mobiscroll input搭配maxlength](https://www.notion.so/mobiscroll-input-maxlength-5f6704ecccf5459d9b6b1e1f25668f31)
> [name=永佳]
* maxLength不是無效，而是沒有設定到元件上
* 可以使用input-length這個Directive掛在html maxLength就會有效果了

==input-length.ts==

import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive({
  selector: '[input-length]' // Attribute selector
})
export class InputLengthDirective {
  maxlength: string = '0';

  constructor(private el: ElementRef,
  ) {
    const attributes: Array<any> = this.el.nativeElement.attributes;
    const attributesKeys = Object.keys(attributes);
    let attributes_Array = [];

    for (let x = 0; x < attributesKeys.length; x++) {
      attributes_Array.push(attributes[x]);
    }
    /** 找出maxlength元素 */
    const attributesMaxLength = attributes_Array.find(x => x.name === 'maxlength');
    if (attributesMaxLength) {
      /** 將設定好的長度value塞到變數內 */
      this.maxlength = attributesMaxLength.nodeValue;
    }
  }

  @HostListener('click', ['$event.target'])

  onClick(btn: HTMLElement) {
    btn.setAttribute('maxlength', this.maxlength)
  }
}

* 政儀建議，可以在InputLengthDirective掛個 `@Input` 就可以代替maxLength

==input-length.ts== 調整成有@Input的

import { Directive, HostListener, Input } from '@angular/core';
@Directive({
  selector: '[input-length]'
})
export class InputLengthDirective {
  @Input('input-length') maxLength: string;

  constructor() {
  }

  @HostListener('click', ['$event.target'])

  onClick(inputElement: HTMLElement) {
    inputElement.setAttribute('maxlength', this.maxLength)
  }
}

maxLength

<mbsc-textarea maxLength="200"></mbsc-textarea>

input-length

<mbsc-textarea input-length="200"></mbsc-textarea>

## 事情公告
### 📢無事情公告