64. Tạo UI/UX thêm mới Column & Card trong ứng dụng Trello | NodeJS + MongoDB | TrungQuanDev

[@AP9-ul9fy]

chỗ này đang gặp 1 bug khi toggle để add card, vd muốn bôi đen đoạn text trong input thì cũng vô tình trigger event drag luôn

[@trungquandev]

- Oke em, case này cũng dễ ợt nha, em thử set cái attribute draggable này cho cái phần tử input chắc là được, a sẽ fix khi a quay những video tiếp theo :))) - Hoặc nếu giả sử cách trên không được thì cứ nhớ tập cách phân tích tình huống: mình trigger kéo khi nào, để tìm cách chặn hoặc chỉ bắt phần kéo thả ở những chỗ mình cần, để ý tới cái {...listeners} mà anh đã từng dạy. Lúc nào ngồi máy anh sẽ test lại xem cách nào tốt nhất rồi update thêm ở đây. developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable

[@AP9-ul9fy]

@@trungquandev tksss anh nhìu :)))

[@trungquandev]

@@AP9-ul9fy có luôn issue ở github thư viện cho em nè, search tiếng Anh chút có luôn :)) github.com/clauderic/dnd-kit/issues/477

[@trungquandev]

@@AP9-ul9fy Thử ngâm cứu đi xong rep comment cho a một phương án giải quyết gọn gàng nhất xem sao nhé, như đi làm thực tế giải quyết công việc, coi như a đang chưa biết gì 😆

[@AP9-ul9fy]

kaka fix dc r a, cấu hình lại chỗ MouseSensor ở BoardContent, chỗ Box nào cần tắt event drag đi thì thêm vào data-no-dnd='true'. Lúc đầu e cũng check thử set cái attribute draggable cho input nhưng cũng ko dc import { MouseSensor as LibMouseSensor } from '@dnd-kit/core' export class MouseSensor extends LibMouseSensor { static activators = [ { eventName: 'onMouseDown', handler: ( event ) => { return shouldHandleEvent(event.target) } } ] } function shouldHandleEvent(element) { let cur = element while (cur) { if (cur.dataset && cur.dataset.noDnd) { return false } cur = cur.parentElement } return true }

[@trungquandev]

🍀Xem xong video này rồi có cảm nghĩ gì thì bạn hãy comment bên dưới cho mình biết với nhé 😄 🔔Like video cũng như Đăng Ký Kênh ủng hộ mình & Join cộng đồng Discord hoặc Facebook rất văn minh lịch sự tại đây nha: 🔗Discord: Kiến Thức Lập Trình: discord.gg/ycSbhP6gDu 🔗Fanpage: Trung Quân DEV: facebook.com/trungquandev 🔗Group: Cộng đồng Lập Trình Web • Front-end & Back-end Việt Nam: facebook.com/groups/laptrinhwebvietnam

[@tuannguyenthai]

Hello anh, nhìn giao diện xịn quá :))

[@trungquandev]

Bản update mà lại =))

[@cuongduong6508]

Video hay quá a 👏. A xài font gì thế ạ? E có cmt mấy quả bug ở mấy bài trước, thấy đã cmt rồi nhưng cứ F5 là mất tiêu luôn k hiểu bị sao @@

[@trungquandev]

Anh không để ý vụ font lắm, a tải VSCode về rồi cài theme Atom One Dark thôi. Còn vụ bug thì em cứ chụp hoặc tái hiện bug lại cho vào Discord xem sao nhé, còn ở comment youtube nền tảng sẽ tự động block comment mà nền tảng nghi là spam hay độc hại, nhất là code nếu em cứ paste vào thì không được đâu.

[@cuongduong6508]

@@trungquandev Vâng a! Hèn chi e cứ cmt kiểu bug1: link drive abc... rồi e thêm solution có 1 vài dòng code thôi nhưng toàn bị xóa mất. Cú quá e xóa video bug rồi để e tìm bug xong e quay lại nhờ a :V

[@ductuanvu6891]

con trello này sẽ là của em :3

[@trungquandev]

Thế thì nhanh nào, anh chuẩn bị try hard làm liên tục xong khóa này luôn đây =))

[@hphau2103]

vs code của a dùng theme gì nhìn đẹp quá vậy cho em xin tên với

[@trungquandev]

Atom One Dark em nhé, lưu ý là còn tùy màn hình mà nó sẽ đậm nhạt khác nhau, như anh dùng màn 4k với set profile màu phù hợp, xong lúc sửa video filter nhẹ thêm mới ra được màu như trong video =)) Link theme: marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark

[@minhchu2718]

không hiểu sao bài e lại ra lỗi 500 luôn ấy mặc dù để đúng như này throw new ApiError(StatusCodes.NOT_FOUND, 'Board not found!') và lỗi ra như này message: "ApiError: Board not found!" stack: "Error: ApiError: Board not found! statusCode: 500

[@trungquandev]

Đặt log vào trước chỗ bị lỗi, rồi tiếp tục đặt log và kiểm tra lại các bước truyền data sang phần xử lý lỗi tập trung đúng chưa? Hiểu luồng rồi thì cứ debug ra sẽ thấy em đang nhầm ở đâu đó nhé.

[@HOINHTUANKIET]

Dạ anh ở phần thêm card này , ngoài add title card thì em muốn upload image card nữa thì em nên sử dụng gì và lưu ảnh vào mongodb như nào ạ

[@trungquandev]

Ảnh hay các file media thì sẽ lưu trữ lên các dịch vụ Cloud em nhé, phổ biến nhất là S3 của AWS, còn để dễ đăng ký tài khoản và sử dụng thì em tìm hiểu Cloudinary - đây cũng là cái mà anh sẽ dạy ở khóa Advanced nâng cao sau khóa Pro này.