# HODO Interview VueJS

### I. API

https://jsonplaceholder.typicode.com/posts

### II. Playground - Code online

https://stackblitz.com/edit/vue2-hodo-fe-interview?file=README.md

**NOTE:** Yêu cầu **FORK** trước khi start code.

### III. Yêu cầu

#### 1. Các packages được sử dụng: axios, vuex@3.6.2, vue-router@3.6.5

- API: Axios
- Store: Vuex - vuex@3.6.2 - Docs: https://v3.vuex.vuejs.org/
- Router: Vue-router - vue-router@3.6.5 - Docs: https://v3.router.vuejs.org/

#### 2. Yêu cầu chính

- Sử dụng Vuex để lưu store tất cả dữ liệu posts lấy về từ API
- API trả về dữ liệu 1 mảng posts chứa 100 phần tử
- Hiển thị lên màn hình 5 posts mới nhất (bao gồm: `id`, `title`, `body`) theo thứ tự ID **[100, 99, 98, 97, 96]**
- Hiển thị chi tiết post theo ID thông qua router (sử dụng vue-router)

#### 3. Yêu cầu thêm (Optional)

- Build 1 layout hiển thị trang blog post.
- Do API không trả về hình ảnh, sử dụng link sau làm ảnh thumbnail demo cho các posts:
**https://picsum.photos/id/<id_post>/500/300**
- Sử dụng 5 posts hiển thị dạng lưới (Grid) bao gồm:
- Tiêu đề mục: Latest posts
- Image
- Title
- Body
- Với 95 posts còn lại [95, 94, 93, …, 1] hiển thị dạng danh sách (List) bao gồm:
- Image
- Title
- Body
- Danh sách có phân trang với limit **10 posts/page**. Danh sách này được đặt bên dưới Latest posts

#### 4. Kết quả đạt được cho phần yêu cầu thêm (Optional)

- Trang Blog posts có:
- Latest posts (5 posts có ID mới nhất (lớn nhất)
- List 95 posts còn lại, có phân trang với limit: **10 posts/page**
- Trang Detail post: hiển thị nội dung của 1 bài post khi được click từ trang Blog post bên trên

#### 5. Bài toán 1

Một phòng khám cần xây dựng hệ thống xếp hàng.
Người ở quầy lễ tân có hai lựa chọn để thêm bệnh nhân vào hàng đợi.
- Bệnh nhân có lịch hẹn cố định
- Bệnh nhân tới khám

Ví dụ: có bốn bệnh nhân đã có trong hàng đợi và mảng lịch hẹn hiện có trông như sau:

`appointments = ["09:30", "12:15", "10:00", "13:45"];`

Thời gian khám trung bình cho một bệnh nhân là 15 phút.
Ngay khi có bệnh nhân bước vào, nhân viên lễ tân cần tìm khoảng thời gian phù hợp nhất cho bệnh nhân.
Viết hàm `FindFreeSlot`, với thời gian đầu vào hiện tại là **09:35**

#### 6. Bài toán 2

Hệ thống ghi nhật ký của chúng tôi cần tuân thủ các quy định HIPAA, trong đó yêu cầu tên bệnh nhân và ID của họ được che giấu.
Sử dụng `REGEX` để triển khai hàm `PrintLog(Chuỗi tên đầy đủ, chuỗi ID)`.
https://regexr.com/

Yêu cầu:
Hàm này sử dụng biểu thức chính quy để che tên và ID của bệnh nhân.

- Để che tên, cần thay thế tất cả các chữ cái của mỗi từ ngoại trừ chữ cái đầu tiên bằng dấu (*).
- Để che giấu ID, cần thay thế tất cả các ký tự ngoại trừ bốn ký tự cuối cùng bằng dấu (*).

Kết quả mong muốn:
`PrintLog("Nguyen Van Binh", "1389892138")`
`Log: N**** V**** B****`
`Log: *****2138`