###### tags: `會議紀錄`
###### Thunder:`行動版 #日期區間JSON放型別Date時區問題`
###### CodeReview :`工時系統 更新機制 service worker json`
###### CodeReview A1: `special.gaurd` `getExportColumnKeys`
###### CodeReview OSS: `OSS EDM Editer`
###### Announcement:
###### Attendee: 政儀、永佳、偉恩、弘翊、政儒
# 📌[R]2020/05/27前端會議
## 踩雷事件
### ⚡行動版 #日期區間JSON放型別Date時區問題
在開發行動版上的應收帳款對帳單時，發現資料會有異常的問題(資料與WEB版不一致)。我比對了WEB版與行動版傳給後端的參數，發現行動版的日期會與選擇的不一致。

**#行動版concole值與實際傳給後端的值👇**
> console出來的日期與API傳送的日期，起訖相差了一天。
* [console] 前端要給後端的參數
`起始日期: 2020 05 00 00:00:00 GMT+0800`
`結束日期: 2020 05 31 00:00:00 GMT+0800`

* [Network] Post API 前端給後端的參數
`起始日期: 2020-04-30 T16:00:00.000Z`
`結束日期: 2020-05-30 T16:00:00.000Z`

JSON為了可以支持用戶在不同的時區，因此會忽略日期的時區資訊轉並為UTC標準時間，才造成日期不一致的問題。
> JSON使用Date.prototype.toISOString不代表本地時間而是未經修改的UTC時間

> (給大家參考網路上的解決方法)
> 1.存入的日期與顯示的日期分開處理，顯示日期在取得日期後再加上時區。
> 2.改寫Date.prototype.toISOString

但目前我是直接把日期轉成字串😂

[JSON Stringify changes time of date because of UTC](https://stackoverflow.com/questions/1486476/json-stringify-changes-time-of-date-because-of-utc)
[JSON日期轉換的時區陷阱](https://blog.darkthread.net/blog/json-date-timezone-issue/)

## 寫法交流
### ⛏special.gaurd
永佳寫的新路由元件，目前已經可以拿來使用。
### ⛏OSS EDM Editer
由於舊的Editer太老舊，所以服務希望可以換一個新的套件。
弘翊在做EDM的時候覺得一個按鈕樣式可以分享給大家，這樣式需要做許多個class來呈現。

.flexBtns {
    display: flex;
    justify-content: space-between;
}
.editBtn {
    position: relative;
    padding: 5px 15px;
    border-radius: 4px;
    border: none;
    background-size: 200% auto;
    font-size: 110%;
    color: #FFF;
    background-image: linear-gradient(to right, #a4b8da 0%, #7190c5 51%, #a4b8da 100%);
    outline: none;
    cursor: pointer;
    transition: 0.2s;
}
.editBtn:hover::before {
    background: rgba(255, 255, 255, 0.2);
}
.editBtn:active::before {
    background: rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}
.editBtn::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    border-radius: 4px;
    transition: 0.2s;
    pointer-events: none;
}
.editBtn.purple {
    background-image: linear-gradient(to right, #cda4da 0%, #b271c5 51%, #cda4da 100%);
}

.editBtn.blue {
  background-image: linear-gradient(to right, #a4b8da 0%, #7190c5 51%, #a4b8da 100%);
}

/* Auto Save */
.autoSave {
    display: flex;
    align-items: center;
}
.autoSave p {
    margin: 0 5px 0 20px;
}
.autoSave input {
    display: none;
}
.autoSave input:checked ~ .checkBoxHolder {
    background: #afc6ee;
}
.autoSave input:checked ~ .checkBoxHolder .circle {
    left: 20px;
}
.autoSave input:checked ~ .checkBoxHolder::before {
    border: solid 1px #7190c5;
}
.autoSave input:checked ~ .checkBoxHolder .circle::before {
    animation: circle 0.4s linear forwards;
}
.autoSave .checkBoxHolder {
    position: relative;
    width: 43px;
    height: 26px;
    background: #FFFFFF;
    border-radius: 50px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    /* overflow: hidden; */
    transition: 0.5s 0.1s;
    cursor: pointer;
}
.autoSave .checkBoxHolder::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 16px;
    top: 50%;
    left: 50%;
    opacity: 0.5;
    border: solid 1px #c7c7c7;
    border-radius: 50px;
    transform: translate(-50%, -50%);
    transition: 0.5s 0.1s;
}
.autoSave .checkBoxHolder .circle {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 5px #252525;
    transition: 0.5s 0.1s;
}
.autoSave .checkBoxHolder .circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(16, 103, 253, 0.9);
    transform: translate(-50%, -50%);
}
.autoSave .checkBoxHolder .circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #FFFFFF;
    transform: translate(-50%, -50%);
}

@keyframes circle {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

### ⛏工時系統 更新機制 service worker json
政儀嘗試新更新機制，調整在工時系統裡，所以最近才會看到右下角有奇怪的訊息跑出來(但要升級V9才可以使用此套件，所以政儀將工時系統升級到9)。

希望可以嘗試讓A1不需要有轉圈圈的東西

* 這部分講了很多東西，但我有點忘記+不太了解，所以沒有詳細記錄QQ

### ⛏getExportColumnKeys
在許多作業裡會使用到轉出的功能，但我們在後續維護作業時，很容易在增減欄位時忘記修改輸出的欄位，因此政儀建議可以直接拿grid的header，就不用怕在調整欄位的時候忘記調整轉出這部分。

==舊寫法 #將要轉出的欄位加到陣列裡==

/** 取得轉出的column */
getExportColumnKeys(): string[] {
    const columnKeys = ['ShowSeq_'];
    return columnKeys;
}

==新寫法 #畫面上的欄位都加到陣列裡==

/** 取得轉出的column */
getExportColumnKeys(): string[] {
    const columnKeys: string[] = [];
    this.gridColumnDefs.forEach((x) => {
      if (x.colId !== 'isSelected' && x.colId !== 'action') {
        columnKeys.push(x.colId);
      }
    });
    return columnKeys;
}

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