# 20220817 SCSS、檔案打包、金流系統
###### tags: `Ruby` `Rails`

## SCSS

### manifest
app/assests/stylesheets/application.css
*=require_tree . => 會把所有css檔案全部載入進來
*= require_self ＝> 自己也載進來

**沒用到的檔案就砍了**(scss, helper)!! 展現對自己專案的了解
改檔名把application內的移出，再自己手動載入
**建議模組化**: 細分檔案功用, 可以降低Git衝突

/*
 *= require_self
 *= require "form"
 *= require "flash"
 */


### SCSS 巢狀結構
SCSS可以有巢狀結構
可以解決CSS的混亂
但這不是標準的css
打包時會自動編譯成標準CSS
巢狀結構：

.field_with_errors {
  display: inline;

  input[type="text"] {
    border: 3px solid red;
  }
}

### SCSS 自訂變數
$ 可以拿來自定屬性，再代入

$error-color: red;

.field_with_errors label {
  color: $error-color;
}

### SCSS vs Sass
Sass 沒有括號跟分號
Sass 是靠縮排去判定的，所以你只要縮排縮錯了就不會動了。
**當一個工程師，縮排很重要**

### Rails檔案打包歸屬
Assets Pipeline => 交給Ruby做
webpack(er) => 交給node

Webpack 工具
Webpacker gem(用webpacker來叫webpack打包)

**打包的意義**：
**壓縮**
- 減少檔案大小省空間，空格、註解都會省略掉，甚至連變數都會一起幫你改成比較少名 反正瀏覽器看得懂就好了

- 減少對server的request, 例如這個網站有500支css, 打包成一支, 就只需要request一次而非500次

### hand shaking
你來看我網站時，會有握手(hand shaking),確認你的request
http1.1 每次都要握手(鼓勵打包)
http/2 只握手一次就可以做到平行下載(不鼓勵打包)
> https://http2.akamai.com/
> https://http2.github.io/
> https://ithelp.ithome.com.tw/articles/10222189

http/3 正在草稿中
**相關資料：**
維基：https://zh.wikipedia.org/zh-tw/%E6%8F%A1%E6%89%8B_(%E6%8A%80%E6%9C%AF)
https://notfalse.net/7/three-way-handshake
https://ithelp.ithome.com.tw/articles/10280652

rails 5
Assets Pipleline
Webpack(er)標配

rails 6
Assets Pipleline
Webpack(er)

rails 7
Assets Pipleline
importmaps
(不用node!!)

### 進行打包
index.js類似入口的意思
index.js中import css檔案
方便一次打包

自己在js開個資料夾

css抓取順序：packs/application.js -> index.js -> 個別資料夾的index.js

分層管理

檔案搬到JS後原來在

/* 
 *= reruire "form"
 *= require "flash"
 *= require_self
 */

就可以刪除

關鍵字：CSS in JS

## markdown

> https://vuejs.org/examples/#markdown

想要在輸入框寫markdown

alternative -> 找不到選項時可以找的替代品
vanilla.js -> 超好用，所有大公司都在用它。效能也超好 -> 原生JS
npm <---> yarn

markdown相關套件
1. [simplemde](https://github.com/sparksuite/simplemde-markdown-editor)
2. [easy-markdown](https://github.com/Ionaru/easy-markdown-editor)

找月曆關鍵字 datepicker

月曆套件：
[flatpickr](https://flatpickr.js.org/getting-started/)

後端給前端資訊：例如 用月曆套件 有些天不顯示
可以使用html或是API兩種方式達到目的, 使用的時機
html: 放dataset
API: 比較即時 搶票

## 訂單建立 (串金流)

rails g model Order serial price:integer state user:belongs_to note:text

### 來去繳費
先成立訂單，再去刷卡

想路徑～～～～

resource :plans, only: [:show]

resources :orders, except:[:edit, :update, :destroy] do 
  # 取消訂單
  member do 
    delete :cancel
  end
end

接著就是平常的CRUD
訂單編號：
ORD-20220817000123
好處是：一看就知道日期跟訂單數
壞處：業績被發現

### 狀態

- 未付款 unpay
- 已付款 paid
- 付款失敗 fail
- 已取消 cancelled
- 已退款 refunded

### 狀態機 state machine ###
可以先畫出關狀態機關係圖
寫在model order.rb

event 線 do
transitions from: 節點 to: 節點

每過一分鐘，非洲就過了60秒！
人類是可以做很多事情的：像是喝岩漿ㄑ(一生只能喝一次 >///< )

如果直接進資料庫改東西，是會出事的！！！！(就跟突然從四檔拉到R檔一樣0口0)

來裝套件囉！！！來裝套件囉！！！ㄑ！
statemachine
[AASM](https://github.com/aasm/aasm)

order model導入套件

include AASM

aasm column: "state" do
state :pending, initial: true
state :paid, :fail, :refunded, :cancelled

event :pay do
transitions from: [:pending, :fail], to: :paid
end

event :fail do
transitions from: :pending, to: :fail
end
event :cancel do
transitions from: [:pending, :fail], to: :cancelled
end
event :refund do
transitions from: :paid, to: :refunded
end

end

狀態機會送你方法:
可以去sandbox玩玩看, 以這個order例子來說：
order = (serial:'kk' price:100)

?系列：(回傳true false)

order.pay?
order.fail?
order.cancel?
order.refund?

may_可以嗎系列：(回傳true false)

order.may_pay?
order.may_fail?
order.may_cancel?
order.may_refund?

!執行系列：(改變state)

order.pay! ->state從pending變成paid
order.fail!
order.cancel!
order.refund!

可以在狀態機內再加其他事情，當狀態發生改變，會一起做

event :pay do
transitions from: :[:pending, :fail], to: :paid
after do
puts "發簡訊"
end
end

工程師的手也伸不進來：

aasm no_direct_assignment: true do
(略)
end

SecureRandom module可以用方法alphanumeric產生字母數字的字元
secure.alphanumeric