Cài đặt và sử dụng — Form Drafts

Tổng quan

Plugin @digiforce-nc/plugin-form-drafts cho phép người dùng lưu nháp (draft) tự động khi đang điền form. Nếu vô tình đóng tab, mất mạng, hoặc trình duyệt crash, dữ liệu form sẽ được khôi phục khi quay lại. Draft được lưu trong IndexedDB của trình duyệt thông qua thư viện idb.

Bước 1: Kích hoạt plugin

Vào Settings → Plugin Manager, tìm plugin-form-drafts và bật lên.

Bước 2: Bật tính năng draft cho form

Sau khi kích hoạt plugin, tính năng draft không tự động bật cho tất cả form. Bạn cần bật cho từng form block:

Mở trang chứa form block cần bật draft
Vào cấu hình form block → phần Draft settings
Bật switch Enable drafts

Khi bật, form sẽ tự động lưu nháp mỗi khi giá trị thay đổi.

Cách hoạt động

Luồng tự động lưu nháp

Cơ chế lưu trữ

Plugin sử dụng IndexedDB (qua thư viện idb) thay vì localStorage:

Đặc điểm	localStorage	IndexedDB (plugin dùng)
Dung lượng	~5MB	~50MB – không giới hạn
Lưu kiểu dữ liệu	Chỉ string	Object, Array, Blob...
Async	Không	Có (non-blocking)
Phù hợp form lớn	❌	✅

Khoá duy nhất (UID) của draft

Mỗi draft được xác định bằng khoá duy nhất:

{widget_uid}:{filterByTargetKey || '__new_record__'}

widget_uid: ID của form block widget trên giao diện
filterByTargetKey: ID của record đang sửa (edit form) hoặc __new_record__ (create form)

Điều này đảm bảo draft riêng biệt cho từng form block và từng record.

Các behavior đăng ký

Plugin đăng ký 3 behavior vào FormBlockWidget:

Behavior	Thời điểm	Chức năng
`draftCreateBehavior`	`beforeRender`	Kết nối IndexedDB, kiểm tra draft cũ, khôi phục hoặc tạo draft mới
`draftSaveBehavior`	`formValuesChange`	Lưu giá trị form hiện tại vào draft
`deleteDraftBehavior`	`formSubmitSuccess`	Xoá draft sau khi submit thành công

Giao diện người dùng

Khi phát hiện draft chưa submit, plugin hiển thị thanh cảnh báo (Alert) phía trên form:

Nội dung: "Đây là bản nháp chưa submit. Bạn có thể tiếp tục chỉnh sửa và submit, hoặc nhấn 'Xoá bản nháp' để bắt đầu lại."
Nút hành động: "Xoá bản nháp" (Delete draft) — xoá draft khỏi IndexedDB và reset form về trống

Khi giá trị form thay đổi và được lưu, thông báo cập nhật:

"Bản nháp của bạn đã được lưu. Bạn có thể tiếp tục chỉnh sửa và submit, hoặc nhấn 'Xoá bản nháp' để bắt đầu lại."

Database schema

Plugin sử dụng IndexedDB database tên FormDraftsDB với object store drafts:

Trường	Kiểu	Mô tả
`uid`	`string` (keyPath)	Khoá duy nhất của draft
`values`	`object`	Giá trị form đã lưu (được deep clone qua `JSON.parse(JSON.stringify(...))`)

Lưu ý

Dữ liệu draft chỉ lưu trên trình duyệt hiện tại, không đồng bộ giữa các thiết bị. Xoá dữ liệu trình duyệt (Clear browsing data) sẽ mất draft.

Lưu ý quan trọng

Plugin phía server hiện tại chỉ là shell trống — toàn bộ logic nằm ở client
Draft được lưu mỗi khi formValuesChange event fire, không phải theo interval cố định
Giá trị form được deep clone bằng JSON.parse(JSON.stringify(values)) trước khi lưu — các object không serializable (VD: Date, function) sẽ bị mất
Sau khi submit form thành công, draft tự động bị xoá
Nếu draft rỗng (không có values), plugin tạo draft mới thay vì khôi phục