###### tags: `會議紀錄`
###### Thunder:
###### CodeReview: `A1 #shopee-auth.guard.ts` `行動版 #header-button`
###### Announcement: `行動版 #分支`
###### Attendee: 政儀、永佳、偉恩、弘翊、政儒
# 📌[R]2020/01/07前端會議
## 踩雷事件
### ⚡無踩雷事件

## 寫法交流
### ⛏網頁版
#### #1 shopee-auth.guard.ts
[0008180: 因為蝦皮授權時限的變更而調整](https://digiwina1.visualstudio.com/A1Web_Angular2/_git/A1Web_Angular2/commit/60dab99878face8ce4c00d69ed9a2f0a386e8b77/)
* canActive:
> Q1: 為什麼裡面state型態給了obserable跟promise
> A1: 因為以前改寫法，把promise->obserable但這裡的寫法特別要用promise。

* modalMessage:
> Q1: 權限驗證錯誤不能進去此路由，沒設定會跳到`https://***/#`只顯示空畫面。
> A1: 設定`this.router.navigateByUrl('/eOrder/eShopping/home')`，如果沒權限就跳到電商首頁。

> Q2: 發現可能的問題: 路由進去後modalService還沒生成，開窗會跳不出來。
> A2: 所以用`!this.modalService.hasEnter`來判斷modalService是否準備好，並

import { Injectable, Inject } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable, of } from 'rxjs';
import { HttpService } from '@a1/shared/HttpService';
import { map, concatMap, catchError } from 'rxjs/operators';
import { IModalService } from '@a1/interfaces/bs-modal-interface';
interface ShpoeeAuthResponse { Message?: string; DoNext?: boolean; }
@Injectable({
  providedIn: 'root'
})
export class ShopeeAuthGuard implements CanActivate {
  shpoeeAuthResponse: ShpoeeAuthResponse = {};
  constructor(
    private httpService: HttpService,
    private router: Router,
    @Inject('IModalService') private modalService: IModalService,
  ) {
  }
  /** 此功能用來檢查蝦皮API驗證是否到期，並顯示提示
   * 若"無"訊息則 不顯示 且 通過
   * 若"有"訊息則 顯示 且 剩餘日期<1 則不通過 反之則通過
   */
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    const url = `APILib/Shopee/AuthOverdue`;
    return of(null).pipe(
      concatMap(() => this.httpService.httpGetAll_Observable(`${url}`, false)),
      catchError(() => {
        this.modalMessage('取得[檢查商店授權有效期限]失效');
        return of(this.shpoeeAuthResponse);
      }),
      map((res: ShpoeeAuthResponse) => {
        // console.log(`shpoeeAuthResponse`, res);
        if (res.DoNext === undefined) { return true; } // 空物件一律允許通過
        // 有訊息需顯
        if (res.Message) {
          this.modalMessage(res.Message);
          this.shpoeeAuthResponse = res;
        }
        return res.DoNext;
      })
    );
  }
  /**顯示訊息 */
  private modalMessage(message: string) {
    if (!this.modalService.hasEnter) {
      this.router.navigateByUrl('/eOrder/eShopping/home').then(() => {
        this.modalService.createModal_Error().show(message);
      });
    } else {
      this.modalService.createModal_Error().show(message);
    }
  }
}

### ⛏行動版
#### #1 header-button
CRM的header-button 是使用<(取消) v(儲存)，所以加入新的參數headerShowIcon，判斷顯示Icon還是文字，目前預設false=文字。

建議:
* 目前這樣寫法就只固定能是<、v的Iocn不能帶入自己要的，能再想想。
* 可以試試看存圖片使用路由顯示 不是用class。

## 事情公告
### 📢行動版
#### #1 分支
> 產品注意事項
* 產品會分成兩個->為保留A1進銷存APP流量
* clock (打卡)預計2/3上線 crm 預計2/29上線

> 分支注意事項
* Hotfix要用的時候再拉分支(不常駐)
* crm分支會先把A1dev的功能註解
* A1dev若有更新要記得合併clock與crm
* 未來確定要留A1雲，再把A1dev、clock分支刪除
* **!!不可把clock、crm合併回A1dev**