###### tags: `會議紀錄`
###### Thunder:
###### CodeReview:`新的繼承頁(研究中)` `搜尋元件(SearchUI)` `新寫法(bank/cash *** diff)`
###### Announcement:
###### Attendee: 政儀、永佳、偉恩、弘翊、政儒
# 📌[R]2020/06/09前端會議
## 踩雷事件
### ⚡無踩雷事件

## 寫法交流
### ⛏新的繼承頁
#### #永佳嘗試撰寫
原因:

目前的繼承架構，與現在的需求越來越不相符，且容易現在開發人員的撰寫，因此希望可以寫新的繼承作業給大家使用。

理想實現是希望，繼承可以提供大家共用畫面及TS 各支程式只需要準備好自己的service就可以了。

> [name=政儀]
> 目前的想法非常好，但是依現在的需求來說，要能達到理想狀態幾乎是不可能。
>
> 目前我們的產品需求畫面都不是非常一致，因此對於A1目前的需求來說，自己的作業就必須要提供該作業的TS、HTML，否則就算提供大家可以共用的，也還是需要提供各支非共用的作業，但這樣就會跟原本的繼承架構很相似。

### ⛏新的搜尋元件
#### #政儒寫了searchUI元件
原因:
在某次開發需求調整了原先的搜尋，使搜尋內容的輸入元件(Input)可以依搜尋欄位條件變成下拉元件(select)，但沒有注意到傳給後端的條件都會是`%like%`，所以當今天下拉內容(內容值都是傳number)超過10後段回的值就會不正確。

> 政儀:可以將searchFiledChange拿掉，把他setSelectList的功能寫在共用的裡面，然後在各個拿到list值的時候重新=selectList的設定就好，還有我們的專案有做欄位紀錄的功能，因此可能需要加上去。

==程式碼為調整過後的==
.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { StoreService } from '@a1/shared/StoreService';

export enum ESearch {
  Input,
  Select
}

export interface ISearch {
  /**[搜尋欄位]欄位名稱*/value: string;
  /**[搜尋欄位]顯示名稱*/name: string;
  /**[搜尋內容]元件類型*/type: ESearch;
  /**[搜尋內容]內容資料*/data?: any[];
  /**[搜尋內容]唯讀*/disabled?: boolean;
}

@Component({
  selector: 'app-search-ui',
  templateUrl: './search-ui.component.html',
  styleUrls: ['./search-ui.component.css']
})
export class SearchUiComponent implements OnInit {
  // Enum
  ESearch = ESearch;

  // Input
  /**搜尋清單 #搜尋欄位*/
  @Input() searchList: Array<ISearch>;

  // Output
  /**變更搜尋欄位*/
  @Output() searchFieldChange = new EventEmitter();

  // 記憶欄位
  storeKey = location.hash;
  storeData = {searchField: '', searchContent: '', selectList: [{ ID: 0, Name: '' }]};

  // Param
  /**搜尋欄位*/
  searchField: string = null;
  /**搜尋內容*/
  searchContent: string;
  /**搜尋內容 #元件類型，預設:Input*/
  searchType: ESearch = ESearch.Input;
  /**搜尋內容 #內容資料*/
  selectList: Array<{ ID: number, Name: string }>;
  /**搜尋內容 #唯讀否*/
  isSelectDisabled = false;

  constructor(
    public storeService: StoreService
  ) { }

  ngOnInit() {
    // 設定上次查詢的內容
    const storeKey = location.hash ? location.hash.split('?')[0] : '';
    const storeData = this.storeService.getStorage(storeKey);

    if (storeData) {
      this.setSearchField(storeData.searchField);
      this.setSelectList(storeData.selectList);
      this.setSearchContent(storeData.searchContent);
    }
  }
  // 搜尋欄位
  /**設定搜尋欄位值*/
  setSearchField(searchField) {
    this.searchField = searchField;
    const isExist = this.searchList.find(x => x.value === this.searchField);
    if (isExist) {
      this.searchType = isExist.type;
    }
  }
  /**取得搜尋欄位值*/
  getSearchField() {
    return this.searchField;
  }
  /**變更搜尋欄位值*/
  onSearchFieldChange() {
    const isExist = this.searchList.find(x => x.value === this.searchField);
    if (isExist) {
      this.searchType = isExist.type;
      this.selectList = isExist.data;
      this.isSelectDisabled = !!isExist.disabled;
      this.searchContent = null;
    }
    this.searchFieldChange.emit();
  }


  // 搜尋內容
  /**設定下拉選項清單*/
  setSelectList(selectList: Array<{ ID: number, Name: string }>) {
    this.selectList = selectList;
  }
  /**設定搜尋內容值*/
  setSearchContent(searchContent) {
    this.searchContent = searchContent;
  }
  /**取得搜尋內容值*/
  getSearchContent() {
    return this.searchContent;
  }
  /**取得搜尋內容元件類型*/
  getSearchContentType() {
    return this.searchType;
  }

  // 記憶
  /**記錄查詢資訊*/
  setStorage() {
    const storeKey = location.hash ? location.hash.split('?')[0] : '';
    const storeData = this.storeService.getStorage(storeKey);

    storeData.searchField = this.searchField;
    storeData.searchContent = this.searchContent;
    storeData.selectList = this.selectList;
  }
}

.HTML

<div class="flex-row">
  <div class=" flex-col-xs-12  contentTopSearch-select02">
    <select id="" class="form-control" [(ngModel)]="searchField" (change)="onSearchFieldChange()">
      <option *ngFor="let searchs of searchList" [ngValue]="searchs.value" [hidden]="searchs.value == null"
        [disabled]="searchs.value == null">
        {{searchs.name}}
      </option>
    </select>
  </div>

  <!-- 搜尋欄位 #輸入欄位 Input -->
  <div class=" flex-col-xs-12 contentTopSearch-content " *ngIf="searchType==ESearch.Input">
    <input type="text" id="" placeholder="搜尋內容 " class="form-control input-mask-date" [(ngModel)]="searchContent">
  </div>

  <!-- 搜尋內容 #下拉選單 Select -->
  <div class=" flex-col-xs-12 contentTopSearch-content" *ngIf="searchType==ESearch.Select">
    <select id="" class="form-control" [(ngModel)]="searchContent" [disabled]="isSelectDisabled">
      <option *ngFor="let select of selectList" [ngValue]="select.ID">
        {{select.Name}}</option>
      <option disabled hidden [value]="''">
        全部</option>
      <option [value]="null" selected disabled hidden>
        全部</option>
    </select>
  </div>
</div>

### ⛏新的作業寫法
#### #政儀寫了個怕被罵的東西
原因:
政儀收到bank/cash *** diff 這兩支幾乎一樣的新程式需求，因此想要嘗試把兩支寫成同一支，怕被罵的原因是，之後要改的人可能會看不懂所以維護時間會比較久，因為跟現在其他支的架構不一樣。

在撰寫時遇到比較特殊的問題，提出來跟大家分享。
問題:

這邊要補程式碼
但我怎麼找不到QAQ

* input 生成的比construer慢
* 編輯後離開會彈出來了東西 使用viewChield掛進來的那支 因為沒有自己的data所以他會沒有爭測到，所以他就會錯，目前適用不太好的方式寫()，永佳(政儀說比較正確的方式)提議，可以寫在afterSelect那個function裡。

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