Merge pull request #16220 from pateljannat/web-form-list-empty-state

fix: web form list empty state

frappe/public/js/frappe/web_form/web_form_list.js

@@ -16,7 +16,8 @@ export default class WebFormList {
 		if (this.table) {
 			Array.from(this.table.tBodies).forEach(tbody => tbody.remove());
 			let check = document.getElementById('select-all');
-			check.checked = false;
+			if (check)
+				check.checked = false;
 		}
 		this.rows = [];
 		this.page_length = 20;
@@ -131,9 +132,39 @@ export default class WebFormList {
 			this.make_table_head();
 		}
 
-		this.append_rows(this.data);
-
-		this.wrapper.appendChild(this.table);
+		if (this.data.length) {
+			this.append_rows(this.data);
+			this.wrapper.appendChild(this.table);
+		} else {
+			let new_button = "";
+			let empty_state = document.createElement("div");
+			empty_state.classList.add("no-result", "text-muted", "flex", "justify-center", "align-center");
+
+			frappe.has_permission(this.doctype, "", "create", () => {
+				new_button = `
+					<a 
+						class="btn btn-primary btn-sm btn-new-doc hidden-xs" 
+						href="${window.location.pathname}?new=1">
+						${__("Create a new {0}", [__(this.doctype)])}
+					</a>
+				`;
+
+				empty_state.innerHTML = `
+					<div class="text-center">
+						<div>
+							<img 
+								src="/assets/frappe/images/ui-states/list-empty-state.svg" 
+								alt="Generic Empty State" 
+								class="null-state">
+						</div>
+						<p class="small mb-2">${__("No {0} found", [__(this.doctype)])}</p>
+						${new_button}
+					</div>
+				`;
+
+				this.wrapper.appendChild(empty_state);
+			});
+		}
 	}
 
 	make_table_head() {

frappe/public/scss/website/index.scss

@@ -311,3 +311,16 @@ h5.modal-title {
 .empty-list-icon {
 	height: 70px;
 }
+
+.null-state {
+	height: 60px;
+	width: auto;
+	margin-bottom: var(--margin-md);
+	img {
+		fill: var(--fg-color);
+	}
+}
+
+.no-result {
+	min-height: #{"calc(100vh - 284px)"};
+}