Xây dựng job board draggble với ReactJS

Nếu các bạn đã từng làm việc với các phần mềm như Taiga, Asana, Jira hoặc những ứng dụng web mà có thể kéo thả các khối, các block trông nó thật tiện cho người dùng đúng không nào, đó được gọi là draggble. Trông thú vị đúng không nào, hôm nay mình sẽ hướng dẫn các bạn làm draggble với ReactJS. 

1. Setup source ReactJS

Đầu tiên là chúng ta sẽ tạo đơn giản source reactjs với lệnh:

npx create-react-app job-board-draggble

Sau đó, để tiện style dễ dàng cho dự án ta thêm sass với lệnh:

npm install sass

Cuối cùng, chúng ta add thư viện react beautiful dnd để làm draggble. Chúng ta chạy lệnh:

npm install react-beautiful-dnd --save

Setup source reactJS ban đầu

2. Xây dựng UI

Sau khi đã setup source việc tiếp theo lúc này chính là chúng ta tạo UI. Ý tưởng là tạo ra 4 column với 4 hạng mục gồm: To Do, In Progress, Completed và Verify, mỗi column sẽ có các task nhỏ chúng ta có thể kéo thả chúng khi chúng ta hoàn thành tiến độ ở các hạng mục khác nhau.Nào bây giờ chúng ta triển khai UI:

- Đầu tiên chúng ta tạo dummy dữ liệu: 

Bước đầu tiên chúng ta tạo ra dữ liệu giả để render ra giao diện cho chúng ta thao tác đúng không nào,  mình sử dụng 1 thư viện là uuid để mỗi khi gọi hàm uuid sẽ generator 1 uuid khác nhau làm id cho dữ liệu.

dummy data jobs

- Thực hiện import job component vào app:  

Tiếp theo chúng ta tạo component có tên là Jobs và import nó vào App component để render ra giao diện.

Tạo component có tên là Job và import nó vào App component

- Thực hiện style cho app:

Chúng ta tiến hành style đơn giản khung view cho ứng dụng.

thực hiện style cho App

- Thực hiện xây dựng UI và logic cho job component:

Bắt đầu xây dựng logic với Job component nào, chúng ta tạo UI bằng cách bọc DragDropContext vùng mà chúng ta sẽ kéo thả và sử dụng hàm onDragEnd để bắt sự kiện khi người dùng kéo thả khối. ở trên mình có dùng dummyData để làm initialValues cho state jobs. 

Sau đó mình map render tiếp column và trong column thì có các row item như hình mình minh họa ở phía dưới, mình bọc chúng lại bằng Droppable để quy định vùng có thể được kéo thả, cuối cùng là chúng ta style lúc trong trạng thái kéo thả thì opacity giảm một chút nào.

Sau khi đã có giao diện mà chúng ta mong muốn chúng ta đã có thể bắt đầu kéo thả các khối theo ý thích, tuy nhiên lúc này các vị trí kéo thả vẫn chưa được chạy đúng như ta mong muốn vì data mà chúng ta truyền vào mặc định chưa thay đổi, để ứng dụng hoạt động đúng như mong đợi chúng ta cần phải xử lí logic code sao cho mapping data và cả UI. Điều đó sẽ được xử lí trong hàm handleDragEnd.

Trong hàm handleDragEnd chúng ta nhận 1 value là giá trị khi thực hiện event draggble, đầu tiên mình sẽ kiểm tra có value tồn tại hay không nếu không có sẽ ngưng xử lí và nếu có data thì chúng ta xử lí chúng tiếp.

Mỗi lần kéo thả sẽ sinh ra 2 properties, là source và destination. Source là điểm ban đầu của khối block bạn kéo và destination là điểm mà bạn kéo đến, trong đó sẽ tồn tại kèm theo một số thông tin khác như id, name và một số data khác liên quan đến khối đang được kéo thả. Lúc này sẽ mình sẽ chia làm 2 trường hợp là kéo item trên cùng 1 column và kéo item khác column.

Trường hợp thứ nhất khi cùng column source và destination sẽ có cùng droppableId, sau đó chúng ta lấy ra vị trí của source và destination thông qua properties là index. Nhờ vào đó mình lấy ra được sourceCol tức là data hiện tại mình đang kéo thả trên column đó, tiếp theo chúng ta dùng index source và destination vừa tìm được ta tìm item là row trên column. Sau khi đã có được data của row source và destination đó, ta thực hiện chuyển đổi data qua lại giữa chúng bằng cách tìm đúng vị trí và thay source data thành destination và ngược lại. Như vậy, thì data giữa chúng cũng đã được hoán vị trí, bạn sẽ kéo thả được ứng dụng mong muốn trên cùng 1 column.

Trường hợp thứ hai là khi khác column source và destination sẽ khác droppableId chúng ta cũng thực hiện tìm vị trí data của chúng thông qua index mà ta thu thập được khi kéo thả sự kiện handleDragEnd được sinh ra. Nhưng mà lúc này ta sẽ không làm như cách ở trên thay vì chúng ta thực hiện hoán đổi vị trí thì ta sẽ overrides lại mảng data của column đó. Như vậy, thì data giữa chúng cũng sẽ được map khi chúng ta thực hiện kéo thả data và UI cũng sẽ được đáp ứng đúng như mong đợi.

logic cho Job component

- Chúng ta thực hiện style cho job component.

style cho Job component

- Thực hiện xây dựng UI và logic cho card component: 

Đối với card component ta đơn giản là tạo ra một thẻ div để đựng item được sinh ra thông qua props.children, đối với mỗi card component ta sẽ được 1 khối khác nhau cho phép kéo thả.

logic Card component

- Chúng ta cũng thực hiện style cho card component nhé.

style Card component

3. Thành quả

Sau cùng chúng ta được thành quả là một trang web job board draggble có thể cho phép chúng ta tự do kéo thả như sau:

Job board draggble với reactJS

Kĩ thuật draggble hiện nay không còn quá xa lạ nhiều với chúng ta, đặc biệt là với vai trò là Frontend Developer. Hy vọng, với bài viết sẽ giúp ích được nhiều cho các bạn.

Nếu các bạn muốn nâng cao khả năng lập trình ReactJS có thể tham khảo khóa học ReactJs Master tại CFD Circle: https://cfdcircle.vn/khoa-hoc/khoa-hoc-lap-trinh-reactjs-master-32