[MEAN_STACK] miniERP - Development Log 5 : Leave Epaper

這次是要增加假單的功能

功能有: 選擇假別、選擇天數、選擇代理人、選擇簽核人

並且可以發送 email 通知來簽核，以及更改主頁功能

會有四個子頁面 : 我的所有表單、我簽核過的表單、等代簽核的表單、需要我簽核的表單

基本實做的方式和觀念，和前面部分都一樣

這邊主要記錄一些比較特別的部分

This time is going to add leave epaper application.

Functionalities have choosing leave category、date、deputy and approver.

The system will also send an email to notify approvers.

What's more, the main page is modified as well.

There will be "All my epapers"、"All epapers I approved"、"Epapers waiting be approved"

and "Epapers need my approval" pages.

The basic skill and concept are the same as previous parts.

Just record some special parts here.

source code在此


1. auto-complete

   為了讓填寫方便，所以想增加 auto-complete 的功能

   這次是用ui.bootstrap 的 Typeahead 來達成這個功能

   可以用 brew 安裝，並 include 需要的 JS

   I want to add auto-complete functionality for convenience reason.

   I used Typeahead of ui.bootstrap package to achieve this purpose.

   You can use brew to install and include all needed JS files.

   在所需的 tag 裡面，使用 uib-typeahead 這個 attribute，便可以有 auto-complete 的功能

   Use attribute "uib-typeahead" in the tag you want and then you have

   auto-complete functionality.

   uib-typeahead="item for item in Array | filter:$viewValue | limitTo:8"

   $viewValue : 就是目前 ng-model 的值，detail 可以看這裡

                current value of ng-model, check details here

   limitTo : 如同字面，最多就顯示8個符合的選項

             show 8 matched items at most


2. 讓 $mdDialog 的文字內容可以換行

   Let text content in $mdDoalog can change to new line

   Angular Material 的 $mdDialog 本來就有這個功能，但是必須 depend on 另外一個 module

   用 brew 安裝 ngSanitize，並 include 相關 JS

   $mdDialog use ngSanitize to let content have new line.

   ngSanitize can be installed by brew.

   然後在使用 $mdDialog 的時候用 htmlContent 取代 textContent

   Use htmlContent instead of textContect.

3. mongoose 用某個 key-value來尋找 Array of Object 裡面的 data

   mongoose can use specific key-value to search Array of Object


   可以使用 $elemMatch 來尋找，詳細說明可以看ref1、ref2

   approver 是一個 Array of Object

   Mongoose can use $elemMatch to achieve this purpose.

   Details can check ref1 and ref2.

   這邊除了使用 $elemMatch 之外，也用 $or 合併兩個 $elemMatch

   $elemMatch also can be combined with $or

4. email notification

   這個功能主要是用 nodemailer 來實做，可以用 npm 安裝

   使用 Gmail 來寄送郵件時，因為 Google 會做一些安全性的檢查

   導致寄送郵件會失敗，解決方法可以看這裡

   如何使用可以直接看官網說明

   I used nodemailer to implement this functionality.

   When using Gmail, there are few things need to take care.

   Check out here.

   You can see the official web of nodemailer to find out how to

   use nodemailer.